all files / document-editor/implementation/dialogs/ tab-dialog.js

86.84% Statements 541/623
73.11% Branches 155/212
81.25% Functions 26/32
86.84% Lines 541/623
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 812 813 814 815 816 817 818 819 820 821 822 823   159× 159× 159× 159× 159× 159× 159× 159× 159× 159× 159×                               159×                     159×                       159×       159×                                 159×   159×         159×         159×             159×   14486×                                                                                                       10× 10×                                                                                                                                                                                       222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222× 222×   222× 222× 222× 222× 222×   222×   222×   222×   222×   222×     222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×   222×          
define(["require", "exports", "@syncfusion/ej2-lists", "@syncfusion/ej2-buttons", "@syncfusion/ej2-base", "@syncfusion/ej2-inputs", "../editor/editor-helper", "../format/paragraph-format"], function (require, exports, ej2_lists_1, ej2_buttons_1, ej2_base_1, ej2_inputs_1, editor_helper_1, paragraph_format_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var TabDialog = (function () {
        function TabDialog(documentHelper) {
            var _this = this;
            this.isBarClicked = false;
            this.removedItems = [];
            this.tabStopList = [];
            this.isAddUnits = true;
            this.textBoxInputChangeClickHandler = this.onTextBoxInputChangeClick.bind(this);
            this.selectHandlerClickHandler = this.onSelectHandlerClick.bind(this);
            this.setButtonClickHandler = this.onSetButtonClick.bind(this);
            this.clearButtonClickHandler = this.onClearButtonClick.bind(this);
            this.clearAllButtonClickHandler = this.onClearAllButtonClick.bind(this);
            this.applyParagraphFormat = function () {
                Iif (_this.defaultTabStopIn.value !== _this.documentHelper.defaultTabWidth) {
                    _this.documentHelper.defaultTabWidth = _this.defaultTabStopIn.value;
                }
                Iif (_this.removedItems.length > 0) {
                    var values_1 = [];
                    for (var i = 0; i < _this.removedItems.length; i++) {
                        values_1.push(_this.removedItems[parseInt(i.toString(), 10)].value);
                    }
                    _this.documentHelper.owner.editorModule.removeTabStops(_this.documentHelper.selection.getParagraphsInSelection(), values_1);
                }
                var tab = !ej2_base_1.isNullOrUndefined(_this.selectedTabStop) ? _this.selectedTabStop.value : new paragraph_format_1.WTabStop();
                tab.deletePosition = 0;
                tab.tabJustification = _this.getTabAlignmentValue();
                tab.tabLeader = _this.getTabLeaderValue();
                var values = [];
                for (var i = 0; i < _this.tabStopList.length; i++) {
                    values.push(_this.tabStopList[parseInt(i.toString(), 10)].value);
                }
                Eif (ej2_base_1.isNullOrUndefined(_this.selectedTabStop)) {
                    var value = editor_helper_1.HelperMethods.getNumberFromString(_this.textBoxInput.value);
                    Iif (value.toString() !== 'NaN') {
                        tab.position = value;
                        values.push(tab);
                    }
                }
                _this.documentHelper.owner.editorModule.onApplyParagraphFormat('tabStop', values, false, false);
                _this.closeTabDialog();
            };
            this.textBoxInputChange = function (args) {
                var value = editor_helper_1.HelperMethods.getNumberFromString(_this.textBoxInput.value);
                for (var i = 0; i < _this.tabStopList.length; i++) {
                    var tabValue = editor_helper_1.HelperMethods.getNumberFromString(_this.tabStopList[parseInt(i.toString(), 10)].displayText);
                    if (tabValue === value) {
                        _this.selectedTabStop = _this.tabStopList[parseInt(i.toString(), 10)];
                        break;
                    }
                    else {
                        _this.selectedTabStop = undefined;
                    }
                }
                _this.isAddUnits = false;
                var index = _this.listviewInstance.dataSource.indexOf(_this.selectedTabStop);
                var item = index >= 0 ? _this.listviewInstance.dataSource[parseInt(index.toString(), 10)] : undefined;
                _this.listviewInstance.selectItem(item);
                _this.isAddUnits = true;
            };
            this.setButtonClick = function (args) {
                Iif (!ej2_base_1.isNullOrUndefined(_this.selectedTabStop)) {
                    var value = _this.selectedTabStop.value;
                    value.tabJustification = _this.getTabAlignmentValue();
                    value.tabLeader = _this.getTabLeaderValue();
                }
                else {
                    var value = parseFloat(editor_helper_1.HelperMethods.getNumberFromString(_this.textBoxInput.value).toFixed(2));
                    Iif (value.toString() === 'NaN') {
                        return;
                    }
                    var tabStop = new paragraph_format_1.WTabStop();
                    tabStop.position = value;
                    tabStop.tabJustification = _this.getTabAlignmentValue();
                    tabStop.tabLeader = _this.getTabLeaderValue();
                    tabStop.deletePosition = 0;
                    var tempCollection = [];
                    for (var i = 0; i < _this.tabStopList.length; i++) {
                        tempCollection.push(_this.tabStopList[parseInt(i.toString(), 10)].value);
                    }
                    var index = _this.documentHelper.owner.editorModule.addTabStopToCollection(tempCollection, tabStop, true);
                    var tabStopListObj = { 'displayText': parseFloat(value.toFixed(2)) + ' pt', 'value': tabStop };
                    _this.tabStopList.splice(index, 0, tabStopListObj);
                    _this.selectedTabStop = tabStopListObj;
                    _this.listviewInstance.dataSource = _this.tabStopList;
                    _this.listviewInstance.refresh();
                    _this.listviewInstance.selectItem(_this.selectedTabStop);
                }
            };
            this.clearAllButtonClick = function (args) {
                for (var i = 0; i < _this.tabStopList.length; i++) {
                    _this.removedItems.push(_this.tabStopList[parseInt(i.toString(), 10)]);
                }
                _this.displayDiv.innerText = _this.localeValue.getConstant('All');
                _this.tabStopList = [];
                _this.listviewInstance.dataSource = [];
                _this.listviewInstance.refresh();
                _this.selectedTabStop = undefined;
                _this.textBoxInput.value = '';
                _this.updateButtons();
            };
            this.clearButtonClick = function (args) {
                _this.removedItems.push(_this.selectedTabStop);
                Eif (_this.displayDiv.innerText !== _this.localeValue.getConstant('All')) {
                    Iif (_this.displayDiv.innerText !== '') {
                        _this.displayDiv.innerText += ', ';
                    }
                    _this.displayDiv.innerText += _this.selectedTabStop.displayText;
                }
                var index = _this.tabStopList.indexOf(_this.selectedTabStop);
                Eif (index === _this.tabStopList.length - 1) {
                    _this.tabStopList.splice(index, 1);
                    _this.selectedTabStop = _this.tabStopList[index - 1];
                }
                else if (_this.tabStopList.length === 0) {
                    _this.selectedTabStop = undefined;
                }
                else {
                    _this.tabStopList.splice(index, 1);
                    _this.selectedTabStop = _this.tabStopList[parseInt(index.toString(), 10)];
                }
                _this.listviewInstance.refresh();
                Iif (!ej2_base_1.isNullOrUndefined(_this.selectedTabStop)) {
                    _this.textBoxInput.value = !ej2_base_1.isNullOrUndefined(_this.selectedTabStop) && _this.tabStopList.length > 0 ? _this.selectedTabStop.displayText : '';
                }
                else {
                    _this.textBoxInput.value = '';
                }
                _this.updateButtons();
            };
            this.closeTabDialog = function () {
                _this.documentHelper.hideDialog();
            };
            this.selectHandler = function (args) {
                Eif (_this.isAddUnits) {
                    _this.focusTextBox(args.text);
                }
                _this.selectedTabStop = args.data;
                Iif (!ej2_base_1.isNullOrUndefined(_this.selectedTabStop) && _this.selectedTabStop.value.tabJustification === 'Bar') {
                    _this.isBarClicked = true;
                }
                _this.updateButtons();
            };
            this.onBarClick = function (args) {
                _this.clearTabLeaderButton();
                _this.disableOrEnableTabLeaderButton(true);
                _this.isBarClicked = true;
            };
            this.onTabAlignmentButtonClick = function (args) {
                _this.disableOrEnableTabLeaderButton(false);
                if (_this.isBarClicked) {
                    _this.updateTabLeaderButton('None');
                    _this.isBarClicked = false;
                }
            };
            this.documentHelper = documentHelper;
        }
        TabDialog.prototype.getModuleName = function () {
            return 'TabDialog';
        };
        TabDialog.prototype.onTextBoxInputChangeClick = function (args) {
            this.textBoxInputChange(args);
        };
        TabDialog.prototype.onSetButtonClick = function (args) {
            this.setButtonClick(args);
        };
        TabDialog.prototype.onClearAllButtonClick = function (args) {
            this.clearAllButtonClick(args);
        };
        TabDialog.prototype.onClearButtonClick = function (args) {
            this.clearButtonClick(args);
        };
        TabDialog.prototype.initTabsDialog = function (localeValue, enableRtl) {
            var ownerId = this.documentHelper.owner.containerId;
            this.target = ej2_base_1.createElement('div', { id: ownerId + '_tab', className: 'e-de-tab' });
            this.commonDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.target.appendChild(this.commonDiv);
            this.tabStopLabelDiv = ej2_base_1.createElement('div', { innerHTML: localeValue.getConstant('Tab stop position') + ':', className: 'e-de-para-dlg-heading' });
            this.tabStopDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.tabStopDiv.appendChild(this.tabStopLabelDiv);
            this.tabListDiv = ej2_base_1.createElement('div', { className: 'e-tab-list' });
            this.tabStopDiv.appendChild(this.tabListDiv);
            Iif (enableRtl) {
                this.tabListDiv.classList.add('e-de-rtl');
            }
            this.textBoxDiv = ej2_base_1.createElement('div', { className: 'e-bookmark-textboxdiv' });
            this.tabListDiv.appendChild(this.textBoxDiv);
            this.textBoxInput = ej2_base_1.createElement('input', { className: 'e-input e-tab-textbox-input', attrs: { autofocus: 'true' } });
            this.textBoxInput.setAttribute('type', 'text');
            this.textBoxInput.setAttribute('aria-label', localeValue.getConstant('Tab stop position'));
            this.textBoxDiv.appendChild(this.textBoxInput);
            this.textBoxDiv.addEventListener('keyup', this.textBoxInputChangeClickHandler);
            this.textBoxInput.value = !ej2_base_1.isNullOrUndefined(this.tabStopList) && this.tabStopList.length > 0 ? this.tabStopList[0].displayText : '';
            this.listviewDiv = ej2_base_1.createElement('div', { className: 'e-tab-listViewDiv', attrs: { tabindex: '-1' } });
            this.listviewDiv.setAttribute('aria-label', localeValue.getConstant('TabMarkList'));
            this.tabListDiv.appendChild(this.listviewDiv);
            this.listviewInstance = new ej2_lists_1.ListView({
                dataSource: this.tabStopList,
                fields: { text: 'displayText' },
                cssClass: 'e-bookmark-listview'
            });
            this.listviewInstance.appendTo(this.listviewDiv);
            this.listviewInstance.addEventListener('select', this.selectHandlerClickHandler);
            this.commonDiv.appendChild(this.tabStopDiv);
            this.defaultTablabelDiv = ej2_base_1.createElement('div', { innerHTML: localeValue.getConstant('Default tab stops') + ':', className: 'e-de-para-dlg-heading' });
            this.defaultTabDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.commonDiv.appendChild(this.defaultTabDiv);
            this.defaultTabStopDiv = ej2_base_1.createElement('div', { className: 'e-de-dlg-container' });
            this.defaultTabStop = ej2_base_1.createElement('input', { attrs: { 'type': 'text' } });
            this.defaultTabStopDiv.appendChild(this.defaultTablabelDiv);
            this.defaultTabStopDiv.appendChild(this.defaultTabStop);
            this.defaultTabDiv.appendChild(this.defaultTabStopDiv);
            this.defaultTabStopIn = new ej2_inputs_1.NumericTextBox({
                format: '# pt', value: this.documentHelper.defaultTabWidth, min: 0, max: 1584, step: 1, enablePersistence: false, placeholder: localeValue.getConstant('Default tab stops'),
            });
            this.defaultTabStopIn.appendTo(this.defaultTabStop);
            this.defaultTabWarningDiv = ej2_base_1.createElement('div', { innerHTML: localeValue.getConstant('Tab stops to be cleared') + ':', className: 'e-de-dlg-container' });
            this.defaultTabDiv.appendChild(this.defaultTabWarningDiv);
            this.displayDiv = ej2_base_1.createElement('div', { className: 'e-defaultTablabelDiv' });
            Iif (this.documentHelper.owner.enableRtl) {
                this.displayDiv.style.marginRight = '20px';
            }
            else {
                this.displayDiv.style.marginLeft = '20px';
            }
            this.defaultTabDiv.appendChild(this.displayDiv);
            this.alignmentDiv = ej2_base_1.createElement('div', { className: 'e-de-dlg-container' });
            this.target.appendChild(this.alignmentDiv);
            this.alignmentLabelDiv = ej2_base_1.createElement('div', { innerHTML: localeValue.getConstant('Alignment') + ':', className: 'e-de-para-dlg-heading' });
            this.alignmentDiv.appendChild(this.alignmentLabelDiv);
            this.alignmentPropertyDiv = ej2_base_1.createElement('div', { styles: 'display: flex;' });
            this.alignmentDiv.appendChild(this.alignmentPropertyDiv);
            this.alignmentPropertyDiv1 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column; width: 33.33%' });
            this.leftDiv = ej2_base_1.createElement('div');
            this.leftRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.decimalDiv = ej2_base_1.createElement('div');
            this.decimalRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.leftDiv.appendChild(this.leftRadioBtn);
            this.decimalDiv.appendChild(this.decimalRadioBtn);
            this.alignmentPropertyDiv1.appendChild(this.leftDiv);
            this.alignmentPropertyDiv1.appendChild(this.decimalDiv);
            this.alignmentPropertyDiv.appendChild(this.alignmentPropertyDiv1);
            this.left = new ej2_buttons_1.RadioButton({ label: localeValue.getConstant('Left'), name: 'alignment', value: 'left', cssClass: 'e-small', checked: true, enableRtl: enableRtl, change: this.onTabAlignmentButtonClick });
            this.decimal = new ej2_buttons_1.RadioButton({ label: localeValue.getConstant('Decimal'), name: 'alignment', value: 'decimal', cssClass: 'e-small', enableRtl: enableRtl, change: this.onTabAlignmentButtonClick });
            this.left.appendTo(this.leftRadioBtn);
            this.decimal.appendTo(this.decimalRadioBtn);
            this.leftRadioBtn.setAttribute('aria-label', localeValue.getConstant('Left'));
            this.decimalRadioBtn.setAttribute('aria-label', localeValue.getConstant('Decimal'));
            this.alignmentPropertyDiv2 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column; width: 33.33%' });
            this.centerDiv = ej2_base_1.createElement('div');
            this.centerRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.barDiv = ej2_base_1.createElement('div');
            this.barRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.barDiv.appendChild(this.barRadioBtn);
            this.centerDiv.appendChild(this.centerRadioBtn);
            this.alignmentPropertyDiv2.appendChild(this.centerDiv);
            this.alignmentPropertyDiv2.appendChild(this.barDiv);
            this.bar = new ej2_buttons_1.RadioButton({ label: localeValue.getConstant('Bar'), name: 'alignment', value: 'bar', cssClass: 'e-small', enableRtl: enableRtl, change: this.onBarClick });
            this.center = new ej2_buttons_1.RadioButton({ label: localeValue.getConstant('Center'), name: 'alignment', value: 'center', cssClass: 'e-small', enableRtl: enableRtl, change: this.onTabAlignmentButtonClick });
            this.bar.appendTo(this.barRadioBtn);
            this.center.appendTo(this.centerRadioBtn);
            this.barRadioBtn.setAttribute('aria-label', localeValue.getConstant('Bar'));
            this.centerRadioBtn.setAttribute('aria-label', localeValue.getConstant('Center'));
            this.alignmentPropertyDiv.appendChild(this.alignmentPropertyDiv2);
            this.alignmentPropertyDiv3 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column;width: 33.33%' });
            this.rightDiv = ej2_base_1.createElement('div');
            this.rightRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.rightDiv.appendChild(this.rightRadioBtn);
            this.alignmentPropertyDiv3.appendChild(this.rightDiv);
            this.right = new ej2_buttons_1.RadioButton({ label: localeValue.getConstant('Right'), name: 'alignment', value: 'right', cssClass: 'e-small', enableRtl: enableRtl, change: this.onTabAlignmentButtonClick });
            this.right.appendTo(this.rightRadioBtn);
            this.rightRadioBtn.setAttribute('aria-label', localeValue.getConstant('Right'));
            this.alignmentPropertyDiv.appendChild(this.alignmentPropertyDiv3);
            this.tabLeaderDiv = ej2_base_1.createElement('div', { className: 'e-de-dlg-container' });
            this.tabLeaderLabelDiv = ej2_base_1.createElement('div', { innerHTML: localeValue.getConstant('Leader') + ':', className: 'e-de-para-dlg-heading' });
            this.tabLeaderDiv.appendChild(this.tabLeaderLabelDiv);
            this.target.appendChild(this.tabLeaderDiv);
            this.tabLeaderPropertyDiv = ej2_base_1.createElement('div', { styles: 'display: flex;' });
            this.tabLeaderDiv.appendChild(this.tabLeaderPropertyDiv);
            this.tabLeaderPropertyDiv1 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column; width: 33.33%' });
            this.noneDiv = ej2_base_1.createElement('div');
            this.noneRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.underscoreDiv = ej2_base_1.createElement('div');
            this.underscoreRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.noneDiv.appendChild(this.noneRadioBtn);
            this.underscoreDiv.appendChild(this.underscoreRadioBtn);
            this.tabLeaderPropertyDiv1.appendChild(this.noneDiv);
            this.tabLeaderPropertyDiv1.appendChild(this.underscoreDiv);
            this.none = new ej2_buttons_1.RadioButton({ label: '1 ' + localeValue.getConstant('None'), name: 'tabLeader', value: 'none', cssClass: 'e-small', checked: true, enableRtl: enableRtl });
            this.underscore = new ej2_buttons_1.RadioButton({ label: '4 _____', name: 'tabLeader', value: 'underscore', cssClass: 'e-small', enableRtl: enableRtl });
            this.none.appendTo(this.noneRadioBtn);
            this.underscore.appendTo(this.underscoreRadioBtn);
            this.tabLeaderPropertyDiv.appendChild(this.tabLeaderPropertyDiv1);
            this.tabLeaderPropertyDiv2 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column; width: 33.33%' });
            this.dottedDiv = ej2_base_1.createElement('div');
            this.dottedRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.singleDiv = ej2_base_1.createElement('div');
            this.singleRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.dottedDiv.appendChild(this.dottedRadioBtn);
            this.singleDiv.appendChild(this.singleRadioBtn);
            this.dotted = new ej2_buttons_1.RadioButton({ label: '2 .......', name: 'tabLeader', value: 'dotted', cssClass: 'e-small', enableRtl: enableRtl });
            this.single = new ej2_buttons_1.RadioButton({ label: '5 -------', name: 'tabLeader', value: 'single', cssClass: 'e-small', enableRtl: enableRtl });
            this.dotted.appendTo(this.dottedRadioBtn);
            this.single.appendTo(this.singleRadioBtn);
            this.tabLeaderPropertyDiv2.appendChild(this.dottedDiv);
            this.tabLeaderPropertyDiv2.appendChild(this.singleDiv);
            this.tabLeaderPropertyDiv.appendChild(this.tabLeaderPropertyDiv2);
            this.tabLeaderPropertyDiv3 = ej2_base_1.createElement('div', { styles: 'display: flex; flex-direction: column; width: 33.33%' });
            this.HyphenDiv = ej2_base_1.createElement('div');
            this.HyphenRadioBtn = ej2_base_1.createElement('input', {
                attrs: { 'type': 'radiobutton' }
            });
            this.HyphenDiv.appendChild(this.HyphenRadioBtn);
            this.tabLeaderPropertyDiv3.appendChild(this.HyphenDiv);
            this.Hyphen = new ej2_buttons_1.RadioButton({ label: '3 -------', name: 'tabLeader', value: 'hyphen', cssClass: 'e-small', enableRtl: enableRtl });
            this.Hyphen.appendTo(this.HyphenRadioBtn);
            this.tabLeaderPropertyDiv.appendChild(this.tabLeaderPropertyDiv3);
            this.buttonDiv = ej2_base_1.createElement('div', { className: 'e-de-tab-button', styles: 'display: flex;' });
            this.target.appendChild(this.buttonDiv);
            this.tableElement = ej2_base_1.createElement('table');
            this.buttonDiv.appendChild(this.tableElement);
            this.tableElement.style.width = '100%';
            var row = this.tableElement.insertRow();
            var cell = row.insertCell();
            this.setbuttonDiv = ej2_base_1.createElement('div', { className: 'e-de-tab-setBtn' });
            this.buttonDiv.appendChild(this.setbuttonDiv);
            this.setButtonElement = ej2_base_1.createElement('button', {
                innerHTML: localeValue.getConstant('Set'),
                attrs: { type: 'button' }
            });
            this.setButtonElement.setAttribute('aria-label', localeValue.getConstant('Set'));
            this.setbuttonDiv.appendChild(this.setButtonElement);
            this.setButton = new ej2_buttons_1.Button({ cssClass: 'e-button-custom' });
            this.setButton.appendTo(this.setButtonElement);
            cell.appendChild(this.setbuttonDiv);
            this.setButtonElement.addEventListener('click', this.setButtonClickHandler);
            cell.style.width = '33.33%';
            cell.style.display = 'table-cell';
            cell = row.insertCell();
            this.clearbuttonDiv = ej2_base_1.createElement('div', { className: 'e-de-tab-clearBtn' });
            this.buttonDiv.appendChild(this.clearbuttonDiv);
            this.clearButtonElement = ej2_base_1.createElement('button', {
                innerHTML: localeValue.getConstant('Clear'),
                attrs: { type: 'button' }
            });
            this.clearButtonElement.setAttribute('aria-label', localeValue.getConstant('Clear'));
            this.clearbuttonDiv.appendChild(this.clearButtonElement);
            this.clearButton = new ej2_buttons_1.Button({ cssClass: 'e-button-custom' });
            this.clearButton.appendTo(this.clearButtonElement);
            this.clearButtonElement.addEventListener('click', this.clearButtonClickHandler);
            cell.appendChild(this.clearbuttonDiv);
            cell.style.width = '33.33%';
            cell.style.display = 'table-cell';
            cell = row.insertCell();
            this.clearAllbuttonDiv = ej2_base_1.createElement('div', { className: 'e-de-tab-clearAllBtn' });
            this.buttonDiv.appendChild(this.clearAllbuttonDiv);
            this.clearAllButtonElement = ej2_base_1.createElement('button', {
                innerHTML: localeValue.getConstant('Clear All'),
                attrs: { type: 'button' }
            });
            this.clearAllButtonElement.setAttribute('aria-label', localeValue.getConstant('Clear All'));
            this.clearAllbuttonDiv.appendChild(this.clearAllButtonElement);
            this.clearAllButton = new ej2_buttons_1.Button({ cssClass: 'e-button-custom' });
            this.clearAllButton.appendTo(this.clearAllButtonElement);
            this.clearAllButtonElement.addEventListener('click', this.clearAllButtonClickHandler);
            cell.appendChild(this.clearAllbuttonDiv);
            cell.style.width = '33.33%';
            cell.style.display = 'table-cell';
            this.selectedTabStop = !ej2_base_1.isNullOrUndefined(this.tabStopList) && this.tabStopList.length > 0 ? this.tabStopList[0] : undefined;
            this.updateButtons();
        };
        TabDialog.prototype.getTabAlignmentValue = function () {
            Eif (this.left.checked) {
                return 'Left';
            }
            else if (this.center.checked) {
                return 'Center';
            }
            else if (this.right.checked) {
                return 'Right';
            }
            else if (this.decimal.checked) {
                return 'Decimal';
            }
            else if (this.bar.checked) {
                return 'Bar';
            }
            return 'Left';
        };
        TabDialog.prototype.getTabLeaderValue = function () {
            Eif (this.none.checked) {
                return 'None';
            }
            else if (this.dotted.checked) {
                return 'Dot';
            }
            else if (this.Hyphen.checked) {
                return 'Hyphen';
            }
            else if (this.underscore.checked) {
                return 'Underscore';
            }
            else if (this.single.checked) {
                return 'Single';
            }
            return 'None';
        };
        TabDialog.prototype.onSelectHandlerClick = function (args) {
            this.selectHandler(args);
        };
        TabDialog.prototype.updateButtons = function () {
            if (!ej2_base_1.isNullOrUndefined(this.selectedTabStop)) {
                this.updateTabAlignmentButton(this.selectedTabStop.value.tabJustification);
                this.updateTabLeaderButton(this.selectedTabStop.value.tabLeader);
            }
            else {
                this.updateTabAlignmentButton('Left');
                this.updateTabLeaderButton('None');
            }
        };
        TabDialog.prototype.updateTabLeaderButton = function (value) {
            this.clearTabLeaderButton();
            Iif (this.getTabAlignmentValue() === 'Bar') {
                return;
            }
            switch (value) {
                case 'None':
                    this.none.checked = true;
                    break;
                case 'Single':
                    this.single.checked = true;
                    break;
                case 'Dot':
                    this.dotted.checked = true;
                    break;
                case 'Hyphen':
                    this.Hyphen.checked = true;
                    break;
                case 'Underscore':
                    this.underscore.checked = true;
                    break;
                default:
                    this.none.checked = true;
                    break;
            }
        };
        TabDialog.prototype.updateTabAlignmentButton = function (value) {
            this.clearTabAlignmentButton();
            switch (value) {
                case 'Left':
                    this.left.checked = true;
                    break;
                case 'Center':
                    this.center.checked = true;
                    break;
                case 'Right':
                    this.right.checked = true;
                    break;
                case 'Decimal':
                    this.decimal.checked = true;
                    break;
                case 'Bar':
                    this.bar.checked = true;
                    this.clearTabLeaderButton();
                    this.disableOrEnableTabLeaderButton(true);
                    return;
                default:
                    break;
            }
            this.disableOrEnableTabLeaderButton(false);
        };
        TabDialog.prototype.clearTabLeaderButton = function () {
            this.none.checked = false;
            this.single.checked = false;
            this.dotted.checked = false;
            this.Hyphen.checked = false;
            this.underscore.checked = false;
        };
        TabDialog.prototype.disableOrEnableTabLeaderButton = function (isDisable) {
            this.none.disabled = isDisable;
            this.single.disabled = isDisable;
            this.dotted.disabled = isDisable;
            this.Hyphen.disabled = isDisable;
            this.underscore.disabled = isDisable;
        };
        TabDialog.prototype.clearTabAlignmentButton = function () {
            this.left.checked = false;
            this.center.checked = false;
            this.right.checked = false;
            this.decimal.checked = false;
            this.bar.checked = false;
        };
        TabDialog.prototype.focusTextBox = function (text) {
            this.textBoxInput.value = text;
            var value = this.textBoxInput;
            value.setSelectionRange(0, text.length);
            value.focus();
        };
        TabDialog.prototype.show = function () {
            var localObj = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            localObj.setLocale(this.documentHelper.owner.locale);
            this.localeValue = localObj;
            var tabs = this.documentHelper.owner.editorModule.getTabsInSelection();
            this.tabStopList = [];
            for (var i = 0; i < tabs.length; i++) {
                var value = parseFloat((tabs[i].position).toFixed(2)) + ' pt';
                var objectValue = { 'displayText': value, 'value': tabs[i].clone() };
                this.tabStopList.push(objectValue);
            }
            this.initTabsDialog(localObj, this.documentHelper.owner.enableRtl);
            this.documentHelper.dialog.header = localObj.getConstant('Tabs');
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = this.documentHelper.updateFocus;
            this.documentHelper.dialog.close = this.documentHelper.updateFocus;
            this.documentHelper.dialog.buttons = [{
                    click: this.applyParagraphFormat,
                    buttonModel: { content: localObj.getConstant('Ok'), cssClass: 'e-flat e-para-okay', isPrimary: true }
                },
                {
                    click: this.closeTabDialog,
                    buttonModel: { content: localObj.getConstant('Cancel'), cssClass: 'e-flat e-para-cancel' }
                }
            ];
            this.documentHelper.dialog.show();
        };
        TabDialog.prototype.destroy = function () {
            this.removeEvents();
            this.removeElements();
            this.target = undefined;
            this.textBoxInput = undefined;
            this.defaultTabStopIn = undefined;
            this.left = undefined;
            this.right = undefined;
            this.center = undefined;
            this.decimal = undefined;
            this.bar = undefined;
            this.none = undefined;
            this.dotted = undefined;
            this.single = undefined;
            this.Hyphen = undefined;
            this.setButton = undefined;
            this.clearButton = undefined;
            this.clearAllButton = undefined;
            if (this.listviewInstance) {
                this.listviewInstance.destroy();
                this.listviewInstance = undefined;
            }
            this.selectedTabStop = undefined;
            this.isBarClicked = undefined;
            this.removedItems = undefined;
            this.tabStopList = undefined;
            this.localeValue = undefined;
        };
        TabDialog.prototype.removeEvents = function () {
            if (this.textBoxDiv) {
                this.textBoxDiv.removeEventListener('keyup', this.textBoxInputChangeClickHandler);
            }
            if (this.setButtonElement) {
                this.setButtonElement.removeEventListener('click', this.setButtonClickHandler);
            }
            if (this.clearButtonElement) {
                this.clearButtonElement.removeEventListener('click', this.clearButtonClickHandler);
            }
            if (this.clearAllButtonElement) {
                this.clearAllButtonElement.removeEventListener('click', this.clearAllButtonClickHandler);
            }
            if (this.listviewInstance) {
                this.listviewInstance.removeEventListener('select', this.selectHandlerClickHandler);
            }
        };
        TabDialog.prototype.removeElements = function () {
            if (this.commonDiv) {
                this.commonDiv.remove();
                this.commonDiv = undefined;
            }
            if (this.tabStopLabelDiv) {
                this.tabStopLabelDiv.remove();
                this.tabStopLabelDiv = undefined;
            }
            if (this.tabStopDiv) {
                this.tabStopDiv.remove();
                this.tabStopDiv = undefined;
            }
            if (this.tabListDiv) {
                this.tabListDiv.remove();
                this.tabListDiv = undefined;
            }
            if (this.textBoxDiv) {
                this.textBoxDiv.remove();
                this.textBoxDiv = undefined;
            }
            if (this.listviewDiv) {
                this.listviewDiv.remove();
                this.listviewDiv = undefined;
            }
            if (this.defaultTablabelDiv) {
                this.defaultTablabelDiv.remove();
                this.defaultTablabelDiv = undefined;
            }
            if (this.defaultTabDiv) {
                this.defaultTabDiv.remove();
                this.defaultTabDiv = undefined;
            }
            if (this.defaultTabStopDiv) {
                this.defaultTabStopDiv.remove();
                this.defaultTabStopDiv = undefined;
            }
            if (this.defaultTabWarningDiv) {
                this.defaultTabWarningDiv.remove();
                this.defaultTabWarningDiv = undefined;
            }
            if (this.defaultTabStop) {
                this.defaultTabStop.remove();
                this.defaultTabStop = undefined;
            }
            if (this.displayDiv) {
                this.displayDiv.remove();
                this.displayDiv = undefined;
            }
            if (this.alignmentDiv) {
                this.alignmentDiv.remove();
                this.alignmentDiv = undefined;
            }
            if (this.alignmentLabelDiv) {
                this.alignmentLabelDiv.remove();
                this.alignmentLabelDiv = undefined;
            }
            if (this.alignmentPropertyDiv) {
                this.alignmentPropertyDiv.remove();
                this.alignmentPropertyDiv = undefined;
            }
            if (this.alignmentPropertyDiv1) {
                this.alignmentPropertyDiv1.remove();
                this.alignmentPropertyDiv1 = undefined;
            }
            if (this.leftDiv) {
                this.leftDiv.remove();
                this.leftDiv = undefined;
            }
            if (this.leftRadioBtn) {
                this.leftRadioBtn.remove();
                this.leftRadioBtn = undefined;
            }
            if (this.decimalDiv) {
                this.decimalDiv.remove();
                this.decimalDiv = undefined;
            }
            if (this.decimalRadioBtn) {
                this.decimalRadioBtn.remove();
                this.decimalRadioBtn = undefined;
            }
            if (this.alignmentPropertyDiv2) {
                this.alignmentPropertyDiv2.remove();
                this.alignmentPropertyDiv2 = undefined;
            }
            if (this.centerDiv) {
                this.centerDiv.remove();
                this.centerDiv = undefined;
            }
            if (this.centerRadioBtn) {
                this.centerRadioBtn.remove();
                this.centerRadioBtn = undefined;
            }
            if (this.barDiv) {
                this.barDiv.remove();
                this.barDiv = undefined;
            }
            if (this.barRadioBtn) {
                this.barRadioBtn.remove();
                this.barRadioBtn = undefined;
            }
            if (this.alignmentPropertyDiv3) {
                this.alignmentPropertyDiv3.remove();
                this.alignmentPropertyDiv3 = undefined;
            }
            if (this.rightDiv) {
                this.rightDiv.remove();
                this.rightDiv = undefined;
            }
            if (this.rightRadioBtn) {
                this.rightRadioBtn.remove();
                this.rightRadioBtn = undefined;
            }
            if (this.tabLeaderDiv) {
                this.tabLeaderDiv.remove();
                this.tabLeaderDiv = undefined;
            }
            if (this.tabLeaderLabelDiv) {
                this.tabLeaderLabelDiv.remove();
                this.tabLeaderLabelDiv = undefined;
            }
            if (this.tabLeaderPropertyDiv) {
                this.tabLeaderPropertyDiv.remove();
                this.tabLeaderPropertyDiv = undefined;
            }
            if (this.tabLeaderPropertyDiv1) {
                this.tabLeaderPropertyDiv1.remove();
                this.tabLeaderPropertyDiv1 = undefined;
            }
            if (this.noneDiv) {
                this.noneDiv.remove();
                this.noneDiv = undefined;
            }
            if (this.noneRadioBtn) {
                this.noneRadioBtn.remove();
                this.noneRadioBtn = undefined;
            }
            if (this.underscoreDiv) {
                this.underscoreDiv.remove();
                this.underscoreDiv = undefined;
            }
            if (this.underscoreRadioBtn) {
                this.underscoreRadioBtn.remove();
                this.underscoreRadioBtn = undefined;
            }
            if (this.tabLeaderPropertyDiv2) {
                this.tabLeaderPropertyDiv2.remove();
                this.tabLeaderPropertyDiv2 = undefined;
            }
            if (this.dottedDiv) {
                this.dottedDiv.remove();
                this.dottedDiv = undefined;
            }
            if (this.dottedRadioBtn) {
                this.dottedRadioBtn.remove();
                this.dottedRadioBtn = undefined;
            }
            if (this.singleDiv) {
                this.singleDiv.remove();
                this.singleDiv = undefined;
            }
            if (this.singleRadioBtn) {
                this.singleRadioBtn.remove();
                this.singleRadioBtn = undefined;
            }
            if (this.tabLeaderPropertyDiv3) {
                this.tabLeaderPropertyDiv3.remove();
                this.tabLeaderPropertyDiv3 = undefined;
            }
            if (this.HyphenDiv) {
                this.HyphenDiv.remove();
                this.HyphenDiv = undefined;
            }
            if (this.HyphenRadioBtn) {
                this.HyphenRadioBtn.remove();
                this.HyphenRadioBtn = undefined;
            }
            if (this.buttonDiv) {
                this.buttonDiv.remove();
                this.buttonDiv = undefined;
            }
            if (this.tableElement) {
                this.tableElement.remove();
                this.tableElement = undefined;
            }
            if (this.setbuttonDiv) {
                this.setbuttonDiv.remove();
                this.setbuttonDiv = undefined;
            }
            if (this.setButtonElement) {
                this.setButtonElement.remove();
                this.setButtonElement = undefined;
            }
            if (this.setButton) {
                this.setButton.destroy();
                this.setButton = undefined;
            }
            if (this.clearbuttonDiv) {
                this.clearbuttonDiv.remove();
                this.clearbuttonDiv = undefined;
            }
            if (this.clearButtonElement) {
                this.clearButtonElement.remove();
                this.clearButtonElement = undefined;
            }
            if (this.clearButton) {
                this.clearButton.destroy();
                this.clearButton = undefined;
            }
            if (this.clearAllbuttonDiv) {
                this.clearAllbuttonDiv.remove();
                this.clearAllbuttonDiv = undefined;
            }
            if (this.clearAllButtonElement) {
                this.clearAllButtonElement.remove();
                this.clearAllButtonElement = undefined;
            }
            if (this.clearAllButton) {
                this.clearAllButton.destroy();
                this.clearAllButton = undefined;
            }
            if (this.textBoxInput) {
                this.textBoxInput.remove();
                this.textBoxInput = undefined;
            }
        };
        return TabDialog;
    }());
    exports.TabDialog = TabDialog;
});