el-text-editor 0.0.33 → 0.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/lib/el-text-editor.component.mjs +30 -7
  2. package/esm2020/lib/el-text-editor.module.mjs +8 -4
  3. package/fesm2015/el-text-editor.mjs +36 -9
  4. package/fesm2015/el-text-editor.mjs.map +1 -1
  5. package/fesm2020/el-text-editor.mjs +36 -9
  6. package/fesm2020/el-text-editor.mjs.map +1 -1
  7. package/lib/el-text-editor.component.d.ts +4 -1
  8. package/lib/el-text-editor.module.d.ts +2 -1
  9. package/package.json +1 -1
package/fesm2020/el-text-editor.mjs CHANGED
@@ -1,12 +1,14 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, EventEmitter, forwardRef, Component, Input, Output, NgModule } from '@angular/core';
3
- import * as i5 from '@angular/forms';
2
+ import { Injectable, EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
3
+ import * as i6 from '@angular/forms';
4
4
  import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import * as i1 from '@angular/router';
6
6
  import * as i2 from '@angular/platform-browser';
7
- import * as i3 from '@angular/common';
7
+ import * as i3 from '@ultimate/ngx-fullscreen';
8
+ import { NgxFullscreenModule } from '@ultimate/ngx-fullscreen';
9
+ import * as i4 from '@angular/common';
8
10
  import { CommonModule } from '@angular/common';
9
- import * as i4 from '@ng-bootstrap/ng-bootstrap';
11
+ import * as i5 from '@ng-bootstrap/ng-bootstrap';
10
12
  import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
11
13
  import { ColorSketchModule } from 'ngx-color/sketch';
12
14
  import { ColorPickerModule } from 'ngx-color-picker';
@@ -164,7 +166,23 @@ class ElTextEditorComponent {
164
166
  toggleFullscreen1() {
165
167
  this.IsOpen = !this.IsOpen;
166
168
  this.isOpen.emit(this.IsOpen);
169
+ if (this.IsOpen) {
170
+ this.fullscreen.enter(this.TextEditor.nativeElement);
171
+ }
172
+ else {
173
+ this.fullscreen.exit();
174
+ }
167
175
  }
176
+ // enterFullscreenVideo() {
177
+ // console.log('event:', event);
178
+ // const fullscreen = event;
179
+ // this.isOpen = event;
180
+ // if (fullscreen) {
181
+ // this.fullscreen.enter(this.TextEditor.nativeElement);
182
+ // } else {
183
+ // this.fullscreen.exit()
184
+ // }
185
+ // }
168
186
  writeValue(value) {
169
187
  if (value !== undefined) {
170
188
  this.editorText = value;
@@ -1302,14 +1320,14 @@ ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
1302
1320
  provide: NG_VALUE_ACCESSOR,
1303
1321
  useExisting: forwardRef(() => ElTextEditorComponent),
1304
1322
  multi: true
1305
- }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" >\r\n <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n [ngStyle]=\"disableToolbar ? { 'pointer-events': 'none' } : {}\" aria-label=\"Toolbar with button groups\" style=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\">\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select> -->\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n titlecase}}</span>\r\n <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n <span>{{ font }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-0\" style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n <i class=\"mdi mdi-undo\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n <i class=\"mdi mdi-redo\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button> -->\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n style=\" width: fit-content !important;\">\r\n <i class=\"mdi mdi-close-circle\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n <ng-container *ngIf=\"isOpen; else fullscreenIcon\">\r\n <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n </ng-container>\r\n <ng-template #fullscreenIcon>\r\n <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n </ng-template>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n class=\"mdi mdi-format-quote-close\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n class=\"mdi mdi-code-tags\"></i></button>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <!-- <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-color-fill\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n (change)=\"logEvent($event, 'change')\"\r\n (input)=\"logEvent($event, 'input')\"\r\n >\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n [style]=\"{color: color}\"></i>\r\n <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n </div> -->\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n </div> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n\r\n\r\n <!-- </div> -->\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <i class=\"mdi mdi-format-header-1\"></i>\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n class=\"mdi mdi-chevron-down text-dark\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n class=\"mdi mdi-format-superscript\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n class=\"mdi mdi-format-subscript\"></i></button> -->\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n class=\"mdi mdi-format-clear\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n </div> -->\r\n <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle (click)=\"addTable()\">\r\n <i class=\"mdi mdi-table\"></i>\r\n </button>\r\n \r\n <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n </button>\r\n <div class=\"dropdown-divider\"></div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"tableWidth\">Table Width</label>\r\n <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellWidth\">Cell Width</label>\r\n <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellHeight\">Cell Height</label>\r\n <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n placeholder=\"Height\">\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n [style.min-height]=\"IsOpen ? '85vh !important' : '405px !important'\"\r\n (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (click)=\"checkTableSelection($event)\">\r\n </div> -->\r\n <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n [ngClass]=\"{'fullscreen-editor': IsOpen}\" style=\"position: relative !important;\r\n border-bottom-left-radius: 20px !important;\r\n border-bottom-right-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\"\r\n [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\"\r\n [style.min-height]=\"IsOpen ? '85vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n </div>\r\n\r\n <table *ngIf=\"parsedTable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of parsedTable.rows\">\r\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{overflow-y:auto}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "titlecase": i3.TitleCasePipe } });
1323
+ }], viewQueries: [{ propertyName: "TextEditor", first: true, predicate: ["textEditor"], descendants: true }, { propertyName: "fullscreen", first: true, predicate: ["fullscreen"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" #fullscreen=\"ngxFullscreen\"\r\n #textEditor\r\n ngxFullscreen>\r\n <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n [ngStyle]=\"disableToolbar ? { 'pointer-events': 'none' } : {}\" aria-label=\"Toolbar with button groups\" style=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\">\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select> -->\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n titlecase}}</span>\r\n <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n <span>{{ font }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-0\" style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n <i class=\"mdi mdi-undo\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n <i class=\"mdi mdi-redo\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button> -->\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n style=\" width: fit-content !important;\">\r\n <i class=\"mdi mdi-close-circle\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n <ng-container *ngIf=\"isOpen; else fullscreenIcon\">\r\n <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n </ng-container>\r\n <ng-template #fullscreenIcon>\r\n <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n </ng-template>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n class=\"mdi mdi-format-quote-close\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n class=\"mdi mdi-code-tags\"></i></button>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <!-- <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-color-fill\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n (change)=\"logEvent($event, 'change')\"\r\n (input)=\"logEvent($event, 'input')\"\r\n >\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n [style]=\"{color: color}\"></i>\r\n <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n </div> -->\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n </div> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n\r\n\r\n <!-- </div> -->\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <i class=\"mdi mdi-format-header-1\"></i>\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n class=\"mdi mdi-chevron-down text-dark\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n class=\"mdi mdi-format-superscript\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n class=\"mdi mdi-format-subscript\"></i></button> -->\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n class=\"mdi mdi-format-clear\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n </div> -->\r\n <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle (click)=\"addTable()\">\r\n <i class=\"mdi mdi-table\"></i>\r\n </button>\r\n \r\n <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n </button>\r\n <div class=\"dropdown-divider\"></div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"tableWidth\">Table Width</label>\r\n <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellWidth\">Cell Width</label>\r\n <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellHeight\">Cell Height</label>\r\n <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n placeholder=\"Height\">\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n [style.min-height]=\"IsOpen ? '85vh !important' : '405px !important'\"\r\n (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (click)=\"checkTableSelection($event)\">\r\n </div> -->\r\n <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;\r\n border-bottom-left-radius: 20px !important;\r\n border-bottom-right-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\"\r\n [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\"\r\n [style.min-height]=\"IsOpen ? '85vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n </div>\r\n\r\n <table *ngIf=\"parsedTable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of parsedTable.rows\">\r\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{overflow-y:auto}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"], directives: [{ type: i3.NgxFullscreenDirective, selector: "[ngxFullscreen]", inputs: ["ngxFullscreen"], outputs: ["transition", "errors"], exportAs: ["ngxFullscreen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "titlecase": i4.TitleCasePipe } });
1306
1324
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorComponent, decorators: [{
1307
1325
  type: Component,
1308
1326
  args: [{ selector: 'text-editor', providers: [{
1309
1327
  provide: NG_VALUE_ACCESSOR,
1310
1328
  useExisting: forwardRef(() => ElTextEditorComponent),
1311
1329
  multi: true
1312
- }], template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" >\r\n <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n [ngStyle]=\"disableToolbar ? { 'pointer-events': 'none' } : {}\" aria-label=\"Toolbar with button groups\" style=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\">\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select> -->\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n titlecase}}</span>\r\n <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n <span>{{ font }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-0\" style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n <i class=\"mdi mdi-undo\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n <i class=\"mdi mdi-redo\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button> -->\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n style=\" width: fit-content !important;\">\r\n <i class=\"mdi mdi-close-circle\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n <ng-container *ngIf=\"isOpen; else fullscreenIcon\">\r\n <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n </ng-container>\r\n <ng-template #fullscreenIcon>\r\n <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n </ng-template>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n class=\"mdi mdi-format-quote-close\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n class=\"mdi mdi-code-tags\"></i></button>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <!-- <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-color-fill\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n (change)=\"logEvent($event, 'change')\"\r\n (input)=\"logEvent($event, 'input')\"\r\n >\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n [style]=\"{color: color}\"></i>\r\n <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n </div> -->\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n </div> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n\r\n\r\n <!-- </div> -->\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <i class=\"mdi mdi-format-header-1\"></i>\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n class=\"mdi mdi-chevron-down text-dark\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n class=\"mdi mdi-format-superscript\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n class=\"mdi mdi-format-subscript\"></i></button> -->\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n class=\"mdi mdi-format-clear\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n </div> -->\r\n <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle (click)=\"addTable()\">\r\n <i class=\"mdi mdi-table\"></i>\r\n </button>\r\n \r\n <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n </button>\r\n <div class=\"dropdown-divider\"></div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"tableWidth\">Table Width</label>\r\n <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellWidth\">Cell Width</label>\r\n <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellHeight\">Cell Height</label>\r\n <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n placeholder=\"Height\">\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n [style.min-height]=\"IsOpen ? '85vh !important' : '405px !important'\"\r\n (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (click)=\"checkTableSelection($event)\">\r\n </div> -->\r\n <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n [ngClass]=\"{'fullscreen-editor': IsOpen}\" style=\"position: relative !important;\r\n border-bottom-left-radius: 20px !important;\r\n border-bottom-right-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\"\r\n [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\"\r\n [style.min-height]=\"IsOpen ? '85vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n </div>\r\n\r\n <table *ngIf=\"parsedTable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of parsedTable.rows\">\r\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{overflow-y:auto}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0}\n"] }]
1330
+ }], template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" #fullscreen=\"ngxFullscreen\"\r\n #textEditor\r\n ngxFullscreen>\r\n <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n [ngStyle]=\"disableToolbar ? { 'pointer-events': 'none' } : {}\" aria-label=\"Toolbar with button groups\" style=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\">\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select> -->\r\n <div ngbDropdown class=\"dropdown\">\r\n <button\r\n class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n titlecase}}</span>\r\n <i class=\"mdi mdi-chevron-down \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n <span>{{ font }}</span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"py-0\" style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n <i class=\"mdi mdi-undo\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n <i class=\"mdi mdi-redo\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button> -->\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n style=\" width: fit-content !important;\">\r\n <i class=\"mdi mdi-close-circle\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n <ng-container *ngIf=\"isOpen; else fullscreenIcon\">\r\n <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n </ng-container>\r\n <ng-template #fullscreenIcon>\r\n <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n </ng-template>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n </select>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold')\">\r\n <i class=\"mdi mdi-format-bold\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n (click)=\"format('italic')\">\r\n <i class=\"mdi mdi-format-italic\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n (click)=\"format('underline')\">\r\n <i class=\"mdi mdi-format-underline\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n (click)=\"format('strikethrough')\">\r\n <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n </button>\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n class=\"mdi mdi-format-quote-close\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n class=\"mdi mdi-code-tags\"></i></button>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n class=\"mdi mdi-format-list-numbered\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n <!-- <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-color-fill\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n (change)=\"logEvent($event, 'change')\"\r\n (input)=\"logEvent($event, 'input')\"\r\n >\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n [style]=\"{color: color}\"></i>\r\n <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n </div> -->\r\n <input type=\"color\" id=\"textColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setTextColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n (click)=\"openColorPicker('textColorPicker')\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n </div> -->\r\n <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n (click)=\"openColorPicker('bgColorPicker')\">\r\n <i class=\"mdi mdi-alpha-a-box\"></i>\r\n </button>\r\n <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n <input type=\"color\" id=\"bgColorPicker\"\r\n style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n (change)=\"setBackgroundColor($event)\">\r\n </div>\r\n\r\n\r\n <!-- </div> -->\r\n </div>\r\n <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n <i class=\"mdi mdi-format-header-1\"></i>\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n <div ngbDropdown class=\"dropdown\">\r\n <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n ngbDropdownToggle>\r\n <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n class=\"mdi mdi-chevron-down text-dark\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n <h1>Heading 1</h1>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n <h2>Heading 2</h2>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n <h3>Heading 3</h3>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n <h4>Heading 4</h4>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n <h5>Heading 5</h5>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n <h6>Heading 6</h6>\r\n </button>\r\n <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n class=\"mdi mdi-format-superscript\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n class=\"mdi mdi-format-subscript\"></i></button> -->\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n (click)=\"format('subscript')\">\r\n <i class=\"mdi mdi-format-subscript\"></i>\r\n </button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n (click)=\"format('superscript')\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-align-left \"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n class=\"mdi mdi-format-align-justify\"></i></button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n class=\"mdi mdi-format-clear\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n class=\"mdi mdi-link-variant\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n class=\"mdi mdi-table\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n style=\"position: absolute;\">Edit Image</button>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n </div> -->\r\n <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle (click)=\"addTable()\">\r\n <i class=\"mdi mdi-table\"></i>\r\n </button>\r\n \r\n <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n </button>\r\n <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n </button>\r\n <div class=\"dropdown-divider\"></div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"tableWidth\">Table Width</label>\r\n <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellWidth\">Cell Width</label>\r\n <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n placeholder=\"Width\">\r\n </div>\r\n <div class=\"dropdown-item\">\r\n <label for=\"cellHeight\">Cell Height</label>\r\n <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n placeholder=\"Height\">\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n [style.min-height]=\"IsOpen ? '85vh !important' : '405px !important'\"\r\n (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n (click)=\"checkTableSelection($event)\">\r\n </div> -->\r\n <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n style=\"position: relative !important;\r\n border-bottom-left-radius: 20px !important;\r\n border-bottom-right-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\"\r\n [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\"\r\n [style.min-height]=\"IsOpen ? '85vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n </div>\r\n\r\n <table *ngIf=\"parsedTable\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of parsedTable.rows\">\r\n <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{overflow-y:auto}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"] }]
1313
1331
  }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { editorText: [{
1314
1332
  type: Input
1315
1333
  }], editorFrom: [{
@@ -1342,6 +1360,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
1342
1360
  type: Output
1343
1361
  }], value: [{
1344
1362
  type: Input
1363
+ }], TextEditor: [{
1364
+ type: ViewChild,
1365
+ args: ['textEditor']
1366
+ }], fullscreen: [{
1367
+ type: ViewChild,
1368
+ args: ['fullscreen']
1345
1369
  }] } });
1346
1370
 
1347
1371
  class ElTextEditorModule {
@@ -1352,14 +1376,16 @@ ElTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
1352
1376
  ReactiveFormsModule,
1353
1377
  NgbDropdownModule,
1354
1378
  ColorSketchModule,
1355
- ColorPickerModule], exports: [ElTextEditorComponent] });
1379
+ ColorPickerModule,
1380
+ NgxFullscreenModule], exports: [ElTextEditorComponent] });
1356
1381
  ElTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorModule, imports: [[
1357
1382
  CommonModule,
1358
1383
  FormsModule,
1359
1384
  ReactiveFormsModule,
1360
1385
  NgbDropdownModule,
1361
1386
  ColorSketchModule,
1362
- ColorPickerModule
1387
+ ColorPickerModule,
1388
+ NgxFullscreenModule,
1363
1389
  ]] });
1364
1390
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorModule, decorators: [{
1365
1391
  type: NgModule,
@@ -1373,7 +1399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
1373
1399
  ReactiveFormsModule,
1374
1400
  NgbDropdownModule,
1375
1401
  ColorSketchModule,
1376
- ColorPickerModule
1402
+ ColorPickerModule,
1403
+ NgxFullscreenModule,
1377
1404
  ],
1378
1405
  exports: [
1379
1406
  ElTextEditorComponent