el-text-editor 0.0.34 → 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/fesm2015/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;
@@ -1307,14 +1325,14 @@ ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
1307
1325
  provide: NG_VALUE_ACCESSOR,
1308
1326
  useExisting: forwardRef(() => ElTextEditorComponent),
1309
1327
  multi: true
1310
- }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" [ngClass]=\"{'fullscreen-editor': IsOpen}\">\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], pipes: { "titlecase": i3.TitleCasePipe } });
1328
+ }], 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 } });
1311
1329
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorComponent, decorators: [{
1312
1330
  type: Component,
1313
1331
  args: [{ selector: 'text-editor', providers: [{
1314
1332
  provide: NG_VALUE_ACCESSOR,
1315
1333
  useExisting: forwardRef(() => ElTextEditorComponent),
1316
1334
  multi: true
1317
- }], template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" [ngClass]=\"{'fullscreen-editor': IsOpen}\">\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"] }]
1335
+ }], 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"] }]
1318
1336
  }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { editorText: [{
1319
1337
  type: Input
1320
1338
  }], editorFrom: [{
@@ -1347,6 +1365,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
1347
1365
  type: Output
1348
1366
  }], value: [{
1349
1367
  type: Input
1368
+ }], TextEditor: [{
1369
+ type: ViewChild,
1370
+ args: ['textEditor']
1371
+ }], fullscreen: [{
1372
+ type: ViewChild,
1373
+ args: ['fullscreen']
1350
1374
  }] } });
1351
1375
 
1352
1376
  class ElTextEditorModule {
@@ -1357,14 +1381,16 @@ ElTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
1357
1381
  ReactiveFormsModule,
1358
1382
  NgbDropdownModule,
1359
1383
  ColorSketchModule,
1360
- ColorPickerModule], exports: [ElTextEditorComponent] });
1384
+ ColorPickerModule,
1385
+ NgxFullscreenModule], exports: [ElTextEditorComponent] });
1361
1386
  ElTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorModule, imports: [[
1362
1387
  CommonModule,
1363
1388
  FormsModule,
1364
1389
  ReactiveFormsModule,
1365
1390
  NgbDropdownModule,
1366
1391
  ColorSketchModule,
1367
- ColorPickerModule
1392
+ ColorPickerModule,
1393
+ NgxFullscreenModule,
1368
1394
  ]] });
1369
1395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorModule, decorators: [{
1370
1396
  type: NgModule,
@@ -1378,7 +1404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
1378
1404
  ReactiveFormsModule,
1379
1405
  NgbDropdownModule,
1380
1406
  ColorSketchModule,
1381
- ColorPickerModule
1407
+ ColorPickerModule,
1408
+ NgxFullscreenModule,
1382
1409
  ],
1383
1410
  exports: [
1384
1411
  ElTextEditorComponent