all files / pivotfieldlist/renderer/ dialog-renderer.js

90.46% Statements 294/325
80% Branches 200/250
96.43% Functions 27/28
90.46% Lines 294/325
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656   100×   109×         109×     103×   109×     103×   109×   109×     105×   109× 109× 109×   109× 89× 89× 89×     20×     20× 17×     17×     17× 17× 17× 17× 17× 17× 17× 17×       87×                                                 87×                       87× 87× 87×           87×   87×     87×             87×     87×       87×     87× 87× 87×                                       27×   16×       16×                               16×   16×   27×     27× 11× 11× 11× 11×       27×   11× 11× 11×                   27× 12× 12×     15×   27× 27×     89×                   89× 89×                                                                                         86× 86×   86×                                       86× 86× 86× 86× 86×                                                                                                                 11× 11× 11× 11×         11×         103×                 103×         103× 103× 103× 27×   103× 103×                           24×     24× 24×     24× 24× 24× 24×   10× 10×         10×             32× 32×     32× 32× 32× 16×     16× 16×     16×   32× 32× 32×               24×                 24× 19×         89× 89×   174× 174×   100× 85×   100×   100×   100× 85× 85×   100×   100× 85× 85× 85×   85× 85×            
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../../common/base/css-constant", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "@syncfusion/ej2-navigations", "../../common/base/constant", "../../base/util"], function (require, exports, ej2_base_1, ej2_base_2, cls, ej2_popups_1, ej2_buttons_1, ej2_navigations_1, events, util_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DialogRenderer = (function () {
        function DialogRenderer(parent) {
            this.parent = parent;
        }
        DialogRenderer.prototype.render = function () {
            var fieldListWrappper = ej2_base_1.createElement('div', {
                id: this.parent.element.id + '_Container',
                className: cls.WRAPPER_CLASS + ' ' + (this.parent.dataType === 'olap' ? cls.OLAP_WRAPPER_CLASS : ''),
                styles: 'width:' + this.parent.element.style.width
            });
            if (this.parent.isAdaptive) {
                ej2_base_1.addClass([fieldListWrappper], cls.DEVICE);
            }
            else {
                ej2_base_1.removeClass([fieldListWrappper], cls.DEVICE);
            }
            if (this.parent.enableRtl) {
                ej2_base_1.addClass([fieldListWrappper], cls.RTL);
            }
            else {
                ej2_base_1.removeClass([fieldListWrappper], cls.RTL);
            }
            if (this.parent.cssClass) {
                ej2_base_1.addClass([fieldListWrappper], this.parent.cssClass.split(' '));
            }
            if (this.parent.enableFieldSearching) {
                ej2_base_1.addClass([fieldListWrappper], cls.FIELD_LIST_SEARCH_MODE_CLASS);
            }
            else {
                ej2_base_1.removeClass([fieldListWrappper], cls.FIELD_LIST_SEARCH_MODE_CLASS);
            }
            this.parentElement = ej2_base_1.createElement('div', { className: cls.CONTAINER_CLASS });
            this.parent.element.appendChild(fieldListWrappper);
            if (this.parent.isAdaptive) {
                fieldListWrappper.removeAttribute('style');
                this.parentElement = ej2_base_1.createElement('div', { className: cls.ADAPTIVE_CONTAINER_CLASS });
                this.renderAdaptiveLayout(fieldListWrappper);
            }
            if (this.parent.renderMode === 'Popup') {
                this.renderFieldListDialog(fieldListWrappper);
                this.unWireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));
                this.wireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));
            }
            else {
                this.renderStaticLayout(fieldListWrappper);
            }
        };
        DialogRenderer.prototype.renderStaticLayout = function (fieldListWrappper) {
            if (!this.parent.isAdaptive) {
                var layoutHeader = ej2_base_1.createElement('div', {
                    className: cls.FIELD_LIST_TITLE_CLASS
                });
                var headerContent = ej2_base_1.createElement('div', {
                    className: cls.FIELD_LIST_TITLE_CONTENT_CLASS
                });
                headerContent.innerText = this.parent.localeObj.getConstant('staticFieldList');
                layoutHeader.appendChild(headerContent);
                layoutHeader.appendChild(this.createCalculatedButton());
                ej2_base_1.addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);
                fieldListWrappper.appendChild(layoutHeader);
                fieldListWrappper.appendChild(this.parentElement);
                ej2_base_1.addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);
                if (this.parent.allowDeferLayoutUpdate) {
                    fieldListWrappper.appendChild(this.createDeferUpdateButtons());
                    this.renderDeferUpdateButtons(fieldListWrappper);
                }
            }
        };
        DialogRenderer.prototype.renderDeferUpdateButtons = function (fieldListWrappper) {
            if (this.parent.allowDeferLayoutUpdate) {
                this.deferUpdateCheckBox = new ej2_buttons_1.CheckBox({
                    label: this.parent.localeObj.getConstant('deferLayoutUpdate'),
                    checked: (this.parent.isPopupView && this.parent.pivotGridModule) ?
                        (ej2_base_1.isNullOrUndefined(this.parent.pivotGridModule.pivotDeferLayoutUpdate) ? true :
                            this.parent.pivotGridModule.pivotDeferLayoutUpdate) : (ej2_base_1.isNullOrUndefined(this.parent.isDeferLayoutUpdate) ? true :
                        this.parent.isDeferLayoutUpdate),
                    enableRtl: this.parent.enableRtl,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    locale: this.parent.locale,
                    change: this.onCheckChange.bind(this),
                    cssClass: this.parent.cssClass
                });
                this.deferUpdateCheckBox.isStringTemplate = true;
                this.deferUpdateCheckBox.appendTo(ej2_base_1.select('#' + this.parent.element.id + 'DeferUpdateCheckBox', fieldListWrappper));
                this.deferUpdateApplyButton = new ej2_buttons_1.Button({
                    cssClass: cls.DEFER_APPLY_BUTTON + ' ' + cls.DEFER_UPDATE_BUTTON + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                    content: this.parent.localeObj.getConstant('apply'),
                    enableRtl: this.parent.enableRtl,
                    locale: this.parent.locale,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    isPrimary: true,
                    disabled: (this.parent.isPopupView && this.parent.pivotGridModule) ?
                        (!ej2_base_1.isNullOrUndefined(this.parent.pivotGridModule.pivotDeferLayoutUpdate) ?
                            !this.parent.pivotGridModule.pivotDeferLayoutUpdate : false) :
                        (!ej2_base_1.isNullOrUndefined(this.parent.isDeferLayoutUpdate) ? !this.parent.isDeferLayoutUpdate : false)
                });
                this.deferUpdateApplyButton.isStringTemplate = true;
                this.deferUpdateApplyButton.appendTo(ej2_base_1.select('#' + this.parent.element.id + '_DeferUpdateButton1', fieldListWrappper));
                this.deferUpdateApplyButton.element.onclick = this.parent.renderMode === 'Fixed' ? this.applyButtonClick.bind(this) :
                    this.onDeferUpdateClick.bind(this);
            }
            this.deferUpdateCancelButton = new ej2_buttons_1.Button({
                cssClass: cls.DEFER_CANCEL_BUTTON + ' ' + cls.CANCEL_BUTTON_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                content: this.parent.allowDeferLayoutUpdate ? this.parent.localeObj.getConstant('cancel') :
                    this.parent.localeObj.getConstant('close'),
                enableRtl: this.parent.enableRtl, isPrimary: !this.parent.allowDeferLayoutUpdate,
                locale: this.parent.locale, enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                disabled: (this.parent.isPopupView && this.parent.pivotGridModule && this.parent.pivotGridModule['refreshing']) ?
                    (this.parent.allowDeferLayoutUpdate && !ej2_base_1.isNullOrUndefined(this.parent.pivotGridModule.pivotDeferLayoutUpdate) ?
                        !this.parent.pivotGridModule.pivotDeferLayoutUpdate : false) : ((this.parent['refreshing'] &&
                    !ej2_base_1.isNullOrUndefined(this.parent.isDeferLayoutUpdate) && this.parent.allowDeferLayoutUpdate) ?
                    !this.parent.isDeferLayoutUpdate : false)
            });
            this.deferUpdateCancelButton.isStringTemplate = true;
            this.deferUpdateCancelButton.appendTo(ej2_base_1.select('#' + this.parent.element.id + '_DeferUpdateButton2', fieldListWrappper));
            if (this.parent.allowDeferLayoutUpdate && ((!this.parent.isDeferLayoutUpdate && this.parent.renderMode === 'Popup' &&
                this.parent['refreshing']) || (this.parent.isPopupView && this.parent.pivotGridModule &&
                !this.parent.pivotGridModule.pivotDeferLayoutUpdate && this.parent.pivotGridModule['refreshing']))) {
                this.deferUpdateApplyButton.element.style.display = 'none';
                this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('close') });
                this.deferUpdateCancelButton.isPrimary = true;
                this.deferUpdateApplyButton.disabled = this.parent.isPopupView ? this.parent.pivotGridModule.pivotDeferLayoutUpdate
                    : this.parent.isDeferLayoutUpdate;
                this.deferUpdateCancelButton.disabled = this.parent.isPopupView ? this.parent.pivotGridModule.pivotDeferLayoutUpdate
                    : this.parent.isDeferLayoutUpdate;
            }
            this.deferUpdateCancelButton.element.onclick = this.onCloseFieldList.bind(this);
        };
        DialogRenderer.prototype.createDeferUpdateButtons = function () {
            var layoutFooter = ej2_base_1.createElement('div', {
                className: cls.LAYOUT_FOOTER
            });
            if (this.parent.allowDeferLayoutUpdate) {
                var checkBoxLayout = ej2_base_1.createElement('div', {
                    className: cls.CHECKBOX_LAYOUT,
                    attrs: { 'title': this.parent.localeObj.getConstant('deferLayoutUpdate') }
                });
                var deferUpdateCheckBox = ej2_base_1.createElement('input', {
                    id: this.parent.element.id + 'DeferUpdateCheckBox'
                });
                checkBoxLayout.appendChild(deferUpdateCheckBox);
                layoutFooter.appendChild(checkBoxLayout);
            }
            var buttonLayout = ej2_base_1.createElement('div', {
                className: cls.BUTTON_LAYOUT
            });
            if (this.parent.allowDeferLayoutUpdate) {
                var deferUpdateButton1 = ej2_base_1.createElement('button', {
                    id: this.parent.element.id + '_DeferUpdateButton1', attrs: { 'type': 'button', 'title': this.parent.localeObj.getConstant('apply') }
                });
                buttonLayout.appendChild(deferUpdateButton1);
            }
            var deferUpdateButton2 = ej2_base_1.createElement('button', {
                id: this.parent.element.id + '_DeferUpdateButton2', attrs: { 'type': 'button', 'title': this.parent.localeObj.getConstant('cancel') }
            });
            buttonLayout.appendChild(deferUpdateButton2);
            layoutFooter.appendChild(buttonLayout);
            return layoutFooter;
        };
        DialogRenderer.prototype.onCheckChange = function (args) {
            if (args.checked) {
                this.parent.clonedDataSource = util_1.PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings);
                Iif (this.parent.dataType === 'olap') {
                    this.parent.clonedFieldListData = util_1.PivotUtil.cloneOlapFieldSettings(this.parent.olapEngineModule.fieldListData);
                }
                this.parent.clonedFieldList = util_1.PivotUtil.getClonedFieldList(this.parent.pivotFieldList);
            }
            this.parent.isDeferLayoutUpdate = args.checked;
            if (this.parent.isPopupView && this.parent.pivotGridModule) {
                this.parent.pivotGridModule.pivotDeferLayoutUpdate = args.checked;
            }
            if (this.parent.renderMode === 'Fixed') {
                this.deferUpdateApplyButton.setProperties({ disabled: !args.checked });
                this.deferUpdateCancelButton.setProperties({ disabled: !args.checked });
            }
            else {
                if (this.parent.allowDeferLayoutUpdate && args.checked) {
                    this.deferUpdateApplyButton.element.style.display = '';
                    this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('cancel') });
                    this.deferUpdateCancelButton.isPrimary = false;
                }
                else {
                    this.deferUpdateApplyButton.element.style.display = 'none';
                    this.deferUpdateCancelButton.setProperties({ content: this.parent.localeObj.getConstant('close') });
                    this.deferUpdateCancelButton.isPrimary = true;
                }
            }
            Iif ((Object.keys(this.parent.clonedFieldList).length !== Object.keys(this.parent.pivotFieldList).length) &&
                this.parent.calculatedFieldModule && this.parent.calculatedFieldModule.field && this.parent.dataType === 'pivot') {
                this.parent.engineModule.fields = Object.keys(this.parent.clonedFieldList);
            }
            this.onCloseFieldList(null, true);
        };
        DialogRenderer.prototype.applyButtonClick = function () {
            Eif (this.parent.getModuleName() === 'pivotfieldlist' && this.parent.allowDeferLayoutUpdate) {
                this.parent.pivotChange = false;
            }
            this.parent.isDeferUpdateApplied = true;
            this.parent.updateDataSource(false);
            var parent = this.parent;
            parent.axisFieldModule.render();
            parent.clonedDataSource = util_1.PivotUtil.getClonedDataSourceSettings(parent.dataSourceSettings);
            Iif (this.parent.dataType === 'olap') {
                this.parent.clonedFieldListData = util_1.PivotUtil.cloneOlapFieldSettings(this.parent.olapEngineModule.fieldListData);
            }
            parent.clonedFieldList = util_1.PivotUtil.getClonedFieldList(parent.pivotFieldList);
        };
        DialogRenderer.prototype.onCloseFieldList = function (args, isDeferLayoutEnabled) {
            if ((this.parent.allowDeferLayoutUpdate || isDeferLayoutEnabled) && (!this.parent.isPopupView ||
                (this.parent.pivotGridModule && this.parent.pivotGridModule.actionObj.actionName !== '') || this.parent.actionObj.actionName !== '')) {
                this.parent.
                    setProperties({
                    dataSourceSettings: this.parent.clonedDataSource
                }, true);
                Iif (this.parent.dataType === 'olap') {
                    this.parent.olapEngineModule.fieldList = util_1.PivotUtil.getClonedFieldList(this.parent.clonedFieldList);
                    this.parent.olapEngineModule.fieldListData = util_1.PivotUtil.cloneOlapFieldSettings(this.parent.clonedFieldListData);
                    if (!this.parent.isPopupView) {
                        for (var _i = 0, _a = Object.keys(this.parent.clonedFieldList); _i < _a.length; _i++) {
                            var name_1 = _a[_i];
                            var item = this.parent.clonedFieldList[name_1];
                            this.parent.olapEngineModule.updateFieldlistData(item.id, item.isSelected);
                        }
                    }
                    else if (this.parent.isPopupView && this.parent.clonedFieldListData &&
                        Object.keys(this.parent.clonedFieldListData).length > 0) {
                        this.parent.olapEngineModule.fieldListData = this.parent.clonedFieldListData;
                    }
                }
                else {
                    this.parent.engineModule.fieldList = util_1.PivotUtil.getClonedFieldList(this.parent.clonedFieldList);
                }
                this.parent.updateDataSource(false, true);
            }
            if ((!this.parent.isDeferLayoutUpdate || (this.parent.pivotGridModule
                && !this.parent.pivotGridModule.pivotDeferLayoutUpdate)) && isDeferLayoutEnabled) {
                this.parent.pivotChange = false;
            }
            if (this.parent.allowDeferLayoutUpdate && this.parent.isPopupView && this.parent.pivotGridModule && !this.parent.isAdaptive) {
                this.parent.pivotGridModule.actionObj.actionName = '';
                this.parent.pivotGridModule.engineModule = this.parent.engineModule;
                this.parent.pivotGridModule.olapEngineModule = this.parent.olapEngineModule;
                this.parent.pivotGridModule.setProperties({
                    dataSourceSettings: this.parent.clonedDataSource
                }, true);
            }
            if (this.parent.allowDeferLayoutUpdate && this.parent.allowCalculatedField &&
                this.parent.dataType === 'pivot' && !this.parent.isAdaptive) {
                this.parent.engineModule.fieldList = this.parent.pivotFieldList = util_1.PivotUtil.getClonedFieldList(this.parent.clonedFieldList);
                var clonedField_1 = Object.keys(this.parent.engineModule.fieldList);
                Iif (this.parent.allowCalculatedField && clonedField_1.length !== this.parent.engineModule.fields.length) {
                    var fields_1 = [];
                    this.parent.engineModule.fields.forEach(function (field) {
                        if (clonedField_1.indexOf(field) !== -1) {
                            fields_1[fields_1.length] = field;
                        }
                    });
                    this.parent.engineModule.fields = fields_1;
                }
            }
            if (this.parent.renderMode === 'Popup' && !isDeferLayoutEnabled) {
                this.parent.dialogRenderer.fieldListDialog.hide();
                this.parent.actionObj.actionName = events.closeFieldlist;
            }
            else {
                this.parent.actionObj.actionName = events.actionDropped;
            }
            Eif (this.parent.actionObj.actionName) {
                this.parent.actionCompleteMethod();
            }
        };
        DialogRenderer.prototype.renderFieldListDialog = function (fieldListWrappper) {
            var toggleFieldList = ej2_base_1.createElement('div', {
                className: cls.TOGGLE_FIELD_LIST_CLASS + ' ' + cls.ICON + ' ' + cls.TOGGLE_SELECT_CLASS,
                attrs: {
                    'tabindex': '0',
                    title: this.parent.localeObj.getConstant('fieldList'),
                    'aria-disabled': 'false',
                    'aria-label': this.parent.localeObj.getConstant('fieldList'),
                    'role': 'button'
                }
            });
            this.parent.element.appendChild(toggleFieldList);
            if (this.parent.isAdaptive) {
                var headerTemplate = '<div class=' + cls.TITLE_MOBILE_HEADER + '><span class="' + cls.ICON + ' ' +
                    cls.BACK_ICON + '"></span><div class=' + cls.TITLE_MOBILE_CONTENT + '>' + this.parent.localeObj.getConstant('fieldList') +
                    '</div></div>';
                var buttons = [{
                        click: this.showFieldListDialog.bind(this),
                        isFlat: false,
                        buttonModel: {
                            cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                            iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
                            isPrimary: true
                        }
                    }, {
                        click: this.showCalculatedField.bind(this),
                        isFlat: false,
                        buttonModel: {
                            cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
                                ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                            iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS, enableRtl: this.parent.enableRtl,
                            isPrimary: true
                        }
                    }];
                this.fieldListDialog = new ej2_popups_1.Dialog({
                    animationSettings: { effect: this.parent.enableRtl ? 'SlideRight' : 'SlideLeft' },
                    header: headerTemplate,
                    content: this.parentElement,
                    isModal: true,
                    showCloseIcon: false,
                    visible: false,
                    allowDragging: false,
                    closeOnEscape: false,
                    enableRtl: this.parent.enableRtl,
                    locale: this.parent.locale,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    width: '100%',
                    height: '100%',
                    position: { X: 'center', Y: 'center' },
                    buttons: buttons,
                    target: document.body,
                    cssClass: this.parent.cssClass,
                    close: this.removeFieldListIcon.bind(this),
                    open: this.dialogOpen.bind(this)
                });
                this.fieldListDialog.isStringTemplate = true;
                this.fieldListDialog.appendTo(fieldListWrappper);
                ej2_base_2.setStyleAttribute(ej2_base_1.select('#' + fieldListWrappper.id + '_dialog-content', fieldListWrappper), {
                    'padding': '0'
                });
                var footer = fieldListWrappper.querySelector('.' + cls.FOOTER_CONTENT_CLASS);
                ej2_base_1.addClass([footer], cls.FIELD_LIST_FOOTER_CLASS);
                ej2_base_1.removeClass([footer.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.BUTTON_FLAT_CLASS);
                ej2_base_1.removeClass([footer.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.BUTTON_FLAT_CLASS);
                this.fieldListDialog.element.querySelector('.' + cls.BACK_ICON).onclick =
                    this.parent.allowDeferLayoutUpdate ? this.onDeferUpdateClick.bind(this) : this.onCloseFieldList.bind(this);
            }
            else {
                var template = this.createDeferUpdateButtons().outerHTML;
                var headerTemplate = '<div class=' + cls.TITLE_HEADER_CLASS + '><div class=' +
                    cls.TITLE_CONTENT_CLASS + '>' + this.parent.localeObj.getConstant('fieldList') + '</div></div>';
                this.fieldListDialog = new ej2_popups_1.Dialog({
                    animationSettings: { effect: 'Zoom' },
                    header: headerTemplate,
                    content: this.parentElement,
                    isModal: false,
                    showCloseIcon: false,
                    visible: false,
                    allowDragging: true,
                    enableRtl: this.parent.enableRtl,
                    locale: this.parent.locale,
                    enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                    width: this.parent.element.style.width,
                    position: { X: 'center', Y: this.parent.element.offsetTop },
                    footerTemplate: template,
                    closeOnEscape: false,
                    cssClass: this.parent.cssClass,
                    target: !ej2_base_1.isNullOrUndefined(this.parent.target) ? ((typeof this.parent.target) === 'string') ?
                        document.querySelector(this.parent.target) : this.parent.target : document.body,
                    close: this.removeFieldListIcon.bind(this)
                });
                this.fieldListDialog.isStringTemplate = true;
                this.fieldListDialog.appendTo(fieldListWrappper);
                this.renderDeferUpdateButtons(fieldListWrappper);
                ej2_base_2.setStyleAttribute(ej2_base_1.select('#' + fieldListWrappper.id + '_title', fieldListWrappper), { 'width': '100%' });
                fieldListWrappper.querySelector('.' + cls.TITLE_HEADER_CLASS).appendChild(this.createCalculatedButton());
            }
        };
        DialogRenderer.prototype.dialogOpen = function () {
            Iif (this.lastTabIndex === 4) {
                this.adaptiveElement.items[this.lastTabIndex].content = '';
                this.adaptiveElement.dataBind();
                this.parent.notify(events.initCalculatedField, {});
            }
            else {
                this.adaptiveElement.refresh();
            }
        };
        DialogRenderer.prototype.updateDataSource = function (selectedNodes) {
            var axis = ['filters', 'columns', 'rows', 'values'];
            for (var _i = 0, selectedNodes_1 = selectedNodes; _i < selectedNodes_1.length; _i++) {
                var field = selectedNodes_1[_i];
                var fieldName = field;
                var droppedClass = axis[this.adaptiveElement.selectedItem];
                this.parent.pivotCommon.dataSourceUpdate.control = this.parent.getModuleName() === 'pivotview' ?
                    this.parent : (this.parent.pivotGridModule ?
                    this.parent.pivotGridModule : this.parent);
                this.parent.pivotCommon.dataSourceUpdate.updateDataSource(fieldName, droppedClass, -1);
            }
            this.parent.axisFieldModule.render();
            Eif (!this.parent.allowDeferLayoutUpdate) {
                this.parent.updateDataSource(true);
            }
            else {
                this.parent.triggerPopulateEvent();
            }
        };
        DialogRenderer.prototype.onDeferUpdateClick = function () {
            this.parent.updateDataSource();
            this.parent.dialogRenderer.fieldListDialog.hide();
        };
        DialogRenderer.prototype.renderAdaptiveLayout = function (fieldListWrappper) {
            var layoutFooter = ej2_base_1.createElement('div', {
                className: cls.FIELD_LIST_FOOTER_CLASS
            });
            fieldListWrappper.appendChild(this.parentElement);
            var items = [
                {
                    header: { 'text': this.parent.localeObj.getConstant('filters') },
                    content: this.createAxisTable('filters')
                },
                {
                    header: { 'text': this.parent.localeObj.getConstant('columns') },
                    content: this.createAxisTable('columns')
                },
                {
                    header: { 'text': this.parent.localeObj.getConstant('rows') },
                    content: this.createAxisTable('rows')
                },
                {
                    header: { 'text': this.parent.localeObj.getConstant('values') },
                    content: this.createAxisTable('values')
                },
                {
                    header: { 'text': this.parent.localeObj.getConstant('createCalculatedField') },
                    content: 'Calculated Field Related UI'
                }
            ];
            Iif (!this.parent.allowCalculatedField) {
                items.pop();
            }
            this.adaptiveElement = new ej2_navigations_1.Tab({
                heightAdjustMode: 'Auto',
                items: items,
                height: '100%',
                enableRtl: this.parent.enableRtl,
                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
                locale: this.parent.locale,
                selected: this.tabSelect.bind(this),
                cssClass: this.parent.cssClass
            });
            if (this.parent.renderMode === 'Fixed') {
                layoutFooter.appendChild(this.createAddButton());
                ej2_base_1.addClass([fieldListWrappper], cls.STATIC_FIELD_LIST_CLASS);
                this.adaptiveElement.isStringTemplate = true;
                this.adaptiveElement.appendTo(this.parentElement);
                this.parentElement.appendChild(layoutFooter);
            }
            else {
                this.adaptiveElement.isStringTemplate = true;
                this.adaptiveElement.appendTo(this.parentElement);
            }
        };
        DialogRenderer.prototype.tabSelect = function (e) {
            var fieldWrapper = ej2_base_1.closest(this.parentElement, '.' + cls.WRAPPER_CLASS);
            this.lastTabIndex = e.selectedIndex;
            Eif (fieldWrapper && fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)) {
                if (e.selectedIndex !== 4) {
                    ej2_base_1.addClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.ICON_DISABLE);
                    ej2_base_1.removeClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.ICON_DISABLE);
                }
                else {
                    ej2_base_1.removeClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS)], cls.ICON_DISABLE);
                    ej2_base_1.addClass([fieldWrapper.querySelector('.' + cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS)], cls.ICON_DISABLE);
                }
            }
            if (e.selectedIndex === 4) {
                this.adaptiveElement.items[4].content = '';
                this.adaptiveElement.dataBind();
                this.parent.notify(events.initCalculatedField, {});
            }
            else {
                this.parent.axisFieldModule.render();
            }
        };
        DialogRenderer.prototype.createCalculatedButton = function () {
            var calculatedButton = ej2_base_1.createElement('button', {
                id: this.parent.element.id + '_CalculatedField',
                attrs: {
                    'type': 'button',
                    'tabindex': '0',
                    'aria-disabled': 'false',
                    'aria-label': this.parent.localeObj.getConstant('CalculatedField')
                }
            });
            var calculateField = new ej2_buttons_1.Button({
                cssClass: cls.CALCULATED_FIELD_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                content: this.parent.localeObj.getConstant('CalculatedField'),
                enableRtl: this.parent.enableRtl, locale: this.parent.locale, enableHtmlSanitizer: this.parent.enableHtmlSanitizer
            });
            calculateField.isStringTemplate = true;
            calculateField.appendTo(calculatedButton);
            if (this.parent.calculatedFieldModule) {
                ej2_base_1.removeClass([calculatedButton], cls.ICON_DISABLE);
            }
            calculateField.element.onclick = this.showCalculatedField.bind(this);
            return calculatedButton;
        };
        DialogRenderer.prototype.createAddButton = function () {
            var footerContainer = ej2_base_1.createElement('div', {
                className: cls.FIELD_LIST_FOOTER_CLASS + '-content'
            });
            var fieldListButton = ej2_base_1.createElement('div', {});
            var calculatedButton = ej2_base_1.createElement('div', {});
            var calculateField = new ej2_buttons_1.Button({
                cssClass: cls.ADAPTIVE_CALCULATED_FIELD_BUTTON_CLASS +
                    ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + ' ' + cls.ICON_DISABLE + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
                enableRtl: this.parent.enableRtl, locale: this.parent.locale, enableHtmlSanitizer: this.parent.enableHtmlSanitizer
            });
            var fieldList = new ej2_buttons_1.Button({
                cssClass: cls.ADAPTIVE_FIELD_LIST_BUTTON_CLASS + ' ' + cls.BUTTON_SMALL_CLASS + ' ' + cls.BUTTON_ROUND_CLASS + (this.parent.cssClass ? (' ' + this.parent.cssClass) : ''),
                iconCss: cls.ICON + ' ' + cls.ADD_ICON_CLASS,
                enableRtl: this.parent.enableRtl, locale: this.parent.locale, enableHtmlSanitizer: this.parent.enableHtmlSanitizer
            });
            fieldList.isStringTemplate = true;
            fieldList.appendTo(fieldListButton);
            calculateField.isStringTemplate = true;
            calculateField.appendTo(calculatedButton);
            footerContainer.appendChild(fieldListButton);
            footerContainer.appendChild(calculatedButton);
            calculateField.element.onclick = this.showCalculatedField.bind(this);
            fieldList.element.onclick = this.showFieldListDialog.bind(this);
            return footerContainer;
        };
        DialogRenderer.prototype.createAxisTable = function (axis) {
            var axisWrapper = ej2_base_1.createElement('div', {
                className: cls.FIELD_LIST_CLASS + '-' + axis
            });
            var axisContent = ej2_base_1.createElement('div', { className: cls.AXIS_CONTENT_CLASS + ' ' + 'e-' + axis });
            var axisPrompt = ej2_base_1.createElement('span', {
                className: cls.AXIS_PROMPT_CLASS
            });
            axisPrompt.innerText = this.parent.localeObj.getConstant('addPrompt');
            axisWrapper.appendChild(axisContent);
            axisWrapper.appendChild(axisPrompt);
            return axisWrapper;
        };
        DialogRenderer.prototype.showCalculatedField = function () {
            try {
                if (!this.parent.isAdaptive) {
                    this.parent.actionObj.actionName = events.openCalculatedField;
                    Iif (this.parent.actionBeginMethod()) {
                        return;
                    }
                    if (this.parent.dialogRenderer.fieldListDialog) {
                        this.parent.dialogRenderer.fieldListDialog.hide();
                        ej2_base_1.addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
                    }
                }
                this.parent.notify(events.initCalculatedField, {});
            }
            catch (execption) {
                this.parent.actionFailureMethod(execption);
            }
        };
        DialogRenderer.prototype.showFieldListDialog = function () {
            var activeindex = this.adaptiveElement.selectedItem;
            this.parent.treeViewModule.render(activeindex);
        };
        DialogRenderer.prototype.onShowFieldList = function () {
            this.parent.actionObj.actionName = events.showFieldList;
            Iif (this.parent.actionBeginMethod()) {
                return;
            }
            this.parent.actionObj.actionName = '';
            try {
                if (this.parent.allowDeferLayoutUpdate) {
                    Iif (this.parent.isAdaptive) {
                        this.parent.axisFieldModule.render();
                    }
                    this.parent.clonedDataSource = util_1.PivotUtil.getClonedDataSourceSettings(this.parent.dataSourceSettings);
                    Iif (this.parent.dataType === 'olap') {
                        this.parent.clonedFieldListData = util_1.PivotUtil.cloneOlapFieldSettings(this.parent.olapEngineModule.fieldListData);
                    }
                    this.parent.clonedFieldList = util_1.PivotUtil.getClonedFieldList(this.parent.pivotFieldList);
                }
                ej2_base_1.addClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
                this.parent.dialogRenderer.fieldListDialog.show();
                this.parent.dialogRenderer.fieldListDialog.element.style.top =
                    parseInt(this.parent.dialogRenderer.fieldListDialog.element.style.top, 10) < 0 ?
                        '0px' : this.parent.dialogRenderer.fieldListDialog.element.style.top;
            }
            catch (execption) {
                this.parent.actionFailureMethod(execption);
            }
        };
        DialogRenderer.prototype.removeFieldListIcon = function () {
            if (this.parent.isAdaptive && this.parent.allowCalculatedField && this.parent.calculatedFieldModule) {
                Iif (this.adaptiveElement && this.adaptiveElement.selectedItem === 4) {
                    if (ej2_base_1.select('#' + this.parent.element.id + 'droppable', this.adaptiveElement.element)) {
                        this.parent.calculatedFieldModule.updateAdaptiveCalculatedField(false);
                    }
                    else {
                        this.parent.notify(events.initCalculatedField, { edit: false });
                    }
                }
            }
            if (!document.getElementById(this.parent.element.id + 'calculateddialog')) {
                ej2_base_1.removeClass([this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS)], cls.ICON_HIDDEN);
            }
        };
        DialogRenderer.prototype.keyPress = function (e) {
            Eif (e.keyCode === 13 && e.target) {
                e.target.click();
                e.preventDefault();
                return;
            }
        };
        DialogRenderer.prototype.wireDialogEvent = function (element) {
            ej2_base_2.EventHandler.add(element, 'keydown', this.keyPress, this);
            ej2_base_2.EventHandler.add(element, 'click', this.onShowFieldList, this);
        };
        DialogRenderer.prototype.unWireDialogEvent = function (element) {
            ej2_base_2.EventHandler.remove(element, 'keydown', this.keyPress);
            ej2_base_2.EventHandler.remove(element, 'click', this.onShowFieldList);
        };
        DialogRenderer.prototype.destroy = function () {
            if (this.parent.renderMode === 'Popup') {
                this.unWireDialogEvent(this.parent.element.querySelector('.' + cls.TOGGLE_FIELD_LIST_CLASS));
            }
            if (this.deferUpdateCheckBox && !this.deferUpdateCheckBox.isDestroyed) {
                this.deferUpdateCheckBox.destroy();
                this.deferUpdateCheckBox = null;
            }
            if (this.deferUpdateApplyButton && !this.deferUpdateApplyButton.isDestroyed) {
                this.deferUpdateApplyButton.destroy();
                this.deferUpdateApplyButton = null;
            }
            if (this.deferUpdateCancelButton && !this.deferUpdateCancelButton.isDestroyed) {
                this.deferUpdateCancelButton.destroy();
                this.deferUpdateCancelButton = null;
            }
            if (this.adaptiveElement && !this.adaptiveElement.isDestroyed) {
                this.adaptiveElement.destroy();
                this.adaptiveElement = null;
            }
            if (this.parent.renderMode === 'Popup') {
                Eif (this.fieldListDialog && !this.fieldListDialog.isDestroyed) {
                    this.fieldListDialog.destroy();
                    this.fieldListDialog = null;
                }
                Eif (document.getElementById(this.parent.element.id + '_Container')) {
                    ej2_base_1.remove(document.getElementById(this.parent.element.id + '_Container'));
                }
            }
        };
        return DialogRenderer;
    }());
    exports.DialogRenderer = DialogRenderer;
});