UNPKG

@syncfusion/ej2-pivotview

Version:

The pivot grid, or pivot table, is used to visualize large sets of relational data in a cross-tabular format, similar to an Excel pivot table.

2,479 lines 128 kB
import { Dialog, Tooltip } from '@syncfusion/ej2-popups';
import { Droppable, createElement, extend, remove, addClass, closest, getInstance, select, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { prepend, append, KeyboardEvents, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Button, RadioButton, CheckBox } from '@syncfusion/ej2-buttons';
import { MaskedTextBox } from '@syncfusion/ej2-inputs';
import * as cls from '../../common/base/css-constant';
import { TreeView } from '@syncfusion/ej2-navigations';
import { ContextMenu as Menu } from '@syncfusion/ej2-navigations';
import * as events from '../../common/base/constant';
import { Accordion } from '@syncfusion/ej2-navigations';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { PivotUtil } from '../../base/util';
/**
 * Module to render Calculated Field Dialog
 */
var COUNT = 'Count';
var AVG = 'Avg';
var MEDIAN = 'Median';
var MIN = 'Min';
var MAX = 'Max';
var SUM = 'Sum';
var DISTINCTCOUNT = 'DistinctCount';
var PRODUCT = 'Product';
var STDEV = 'SampleStDev';
var STDEVP = 'PopulationStDev';
var VAR = 'SampleVar';
var VARP = 'PopulationVar';
var CALC = 'CalculatedField';
var AGRTYPE = 'AggregateType';
/** @hidden */
var CalculatedField = /** @class */ (function () {
    /**
     * Constructor for calculatedfield module.
     *
     * @param {PivotView | PivotFieldList} parent - It represent the parent.
     */
    function CalculatedField(parent) {
        /** @hidden */
        this.isFormula = false;
        /** @hidden */
        this.isRequireUpdate = false;
        this.formatTypes = ['Standard', 'Currency', 'Percent', 'Custom', 'None'];
        this.parent = parent;
        this.existingReport = null;
        this.parent.calculatedFieldModule = this;
        this.removeEventListener();
        this.addEventListener();
        this.parentID = this.parent.element.id;
        this.treeObj = null;
        this.droppable = null;
        this.newFields = null;
        this.isFieldExist = true;
        this.formulaText = null;
        this.fieldText = null;
        this.formatText = null;
        this.formatType = null;
        this.fieldType = null;
        this.parentHierarchy = null;
        this.isEdit = false;
        this.currentFieldName = null;
    }
    /**
     * To get module name.
     *
     * @returns {string} - It returns the Module name.
     */
    CalculatedField.prototype.getModuleName = function () {
        return 'calculatedField';
    };
    CalculatedField.prototype.keyActionHandler = function (e) {
        var node = e.currentTarget.querySelector('.e-node-focus');
        if (node) {
            switch (e.action) {
                case 'moveRight':
                case 'shiftE':
                    if (this.parent.dataType === 'pivot') {
                        this.displayMenu(node);
                    }
                    break;
                case 'delete':
                    if (node.tagName === 'LI' && !node.querySelector('.e-list-icon.e-format') && !node.querySelector('.e-list-icon').classList.contains('.e-icons') && (node.querySelector('.' + cls.GRID_REMOVE) &&
                        node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-list-icon'))) {
                        this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, node);
                    }
                    break;
                case 'enter':
                    {
                        var field = node.getAttribute('data-field');
                        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
                        var type = node.getAttribute('data-type');
                        var dropField = select('#' + this.parentID + 'droppable', dialog.element);
                        if (this.parent.dataType === 'pivot') {
                            if (dropField.value === '') {
                                if (type === CALC) {
                                    dropField.value = node.getAttribute('data-uid');
                                }
                                else {
                                    dropField.value = '"' + type + '(' + field + ')' + '"';
                                }
                            }
                            else if (dropField.value !== '') {
                                if (type === CALC) {
                                    dropField.value = dropField.value + node.getAttribute('data-uid');
                                }
                                else {
                                    dropField.value = dropField.value + '"' + type + '(' + field + ')' + '"';
                                }
                            }
                        }
                        else {
                            if (this.parent.olapEngineModule && this.parent.olapEngineModule.fieldList[field] &&
                                this.parent.olapEngineModule.fieldList[field].isCalculatedField) {
                                field = this.parent.olapEngineModule.fieldList[field].tag;
                            }
                            if (dropField.value === '') {
                                dropField.value = field;
                            }
                            else if (dropField.value !== '') {
                                dropField.value = dropField.value + field;
                            }
                        }
                    }
                    break;
            }
        }
    };
    /**
     * Trigger while click treeview icon.
     *
     * @param  {NodeClickEventArgs} e - Click event argument.
     * @returns {void}
     */
    CalculatedField.prototype.fieldClickHandler = function (e) {
        var node = closest(e.event.target, 'li');
        if (e.event.target.classList.contains(cls.FORMAT) ||
            e.event.target.classList.contains(cls.CALC_EDIT) ||
            e.event.target.classList.contains(cls.CALC_EDITED) ||
            e.event.target.classList.contains(cls.GRID_REMOVE)) {
            if (!this.parent.isAdaptive) {
                this.displayMenu(node, e.node, e.event.target);
            }
            else if (this.parent.dataType === 'olap' && this.parent.isAdaptive) {
                if (node.tagName === 'LI' && node.querySelector('.e-list-edit-icon').classList.contains(cls.CALC_EDIT) && e.event.target.classList.contains(cls.CALC_EDIT)) {
                    this.isEdit = true;
                    this.currentFieldName = node.getAttribute('data-field');
                    this.fieldText = node.getAttribute('data-caption');
                    this.formulaText = node.getAttribute('data-formula');
                    this.formatType = node.getAttribute('data-formatString');
                    this.formatText = this.formatType === 'Custom' ? node.getAttribute('data-customformatstring') : null;
                    this.fieldType = node.getAttribute('data-membertype');
                    this.parentHierarchy = this.fieldType === 'Dimension' ? node.getAttribute('data-hierarchy') : null;
                    addClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDITED);
                    removeClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDIT);
                    this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);
                }
                else if (node.tagName === 'LI' && node.querySelector('.e-list-edit-icon').classList.contains(cls.CALC_EDITED) && e.event.target.classList.contains(cls.CALC_EDITED)) {
                    this.isEdit = false;
                    this.fieldText = this.formatText = this.formulaText = this.currentFieldName = null;
                    this.parentHierarchy = this.fieldType = this.formatType = null;
                    addClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDIT);
                    removeClass([node.querySelector('.e-list-edit-icon')], cls.CALC_EDITED);
                }
                else if (node.tagName === 'LI' && node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-icons') && e.event.target.classList.contains(cls.GRID_REMOVE)) {
                    this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, e.node);
                }
            }
        }
    };
    /**
     * Trigger while click treeview icon.
     *
     * @param  {AccordionClickArgs} e - Click event argument.
     * @returns {void}
     */
    CalculatedField.prototype.accordionClickHandler = function (e) {
        if (e.item && e.item.iconCss.indexOf('e-list-icon') !== -1 &&
            closest(e.originalEvent.target, '.e-acrdn-header-icon')) {
            var node = closest(e.originalEvent.target, '.e-acrdn-header').querySelector('.' + cls.CALCCHECK);
            var fieldName = node.getAttribute('data-field');
            var captionName = node.getAttribute('data-caption');
            var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);
            var optionElement = closest(e.originalEvent.target, '.e-acrdn-header-icon');
            if (formatObj) {
                var pivotFormat = this.getFormat(formatObj.format);
                var formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
                    formatObj.format : 'Custom' : 'None');
                this.formatType = formatString;
            }
            if (optionElement.querySelector('.' + cls.CALC_EDIT) && e.originalEvent.target.classList.contains(cls.CALC_EDIT)) {
                this.isEdit = true;
                this.currentFieldName = fieldName;
                this.fieldText = captionName ? captionName : fieldName;
                this.formulaText = this.parent.engineModule.fieldList[fieldName].formula;
                this.formatText = formatObj ? formatObj.format : '';
                addClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDITED);
                removeClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDIT);
                this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);
            }
            else if (optionElement.querySelector('.' + cls.CALC_EDITED) &&
                e.originalEvent.target.classList.contains(cls.CALC_EDITED)) {
                this.isEdit = false;
                this.fieldText = this.formatText = this.formulaText = this.currentFieldName = null;
                addClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDIT);
                removeClass([optionElement.querySelector('.e-list-icon')], cls.CALC_EDITED);
            }
            else if (optionElement.querySelector('.' + cls.GRID_REMOVE) &&
                e.originalEvent.target.classList.contains(cls.GRID_REMOVE)) {
                this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), {}, true, node);
            }
        }
    };
    CalculatedField.prototype.accordionCreated = function () {
        var accordion = getInstance(select('#' + this.parentID + 'accordDiv', document), Accordion);
        var allElement = accordion.element.querySelectorAll('.e-acrdn-item');
        for (var i = 0; i < allElement.length; i++) {
            if (allElement[i].querySelector('.' + cls.CALC_EDIT) || allElement[i].querySelector('.' + cls.CALC_EDITED)) {
                var element = createElement('span', {
                    className: 'e-list-icon ' + cls.GRID_REMOVE + ' e-icons'
                });
                append([element], allElement[i].querySelector('.e-acrdn-header-icon'));
                addClass([allElement[i]], cls.SELECT_CLASS);
            }
        }
    };
    CalculatedField.prototype.clearFormula = function () {
        if (this.treeObj && this.treeObj.element.querySelector('li')) {
            removeClass(this.treeObj.element.querySelectorAll('li'), 'e-active');
            this.displayMenu(this.treeObj.element.querySelector('li'));
        }
    };
    /**
     * To display context menu.
     *
     * @param  {HTMLElement} node - It contains the value of node.
     * @param  {HTMLElement} treeNode - It contains the value of tree Node.
     * @param  {HTMLElement} target - It represent the target.
     * @returns {void}
     */
    CalculatedField.prototype.displayMenu = function (node, treeNode, target) {
        var edit = target ? target.classList.contains(cls.CALC_EDIT) : true;
        var edited = target ? target.classList.contains(cls.CALC_EDITED) : true;
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
        try {
            if (this.parent.dataType === 'pivot' && node.querySelector('.e-list-icon.e-format') &&
                node.querySelector('.e-list-icon.e-format').classList.contains(cls.ICON) &&
                !node.querySelector('.e-list-icon').classList.contains(cls.CALC_EDITED) &&
                !node.querySelector('.e-list-icon').classList.contains(cls.GRID_REMOVE) &&
                !node.querySelector('.e-list-icon').classList.contains(cls.CALC_EDIT) && node.tagName === 'LI') {
                var menuObj = select('#' + this.parentID + 'CalcContextmenu', document) ?
                    getInstance(select('#' + this.parentID + 'CalcContextmenu', document), Menu) : null;
                if (menuObj && !menuObj.isDestroyed) {
                    menuObj.destroy();
                }
                this.curMenu = node.querySelector('.' + cls.LIST_TEXT_CLASS);
                this.openContextMenu(node);
            }
            else if (node.tagName === 'LI' && (node.querySelector('.' + cls.CALC_EDIT) &&
                node.querySelector('.' + cls.CALC_EDIT).classList.contains('e-list-icon') && edit ||
                (this.parent.dataType === 'olap' && node.getAttribute('data-type') === CALC && node.classList.contains('e-active') && ((target && !target.classList.contains(cls.GRID_REMOVE)) || !target)))) {
                this.isEdit = true;
                var fieldName = node.getAttribute('data-field');
                var caption = node.getAttribute('data-caption');
                this.currentFieldName = fieldName;
                inputObj.value = caption;
                inputObj.dataBind();
                var formatString = node.getAttribute('data-formatString');
                var dialogElement = dialog.element;
                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
                var customFormatString = node.getAttribute('data-customformatstring');
                if (this.parent.dataType === 'olap') {
                    var memberType = node.getAttribute('data-membertype');
                    var parentHierarchy = node.getAttribute('data-hierarchy');
                    var expression = node.getAttribute('data-formula');
                    var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
                    var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                    var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
                    fieldTitle.innerText = this.parent.localeObj.getConstant('caption');
                    select('#' + this.parentID + 'droppable', document).value = expression;
                    memberTypeDrop.readonly = true;
                    memberTypeDrop.value = memberType;
                    memberTypeDrop.dataBind();
                    if (memberType === 'Dimension') {
                        hierarchyDrop.value = parentHierarchy;
                    }
                }
                else {
                    addClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDIT);
                    removeClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDITED);
                    addClass([node.querySelector('.e-list-icon')], cls.CALC_EDITED);
                    removeClass([node.querySelector('.e-list-icon')], cls.CALC_EDIT);
                    node.querySelector('.' + cls.CALC_EDITED).setAttribute('title', this.parent.localeObj.getConstant('clearCalculatedField'));
                    select('#' + this.parentID + 'droppable', document).value = node.getAttribute('data-uid');
                }
                if (formatString !== '') {
                    ddlFormatTypes.value = formatString;
                    ddlFormatTypes.dataBind();
                }
                customFormat.value = customFormatString;
                customFormat.dataBind();
            }
            else if (node.tagName === 'LI' && (node.querySelector('.' + cls.CALC_EDITED) &&
                node.querySelector('.' + cls.CALC_EDITED).classList.contains('e-list-icon') && edited ||
                (this.parent.dataType === 'olap' && !node.classList.contains('e-active')))) {
                this.isEdit = false;
                inputObj.value = '';
                inputObj.dataBind();
                var dialogElement = dialog.element;
                var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
                customFormat.value = '';
                customFormat.dataBind();
                if (this.parent.dataType === 'olap') {
                    var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
                    var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
                    var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                    var fieldTitle = select('#' + this.parentID + '_' + 'FieldNameTitle', dialogElement);
                    fieldTitle.innerText = this.parent.localeObj.getConstant('fieldTitle');
                    hierarchyDrop.index = 0;
                    hierarchyDrop.dataBind();
                    ddlFormatTypes.index = 0;
                    ddlFormatTypes.dataBind();
                    memberTypeDrop.index = 0;
                    memberTypeDrop.readonly = false;
                    memberTypeDrop.dataBind();
                }
                else {
                    addClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDIT);
                    removeClass(this.treeObj.element.querySelectorAll('.' + cls.CALC_EDITED), cls.CALC_EDITED);
                    node.querySelector('.' + cls.CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));
                }
                select('#' + this.parentID + 'droppable', document).value = '';
            }
            else if (node.tagName === 'LI' && (node.querySelector('.' + cls.GRID_REMOVE) &&
                node.querySelector('.' + cls.GRID_REMOVE).classList.contains('e-list-icon')) && !edit && !edited) {
                this.parent.actionObj.actionName = events.removeField;
                if (this.parent.actionBeginMethod()) {
                    return;
                }
                var dropField = select('#' + this.parentID + 'droppable', document);
                var field = {
                    name: this.isEdit ? this.currentFieldName : inputObj.value,
                    caption: inputObj.value,
                    formula: dropField.value
                };
                this.createConfirmDialog(this.parent.localeObj.getConstant('alert'), this.parent.localeObj.getConstant('removeCalculatedField'), field, true, treeNode);
            }
        }
        catch (execption) {
            this.parent.actionFailureMethod(execption);
        }
    };
    CalculatedField.prototype.removeCalcField = function (node) {
        var dataSourceSettings = this.parent.dataSourceSettings;
        var fieldName = node.getAttribute('data-field');
        var calcfields = dataSourceSettings.calculatedFieldSettings;
        var engineModule;
        if (this.parent.dataType === 'pivot') {
            if (!this.parent.isAdaptive) {
                this.treeObj.removeNodes([node]);
            }
            else {
                var index = parseInt(node.getAttribute('id').split(this.parentID + '_')[1], 10);
                if (typeof index === 'number') {
                    var accordion = getInstance(select('#' + this.parentID + 'accordDiv', document), Accordion);
                    accordion.hideItem(index);
                }
            }
        }
        for (var i = 0; i < calcfields.length; i++) {
            if (calcfields[i] && calcfields[i].name === fieldName) {
                calcfields.splice(i, 1);
                break;
            }
        }
        if (this.parent.dataType === 'olap') {
            engineModule = this.parent.olapEngineModule;
            var fields_1 = engineModule.fieldListData ?
                engineModule.fieldListData : [];
            for (var _i = 0, _a = Object.keys(fields_1); _i < _a.length; _i++) {
                var item = _a[_i];
                if (fields_1[parseInt(item, 10)].name === fieldName) {
                    var index = parseInt(item, 10);
                    if (typeof (index) === 'number') {
                        fields_1.splice(index, 1);
                        break;
                    }
                }
            }
            var parentID = this.treeObj.getNode(node).parentID;
            this.treeObj.removeNodes([node]);
            if (calcfields.length <= 0) {
                this.treeObj.removeNodes([parentID]);
            }
        }
        else {
            engineModule = this.parent.engineModule;
        }
        if (engineModule.fields) {
            for (var i = 0; i < engineModule.fields.length; i++) {
                if (engineModule.fields[i] === fieldName) {
                    engineModule.fields.splice(i, 1);
                    break;
                }
            }
        }
        if (engineModule.savedFieldList && engineModule.savedFieldList[fieldName]) {
            delete engineModule.savedFieldList[fieldName];
        }
        if (engineModule.fieldList && engineModule.fieldList[fieldName]) {
            delete engineModule.fieldList[fieldName];
        }
        var formatFields = dataSourceSettings.formatSettings;
        for (var i = 0; i < formatFields.length; i++) {
            if (formatFields[i] && formatFields[i].name === fieldName) {
                formatFields.splice(i, 1);
                break;
            }
        }
        var fields = [dataSourceSettings.values, dataSourceSettings.rows, dataSourceSettings.columns, dataSourceSettings.filters];
        for (var i = 0, n = fields.length; i < n; i++) {
            for (var j = 0, length_1 = fields[i].length; j < length_1; j++) {
                if (fields[i][j].name === fieldName) {
                    fields[i].splice(j, 1);
                    break;
                }
            }
        }
        if (this.isEdit && this.currentFieldName === fieldName) {
            var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
            this.isEdit = false;
            inputObj.value = '';
            this.currentFieldName = this.formatText = this.fieldText = this.formatType = null;
            this.formulaText = this.fieldType = this.parentHierarchy = null;
        }
        if ((!isNullOrUndefined(this.parent.isDeferLayoutUpdate) &&
            !this.parent.isDeferLayoutUpdate) || (this.parent.pivotGridModule &&
            !this.parent.pivotGridModule.pivotDeferLayoutUpdate) || this.parent.getModuleName() !== 'pivotfieldlist') {
            this.parent.updateDataSource();
        }
        this.closeErrorDialog();
    };
    /**
     * To set position for context menu.
     *
     * @param {HTMLElement} node - It contains the value of node.
     * @returns {void}
     */
    CalculatedField.prototype.openContextMenu = function (node) {
        var _this = this;
        var fieldName = node.getAttribute('data-field');
        var type = this.parent.engineModule.fieldList[fieldName].type !== 'number' ? 'string' : 'number';
        var validSummaryTypes = (type === 'string' ? this.getValidSummaryType().slice(0, 2) : this.getValidSummaryType());
        var eventArgs = {
            cancel: false, fieldName: fieldName,
            aggregateTypes: this.getMenuItems(type).slice()
        };
        var control = this.parent.getModuleName() === 'pivotfieldlist' && this.parent.isPopupView ?
            this.parent.pivotGridModule : this.parent;
        control.trigger(events.aggregateMenuOpen, eventArgs, function (observedArgs) {
            if (!observedArgs.cancel) {
                var duplicateTypes = [];
                var items = [];
                for (var _i = 0, _a = observedArgs.aggregateTypes; _i < _a.length; _i++) {
                    var option = _a[_i];
                    if (validSummaryTypes.indexOf(option) > -1 && duplicateTypes.indexOf(option) === -1) {
                        duplicateTypes.push(option);
                        items.push({
                            id: _this.parent.element.id + 'Calc_' + option,
                            text: _this.parent.localeObj.getConstant(option)
                        });
                    }
                }
                _this.createMenu(items, node);
                var pos = node.getBoundingClientRect();
                var offset = window.scrollY || document.documentElement.scrollTop;
                var menuObj = getInstance(select('#' + _this.parentID + 'CalcContextmenu', document), Menu);
                if (_this.parent.enableRtl) {
                    menuObj.open(pos.top + offset, pos.left - 100);
                }
                else {
                    menuObj.open(pos.top + offset, pos.left + 150);
                }
            }
        });
    };
    /**
     * Triggers while select menu.
     *
     * @param  {MenuEventArgs} menu - It represent the menu.
     * @returns {void}
     */
    CalculatedField.prototype.selectContextMenu = function (menu) {
        if (menu.element.textContent !== null) {
            var field = closest(this.curMenu, '.e-list-item').getAttribute('data-caption');
            closest(this.curMenu, '.e-list-item').setAttribute('data-type', menu.element.id.split('_').pop());
            this.curMenu.textContent = field + ' (' + menu.element.textContent + ')';
            addClass([this.curMenu.parentElement.parentElement], ['e-node-focus', 'e-hover']);
            this.curMenu.parentElement.parentElement.setAttribute('tabindex', '0');
            this.curMenu.parentElement.parentElement.focus();
        }
    };
    /**
     * To create context menu.
     *
     * @param {MenuItemModel[]} menuItems - It represent the menuItems.
     * @param {HTMLElement} node - It represent the node data.
     * @returns {void}
     */
    CalculatedField.prototype.createMenu = function (menuItems, node) {
        var _this = this;
        var menuOptions = {
            cssClass: this.parentID + 'calculatedmenu' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
            items: menuItems,
            enableRtl: this.parent.enableRtl,
            locale: this.parent.locale,
            // beforeOpen: this.beforeMenuOpen.bind(this),
            select: this.selectContextMenu.bind(this),
            onClose: function () {
                _this.treeObj.element.focus();
                addClass([node], ['e-hover', 'e-node-focus']);
            }
        };
        var contextMenu;
        if (select('#' + this.parentID + 'CalcContextmenu', document)) {
            contextMenu = select('#' + this.parentID + 'CalcContextmenu', document);
        }
        else {
            contextMenu = createElement('ul', {
                id: this.parentID + 'CalcContextmenu'
            });
        }
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        dialog.element.appendChild(contextMenu);
        var menuObj = new Menu(menuOptions);
        menuObj.isStringTemplate = true;
        menuObj.appendTo(contextMenu);
    };
    /**
     * Triggers while click OK button.
     *
     * @returns {void}
     */
    CalculatedField.prototype.applyFormula = function () {
        var _this = this;
        var currentObj = this;
        var isExist = false;
        removeClass([document.getElementById(this.parentID + 'ddlelement')], cls.EMPTY_FIELD);
        var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
        this.newFields =
            extend([], this.parent.dataSourceSettings.calculatedFieldSettings, null, true);
        var eventArgs = {
            fieldName: this.isEdit ? this.currentFieldName : inputObj.value,
            calculatedField: this.getCalculatedFieldInfo(),
            calculatedFieldSettings: PivotUtil.cloneCalculatedFieldSettings(this.parent.dataSourceSettings.calculatedFieldSettings),
            cancel: false
        };
        var control = this.parent.getModuleName() === 'pivotfieldlist' &&
            this.parent.isPopupView ? this.parent.pivotGridModule : this.parent;
        control.trigger(events.calculatedFieldCreate, eventArgs, function (observedArgs) {
            if (!observedArgs.cancel) {
                var calcInfo = observedArgs.calculatedField;
                if (!_this.isEdit) {
                    if (currentObj.parent.dataType === 'olap') {
                        var field = calcInfo.name;
                        if (currentObj.parent.olapEngineModule.fieldList[field] &&
                            currentObj.parent.olapEngineModule.fieldList[field].type !== 'CalculatedField') {
                            isExist = true;
                        }
                    }
                    else {
                        for (var _i = 0, _a = Object.keys(currentObj.parent.engineModule.fieldList); _i < _a.length; _i++) {
                            var key = _a[_i];
                            if (calcInfo.name && calcInfo.name === key &&
                                currentObj.parent.engineModule.fieldList[key].aggregateType !== 'CalculatedField') {
                                isExist = true;
                            }
                        }
                    }
                }
                if (isExist) {
                    currentObj.parent.pivotCommon.errorDialog.createErrorDialog(currentObj.parent.localeObj.getConstant('error'), currentObj.parent.localeObj.getConstant('fieldExist'));
                    return;
                }
                _this.existingReport = extend({}, _this.parent.dataSourceSettings, null, true);
                var report = _this.parent.dataSourceSettings;
                if (!isNullOrUndefined(calcInfo.name) && calcInfo.name !== '' &&
                    !isNullOrUndefined(calcInfo.caption) && calcInfo.caption !== '' && calcInfo.formula && calcInfo.formula !== '') {
                    var field = void 0;
                    if (_this.parent.dataType === 'olap') {
                        field = {
                            name: calcInfo.name,
                            formula: calcInfo.formula,
                            formatString: calcInfo.formatString
                        };
                        if (!isNullOrUndefined(calcInfo.hierarchyUniqueName)) {
                            field.hierarchyUniqueName = calcInfo.hierarchyUniqueName;
                        }
                        _this.isFieldExist = false;
                        if (!_this.isEdit) {
                            for (var i = 0; i < report.calculatedFieldSettings.length; i++) {
                                if (report.calculatedFieldSettings[i].name === field.name) {
                                    _this.createConfirmDialog(currentObj.parent.localeObj.getConstant('alert'), currentObj.parent.localeObj.getConstant('confirmText'), calcInfo);
                                    return;
                                }
                            }
                        }
                        else {
                            for (var i = 0; i < report.calculatedFieldSettings.length; i++) {
                                if (report.calculatedFieldSettings[i].name === field.name && _this.isEdit) {
                                    report.calculatedFieldSettings[i].hierarchyUniqueName = calcInfo.hierarchyUniqueName;
                                    _this.parent.olapEngineModule.fieldList[field.name].caption = calcInfo.caption;
                                    report.calculatedFieldSettings[i].formatString = field.formatString;
                                    report.calculatedFieldSettings[i].formula = field.formula;
                                    field = report.calculatedFieldSettings[i];
                                    _this.updateFormatSettings(report, field.name, calcInfo.formatString);
                                    _this.parent.olapEngineModule.getFormattedFields(report.formatSettings);
                                    if (_this.parent.olapEngineModule.formatFields[field.name]) {
                                        if (_this.parent.olapEngineModule.formatFields[field.name].format) {
                                            _this.parent.olapEngineModule.formatFields[field.name].format =
                                                _this.getFormat(field.formatString);
                                        }
                                        else {
                                            delete _this.parent.olapEngineModule.formatFields[field.name];
                                        }
                                    }
                                    _this.isFieldExist = true;
                                    break;
                                }
                            }
                            var axisFields = [report.rows, report.columns, report.values, report.filters];
                            var isFieldExist = false;
                            for (var _b = 0, axisFields_1 = axisFields; _b < axisFields_1.length; _b++) {
                                var fields = axisFields_1[_b];
                                for (var _c = 0, fields_2 = fields; _c < fields_2.length; _c++) {
                                    var item = fields_2[_c];
                                    if (item.isCalculatedField && field.name !== null &&
                                        item.name === field.name && _this.isEdit) {
                                        item.caption = calcInfo.caption;
                                        _this.isFieldExist = true;
                                        isFieldExist = true;
                                        break;
                                    }
                                }
                                if (isFieldExist) {
                                    break;
                                }
                            }
                        }
                        if (!_this.isFieldExist) {
                            report.calculatedFieldSettings.push(field);
                            _this.updateFormatSettings(report, field.name, calcInfo.formatString);
                            _this.parent.olapEngineModule.getFormattedFields(report.formatSettings);
                            if (_this.parent.olapEngineModule.formatFields[field.name]) {
                                if (_this.parent.olapEngineModule.formatFields[field.name].format) {
                                    _this.parent.olapEngineModule.formatFields[field.name].format = _this.getFormat(field.formatString);
                                }
                                else {
                                    delete _this.parent.olapEngineModule.formatFields[field.name];
                                }
                            }
                        }
                        _this.parent.lastCalcFieldInfo = field;
                    }
                    else {
                        field = {
                            name: calcInfo.name,
                            caption: calcInfo.caption,
                            type: 'CalculatedField'
                        };
                        var cField = {
                            name: calcInfo.name,
                            formula: calcInfo.formula
                        };
                        if (!isNullOrUndefined(calcInfo.formatString)) {
                            cField.formatString = calcInfo.formatString;
                        }
                        _this.isFieldExist = true;
                        if (!_this.isEdit) {
                            for (var i = 0; i < report.values.length; i++) {
                                if (report.values[i].type === CALC && report.values[i].name === field.name) {
                                    for (var j = 0; j < report.calculatedFieldSettings.length; j++) {
                                        if (report.calculatedFieldSettings[j].name === field.name) {
                                            _this.createConfirmDialog(currentObj.parent.localeObj.getConstant('alert'), currentObj.parent.localeObj.getConstant('confirmText'), calcInfo);
                                            return;
                                        }
                                    }
                                    _this.isFieldExist = false;
                                }
                            }
                        }
                        else {
                            for (var i = 0; i < report.values.length; i++) {
                                if (report.values[i].type === CALC && field.name !== null &&
                                    report.values[i].name === field.name && _this.isEdit) {
                                    for (var j = 0; j < report.calculatedFieldSettings.length; j++) {
                                        if (report.calculatedFieldSettings[j].name === field.name) {
                                            report.values.splice(i, 1);
                                            report.values.splice(i, 0, field);
                                            _this.currentFormula = report.calculatedFieldSettings[j].formula;
                                            report.calculatedFieldSettings.splice(j, 1);
                                            report.calculatedFieldSettings.splice(j, 0, cField);
                                            _this.updateFormatSettings(report, field.name, calcInfo.formatString);
                                            _this.isFieldExist = false;
                                        }
                                    }
                                }
                            }
                        }
                        if (_this.isFieldExist) {
                            report.values.push(field);
                            report.calculatedFieldSettings.push(cField);
                            _this.updateFormatSettings(report, field.name, calcInfo.formatString);
                        }
                        _this.parent.lastCalcFieldInfo = cField;
                    }
                    _this.addFormula(report, field.name);
                }
                else {
                    if (isNullOrUndefined(calcInfo.name) || calcInfo.name === '' ||
                        isNullOrUndefined(calcInfo.caption) || calcInfo.caption === '') {
                        var inputObj_1 = getInstance(select('#' + _this.parentID + 'ddlelement', document), MaskedTextBox);
                        inputObj_1.value = '';
                        addClass([document.getElementById(_this.parentID + 'ddlelement')], cls.EMPTY_FIELD);
                        document.getElementById(_this.parentID + 'ddlelement').focus();
                    }
                    else {
                        _this.triggerActionCompleteEvent();
                    }
                }
            }
            else {
                _this.endDialog();
                _this.parent.lastCalcFieldInfo = {};
                _this.isFormula = false;
            }
        });
    };
    CalculatedField.prototype.getCalculatedFieldInfo = function () {
        var element = select('#' + this.parentID + 'calculateddialog', document);
        var dialog = element ? getInstance(element, Dialog) : undefined;
        var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
        var dropField = select('#' + this.parentID + 'droppable', document);
        var dialogElement = this.parent.isAdaptive ?
            this.parent.dialogRenderer.adaptiveElement.element : dialog.element;
        var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
        var field = {
            name: this.isEdit ? this.currentFieldName : inputObj.value,
            caption: inputObj.value,
            formula: dropField.value
        };
        var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
        field.formatString = (ddlFormatTypes.value === 'Custom' ? customFormat.value : (ddlFormatTypes.value === 'None' ? null : ddlFormatTypes.value));
        if (this.parent.dataType === 'olap') {
            var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
            var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
            if (memberTypeDrop.value === 'Dimension') {
                field.hierarchyUniqueName = hierarchyDrop.value;
            }
        }
        return field;
    };
    CalculatedField.prototype.updateFormatSettings = function (report, fieldName, formatString) {
        var newFormat = { name: fieldName, format: formatString, useGrouping: true };
        var isFormatExist = false;
        for (var i = 0; i < report.formatSettings.length; i++) {
            if (report.formatSettings[i].name === fieldName) {
                if (formatString === 'undefined' || formatString === undefined || formatString === '') {
                    report.formatSettings.splice(i, 1);
                    isFormatExist = true;
                    break;
                }
                else {
                    var formatObj = report.formatSettings[i].properties ?
                        report.formatSettings[i].properties : report.formatSettings[i];
                    formatObj.format = formatString;
                    report.formatSettings.splice(i, 1, formatObj);
                    isFormatExist = true;
                    break;
                }
            }
        }
        if (!isFormatExist && formatString !== '' && !isNullOrUndefined(formatString)) {
            report.formatSettings.push(newFormat);
        }
    };
    CalculatedField.prototype.addFormula = function (report, field) {
        this.isFormula = true;
        this.field = field;
        this.parent.setProperties({ dataSourceSettings: report }, true);
        if (this.parent.getModuleName() === 'pivotfieldlist' && (this.parent.isDeferLayoutUpdate ||
            (this.parent.pivotGridModule && this.parent.pivotGridModule.pivotDeferLayoutUpdate))) {
            this.parent.isRequiredUpdate = false;
        }
        try {
            var actionInfo = {
                calculatedFieldInfo: this.parent.lastCalcFieldInfo
            };
            this.parent.actionObj.actionInfo = actionInfo;
            var actionName = (this.parent.actionObj.actionName === events.editCalculatedField) ?
                events.calculatedFieldEdited : events.calculatedFieldApplied;
            this.parent.actionObj.actionName = actionName;
            this.parent.updateDataSource(false);
            var pivot = (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.pivotGridModule) ?
                this.parent.pivotGridModule : this.parent;
            if (pivot && pivot.dataSourceSettings.mode !== 'Server') {
                this.endDialog();
            }
            else {
                this.isRequireUpdate = true;
            }
            if (this.parent.getModuleName() === 'pivotfieldlist' &&
                this.parent.renderMode === 'Fixed' && this.parent.isDeferLayoutUpdate) {
                this.parent.pivotChange = true;
            }
        }
        catch (exception) {
            this.showError();
        }
    };
    /**
     *
     * @returns {void}
     * @hidden */
    CalculatedField.prototype.endDialog = function () {
        this.isEdit = false;
        var element = select('#' + this.parentID + 'calculateddialog', document);
        var dialog = element ? getInstance(element, Dialog) : undefined;
        if (dialog) {
            dialog.close();
        }
        else {
            var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
            inputObj.value = '';
            this.currentFieldName = this.formatText = this.fieldText = this.formatType = null;
            this.formulaText = this.fieldType = this.parentHierarchy = null;
            var dialogElement = this.parent.isAdaptive ?
                this.parent.dialogRenderer.parentElement : dialog.element;
            this.parent.dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT).value = '';
            select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement).value = '';
            select('#' + this.parentID + 'Custom_Format_Element', this.parent.dialogRenderer.parentElement).value = '';
            if (this.parent.dataType === 'olap') {
                var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
                var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
                memberTypeDrop.index = 0;
                memberTypeDrop.readonly = false;
                memberTypeDrop.dataBind();
                hierarchyDrop.index = 0;
                hierarchyDrop.enabled = false;
                hierarchyDrop.dataBind();
            }
            var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
            var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
            ddlFormatTypes.index = this.parent.dataType === 'olap' ? 0 : 4;
            ddlFormatTypes.dataBind();
            customFormat.enabled = false;
            customFormat.dataBind();
        }
    };
    /**
     *
     * @returns {void}
     * @hidden */
    CalculatedField.prototype.showError = function () {
        if (this.parent.engineModule.fieldList[this.field]) {
            delete this.parent.engineModule.fieldList[this.field];
        }
        this.parent.setProperties({ dataSourceSettings: this.existingReport }, true);
        if (this.isEdit) {
            var calcFields = this.parent.dataSourceSettings.calculatedFieldSettings;
            for (var i = 0; calcFields && i < calcFields.length; i++) {
                if (calcFields[i].name === this.field) {
                    calcFields[i].formula = this.currentFormula;
                    break;
                }
            }
        }
        else if (this.parent.engineModule.fields) {
            for (var i = 0; i < this.parent.engineModule.fields.length; i++) {
                if (this.parent.engineModule.fields[i] === this.field) {
                    this.parent.engineModule.fields.splice(i, 1);
                    break;
                }
            }
        }
        this.parent.lastCalcFieldInfo = {};
        this.triggerActionCompleteEvent();
        this.parent.updateDataSource(false);
        this.isFormula = false;
    };
    /**
     * To get treeview data
     *
     * @param  {PivotView | PivotFieldList} parent - It represent the parent.
     * @returns {any} - Field List Data.
     */
    CalculatedField.prototype.getFieldListData = function (parent) {
        var fields = [];
        if (this.parent.dataType === 'olap') {
            fields =
                PivotUtil.getClonedData(parent.olapEngineModule.fieldListData ?
                    parent.olapEngineModule.fieldListData : []);
            for (var _i = 0, _a = fields; _i < _a.length; _i++) {
                var item = _a[_i];
                if (item.spriteCssClass &&
                    (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
                        item.spriteCssClass.indexOf('e-level-members') > -1)) {
                    item.hasChildren = true;
                }
                else if (item.spriteCssClass &&
                    (item.spriteCssClass.indexOf('e-namedSetCDB-icon') > -1)) {
                    item.hasChildren = false;
                }
                else if (item.spriteCssClass &&
                    (item.spriteCssClass.indexOf('e-calcMemberGroupCDB') > -1)) {
                    item.expanded = this.isEdit;
                }
            }
        }
        else {
            for (var _b = 0, _c = (parent.engineModule.fieldList ? Object.keys(parent.engineModule.fieldList) : []); _b < _c.length; _b++) {
                var key = _c[_b];
                var type = null;
                var typeVal = null;
                var field = parent.engineModule.fieldList[key];
                if ((field.type !== 'number' || parent.engineModule.fieldList[key].type === 'include' || parent.engineModule.fieldList[key].type === 'exclude') && field.aggregateType !== 'DistinctCount') {
                    typeVal = COUNT;
                }
                else {
                    typeVal = field.aggregateType !== undefined ?
                        (field.aggregateType) : SUM;
                }
                type = this.parent.localeObj.getConstant(typeVal);
                fields.push({
                    index: field.index,
                    name: (this.parent.enableHtmlSanitizer ?
                        SanitizeHtmlHelper.sanitize(field.caption) : field.caption) + ' (' + type + ')',
                    type: typeVal,
                    icon: cls.FORMAT + ' ' + cls.ICON,
                    formula: (this.parent.enableHtmlSanitizer ?
                        SanitizeHtmlHelper.sanitize(field.formula) : field.formula),
                    field: (this.parent.enableHtmlSanitizer ?
                        SanitizeHtmlHelper.sanitize(key) : key),
                    caption: this.parent.enableHtmlSanitizer ?
                        SanitizeHtmlHelper.sanitize(field.caption ? field.caption : key) : field.caption ? field.caption : key
                });
            }
        }
        return fields;
    };
    /**
     * Trigger while drop node in formula field.
     *
     * @param {DragAndDropEventArgs} args - It contains the value of args.
     * @returns {void}
     */
    CalculatedField.prototype.fieldDropped = function (args) {
        args.cancel = true;
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        var dropField = select('#' + this.parentID + 'droppable', dialog.element);
        removeClass([dropField], 'e-copy-drop');
        removeClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);
        var field = args.draggedNode.getAttribute('data-field');
        if (this.parent.dataType === 'olap') {
            if (this.parent.olapEngineModule.fieldList[field] &&
                this.parent.olapEngineModule.fieldList[field].isCalculatedField) {
                field = this.parent.olapEngineModule.fieldList[field].tag;
            }
            if (args.target.id === this.parentID + 'droppable' && dropField.value === '') {
                dropField.value = field;
                dropField.focus();
            }
            else if (args.target.id === (this.parentID + 'droppable') && dropField.value !== '') {
                var currentValue = dropField.value;
                var cursorPos = dropField.selectionStart;
                var textAfterText = currentValue.substring(cursorPos, currentValue.length);
                var textBeforeText = currentValue.substring(0, cursorPos);
                var textCovered = textBeforeText + field;
                dropField.value = textBeforeText + field + textAfterText;
                dropField.focus();
                dropField.setSelectionRange(textCovered.length, textCovered.length);
            }
            else {
                args.cancel = true;
            }
        }
        else {
            var type = args.draggedNode.getAttribute('data-type');
            if (args.target.id === this.parentID + 'droppable' && dropField.value === '') {
                if (type === CALC) {
                    dropField.value = args.draggedNodeData.id.toString();
                }
                else {
                    dropField.value = '"' + type + '(' + field + ')' + '"';
                }
                dropField.focus();
            }
            else if (args.target.id === (this.parentID + 'droppable') && dropField.value !== '') {
                var textCovered = void 0;
                var cursorPos = dropField.selectionStart;
                var currentValue = dropField.value;
                var textBeforeText = currentValue.substring(0, cursorPos);
                var textAfterText = currentValue.substring(cursorPos, currentValue.length);
                if (type === CALC) {
                    textCovered = textBeforeText + args.draggedNodeData.id.toString();
                    dropField.value = textBeforeText + args.draggedNodeData.id.toString() + textAfterText;
                }
                else {
                    textCovered = textBeforeText + '"' + type + '(' + field + ')' + '"';
                    dropField.value = textBeforeText + '"' + type + '(' + field + ')' + '"' + textAfterText;
                }
                dropField.focus();
                dropField.setSelectionRange(textCovered.length, textCovered.length);
            }
            else {
                args.cancel = true;
            }
        }
    };
    /**
     * To create dialog.
     *
     * @returns {void}
     */
    CalculatedField.prototype.createDialog = function () {
        var _this = this;
        if (select('#' + this.parentID + 'calculateddialog', document) !== null) {
            remove(select('#' + this.parentID + 'calculateddialog', document));
            while (!isNullOrUndefined(document.querySelector('.' + this.parentID + 'calculatedmenu'))) {
                remove(document.querySelector('.' + this.parentID + 'calculatedmenu'));
            }
        }
        var calculatedFieldElement = createElement('div', {
            id: this.parentID + 'calculateddialog',
            className: cls.CALCDIALOG + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_CALCDIALOG : '')
        });
        this.parent.element.appendChild(calculatedFieldElement);
        var calcButtons = [
            {
                click: this.applyFormula.bind(this),
                isFlat: false,
                buttonModel: {
                    content: this.parent.localeObj.getConstant('ok'),
                    isPrimary: true,
                    cssClass: this.parent.cssClass
                }
            },
            {
                click: this.cancelClick.bind(this),
                isFlat: false,
                buttonModel: {
                    content: this.parent.localeObj.getConstant('cancel'),
                    cssClass: this.parent.cssClass
                }
            }
        ];
        if (this.parent.dataType === 'olap') {
            var clearButton = {
                click: this.clearFormula.bind(this),
                isFlat: false,
                buttonModel: {
                    cssClass: 'e-calc-clear-btn' + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                    content: this.parent.localeObj.getConstant('clear')
                }
            };
            calcButtons.splice(0, 0, clearButton);
        }
        var dialog = new Dialog({
            allowDragging: true,
            position: { X: 'center', Y: 'center' },
            buttons: calcButtons,
            close: this.closeDialog.bind(this),
            beforeOpen: this.beforeOpen.bind(this),
            open: function () {
                if (select('#' + _this.parentID + 'ddlelement', dialog.element)) {
                    select('#' + _this.parentID + 'ddlelement', dialog.element).focus();
                }
            },
            animationSettings: { effect: 'Zoom' },
            width: '25%',
            isModal: true,
            closeOnEscape: true,
            enableRtl: this.parent.enableRtl,
            locale: this.parent.locale,
            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
            showCloseIcon: true,
            header: this.parent.localeObj.getConstant('createCalculatedField'),
            target: document.body,
            cssClass: this.parent.cssClass
        });
        dialog.isStringTemplate = true;
        dialog.appendTo(calculatedFieldElement);
    };
    CalculatedField.prototype.cancelClick = function () {
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        dialog.close();
        this.isEdit = false;
    };
    CalculatedField.prototype.beforeOpen = function () {
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        // dialog.element.querySelector('.e-dlg-header').innerText = this.parent.localeObj.getConstant('createCalculatedField');
        dialog.element.querySelector('.e-dlg-header').setAttribute('title', this.parent.localeObj.getConstant('createCalculatedField'));
    };
    CalculatedField.prototype.closeDialog = function () {
        if (this.parent.getModuleName() === 'pivotfieldlist') {
            if (this.parent.actionObj.actionName !== 'Abort') {
                this.parent.axisFieldModule.render();
            }
            if (this.parent.renderMode !== 'Fixed') {
                addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
                this.parent.dialogRenderer.fieldListDialog.show();
            }
        }
        this.destroy();
        if (!isNullOrUndefined(document.getElementById(this.parentID + 'calculateddialog'))) {
            remove(document.getElementById(this.parentID + 'calculateddialog'));
        }
        if (!isNullOrUndefined(document.querySelector('.' + this.parentID + 'calculatedmenu'))) {
            remove(document.querySelector('.' + this.parentID + 'calculatedmenu'));
        }
        var timeOut = ((this.parent.getModuleName() === 'pivotview') ||
            ((this.parent.getModuleName() === 'pivotfieldlist') &&
                this.parent.renderMode === 'Fixed')) ? 0 : 500;
        if (this.buttonCall) {
            this.buttonCall = false;
            setTimeout(this.setFocus.bind(this), timeOut);
        }
    };
    CalculatedField.prototype.setFocus = function () {
        var parentElement;
        if (this.parent.getModuleName() === 'pivotview' && this.parent.element) {
            parentElement = this.parent.element;
        }
        else if (this.parent.element && document.getElementById(this.parent.element.id + '_Container')) {
            parentElement = document.getElementById(this.parent.element.id + '_Container');
        }
        if (parentElement) {
            var pivotButtons = [].slice.call(parentElement.querySelectorAll('.e-pivot-button'));
            for (var _i = 0, pivotButtons_1 = pivotButtons; _i < pivotButtons_1.length; _i++) {
                var item = pivotButtons_1[_i];
                if (item.getAttribute('data-uid') === this.currentFieldName) {
                    item.focus();
                    break;
                }
            }
        }
    };
    /**
     * To render dialog elements.
     *
     * @returns {void}
     */
    CalculatedField.prototype.renderDialogElements = function () {
        var outerDiv = createElement('div', {
            id: this.parentID + 'outerDiv',
            className: (this.parent.dataType === 'olap' ? cls.OLAP_CALCOUTERDIV + ' ' : '') + cls.CALCOUTERDIV
        });
        var olapFieldTreeDiv = createElement('div', { id: this.parentID + 'Olap_Tree_Div', className: 'e-olap-field-tree-div' });
        var pivotCalcDiv = createElement('div', { id: this.parentID + 'Pivot_Calc_Div', className: 'e-pivot-calculated-div' });
        if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
            dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {
            var accordDiv = createElement('div', { id: this.parentID + 'accordDiv', className: cls.CALCACCORD });
            outerDiv.appendChild(accordDiv);
            var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: cls.CALCBUTTONDIV });
            var addBtn = createElement('button', {
                id: this.parentID + 'addBtn',
                className: cls.CALCADDBTN, attrs: { 'type': 'button' }
            });
            addBtn.innerText = this.parent.localeObj.getConstant('add');
            var cancelBtn = createElement('button', {
                id: this.parentID + 'cancelBtn',
                className: cls.CALCCANCELBTN, attrs: { 'type': 'button' }
            });
            cancelBtn.innerText = this.parent.localeObj.getConstant('cancel');
            buttonDiv.appendChild(cancelBtn);
            buttonDiv.appendChild(addBtn);
            outerDiv.appendChild(buttonDiv);
        }
        else {
            if (!this.parent.isAdaptive && this.parent.dataType === 'olap') {
                var formulaTitle = createElement('div', {
                    className: cls.PIVOT_FIELD_TITLE_CLASS, id: this.parentID + '_' + 'FieldNameTitle'
                });
                formulaTitle.innerText = this.parent.localeObj.getConstant('fieldTitle');
                pivotCalcDiv.appendChild(formulaTitle);
            }
            var inputDiv = createElement('div', { id: this.parentID + 'innerDiv', className: cls.CALCINPUTDIV });
            var inputObj = createElement('input', {
                id: this.parentID + 'ddlelement',
                attrs: { 'type': 'text' },
                className: cls.CALCINPUT
            });
            inputDiv.appendChild(inputObj);
            if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {
                pivotCalcDiv.appendChild(inputDiv);
            }
            else {
                outerDiv.appendChild(inputDiv);
            }
            var wrapDiv = createElement('div', { id: this.parentID + 'control_container', className: cls.TREEVIEWOUTER });
            if (!this.parent.isAdaptive) {
                var fieldTitle = createElement('div', {
                    className: cls.PIVOT_ALL_FIELD_TITLE_CLASS
                });
                fieldTitle.innerText = (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('allFields') :
                    this.parent.localeObj.getConstant('formulaField'));
                if (this.parent.dataType === 'olap') {
                    var headerWrapperDiv = createElement('div', { className: cls.PIVOT_ALL_FIELD_TITLE_CLASS + '-container' });
                    headerWrapperDiv.appendChild(fieldTitle);
                    var spanElement = createElement('span', {
                        attrs: {
                            'tabindex': '0',
                            'aria-disabled': 'false',
                            'aria-label': this.parent.localeObj.getConstant('fieldTooltip'),
                            'role': 'button'
                        },
                        className: cls.ICON + ' ' + cls.CALC_INFO
                    });
                    headerWrapperDiv.appendChild(spanElement);
                    var tooltip = new Tooltip({
                        content: this.parent.localeObj.getConstant('fieldTooltip'),
                        position: (this.parent.enableRtl ? 'RightCenter' : 'LeftCenter'),
                        target: '.' + cls.CALC_INFO,
                        offsetY: (this.parent.enableRtl ? -10 : -10),
                        locale: this.parent.locale,
                        enableRtl: this.parent.enableRtl,
                        enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                        width: 220,
                        cssClass: this.parent.cssClass
                    });
                    tooltip.appendTo(headerWrapperDiv);
                    wrapDiv.appendChild(headerWrapperDiv);
                }
                else {
                    outerDiv.appendChild(fieldTitle);
                }
            }
            var treeOuterDiv = createElement('div', { className: cls.TREEVIEW + '-outer-div' });
            wrapDiv.appendChild(treeOuterDiv);
            var treeElement = createElement('div', { id: this.parentID + 'tree', className: cls.TREEVIEW });
            treeOuterDiv.appendChild(treeElement);
            if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {
                olapFieldTreeDiv.appendChild(wrapDiv);
            }
            else {
                outerDiv.appendChild(wrapDiv);
            }
            if (!this.parent.isAdaptive) {
                var formulaTitle = createElement('div', {
                    className: cls.PIVOT_FORMULA_TITLE_CLASS
                });
                formulaTitle.innerText = (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('expressionField') :
                    this.parent.localeObj.getConstant('formula'));
                if (this.parent.dataType === 'olap') {
                    pivotCalcDiv.appendChild(formulaTitle);
                }
                else {
                    outerDiv.appendChild(formulaTitle);
                }
            }
            var dropDiv = createElement('textarea', {
                id: this.parentID + 'droppable',
                className: cls.FORMULA + ' e-control e-textbox e-input',
                attrs: {
                    'placeholder': this.parent.isAdaptive ? this.parent.localeObj.getConstant('dropTextMobile') :
                        (this.parent.dataType === 'olap' ? this.parent.localeObj.getConstant('olapDropText') :
                            this.parent.localeObj.getConstant('dropText'))
                }
            });
            if (this.parent.dataType === 'olap' && !this.parent.isAdaptive) {
                pivotCalcDiv.appendChild(dropDiv);
            }
            else {
                outerDiv.appendChild(dropDiv);
            }
            if (this.parent.isAdaptive) {
                var buttonDiv = createElement('div', { id: this.parentID + 'buttonDiv', className: cls.CALCBUTTONDIV });
                var okBtn = createElement('button', {
                    id: this.parentID + 'okBtn',
                    className: cls.CALCOKBTN, attrs: { 'type': 'button' }
                });
                okBtn.innerText = this.parent.localeObj.getConstant('apply');
                buttonDiv.appendChild(okBtn);
                outerDiv.appendChild(buttonDiv);
            }
            if (this.parent.dataType === 'olap') {
                if (!this.parent.isAdaptive) {
                    var memberTypeTitle = createElement('div', {
                        className: cls.OLAP_MEMBER_TITLE_CLASS
                    });
                    memberTypeTitle.innerText = this.parent.localeObj.getConstant('memberType');
                    pivotCalcDiv.appendChild(memberTypeTitle);
                }
                var memberTypeDrop = createElement('div', { id: this.parentID + 'Member_Type_Div', className: cls.CALC_MEMBER_TYPE_DIV });
                if (this.parent.isAdaptive) {
                    outerDiv.appendChild(memberTypeDrop);
                }
                else {
                    pivotCalcDiv.appendChild(memberTypeDrop);
                    var hierarchyTitle = createElement('div', {
                        className: cls.OLAP_HIERARCHY_TITLE_CLASS
                    });
                    hierarchyTitle.innerText = this.parent.localeObj.getConstant('selectedHierarchy');
                    pivotCalcDiv.appendChild(hierarchyTitle);
                }
                var hierarchyDrop = createElement('div', {
                    id: this.parentID + 'Hierarchy_List_Div', className: cls.CALC_HIERARCHY_LIST_DIV
                });
                if (this.parent.isAdaptive) {
                    outerDiv.appendChild(hierarchyDrop);
                }
                else {
                    pivotCalcDiv.appendChild(hierarchyDrop);
                }
            }
            if (!this.parent.isAdaptive) {
                var formatTitle = createElement('div', {
                    className: cls.PIVOT_FORMAT_TITLE_CLASS
                });
                formatTitle.innerText = this.parent.localeObj.getConstant('formatString');
                pivotCalcDiv.appendChild(formatTitle);
            }
            var ddlFormatTypes = createElement('div', {
                id: this.parentID + 'Format_Div', className: cls.CALC_FORMAT_TYPE_DIV
            });
            if (this.parent.isAdaptive) {
                outerDiv.appendChild(ddlFormatTypes);
            }
            else {
                pivotCalcDiv.appendChild(ddlFormatTypes);
            }
            var customFormatDiv = createElement('div', {
                id: this.parentID + 'custom_Format_Div',
                className: cls.PIVOT_CALC_CUSTOM_FORMAT_INPUTDIV
            });
            var customFormatObj = createElement('input', {
                id: this.parentID + 'Custom_Format_Element',
                attrs: { 'type': 'text' },
                className: cls.CALC_FORMAT_INPUT
            });
            customFormatDiv.appendChild(customFormatObj);
            pivotCalcDiv.appendChild(customFormatDiv);
            if (this.parent.isAdaptive) {
                outerDiv.appendChild(customFormatDiv);
            }
            else {
                pivotCalcDiv.appendChild(customFormatDiv);
            }
            if (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.
                dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) === null && this.parent.isAdaptive) {
                var okBtn = outerDiv.querySelector('.' + cls.CALCOKBTN);
                outerDiv.appendChild(okBtn);
            }
            else {
                if (this.parent.dataType === 'olap') {
                    outerDiv.appendChild(olapFieldTreeDiv);
                }
                outerDiv.appendChild(pivotCalcDiv);
            }
        }
        return outerDiv;
    };
    /**
     * To create calculated field adaptive layout.
     *
     * @param {boolean} isEdit - It contains the value of isEdit
     * @returns {void}
     */
    CalculatedField.prototype.renderAdaptiveLayout = function (isEdit) {
        var dialogElement = this.parent.dialogRenderer.adaptiveElement;
        if (isEdit) {
            if (select('#' + this.parentID + 'droppable', dialogElement.element)) {
                var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
                this.formulaText = select('#' + this.parentID + 'droppable', document).value;
                this.fieldText = inputObj.value;
            }
            if (dialogElement.element.querySelector('.' + cls.CALC_MEMBER_TYPE_DIV)) {
                var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement.element), DropDownList);
                this.fieldType = memberTypeDrop.value;
            }
            if (dialogElement.element.querySelector('.' + cls.CALC_HIERARCHY_LIST_DIV)) {
                var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement.element), DropDownList);
                this.parentHierarchy = this.fieldType === 'Dimension' ? hierarchyDrop.value : null;
            }
            if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {
                var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement.element), DropDownList);
                this.formatType = ddlFormatTypes.value;
            }
            if (dialogElement.element.querySelector('.' + cls.CALC_FORMAT_INPUT)) {
                var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement.element), MaskedTextBox);
                this.formatText = (this.parent.dataType === 'olap' ? this.formatType : this.getFormat(this.formatType)) === 'Custom' ? customFormat.value : null;
            }
        }
        else {
            this.currentFieldName = this.formulaText = this.fieldText = this.formatText = null;
            this.fieldType = this.formatType = this.parentHierarchy = null;
        }
        this.renderMobileLayout(dialogElement);
    };
    /**
     * To update calculated field info in adaptive layout.
     *
     * @param {boolean} isEdit - isEdit.
     * @param {string} fieldName - fieldName.
     * @returns {void}
     * @hidden
     */
    CalculatedField.prototype.updateAdaptiveCalculatedField = function (isEdit, fieldName) {
        var dialogElement = this.parent.dialogRenderer.adaptiveElement.element;
        this.isEdit = isEdit;
        var calcInfo = (isEdit ? (this.parent.dataType === 'pivot' ?
            this.parent.engineModule.fieldList[fieldName] : this.parent.olapEngineModule.fieldList[fieldName]) :
            {
                id: null, caption: null, formula: null, fieldType: 'Measure',
                formatString: (this.parent.dataType === 'pivot' ? null : 'Standard'), parentHierarchy: null
            });
        this.currentFieldName = calcInfo.id;
        var inputObj = getInstance(select('#' + this.parentID + 'ddlelement', document), MaskedTextBox);
        if (select('#' + this.parentID + 'droppable', document)) {
            this.formulaText = select('#' + this.parentID + 'droppable', document).value = calcInfo.formula;
            this.fieldText = inputObj.value = calcInfo.caption;
            inputObj.dataBind();
        }
        if (dialogElement.querySelector('.' + cls.CALC_MEMBER_TYPE_DIV)) {
            var memberTypeDrop = getInstance(select('#' + this.parentID + 'Member_Type_Div', dialogElement), DropDownList);
            this.fieldType = memberTypeDrop.value = calcInfo.fieldType;
            memberTypeDrop.readonly = isEdit ? true : false;
            memberTypeDrop.dataBind();
        }
        if (dialogElement.querySelector('.' + cls.CALC_HIERARCHY_LIST_DIV)) {
            var hierarchyDrop = getInstance(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement), DropDownList);
            if (this.fieldType === 'Dimension') {
                this.parentHierarchy = hierarchyDrop.value = calcInfo.parentHierarchy;
            }
            else {
                this.parentHierarchy = null;
                hierarchyDrop.index = 0;
            }
            hierarchyDrop.dataBind();
        }
        if (dialogElement.querySelector('.' + cls.CALC_FORMAT_TYPE_DIV)) {
            var ddlFormatTypes = getInstance(select('#' + this.parentID + 'Format_Div', dialogElement), DropDownList);
            this.formatType = ddlFormatTypes.value = (this.formatTypes.indexOf(calcInfo.formatString) > -1 ? calcInfo.formatString : 'Custom');
        }
        if (dialogElement.querySelector('.' + cls.CALC_FORMAT_INPUT)) {
            var customFormat = getInstance(select('#' + this.parentID + 'Custom_Format_Element', dialogElement), MaskedTextBox);
            var formatObj = PivotUtil.getFieldByName(fieldName, this.parent.dataSourceSettings.formatSettings);
            if (this.parent.dataType === 'pivot') {
                this.formatText = customFormat.value = formatObj ? formatObj.format : null;
            }
            else {
                this.formatText = customFormat.value = (this.formatType === 'Custom' ? calcInfo.formatString : null);
            }
            customFormat.dataBind();
        }
    };
    /**
     * To create treeview.
     *
     * @returns {void}
     */
    CalculatedField.prototype.createDropElements = function () {
        var _this = this;
        var dialog = select('#' + this.parentID + 'calculateddialog', document) ? getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog) : null;
        var dialogElement = (this.parent.isAdaptive ?
            this.parent.dialogRenderer.parentElement : dialog.element);
        var fData = [];
        var fieldData = [];
        for (var _i = 0, _a = this.formatTypes; _i < _a.length; _i++) {
            var format = _a[_i];
            fData.push({ value: (this.parent.dataType === 'pivot' ? this.getFormat(format) : format), text: this.parent.localeObj.getConstant(format) });
        }
        if (this.parent.dataType === 'olap') {
            var mData = [];
            var memberTypeData = ['Measure', 'Dimension'];
            for (var _b = 0, memberTypeData_1 = memberTypeData; _b < memberTypeData_1.length; _b++) {
                var type = memberTypeData_1[_b];
                mData.push({ value: type, text: this.parent.localeObj.getConstant(type) });
            }
            var fields = PivotUtil.getClonedData(this.parent.olapEngineModule.fieldListData);
            for (var _c = 0, _d = fields; _c < _d.length; _c++) {
                var item = _d[_c];
                if (item.spriteCssClass &&
                    (item.spriteCssClass.indexOf('e-attributeCDB-icon') > -1 ||
                        item.spriteCssClass.indexOf('e-hierarchyCDB-icon') > -1)) {
                    fieldData.push({ value: item.id, text: item.caption });
                }
            }
            var memberTypeObj = new DropDownList({
                dataSource: mData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                fields: { value: 'value', text: 'text' },
                value: this.fieldType !== null ? this.fieldType : mData[0].value,
                readonly: this.isEdit,
                cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
                change: function (args) {
                    hierarchyListObj_1.enabled = args.value === 'Dimension' ? true : false;
                    _this.fieldType = args.value;
                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
                    hierarchyListObj_1.dataBind();
                }
            });
            memberTypeObj.isStringTemplate = true;
            memberTypeObj.appendTo(select('#' + this.parentID + 'Member_Type_Div', dialogElement));
            var hierarchyListObj_1 = new DropDownList({
                dataSource: fieldData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
                allowFiltering: true,
                enabled: memberTypeObj.value === 'Dimension' ? true : false,
                filterBarPlaceholder: this.parent.localeObj.getConstant('example') + ' ' + fieldData[0].text.toString(),
                fields: { value: 'value', text: 'text' },
                value: this.parentHierarchy !== null && memberTypeObj.value === 'Dimension' ?
                    this.parentHierarchy : fieldData[0].value,
                cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
                change: function (args) {
                    _this.parentHierarchy = args.value;
                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
                }
            });
            hierarchyListObj_1.isStringTemplate = true;
            hierarchyListObj_1.appendTo(select('#' + this.parentID + 'Hierarchy_List_Div', dialogElement));
        }
        var formatStringObj = new DropDownList({
            dataSource: fData, enableRtl: this.parent.enableRtl, locale: this.parent.locale,
            fields: { value: 'value', text: 'text' },
            value: this.parent.isAdaptive && this.formatType !== null ? this.formatType
                : this.parent.dataType === 'olap' ? fData[0].value : fData[4].value,
            cssClass: cls.MEMBER_OPTIONS_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''), width: '100%',
            change: function (args) {
                customerFormatObj.enabled = args.value === 'Custom' ? true : false;
                _this.formatType = args.value;
                _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
                customerFormatObj.dataBind();
            }
        });
        formatStringObj.isStringTemplate = true;
        formatStringObj.appendTo(select('#' + this.parentID + 'Format_Div', dialogElement));
        var customerFormatObj = new MaskedTextBox({
            placeholder: this.parent.localeObj.getConstant('customFormat'),
            locale: this.parent.locale, enableRtl: this.parent.enableRtl,
            value: this.formatText !== null && formatStringObj.value === 'Custom' ? this.formatText : null,
            enabled: formatStringObj.value === 'Custom' ? true : false,
            change: function (args) {
                _this.formatText = args.value;
                _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
            },
            cssClass: this.parent.cssClass
        });
        customerFormatObj.isStringTemplate = true;
        customerFormatObj.appendTo(select('#' + this.parentID + 'Custom_Format_Element', dialogElement));
    };
    CalculatedField.prototype.getFormat = function (pivotFormat) {
        var format = pivotFormat;
        if (this.parent.dataType !== 'olap') {
            switch (format) {
                case 'Standard':
                    format = 'N';
                    break;
                case 'Currency':
                    format = 'C';
                    break;
                case 'Percent':
                    format = 'P';
                    break;
                case 'N':
                    format = 'Standard';
                    break;
                case 'C':
                    format = 'Currency';
                    break;
                case 'P':
                    format = 'Percent';
                    break;
            }
        }
        else {
            switch (format) {
                case 'Standard':
                    format = 'N';
                    break;
                case 'Currency':
                    format = 'C';
                    break;
                case 'Percent':
                    format = 'P';
                    break;
            }
        }
        return format;
    };
    /**
     * To create treeview.
     *
     * @returns {void}
     */
    CalculatedField.prototype.createTreeView = function () {
        var _this = this;
        var dialog = select('#' + this.parentID + 'calculateddialog', document) ? getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog) : null;
        var dialogElement = (this.parent.isAdaptive ?
            this.parent.dialogRenderer.parentElement : dialog.element);
        if (this.parent.dataType === 'olap') {
            this.treeObj = new TreeView({
                fields: { dataSource: this.getFieldListData(this.parent), id: 'id', text: 'caption', parentID: 'pid', iconCss: 'spriteCssClass' },
                allowDragAndDrop: true,
                enableRtl: this.parent.enableRtl,
                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                locale: this.parent.locale,
                nodeDragStart: this.dragStart.bind(this),
                nodeDragging: function (e) {
                    if (e.event.target && e.event.target.classList.contains(cls.FORMULA)) {
                        removeClass([e.clonedNode], cls.NO_DRAG_CLASS);
                        addClass([e.event.target], 'e-copy-drop');
                    }
                    else {
                        addClass([e.clonedNode], cls.NO_DRAG_CLASS);
                        removeClass([e.event.target], 'e-copy-drop');
                        e.dropIndicator = 'e-no-drop';
                        addClass([e.clonedNode.querySelector('.' + cls.ICON)], 'e-icon-expandable');
                        removeClass([e.clonedNode.querySelector('.' + cls.ICON)], 'e-list-icon');
                    }
                },
                nodeClicked: this.fieldClickHandler.bind(this),
                nodeSelected: function (args) {
                    if (args.node.getAttribute('data-type') === CALC) {
                        _this.displayMenu(args.node);
                    }
                    else {
                        removeClass([args.node], 'e-active');
                        args.cancel = true;
                    }
                },
                nodeDragStop: this.fieldDropped.bind(this),
                drawNode: this.drawTreeNode.bind(this),
                nodeExpanding: this.updateNodeIcon.bind(this),
                nodeCollapsed: this.updateNodeIcon.bind(this),
                sortOrder: 'None',
                cssClass: this.parent.cssClass
            });
        }
        else {
            this.treeObj = new TreeView({
                fields: { dataSource: this.getFieldListData(this.parent), id: 'formula', text: 'name', iconCss: 'icon' },
                allowDragAndDrop: true,
                enableRtl: this.parent.enableRtl,
                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                locale: this.parent.locale,
                cssClass: this.parent.cssClass,
                nodeCollapsing: this.nodeCollapsing.bind(this),
                nodeDragStart: this.dragStart.bind(this),
                nodeClicked: this.fieldClickHandler.bind(this),
                nodeDragStop: this.fieldDropped.bind(this),
                drawNode: this.drawTreeNode.bind(this),
                keyPress: function (args) {
                    if (args.event.keyCode === 39) {
                        args.cancel = true;
                    }
                },
                sortOrder: 'Ascending'
            });
        }
        this.treeObj.isStringTemplate = true;
        this.treeObj.appendTo(select('#' + this.parentID + 'tree', dialogElement));
    };
    CalculatedField.prototype.updateNodeIcon = function (args) {
        if (args.node && args.node.querySelector('.e-list-icon') &&
            args.node.querySelector('.e-icon-expandable.e-process') &&
            (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-icon') > -1)) {
            var node = args.node.querySelector('.e-list-icon');
            removeClass([node], 'e-folderCDB-icon');
            addClass([node], 'e-folderCDB-open-icon');
        }
        else if (args.node && args.node.querySelector('.e-list-icon') &&
            args.node.querySelector('.e-icon-expandable') &&
            (args.node.querySelector('.e-list-icon').className.indexOf('e-folderCDB-open-icon') > -1)) {
            var node = args.node.querySelector('.e-list-icon');
            removeClass([node], 'e-folderCDB-open-icon');
            addClass([node], 'e-folderCDB-icon');
        }
        else {
            var curTreeData = this.treeObj.fields.dataSource;
            var fieldListData = curTreeData;
            var childNodes = [];
            for (var _i = 0, fieldListData_1 = fieldListData; _i < fieldListData_1.length; _i++) {
                var item = fieldListData_1[_i];
                if (item.pid === args.nodeData.id.toString()) {
                    childNodes.push(item);
                }
            }
            if (childNodes.length === 0) {
                this.parent.olapEngineModule.calcChildMembers = [];
                this.parent.olapEngineModule.getCalcChildMembers(this.parent.dataSourceSettings, args.nodeData.id.toString());
                childNodes = this.parent.olapEngineModule.calcChildMembers;
                this.parent.olapEngineModule.calcChildMembers = [];
                for (var _a = 0, childNodes_1 = childNodes; _a < childNodes_1.length; _a++) {
                    var node = childNodes_1[_a];
                    node.pid = args.nodeData.id.toString();
                    node.hasChildren = false;
                    node.spriteCssClass = 'e-level-members';
                    node.caption = (node.caption === '' ? this.parent.localeObj.getConstant('blank') : node.caption);
                    curTreeData.push(node);
                }
                this.treeObj.addNodes(childNodes, args.node);
            }
            else {
                return;
            }
        }
    };
    CalculatedField.prototype.nodeCollapsing = function (args) {
        args.cancel = true;
    };
    CalculatedField.prototype.dragStart = function (args) {
        var isDrag = false;
        var dragItem = args.clonedNode;
        if (dragItem && ((this.parent.dataType === 'olap' &&
            (dragItem.querySelector('.e-calc-dimension-icon,.e-calc-measure-icon,.e-measure-icon') ||
                dragItem.querySelector('.e-attributeCDB-icon,.e-hierarchyCDB-icon') ||
                dragItem.querySelector('.e-level-members,.e-namedSetCDB-icon'))) || (this.parent.dataType === 'pivot' &&
            args.event.target.classList.contains(cls.DRAG_CLASS)))) {
            isDrag = true;
        }
        if (isDrag) {
            addClass([args.draggedNode.querySelector('.' + cls.LIST_TEXT_CLASS)], cls.SELECTED_NODE_CLASS);
            addClass([dragItem], cls.PIVOTCALC);
            var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
            dragItem.style.zIndex = (dialog.zIndex + 1).toString();
            dragItem.style.display = 'inline';
        }
        else {
            args.cancel = true;
        }
    };
    /**
     * Trigger before treeview text append.
     *
     * @param {DrawNodeEventArgs} args - args.
     * @returns {void}
     */
    CalculatedField.prototype.drawTreeNode = function (args) {
        if (this.parent.dataType === 'olap') {
            if (args.node.querySelector('.e-measure-icon')) {
                args.node.querySelector('.e-list-icon').style.display = 'none';
            }
            var field = args.nodeData;
            args.node.setAttribute('data-field', field.id);
            args.node.setAttribute('data-caption', field.caption);
            var liTextElement = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);
            if (args.nodeData && args.nodeData.type === CALC &&
                liTextElement && args.node.querySelector('.e-list-icon.e-calc-member')) {
                args.node.setAttribute('data-type', field.type);
                args.node.setAttribute('data-membertype', field.fieldType);
                args.node.setAttribute('data-hierarchy', field.parentHierarchy ? field.parentHierarchy : '');
                args.node.setAttribute('data-formula', field.formula);
                var formatString = (field.formatString ? this.formatTypes.indexOf(field.formatString) > -1 ?
                    field.formatString : 'Custom' : 'None');
                args.node.setAttribute('data-formatString', formatString);
                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? field.formatString : ''));
                var removeElement = createElement('span', {
                    className: cls.GRID_REMOVE + ' e-icons e-list-icon'
                });
                liTextElement.classList.add('e-calcfieldmember');
                if (this.parent.isAdaptive) {
                    var editElement = createElement('span', {
                        className: 'e-list-edit-icon' + (this.isEdit && this.currentFieldName === field.id ?
                            ' e-edited ' : ' e-edit ') + cls.ICON
                    });
                    var editWrapper = createElement('div', { className: 'e-list-header-icon' });
                    editWrapper.appendChild(editElement);
                    editWrapper.appendChild(removeElement);
                    liTextElement.appendChild(editWrapper);
                }
                else {
                    liTextElement.appendChild(removeElement);
                }
            }
            if (this.parent.isAdaptive) {
                var liTextElement_1 = args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS);
                if (args.node && args.node.querySelector('.e-list-icon') && liTextElement_1) {
                    var liIconElement = args.node.querySelector('.e-list-icon');
                    liTextElement_1.insertBefore(liIconElement, args.node.querySelector('.e-list-text'));
                }
                if (args.node && args.node.querySelector('.e-calcMemberGroupCDB,.e-measureGroupCDB-icon,.e-folderCDB-icon')) {
                    args.node.querySelector('.' + cls.CHECKBOX_CONTAINER).style.display = 'none';
                }
                if (args.node && args.node.querySelector('.e-level-members')) {
                    args.node.querySelector('.e-list-icon').style.display = 'none';
                }
            }
            if (args.node.querySelector('.e-calc-dimension-icon,.e-calc-measure-icon,.e-measure-icon') ||
                args.node.querySelector('.e-attributeCDB-icon,.e-hierarchyCDB-icon') ||
                args.node.querySelector('.e-level-members,.e-namedSetCDB-icon')) {
                addClass([args.node], cls.BUTTON_DRAGGABLE);
            }
        }
        else {
            var field = args.nodeData.field;
            args.node.setAttribute('data-field', field);
            args.node.setAttribute('data-caption', args.nodeData.caption);
            args.node.setAttribute('data-type', args.nodeData.type);
            var formatObj = PivotUtil.getFieldByName(field, this.parent.dataSourceSettings.formatSettings);
            args.node.setAttribute('data-formatString', formatObj ? formatObj.format : '');
            if (formatObj) {
                var pivotFormat = this.getFormat(formatObj.format);
                var formatString = (pivotFormat ? this.formatTypes.indexOf(pivotFormat) > -1 ?
                    formatObj.format : 'Custom' : 'None');
                args.node.setAttribute('data-customformatstring', (formatString === 'Custom' ? pivotFormat : ''));
                args.node.setAttribute('data-formatString', formatObj ? formatString : '');
            }
            var dragElement = createElement('span', {
                attrs: { 'tabindex': '-1', 'aria-disabled': 'false', 'title': this.parent.localeObj.getConstant('dragField') },
                className: cls.ICON + ' e-drag'
            });
            var spaceElement = createElement('div', {
                className: ' e-iconspace'
            });
            prepend([dragElement], args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS));
            append([spaceElement, args.node.querySelector('.' + cls.FORMAT)], args.node.querySelector('.' + cls.TEXT_CONTENT_CLASS));
            if (this.getMenuItems(this.parent.engineModule.fieldList[field].type).length <= 0) {
                removeClass([args.node.querySelector('.' + cls.FORMAT)], cls.ICON);
            }
            else {
                args.node.querySelector('.' + cls.FORMAT).setAttribute('title', this.parent.localeObj.getConstant('format'));
            }
            if (this.parent.engineModule.fieldList[field].aggregateType === CALC) {
                args.node.querySelector('.' + cls.FORMAT).setAttribute('title', this.parent.localeObj.getConstant('remove'));
                addClass([args.node.querySelector('.' + cls.FORMAT)], cls.GRID_REMOVE);
                addClass([args.node.querySelector('.' + 'e-iconspace')], [cls.CALC_EDIT, cls.ICON, 'e-list-icon']);
                args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('title', this.parent.localeObj.getConstant('edit'));
                args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('aria-disabled', 'false');
                args.node.querySelector('.' + cls.CALC_EDIT).setAttribute('tabindex', '-1');
                removeClass([args.node.querySelector('.' + cls.FORMAT)], cls.FORMAT);
                removeClass([args.node.querySelector('.e-iconspace')], 'e-iconspace');
            }
        }
    };
    /**
     * To create radio buttons.
     *
     * @param {string} key - key.
     * @returns {HTMLElement} - createTypeContainer
     */
    CalculatedField.prototype.createTypeContainer = function (key) {
        var wrapDiv = createElement('div', { id: this.parentID + 'control_container', className: cls.TREEVIEWOUTER });
        var type = this.getMenuItems(this.parent.engineModule.fieldList[key].type);
        for (var i = 0; i < type.length; i++) {
            var input = createElement('input', {
                id: this.parentID + 'radio' + key + type[i],
                attrs: { 'type': 'radio', 'data-ftxt': key, 'data-value': type[i] },
                className: cls.CALCRADIO
            });
            wrapDiv.appendChild(input);
        }
        return wrapDiv;
    };
    CalculatedField.prototype.getMenuItems = function (fieldType, summaryType) {
        var menuItems = !isNullOrUndefined(summaryType) ? summaryType : this.parent.aggregateTypes;
        var type = [];
        var menuTypes = this.getValidSummaryType();
        for (var i = 0; i < menuItems.length; i++) {
            if ((menuTypes.indexOf(menuItems[i]) > -1) && (type.indexOf(menuItems[i]) < 0)) {
                if (((menuItems[i] === COUNT || menuItems[i] === DISTINCTCOUNT) && fieldType !== 'number')
                    || (fieldType === 'number')) {
                    type.push(menuItems[i]);
                }
            }
        }
        return type;
    };
    CalculatedField.prototype.getValidSummaryType = function () {
        return [COUNT, DISTINCTCOUNT,
            SUM, AVG, MEDIAN,
            MIN, MAX, PRODUCT,
            STDEV, STDEVP,
            VAR, VARP];
    };
    /**
     * To get Accordion Data.
     *
     * @param  {PivotView | PivotFieldList} parent - parent.
     * @returns {AccordionItemModel[]} - Accordion Data.
     */
    CalculatedField.prototype.getAccordionData = function (parent) {
        var data = [];
        var keys = Object.keys(parent.engineModule.fieldList);
        for (var index = 0, i = keys.length; index < i; index++) {
            var key = keys[index];
            data.push({
                header: '<input id=' + this.parentID + '_' + index + ' class=' + cls.CALCCHECK + ' type="checkbox" data-field=' +
                    key + ' data-caption="' + this.parent.engineModule.fieldList[key].caption + '" data-type=' +
                    this.parent.engineModule.fieldList[key].type + '/>',
                content: (this.parent.engineModule.fieldList[key].aggregateType === CALC ||
                    (this.getMenuItems(this.parent.engineModule.fieldList[key].type).length < 1)) ? '' :
                    this.createTypeContainer(key).outerHTML,
                iconCss: this.parent.engineModule.fieldList[key].aggregateType === CALC ? 'e-list-icon' + ' ' +
                    (this.isEdit && this.currentFieldName === key ? 'e-edited' : 'e-edit') : ''
            });
        }
        return data;
    };
    /**
     * To render mobile layout.
     *
     * @param {Tab} tabObj - tabObj
     * @returns {void}
     */
    CalculatedField.prototype.renderMobileLayout = function (tabObj) {
        var _this = this;
        tabObj.items[4].content = this.renderDialogElements().outerHTML;
        tabObj.dataBind();
        var dialog = select('#' + this.parentID + 'calculateddialog', document) ? getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog) : null;
        var dialogElement = (this.parent.isAdaptive ?
            this.parent.dialogRenderer.parentElement : dialog.element);
        if (this.parent.isAdaptive && this.parent.
            dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null) {
            this.createDropElements();
        }
        var cancelBtn = new Button({
            cssClass: this.parent.cssClass, locale: this.parent.locale, enableRtl: this.parent.enableRtl,
            enableHtmlSanitizer: this.parent.enableHtmlSanitizer
        });
        cancelBtn.isStringTemplate = true;
        cancelBtn.appendTo(select('#' + this.parentID + 'cancelBtn', dialogElement));
        if (cancelBtn.element) {
            cancelBtn.element.onclick = this.cancelBtnClick.bind(this);
        }
        if (this.parent.
            dialogRenderer.parentElement.querySelector('.' + cls.FORMULA) !== null && this.parent.isAdaptive) {
            var okBtn = new Button({
                cssClass: this.parent.cssClass, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl,
                enableHtmlSanitizer: this.parent.enableHtmlSanitizer
            });
            okBtn.isStringTemplate = true;
            okBtn.appendTo(select('#' + this.parentID + 'okBtn', dialogElement));
            var inputObj = new MaskedTextBox({
                placeholder: this.parent.localeObj.getConstant('fieldName'),
                locale: this.parent.locale, enableRtl: this.parent.enableRtl,
                change: function (args) {
                    _this.fieldText = args.value;
                    _this.formulaText = select('#' + _this.parentID + 'droppable', document).value;
                },
                cssClass: this.parent.cssClass
            });
            inputObj.isStringTemplate = true;
            inputObj.appendTo(select('#' + this.parentID + 'ddlelement', dialogElement));
            if (this.formulaText !== null && select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement) !== null) {
                var drop = select('#' + this.parentID + 'droppable', this.parent.dialogRenderer.parentElement);
                drop.value = this.formulaText;
            }
            if (this.fieldText !== null && this.parent.
                dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT) !== null) {
                this.parent.
                    dialogRenderer.parentElement.querySelector('.' + cls.CALCINPUT).value = this.fieldText;
                inputObj.value = this.fieldText;
            }
            if (okBtn.element) {
                okBtn.element.onclick = this.applyFormula.bind(this);
            }
        }
        else if (this.parent.isAdaptive) {
            var addBtn = new Button({
                cssClass: this.parent.cssClass, isPrimary: true, locale: this.parent.locale, enableRtl: this.parent.enableRtl,
                enableHtmlSanitizer: this.parent.enableHtmlSanitizer
            });
            addBtn.isStringTemplate = true;
            addBtn.appendTo(select('#' + this.parentID + 'addBtn', dialogElement));
            if (this.parent.dataType === 'olap') {
                this.treeObj = new TreeView({
                    fields: { dataSource: this.getFieldListData(this.parent), id: 'id', text: 'caption', parentID: 'pid', iconCss: 'spriteCssClass' },
                    showCheckBox: true,
                    autoCheck: false,
                    sortOrder: 'None',
                    enableRtl: this.parent.enableRtl,
                    locale: this.parent.locale,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    nodeClicked: this.fieldClickHandler.bind(this),
                    drawNode: this.drawTreeNode.bind(this),
                    nodeExpanding: this.updateNodeIcon.bind(this),
                    nodeCollapsed: this.updateNodeIcon.bind(this),
                    nodeSelected: function (args) {
                        removeClass([args.node], 'e-active');
                        args.cancel = true;
                    },
                    cssClass: this.parent.cssClass
                });
                this.treeObj.isStringTemplate = true;
                this.treeObj.appendTo(select('#' + this.parentID + 'accordDiv', dialogElement));
            }
            else {
                var accordion = new Accordion({
                    items: this.getAccordionData(this.parent),
                    enableRtl: this.parent.enableRtl,
                    locale: this.parent.locale,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    expanding: this.accordionExpand.bind(this),
                    clicked: this.accordionClickHandler.bind(this),
                    created: this.accordionCreated.bind(this)
                });
                accordion.isStringTemplate = true;
                accordion.appendTo(select('#' + this.parentID + 'accordDiv', dialogElement));
                this.updateType();
            }
            if (addBtn.element) {
                addBtn.element.onclick = this.addBtnClick.bind(this);
            }
        }
    };
    CalculatedField.prototype.accordionExpand = function (args) {
        if (args.element.querySelectorAll('.e-radio-wrapper').length === 0) {
            var keys = Object.keys(this.parent.engineModule.fieldList);
            for (var index = 0, i = keys.length; index < i; index++) {
                var key = keys[index];
                var type = this.parent.engineModule.fieldList[key].type !== 'number' ? [COUNT, DISTINCTCOUNT] :
                    [SUM, COUNT, AVG, MEDIAN, MIN, MAX, DISTINCTCOUNT, PRODUCT, STDEV, STDEVP, VAR, VARP];
                var radiobutton = void 0;
                if (key === args.element.querySelector('[data-field').getAttribute('data-field')) {
                    for (var i_1 = 0; i_1 < type.length; i_1++) {
                        radiobutton = new RadioButton({
                            label: this.parent.localeObj.getConstant(type[i_1]),
                            name: AGRTYPE + key,
                            checked: args.element.querySelector('[data-type').getAttribute('data-type') === type[i_1],
                            change: this.onChange.bind(this),
                            locale: this.parent.locale, enableRtl: this.parent.enableRtl,
                            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                            cssClass: this.parent.cssClass
                        });
                        radiobutton.isStringTemplate = true;
                        radiobutton.appendTo(select('#' + this.parentID + 'radio' + key + type[i_1], args.element));
                    }
                }
            }
        }
    };
    CalculatedField.prototype.onChange = function (args) {
        var type = args.event.target.parentElement.querySelector('.e-label')
            .innerText;
        var field = args.event.target.closest('.e-acrdn-item').
            querySelector('[data-field').getAttribute('data-caption');
        args.event.target.
            closest('.e-acrdn-item').querySelector('.e-label').
            innerText = field + ' (' + type + ')';
        args.event.target.closest('.e-acrdn-item').
            querySelector('[data-type').setAttribute('data-type', args.event.target.getAttribute('data-value'));
    };
    CalculatedField.prototype.updateType = function () {
        var keys = Object.keys(this.parent.engineModule.fieldList);
        var dialog = select('#' + this.parentID + 'calculateddialog', document) ? getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog) : null;
        var dialogElement = (this.parent.isAdaptive ?
            this.parent.dialogRenderer.parentElement : dialog.element);
        for (var index = 0, i = keys.length; index < i; index++) {
            var key = keys[index];
            var type = null;
            if ((this.parent.engineModule.fieldList[key].type !== 'number' ||
                this.parent.engineModule.fieldList[key].type === 'include' ||
                this.parent.engineModule.fieldList[key].type === 'exclude') &&
                (this.parent.engineModule.fieldList[key].aggregateType !== 'DistinctCount')) {
                type = COUNT;
            }
            else {
                type = this.parent.engineModule.fieldList[key].aggregateType !== undefined ?
                    this.parent.engineModule.fieldList[key].aggregateType : SUM;
            }
            var checkbox = new CheckBox({
                label: this.parent.engineModule.fieldList[key].caption + ' (' + this.parent.localeObj.getConstant(type) + ')',
                locale: this.parent.locale, enableRtl: this.parent.enableRtl, enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                cssClass: this.parent.cssClass
            });
            checkbox.isStringTemplate = true;
            checkbox.appendTo(select('#' + this.parentID + '_' + index, dialogElement));
            select('#' + this.parentID + '_' + index, dialogElement).setAttribute('data-field', key);
            select('#' + this.parentID + '_' + index, dialogElement).setAttribute('data-type', type);
        }
    };
    /**
     * Trigger while click cancel button.
     *
     * @returns {void}
     */
    CalculatedField.prototype.cancelBtnClick = function () {
        this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);
    };
    /**
     * Trigger while click add button.
     *
     * @returns {void}
     */
    CalculatedField.prototype.addBtnClick = function () {
        var fieldText = '';
        var field = null;
        var type = null;
        if (this.parent.dataType === 'pivot') {
            var node = document.querySelectorAll('.e-accordion .e-check');
            for (var i = 0; i < node.length; i++) {
                field = node[i].parentElement.querySelector('[data-field]').getAttribute('data-field');
                type = node[i].parentElement.querySelector('[data-field]').getAttribute('data-type');
                if (type.indexOf(CALC) === -1) {
                    fieldText = fieldText + ('"' + type + '(' + field + ')' + '"');
                }
                else {
                    for (var j = 0; j < this.parent.dataSourceSettings.calculatedFieldSettings.length; j++) {
                        if (this.parent.dataSourceSettings.calculatedFieldSettings[j].name === field) {
                            fieldText = fieldText + this.parent.dataSourceSettings.calculatedFieldSettings[j].formula;
                            break;
                        }
                    }
                }
            }
        }
        else {
            var nodes = this.treeObj.getAllCheckedNodes();
            var olapEngine = this.parent.olapEngineModule;
            for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
                var item = nodes_1[_i];
                fieldText = fieldText + (olapEngine.fieldList[item] &&
                    olapEngine.fieldList[item].type === CALC ? olapEngine.fieldList[item].tag : item);
            }
        }
        this.formulaText = this.formulaText !== null ? (this.formulaText + fieldText) : fieldText;
        this.renderMobileLayout(this.parent.dialogRenderer.adaptiveElement);
    };
    /**
     * To create calculated field dialog elements.
     *
     * @param {any} args - It contains the args value.
     * @param {boolean} args.edit - It contains the value of edit under args.
     * @param {string} args.fieldName - It contains the value of fieldName under args.
     * @returns {void}
     * @hidden
     */
    CalculatedField.prototype.createCalculatedFieldDialog = function (args) {
        if (this.parent.isAdaptive && this.parent.getModuleName() === 'pivotfieldlist') {
            this.renderAdaptiveLayout(args && args.edit !== undefined ? args.edit : true);
            this.isEdit = (args && args.edit !== undefined ? args.edit : this.isEdit);
        }
        else if (!this.parent.isAdaptive) {
            this.isEdit = (args && args.edit !== undefined ? args.edit : false);
            this.renderDialogLayout();
            if (args && args.edit) {
                var target = this.treeObj.element.querySelector('li[data-field="' + args.fieldName + '"]');
                if (target) {
                    addClass([target], ['e-active', 'e-node-focus']);
                    target.setAttribute('aria-selected', 'true');
                    target.id = this.treeObj.element.id + '_active';
                    if (this.parent.dataType === 'pivot') {
                        var e = { event: { target: target.querySelector('.e-list-icon.e-edit.e-icons') } };
                        this.fieldClickHandler(e);
                    }
                    else {
                        this.displayMenu(target);
                    }
                }
            }
            var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
            dialog.element.style.top = parseInt(dialog.element.style.top, 10) < 0 ? '0px' : dialog.element.style.top;
        }
    };
    /**
     * To create calculated field desktop layout.
     *
     * @returns {void}
     */
    CalculatedField.prototype.renderDialogLayout = function () {
        this.newFields =
            extend([], this.parent.dataSourceSettings.calculatedFieldSettings, null, true);
        this.createDialog();
        var dialog = getInstance(select('#' + this.parentID + 'calculateddialog', document), Dialog);
        dialog.content = this.renderDialogElements();
        dialog.refresh();
        var inputObj = new MaskedTextBox({
            placeholder: this.parent.localeObj.getConstant('fieldName'),
            locale: this.parent.locale, enableRtl: this.parent.enableRtl,
            cssClass: this.parent.cssClass
        });
        inputObj.isStringTemplate = true;
        inputObj.appendTo(select('#' + this.parentID + 'ddlelement', dialog.element));
        this.createDropElements();
        this.createTreeView();
        this.droppable = new Droppable(select('#' + this.parentID + 'droppable', dialog.element));
        this.keyboardEvents = new KeyboardEvents(dialog.element, {
            keyAction: this.keyActionHandler.bind(this),
            keyConfigs: { moveRight: 'rightarrow', enter: 'enter', shiftE: 'shift+E', delete: 'delete' },
            eventName: 'keydown'
        });
    };
    CalculatedField.prototype.createConfirmDialog = function (title, description, calcInfo, isRemove, node) {
        var errorDialog = createElement('div', {
            id: this.parentID + '_CalculatedFieldErrorDialog',
            className: cls.ERROR_DIALOG_CLASS
        });
        this.parent.element.appendChild(errorDialog);
        var confirmPopUp = new Dialog({
            animationSettings: { effect: 'Fade' },
            allowDragging: false,
            showCloseIcon: true,
            enableRtl: this.parent.enableRtl,
            locale: this.parent.locale,
            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
            width: 'auto',
            height: 'auto',
            position: { X: 'center', Y: 'center' },
            buttons: [
                {
                    click: isRemove ? this.removeCalcField.bind(this, node) : this.replaceFormula.bind(this, calcInfo),
                    isFlat: false,
                    buttonModel: {
                        cssClass: cls.OK_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                        content: isRemove ? this.parent.localeObj.getConstant('yes') : this.parent.localeObj.getConstant('ok'), isPrimary: true
                    }
                },
                {
                    click: this.closeErrorDialog.bind(this),
                    isFlat: false,
                    buttonModel: {
                        cssClass: cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                        content: isRemove ? this.parent.localeObj.getConstant('no') : this.parent.localeObj.getConstant('cancel')
                    }
                }
            ],
            header: title,
            content: description,
            isModal: true,
            visible: true,
            closeOnEscape: true,
            target: document.body,
            cssClass: this.parent.cssClass,
            close: this.removeErrorDialog.bind(this, node)
        });
        confirmPopUp.isStringTemplate = true;
        confirmPopUp.appendTo(errorDialog);
        // confirmPopUp.element.querySelector('.e-dlg-header').innerText = title;
    };
    CalculatedField.prototype.replaceFormula = function (calcInfo) {
        var report = this.parent.dataSourceSettings;
        if (this.parent.dataType === 'olap') {
            for (var j = 0; j < report.calculatedFieldSettings.length; j++) {
                if (report.calculatedFieldSettings[j].name === calcInfo.name) {
                    if (!isNullOrUndefined(calcInfo.hierarchyUniqueName)) {
                        report.calculatedFieldSettings[j].hierarchyUniqueName = calcInfo.hierarchyUniqueName;
                    }
                    report.calculatedFieldSettings[j].formatString = calcInfo.formatString;
                    report.calculatedFieldSettings[j].formula = calcInfo.formula;
                    this.parent.lastCalcFieldInfo = report.calculatedFieldSettings[j];
                    break;
                }
            }
        }
        else {
            for (var i = 0; i < report.values.length; i++) {
                if (report.values[i].type === CALC && report.values[i].name === calcInfo.name) {
                    for (var j = 0; j < report.calculatedFieldSettings.length; j++) {
                        if (report.calculatedFieldSettings[j].name === calcInfo.name) {
                            report.calculatedFieldSettings[j].formula = calcInfo.formula;
                            this.parent.lastCalcFieldInfo =
                                report.calculatedFieldSettings[j].properties ?
                                    report.calculatedFieldSettings[j].properties :
                                    report.calculatedFieldSettings[j];
                            this.updateFormatSettings(report, calcInfo.name, calcInfo.formatString);
                        }
                    }
                }
            }
        }
        this.addFormula(report, calcInfo.name);
        this.removeErrorDialog();
    };
    CalculatedField.prototype.removeErrorDialog = function (node) {
        var element = select('#' + this.parentID + '_CalculatedFieldErrorDialog', document);
        var confirmPopUp = element ? getInstance(element, Dialog) : null;
        if (confirmPopUp && !confirmPopUp.isDestroyed) {
            confirmPopUp.destroy();
        }
        if (select('#' + this.parentID + '_CalculatedFieldErrorDialog', document) !== null) {
            remove(select('#' + this.parentID + '_CalculatedFieldErrorDialog', document));
        }
        if (node) {
            node.setAttribute('tabindex', '0');
            node.focus();
        }
    };
    CalculatedField.prototype.closeErrorDialog = function () {
        var confirmPopUp = getInstance(select('#' + this.parentID + '_CalculatedFieldErrorDialog', document), Dialog);
        confirmPopUp.close();
    };
    CalculatedField.prototype.triggerActionCompleteEvent = function () {
        var eventArgs = {
            dataSourceSettings: PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings),
            actionName: events.invalidFormula,
            fieldInfo: this.parent.actionObj.fieldInfo,
            actionInfo: this.parent.actionObj.actionInfo
        };
        var control = this.parent.isPopupView ?
            this.parent.pivotGridModule : this.parent;
        control.trigger(events.actionComplete, eventArgs);
        if (eventArgs.actionName !== 'Abort' && this.parent.pivotCommon && this.parent.pivotCommon.errorDialog) {
            this.parent.pivotCommon.errorDialog.createErrorDialog(this.parent.localeObj.getConstant('error'), this.parent.localeObj.getConstant('invalidFormula'));
        }
        else {
            if (this.parent && this.parent.actionObj) {
                this.parent.actionObj.actionName = eventArgs.actionName;
            }
            this.closeDialog();
        }
        if (this.parent && this.parent.actionObj) {
            this.parent.actionObj.actionName = '';
        }
        if (control && control.actionObj) {
            control.actionObj.actionName = '';
        }
    };
    /**
     * To add event listener.
     *
     * @returns {void}
     * @hidden
     */
    CalculatedField.prototype.addEventListener = function () {
        if (this.parent.isDestroyed) {
            return;
        }
        this.parent.on(events.initCalculatedField, this.createCalculatedFieldDialog, this);
    };
    /**
     * To remove event listener.
     *
     * @returns {void}
     * @hidden
     */
    CalculatedField.prototype.removeEventListener = function () {
        if (this.parent.isDestroyed) {
            return;
        }
        this.parent.off(events.initCalculatedField, this.createCalculatedFieldDialog);
    };
    /**
     * To destroy the calculated field dialog
     *
     * @returns {void}
     * @hidden
     */
    CalculatedField.prototype.destroy = function () {
        var errorDialogElement = select('#' + this.parentID + '_CalculatedFieldErrorDialog', document);
        if (errorDialogElement) {
            var confirmPopUp = getInstance(errorDialogElement, Dialog);
            if (confirmPopUp && !confirmPopUp.isDestroyed) {
                confirmPopUp.destroy();
            }
            remove(errorDialogElement);
        }
        var menuElement = select('#' + this.parentID + 'CalcContextmenu', document);
        if (menuElement) {
            var menuObj = getInstance(menuElement, Menu);
            if (menuObj && !menuObj.isDestroyed) {
                menuObj.destroy();
            }
            remove(menuElement);
        }
        if (this.treeObj && !this.treeObj.isDestroyed) {
            this.treeObj.destroy();
            this.treeObj = null;
        }
        if (this.droppable) {
            this.droppable = null;
        }
        if (this.keyboardEvents) {
            this.keyboardEvents.destroy();
            this.keyboardEvents = null;
        }
        var inputElement = select('#' + this.parentID + 'ddlelement', document);
        if (inputElement) {
            var inputObj = getInstance(inputElement, MaskedTextBox);
            if (inputObj && !inputObj.isDestroyed) {
                inputObj.destroy();
            }
        }
        var customFormatElement = select('#' + this.parentID + 'Custom_Format_Element', document);
        if (customFormatElement) {
            var customFormatObj = getInstance(customFormatElement, MaskedTextBox);
            if (customFormatObj && !customFormatObj.isDestroyed) {
                customFormatObj.destroy();
            }
        }
        this.destroyDropdowns();
        this.destroyAdaptiveComponents();
        var dialogElement = select('#' + this.parentID + 'calculateddialog', document);
        if (dialogElement) {
            var dialog = getInstance(dialogElement, Dialog);
            if (dialog && !dialog.isDestroyed) {
                dialog.destroy();
            }
            remove(dialogElement);
        }
        var accordionElement = select('#' + this.parentID + 'accordDiv', document);
        if (accordionElement) {
            var accordion = getInstance(accordionElement, Accordion);
            if (accordion && !accordion.isDestroyed) {
                accordion.destroy();
            }
        }
        this.newFields = null;
        this.curMenu = null;
        this.existingReport = null;
        this.formulaText = null;
        this.fieldText = null;
        this.formatText = null;
        this.formatType = null;
        this.fieldType = null;
        this.parentHierarchy = null;
        this.currentFieldName = null;
    };
    /**
     * Clean up dropdown components
     *
     * @private
     * @returns {void}
     */
    CalculatedField.prototype.destroyDropdowns = function () {
        var formatDiv = select('#' + this.parentID + 'Format_Div', document);
        if (formatDiv) {
            var formatDropdown = getInstance(formatDiv, DropDownList);
            if (formatDropdown && !formatDropdown.isDestroyed) {
                formatDropdown.destroy();
            }
        }
        var memberTypeDiv = select('#' + this.parentID + 'Member_Type_Div', document);
        if (memberTypeDiv) {
            var memberDropdown = getInstance(memberTypeDiv, DropDownList);
            if (memberDropdown && !memberDropdown.isDestroyed) {
                memberDropdown.destroy();
            }
        }
        var hierarchyDiv = select('#' + this.parentID + 'Hierarchy_List_Div', document);
        if (hierarchyDiv) {
            var hierarchyDropdown = getInstance(hierarchyDiv, DropDownList);
            if (hierarchyDropdown && !hierarchyDropdown.isDestroyed) {
                hierarchyDropdown.destroy();
            }
        }
    };
    /**
     * Clean up adaptive layout components
     *
     * @private
     * @returns {void}
     */
    CalculatedField.prototype.destroyAdaptiveComponents = function () {
        if (!this.parent.isAdaptive) {
            return;
        }
        var buttonSelectors = ['#' + this.parentID + 'addBtn', '#' + this.parentID + 'cancelBtn', '#' + this.parentID + 'okBtn'];
        buttonSelectors.forEach(function (selector) {
            var buttonElement = select(selector, document);
            if (buttonElement) {
                var button = getInstance(buttonElement, Button);
                if (button && !button.isDestroyed) {
                    button.destroy();
                }
            }
        });
        var container = document.getElementById(this.parent.element.id + '_PivotFieldList_Container');
        if (container) {
            if (this.parent.dataType === 'pivot') {
                var radioButtons = container.querySelectorAll('.e-radio-wrapper');
                radioButtons.forEach(function (radioElement) {
                    var radio = getInstance(radioElement, RadioButton);
                    if (radio && !radio.isDestroyed) {
                        radio.destroy();
                    }
                });
            }
            var checkboxes = container.querySelectorAll('.' + cls.CALCCHECK);
            checkboxes.forEach(function (checkboxElement) {
                var checkbox = getInstance(checkboxElement, CheckBox);
                if (checkbox && !checkbox.isDestroyed) {
                    checkbox.destroy();
                }
            });
        }
    };
    return CalculatedField;
}());
export { CalculatedField };