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

97.42% Statements 454/466
90.63% Branches 174/192
100% Functions 30/30
97.42% Lines 454/466
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   174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 174× 40× 40× 40×     39×   40× 40× 40× 34× 34×         40× 40×   40× 40× 40× 40×   40×         40× 34×     40×   38×     36× 36×   40×   38×     36× 36×   40× 21×   40×       40× 40×     174× 23× 23×   174×   174× 16× 16×       16×   16× 10×   16× 10×   16×   16×     16×   16×   16×   16× 16× 16× 16× 16× 16× 16×   16× 16×   16× 16×                   16×   174× 13×   174×   174× 44×   174×   174×       174×         174×         174×         174×         174×           174×     16×     16× 16×                   14469×   96×         96×   16× 16× 16× 16× 16× 16× 16× 16× 16×       16×   16× 16× 16× 16× 16× 16× 16× 16×       16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16× 16×     16× 16×           16× 16× 16×         16× 16×           16× 16×         16× 16×           16× 16×     16× 16× 16× 16× 16× 16×     16× 16× 16×     16×   16× 16× 16× 16× 16× 16× 16× 16× 16× 16×   16× 16× 16× 16× 16× 16× 16× 256×   16× 16× 16× 16×   16× 16× 16×     16× 16× 16× 16× 16× 16× 16× 16×   25×   25× 25× 25× 25× 15×   25× 25× 25× 25× 25× 25× 25×               25× 25×   17×     17× 17×           14×           14×             27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27× 27×   239× 239×   239× 14× 10×   14× 70× 70×   14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239× 239× 14×   239×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×   239× 14× 14×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-buttons", "../format/character-format", "@syncfusion/ej2-inputs", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_dropdowns_1, ej2_buttons_1, character_format_1, ej2_inputs_1, ej2_base_2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var FontDialog = (function () {
        function FontDialog(documentHelper) {
            var _this = this;
            this.fontStyleInternal = undefined;
            this.fontNameList = undefined;
            this.fontStyleText = undefined;
            this.fontSizeText = undefined;
            this.colorPicker = undefined;
            this.underlineDrop = undefined;
            this.strikethroughBox = undefined;
            this.doublestrikethrough = undefined;
            this.superscript = undefined;
            this.subscript = undefined;
            this.allcaps = undefined;
            this.bold = undefined;
            this.italic = undefined;
            this.underline = undefined;
            this.strikethrough = undefined;
            this.baselineAlignment = undefined;
            this.fontSize = undefined;
            this.fontFamily = undefined;
            this.fontColor = undefined;
            this.allCaps = undefined;
            this.isListDialog = false;
            this.characterFormat = undefined;
            this.loadFontDialog = function () {
                _this.documentHelper.updateFocus();
                var characterFormat;
                if (_this.characterFormat) {
                    characterFormat = _this.characterFormat;
                }
                else {
                    characterFormat = _this.documentHelper.owner.selectionModule.characterFormat;
                }
                _this.fontNameList.value = characterFormat.fontFamily;
                _this.fontNameList.dataBind();
                if (!characterFormat.bold && !characterFormat.italic) {
                    _this.fontStyleText.value = _this.fontSizeText.value;
                    _this.fontStyleText.index = 0;
                }
                else if (characterFormat.bold && !characterFormat.italic) {
                    _this.fontStyleText.value = _this.fontSizeText.value;
                    _this.fontStyleText.index = 1;
                }
                else if (!characterFormat.bold && characterFormat.italic) {
                    _this.fontStyleText.value = _this.fontSizeText.value;
                    _this.fontStyleText.index = 2;
                }
                else Eif (characterFormat.bold && characterFormat.italic) {
                    _this.fontStyleText.value = _this.fontSizeText.value;
                    _this.fontStyleText.index = 3;
                }
                Eif (!ej2_base_1.isNullOrUndefined(characterFormat.fontSize)) {
                    _this.fontSizeText.value = characterFormat.fontSize;
                }
                Eif (!ej2_base_1.isNullOrUndefined(characterFormat.fontColor)) {
                    var fontColor = characterFormat.fontColor;
                    Eif (fontColor === 'empty' || fontColor === '#00000000') {
                        fontColor = '#000000';
                    }
                    _this.colorPicker.value = fontColor;
                }
                else {
                    _this.colorPicker.value = '#000000';
                }
                if (characterFormat.underline === 'None') {
                    _this.underlineDrop.index = 0;
                }
                else if (characterFormat.underline === 'Single') {
                    _this.underlineDrop.index = 1;
                }
                if (characterFormat.strikethrough === 'SingleStrike') {
                    _this.strikethroughBox.checked = true;
                }
                else if (characterFormat.strikethrough === 'DoubleStrike') {
                    _this.doublestrikethrough.checked = true;
                }
                else {
                    _this.strikethroughBox.checked = false;
                    _this.doublestrikethrough.checked = false;
                }
                if (characterFormat.baselineAlignment === 'Superscript') {
                    _this.superscript.checked = true;
                }
                else if (characterFormat.baselineAlignment === 'Subscript') {
                    _this.subscript.checked = true;
                }
                else {
                    _this.superscript.checked = false;
                    _this.subscript.checked = false;
                }
                if (_this.documentHelper.selection.caret.style.display !== 'none') {
                    _this.documentHelper.selection.caret.style.display = 'none';
                }
                Iif (characterFormat.allCaps) {
                    _this.allcaps.checked = true;
                }
                else {
                    _this.allcaps.checked = false;
                    _this.allCaps = false;
                }
            };
            this.closeFontDialog = function () {
                _this.unWireEventsAndBindings();
                _this.documentHelper.updateFocus();
            };
            this.onCancelButtonClick = function () {
                _this.documentHelper.dialog.hide();
                _this.unWireEventsAndBindings();
                _this.documentHelper.updateFocus();
            };
            this.onInsertFontFormat = function () {
                var format;
                Iif (_this.characterFormat) {
                    format = _this.characterFormat;
                }
                else {
                    format = new character_format_1.WCharacterFormat(undefined);
                }
                if (!ej2_base_1.isNullOrUndefined(_this.bold)) {
                    format.bold = _this.bold;
                }
                if (!ej2_base_1.isNullOrUndefined(_this.italic)) {
                    format.italic = _this.italic;
                }
                if (!ej2_base_1.isNullOrUndefined(_this.fontSize) && _this.fontSize > 0) {
                    format.fontSize = _this.fontSize;
                }
                Iif (!ej2_base_1.isNullOrUndefined(_this.fontColor)) {
                    format.fontColor = _this.fontColor;
                }
                if (!ej2_base_1.isNullOrUndefined(_this.baselineAlignment)) {
                    format.baselineAlignment = _this.baselineAlignment;
                }
                if (!ej2_base_1.isNullOrUndefined(_this.strikethrough)) {
                    format.strikethrough = _this.strikethrough;
                }
                if (!ej2_base_1.isNullOrUndefined(_this.underline)) {
                    format.underline = _this.underline;
                }
                Eif (!ej2_base_1.isNullOrUndefined(_this.fontFamily)) {
                    var fontFamily = ej2_base_2.SanitizeHtmlHelper.sanitize(_this.fontFamily);
                    format.fontFamily = fontFamily;
                    format.fontFamilyAscii = fontFamily;
                    format.fontFamilyFarEast = fontFamily;
                    format.fontFamilyNonFarEast = fontFamily;
                    format.fontFamilyBidi = fontFamily;
                }
                Eif (!ej2_base_1.isNullOrUndefined(_this.allCaps)) {
                    format.allCaps = _this.allCaps;
                }
                Eif (!_this.characterFormat) {
                    _this.onCharacterFormat(_this.documentHelper.selection, format);
                }
                else {
                    if (_this.isListDialog) {
                        _this.documentHelper.owner.listDialogModule.updateCharacterFormat(format);
                    }
                    else {
                        _this.documentHelper.owner.styleDialogModule.updateCharacterFormat();
                    }
                }
                _this.documentHelper.hideDialog();
            };
            this.fontSizeUpdate = function (args) {
                _this.fontSize = args.value;
            };
            this.fontStyleUpdate = function (args) {
                _this.fontStyle = args.value;
            };
            this.fontFamilyUpdate = function (args) {
                _this.fontFamily = args.value;
            };
            this.underlineUpdate = function (args) {
                _this.underline = args.value;
            };
            this.fontColorUpdate = function (args) {
                Iif (!ej2_base_1.isNullOrUndefined(args.currentValue)) {
                    _this.fontColor = args.currentValue.hex;
                }
            };
            this.singleStrikeUpdate = function (args) {
                _this.enableCheckBoxProperty(args);
                if (args.checked) {
                    _this.strikethrough = 'SingleStrike';
                }
                else {
                    _this.strikethrough = 'None';
                }
            };
            this.doubleStrikeUpdate = function (args) {
                _this.enableCheckBoxProperty(args);
                if (args.checked) {
                    _this.strikethrough = 'DoubleStrike';
                }
                else {
                    _this.strikethrough = 'None';
                }
            };
            this.superscriptUpdate = function (args) {
                _this.enableCheckBoxProperty(args);
                if (args.checked) {
                    _this.baselineAlignment = 'Superscript';
                }
                else {
                    _this.baselineAlignment = 'Normal';
                }
            };
            this.subscriptUpdate = function (args) {
                _this.enableCheckBoxProperty(args);
                if (args.checked) {
                    _this.baselineAlignment = 'Subscript';
                }
                else {
                    _this.baselineAlignment = 'Normal';
                }
            };
            this.allcapsUpdate = function (args) {
                _this.enableCheckBoxProperty(args);
                Eif (args.checked) {
                    _this.allCaps = true;
                }
                else {
                    _this.allCaps = false;
                }
            };
            this.documentHelper = documentHelper;
        }
        Object.defineProperty(FontDialog.prototype, "fontStyle", {
            get: function () {
                return this.fontStyleInternal;
            },
            set: function (value) {
                this.fontStyleInternal = value;
                switch (this.fontStyle) {
                    case 'Bold':
                        this.bold = true;
                        this.italic = false;
                        break;
                    case 'Italic':
                        this.bold = false;
                        this.italic = true;
                        break;
                    case 'BoldItalic':
                        this.bold = true;
                        this.italic = true;
                        break;
                    case 'Regular':
                        this.bold = false;
                        this.italic = false;
                        break;
                }
            },
            enumerable: true,
            configurable: true
        });
        FontDialog.prototype.getModuleName = function () {
            return 'FontDialog';
        };
        FontDialog.prototype.createInputElement = function (type, id, className) {
            var element = ej2_base_1.createElement('input', {
                attrs: { type: type },
                id: id,
                className: className
            });
            return element;
        };
        FontDialog.prototype.initFontDialog = function (locale, isRtl) {
            var id = this.documentHelper.owner.containerId;
            this.target = ej2_base_1.createElement('div', { className: 'e-de-font-dlg' });
            var fontDiv = this.getFontDiv(locale, isRtl);
            this.target.appendChild(fontDiv);
            var sizeDiv = this.getFontSizeDiv(locale, isRtl);
            this.target.appendChild(sizeDiv);
            this.colorDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.fontColorDiv = ej2_base_1.createElement('div', { className: 'e-de-font-dlg-display' });
            this.fontColorLabel = ej2_base_1.createElement('label', {
                className: 'e-de-font-dlg-header-font-color e-de-font-color-margin',
                innerHTML: locale.getConstant('Font color')
            });
            if (isRtl) {
                this.fontColorLabel.classList.add('e-de-rtl');
            }
            this.fontColorDiv.appendChild(this.fontColorLabel);
            this.fontColorElement = this.createInputElement('color', this.target.id + '_ColorDiv', 'e-de-font-dlg-color');
            this.fontColorDiv.appendChild(this.fontColorElement);
            this.colorDiv.appendChild(this.fontColorDiv);
            this.target.appendChild(this.colorDiv);
            this.fontEffectsDiv = ej2_base_1.createElement('div');
            this.fontEffectSubDiv1 = ej2_base_1.createElement('div');
            this.effectLabel = ej2_base_1.createElement('div', {
                className: 'e-de-para-dlg-heading',
                innerHTML: locale.getConstant('Effects'),
            });
            this.fontEffectSubDiv1.appendChild(this.effectLabel);
            this.fontEffectsDiv.appendChild(this.fontEffectSubDiv1);
            this.target.appendChild(this.fontEffectsDiv);
            this.effectsProperties = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.fontEffectSubDiv2 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.strikeThroughElement = this.createInputElement('checkbox', this.target.id + '_strikeThrough', '');
            this.fontEffectSubDiv2.appendChild(this.strikeThroughElement);
            this.checkBoxDiv = ej2_base_1.createElement('div', { className: 'e-de-font-checkbox' });
            this.subScriptElement = this.createInputElement('checkbox', this.target.id + '_subScript', '');
            this.checkBoxDiv.appendChild(this.subScriptElement);
            this.fontEffectSubDiv2.appendChild(this.checkBoxDiv);
            this.checkBoxDiv = ej2_base_1.createElement('div', { className: 'e-de-font-checkbox' });
            this.allCapsElement = this.createInputElement('checkbox', this.target.id + '_allCaps', '');
            this.checkBoxDiv.appendChild(this.allCapsElement);
            this.fontEffectSubDiv2.appendChild(this.checkBoxDiv);
            this.effectsProperties.appendChild(this.fontEffectSubDiv2);
            this.fontEffectSubDiv3 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.superScriptElement = this.createInputElement('checkbox', this.target.id + '_superScript', '');
            this.fontEffectSubDiv3.appendChild(this.superScriptElement);
            this.checkBoxDiv = ej2_base_1.createElement('div', { className: 'e-de-font-checkbox' });
            this.doubleStrikeThroughElement = this.createInputElement('checkbox', this.target.id + '_doubleStrikeThrough', '');
            this.checkBoxDiv.appendChild(this.doubleStrikeThroughElement);
            this.fontEffectSubDiv3.appendChild(this.checkBoxDiv);
            this.effectsProperties.appendChild(this.fontEffectSubDiv3);
            this.target.appendChild(this.effectsProperties);
            var _a = this.documentHelper.owner.documentEditorSettings.colorPickerSettings, columns = _a.columns, createPopupOnClick = _a.createPopupOnClick, cssClass = _a.cssClass, disabled = _a.disabled, enablePersistence = _a.enablePersistence, inline = _a.inline, mode = _a.mode, modeSwitcher = _a.modeSwitcher, noColor = _a.noColor, presetColors = _a.presetColors, showButtons = _a.showButtons;
            this.colorPicker = new ej2_inputs_1.ColorPicker({
                change: this.fontColorUpdate, value: '#000000', enableRtl: isRtl, locale: this.documentHelper.owner.locale, enableOpacity: false, mode: mode, modeSwitcher: modeSwitcher, showButtons: showButtons, columns: columns, createPopupOnClick: createPopupOnClick, cssClass: cssClass, disabled: disabled, enablePersistence: enablePersistence, inline: inline, noColor: noColor, presetColors: presetColors
            });
            this.colorPicker.appendTo(this.fontColorElement);
            this.strikethroughBox = new ej2_buttons_1.CheckBox({
                change: this.singleStrikeUpdate,
                cssClass: 'e-de-font-content-label',
                label: locale.getConstant('Strikethrough'),
                enableRtl: isRtl
            });
            this.documentHelper.colorPicker = this.colorPicker;
            this.strikethroughBox.appendTo(this.strikeThroughElement);
            this.doublestrikethrough = new ej2_buttons_1.CheckBox({
                change: this.doubleStrikeUpdate,
                label: locale.getConstant('Double strikethrough'),
                enableRtl: isRtl
            });
            this.doublestrikethrough.appendTo(this.doubleStrikeThroughElement);
            this.subscript = new ej2_buttons_1.CheckBox({
                label: locale.getConstant('Subscript'),
                cssClass: 'e-de-font-content-label-width',
                change: this.subscriptUpdate,
                enableRtl: isRtl
            });
            this.subscript.appendTo(this.subScriptElement);
            this.superscript = new ej2_buttons_1.CheckBox({
                label: locale.getConstant('Superscript'),
                cssClass: 'e-de-font-content-label', change: this.superscriptUpdate,
                enableRtl: isRtl
            });
            this.superscript.appendTo(this.superScriptElement);
            this.allcaps = new ej2_buttons_1.CheckBox({
                label: locale.getConstant('All caps'),
                cssClass: 'e-de-font-content-label-caps',
                change: this.allcapsUpdate,
                enableRtl: isRtl
            });
            this.allcaps.appendTo(this.allCapsElement);
            if (isRtl) {
                this.fontEffectSubDiv2.classList.add('e-de-rtl');
                this.fontEffectSubDiv3.classList.add('e-de-rtl');
                this.fontEffectSubDiv1.classList.remove('e-de-font-content-checkbox-label');
            }
        };
        FontDialog.prototype.getFontSizeDiv = function (locale, isRtl) {
            var id = this.documentHelper.owner.containerId;
            this.getSizeDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.sizeSubDiv1 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            var sizeLabel = locale.getConstant('Size');
            this.getFontSize = ej2_base_1.createElement('select', { id: this.target.id + '_fontSize' });
            this.getFontSize.innerHTML = '<option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>' +
                '<option>14</option><option>16</option><option>18</option><option>20</option><option>24</option><option>26</option>' +
                '<option>28</option><option>36</option><option>48</option><option>72</option><option>96</option>';
            this.sizeSubDiv1.appendChild(this.getFontSize);
            this.getSizeDiv.appendChild(this.sizeSubDiv1);
            this.sizeSubDiv2 = ej2_base_1.createElement('div', {
                className: 'e-de-subcontainer-right',
            });
            if (isRtl) {
                this.sizeSubDiv2.classList.add('e-de-rtl');
            }
            var html = locale.getConstant('Underline style');
            this.underlineElement = ej2_base_1.createElement('select', { id: this.target.id + '_underLine' });
            this.underlineElement.innerHTML = '<option value="None">' + locale.getConstant('None') + '</option><option value="Single">________</option>';
            this.sizeSubDiv2.appendChild(this.underlineElement);
            this.getSizeDiv.appendChild(this.sizeSubDiv2);
            this.fontSizeText = new ej2_dropdowns_1.ComboBox({ change: this.fontSizeUpdate, allowCustom: true, showClearButton: false, enableRtl: isRtl, floatLabelType: 'Always', placeholder: sizeLabel, htmlAttributes: { 'aria-labelledby': sizeLabel } });
            this.fontSizeText.appendTo(this.getFontSize);
            this.underlineDrop = new ej2_dropdowns_1.DropDownList({ change: this.underlineUpdate, enableRtl: isRtl, floatLabelType: 'Always', placeholder: html, htmlAttributes: { 'aria-labelledby': html } });
            this.underlineDrop.appendTo(this.underlineElement);
            return this.getSizeDiv;
        };
        FontDialog.prototype.getFontDiv = function (locale, isRtl) {
            var id = this.documentHelper.owner.containerId;
            this.fontDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.fontSubDiv1 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            var fontLabel = locale.getConstant('Font');
            this.fontNameValues = ej2_base_1.createElement('select', { id: this.target.id + '_fontName' });
            var fontValues = this.documentHelper.owner.documentEditorSettings.fontFamilies;
            for (var i = 0; i < fontValues.length; i++) {
                this.fontNameValues.innerHTML += '<option>' + fontValues[i] + '</option>';
            }
            this.fontSubDiv1.appendChild(this.fontNameValues);
            this.fontDiv.appendChild(this.fontSubDiv1);
            this.fontSubDiv2 = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            if (isRtl) {
                this.fontSubDiv2.classList.add('e-de-rtl');
            }
            var fontStyleLabel = locale.getConstant('Font style');
            this.fontStyleValues = ej2_base_1.createElement('select', { id: this.target.id + '_fontStyle' });
            this.fontStyleValues.innerHTML = '<option value="Regular">' +
                locale.getConstant('Regular') + '</option><option value="Bold">' + locale.getConstant('Bold') + '</option><option value="Italic">' +
                locale.getConstant('Italic') + '</option><option value="BoldItalic">' + locale.getConstant('Bold') + locale.getConstant('Italic') + '</option>';
            this.fontSubDiv2.appendChild(this.fontStyleValues);
            this.fontDiv.appendChild(this.fontSubDiv2);
            this.fontNameList = new ej2_dropdowns_1.ComboBox({ change: this.fontFamilyUpdate, enableRtl: isRtl, floatLabelType: 'Always', placeholder: fontLabel });
            this.fontNameList.showClearButton = false;
            this.fontNameList.appendTo(this.fontNameValues);
            this.fontStyleText = new ej2_dropdowns_1.DropDownList({ change: this.fontStyleUpdate, enableRtl: isRtl, floatLabelType: 'Always', placeholder: fontStyleLabel });
            this.fontStyleText.appendTo(this.fontStyleValues);
            return this.fontDiv;
        };
        FontDialog.prototype.showFontDialog = function (characterFormat, isListDialog) {
            if (characterFormat) {
                this.characterFormat = characterFormat;
            }
            this.isListDialog = isListDialog;
            var locale = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            locale.setLocale(this.documentHelper.owner.locale);
            if (!this.target) {
                this.initFontDialog(locale, this.documentHelper.owner.enableRtl);
            }
            this.documentHelper.dialog.header = locale.getConstant('Font');
            this.documentHelper.dialog.width = 'auto';
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.beforeOpen = this.loadFontDialog;
            this.documentHelper.dialog.close = this.closeFontDialog;
            this.documentHelper.dialog.buttons = [{
                    click: this.onInsertFontFormat,
                    buttonModel: { content: locale.getConstant('Ok'), cssClass: 'e-flat e-font-okay', isPrimary: true }
                },
                {
                    click: this.onCancelButtonClick,
                    buttonModel: { content: locale.getConstant('Cancel'), cssClass: 'e-flat e-font-cancel' }
                }];
            this.documentHelper.dialog.dataBind();
            this.documentHelper.dialog.show();
        };
        FontDialog.prototype.onCharacterFormat = function (selection, format) {
            Iif (!ej2_base_1.isNullOrUndefined(selection) && selection.checkContentControlLocked(true)) {
                return;
            }
            this.documentHelper.owner.editorModule.initHistory('CharacterFormat');
            if (selection.isEmpty) {
                Eif (selection.start.offset === selection.getParagraphLength(selection.start.paragraph)) {
                    this.documentHelper.owner.editorModule.applyCharFormatValueInternal(selection, selection.start.paragraph.characterFormat, undefined, format);
                    this.documentHelper.owner.editorModule.reLayout(selection);
                }
                this.documentHelper.updateFocus();
                return;
            }
            else {
                this.documentHelper.owner.editorModule.setOffsetValue(this.documentHelper.selection);
                this.documentHelper.owner.editorModule.updateSelectionCharacterFormatting('CharacterFormat', format, false);
            }
        };
        FontDialog.prototype.enableCheckBoxProperty = function (args) {
            if (this.strikethroughBox.checked && this.doublestrikethrough.checked) {
                this.strikethroughBox.checked = false;
                this.doublestrikethrough.checked = false;
                Iif (args.event.currentTarget.innerText === this.target.id + 'Double strikethrough') {
                    this.doublestrikethrough.checked = true;
                }
                else {
                    this.strikethroughBox.checked = true;
                }
            }
            if (this.superscript.checked && this.subscript.checked) {
                this.subscript.checked = false;
                this.superscript.checked = false;
                Iif (args.event.currentTarget.innerText === this.target.id + 'Subscript') {
                    this.subscript.checked = true;
                }
                else {
                    this.superscript.checked = true;
                }
            }
        };
        FontDialog.prototype.unWireEventsAndBindings = function () {
            this.fontNameList.value = '';
            this.fontSizeText.value = '';
            this.fontStyleText.value = '';
            this.strikethroughBox.checked = false;
            this.doublestrikethrough.checked = false;
            this.superscript.checked = false;
            this.subscript.checked = false;
            this.allcaps.checked = false;
            this.bold = undefined;
            this.italic = undefined;
            this.underline = undefined;
            this.strikethrough = undefined;
            this.baselineAlignment = undefined;
            this.fontColor = undefined;
            this.fontSize = undefined;
            this.fontFamily = undefined;
        };
        FontDialog.prototype.destroy = function () {
            this.documentHelper = undefined;
            if (this.characterFormat) {
                this.characterFormat.destroy();
                this.characterFormat = undefined;
            }
            if (!ej2_base_1.isNullOrUndefined(this.target)) {
                if (this.target.parentElement) {
                    this.target.parentElement.removeChild(this.target);
                }
                for (var m = 0; m < this.target.childNodes.length; m++) {
                    this.target.removeChild(this.target.childNodes[m]);
                    m--;
                }
                this.target = undefined;
            }
            this.removeElements();
            if (this.fontNameList) {
                this.fontNameList.destroy();
            }
            this.fontNameList = undefined;
            if (this.fontStyleText) {
                this.fontStyleText.destroy();
            }
            this.fontStyleText = undefined;
            if (this.fontSizeText) {
                this.fontSizeText.destroy();
            }
            this.fontSizeText = undefined;
            if (this.colorPicker) {
                this.colorPicker.destroy();
            }
            this.colorPicker = undefined;
            if (this.underlineDrop) {
                this.underlineDrop.destroy();
            }
            this.underlineDrop = undefined;
            if (this.strikethroughBox) {
                this.strikethroughBox.destroy();
            }
            this.strikethroughBox = undefined;
            if (this.doublestrikethrough) {
                this.doublestrikethrough.destroy();
            }
            this.doublestrikethrough = undefined;
            if (this.superscript) {
                this.superscript.destroy();
            }
            this.superscript = undefined;
            if (this.subscript) {
                this.subscript.destroy();
            }
            this.subscript = undefined;
            if (this.allcaps) {
                this.allcaps.destroy();
            }
            this.allcaps = undefined;
        };
        FontDialog.prototype.removeElements = function () {
            if (this.effectLabel) {
                this.effectLabel.remove();
                this.effectLabel = undefined;
            }
            if (this.strikeThroughElement) {
                this.strikeThroughElement.remove();
                this.strikeThroughElement = undefined;
            }
            if (this.superScriptElement) {
                this.superScriptElement.remove();
                this.superScriptElement = undefined;
            }
            if (this.subScriptElement) {
                this.subScriptElement.remove();
                this.subScriptElement = undefined;
            }
            if (this.doubleStrikeThroughElement) {
                this.doubleStrikeThroughElement.remove();
                this.doubleStrikeThroughElement = undefined;
            }
            if (this.allCapsElement) {
                this.allCapsElement.remove();
                this.allCapsElement = undefined;
            }
            if (this.fontEffectSubDiv1) {
                this.fontEffectSubDiv1.remove();
                this.fontEffectSubDiv1 = undefined;
            }
            if (this.fontDiv) {
                this.fontDiv.remove();
                this.fontDiv = undefined;
            }
            if (this.colorDiv) {
                this.colorDiv.remove();
                this.colorDiv = undefined;
            }
            if (this.fontColorLabel) {
                this.fontColorLabel.remove();
                this.fontColorLabel = undefined;
            }
            if (this.fontColorElement) {
                this.fontColorElement.remove();
                this.fontColorElement = undefined;
            }
            if (this.fontEffectsDiv) {
                this.fontEffectsDiv.remove();
                this.fontEffectsDiv = undefined;
            }
            if (this.effectsProperties) {
                this.effectsProperties.remove();
                this.effectsProperties = undefined;
            }
            if (this.fontEffectSubDiv2) {
                this.fontEffectSubDiv2.remove();
                this.fontEffectSubDiv2 = undefined;
            }
            if (this.checkBoxDiv) {
                this.checkBoxDiv.remove();
                this.checkBoxDiv = undefined;
            }
            if (this.fontEffectSubDiv3) {
                this.fontEffectSubDiv3.remove();
                this.fontEffectSubDiv3 = undefined;
            }
            if (this.getSizeDiv) {
                this.getSizeDiv.remove();
                this.getSizeDiv = undefined;
            }
            if (this.sizeSubDiv1) {
                this.sizeSubDiv1.remove();
                this.sizeSubDiv1 = undefined;
            }
            if (this.sizeSubDiv2) {
                this.sizeSubDiv2.remove();
                this.sizeSubDiv2 = undefined;
            }
            if (this.getFontSize) {
                this.getFontSize.remove();
                this.getFontSize = undefined;
            }
            if (this.underlineElement) {
                this.underlineElement.remove();
                this.underlineElement = undefined;
            }
            if (this.fontNameValues) {
                this.fontNameValues.remove();
                this.fontNameValues = undefined;
            }
            if (this.fontSubDiv2) {
                this.fontSubDiv2.remove();
                this.fontSubDiv2 = undefined;
            }
            if (this.fontStyleValues) {
                this.fontStyleValues.remove();
                this.fontStyleValues = undefined;
            }
            if (this.fontSubDiv1) {
                this.fontSubDiv1.remove();
                this.fontSubDiv1 = undefined;
            }
        };
        return FontDialog;
    }());
    exports.FontDialog = FontDialog;
});