all files / document-editor/implementation/dialogs/ page-setup-dialog.js

91.78% Statements 525/572
83.86% Branches 239/285
82.61% Functions 19/23
91.78% Lines 525/572
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 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811   156× 156× 156× 156× 25× 25× 25× 25× 25× 25× 25× 25× 25× 25× 25× 25× 25×       25×   25×   156× 14× 14×   156×   156×         156×                                               156× 21× 21× 11× 11×     10×   21×         19×         17×         15×         12×         10×                                                               156×                 156×                 156× 15× 15× 15× 15× 15× 15× 15× 15× 15× 15× 15× 15× 15×   156×   14486×   12× 12× 12× 12×     12×     12×     12× 12× 12×     12×     12×     12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12×         12× 12× 12×   12× 12× 12× 12× 12× 12×   12×     12×     12× 12× 12× 12× 12× 12× 12×     12×     12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12×     11×   12× 12×     12× 12×     12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12×   12×     12× 12× 12× 12× 12×   12×     12× 12×     12× 12× 12× 12× 12× 12× 12× 12× 12× 12×                           12× 12× 12× 12× 12×   12× 12× 12×     12× 12× 12×     12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12× 12×   12× 12× 12× 12× 12× 12× 12× 12×   12×     12× 12×     12× 12× 12× 12× 12× 12× 12× 12×   14× 14× 14× 11×   14× 14× 14× 14× 14× 14× 14×               14× 14× 14× 14× 14×     25×   16×                                                   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 217× 217× 217× 12× 10×   12×       12×     217× 12×     217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217×       217×       217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217×       217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 12× 12×   217× 11× 11×          
define(["require", "exports", "@syncfusion/ej2-inputs", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-buttons", "@syncfusion/ej2-base", "./../../implementation/format/index", "@syncfusion/ej2-navigations", "../editor/editor-helper", "@syncfusion/ej2-popups"], function (require, exports, ej2_inputs_1, ej2_base_1, ej2_dropdowns_1, ej2_buttons_1, ej2_base_2, index_1, ej2_navigations_1, editor_helper_1, ej2_popups_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var PageSetupDialog = (function () {
        function PageSetupDialog(documentHelper) {
            var _this = this;
            this.isPortrait = true;
            this.keyUpInsertPageSettingsClickHandler = this.onKeyUpInsertPageSettingsClick.bind(this);
            this.loadPageSetupDialog = function () {
                _this.documentHelper.updateFocus();
                var sectionFormat = _this.documentHelper.selection.sectionFormat;
                _this.topMarginBox.value = sectionFormat.topMargin;
                _this.leftMarginBox.value = sectionFormat.leftMargin;
                _this.bottomMarginBox.value = sectionFormat.bottomMargin;
                _this.rightMarginBox.value = sectionFormat.rightMargin;
                _this.widthBox.value = sectionFormat.pageWidth;
                _this.heightBox.value = sectionFormat.pageHeight;
                _this.checkBox1.checked = sectionFormat.differentOddAndEvenPages;
                _this.checkBox2.checked = sectionFormat.differentFirstPage;
                _this.headerBox.value = sectionFormat.headerDistance;
                _this.footerBox.value = sectionFormat.footerDistance;
                Iif (_this.widthBox.value > _this.heightBox.value) {
                    _this.landscape.checked = true;
                }
                else {
                    _this.portrait.checked = true;
                }
                _this.setPageSize(_this.portrait.checked, parseFloat(sectionFormat.pageWidth.toFixed(1)), parseFloat(sectionFormat.pageHeight.toFixed(1)));
            };
            this.closePageSetupDialog = function () {
                _this.unWireEventsAndBindings();
                _this.documentHelper.updateFocus();
            };
            this.onCancelButtonClick = function () {
                _this.documentHelper.dialog.hide();
                _this.unWireEventsAndBindings();
                _this.documentHelper.updateFocus();
            };
            this.keyUpInsertPageSettings = function (event) {
                if (event.keyCode === 13) {
                    _this.applyPageSetupProperties();
                }
            };
            this.applyPageSetupProperties = function () {
                var sectionFormat = new index_1.WSectionFormat();
                var localValue = new ej2_base_1.L10n('documenteditor', _this.documentHelper.owner.defaultLocale);
                localValue.setLocale(_this.documentHelper.owner.locale);
                var currentSectionFormat = _this.documentHelper.selection.sectionFormat;
                sectionFormat.bottomMargin = _this.bottomMarginBox.value;
                sectionFormat.topMargin = _this.topMarginBox.value;
                sectionFormat.leftMargin = _this.leftMarginBox.value;
                sectionFormat.rightMargin = _this.rightMarginBox.value;
                sectionFormat.pageWidth = _this.widthBox.value;
                sectionFormat.pageHeight = _this.heightBox.value;
                sectionFormat.differentOddAndEvenPages = _this.checkBox1.checked;
                sectionFormat.differentFirstPage = _this.checkBox2.checked;
                sectionFormat.headerDistance = _this.headerBox.value;
                sectionFormat.footerDistance = _this.footerBox.value;
                Iif (_this.widthBox.value < (_this.leftMarginBox.value + _this.rightMarginBox.value)) {
                    ej2_popups_1.DialogUtility.alert(localValue.getConstant('Left and right margins.'));
                    return;
                }
                Iif (_this.widthBox.value < (_this.leftMarginBox.value + _this.rightMarginBox.value + 36)) {
                    ej2_popups_1.DialogUtility.alert(localValue.getConstant('Column width cannot be less than 36 pt.'));
                    return;
                }
                Iif (Math.abs((_this.topMarginBox.value + _this.bottomMarginBox.value)) > _this.heightBox.value) {
                    ej2_popups_1.DialogUtility.alert(localValue.getConstant('The top/bottom margins are too large for the page height in some sections.'));
                    return;
                }
                sectionFormat.numberOfColumns = currentSectionFormat.numberOfColumns;
                sectionFormat.equalWidth = currentSectionFormat.equalWidth;
                sectionFormat.lineBetweenColumns = currentSectionFormat.lineBetweenColumns;
                var cols = [];
                var pageWidth = editor_helper_1.HelperMethods.convertPointToPixel(sectionFormat.pageWidth - sectionFormat.leftMargin - sectionFormat.rightMargin);
                for (var i = 0; i < currentSectionFormat.columns.length; i++) {
                    var colFormat = new index_1.WColumnFormat();
                    var width = editor_helper_1.HelperMethods.convertPointToPixel(currentSectionFormat.columns[parseInt(i.toString(), 10)].width);
                    var space = editor_helper_1.HelperMethods.convertPointToPixel(currentSectionFormat.columns[parseInt(i.toString(), 10)].space);
                    var totalSpace = (currentSectionFormat.numberOfColumns - 1) * space;
                    if ((currentSectionFormat.equalWidth || width === 0) && !ej2_base_2.isNullOrUndefined(pageWidth)) {
                        width = (pageWidth - totalSpace) / currentSectionFormat.numberOfColumns;
                    }
                    colFormat.width = width;
                    colFormat.space = space;
                    colFormat.index = i;
                    cols.push(colFormat);
                }
                sectionFormat.columns = cols;
                if (currentSectionFormat.pageHeight === sectionFormat.pageHeight && currentSectionFormat.pageWidth === sectionFormat.pageWidth) {
                    sectionFormat.breakCode = currentSectionFormat.breakCode;
                }
                _this.documentHelper.owner.editorModule.onApplySectionFormat(undefined, sectionFormat);
                _this.documentHelper.hideDialog();
            };
            this.changeByPaperSize = function (event) {
                var value = event.value;
                if (_this.documentHelper.selection.sectionFormat.pageWidth > _this.documentHelper.selection.sectionFormat.pageHeight || _this.landscape.checked) {
                    _this.isPortrait = false;
                    _this.portrait.checked = false;
                }
                else {
                    _this.isPortrait = true;
                }
                if (value === 'letter') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 612;
                        _this.heightBox.value = 792;
                    }
                    else {
                        _this.widthBox.value = 792;
                        _this.heightBox.value = 612;
                    }
                }
                else if (value === 'tabloid') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 792;
                        _this.heightBox.value = 1224;
                    }
                    else {
                        _this.widthBox.value = 1224;
                        _this.heightBox.value = 792;
                    }
                }
                else if (value === 'legal') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 612;
                        _this.heightBox.value = 1008;
                    }
                    else {
                        _this.widthBox.value = 1008;
                        _this.heightBox.value = 612;
                    }
                }
                else if (value === 'statement') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 392;
                        _this.heightBox.value = 612;
                    }
                    else {
                        _this.widthBox.value = 612;
                        _this.heightBox.value = 392;
                    }
                }
                else if (value === 'executive') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 522;
                        _this.heightBox.value = 756;
                    }
                    else {
                        _this.widthBox.value = 756;
                        _this.heightBox.value = 522;
                    }
                }
                else if (value === 'a3') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 841.9;
                        _this.heightBox.value = 1190.55;
                    }
                    else {
                        _this.widthBox.value = 1190.55;
                        _this.heightBox.value = 841.9;
                    }
                }
                else if (value === 'a4') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 595.3;
                        _this.heightBox.value = 841.9;
                    }
                    else {
                        _this.widthBox.value = 841.9;
                        _this.heightBox.value = 595.3;
                    }
                }
                else if (value === 'a5') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 419.55;
                        _this.heightBox.value = 595.3;
                    }
                    else {
                        _this.widthBox.value = 595.3;
                        _this.heightBox.value = 419.55;
                    }
                }
                else if (value === 'b4') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 728.5;
                        _this.heightBox.value = 1031.8;
                    }
                    else {
                        _this.widthBox.value = 1031.8;
                        _this.heightBox.value = 728.5;
                    }
                }
                else Eif (value === 'b5') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = 515.9;
                        _this.heightBox.value = 728.5;
                    }
                    else {
                        _this.widthBox.value = 728.5;
                        _this.heightBox.value = 515.9;
                    }
                }
                else if (value === 'customsize') {
                    if (_this.isPortrait) {
                        _this.widthBox.value = _this.documentHelper.selection.sectionFormat.pageWidth;
                        _this.heightBox.value = _this.documentHelper.selection.sectionFormat.pageHeight;
                    }
                    else {
                        _this.widthBox.value = _this.documentHelper.selection.sectionFormat.pageWidth;
                        _this.heightBox.value = _this.documentHelper.selection.sectionFormat.pageHeight;
                    }
                }
            };
            this.onPortrait = function () {
                _this.landscape.checked = false;
                var width = _this.widthBox.value;
                var height = _this.heightBox.value;
                if (width > height) {
                    _this.widthBox.value = height;
                    _this.heightBox.value = width;
                }
            };
            this.onLandscape = function () {
                _this.portrait.checked = false;
                var width = _this.widthBox.value;
                var height = _this.heightBox.value;
                if (width < height) {
                    _this.widthBox.value = height;
                    _this.heightBox.value = width;
                }
            };
            this.unWireEventsAndBindings = function () {
                _this.paperSize.value = undefined;
                _this.topMarginBox.value = undefined;
                _this.bottomMarginBox.value = undefined;
                _this.leftMarginBox.value = undefined;
                _this.rightMarginBox.value = undefined;
                _this.headerBox.value = undefined;
                _this.footerBox.value = undefined;
                _this.widthBox.value = undefined;
                _this.heightBox.value = undefined;
                _this.checkBox1.checked = false;
                _this.checkBox2.checked = false;
                _this.portrait.checked = false;
                _this.landscape.checked = false;
            };
            this.documentHelper = documentHelper;
        }
        PageSetupDialog.prototype.getModuleName = function () {
            return 'PageSetupDialog';
        };
        PageSetupDialog.prototype.initPageSetupDialog = function (locale, isRtl) {
            this.target = ej2_base_1.createElement('div');
            this.ejtabContainer = ej2_base_1.createElement('div');
            this.target.appendChild(this.ejtabContainer);
            this.marginTab = ej2_base_1.createElement('div', {
                styles: 'position: relative;', className: 'e-de-dlg-tab-first-child'
            });
            this.paperTab = ej2_base_1.createElement('div', {
                styles: 'position: relative;', className: 'e-de-dlg-tab-first-child'
            });
            this.layoutTab = ej2_base_1.createElement('div', {
                styles: 'position: relative;', className: 'e-de-dlg-tab-first-child'
            });
            this.ejtab = ej2_base_1.createElement('div', { className: 'e-de-page-setup-ppty-tab' });
            this.headerContainer = ej2_base_1.createElement('div', { className: 'e-tab-header' });
            this.marginHeader = ej2_base_1.createElement('div', {
                innerHTML: locale.getConstant('Margin')
            });
            this.paperHeader = ej2_base_1.createElement('div', {
                innerHTML: locale.getConstant('Paper')
            });
            this.layoutHeader = ej2_base_1.createElement('div', {
                innerHTML: locale.getConstant('Layout')
            });
            this.headerContainer.appendChild(this.marginHeader);
            this.headerContainer.appendChild(this.paperHeader);
            this.headerContainer.appendChild(this.layoutHeader);
            this.marginContent = ej2_base_1.createElement('div');
            this.paperContent = ej2_base_1.createElement('div');
            this.layoutContent = ej2_base_1.createElement('div');
            this.marginContent.appendChild(this.marginTab);
            this.paperContent.appendChild(this.paperTab);
            this.layoutContent.appendChild(this.layoutTab);
            this.ejtabContainer.appendChild(this.ejtab);
            this.initMarginProperties(this.marginTab, locale, isRtl);
            this.initPaperSizeProperties(this.paperTab, locale, isRtl);
            this.initLayoutProperties(this.layoutTab, locale, isRtl);
            var items = [
                { header: { text: this.marginHeader }, content: this.marginContent },
                { header: { text: this.paperHeader }, content: this.paperContent },
                { header: { text: this.layoutHeader }, content: this.layoutContent }
            ];
            var tabObj = new ej2_navigations_1.Tab({ items: items, enableRtl: isRtl }, this.ejtab);
            tabObj.isStringTemplate = true;
            this.target.addEventListener('keyup', this.keyUpInsertPageSettingsClickHandler);
        };
        PageSetupDialog.prototype.initMarginProperties = function (element, locale, isRtl) {
            this.marginDiv = ej2_base_1.createElement('div');
            this.leftMarginDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.marginDiv.appendChild(this.leftMarginDiv);
            this.rightMarginDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.marginDiv.appendChild(this.rightMarginDiv);
            if (isRtl) {
                this.leftMarginDiv.classList.add('e-de-rtl');
                this.rightMarginDiv.classList.add('e-de-rtl');
            }
            this.topTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.bottomTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.topContainer = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.topContainer.appendChild(this.topTextBox);
            this.leftMarginDiv.appendChild(this.topContainer);
            this.bottomContainer = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.bottomContainer.appendChild(this.bottomTextBox);
            this.leftMarginDiv.appendChild(this.bottomContainer);
            this.leftTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }, id: this.target.id + '_left'
            });
            this.rightTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.leftContainer = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.leftContainer.appendChild(this.leftTextBox);
            this.rightMarginDiv.appendChild(this.leftContainer);
            this.rightContainer = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.rightContainer.appendChild(this.rightTextBox);
            this.rightMarginDiv.appendChild(this.rightContainer);
            element.appendChild(this.marginDiv);
            this.topMarginBox = new ej2_inputs_1.NumericTextBox({ value: 71, max: 1584, min: -1584, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Top') });
            this.topMarginBox.appendTo(this.topTextBox);
            this.leftMarginBox = new ej2_inputs_1.NumericTextBox({ value: 73, max: 1584, min: 0, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Left') });
            this.leftMarginBox.appendTo(this.leftTextBox);
            this.bottomMarginBox = new ej2_inputs_1.NumericTextBox({ value: 72, max: 1584, min: -1584, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Bottom') });
            this.bottomMarginBox.appendTo(this.bottomTextBox);
            this.rightMarginBox = new ej2_inputs_1.NumericTextBox({ value: 74, max: 1584, min: 0, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Right') });
            this.rightMarginBox.appendTo(this.rightTextBox);
            this.orientationDiv = ej2_base_1.createElement('div');
            this.orientationLabeldiv = ej2_base_1.createElement('div', { className: 'e-de-para-dlg-heading', innerHTML: locale.getConstant('Orientation') });
            this.orientationPropDiv = ej2_base_1.createElement('div', { styles: 'display: flex;' });
            this.topTextBox.setAttribute('aria-labelledby', locale.getConstant('Top'));
            this.bottomTextBox.setAttribute('aria-labelledby', locale.getConstant('Bottom'));
            this.leftTextBox.setAttribute('aria-labelledby', locale.getConstant('Left'));
            this.rightTextBox.setAttribute('aria-labelledby', locale.getConstant('Right'));
            var portraitDivStyles;
            if (isRtl) {
                portraitDivStyles = 'padding-left: 30px;';
            }
            else {
                portraitDivStyles = 'padding-right: 30px;';
            }
            this.portraitDiv = ej2_base_1.createElement('div', { id: '_portraitDiv', styles: portraitDivStyles });
            var portrait = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.landscapeDiv = ej2_base_1.createElement('div', { id: '_landscapeDiv' });
            var landscape = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.portraitDiv.appendChild(portrait);
            this.landscapeDiv.appendChild(landscape);
            this.orientationPropDiv.appendChild(this.portraitDiv);
            this.orientationPropDiv.appendChild(this.landscapeDiv);
            this.orientationDiv.appendChild(this.orientationLabeldiv);
            this.orientationDiv.appendChild(this.orientationPropDiv);
            this.portrait = new ej2_buttons_1.RadioButton({ label: locale.getConstant('Portrait'), checked: true, enableRtl: isRtl, change: this.onPortrait });
            this.landscape = new ej2_buttons_1.RadioButton({ label: locale.getConstant('Landscape'), enableRtl: isRtl, change: this.onLandscape });
            this.portrait.appendTo(portrait);
            this.landscape.appendTo(landscape);
            element.appendChild(this.orientationDiv);
            portrait.setAttribute('aria-label', locale.getConstant('Portrait'));
            landscape.setAttribute('aria-label', locale.getConstant('Landscape'));
        };
        PageSetupDialog.prototype.initPaperSizeProperties = function (element, locale, isRtl) {
            this.sizeDiv = ej2_base_1.createElement('div', {
                className: 'e-de-container-row'
            });
            this.leftSizeDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.sizeDiv.appendChild(this.leftSizeDiv);
            this.rightSizeDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.sizeDiv.appendChild(this.rightSizeDiv);
            if (isRtl) {
                this.leftSizeDiv.classList.add('e-de-rtl');
                this.rightSizeDiv.classList.add('e-de-rtl');
            }
            this.widthTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.leftSizeDiv.appendChild(this.widthTextBox);
            this.heightTextBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.rightSizeDiv.appendChild(this.heightTextBox);
            element.appendChild(this.sizeDiv);
            this.widthBox = new ej2_inputs_1.NumericTextBox({ value: 612, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Width') });
            this.widthBox.appendTo(this.widthTextBox);
            this.heightBox = new ej2_inputs_1.NumericTextBox({ value: 792, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Height') });
            this.heightBox.appendTo(this.heightTextBox);
            this.widthTextBox.setAttribute('arial-label', locale.getConstant('Width'));
            this.heightTextBox.setAttribute('arial-label', locale.getConstant('Height'));
            this.paperSizeDiv = ej2_base_1.createElement('div');
            var paperSize = ej2_base_1.createElement('select', {
                styles: 'width:170px;padding-bottom: 20px;',
                innerHTML: '<option value="letter">' + locale.getConstant('Letter') +
                    '</option><option value="tabloid">' + locale.getConstant('Tabloid') +
                    '</option><option value="legal">' + locale.getConstant('Legal') +
                    '</option><option value="statement">' + locale.getConstant('Statement') +
                    '</option><option value="executive">' + locale.getConstant('Executive') +
                    '</option><option value="a3">' + locale.getConstant('A3') +
                    '</option><option value="a4">' + locale.getConstant('A4') +
                    '</option><option value="a5">' + locale.getConstant('A5') +
                    '</option><option value="b4">' + locale.getConstant('B4') +
                    '</option><option value="b5">' + locale.getConstant('B5') +
                    '</option><option value="customsize">' + locale.getConstant('Custom Size') + '</option>'
            });
            this.paperSizeDiv.appendChild(paperSize);
            this.paperSize = new ej2_dropdowns_1.DropDownList({ change: this.changeByPaperSize, width: '170px', enableRtl: isRtl });
            this.paperSize.appendTo(paperSize);
            this.paperSize.htmlAttributes = { 'aria-labelledby': 'PaperSize', 'aria-describedby': 'PaperSize' };
            element.appendChild(this.paperSizeDiv);
        };
        PageSetupDialog.prototype.initLayoutProperties = function (element, locale, isRtl) {
            this.layoutDiv = ej2_base_1.createElement('div', { className: 'e-de-dlg-container' });
            this.firstPageDiv = ej2_base_1.createElement('div', { styles: 'height: 27px;' });
            var checkBox1 = ej2_base_1.createElement('input', {
                attrs: { 'type': 'checkbox' }
            });
            this.firstPageDiv.appendChild(checkBox1);
            this.oddOrEvenDiv = ej2_base_1.createElement('div', { styles: 'height: 27px;' });
            var checkBox2 = ej2_base_1.createElement('input', {
                attrs: { 'type': 'checkbox' }
            });
            this.firstPageDiv.setAttribute('aria-label', locale.getConstant('Different first page'));
            this.oddOrEvenDiv.setAttribute('aria-label', locale.getConstant('Different odd and even'));
            this.oddOrEvenDiv.appendChild(checkBox2);
            this.layoutDiv.appendChild(this.firstPageDiv);
            this.layoutDiv.appendChild(this.oddOrEvenDiv);
            this.checkBox1 = new ej2_buttons_1.CheckBox({ label: locale.getConstant('Different odd and even'), enableRtl: isRtl });
            this.checkBox2 = new ej2_buttons_1.CheckBox({ label: locale.getConstant('Different first page'), enableRtl: isRtl });
            this.checkBox1.appendTo(checkBox1);
            this.checkBox2.appendTo(checkBox2);
            element.appendChild(this.layoutDiv);
            this.textLabelDiv = ej2_base_1.createElement('div');
            this.textLabel = ej2_base_1.createElement('label', { className: 'e-de-para-dlg-heading', innerHTML: locale.getConstant('From edge')
            });
            this.textLabelDiv.appendChild(this.textLabel);
            element.appendChild(this.textLabelDiv);
            this.propertyDiv = ej2_base_1.createElement('div', { className: 'e-de-dlg-row' });
            this.leftLayoutDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.propertyDiv.appendChild(this.leftLayoutDiv);
            this.rightLayoutDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.propertyDiv.appendChild(this.rightLayoutDiv);
            if (isRtl) {
                this.rightLayoutDiv.classList.add('e-de-rtl');
                this.leftLayoutDiv.classList.add('e-de-rtl');
            }
            var headerBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.leftLayoutDiv.appendChild(headerBox);
            var footerBox = ej2_base_1.createElement('input', {
                attrs: { 'type': 'text' }
            });
            this.rightLayoutDiv.appendChild(footerBox);
            element.appendChild(this.propertyDiv);
            this.headerBox = new ej2_inputs_1.NumericTextBox({ value: 612, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Header') });
            this.headerBox.appendTo(headerBox);
            this.footerBox = new ej2_inputs_1.NumericTextBox({ value: 792, width: 170, decimals: 2, floatLabelType: 'Always', placeholder: locale.getConstant('Footer') });
            this.footerBox.appendTo(footerBox);
            headerBox.setAttribute('aria-labelledby', locale.getConstant('Header'));
            footerBox.setAttribute('aria-labelledby', locale.getConstant('Footer'));
        };
        PageSetupDialog.prototype.show = function () {
            var localValue = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localValue.setLocale(this.documentHelper.owner.locale);
            if (!this.target) {
                this.initPageSetupDialog(localValue, this.documentHelper.owner.enableRtl);
            }
            this.documentHelper.dialog.header = localValue.getConstant('Page Setup');
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = this.loadPageSetupDialog;
            this.documentHelper.dialog.close = this.closePageSetupDialog;
            this.documentHelper.dialog.buttons = [{
                    click: this.applyPageSetupProperties,
                    buttonModel: { content: localValue.getConstant('Ok'), cssClass: 'e-flat e-layout-ppty-okay', isPrimary: true }
                },
                {
                    click: this.onCancelButtonClick,
                    buttonModel: { content: localValue.getConstant('Cancel'), cssClass: 'e-flat e-layout-ppty-cancel' }
                }];
            this.documentHelper.dialog.dataBind();
            this.documentHelper.dialog.show();
            this.dialogElement = this.documentHelper.dialog.element;
            Eif (this.dialogElement) {
                this.documentHelper.updateDialogTabHeight(this.dialogElement, this.target);
            }
        };
        PageSetupDialog.prototype.setPageSize = function (isPortrait, width, height) {
            if ((isPortrait && width === 612 && height === 792)
                || (!isPortrait && width === 792 && height === 612)) {
                this.paperSize.value = 'letter';
            }
            else if ((isPortrait && width === 792 && height === 1224)
                || (!isPortrait && width === 1224 && height === 792)) {
                this.paperSize.value = 'tabloid';
            }
            else if ((isPortrait && width === 612 && height === 1008)
                || (!isPortrait && width === 1008 && height === 612)) {
                this.paperSize.value = 'legal';
            }
            else Iif ((isPortrait && width === 392 && height === 612)
                || (!isPortrait && width === 392 && height === 612)) {
                this.paperSize.value = 'statement';
            }
            else if ((isPortrait && width === 522 && height === 756)
                || (!isPortrait && width === 756 && height === 522)) {
                this.paperSize.value = 'executive';
            }
            else if ((isPortrait && width === 841.9 && height === 1190.5)
                || (!isPortrait && width === 1190.5 && height === 841.9)) {
                this.paperSize.value = 'a3';
            }
            else if ((isPortrait && width === 595.3 && height === 841.9)
                || (!isPortrait && width === 841.9 && height === 595.3)) {
                this.paperSize.value = 'a4';
            }
            else if ((isPortrait && width === 419.6 && height === 595.3)
                || (!isPortrait && width === 595.3 && height === 419.6)) {
                this.paperSize.value = 'a5';
            }
            else if ((isPortrait && width === 728.5 && height === 1031.8)
                || (!isPortrait && width === 1031.8 && height === 728.5)) {
                this.paperSize.value = 'b4';
            }
            else if ((isPortrait && width === 515.9 && height === 728.5)
                || (!isPortrait && width === 728.5 && height === 515.9)) {
                this.paperSize.value = 'b5';
            }
            else {
                this.paperSize.value = 'customsize';
            }
        };
        PageSetupDialog.prototype.onKeyUpInsertPageSettingsClick = function (event) {
            this.keyUpInsertPageSettings(event);
        };
        PageSetupDialog.prototype.destroy = function () {
            if (this.topMarginBox) {
                this.topMarginBox.destroy();
                this.topMarginBox = undefined;
            }
            if (this.leftMarginBox) {
                this.leftMarginBox.destroy();
                this.leftMarginBox = undefined;
            }
            if (this.bottomMarginBox) {
                this.bottomMarginBox.destroy();
                this.bottomMarginBox = undefined;
            }
            if (this.rightMarginBox) {
                this.rightMarginBox.destroy();
                this.rightMarginBox = undefined;
            }
            if (this.headerBox) {
                this.headerBox.destroy();
                this.headerBox = undefined;
            }
            if (this.footerBox) {
                this.footerBox.destroy();
                this.footerBox = undefined;
            }
            if (this.widthBox) {
                this.widthBox.destroy();
                this.widthBox = undefined;
            }
            if (this.heightBox) {
                this.heightBox.destroy();
                this.heightBox = undefined;
            }
            if (this.paperSize) {
                this.paperSize.destroy();
                this.paperSize = undefined;
            }
            if (this.checkBox1) {
                this.checkBox1.destroy();
                this.checkBox1 = undefined;
            }
            if (this.checkBox2) {
                this.checkBox2.destroy();
                this.checkBox2 = undefined;
            }
            if (this.portrait) {
                this.portrait.destroy();
                this.portrait = undefined;
            }
            if (this.landscape) {
                this.landscape.destroy();
                this.landscape = undefined;
            }
            this.documentHelper = undefined;
            this.removeEvents();
            this.removeElements();
            if (!ej2_base_2.isNullOrUndefined(this.target)) {
                if (this.target.parentElement) {
                    this.target.parentElement.removeChild(this.target);
                }
                for (var s = 0; s < this.target.childNodes.length; s++) {
                    this.target.removeChild(this.target.childNodes[parseInt(s.toString(), 10)]);
                    s--;
                }
                this.target = undefined;
            }
        };
        PageSetupDialog.prototype.removeEvents = function () {
            if (this.target) {
                this.target.removeEventListener('keyup', this.keyUpInsertPageSettingsClickHandler);
            }
        };
        PageSetupDialog.prototype.removeElements = function () {
            if (this.ejtabContainer) {
                this.ejtabContainer.remove();
                this.ejtabContainer = undefined;
            }
            if (this.marginTab) {
                this.marginTab.remove();
                this.marginTab = undefined;
            }
            if (this.paperTab) {
                this.paperTab.remove();
                this.paperTab = undefined;
            }
            if (this.layoutTab) {
                this.layoutTab.remove();
                this.layoutTab = undefined;
            }
            if (this.ejtab) {
                this.ejtab.remove();
                this.ejtab = undefined;
            }
            if (this.headerContainer) {
                this.headerContainer.remove();
                this.headerContainer = undefined;
            }
            if (this.marginHeader) {
                this.marginHeader.remove();
                this.marginHeader = undefined;
            }
            if (this.paperHeader) {
                this.paperHeader.remove();
                this.paperHeader = undefined;
            }
            if (this.layoutHeader) {
                this.layoutHeader.remove();
                this.layoutHeader = undefined;
            }
            if (this.marginContent) {
                this.marginContent.remove();
                this.marginContent = undefined;
            }
            if (this.paperContent) {
                this.paperContent.remove();
                this.paperContent = undefined;
            }
            if (this.layoutContent) {
                this.layoutContent.remove();
                this.layoutContent = undefined;
            }
            if (this.marginDiv) {
                this.marginDiv.remove();
                this.marginDiv = undefined;
            }
            if (this.leftMarginDiv) {
                this.leftMarginDiv.remove();
                this.leftMarginDiv = undefined;
            }
            if (this.rightMarginDiv) {
                this.rightMarginDiv.remove();
                this.rightMarginDiv = undefined;
            }
            if (this.topTextBox) {
                this.topTextBox.remove();
                this.topTextBox = undefined;
            }
            if (this.bottomTextBox) {
                this.bottomTextBox.remove();
                this.bottomTextBox = undefined;
            }
            if (this.topContainer) {
                this.topContainer.remove();
                this.topContainer = undefined;
            }
            if (this.bottomContainer) {
                this.bottomContainer.remove();
                this.bottomContainer = undefined;
            }
            if (this.leftTextBox) {
                this.leftTextBox.remove();
                this.leftTextBox = undefined;
            }
            if (this.rightTextBox) {
                this.rightTextBox.remove();
                this.rightTextBox = undefined;
            }
            if (this.leftContainer) {
                this.leftContainer.remove();
                this.leftContainer = undefined;
            }
            if (this.rightContainer) {
                this.rightContainer.remove();
                this.rightContainer = undefined;
            }
            if (this.orientationDiv) {
                this.orientationDiv.remove();
                this.orientationDiv = undefined;
            }
            if (this.orientationLabeldiv) {
                this.orientationLabeldiv.remove();
                this.orientationLabeldiv = undefined;
            }
            if (this.orientationPropDiv) {
                this.orientationPropDiv.remove();
                this.orientationPropDiv = undefined;
            }
            if (this.portraitDiv) {
                this.portraitDiv.remove();
                this.portraitDiv = undefined;
            }
            if (this.landscapeDiv) {
                this.landscapeDiv.remove();
                this.landscapeDiv = undefined;
            }
            Iif (this.portrait) {
                this.portrait.destroy();
                this.portrait = undefined;
            }
            Iif (this.landscape) {
                this.landscape.destroy();
                this.landscape = undefined;
            }
            if (this.sizeDiv) {
                this.sizeDiv.remove();
                this.sizeDiv = undefined;
            }
            if (this.leftSizeDiv) {
                this.leftSizeDiv.remove();
                this.leftSizeDiv = undefined;
            }
            if (this.rightSizeDiv) {
                this.rightSizeDiv.remove();
                this.rightSizeDiv = undefined;
            }
            if (this.widthTextBox) {
                this.widthTextBox.remove();
                this.widthTextBox = undefined;
            }
            if (this.heightTextBox) {
                this.heightTextBox.remove();
                this.heightTextBox = undefined;
            }
            Iif (this.sizeDiv) {
                this.sizeDiv.remove();
                this.sizeDiv = undefined;
            }
            if (this.paperSizeDiv) {
                this.paperSizeDiv.remove();
                this.paperSizeDiv = undefined;
            }
            if (this.layoutDiv) {
                this.layoutDiv.remove();
                this.layoutDiv = undefined;
            }
            if (this.firstPageDiv) {
                this.firstPageDiv.remove();
                this.firstPageDiv = undefined;
            }
            if (this.oddOrEvenDiv) {
                this.oddOrEvenDiv.remove();
                this.oddOrEvenDiv = undefined;
            }
            if (this.textLabelDiv) {
                this.textLabelDiv.remove();
                this.textLabelDiv = undefined;
            }
            if (this.propertyDiv) {
                this.propertyDiv.remove();
                this.propertyDiv = undefined;
            }
            if (this.leftLayoutDiv) {
                this.leftLayoutDiv.remove();
                this.leftLayoutDiv = undefined;
            }
            if (this.rightLayoutDiv) {
                this.rightLayoutDiv.remove();
                this.rightLayoutDiv = undefined;
            }
            if (this.dialogElement) {
                this.dialogElement.remove();
                this.dialogElement = undefined;
            }
        };
        return PageSetupDialog;
    }());
    exports.PageSetupDialog = PageSetupDialog;
});