all files / document-editor-container/properties-pane/ paragraph-properties.js

73.84% Statements 412/558
39.74% Branches 62/156
32.47% Functions 25/77
73.84% Lines 412/558
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   66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66×     1098×         66× 66× 66×   66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66×   66× 66× 66×   66× 66× 66× 66× 66× 66× 66× 66× 66× 66×   66× 66× 66× 66× 66× 66× 66× 66×   66× 66× 66× 66× 66× 66×   66× 66× 66× 66× 66× 66× 66×   66× 66× 66× 66×         528× 528× 264×     264×   528× 528×   528× 528× 528×     528× 528× 528× 528× 330×   528×   66× 66×   66× 66×   66× 66×   66× 66×   66× 66×   66× 66×   66× 66×   66×   528×   66× 66×                   66× 66× 66×   66× 66× 66×         66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66×             66× 66×     66× 66× 66×                                                                                                                                                                 66× 66× 66×       66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66× 66×                                         66× 66×     66× 66× 66×   330×   66×   462×   66× 66×                     66× 66× 66× 66× 13×       65× 846×     66× 66×   66×     66× 66×       66×       78× 78×                   66× 66× 66×     66×     66×     66×     66×             66×     66×     66×       65× 65× 65× 65× 65× 65× 65× 65×   157×     155× 155×                                   156×   66× 66× 29× 29×                                                                                                                                                                                                             156× 156× 156× 156× 156×   156× 156× 156×         156× 156× 156× 156× 156× 147× 147× 147× 147× 147×                               156×   156× 156×   65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65× 65×   65× 65× 65× 65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65× 65× 65×   65×              
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-buttons", "@syncfusion/ej2-splitbuttons", "@syncfusion/ej2-data", "../helper/bullet-list-helper", "../helper/line-spacing-helper", "../helper/styles-helper"], function (require, exports, ej2_base_1, ej2_dropdowns_1, ej2_buttons_1, ej2_splitbuttons_1, ej2_data_1, bullet_list_helper_1, line_spacing_helper_1, styles_helper_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Paragraph = (function () {
        function Paragraph(container) {
            this.numberedAndBulletNoneClickHandler = this.numberedNoneClick.bind(this);
            this.numberedNumberDotClickHandler = this.numberedNumberDotClick.bind(this);
            this.numberedLowLetterClickHandler = this.numberedLowLetterClick.bind(this);
            this.numberedUpLetterClickHandler = this.numberedUpLetterClick.bind(this);
            this.numberedLowRomanClickHandler = this.numberedLowRomanClick.bind(this);
            this.numberedUpRomanClickHandler = this.numberedUpRomanClick.bind(this);
            this.numberSplitButtonBeforeOpenHandler = this.numberSplitButtonBeforeOpen.bind(this);
            this.bulletDotClickHandler = this.bulletDotClick.bind(this);
            this.bulletCircleClickHandler = this.bulletCircleClick.bind(this);
            this.bulletSquareClickHandler = this.bulletSquareClick.bind(this);
            this.bulletFlowerClickHandler = this.bulletFlowerClick.bind(this);
            this.bulletArrowClickHandler = this.bulletArrowClick.bind(this);
            this.bulletTickClickHandler = this.bulletTickClick.bind(this);
            this.onrightAlignmentClickHandler = this.onrightAlignmentClick.bind(this);
            this.isRetrieving = false;
            this.appliedBulletStyle = 'dot';
            this.appliedNumberingStyle = 'arabic';
            this.appliedLineSpacing = '';
            this.splitButtonClass = 'e-de-prop-splitbutton';
            this.container = container;
        }
        Object.defineProperty(Paragraph.prototype, "documentEditor", {
            get: function () {
                return this.container.documentEditor;
            },
            enumerable: true,
            configurable: true
        });
        Paragraph.prototype.initializeParagraphPropertiesDiv = function (wholeDiv, isRtl) {
            this.localObj = new ej2_base_1.L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
            this.isRtl = isRtl;
            if (this.isRtl) {
                this.splitButtonClass = 'e-rtl ' + this.splitButtonClass;
            }
            this.textProperties = wholeDiv;
            var element = this.documentEditor.element.id + '_font_properties';
            this.paragraphDiv = this.createDivElement(element + '_paragraph', wholeDiv, '');
            ej2_base_1.classList(this.paragraphDiv, ['e-de-cntr-pane-padding'], []);
            this.label = ej2_base_1.createElement('label', { className: 'e-de-ctnr-prop-label' });
            this.label.innerHTML = this.localObj.getConstant('Paragraph');
            this.paragraphDiv.appendChild(this.label);
            this.styleDiv = this.createDivElement(element + '_styleDiv', this.paragraphDiv);
            this.styleDiv.classList.add('e-de-ctnr-segment', 'e-de-ctnr-style-div');
            this.styleSelect = ej2_base_1.createElement('input', { id: element + '_style', styles: 'width:248px;letter-spacing: 0.05px;' });
            this.styleDiv.appendChild(this.styleSelect);
            this.createStyleDropDownList(this.styleSelect);
            this.indentWholeDiv = this.createDivElement(element + '_indentWholeDiv', this.paragraphDiv);
            this.indentWholeDiv.style.display = 'flex';
            this.indentWholeDiv.classList.add('e-de-ctnr-segment');
            if (isRtl) {
                ej2_base_1.classList(this.indentWholeDiv, ['e-de-ctnr-segment-rtl'], []);
            }
            this.indentDiv = this.createDivElement(element + '_indentDiv', this.indentWholeDiv, 'display:flex;');
            var indentClassName = 'e-de-ctnr-group-btn e-de-char-fmt-btn-left e-btn-group';
            if (isRtl) {
                indentClassName = 'e-rtl ' + indentClassName;
            }
            this.indentDiv.className = indentClassName;
            this.leftAlignment = this.createButtonTemplate(element + '_leftIndent', 'e-de-ctnr-alignleft e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Align left Tooltip');
            this.centerAlignment = this.createButtonTemplate(element + '_centerIndent', 'e-de-ctnr-aligncenter e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Center Tooltip');
            this.rightAlignment = this.createButtonTemplate(element + '_rightIndent', 'e-de-ctnr-alignright e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Align right Tooltip');
            this.justify = this.createButtonTemplate(element + '_justify', 'e-de-ctnr-justify e-icons', this.indentDiv, 'e-de-prop-indent-last-button', '40.5', 'Justify Tooltip');
            var increaseIndentIconCss = 'e-de-ctnr-increaseindent e-icons';
            var decreaseIndentIconCss = 'e-de-ctnr-decreaseindent e-icons';
            this.incDecIndentDiv = this.createDivElement(element + '_lineindentDiv', this.indentWholeDiv, 'display:flex;');
            indentClassName = 'e-de-ctnr-group-btn e-de-char-fmt-btn-right e-btn-group';
            if (isRtl) {
                indentClassName = 'e-rtl ' + indentClassName;
                increaseIndentIconCss += ' e-de-flip';
                decreaseIndentIconCss += ' e-de-flip';
            }
            this.incDecIndentDiv.className = indentClassName;
            this.decreaseIndent = this.createButtonTemplate(element + '_decreaseIndent', decreaseIndentIconCss, this.incDecIndentDiv, 'e-de-prop-indent-button', '37', 'Decrease indent');
            this.increaseIndent = this.createButtonTemplate(element + '_increaseIndent', increaseIndentIconCss, this.incDecIndentDiv, 'e-de-prop-indent-last-button', '37', 'Increase indent');
            this.listDiv = this.createDivElement(element + '_listDiv', this.paragraphDiv, 'display:flex;');
            this.paraDiv = this.createDivElement(element + '_paraDiv', this.paragraphDiv, 'display:flex');
            ej2_base_1.classList(this.listDiv, ['e-de-ctnr-segment', 'e-de-ctnr-group-btn'], []);
            ej2_base_1.classList(this.paraDiv, ['e-de-ctnr-segment', 'e-de-ctnr-group-btn'], []);
            if (isRtl) {
                ej2_base_1.classList(this.listDiv, ['e-de-ctnr-segment-rtl', 'e-de-ctnr-group-btn'], []);
                ej2_base_1.classList(this.paraDiv, ['e-de-ctnr-segment-rtl', 'e-de-ctnr-group-btn'], []);
            }
            this.lineHeight = ej2_base_1.createElement('button', { id: element + '_lineHeight', attrs: { type: 'button' } });
            this.listDiv.appendChild(this.lineHeight);
            this.lineSpacing = this.createLineSpacingDropdown(this.lineHeight);
            this.listDropDown = this.createDivElement(element + '_listDropDiv', this.listDiv);
            ej2_base_1.classList(this.listDropDown, ['de-split-button', 'e-de-ctnr-segment-list'], []);
            if (isRtl) {
                ej2_base_1.classList(this.listDropDown, ['e-de-ctnr-segment-list-rtl'], []);
            }
            this.bulletButton = ej2_base_1.createElement('button', { id: element + '_bullet', attrs: { type: 'button' } });
            this.listDropDown.appendChild(this.bulletButton);
            this.numberingList = ej2_base_1.createElement('button', { id: element + '_numberingList', attrs: { type: 'button' } });
            this.listDropDown.appendChild(this.numberingList);
            var bulletIconCss = 'e-de-ctnr-bullets e-icons';
            var numberIconCss = 'e-de-ctnr-numbering e-icons';
            if (isRtl) {
                bulletIconCss += ' e-de-flip';
                numberIconCss += ' e-de-flip';
            }
            this.createBulletListDropButton(bulletIconCss, this.bulletButton);
            this.createNumberListDropButton(numberIconCss, this.numberingList);
            this.borders = this.createButtonTemplate(element + '_borders', 'e-de-ctnr-borders e-icons', this.paraDiv, 'e-de-ctnr-group-btn', '37', 'Borders');
            this.showHiddenMarks = this.createButtonTemplate(element + '_paraMark', 'e-de-e-paragraph-mark e-icons', this.paraDiv, 'e-de-ctnr-group-btn', '37', 'ShowHiddenMarks Tooltip');
        };
        Paragraph.prototype.createSeparator = function (parentDiv) {
            var separator = ej2_base_1.createElement('div', { className: 'e-de-prop-vline' });
            parentDiv.appendChild(separator);
        };
        Paragraph.prototype.createDivElement = function (id, parentDiv, style) {
            var element;
            if (style) {
                element = ej2_base_1.createElement('div', { id: id, styles: style });
            }
            else {
                element = ej2_base_1.createElement('div', { id: id });
            }
            parentDiv.appendChild(element);
            return element;
        };
        Paragraph.prototype.createButtonTemplate = function (id, iconcss, div, buttonClass, width, toolTipText) {
            var buttonElement = ej2_base_1.createElement('Button', { id: id, attrs: { type: 'button' } });
            div.appendChild(buttonElement);
            var btn = new ej2_buttons_1.Button({
                cssClass: buttonClass, iconCss: iconcss
            });
            btn.appendTo(buttonElement);
            buttonElement.setAttribute('title', this.localObj.getConstant(toolTipText));
            buttonElement.setAttribute('aria-label', this.localObj.getConstant(toolTipText));
            if (this.localObj.getConstant(toolTipText) !== 'Decrease indent' && this.localObj.getConstant(toolTipText) !== 'Increase indent' && this.localObj.getConstant(toolTipText) !== 'Borders') {
                buttonElement.setAttribute('aria-pressed', 'false');
            }
            switch (toolTipText) {
                case 'Align left Tooltip':
                    this.leftAlignmentBtn = btn;
                    break;
                case 'Align right Tooltip':
                    this.rightAlignmentBtn = btn;
                    break;
                case 'Justify Tooltip':
                    this.justifyBtn = btn;
                    break;
                case 'Decrease indent':
                    this.decreaseIndentBtn = btn;
                    break;
                case 'Increase indent':
                    this.increaseIndentBtn = btn;
                    break;
                case 'Borders':
                    this.bordersBtn = btn;
                    break;
                case 'ShowHiddenMarks Tooltip':
                    this.showHiddenMarksBtn = btn;
                    break;
                default:
                    this.centerAlignmentBtn = btn;
            }
            return buttonElement;
        };
        Paragraph.prototype.createLineSpacingDropdown = function (button) {
            var _this = this;
            var dropdown = new ej2_splitbuttons_1.DropDownButton({
                items: line_spacing_helper_1.LineSpacingHelper.getLineSpacingItems(this.localObj),
                iconCss: 'e-de-ctnr-linespacing e-icons',
                enableRtl: this.isRtl,
                select: this.lineSpacingAction.bind(this),
                cssClass: this.splitButtonClass,
                beforeItemRender: function (args) {
                    line_spacing_helper_1.LineSpacingHelper.customizeLineSpacingItem(args, _this.appliedLineSpacing);
                }
            });
            dropdown.appendTo(button);
            button.setAttribute('title', this.localObj.getConstant('Line spacing'));
            return dropdown;
        };
        Paragraph.prototype.createNumberListDropButton = function (iconcss, button) {
            var _this = this;
            this.numberListDropDiv = ej2_base_1.createElement('div', { id: 'target', styles: 'width: 211px;height: auto;display:none' });
            this.numberListDropUlTag = ej2_base_1.createElement('ul', {
                styles: 'display: block; outline: 0px;',
                id: 'listMenu',
                className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
            });
            this.numberListDropDiv.appendChild(this.numberListDropUlTag);
            this.noneNumberTag = this.createNumberNoneListTag(this.numberListDropUlTag);
            this.noneNumberTag.addEventListener('click', this.numberedAndBulletNoneClickHandler);
            this.numberList = this.createNumberListTag(this.numberListDropUlTag, '1.', '2.', '3.');
            this.numberList.addEventListener('click', this.numberedNumberDotClickHandler);
            this.lowLetter = this.createNumberListTag(this.numberListDropUlTag, 'a.', 'b.', 'c.');
            this.lowLetter.addEventListener('click', this.numberedLowLetterClickHandler);
            this.upLetter = this.createNumberListTag(this.numberListDropUlTag, 'A.', 'B.', 'C.');
            this.upLetter.addEventListener('click', this.numberedUpLetterClickHandler);
            this.lowRoman = this.createNumberListTag(this.numberListDropUlTag, 'i.', 'ii.', 'iii.');
            this.lowRoman.addEventListener('click', this.numberedLowRomanClickHandler);
            this.upRoman = this.createNumberListTag(this.numberListDropUlTag, 'I.', 'II.', 'III.');
            this.upRoman.addEventListener('click', this.numberedUpRomanClickHandler);
            var menuOptions = {
                target: this.numberListDropDiv,
                iconCss: iconcss,
                cssClass: this.splitButtonClass,
                beforeOpen: this.numberSplitButtonBeforeOpen.bind(this),
                beforeClose: this.numberSplitButtonBeforeClose.bind(this)
            };
            this.numberedListBtn = new ej2_splitbuttons_1.SplitButton(menuOptions);
            this.numberedListBtn.click = function () {
                _this.applyLastAppliedNumbering();
            };
            this.numberedListBtn.appendTo(button);
            button.parentElement.setAttribute('title', this.localObj.getConstant('Numbering'));
            button.parentElement.setAttribute('aria-label', this.localObj.getConstant('Numbering'));
        };
        Paragraph.prototype.numberSplitButtonBeforeClose = function () {
            this.numberListDropDiv.style.display = 'none';
            this.removeSelectedList();
        };
        Paragraph.prototype.numberSplitButtonBeforeOpen = function () {
            this.numberListDropDiv.style.display = 'block';
            var levelPattern = 'None';
            if (!ej2_base_1.isNullOrUndefined(this.documentEditor.selectionModule.paragraphFormat)) {
                if (ej2_base_1.isNullOrUndefined(this.documentEditor.selectionModule.paragraphFormat.listId)
                    || this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
                    levelPattern = 'None';
                }
                else {
                    var list = this.documentEditor.documentHelper.getListById(this.documentEditor.selectionModule.paragraphFormat.listId);
                    var abstractList = this.documentEditor.documentHelper.getAbstractListById(list.abstractListId);
                    var startParagraph = this.documentEditor.selectionModule.isForward ?
                        this.documentEditor.selectionModule.start.paragraph : this.documentEditor.selectionModule.end.paragraph;
                    var level = abstractList.levels[startParagraph.paragraphFormat.listFormat.listLevelNumber];
                    levelPattern = level.listLevelPattern;
                }
            }
            this.updateSelectedNumberedListType(levelPattern);
        };
        Paragraph.prototype.updateSelectedBulletListType = function (listText) {
            var bulletElements = {
                'none': this.noneBulletTag,
                'dot': this.dotBullet,
                'circle': this.circleBullet,
                'square': this.squareBullet,
                'flower': this.flowerBullet,
                'arrow': this.arrowBullet,
                'tick': this.tickBullet
            };
            bullet_list_helper_1.BulletListHelper.updateSelectedBulletListType(listText, bulletElements);
        };
        Paragraph.prototype.updateSelectedNumberedListType = function (listText) {
            var numberElements = {
                'none': this.noneNumberTag,
                'number': this.numberList,
                'lowletter': this.lowLetter,
                'upletter': this.upLetter,
                'lowroman': this.lowRoman,
                'uproman': this.upRoman
            };
            bullet_list_helper_1.BulletListHelper.updateSelectedNumberedListType(listText, numberElements);
        };
        Paragraph.prototype.removeSelectedList = function () {
            var elements = {
                'noneNumber': this.noneNumberTag,
                'number': this.numberList,
                'lowletter': this.lowLetter,
                'upletter': this.upLetter,
                'lowroman': this.lowRoman,
                'uproman': this.upRoman,
                'noneBullet': this.noneBulletTag,
                'dot': this.dotBullet,
                'circle': this.circleBullet,
                'square': this.squareBullet,
                'flower': this.flowerBullet,
                'arrow': this.arrowBullet,
                'tick': this.tickBullet
            };
            bullet_list_helper_1.BulletListHelper.removeSelectedList(elements);
        };
        Paragraph.prototype.applyLastAppliedNumbering = function () {
            switch (this.appliedNumberingStyle) {
                case 'arabic':
                    this.numberedNumberDotClick();
                    break;
                case 'lowletter':
                    this.numberedLowLetterClick();
                    break;
                case 'upletter':
                    this.numberedUpLetterClick();
                    break;
                case 'lowroman':
                    this.numberedLowRomanClick();
                    break;
                case 'uproman':
                    this.numberedUpRomanClick();
                    break;
            }
        };
        Paragraph.prototype.applyLastAppliedBullet = function () {
            this.applyBullet(this.appliedBulletStyle);
        };
        Paragraph.prototype.createBulletListDropButton = function (iconcss, button) {
            var _this = this;
            var div = ej2_base_1.createElement('div', { id: 'bullet_list', styles: 'width: 196px;height: auto;display:none' });
            var ulTag = ej2_base_1.createElement('ul', {
                styles: 'display: block; outline: 0px;', id: 'listMenu',
                className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
            });
            div.appendChild(ulTag);
            this.noneBulletTag = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-none e-icons e-de-ctnr-list', true);
            this.noneBulletTag.addEventListener('click', this.numberedAndBulletNoneClickHandler);
            this.dotBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-dot e-icons e-de-ctnr-list', false);
            this.dotBullet.addEventListener('click', this.bulletDotClickHandler);
            this.circleBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-circle e-icons e-de-ctnr-list', false);
            this.circleBullet.addEventListener('click', this.bulletCircleClickHandler);
            this.squareBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-square e-icons e-de-ctnr-list', false);
            this.squareBullet.addEventListener('click', this.bulletSquareClickHandler);
            this.flowerBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-flower e-icons e-de-ctnr-list', false);
            this.flowerBullet.addEventListener('click', this.bulletFlowerClickHandler);
            this.arrowBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-arrow e-icons e-de-ctnr-list', false);
            this.arrowBullet.addEventListener('click', this.bulletArrowClickHandler);
            this.tickBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-tick e-icons e-de-ctnr-list', false);
            this.tickBullet.addEventListener('click', this.bulletTickClickHandler);
            var menuOptions = {
                target: div,
                iconCss: iconcss,
                cssClass: this.splitButtonClass,
                beforeOpen: function () {
                    div.style.display = 'block';
                    if (ej2_base_1.isNullOrUndefined(_this.documentEditor.selectionModule.paragraphFormat.listId) ||
                        _this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
                        _this.updateSelectedBulletListType(_this.documentEditor.selectionModule.paragraphFormat.listText);
                    }
                    else {
                        var startParagraph = _this.documentEditor.selectionModule.isForward ?
                            _this.documentEditor.selectionModule.start.paragraph : _this.documentEditor.selectionModule.end.paragraph;
                        _this.updateSelectedBulletListType(startParagraph.paragraphFormat.listFormat.listLevel.numberFormat);
                    }
                },
                beforeClose: function () {
                    div.style.display = 'none';
                    _this.removeSelectedList();
                }
            };
            this.bulletListBtn = new ej2_splitbuttons_1.SplitButton(menuOptions);
            this.bulletListBtn.click = function () {
                _this.applyLastAppliedBullet();
            };
            this.bulletListBtn.appendTo(button);
            button.parentElement.setAttribute('title', this.localObj.getConstant('Bullets'));
            button.parentElement.setAttribute('aria-label', this.localObj.getConstant('Bullets'));
        };
        Paragraph.prototype.createNumberListTag = function (ulTag, text1, text2, text3) {
            return bullet_list_helper_1.BulletListHelper.createNumberListTag(ulTag, text1, text2, text3);
        };
        Paragraph.prototype.createNumberNoneListTag = function (ulTag) {
            return bullet_list_helper_1.BulletListHelper.createNumberNoneListTag(ulTag, this.localObj);
        };
        Paragraph.prototype.createBulletListTag = function (ulTag, iconCss, isNone) {
            return bullet_list_helper_1.BulletListHelper.createBulletListTag(ulTag, iconCss, isNone, this.localObj);
        };
        Paragraph.prototype.createStyleDropDownList = function (selectElement) {
            var _this = this;
            this.style = new ej2_dropdowns_1.ComboBox({
                dataSource: [{ StyleName: 'Normal', IconClass: 'e-de-e-paragraph-mark e-icons' }],
                cssClass: 'e-de-prop-dropdown',
                popupHeight: '240px',
                enableRtl: this.isRtl,
                allowFiltering: true,
                query: new ej2_data_1.Query().select(['StyleName', 'Style', 'IconClass']),
                fields: { text: 'StyleName', value: 'StyleName' },
                showClearButton: false,
                change: this.selectStyleValue.bind(this)
            });
            var itemTemplate = '';
            this.style.open = this.updateOptions.bind(this);
            Eif (!this.container.enableCsp) {
                if (this.isRtl) {
                    itemTemplate = ej2_base_1.initializeCSPTemplate(function (data) {
                        return "<span style=\"" + data.Style + "\">" + data.StyleName + "</span><span class=\"" + data.IconClass + "\"></span>";
                    });
                }
                else {
                    itemTemplate = ej2_base_1.initializeCSPTemplate(function (data) {
                        return "<span class=\"" + data.IconClass + "\"></span><span style=\"" + data.Style + "\">" + data.StyleName + "</span>";
                    });
                }
                this.style.itemTemplate = itemTemplate;
                this.style.isStringTemplate = true;
            }
            this.style.footerTemplate = ej2_base_1.initializeCSPTemplate(function (data) {
                return "<span class=\"e-de-ctnr-dropdown-ftr\">\n                " + _this.localObj.getConstant('Manage Styles') + "...</span>";
            });
            this.style.appendTo(selectElement);
            this.style.focus = function () {
                _this.isRetrieving = false;
                _this.style.element.select();
            };
            selectElement.parentElement.setAttribute('title', this.localObj.getConstant('Styles'));
        };
        Paragraph.prototype.updateOptions = function (args) {
            args.popup.element.getElementsByClassName('e-de-ctnr-dropdown-ftr')[0].addEventListener('click', this.createStyle.bind(this));
        };
        Paragraph.prototype.updateStyleNames = function () {
            this.styleName = styles_helper_1.StylesHelper.updateStyleNames(this.documentEditor, this.style, this.localObj);
            this.onSelectionChange();
        };
        Paragraph.prototype.createStyle = function () {
            this.style.hidePopup();
            if (!this.documentEditor.isReadOnly) {
                this.documentEditor.showDialog('Styles');
            }
        };
        Paragraph.prototype.onrightAlignmentClick = function () {
            this.leftAlignmentAction();
        };
        ;
        Paragraph.prototype.wireEvent = function () {
            var _this = this;
            this.leftAlignment.addEventListener('click', this.onrightAlignmentClickHandler);
            this.rightAlignment.addEventListener('click', function () {
                _this.rightAlignmentAction();
            });
            this.centerAlignment.addEventListener('click', function () {
                _this.centerAlignmentAction();
            });
            this.justify.addEventListener('click', function () {
                _this.justifyAction();
            });
            this.increaseIndent.addEventListener('click', function () {
                _this.increaseIndentAction();
            });
            this.showHiddenMarks.addEventListener('click', function () {
                _this.container.documentEditorSettings.showHiddenMarks = !_this.container.documentEditorSettings.showHiddenMarks;
                _this.toggleHiddenMarks();
                setTimeout(function () {
                    _this.documentEditor.focusIn();
                }, 30);
            });
            this.decreaseIndent.addEventListener('click', function () {
                _this.decreaseIndentAction();
            });
            this.lineSpacing.addEventListener('select', function (args) {
                _this.lineSpacingAction(args);
            });
            this.borders.addEventListener('click', function () {
                _this.documentEditor.showBordersAndShadingDialog();
            });
        };
        Paragraph.prototype.unwireEvents = function () {
            this.leftAlignment.removeEventListener('click', this.onrightAlignmentClickHandler);
            this.rightAlignment.click = undefined;
            this.centerAlignment.click = undefined;
            this.justify.click = undefined;
            this.increaseIndent.click = undefined;
            this.decreaseIndent.click = undefined;
            this.lineSpacing.select = undefined;
            this.style.select = undefined;
        };
        Paragraph.prototype.toggleHiddenMarks = function () {
            if (this.container.documentEditorSettings.showHiddenMarks) {
                ej2_base_1.classList(this.showHiddenMarks, ['e-btn-toggle'], []);
                this.showHiddenMarks.setAttribute('aria-pressed', 'true');
            }
            else {
                ej2_base_1.classList(this.showHiddenMarks, [], ['e-btn-toggle']);
                this.showHiddenMarks.setAttribute('aria-pressed', 'false');
            }
        };
        Paragraph.prototype.leftAlignmentAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.toggleTextAlignment('Left');
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.lineSpacingAction = function (args) {
            if (this.isRetrieving) {
                return;
            }
            var appliedSpacing = { value: this.appliedLineSpacing };
            line_spacing_helper_1.LineSpacingHelper.applyLineSpacing(this.documentEditor, args.item.text, appliedSpacing, this.localObj);
            this.appliedLineSpacing = appliedSpacing.value;
        };
        Paragraph.prototype.setLineSpacing = function () {
            this.appliedLineSpacing = line_spacing_helper_1.LineSpacingHelper.getCurrentLineSpacing(this.documentEditor, this.localObj);
        };
        Paragraph.prototype.selectStyleValue = function (args) {
            var _this = this;
            if (this.container) {
                Eif (this.isRetrieving || !args.isInteracted) {
                    return;
                }
                setTimeout(function () {
                    _this.applyStyleValue(args);
                }, 10);
            }
        };
        Paragraph.prototype.applyStyleValue = function (args) {
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                styles_helper_1.StylesHelper.applyStyleValue(this.documentEditor, args);
            }
        };
        Paragraph.prototype.rightAlignmentAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.toggleTextAlignment('Right');
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.centerAlignmentAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.toggleTextAlignment('Center');
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.justifyAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.toggleTextAlignment('Justify');
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.increaseIndentAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.increaseIndent();
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.decreaseIndentAction = function () {
            if (this.isRetrieving) {
                return;
            }
            if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
                this.documentEditor.editorModule.decreaseIndent();
                this.documentEditor.focusIn();
            }
        };
        Paragraph.prototype.numberedNoneClick = function () {
            var _this = this;
            if (this.isRetrieving) {
                return;
            }
            if (this.documentEditor.editorModule) {
                this.documentEditor.editorModule.clearList();
                setTimeout(function () {
                    _this.documentEditor.focusIn();
                }, 30);
            }
        };
        Paragraph.prototype.applyNumbering = function (pattern, style) {
            var _this = this;
            if (this.isRetrieving) {
                return;
            }
            if (this.documentEditor.editorModule) {
                this.appliedNumberingStyle = style;
                this.documentEditor.editorModule.applyNumbering(bullet_list_helper_1.BulletListHelper.getLevelFormatNumber(this.documentEditor), pattern);
                setTimeout(function () {
                    _this.documentEditor.focusIn();
                }, 30);
            }
        };
        Paragraph.prototype.numberedNumberDotClick = function () {
            this.applyNumbering('Arabic', 'arabic');
        };
        Paragraph.prototype.numberedUpRomanClick = function () {
            this.applyNumbering('UpRoman', 'uproman');
        };
        Paragraph.prototype.numberedUpLetterClick = function () {
            this.applyNumbering('UpRoman', 'uproman');
        };
        Paragraph.prototype.numberedLowLetterClick = function () {
            this.applyNumbering('LowLetter', 'lowletter');
        };
        Paragraph.prototype.numberedLowRomanClick = function () {
            this.applyNumbering('LowRoman', 'lowroman');
        };
        Paragraph.prototype.applyBullet = function (style) {
            if (this.isRetrieving) {
                return;
            }
            var appliedStyle = { value: this.appliedBulletStyle };
            bullet_list_helper_1.BulletListHelper.applyBulletStyle(this.documentEditor, style, appliedStyle);
            this.appliedBulletStyle = appliedStyle.value;
        };
        Paragraph.prototype.bulletDotClick = function () {
            this.applyBullet('dot');
        };
        Paragraph.prototype.bulletCircleClick = function () {
            this.applyBullet('circle');
        };
        Paragraph.prototype.bulletSquareClick = function () {
            this.applyBullet('square');
        };
        Paragraph.prototype.bulletFlowerClick = function () {
            this.applyBullet('flower');
        };
        Paragraph.prototype.bulletArrowClick = function () {
            this.applyBullet('arrow');
        };
        Paragraph.prototype.bulletTickClick = function () {
            this.applyBullet('tick');
        };
        Paragraph.prototype.onSelectionChange = function () {
            this.isRetrieving = true;
            Eif (this.documentEditor.editorModule) {
                var style = this.documentEditor.selectionModule.characterFormat.styleName;
                Eif (this.documentEditor.selectionModule.characterFormat.styleName === "Default Paragraph Font") {
                    style = this.documentEditor.selectionModule.paragraphFormat.styleName;
                }
                Eif (style) {
                    var localeValue = this.localObj.getConstant(style);
                    this.style.value = (ej2_base_1.isNullOrUndefined(localeValue) || localeValue == '') ? style : localeValue;
                }
                else {
                    this.style.value = null;
                }
                ej2_base_1.classList(this.leftAlignment, [], ['e-btn-toggle']);
                ej2_base_1.classList(this.rightAlignment, [], ['e-btn-toggle']);
                ej2_base_1.classList(this.centerAlignment, [], ['e-btn-toggle']);
                ej2_base_1.classList(this.justify, [], ['e-btn-toggle']);
                if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Left') {
                    ej2_base_1.classList(this.leftAlignment, ['e-btn-toggle'], []);
                    this.leftAlignment.setAttribute('aria-pressed', 'true');
                    this.rightAlignment.setAttribute('aria-pressed', 'false');
                    this.centerAlignment.setAttribute('aria-pressed', 'false');
                    this.justify.setAttribute('aria-pressed', 'false');
                }
                else Iif (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Right') {
                    ej2_base_1.classList(this.rightAlignment, ['e-btn-toggle'], []);
                    this.leftAlignment.setAttribute('aria-pressed', 'false');
                    this.rightAlignment.setAttribute('aria-pressed', 'true');
                    this.centerAlignment.setAttribute('aria-pressed', 'false');
                    this.justify.setAttribute('aria-pressed', 'false');
                }
                else Eif (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Center') {
                    ej2_base_1.classList(this.centerAlignment, ['e-btn-toggle'], []);
                    this.leftAlignment.setAttribute('aria-pressed', 'false');
                    this.rightAlignment.setAttribute('aria-pressed', 'false');
                    this.centerAlignment.setAttribute('aria-pressed', 'true');
                    this.justify.setAttribute('aria-pressed', 'false');
                }
                else if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Justify') {
                    ej2_base_1.classList(this.justify, ['e-btn-toggle'], []);
                    this.leftAlignment.setAttribute('aria-pressed', 'false');
                    this.rightAlignment.setAttribute('aria-pressed', 'false');
                    this.centerAlignment.setAttribute('aria-pressed', 'false');
                    this.justify.setAttribute('aria-pressed', 'true');
                }
                this.toggleHiddenMarks();
            }
            this.setLineSpacing();
            this.isRetrieving = false;
        };
        Paragraph.prototype.removeHTMLElements = function () {
            this.leftAlignment.remove();
            this.leftAlignment = null;
            this.rightAlignment.remove();
            this.rightAlignment = null;
            this.centerAlignment.remove();
            this.centerAlignment = null;
            this.justify.remove();
            this.justify = null;
            this.increaseIndent.remove();
            this.increaseIndent = null;
            this.decreaseIndent.remove();
            this.decreaseIndent = null;
            this.showHiddenMarks.remove();
            this.showHiddenMarks = null;
            this.noneNumberTag.remove();
            this.noneNumberTag = null;
            this.numberList.remove();
            this.numberList = null;
            this.lowLetter.remove();
            this.lowLetter = null;
            this.upLetter.remove();
            this.upLetter = null;
            this.lowRoman.remove();
            this.lowRoman = null;
            this.upRoman.remove();
            this.upRoman = null;
            this.noneBulletTag.remove();
            this.noneBulletTag = null;
            this.dotBullet.remove();
            this.dotBullet = null;
            this.circleBullet.remove();
            this.circleBullet = null;
            this.squareBullet.remove();
            this.squareBullet = null;
            this.flowerBullet.remove();
            this.flowerBullet = null;
            this.arrowBullet.remove();
            this.arrowBullet = null;
            this.tickBullet.remove();
            this.tickBullet = null;
            this.borders.remove();
            this.borders = null;
            this.paragraphDiv.remove();
            this.paragraphDiv = null;
            this.label.remove();
            this.label = null;
            this.indentWholeDiv.remove();
            this.indentWholeDiv = null;
            this.indentDiv.remove();
            this.indentDiv = null;
            this.incDecIndentDiv.remove();
            this.incDecIndentDiv = null;
            this.listDiv.remove();
            this.listDiv = null;
            this.paraDiv.remove();
            this.paraDiv = null;
            this.lineHeight.remove();
            this.lineHeight = null;
            this.listDropDown.remove();
            this.listDropDown = null;
            this.bulletButton.remove();
            this.bulletButton = null;
            this.numberingList.remove();
            this.numberingList = null;
            this.numberListDropDiv.remove();
            this.numberListDropDiv = null;
            this.numberListDropUlTag.remove();
            this.numberListDropUlTag = null;
        };
        Paragraph.prototype.destroy = function () {
            this.container = undefined;
            this.unwireEvents();
            this.removeHTMLElements();
            Eif (this.lineSpacing) {
                this.lineSpacing.destroy();
                this.lineSpacing = undefined;
            }
            Eif (this.bulletListBtn) {
                this.bulletListBtn.destroy();
                this.bulletListBtn = undefined;
            }
            Eif (this.numberedListBtn) {
                this.numberedListBtn.destroy();
                this.numberedListBtn = undefined;
            }
            Eif (this.leftAlignmentBtn) {
                this.leftAlignmentBtn.destroy();
                this.leftAlignmentBtn = undefined;
            }
            Eif (this.rightAlignmentBtn) {
                this.rightAlignmentBtn.destroy();
                this.rightAlignmentBtn = undefined;
            }
            Eif (this.centerAlignmentBtn) {
                this.centerAlignmentBtn.destroy();
                this.centerAlignmentBtn = undefined;
            }
            Eif (this.showHiddenMarksBtn) {
                this.showHiddenMarksBtn.destroy();
                this.showHiddenMarksBtn = undefined;
            }
            Eif (this.justifyBtn) {
                this.justifyBtn.destroy();
                this.justifyBtn = undefined;
            }
            Eif (this.decreaseIndentBtn) {
                this.decreaseIndentBtn.destroy();
                this.decreaseIndentBtn = undefined;
            }
            Eif (this.increaseIndentBtn) {
                this.increaseIndentBtn.destroy();
                this.increaseIndentBtn = undefined;
            }
            Eif (this.bordersBtn) {
                this.bordersBtn.destroy();
                this.bordersBtn = undefined;
            }
            Iif (this.showHiddenMarksBtn) {
                this.showHiddenMarksBtn.destroy();
                this.showHiddenMarksBtn = undefined;
            }
        };
        return Paragraph;
    }());
    exports.Paragraph = Paragraph;
});