el-header-and-footer 0.0.31 → 0.0.33
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.
- package/esm2020/lib/el-header-and-footer.component.mjs +45 -13
- package/fesm2015/el-header-and-footer.mjs +44 -12
- package/fesm2015/el-header-and-footer.mjs.map +1 -1
- package/fesm2020/el-header-and-footer.mjs +44 -12
- package/fesm2020/el-header-and-footer.mjs.map +1 -1
- package/lib/el-header-and-footer.component.d.ts +4 -2
- package/package.json +1 -1
|
@@ -25,11 +25,12 @@ 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) {
|
|
28
|
+
constructor(router, route, renderer, sanitizer, cdr) {
|
|
29
29
|
this.router = router;
|
|
30
30
|
this.route = route;
|
|
31
31
|
this.renderer = renderer;
|
|
32
32
|
this.sanitizer = sanitizer;
|
|
33
|
+
this.cdr = cdr;
|
|
33
34
|
this.editorId = '';
|
|
34
35
|
this.editorText = '';
|
|
35
36
|
this.editorFrom = '';
|
|
@@ -921,20 +922,51 @@ class ElHeaderAndFooterComponent {
|
|
|
921
922
|
inputElement.click();
|
|
922
923
|
}
|
|
923
924
|
}
|
|
925
|
+
// setCanvasBackgroundColor(event: any, editorId: string): void {
|
|
926
|
+
// this.CanvasColor = event.color.hex;
|
|
927
|
+
// this.cdr.detectChanges();
|
|
928
|
+
// const editor = document.getElementById(editorId);
|
|
929
|
+
// if (editor) {
|
|
930
|
+
// let color = '';
|
|
931
|
+
// // editor.style.backgroundColor = this.themeModeBgClr()
|
|
932
|
+
// color = event.color.hex || event
|
|
933
|
+
// editor.style.backgroundColor = color;
|
|
934
|
+
// document.execCommand('backColor', false, color)
|
|
935
|
+
// this.mainCanvas()
|
|
936
|
+
// // this.init_Func(`<div style="background-color: ${color};">${this.editorText}</div>`);
|
|
937
|
+
// if (this.dropdown) {
|
|
938
|
+
// this.dropdown.close();
|
|
939
|
+
// }
|
|
940
|
+
// }
|
|
941
|
+
// }
|
|
924
942
|
setCanvasBackgroundColor(event, editorId) {
|
|
925
|
-
this.CanvasColor = event.color.hex;
|
|
943
|
+
this.CanvasColor = event.color.hex; // Save the newly selected color
|
|
926
944
|
const editor = document.getElementById(editorId);
|
|
927
945
|
if (editor) {
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
editor.
|
|
932
|
-
|
|
933
|
-
this.
|
|
934
|
-
|
|
946
|
+
// Update the editor's background color dynamically
|
|
947
|
+
editor.style.backgroundColor = this.CanvasColor;
|
|
948
|
+
// Update the inner HTML to replace the old color with the new color
|
|
949
|
+
const updatedContent = this.replaceBackgroundColor(editor.innerHTML, this.CanvasColor);
|
|
950
|
+
// Update the editor text
|
|
951
|
+
this.editorText = updatedContent;
|
|
952
|
+
this.onChange(this.editorText);
|
|
953
|
+
this.editorTextChange.emit(this.editorText);
|
|
935
954
|
if (this.dropdown) {
|
|
936
|
-
this.dropdown.close();
|
|
955
|
+
this.dropdown.close(); // Close the dropdown menu
|
|
937
956
|
}
|
|
957
|
+
console.log('Updated content with new background color:', this.editorText);
|
|
958
|
+
}
|
|
959
|
+
}
|
|
960
|
+
replaceBackgroundColor(content, newColor) {
|
|
961
|
+
// Regular expression to find an existing background-color style
|
|
962
|
+
const bgColorRegex = /background-color:\s*#[0-9a-fA-F]{6}|rgba?\([^\)]+\)/;
|
|
963
|
+
if (bgColorRegex.test(content)) {
|
|
964
|
+
// Replace the old color with the new one
|
|
965
|
+
return content.replace(bgColorRegex, `background-color: ${newColor}`);
|
|
966
|
+
}
|
|
967
|
+
else {
|
|
968
|
+
// If no background color is found, add the new background color
|
|
969
|
+
return `<div style="background-color: ${newColor};">${content}</div>`;
|
|
938
970
|
}
|
|
939
971
|
}
|
|
940
972
|
getToday() {
|
|
@@ -1123,7 +1155,7 @@ class ElHeaderAndFooterComponent {
|
|
|
1123
1155
|
}
|
|
1124
1156
|
}
|
|
1125
1157
|
}
|
|
1126
|
-
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 });
|
|
1158
|
+
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 });
|
|
1127
1159
|
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: [{
|
|
1128
1160
|
provide: NG_VALUE_ACCESSOR,
|
|
1129
1161
|
useExisting: forwardRef(() => ElHeaderAndFooterComponent),
|
|
@@ -1136,7 +1168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
|
|
|
1136
1168
|
useExisting: forwardRef(() => ElHeaderAndFooterComponent),
|
|
1137
1169
|
multi: true
|
|
1138
1170
|
}], 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"] }]
|
|
1139
|
-
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { dropdown: [{
|
|
1171
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dropdown: [{
|
|
1140
1172
|
type: ViewChild,
|
|
1141
1173
|
args: [NgbDropdown, { static: true }]
|
|
1142
1174
|
}], editorId: [{
|