el-header-and-footer 0.0.39 → 0.0.40

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 (7) hide show
  1. package/esm2020/lib/el-header-and-footer.component.mjs +38 -88
  2. package/fesm2015/el-header-and-footer.mjs +38 -88
  3. package/fesm2015/el-header-and-footer.mjs.map +1 -1
  4. package/fesm2020/el-header-and-footer.mjs +37 -87
  5. package/fesm2020/el-header-and-footer.mjs.map +1 -1
  6. package/lib/el-header-and-footer.component.d.ts +2 -14
  7. package/package.json +1 -1
package/fesm2020/el-header-and-footer.mjs CHANGED
@@ -25,12 +25,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
25
25
  }], ctorParameters: function () { return []; } });
26
26
 
27
27
  class ElHeaderAndFooterComponent {
28
- constructor(router, route, renderer, sanitizer, cdr) {
28
+ constructor(router, route, renderer, sanitizer) {
29
29
  this.router = router;
30
30
  this.route = route;
31
31
  this.renderer = renderer;
32
32
  this.sanitizer = sanitizer;
33
- this.cdr = cdr;
34
33
  this.editorId = '';
35
34
  this.editorText = '';
36
35
  this.editorFrom = '';
@@ -84,8 +83,6 @@ class ElHeaderAndFooterComponent {
84
83
  ngOnChanges(changes) {
85
84
  if (changes['bgColor']) {
86
85
  const event = { color: { hex: this.bgColor } };
87
- this.CanvasColor = this.bgColor;
88
- this.mainCanvas();
89
86
  this.setCanvasBackgroundColor(event, this.editorId);
90
87
  }
91
88
  }
@@ -246,15 +243,23 @@ class ElHeaderAndFooterComponent {
246
243
  setDisabledState(isDisabled) {
247
244
  // Handle the disabled state if necessary
248
245
  }
249
- /**
250
- * new changes 16/01/2025
251
- * nested padding issue
252
- * @param value
253
- */
246
+ // onModelChange(value: any): void {
247
+ // if (value) {
248
+ // const VALUE = value
249
+ // // this.editorText = this.mainCanvas(VALUE);
250
+ // // this.onChange(this.mainCanvas(VALUE));
251
+ // // this.editorTextChange.emit(this.mainCanvas(VALUE));
252
+ // this.editorText = `<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`;
253
+ // this.onChange(`<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`);
254
+ // this.editorTextChange.emit(`<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`);
255
+ // } else {
256
+ // this.selectedImage = null;
257
+ // }
258
+ // }
254
259
  onModelChange(event) {
255
260
  const value = event?.target?.innerHTML || ''; // Get the innerHTML content
256
261
  if (value) {
257
- const canvasHTML = this.mainCanvas(value); // Get the updated content with styles
262
+ const canvasHTML = this.replaceBackgroundColor(value, this.CanvasColor); // Update the background color dynamically
258
263
  // Prevent nested or repeated padding styles
259
264
  const hasPadding = canvasHTML.includes('padding: 10px 60px;');
260
265
  this.editorText = hasPadding
@@ -262,40 +267,12 @@ class ElHeaderAndFooterComponent {
262
267
  : `<div style="padding: 10px 60px; background-color: ${this.CanvasColor};">${value}</div>`;
263
268
  this.onChange(this.editorText);
264
269
  this.editorTextChange.emit(this.editorText);
265
- console.log('Updated editorText:', this.editorText);
270
+ console.log('Updated editorText on change:', this.editorText);
266
271
  }
267
272
  else {
268
273
  this.selectedImage = null;
269
274
  }
270
275
  }
271
- // onModelChange(value: any): void {
272
- // if (value) {
273
- // const VALUE = value;
274
- // const canvasHTML = this.mainCanvas(VALUE); // Get the main canvas content
275
- // // Ensure padding is applied only once
276
- // this.editorText = canvasHTML.includes('padding:')
277
- // ? canvasHTML
278
- // : `<div style="padding: 10px 60px;">${canvasHTML}</div>`;
279
- // this.onChange(this.editorText);
280
- // this.editorTextChange.emit(this.editorText);
281
- // console.log('this.editorText =>> 321 >> ', this.editorText)
282
- // } else {
283
- // this.selectedImage = null;
284
- // }
285
- // }
286
- // onModelChange(value: any): void {
287
- // if (value) {
288
- // const VALUE = value
289
- // // this.editorText = this.mainCanvas(VALUE);
290
- // // this.onChange(this.mainCanvas(VALUE));
291
- // // this.editorTextChange.emit(this.mainCanvas(VALUE));
292
- // this.editorText = `<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`;
293
- // this.onChange(`<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`);
294
- // this.editorTextChange.emit(`<div style="padding: 10px 60px;">${this.mainCanvas(VALUE)}</div>`);
295
- // } else {
296
- // this.selectedImage = null;
297
- // }
298
- // }
299
276
  applyImageStyles(content) {
300
277
  const div = document.createElement('div');
301
278
  div.innerHTML = content;
@@ -317,7 +294,6 @@ class ElHeaderAndFooterComponent {
317
294
  if (html) {
318
295
  let editor = document.getElementById(this.editorId);
319
296
  if (editor) {
320
- editor.style.backgroundColor = this.themeModeBgClr();
321
297
  editor.focus();
322
298
  this.setEditorContent(html);
323
299
  // Set up a MutationObserver to handle content changes
@@ -920,14 +896,12 @@ class ElHeaderAndFooterComponent {
920
896
  }
921
897
  // setCanvasBackgroundColor(event: any, editorId: string): void {
922
898
  // this.CanvasColor = event.color.hex;
923
- // this.cdr.detectChanges();
924
899
  // const editor = document.getElementById(editorId);
925
900
  // if (editor) {
926
901
  // let color = '';
927
- // // editor.style.backgroundColor = this.themeModeBgClr()
902
+ // editor.style.backgroundColor = this.themeModeBgClr()
928
903
  // color = event.color.hex || event
929
904
  // editor.style.backgroundColor = color;
930
- // document.execCommand('backColor', false, color)
931
905
  // this.mainCanvas()
932
906
  // // this.init_Func(`<div style="background-color: ${color};">${this.editorText}</div>`);
933
907
  // if (this.dropdown) {
@@ -936,34 +910,33 @@ class ElHeaderAndFooterComponent {
936
910
  // }
937
911
  // }
938
912
  setCanvasBackgroundColor(event, editorId) {
939
- this.CanvasColor = event.color.hex; // Save the new background color
913
+ this.CanvasColor = event.color.hex; // Save the newly selected color
940
914
  const editor = document.getElementById(editorId);
941
915
  if (editor) {
942
- const currentContent = editor.innerHTML; // Get the current HTML content
943
- const updatedContent = this.replaceBackgroundColor(currentContent, this.CanvasColor); // Update background color
944
- // Set the updated content back to the editor
945
- editor.innerHTML = updatedContent;
946
- // Update the editorText and emit changes
916
+ // Update the editor's background color dynamically
917
+ editor.style.backgroundColor = this.CanvasColor;
918
+ // Update the inner HTML to replace the old color with the new color
919
+ const updatedContent = this.replaceBackgroundColor(editor.innerHTML, this.CanvasColor);
920
+ // Update the editor text
947
921
  this.editorText = updatedContent;
948
922
  this.onChange(this.editorText);
949
923
  this.editorTextChange.emit(this.editorText);
950
924
  if (this.dropdown) {
951
925
  this.dropdown.close(); // Close the dropdown menu
952
926
  }
953
- console.log('Updated editor content:', this.editorText);
927
+ console.log('Updated content with new background color:', this.editorText);
954
928
  }
955
929
  }
956
930
  replaceBackgroundColor(content, newColor) {
957
- // Regular expression to find the existing background-color style
958
- const bgColorRegex = /background-color:\s*#[0-9a-fA-F]{6}|background-color:\s*rgba?\([^\)]+\)/;
931
+ // Regular expression to find an existing background-color style
932
+ const bgColorRegex = /background-color:\s*#[0-9a-fA-F]{6}|rgba?\([^\)]+\)/;
959
933
  if (bgColorRegex.test(content)) {
960
- // Replace the old background color with the new one
934
+ // Replace the old color with the new one
961
935
  return content.replace(bgColorRegex, `background-color: ${newColor}`);
962
936
  }
963
937
  else {
964
- // If no background color exists, wrap content with a new div
965
- const innerText = content.replace(/<[^>]*>/g, ''); // Extract inner text safely
966
- return `<div style="background-color: ${newColor}; padding: 10px 60px;">${innerText}</div>`;
938
+ // If no background color is found, add the new background color
939
+ return `<div style="background-color: ${newColor};">${content}</div>`;
967
940
  }
968
941
  }
969
942
  getToday() {
@@ -1061,34 +1034,6 @@ class ElHeaderAndFooterComponent {
1061
1034
  }
1062
1035
  }
1063
1036
  }
1064
- /**
1065
- * new changes 16/01/2025
1066
- * nested padding issue solve
1067
- * @param data
1068
- * @returns
1069
- */
1070
- mainCanvas(data = '') {
1071
- console.log('data mainCanvas=> ', data);
1072
- let editor = document.getElementById(this.editorId);
1073
- const BG = editor?.style?.backgroundColor || this.CanvasColor || '#ffffff'; // Ensure a default background color
1074
- return `<div style="background-color: ${BG}; padding: 10px 60px;">${data}</div>`; // Apply styles in one place
1075
- }
1076
- // removeBackground(content: string): string {
1077
- // return content.replace(/background-color: (.*?);/g, '');
1078
- // }
1079
- // mainCanvas(data?: any) {
1080
- // let BG = this.CanvasColor;
1081
- // const editor = document.getElementById(this.editorId);
1082
- // if (editor) {
1083
- // console.log('editor.style.backgroundColor => ', editor.style.backgroundColor)
1084
- // BG = editor.style.backgroundColor
1085
- // editor.focus();
1086
- // console.log('BG.BG.BG => ', BG)
1087
- // return `<div style="background-color: ${BG};">${data}</div>`; // Ensure the background-color style is closed properly
1088
- // } else {
1089
- // return `<div style="background-color: ${BG};">${data}</div>`; // Same here
1090
- // }
1091
- // }
1092
1037
  // mainCanvas(data?: any) {
1093
1038
  // let BG = ''
1094
1039
  // const editor = document.getElementById(this.editorId);
@@ -1098,13 +1043,18 @@ class ElHeaderAndFooterComponent {
1098
1043
  // BG = 'rgb(255, 255, 255)'
1099
1044
  // } else {
1100
1045
  // BG = editor.style.backgroundColor;
1101
- // }
1046
+ // }
1102
1047
  // return `${data}`
1103
1048
  // }
1104
1049
  // else {
1105
1050
  // return `<div style="background-color: ${BG}>${data}</div>`
1106
1051
  // }
1107
1052
  // }
1053
+ mainCanvas(data = '') {
1054
+ const editor = document.getElementById(this.editorId);
1055
+ const BG = editor?.style?.backgroundColor || this.CanvasColor || '#ffffff'; // Get the current or default color
1056
+ return `<div style="background-color: ${BG}; padding: 10px 60px;">${data}</div>`; // Apply the updated background color
1057
+ }
1108
1058
  themeMode() {
1109
1059
  const clrMode = document.body.getAttribute('data-layout-color');
1110
1060
  if (clrMode == 'dark') {
@@ -1151,7 +1101,7 @@ class ElHeaderAndFooterComponent {
1151
1101
  }
1152
1102
  }
1153
1103
  }
1154
- ElHeaderAndFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ElHeaderAndFooterComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1104
+ ElHeaderAndFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ElHeaderAndFooterComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
1155
1105
  ElHeaderAndFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ElHeaderAndFooterComponent, selector: "el-header-and-footer", inputs: { editorId: "editorId", editorText: "editorText", editorFrom: "editorFrom", clear: "clear", editorAction: "editorAction", style: "style", bgColor: "bgColor", toolbarMode: "toolbarMode", value: "value" }, outputs: { editorTextChange: "editorTextChange", editorActionResponse: "editorActionResponse", editorTextClear: "editorTextClear" }, providers: [{
1156
1106
  provide: NG_VALUE_ACCESSOR,
1157
1107
  useExisting: forwardRef(() => ElHeaderAndFooterComponent),
@@ -1164,7 +1114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
1164
1114
  useExisting: forwardRef(() => ElHeaderAndFooterComponent),
1165
1115
  multi: true
1166
1116
  }], template: "<div class=\"container els-text-editor px-0\" style=\"border-radius: 20px !important;\">\r\n <div class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [id]=\"editorId+'toolbar'\"\r\n [style.background]=\"themeModeBgClr()\" 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 class=\"dropdown\">\r\n <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff; width: 150px; border: 2px solid #7D6D6D !important;\" (change)=\"onFormatChange($event)\">\r\n <option [value]=\"'<h1>'\">Heading 1</option>v\r\n <option [value]=\"'<h2>'\">Heading 2</option>\r\n <option [value]=\"'<h3>'\">Heading 3</option>\r\n <option [value]=\"'<h4>'\">Heading 4</option>\r\n <option [value]=\"'<h5>'\">Heading 5</option>\r\n <option [value]=\"'<h6>'\">Heading 6</option>\r\n <option selected [value]=\"'<p>'\">Normal</option>\r\n </select>\r\n </div> -->\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.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', editorId, '<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', editorId, '<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', editorId, '<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', editorId, '<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', editorId, '<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', editorId, '<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', editorId, '<p>')\">\r\n <p>Normal</p>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div ngbDropdown class=\"dropdown\">\r\n <button 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\" [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\" (click)=\"changeFont(font)\"\r\n [style.color]=\"themeModeClr()\">\r\n <span>{{ font }}</span>\r\n </button>\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 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\" [style.border]=\"themeMode()\">\r\n <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\" (click)=\"changeFont(font)\"\r\n [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 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n <button type=\"button\" class=\"btn btn-sm els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n (click)=\"format('bold', editorId)\">\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', editorId)\">\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', editorId)\">\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', editorId)\">\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 ngbDropdown class=\"ql-align\">\r\n <button type=\"button\"\r\n class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-format-color-text icon-with-underline\"\r\n [style.color]=\"selectedTextColor\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n (onChangeComplete)=\"setTextColor($event, editorId)\"></color-sketch>\r\n </div>\r\n </div>\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 ngbDropdown class=\"ql-align\">\r\n <button type=\"button\"\r\n class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n <i class=\"mdi mdi-alpha-a-box\" [style.color]=\"backgroundColor\"></i>\r\n </button>\r\n <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n (onChangeComplete)=\"setBackgroundColor($event, editorId)\"></color-sketch>\r\n </div>\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\"\r\n (click)=\"format('insertOrderedList', editorId)\"><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', editorId)\"><i\r\n 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\" style=\"color: #7A7982;\"\r\n (click)=\"format('justifyLeft', editorId)\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n (click)=\"format('justifyCenter', editorId)\"><i\r\n class=\"mdi mdi-format-align-center\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n (click)=\"format('justifyRight', editorId)\"><i\r\n class=\"mdi mdi-format-align-right\"></i></button>\r\n <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n (click)=\"format('justifyFull', editorId)\"><i\r\n 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', editorId)\">\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', editorId)\">\r\n <i class=\"mdi mdi-format-superscript\"></i>\r\n </button>\r\n\r\n </div>\r\n <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n\r\n <div ngbDropdown class=\"ql-align\">\r\n <button type=\"button\" class=\"btn btn-outline-primary arrow-none els-toolbar-button border-none p-0\"\r\n id=\"dropdownBasic1\" 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: 200px;\">\r\n <color-sketch color=\"#fff\"\r\n (onChangeComplete)=\"setCanvasBackgroundColor($event, editorId)\"></color-sketch>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"btn-group els-button-group-2 mr-3\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white px-1\" style=\"height: 24px;\" (click)=\"getToday()\">Date</button>\r\n </div>\r\n <div class=\"btn-group els-button-group-2\" role=\"group\" aria-label=\"Table Options\">\r\n <button class=\"btn btn-white px-1\" style=\"height: 24px;\" (click)=\"insertPageNumber()\">Page\r\n No</button>\r\n\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(editorId)\"><i\r\n class=\"mdi mdi-image\"></i></button>\r\n <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n\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 <!-- <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\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 <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\">\r\n <i class=\"mdi mdi-close-circle\"></i>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n\r\n <div contenteditable=\"true\" [id]=\"editorId\" class=\"els-border p-3\" #editor\r\n style=\"position: relative !important; height: 130px; max-width: 100%; overflow: hidden; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\"\r\n [style.border-top]=\"themeModeBorderTop()\"\r\n [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n contenteditable=\"true\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n </div>\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</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{min-height:125px;max-height:125px;overflow-y:auto}#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}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;color:#fff}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:100%;padding:2px 5px 2px 8px;position:relative;width:100%;border:none;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#353343}.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}.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}\n"] }]
1167
- }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
1117
+ }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { dropdown: [{
1168
1118
  type: ViewChild,
1169
1119
  args: [NgbDropdown, { static: true }]
1170
1120
  }], editorId: [{