rapid-text-editor 1.0.21 → 1.0.22
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/rapid-text-editor.component.mjs +35 -8
- package/fesm2015/rapid-text-editor.mjs +34 -7
- package/fesm2015/rapid-text-editor.mjs.map +1 -1
- package/fesm2020/rapid-text-editor.mjs +34 -7
- package/fesm2020/rapid-text-editor.mjs.map +1 -1
- package/lib/rapid-text-editor.component.d.ts +23 -1
- package/package.json +11 -3
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i4 from '@angular/forms';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@angular/material/dialog';
|
|
6
6
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
7
7
|
import * as i2 from 'angular2-signaturepad';
|
|
8
8
|
import { SignaturePadModule } from 'angular2-signaturepad';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/common';
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
11
|
import { MatIconModule } from '@angular/material/icon';
|
|
12
12
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -30,6 +30,26 @@ class RapidTextEditorComponent {
|
|
|
30
30
|
this.renderer = renderer;
|
|
31
31
|
this.elRef = elRef;
|
|
32
32
|
this._change = _change;
|
|
33
|
+
this.defaultEditorOptions = {
|
|
34
|
+
options: {
|
|
35
|
+
textFormat: true,
|
|
36
|
+
fontSize: true,
|
|
37
|
+
bold: true,
|
|
38
|
+
italic: true,
|
|
39
|
+
underline: true,
|
|
40
|
+
strikethrough: true,
|
|
41
|
+
alignLeft: true,
|
|
42
|
+
alignRight: true,
|
|
43
|
+
alignCenter: true,
|
|
44
|
+
justify: true,
|
|
45
|
+
bulletList: true,
|
|
46
|
+
numberedList: true,
|
|
47
|
+
image: true,
|
|
48
|
+
table: true,
|
|
49
|
+
tableHeader: true,
|
|
50
|
+
signature: true
|
|
51
|
+
}
|
|
52
|
+
};
|
|
33
53
|
this.contentCapture = false;
|
|
34
54
|
this.height = "auto";
|
|
35
55
|
this.width = "auto";
|
|
@@ -65,6 +85,9 @@ class RapidTextEditorComponent {
|
|
|
65
85
|
else {
|
|
66
86
|
console.log('Content capture is disabled.');
|
|
67
87
|
}
|
|
88
|
+
if (!this.editorOptions) {
|
|
89
|
+
this.editorOptions = this.defaultEditorOptions;
|
|
90
|
+
}
|
|
68
91
|
// this.initializeEditorContent('');
|
|
69
92
|
// this.ensureParagraphAndFocus();
|
|
70
93
|
}
|
|
@@ -692,8 +715,9 @@ class RapidTextEditorComponent {
|
|
|
692
715
|
this.insertMarker();
|
|
693
716
|
const dialogRef = this.dialog.open(this.signatureDialog, {
|
|
694
717
|
position: {
|
|
695
|
-
top: `${event.clientY}px`,
|
|
696
|
-
left: `${event.clientX}px`,
|
|
718
|
+
// top: `${event.clientY}px`,
|
|
719
|
+
// left: `${event.clientX}px`,
|
|
720
|
+
top: '30px'
|
|
697
721
|
},
|
|
698
722
|
disableClose: true,
|
|
699
723
|
panelClass: 'custom-dialog-container'
|
|
@@ -859,13 +883,13 @@ class RapidTextEditorComponent {
|
|
|
859
883
|
}
|
|
860
884
|
}
|
|
861
885
|
RapidTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, deps: [{ token: i1.MatDialog }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
862
|
-
RapidTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RapidTextEditorComponent, selector: "rapid-text-editor", inputs: { contentCapture: "contentCapture", height: "height", width: "width", iconColor: "iconColor" }, outputs: { contentChange: "contentChange" }, providers: [
|
|
886
|
+
RapidTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RapidTextEditorComponent, selector: "rapid-text-editor", inputs: { contentCapture: "contentCapture", height: "height", width: "width", iconColor: "iconColor", editorOptions: "editorOptions" }, outputs: { contentChange: "contentChange" }, providers: [
|
|
863
887
|
{
|
|
864
888
|
provide: NG_VALUE_ACCESSOR,
|
|
865
889
|
useExisting: forwardRef(() => RapidTextEditorComponent),
|
|
866
890
|
multi: true
|
|
867
891
|
}
|
|
868
|
-
], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }, { propertyName: "signatureDialog", first: true, predicate: ["signatureDialog"], descendants: true }, { propertyName: "signaturePad", first: true, predicate: ["sigPad"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\" title=\"Bold\" >\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"-6.5 0 28 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <title>bold</title> <path d=\"M0 25.531v1.344c1.063-0.031 1.938-0.063 2.563-0.094 0.625 0 1.094-0.031 1.313-0.031 1.656-0.125 3.063-0.219 4.281-0.188l2.813 0.063c2.438 0 4.25-0.313 5.75-1 0.719-0.344 1.344-0.844 1.969-1.531 0.469-0.469 0.813-1.031 1.031-1.656 0.25-0.844 0.375-1.594 0.375-2.281 0-2.5-1.719-4.625-5.094-5.406 0.531-0.25 1.031-0.5 1.375-0.688s0.625-0.313 0.781-0.438c1.188-0.875 1.781-1.906 1.781-3.281 0-0.594-0.094-1.188-0.281-1.719-0.375-1.094-1.219-2-2.406-2.563-0.531-0.313-1.031-0.469-1.375-0.531-0.938-0.25-1.844-0.375-2.719-0.375h-1.094c-0.219 0-0.406 0-0.531-0.031h-0.5c-0.063 0-0.156 0-0.25 0.031h-0.625l-5.406 0.156-3.719 0.094 0.063 1.188c0.875 0.125 1.406 0.188 1.625 0.188 0.438 0 0.781 0.094 0.969 0.219 0.094 0 0.156 0.063 0.188 0.125 0.063 0.219 0.125 0.688 0.156 1.563 0.063 1.563 0.063 2.813 0.063 3.75 0.031 0.969 0.031 1.625 0.094 2v7.031c0 1.219-0.031 2.125-0.156 2.75-0.031 0.219-0.125 0.438-0.281 0.688-0.438 0.188-1 0.375-1.75 0.469-0.375 0.063-0.719 0.125-1 0.156zM7.719 14.281v-2.469c0.063-1.719 0-2.969-0.031-3.969-0.063-0.438-0.063-0.844-0.063-1.063 0.75-0.156 1.344-0.219 1.844-0.219 1.625 0 2.844 0.344 3.656 1.094 0.813 0.688 1.219 1.563 1.219 2.656 0 2.969-1.75 4.094-5.063 4.094-0.563 0-1.094-0.031-1.563-0.125zM7.719 20.406v-4.5c0.313-0.063 0.75-0.125 1.438-0.125 1.594-0.031 2.813 0.125 3.563 0.438 1.531 0.563 2.594 2.188 2.594 4.344 0 1.031-0.219 1.844-0.563 2.563-0.375 0.719-0.906 1.219-1.719 1.594-1.656 0.781-3.719 0.719-5.125 0.125-0.094-0.25-0.125-0.438-0.125-0.594z\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\" title=\"Italic\">\r\n <!-- <mat-icon>format_italic</mat-icon> -->\r\n <svg viewBox=\"4 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Italic\"> <path id=\"Vector\" d=\"M8 19H10M10 19H12M10 19L14 5M12 5H14M14 5H16\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\" title=\"Underline\">\r\n <!-- <mat-icon>format_underline</mat-icon> -->\r\n <svg viewBox=\"4 0 18 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Underline\"> <path id=\"Vector\" d=\"M6 19H18M8 5V11C8 13.2091 9.79086 15 12 15C14.2091 15 16 13.2091 16 11V5\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\" title=\"Strikethrough\">\r\n <!-- <mat-icon>strikethrough_s</mat-icon> -->\r\n <svg viewBox=\"4 0 20 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Strikethrough\"> <path id=\"Vector\" d=\"M12.0005 12.0001C12.8959 12.0001 13.7749 12.1925 14.5457 12.5571C14.8939 12.7218 15.2146 12.9192 15.5009 13.1437C15.8484 13.4162 16.1457 13.729 16.3822 14.0732C16.8136 14.7009 17.0263 15.4096 16.9982 16.1256C16.97 16.8416 16.702 17.5385 16.2222 18.1433C15.7424 18.7481 15.0684 19.2386 14.2705 19.5638C13.4727 19.889 12.5802 20.0373 11.6865 19.9923C10.7928 19.9473 9.93104 19.7108 9.19043 19.3082C8.44982 18.9055 7.85782 18.3514 7.47656 17.7032M12.0005 12.0001H4M12.0005 12.0001H20M16.5243 6.29718C16.143 5.649 15.5512 5.09462 14.8105 4.69197C14.0699 4.28932 13.2076 4.05287 12.314 4.00789C11.4203 3.96291 10.5278 4.11091 9.72998 4.43613C8.93213 4.76135 8.25812 5.25205 7.77832 5.85689C7.29852 6.46173 7.03057 7.15885 7.00244 7.87485C6.9942 8.08463 7.00669 8.29345 7.03924 8.50014\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\" title=\"Align Left\" >\r\n <!-- <mat-icon>format_align_left</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M11 1H1V3H11V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 9H1V11H11V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\" title=\"Align Center\" >\r\n <!-- <mat-icon>format_align_center</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H1V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H1V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 13H1V15H11V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\" title=\"Align Right\" >\r\n <!-- <mat-icon>format_align_right</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H5V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H5V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\" title=\"Justify\" >\r\n <!-- <mat-icon>format_align_justify</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 -2.5 29 29\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"m1.334 2.666h26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001h.002-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002z\"></path><path d=\"m27.999 5.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001z\"></path><path d=\"m27.999 10.667h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 21.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 16h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path></g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\" title=\"Bullet List\" >\r\n <!-- <mat-icon>format_list_bulleted</mat-icon> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"iconColor\" viewBox=\"0 0 36 48\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"M8 21c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM8 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 24.33c-1.47 0-2.67 1.19-2.67 2.67s1.2 2.67 2.67 2.67 2.67-1.19 2.67-2.67-1.2-2.67-2.67-2.67zM14 38h28v-4H14v4zm0-12h28v-4H14v4zm0-16v4h28v-4H14z\"></path></g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\" title=\"Numbered List\" >\r\n <!-- <mat-icon>format_list_numbered</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 94.479 94.479\" xml:space=\"preserve\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g> <g> <path d=\"M92.479,6.821H26.823c-1.104,0-2,0.896-2,2V19.58c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V8.821 C94.479,7.717,93.584,6.821,92.479,6.821z\"></path> <path d=\"M92.479,40.457H26.823c-1.104,0-2,0.896-2,2v10.761c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V42.457 C94.479,41.352,93.584,40.457,92.479,40.457z\"></path> <path d=\"M92.479,75.109H26.823c-1.104,0-2,0.896-2,2v10.759c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V77.109 C94.479,76.004,93.584,75.109,92.479,75.109z\"></path> <path d=\"M1.842,11.104c0.423,0.051,0.848-0.08,1.167-0.36l0.914-0.799v12.973c0,0.828,0.672,1.5,1.5,1.5h1.546 c0.828,0,1.5-0.672,1.5-1.5V5.567c0-0.828-0.672-1.5-1.5-1.5H5.378c-0.356,0-0.701,0.127-0.973,0.358L0.527,7.728 c-0.589,0.501-0.7,1.369-0.256,2.003l0.522,0.745C1.04,10.825,1.42,11.053,1.842,11.104z\"></path> <path d=\"M2.546,37.5c-0.647,0.23-1.056,0.872-0.99,1.556l0.096,0.999c0.048,0.497,0.339,0.938,0.778,1.176 c0.438,0.238,0.967,0.243,1.409,0.011c1.18-0.615,1.923-0.775,2.922-0.534c0.71,0.163,1.188,0.586,1.438,1.225 c0.378,1.143,0.395,2.957-2.854,6.873l-2.506,2.996c-0.589,0.688-0.99,1.119-1.302,1.404c-0.312,0.284-0.488,0.688-0.488,1.107 v1.475c0,0.828,0.672,1.5,1.5,1.5h9.132c0.828,0,1.5-0.672,1.5-1.5V55.01c0-0.828-0.672-1.5-1.5-1.5H6.896 c0.458-0.515,1.037-1.211,1.716-2.063c2.803-3.468,5.061-6.645,4.292-10.376c-0.309-1.672-1.247-2.966-2.731-3.752 c-0.826-0.424-1.879-0.639-3.127-0.639C5.629,36.68,4.031,36.971,2.546,37.5z\"></path> <path d=\"M10.491,79.516c0.25-0.135,0.487-0.289,0.74-0.483c1.718-1.313,1.801-3.335,1.786-3.885 c-0.001-1.878-0.712-3.318-2.166-4.401c-1.026-0.77-2.534-1.177-4.361-1.177c-1.347,0-2.787,0.212-4.057,0.596 c-0.668,0.202-1.107,0.839-1.063,1.533l0.058,0.88c0.031,0.471,0.28,0.896,0.673,1.155c0.394,0.259,0.886,0.319,1.327,0.159 c0.864-0.307,1.571-0.45,2.223-0.45c0.229,0,0.457,0.019,0.722,0.063c0.94,0.127,1.563,0.549,1.9,1.283 c0.237,0.52,0.19,1.445-0.083,1.885c-0.654,1.014-2.438,1.217-3.443,1.25c-0.81,0.024-1.453,0.688-1.453,1.498v0.658 c0,0.828,0.687,1.5,1.515,1.5c1.575,0,2.311,0.309,2.596,0.485c0.737,0.465,1.065,1.043,1.066,1.918 c0.025,0.912-0.348,1.606-1.129,2.121c-1.014,0.651-2.64,0.647-4.505,0.032c-0.438-0.146-0.918-0.082-1.302,0.175 c-0.384,0.255-0.629,0.672-0.665,1.132l-0.068,0.872C0.75,88.973,1.135,89.588,1.75,89.83c0.33,0.13,0.551,0.183,1.022,0.281 c0.857,0.196,1.84,0.302,2.842,0.302c1.493,0,4.248-0.247,5.944-1.919c1.657-1.69,1.974-4.11,1.56-5.729 C12.636,80.704,11.461,79.946,10.491,79.516z\"></path> </g> </g> </g></svg>\r\n </button>\r\n <button aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\" title=\"Insert Image\" >\r\n <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <!-- <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon> -->\r\n <svg viewBox=\"2 1 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M14.2647 15.9377L12.5473 14.2346C11.758 13.4519 11.3633 13.0605 10.9089 12.9137C10.5092 12.7845 10.079 12.7845 9.67922 12.9137C9.22485 13.0605 8.83017 13.4519 8.04082 14.2346L4.04193 18.2622M14.2647 15.9377L14.606 15.5991C15.412 14.7999 15.8149 14.4003 16.2773 14.2545C16.6839 14.1262 17.1208 14.1312 17.5244 14.2688C17.9832 14.4253 18.3769 14.834 19.1642 15.6515L20 16.5001M14.2647 15.9377L18.22 19.9628M18.22 19.9628C17.8703 20 17.4213 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.12583 18.7271 4.07264 18.5226 4.04193 18.2622M18.22 19.9628C18.5007 19.9329 18.7175 19.8791 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13M11 4H7.2C6.07989 4 5.51984 4 5.09202 4.21799C4.7157 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.4466 4 17.9066 4.04193 18.2622M18 9V6M18 6V3M18 6H21M18 6H15\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n <button (click)=\"openTableDialog($event)\" type=\"button\" title=\"Table\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg width=\"256px\" height=\"256px\" viewBox=\"2 12 20 3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M3 9H21M3 15H21M9 9L9 20M15 9L15 20M6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V7.2C21 6.0799 21 5.51984 20.782 5.09202C20.5903 4.71569 20.2843 4.40973 19.908 4.21799C19.4802 4 18.9201 4 17.8 4H6.2C5.0799 4 4.51984 4 4.09202 4.21799C3.71569 4.40973 3.40973 4.71569 3.21799 5.09202C3 5.51984 3 6.07989 3 7.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.07989 20 6.2 20Z\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" aria-label=\"Make Header\" title=\"Table Header\" >\r\n <!-- <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M213.333 0C95.5126 0 0 95.5126 0 213.333V1706.67C0 1824.49 95.5126 1920 213.333 1920H1706.67C1824.49 1920 1920 1824.49 1920 1706.67V213.333C1920 95.5126 1824.49 0 1706.67 0H213.333ZM266.667 746.667C237.211 746.667 213.333 722.788 213.333 693.333V373.333C213.333 343.878 237.211 320 266.667 320H1653.33C1682.79 320 1706.67 343.878 1706.67 373.333V693.333C1706.67 722.788 1682.79 746.667 1653.33 746.667H266.667Z\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"openSignatureDialog($event)\" type=\"button\" title=\"Signature\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg viewBox=\"0 0 28 28\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <desc>Created with Sketch.</desc> <g id=\"\uD83D\uDD0D-Product-Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"ic_fluent_signature_28_regular\" fill=\"#212121\" fill-rule=\"nonzero\"> <path d=\"M16.4798956,21.0019578 L16.75,21 C17.9702352,21 18.6112441,21.5058032 19.4020627,22.7041662 L19.7958278,23.3124409 C20.1028266,23.766938 20.2944374,23.9573247 20.535784,24.0567929 C20.9684873,24.2351266 21.3271008,24.1474446 22.6440782,23.5133213 L23.0473273,23.3170319 C23.8709982,22.9126711 24.4330286,22.6811606 25.0680983,22.5223931 C25.4699445,22.4219316 25.8771453,22.6662521 25.9776069,23.0680983 C26.0780684,23.4699445 25.8337479,23.8771453 25.4319017,23.9776069 C25.0371606,24.0762922 24.6589465,24.2178819 24.1641364,24.4458997 L23.0054899,25.0032673 C21.4376302,25.7436944 20.9059009,25.8317321 19.964216,25.4436275 C19.3391237,25.1860028 18.9836765,24.813298 18.4635639,24.0180227 L18.2688903,23.7140849 C17.7071112,22.8288731 17.4057794,22.5384538 16.8688444,22.5036655 L16.75,22.5 C16.2017306,22.5 16.0933104,22.5684572 14.009281,24.1150241 C12.2670395,25.4079488 10.9383359,26.0254984 9.24864243,26.0254984 C7.18872869,26.0254984 5.24773367,25.647067 3.43145875,24.8905363 L6.31377803,24.2241784 C7.25769404,24.4250762 8.23567143,24.5254984 9.24864243,24.5254984 C10.5393035,24.5254984 11.609129,24.0282691 13.1153796,22.9104743 L14.275444,22.0545488 C15.5468065,21.1304903 15.8296113,21.016032 16.4798956,21.0019578 L16.4798956,21.0019578 Z M22.7770988,3.22208979 C24.4507223,4.8957133 24.4507566,7.60916079 22.7771889,9.28281324 L21.741655,10.3184475 C22.8936263,11.7199657 22.8521526,13.2053774 21.7811031,14.279556 L18.7800727,17.2805874 L18.7800727,17.2805874 C18.4870374,17.5733384 18.0121637,17.573108 17.7194126,17.2800727 C17.4266616,16.9870374 17.426892,16.5121637 17.7199273,16.2194126 L20.7188969,13.220444 C21.2039571,12.7339668 21.2600021,12.1299983 20.678941,11.3818945 L10.0845437,21.9761011 C9.78635459,22.2743053 9.41036117,22.482705 8.99944703,22.5775313 L2.91864463,23.9807934 C2.37859061,24.1054212 1.89457875,23.6214094 2.0192066,23.0813554 L3.42247794,17.0005129 C3.51729557,16.5896365 3.72566589,16.2136736 4.0238276,15.9154968 L16.7165019,3.22217992 C18.3900415,1.54855555 21.1034349,1.54851059 22.7770988,3.22208979 Z M17.7771889,4.28281324 L5.08451462,16.9761302 C4.98512738,17.0755224 4.91567061,17.2008434 4.88406473,17.3378022 L3.7506248,22.2493752 L8.66215777,21.1159445 C8.79912915,21.0843357 8.92446029,21.0148692 9.02385665,20.9154678 L21.7165019,8.22217992 C22.8043063,7.13432049 22.8042862,5.37060478 21.7164588,4.2827701 C20.6285914,3.19496507 18.8649506,3.19499653 17.7771889,4.28281324 Z\" id=\"\uD83C\uDFA8-Color\"> </path> </g> </g> </g></svg>\r\n </button>\r\n\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n\r\n <ng-template #signatureDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Draw a Signature</h2>\r\n <signature-pad #sigPad [options]=\"signaturePadOptions\" class=\"sign\" ></signature-pad>\r\n <div class=\"action\" >\r\n <!-- <button type=\"button\" class=\"normal\" > Close </button> -->\r\n <button type=\"button\" class=\"normal\" (click)=\"closeSignDialog(dialogRef)\" > Close </button>\r\n <button type=\"button\" class=\"submit\" (click)=\"submitSignDialog(dialogRef)\" > Submit </button>\r\n </div>\r\n \r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black;cursor:pointer}.tooltiptext{visibility:hidden;width:130px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1}.tooltip:hover .tooltiptext{visibility:visible}mat-icon{font-size:20px!important;color:inherit!important}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}.image-resize-wrapper{position:relative;display:inline-block}.image-resize-wrapper .resizer{width:10px;height:10px;background:#007bff;position:absolute;bottom:0;right:0;cursor:se-resize;border-radius:50%}.normal{width:50%;height:100%;border:1px solid red;border-radius:5px;color:red;padding:10px;font-size:16px}.normal:hover{color:red}.submit{width:50%;height:100%;border:none;border-radius:5px;color:#fff;padding:10px;background-color:#151544}.submit:hover{color:#fff}.action{margin-top:10px;padding:10px;display:flex;width:100%;justify-content:end;align-items:center;gap:5px}::ng-deep .sign canvas{border:1px dotted #ccc}\n"], components: [{ type: i2.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
892
|
+
], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }, { propertyName: "signatureDialog", first: true, predicate: ["signatureDialog"], descendants: true }, { propertyName: "signaturePad", first: true, predicate: ["sigPad"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select *ngIf=\"editorOptions?.options?.textFormat ?? true\" class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select *ngIf=\"editorOptions?.options?.fontSize ?? true\" class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button *ngIf=\"editorOptions?.options?.bold ?? true\" (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\" title=\"Bold\" >\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"-6.5 0 28 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <title>bold</title> <path d=\"M0 25.531v1.344c1.063-0.031 1.938-0.063 2.563-0.094 0.625 0 1.094-0.031 1.313-0.031 1.656-0.125 3.063-0.219 4.281-0.188l2.813 0.063c2.438 0 4.25-0.313 5.75-1 0.719-0.344 1.344-0.844 1.969-1.531 0.469-0.469 0.813-1.031 1.031-1.656 0.25-0.844 0.375-1.594 0.375-2.281 0-2.5-1.719-4.625-5.094-5.406 0.531-0.25 1.031-0.5 1.375-0.688s0.625-0.313 0.781-0.438c1.188-0.875 1.781-1.906 1.781-3.281 0-0.594-0.094-1.188-0.281-1.719-0.375-1.094-1.219-2-2.406-2.563-0.531-0.313-1.031-0.469-1.375-0.531-0.938-0.25-1.844-0.375-2.719-0.375h-1.094c-0.219 0-0.406 0-0.531-0.031h-0.5c-0.063 0-0.156 0-0.25 0.031h-0.625l-5.406 0.156-3.719 0.094 0.063 1.188c0.875 0.125 1.406 0.188 1.625 0.188 0.438 0 0.781 0.094 0.969 0.219 0.094 0 0.156 0.063 0.188 0.125 0.063 0.219 0.125 0.688 0.156 1.563 0.063 1.563 0.063 2.813 0.063 3.75 0.031 0.969 0.031 1.625 0.094 2v7.031c0 1.219-0.031 2.125-0.156 2.75-0.031 0.219-0.125 0.438-0.281 0.688-0.438 0.188-1 0.375-1.75 0.469-0.375 0.063-0.719 0.125-1 0.156zM7.719 14.281v-2.469c0.063-1.719 0-2.969-0.031-3.969-0.063-0.438-0.063-0.844-0.063-1.063 0.75-0.156 1.344-0.219 1.844-0.219 1.625 0 2.844 0.344 3.656 1.094 0.813 0.688 1.219 1.563 1.219 2.656 0 2.969-1.75 4.094-5.063 4.094-0.563 0-1.094-0.031-1.563-0.125zM7.719 20.406v-4.5c0.313-0.063 0.75-0.125 1.438-0.125 1.594-0.031 2.813 0.125 3.563 0.438 1.531 0.563 2.594 2.188 2.594 4.344 0 1.031-0.219 1.844-0.563 2.563-0.375 0.719-0.906 1.219-1.719 1.594-1.656 0.781-3.719 0.719-5.125 0.125-0.094-0.25-0.125-0.438-0.125-0.594z\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.italic ?? true\" (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\" title=\"Italic\">\r\n <!-- <mat-icon>format_italic</mat-icon> -->\r\n <svg viewBox=\"4 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Italic\"> <path id=\"Vector\" d=\"M8 19H10M10 19H12M10 19L14 5M12 5H14M14 5H16\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.underline ?? true\" (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\" title=\"Underline\">\r\n <!-- <mat-icon>format_underline</mat-icon> -->\r\n <svg viewBox=\"4 0 18 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Underline\"> <path id=\"Vector\" d=\"M6 19H18M8 5V11C8 13.2091 9.79086 15 12 15C14.2091 15 16 13.2091 16 11V5\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.strikethrough ?? true\" (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\" title=\"Strikethrough\">\r\n <!-- <mat-icon>strikethrough_s</mat-icon> -->\r\n <svg viewBox=\"4 0 20 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Strikethrough\"> <path id=\"Vector\" d=\"M12.0005 12.0001C12.8959 12.0001 13.7749 12.1925 14.5457 12.5571C14.8939 12.7218 15.2146 12.9192 15.5009 13.1437C15.8484 13.4162 16.1457 13.729 16.3822 14.0732C16.8136 14.7009 17.0263 15.4096 16.9982 16.1256C16.97 16.8416 16.702 17.5385 16.2222 18.1433C15.7424 18.7481 15.0684 19.2386 14.2705 19.5638C13.4727 19.889 12.5802 20.0373 11.6865 19.9923C10.7928 19.9473 9.93104 19.7108 9.19043 19.3082C8.44982 18.9055 7.85782 18.3514 7.47656 17.7032M12.0005 12.0001H4M12.0005 12.0001H20M16.5243 6.29718C16.143 5.649 15.5512 5.09462 14.8105 4.69197C14.0699 4.28932 13.2076 4.05287 12.314 4.00789C11.4203 3.96291 10.5278 4.11091 9.72998 4.43613C8.93213 4.76135 8.25812 5.25205 7.77832 5.85689C7.29852 6.46173 7.03057 7.15885 7.00244 7.87485C6.9942 8.08463 7.00669 8.29345 7.03924 8.50014\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignLeft ?? true\" (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\" title=\"Align Left\" >\r\n <!-- <mat-icon>format_align_left</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M11 1H1V3H11V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 9H1V11H11V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignCenter ?? true\" (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\" title=\"Align Center\" >\r\n <!-- <mat-icon>format_align_center</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H1V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H1V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 13H1V15H11V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignRight ?? true\" (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\" title=\"Align Right\" >\r\n <!-- <mat-icon>format_align_right</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H5V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H5V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.justify ?? true\" (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\" title=\"Justify\" >\r\n <!-- <mat-icon>format_align_justify</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 -2.5 29 29\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"m1.334 2.666h26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001h.002-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002z\"></path><path d=\"m27.999 5.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001z\"></path><path d=\"m27.999 10.667h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 21.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 16h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path></g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.bulletList ?? true\" (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\" title=\"Bullet List\" >\r\n <!-- <mat-icon>format_list_bulleted</mat-icon> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"iconColor\" viewBox=\"0 0 36 48\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"M8 21c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM8 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 24.33c-1.47 0-2.67 1.19-2.67 2.67s1.2 2.67 2.67 2.67 2.67-1.19 2.67-2.67-1.2-2.67-2.67-2.67zM14 38h28v-4H14v4zm0-12h28v-4H14v4zm0-16v4h28v-4H14z\"></path></g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.numberedList ?? true\" (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\" title=\"Numbered List\" >\r\n <!-- <mat-icon>format_list_numbered</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 94.479 94.479\" xml:space=\"preserve\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g> <g> <path d=\"M92.479,6.821H26.823c-1.104,0-2,0.896-2,2V19.58c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V8.821 C94.479,7.717,93.584,6.821,92.479,6.821z\"></path> <path d=\"M92.479,40.457H26.823c-1.104,0-2,0.896-2,2v10.761c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V42.457 C94.479,41.352,93.584,40.457,92.479,40.457z\"></path> <path d=\"M92.479,75.109H26.823c-1.104,0-2,0.896-2,2v10.759c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V77.109 C94.479,76.004,93.584,75.109,92.479,75.109z\"></path> <path d=\"M1.842,11.104c0.423,0.051,0.848-0.08,1.167-0.36l0.914-0.799v12.973c0,0.828,0.672,1.5,1.5,1.5h1.546 c0.828,0,1.5-0.672,1.5-1.5V5.567c0-0.828-0.672-1.5-1.5-1.5H5.378c-0.356,0-0.701,0.127-0.973,0.358L0.527,7.728 c-0.589,0.501-0.7,1.369-0.256,2.003l0.522,0.745C1.04,10.825,1.42,11.053,1.842,11.104z\"></path> <path d=\"M2.546,37.5c-0.647,0.23-1.056,0.872-0.99,1.556l0.096,0.999c0.048,0.497,0.339,0.938,0.778,1.176 c0.438,0.238,0.967,0.243,1.409,0.011c1.18-0.615,1.923-0.775,2.922-0.534c0.71,0.163,1.188,0.586,1.438,1.225 c0.378,1.143,0.395,2.957-2.854,6.873l-2.506,2.996c-0.589,0.688-0.99,1.119-1.302,1.404c-0.312,0.284-0.488,0.688-0.488,1.107 v1.475c0,0.828,0.672,1.5,1.5,1.5h9.132c0.828,0,1.5-0.672,1.5-1.5V55.01c0-0.828-0.672-1.5-1.5-1.5H6.896 c0.458-0.515,1.037-1.211,1.716-2.063c2.803-3.468,5.061-6.645,4.292-10.376c-0.309-1.672-1.247-2.966-2.731-3.752 c-0.826-0.424-1.879-0.639-3.127-0.639C5.629,36.68,4.031,36.971,2.546,37.5z\"></path> <path d=\"M10.491,79.516c0.25-0.135,0.487-0.289,0.74-0.483c1.718-1.313,1.801-3.335,1.786-3.885 c-0.001-1.878-0.712-3.318-2.166-4.401c-1.026-0.77-2.534-1.177-4.361-1.177c-1.347,0-2.787,0.212-4.057,0.596 c-0.668,0.202-1.107,0.839-1.063,1.533l0.058,0.88c0.031,0.471,0.28,0.896,0.673,1.155c0.394,0.259,0.886,0.319,1.327,0.159 c0.864-0.307,1.571-0.45,2.223-0.45c0.229,0,0.457,0.019,0.722,0.063c0.94,0.127,1.563,0.549,1.9,1.283 c0.237,0.52,0.19,1.445-0.083,1.885c-0.654,1.014-2.438,1.217-3.443,1.25c-0.81,0.024-1.453,0.688-1.453,1.498v0.658 c0,0.828,0.687,1.5,1.515,1.5c1.575,0,2.311,0.309,2.596,0.485c0.737,0.465,1.065,1.043,1.066,1.918 c0.025,0.912-0.348,1.606-1.129,2.121c-1.014,0.651-2.64,0.647-4.505,0.032c-0.438-0.146-0.918-0.082-1.302,0.175 c-0.384,0.255-0.629,0.672-0.665,1.132l-0.068,0.872C0.75,88.973,1.135,89.588,1.75,89.83c0.33,0.13,0.551,0.183,1.022,0.281 c0.857,0.196,1.84,0.302,2.842,0.302c1.493,0,4.248-0.247,5.944-1.919c1.657-1.69,1.974-4.11,1.56-5.729 C12.636,80.704,11.461,79.946,10.491,79.516z\"></path> </g> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.image ?? true\" aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\" title=\"Insert Image\" >\r\n <input type=\"file\" accept=\"png,jpg,jpeg\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <!-- <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon> -->\r\n <svg viewBox=\"2 1 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M14.2647 15.9377L12.5473 14.2346C11.758 13.4519 11.3633 13.0605 10.9089 12.9137C10.5092 12.7845 10.079 12.7845 9.67922 12.9137C9.22485 13.0605 8.83017 13.4519 8.04082 14.2346L4.04193 18.2622M14.2647 15.9377L14.606 15.5991C15.412 14.7999 15.8149 14.4003 16.2773 14.2545C16.6839 14.1262 17.1208 14.1312 17.5244 14.2688C17.9832 14.4253 18.3769 14.834 19.1642 15.6515L20 16.5001M14.2647 15.9377L18.22 19.9628M18.22 19.9628C17.8703 20 17.4213 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.12583 18.7271 4.07264 18.5226 4.04193 18.2622M18.22 19.9628C18.5007 19.9329 18.7175 19.8791 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13M11 4H7.2C6.07989 4 5.51984 4 5.09202 4.21799C4.7157 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.4466 4 17.9066 4.04193 18.2622M18 9V6M18 6V3M18 6H21M18 6H15\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.table ?? true\" (click)=\"openTableDialog($event)\" type=\"button\" title=\"Table\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg width=\"256px\" height=\"256px\" viewBox=\"2 12 20 3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M3 9H21M3 15H21M9 9L9 20M15 9L15 20M6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V7.2C21 6.0799 21 5.51984 20.782 5.09202C20.5903 4.71569 20.2843 4.40973 19.908 4.21799C19.4802 4 18.9201 4 17.8 4H6.2C5.0799 4 4.51984 4 4.09202 4.21799C3.71569 4.40973 3.40973 4.71569 3.21799 5.09202C3 5.51984 3 6.07989 3 7.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.07989 20 6.2 20Z\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.tableHeader ?? true\" class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" aria-label=\"Make Header\" title=\"Table Header\" >\r\n <!-- <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M213.333 0C95.5126 0 0 95.5126 0 213.333V1706.67C0 1824.49 95.5126 1920 213.333 1920H1706.67C1824.49 1920 1920 1824.49 1920 1706.67V213.333C1920 95.5126 1824.49 0 1706.67 0H213.333ZM266.667 746.667C237.211 746.667 213.333 722.788 213.333 693.333V373.333C213.333 343.878 237.211 320 266.667 320H1653.33C1682.79 320 1706.67 343.878 1706.67 373.333V693.333C1706.67 722.788 1682.79 746.667 1653.33 746.667H266.667Z\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.signature ?? true\" (click)=\"openSignatureDialog($event)\" type=\"button\" title=\"Signature\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg viewBox=\"0 0 28 28\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <desc>Created with Sketch.</desc> <g id=\"\uD83D\uDD0D-Product-Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"ic_fluent_signature_28_regular\" fill=\"#212121\" fill-rule=\"nonzero\"> <path d=\"M16.4798956,21.0019578 L16.75,21 C17.9702352,21 18.6112441,21.5058032 19.4020627,22.7041662 L19.7958278,23.3124409 C20.1028266,23.766938 20.2944374,23.9573247 20.535784,24.0567929 C20.9684873,24.2351266 21.3271008,24.1474446 22.6440782,23.5133213 L23.0473273,23.3170319 C23.8709982,22.9126711 24.4330286,22.6811606 25.0680983,22.5223931 C25.4699445,22.4219316 25.8771453,22.6662521 25.9776069,23.0680983 C26.0780684,23.4699445 25.8337479,23.8771453 25.4319017,23.9776069 C25.0371606,24.0762922 24.6589465,24.2178819 24.1641364,24.4458997 L23.0054899,25.0032673 C21.4376302,25.7436944 20.9059009,25.8317321 19.964216,25.4436275 C19.3391237,25.1860028 18.9836765,24.813298 18.4635639,24.0180227 L18.2688903,23.7140849 C17.7071112,22.8288731 17.4057794,22.5384538 16.8688444,22.5036655 L16.75,22.5 C16.2017306,22.5 16.0933104,22.5684572 14.009281,24.1150241 C12.2670395,25.4079488 10.9383359,26.0254984 9.24864243,26.0254984 C7.18872869,26.0254984 5.24773367,25.647067 3.43145875,24.8905363 L6.31377803,24.2241784 C7.25769404,24.4250762 8.23567143,24.5254984 9.24864243,24.5254984 C10.5393035,24.5254984 11.609129,24.0282691 13.1153796,22.9104743 L14.275444,22.0545488 C15.5468065,21.1304903 15.8296113,21.016032 16.4798956,21.0019578 L16.4798956,21.0019578 Z M22.7770988,3.22208979 C24.4507223,4.8957133 24.4507566,7.60916079 22.7771889,9.28281324 L21.741655,10.3184475 C22.8936263,11.7199657 22.8521526,13.2053774 21.7811031,14.279556 L18.7800727,17.2805874 L18.7800727,17.2805874 C18.4870374,17.5733384 18.0121637,17.573108 17.7194126,17.2800727 C17.4266616,16.9870374 17.426892,16.5121637 17.7199273,16.2194126 L20.7188969,13.220444 C21.2039571,12.7339668 21.2600021,12.1299983 20.678941,11.3818945 L10.0845437,21.9761011 C9.78635459,22.2743053 9.41036117,22.482705 8.99944703,22.5775313 L2.91864463,23.9807934 C2.37859061,24.1054212 1.89457875,23.6214094 2.0192066,23.0813554 L3.42247794,17.0005129 C3.51729557,16.5896365 3.72566589,16.2136736 4.0238276,15.9154968 L16.7165019,3.22217992 C18.3900415,1.54855555 21.1034349,1.54851059 22.7770988,3.22208979 Z M17.7771889,4.28281324 L5.08451462,16.9761302 C4.98512738,17.0755224 4.91567061,17.2008434 4.88406473,17.3378022 L3.7506248,22.2493752 L8.66215777,21.1159445 C8.79912915,21.0843357 8.92446029,21.0148692 9.02385665,20.9154678 L21.7165019,8.22217992 C22.8043063,7.13432049 22.8042862,5.37060478 21.7164588,4.2827701 C20.6285914,3.19496507 18.8649506,3.19499653 17.7771889,4.28281324 Z\" id=\"\uD83C\uDFA8-Color\"> </path> </g> </g> </g></svg>\r\n </button>\r\n\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n\r\n <ng-template #signatureDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Draw a Signature</h2>\r\n <signature-pad #sigPad [options]=\"signaturePadOptions\" class=\"sign\" ></signature-pad>\r\n <div class=\"action\" >\r\n <!-- <button type=\"button\" class=\"normal\" > Close </button> -->\r\n <button type=\"button\" class=\"normal\" (click)=\"closeSignDialog(dialogRef)\" > Close </button>\r\n <button type=\"button\" class=\"submit\" (click)=\"submitSignDialog(dialogRef)\" > Submit </button>\r\n </div>\r\n \r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black;cursor:pointer}.tooltiptext{visibility:hidden;width:130px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1}.tooltip:hover .tooltiptext{visibility:visible}mat-icon{font-size:20px!important;color:inherit!important}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}.image-resize-wrapper{position:relative;display:inline-block}.image-resize-wrapper .resizer{width:10px;height:10px;background:#007bff;position:absolute;bottom:0;right:0;cursor:se-resize;border-radius:50%}.normal{width:50%;height:100%;border:1px solid red;border-radius:5px;color:red;padding:10px;font-size:16px}.normal:hover{color:red}.submit{width:50%;height:100%;border:none;border-radius:5px;color:#fff;padding:10px;background-color:#151544}.submit:hover{color:#fff}.action{margin-top:10px;padding:10px;display:flex;width:100%;justify-content:end;align-items:center;gap:5px}::ng-deep .sign canvas{border:1px dotted #ccc}\n"], components: [{ type: i2.SignaturePad, selector: "signature-pad", inputs: ["options"], outputs: ["onBeginEvent", "onEndEvent"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
869
893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, decorators: [{
|
|
870
894
|
type: Component,
|
|
871
895
|
args: [{ selector: 'rapid-text-editor', providers: [
|
|
@@ -874,7 +898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
874
898
|
useExisting: forwardRef(() => RapidTextEditorComponent),
|
|
875
899
|
multi: true
|
|
876
900
|
}
|
|
877
|
-
], template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\" title=\"Bold\" >\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"-6.5 0 28 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <title>bold</title> <path d=\"M0 25.531v1.344c1.063-0.031 1.938-0.063 2.563-0.094 0.625 0 1.094-0.031 1.313-0.031 1.656-0.125 3.063-0.219 4.281-0.188l2.813 0.063c2.438 0 4.25-0.313 5.75-1 0.719-0.344 1.344-0.844 1.969-1.531 0.469-0.469 0.813-1.031 1.031-1.656 0.25-0.844 0.375-1.594 0.375-2.281 0-2.5-1.719-4.625-5.094-5.406 0.531-0.25 1.031-0.5 1.375-0.688s0.625-0.313 0.781-0.438c1.188-0.875 1.781-1.906 1.781-3.281 0-0.594-0.094-1.188-0.281-1.719-0.375-1.094-1.219-2-2.406-2.563-0.531-0.313-1.031-0.469-1.375-0.531-0.938-0.25-1.844-0.375-2.719-0.375h-1.094c-0.219 0-0.406 0-0.531-0.031h-0.5c-0.063 0-0.156 0-0.25 0.031h-0.625l-5.406 0.156-3.719 0.094 0.063 1.188c0.875 0.125 1.406 0.188 1.625 0.188 0.438 0 0.781 0.094 0.969 0.219 0.094 0 0.156 0.063 0.188 0.125 0.063 0.219 0.125 0.688 0.156 1.563 0.063 1.563 0.063 2.813 0.063 3.75 0.031 0.969 0.031 1.625 0.094 2v7.031c0 1.219-0.031 2.125-0.156 2.75-0.031 0.219-0.125 0.438-0.281 0.688-0.438 0.188-1 0.375-1.75 0.469-0.375 0.063-0.719 0.125-1 0.156zM7.719 14.281v-2.469c0.063-1.719 0-2.969-0.031-3.969-0.063-0.438-0.063-0.844-0.063-1.063 0.75-0.156 1.344-0.219 1.844-0.219 1.625 0 2.844 0.344 3.656 1.094 0.813 0.688 1.219 1.563 1.219 2.656 0 2.969-1.75 4.094-5.063 4.094-0.563 0-1.094-0.031-1.563-0.125zM7.719 20.406v-4.5c0.313-0.063 0.75-0.125 1.438-0.125 1.594-0.031 2.813 0.125 3.563 0.438 1.531 0.563 2.594 2.188 2.594 4.344 0 1.031-0.219 1.844-0.563 2.563-0.375 0.719-0.906 1.219-1.719 1.594-1.656 0.781-3.719 0.719-5.125 0.125-0.094-0.25-0.125-0.438-0.125-0.594z\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\" title=\"Italic\">\r\n <!-- <mat-icon>format_italic</mat-icon> -->\r\n <svg viewBox=\"4 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Italic\"> <path id=\"Vector\" d=\"M8 19H10M10 19H12M10 19L14 5M12 5H14M14 5H16\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\" title=\"Underline\">\r\n <!-- <mat-icon>format_underline</mat-icon> -->\r\n <svg viewBox=\"4 0 18 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Underline\"> <path id=\"Vector\" d=\"M6 19H18M8 5V11C8 13.2091 9.79086 15 12 15C14.2091 15 16 13.2091 16 11V5\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\" title=\"Strikethrough\">\r\n <!-- <mat-icon>strikethrough_s</mat-icon> -->\r\n <svg viewBox=\"4 0 20 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Strikethrough\"> <path id=\"Vector\" d=\"M12.0005 12.0001C12.8959 12.0001 13.7749 12.1925 14.5457 12.5571C14.8939 12.7218 15.2146 12.9192 15.5009 13.1437C15.8484 13.4162 16.1457 13.729 16.3822 14.0732C16.8136 14.7009 17.0263 15.4096 16.9982 16.1256C16.97 16.8416 16.702 17.5385 16.2222 18.1433C15.7424 18.7481 15.0684 19.2386 14.2705 19.5638C13.4727 19.889 12.5802 20.0373 11.6865 19.9923C10.7928 19.9473 9.93104 19.7108 9.19043 19.3082C8.44982 18.9055 7.85782 18.3514 7.47656 17.7032M12.0005 12.0001H4M12.0005 12.0001H20M16.5243 6.29718C16.143 5.649 15.5512 5.09462 14.8105 4.69197C14.0699 4.28932 13.2076 4.05287 12.314 4.00789C11.4203 3.96291 10.5278 4.11091 9.72998 4.43613C8.93213 4.76135 8.25812 5.25205 7.77832 5.85689C7.29852 6.46173 7.03057 7.15885 7.00244 7.87485C6.9942 8.08463 7.00669 8.29345 7.03924 8.50014\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\" title=\"Align Left\" >\r\n <!-- <mat-icon>format_align_left</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M11 1H1V3H11V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 9H1V11H11V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\" title=\"Align Center\" >\r\n <!-- <mat-icon>format_align_center</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H1V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H1V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 13H1V15H11V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\" title=\"Align Right\" >\r\n <!-- <mat-icon>format_align_right</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H5V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H5V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\" title=\"Justify\" >\r\n <!-- <mat-icon>format_align_justify</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 -2.5 29 29\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"m1.334 2.666h26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001h.002-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002z\"></path><path d=\"m27.999 5.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001z\"></path><path d=\"m27.999 10.667h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 21.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 16h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path></g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\" title=\"Bullet List\" >\r\n <!-- <mat-icon>format_list_bulleted</mat-icon> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"iconColor\" viewBox=\"0 0 36 48\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"M8 21c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM8 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 24.33c-1.47 0-2.67 1.19-2.67 2.67s1.2 2.67 2.67 2.67 2.67-1.19 2.67-2.67-1.2-2.67-2.67-2.67zM14 38h28v-4H14v4zm0-12h28v-4H14v4zm0-16v4h28v-4H14z\"></path></g></svg>\r\n </button>\r\n\r\n <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\" title=\"Numbered List\" >\r\n <!-- <mat-icon>format_list_numbered</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 94.479 94.479\" xml:space=\"preserve\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g> <g> <path d=\"M92.479,6.821H26.823c-1.104,0-2,0.896-2,2V19.58c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V8.821 C94.479,7.717,93.584,6.821,92.479,6.821z\"></path> <path d=\"M92.479,40.457H26.823c-1.104,0-2,0.896-2,2v10.761c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V42.457 C94.479,41.352,93.584,40.457,92.479,40.457z\"></path> <path d=\"M92.479,75.109H26.823c-1.104,0-2,0.896-2,2v10.759c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V77.109 C94.479,76.004,93.584,75.109,92.479,75.109z\"></path> <path d=\"M1.842,11.104c0.423,0.051,0.848-0.08,1.167-0.36l0.914-0.799v12.973c0,0.828,0.672,1.5,1.5,1.5h1.546 c0.828,0,1.5-0.672,1.5-1.5V5.567c0-0.828-0.672-1.5-1.5-1.5H5.378c-0.356,0-0.701,0.127-0.973,0.358L0.527,7.728 c-0.589,0.501-0.7,1.369-0.256,2.003l0.522,0.745C1.04,10.825,1.42,11.053,1.842,11.104z\"></path> <path d=\"M2.546,37.5c-0.647,0.23-1.056,0.872-0.99,1.556l0.096,0.999c0.048,0.497,0.339,0.938,0.778,1.176 c0.438,0.238,0.967,0.243,1.409,0.011c1.18-0.615,1.923-0.775,2.922-0.534c0.71,0.163,1.188,0.586,1.438,1.225 c0.378,1.143,0.395,2.957-2.854,6.873l-2.506,2.996c-0.589,0.688-0.99,1.119-1.302,1.404c-0.312,0.284-0.488,0.688-0.488,1.107 v1.475c0,0.828,0.672,1.5,1.5,1.5h9.132c0.828,0,1.5-0.672,1.5-1.5V55.01c0-0.828-0.672-1.5-1.5-1.5H6.896 c0.458-0.515,1.037-1.211,1.716-2.063c2.803-3.468,5.061-6.645,4.292-10.376c-0.309-1.672-1.247-2.966-2.731-3.752 c-0.826-0.424-1.879-0.639-3.127-0.639C5.629,36.68,4.031,36.971,2.546,37.5z\"></path> <path d=\"M10.491,79.516c0.25-0.135,0.487-0.289,0.74-0.483c1.718-1.313,1.801-3.335,1.786-3.885 c-0.001-1.878-0.712-3.318-2.166-4.401c-1.026-0.77-2.534-1.177-4.361-1.177c-1.347,0-2.787,0.212-4.057,0.596 c-0.668,0.202-1.107,0.839-1.063,1.533l0.058,0.88c0.031,0.471,0.28,0.896,0.673,1.155c0.394,0.259,0.886,0.319,1.327,0.159 c0.864-0.307,1.571-0.45,2.223-0.45c0.229,0,0.457,0.019,0.722,0.063c0.94,0.127,1.563,0.549,1.9,1.283 c0.237,0.52,0.19,1.445-0.083,1.885c-0.654,1.014-2.438,1.217-3.443,1.25c-0.81,0.024-1.453,0.688-1.453,1.498v0.658 c0,0.828,0.687,1.5,1.515,1.5c1.575,0,2.311,0.309,2.596,0.485c0.737,0.465,1.065,1.043,1.066,1.918 c0.025,0.912-0.348,1.606-1.129,2.121c-1.014,0.651-2.64,0.647-4.505,0.032c-0.438-0.146-0.918-0.082-1.302,0.175 c-0.384,0.255-0.629,0.672-0.665,1.132l-0.068,0.872C0.75,88.973,1.135,89.588,1.75,89.83c0.33,0.13,0.551,0.183,1.022,0.281 c0.857,0.196,1.84,0.302,2.842,0.302c1.493,0,4.248-0.247,5.944-1.919c1.657-1.69,1.974-4.11,1.56-5.729 C12.636,80.704,11.461,79.946,10.491,79.516z\"></path> </g> </g> </g></svg>\r\n </button>\r\n <button aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\" title=\"Insert Image\" >\r\n <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <!-- <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon> -->\r\n <svg viewBox=\"2 1 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M14.2647 15.9377L12.5473 14.2346C11.758 13.4519 11.3633 13.0605 10.9089 12.9137C10.5092 12.7845 10.079 12.7845 9.67922 12.9137C9.22485 13.0605 8.83017 13.4519 8.04082 14.2346L4.04193 18.2622M14.2647 15.9377L14.606 15.5991C15.412 14.7999 15.8149 14.4003 16.2773 14.2545C16.6839 14.1262 17.1208 14.1312 17.5244 14.2688C17.9832 14.4253 18.3769 14.834 19.1642 15.6515L20 16.5001M14.2647 15.9377L18.22 19.9628M18.22 19.9628C17.8703 20 17.4213 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.12583 18.7271 4.07264 18.5226 4.04193 18.2622M18.22 19.9628C18.5007 19.9329 18.7175 19.8791 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13M11 4H7.2C6.07989 4 5.51984 4 5.09202 4.21799C4.7157 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.4466 4 17.9066 4.04193 18.2622M18 9V6M18 6V3M18 6H21M18 6H15\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n <button (click)=\"openTableDialog($event)\" type=\"button\" title=\"Table\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg width=\"256px\" height=\"256px\" viewBox=\"2 12 20 3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M3 9H21M3 15H21M9 9L9 20M15 9L15 20M6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V7.2C21 6.0799 21 5.51984 20.782 5.09202C20.5903 4.71569 20.2843 4.40973 19.908 4.21799C19.4802 4 18.9201 4 17.8 4H6.2C5.0799 4 4.51984 4 4.09202 4.21799C3.71569 4.40973 3.40973 4.71569 3.21799 5.09202C3 5.51984 3 6.07989 3 7.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.07989 20 6.2 20Z\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" aria-label=\"Make Header\" title=\"Table Header\" >\r\n <!-- <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M213.333 0C95.5126 0 0 95.5126 0 213.333V1706.67C0 1824.49 95.5126 1920 213.333 1920H1706.67C1824.49 1920 1920 1824.49 1920 1706.67V213.333C1920 95.5126 1824.49 0 1706.67 0H213.333ZM266.667 746.667C237.211 746.667 213.333 722.788 213.333 693.333V373.333C213.333 343.878 237.211 320 266.667 320H1653.33C1682.79 320 1706.67 343.878 1706.67 373.333V693.333C1706.67 722.788 1682.79 746.667 1653.33 746.667H266.667Z\"></path> </g></svg>\r\n </button>\r\n\r\n <button (click)=\"openSignatureDialog($event)\" type=\"button\" title=\"Signature\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg viewBox=\"0 0 28 28\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <desc>Created with Sketch.</desc> <g id=\"\uD83D\uDD0D-Product-Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"ic_fluent_signature_28_regular\" fill=\"#212121\" fill-rule=\"nonzero\"> <path d=\"M16.4798956,21.0019578 L16.75,21 C17.9702352,21 18.6112441,21.5058032 19.4020627,22.7041662 L19.7958278,23.3124409 C20.1028266,23.766938 20.2944374,23.9573247 20.535784,24.0567929 C20.9684873,24.2351266 21.3271008,24.1474446 22.6440782,23.5133213 L23.0473273,23.3170319 C23.8709982,22.9126711 24.4330286,22.6811606 25.0680983,22.5223931 C25.4699445,22.4219316 25.8771453,22.6662521 25.9776069,23.0680983 C26.0780684,23.4699445 25.8337479,23.8771453 25.4319017,23.9776069 C25.0371606,24.0762922 24.6589465,24.2178819 24.1641364,24.4458997 L23.0054899,25.0032673 C21.4376302,25.7436944 20.9059009,25.8317321 19.964216,25.4436275 C19.3391237,25.1860028 18.9836765,24.813298 18.4635639,24.0180227 L18.2688903,23.7140849 C17.7071112,22.8288731 17.4057794,22.5384538 16.8688444,22.5036655 L16.75,22.5 C16.2017306,22.5 16.0933104,22.5684572 14.009281,24.1150241 C12.2670395,25.4079488 10.9383359,26.0254984 9.24864243,26.0254984 C7.18872869,26.0254984 5.24773367,25.647067 3.43145875,24.8905363 L6.31377803,24.2241784 C7.25769404,24.4250762 8.23567143,24.5254984 9.24864243,24.5254984 C10.5393035,24.5254984 11.609129,24.0282691 13.1153796,22.9104743 L14.275444,22.0545488 C15.5468065,21.1304903 15.8296113,21.016032 16.4798956,21.0019578 L16.4798956,21.0019578 Z M22.7770988,3.22208979 C24.4507223,4.8957133 24.4507566,7.60916079 22.7771889,9.28281324 L21.741655,10.3184475 C22.8936263,11.7199657 22.8521526,13.2053774 21.7811031,14.279556 L18.7800727,17.2805874 L18.7800727,17.2805874 C18.4870374,17.5733384 18.0121637,17.573108 17.7194126,17.2800727 C17.4266616,16.9870374 17.426892,16.5121637 17.7199273,16.2194126 L20.7188969,13.220444 C21.2039571,12.7339668 21.2600021,12.1299983 20.678941,11.3818945 L10.0845437,21.9761011 C9.78635459,22.2743053 9.41036117,22.482705 8.99944703,22.5775313 L2.91864463,23.9807934 C2.37859061,24.1054212 1.89457875,23.6214094 2.0192066,23.0813554 L3.42247794,17.0005129 C3.51729557,16.5896365 3.72566589,16.2136736 4.0238276,15.9154968 L16.7165019,3.22217992 C18.3900415,1.54855555 21.1034349,1.54851059 22.7770988,3.22208979 Z M17.7771889,4.28281324 L5.08451462,16.9761302 C4.98512738,17.0755224 4.91567061,17.2008434 4.88406473,17.3378022 L3.7506248,22.2493752 L8.66215777,21.1159445 C8.79912915,21.0843357 8.92446029,21.0148692 9.02385665,20.9154678 L21.7165019,8.22217992 C22.8043063,7.13432049 22.8042862,5.37060478 21.7164588,4.2827701 C20.6285914,3.19496507 18.8649506,3.19499653 17.7771889,4.28281324 Z\" id=\"\uD83C\uDFA8-Color\"> </path> </g> </g> </g></svg>\r\n </button>\r\n\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n\r\n <ng-template #signatureDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Draw a Signature</h2>\r\n <signature-pad #sigPad [options]=\"signaturePadOptions\" class=\"sign\" ></signature-pad>\r\n <div class=\"action\" >\r\n <!-- <button type=\"button\" class=\"normal\" > Close </button> -->\r\n <button type=\"button\" class=\"normal\" (click)=\"closeSignDialog(dialogRef)\" > Close </button>\r\n <button type=\"button\" class=\"submit\" (click)=\"submitSignDialog(dialogRef)\" > Submit </button>\r\n </div>\r\n \r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black;cursor:pointer}.tooltiptext{visibility:hidden;width:130px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1}.tooltip:hover .tooltiptext{visibility:visible}mat-icon{font-size:20px!important;color:inherit!important}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}.image-resize-wrapper{position:relative;display:inline-block}.image-resize-wrapper .resizer{width:10px;height:10px;background:#007bff;position:absolute;bottom:0;right:0;cursor:se-resize;border-radius:50%}.normal{width:50%;height:100%;border:1px solid red;border-radius:5px;color:red;padding:10px;font-size:16px}.normal:hover{color:red}.submit{width:50%;height:100%;border:none;border-radius:5px;color:#fff;padding:10px;background-color:#151544}.submit:hover{color:#fff}.action{margin-top:10px;padding:10px;display:flex;width:100%;justify-content:end;align-items:center;gap:5px}::ng-deep .sign canvas{border:1px dotted #ccc}\n"] }]
|
|
901
|
+
], template: "<div class=\"dimension\">\r\n <div class=\"rich-text-editor\">\r\n <!-- Toolbar -->\r\n <div class=\"toolbar\">\r\n <select *ngIf=\"editorOptions?.options?.textFormat ?? true\" class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n <option value=\"P\" style=\"font-size: 14px !important;\">Paragraph</option>\r\n <option value=\"H1\" style=\"font-size: 32px !important; font-weight: bold !important;\">H1</option>\r\n <option value=\"H2\" style=\"font-size: 28px !important; font-weight: bold !important;\">H2</option>\r\n <option value=\"H3\" style=\"font-size: 24px !important; font-weight: bold !important;\">H3</option>\r\n <option value=\"H4\" style=\"font-size: 20px !important; font-weight: bold !important;\">H4</option>\r\n <option value=\"H5\" style=\"font-size: 18px !important; font-weight: 600 !important;\">H5</option>\r\n <option value=\"H6\" style=\"font-size: 16px !important; font-weight: 600 !important;\">H6</option>\r\n </select>\r\n <select *ngIf=\"editorOptions?.options?.fontSize ?? true\" class=\"select-wrapper\" [(ngModel)]=\"selectedFont\"\r\n (change)=\"setFontSize($event)\">\r\n <option style=\"font-size: 12px !important;\" value=\"12\">12px</option>\r\n <option style=\"font-size: 14px !important;\" value=\"14\" selected>14px</option>\r\n <option style=\"font-size: 16px !important;\" value=\"16\">16px</option>\r\n <option style=\"font-size: 18px !important;\" value=\"18\">18px</option>\r\n <option style=\"font-size: 20px !important;\" value=\"20\">20px</option> \r\n <option style=\"font-size: 24px !important;\" value=\"24\">24px</option>\r\n <option style=\"font-size: 28px !important;\" value=\"28\">28px</option>\r\n <option style=\"font-size: 32px !important;\" value=\"32\">32px</option>\r\n <option style=\"font-size: 48px !important;\" value=\"48\">48px</option>\r\n </select>\r\n <button *ngIf=\"editorOptions?.options?.bold ?? true\" (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\" title=\"Bold\" >\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"-6.5 0 28 32\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <title>bold</title> <path d=\"M0 25.531v1.344c1.063-0.031 1.938-0.063 2.563-0.094 0.625 0 1.094-0.031 1.313-0.031 1.656-0.125 3.063-0.219 4.281-0.188l2.813 0.063c2.438 0 4.25-0.313 5.75-1 0.719-0.344 1.344-0.844 1.969-1.531 0.469-0.469 0.813-1.031 1.031-1.656 0.25-0.844 0.375-1.594 0.375-2.281 0-2.5-1.719-4.625-5.094-5.406 0.531-0.25 1.031-0.5 1.375-0.688s0.625-0.313 0.781-0.438c1.188-0.875 1.781-1.906 1.781-3.281 0-0.594-0.094-1.188-0.281-1.719-0.375-1.094-1.219-2-2.406-2.563-0.531-0.313-1.031-0.469-1.375-0.531-0.938-0.25-1.844-0.375-2.719-0.375h-1.094c-0.219 0-0.406 0-0.531-0.031h-0.5c-0.063 0-0.156 0-0.25 0.031h-0.625l-5.406 0.156-3.719 0.094 0.063 1.188c0.875 0.125 1.406 0.188 1.625 0.188 0.438 0 0.781 0.094 0.969 0.219 0.094 0 0.156 0.063 0.188 0.125 0.063 0.219 0.125 0.688 0.156 1.563 0.063 1.563 0.063 2.813 0.063 3.75 0.031 0.969 0.031 1.625 0.094 2v7.031c0 1.219-0.031 2.125-0.156 2.75-0.031 0.219-0.125 0.438-0.281 0.688-0.438 0.188-1 0.375-1.75 0.469-0.375 0.063-0.719 0.125-1 0.156zM7.719 14.281v-2.469c0.063-1.719 0-2.969-0.031-3.969-0.063-0.438-0.063-0.844-0.063-1.063 0.75-0.156 1.344-0.219 1.844-0.219 1.625 0 2.844 0.344 3.656 1.094 0.813 0.688 1.219 1.563 1.219 2.656 0 2.969-1.75 4.094-5.063 4.094-0.563 0-1.094-0.031-1.563-0.125zM7.719 20.406v-4.5c0.313-0.063 0.75-0.125 1.438-0.125 1.594-0.031 2.813 0.125 3.563 0.438 1.531 0.563 2.594 2.188 2.594 4.344 0 1.031-0.219 1.844-0.563 2.563-0.375 0.719-0.906 1.219-1.719 1.594-1.656 0.781-3.719 0.719-5.125 0.125-0.094-0.25-0.125-0.438-0.125-0.594z\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.italic ?? true\" (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\" title=\"Italic\">\r\n <!-- <mat-icon>format_italic</mat-icon> -->\r\n <svg viewBox=\"4 0 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Italic\"> <path id=\"Vector\" d=\"M8 19H10M10 19H12M10 19L14 5M12 5H14M14 5H16\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.underline ?? true\" (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\" title=\"Underline\">\r\n <!-- <mat-icon>format_underline</mat-icon> -->\r\n <svg viewBox=\"4 0 18 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Underline\"> <path id=\"Vector\" d=\"M6 19H18M8 5V11C8 13.2091 9.79086 15 12 15C14.2091 15 16 13.2091 16 11V5\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.strikethrough ?? true\" (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\" title=\"Strikethrough\">\r\n <!-- <mat-icon>strikethrough_s</mat-icon> -->\r\n <svg viewBox=\"4 0 20 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g id=\"Edit / Strikethrough\"> <path id=\"Vector\" d=\"M12.0005 12.0001C12.8959 12.0001 13.7749 12.1925 14.5457 12.5571C14.8939 12.7218 15.2146 12.9192 15.5009 13.1437C15.8484 13.4162 16.1457 13.729 16.3822 14.0732C16.8136 14.7009 17.0263 15.4096 16.9982 16.1256C16.97 16.8416 16.702 17.5385 16.2222 18.1433C15.7424 18.7481 15.0684 19.2386 14.2705 19.5638C13.4727 19.889 12.5802 20.0373 11.6865 19.9923C10.7928 19.9473 9.93104 19.7108 9.19043 19.3082C8.44982 18.9055 7.85782 18.3514 7.47656 17.7032M12.0005 12.0001H4M12.0005 12.0001H20M16.5243 6.29718C16.143 5.649 15.5512 5.09462 14.8105 4.69197C14.0699 4.28932 13.2076 4.05287 12.314 4.00789C11.4203 3.96291 10.5278 4.11091 9.72998 4.43613C8.93213 4.76135 8.25812 5.25205 7.77832 5.85689C7.29852 6.46173 7.03057 7.15885 7.00244 7.87485C6.9942 8.08463 7.00669 8.29345 7.03924 8.50014\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignLeft ?? true\" (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\" title=\"Align Left\" >\r\n <!-- <mat-icon>format_align_left</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M11 1H1V3H11V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 9H1V11H11V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignCenter ?? true\" (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\" title=\"Align Center\" >\r\n <!-- <mat-icon>format_align_center</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H1V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H1V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M11 13H1V15H11V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.alignRight ?? true\" (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\" title=\"Align Right\" >\r\n <!-- <mat-icon>format_align_right</mat-icon> -->\r\n <svg viewBox=\"0 0 16 16\" [attr.fill]=\"iconColor\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M15 1H5V3H15V1Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M1 5H15V7H1V5Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 9H5V11H15V9Z\" [attr.fill]=\"iconColor\"></path> <path d=\"M15 13H1V15H15V13Z\" [attr.fill]=\"iconColor\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.justify ?? true\" (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\" title=\"Justify\" >\r\n <!-- <mat-icon>format_align_justify</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 -2.5 29 29\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"m1.334 2.666h26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001h.002-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002z\"></path><path d=\"m27.999 5.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.011 0 .024.001.037.001.737 0 1.334-.597 1.334-1.334s-.597-1.334-1.334-1.334c-.013 0-.026 0-.039.001z\"></path><path d=\"m27.999 10.667h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 21.333h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path><path d=\"m27.999 16h-26.665c-.72.021-1.296.61-1.296 1.333s.576 1.312 1.294 1.333h.002 26.665c.72-.021 1.296-.61 1.296-1.333s-.576-1.312-1.294-1.333z\"></path></g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.bulletList ?? true\" (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\" title=\"Bullet List\" >\r\n <!-- <mat-icon>format_list_bulleted</mat-icon> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.fill]=\"iconColor\" viewBox=\"0 0 36 48\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"><path d=\"M8 21c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM8 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 24.33c-1.47 0-2.67 1.19-2.67 2.67s1.2 2.67 2.67 2.67 2.67-1.19 2.67-2.67-1.2-2.67-2.67-2.67zM14 38h28v-4H14v4zm0-12h28v-4H14v4zm0-16v4h28v-4H14z\"></path></g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.numberedList ?? true\" (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\" title=\"Numbered List\" >\r\n <!-- <mat-icon>format_list_numbered</mat-icon> -->\r\n <svg [attr.fill]=\"iconColor\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 94.479 94.479\" xml:space=\"preserve\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <g> <g> <path d=\"M92.479,6.821H26.823c-1.104,0-2,0.896-2,2V19.58c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V8.821 C94.479,7.717,93.584,6.821,92.479,6.821z\"></path> <path d=\"M92.479,40.457H26.823c-1.104,0-2,0.896-2,2v10.761c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V42.457 C94.479,41.352,93.584,40.457,92.479,40.457z\"></path> <path d=\"M92.479,75.109H26.823c-1.104,0-2,0.896-2,2v10.759c0,1.104,0.896,2,2,2h65.656c1.104,0,2-0.896,2-2V77.109 C94.479,76.004,93.584,75.109,92.479,75.109z\"></path> <path d=\"M1.842,11.104c0.423,0.051,0.848-0.08,1.167-0.36l0.914-0.799v12.973c0,0.828,0.672,1.5,1.5,1.5h1.546 c0.828,0,1.5-0.672,1.5-1.5V5.567c0-0.828-0.672-1.5-1.5-1.5H5.378c-0.356,0-0.701,0.127-0.973,0.358L0.527,7.728 c-0.589,0.501-0.7,1.369-0.256,2.003l0.522,0.745C1.04,10.825,1.42,11.053,1.842,11.104z\"></path> <path d=\"M2.546,37.5c-0.647,0.23-1.056,0.872-0.99,1.556l0.096,0.999c0.048,0.497,0.339,0.938,0.778,1.176 c0.438,0.238,0.967,0.243,1.409,0.011c1.18-0.615,1.923-0.775,2.922-0.534c0.71,0.163,1.188,0.586,1.438,1.225 c0.378,1.143,0.395,2.957-2.854,6.873l-2.506,2.996c-0.589,0.688-0.99,1.119-1.302,1.404c-0.312,0.284-0.488,0.688-0.488,1.107 v1.475c0,0.828,0.672,1.5,1.5,1.5h9.132c0.828,0,1.5-0.672,1.5-1.5V55.01c0-0.828-0.672-1.5-1.5-1.5H6.896 c0.458-0.515,1.037-1.211,1.716-2.063c2.803-3.468,5.061-6.645,4.292-10.376c-0.309-1.672-1.247-2.966-2.731-3.752 c-0.826-0.424-1.879-0.639-3.127-0.639C5.629,36.68,4.031,36.971,2.546,37.5z\"></path> <path d=\"M10.491,79.516c0.25-0.135,0.487-0.289,0.74-0.483c1.718-1.313,1.801-3.335,1.786-3.885 c-0.001-1.878-0.712-3.318-2.166-4.401c-1.026-0.77-2.534-1.177-4.361-1.177c-1.347,0-2.787,0.212-4.057,0.596 c-0.668,0.202-1.107,0.839-1.063,1.533l0.058,0.88c0.031,0.471,0.28,0.896,0.673,1.155c0.394,0.259,0.886,0.319,1.327,0.159 c0.864-0.307,1.571-0.45,2.223-0.45c0.229,0,0.457,0.019,0.722,0.063c0.94,0.127,1.563,0.549,1.9,1.283 c0.237,0.52,0.19,1.445-0.083,1.885c-0.654,1.014-2.438,1.217-3.443,1.25c-0.81,0.024-1.453,0.688-1.453,1.498v0.658 c0,0.828,0.687,1.5,1.515,1.5c1.575,0,2.311,0.309,2.596,0.485c0.737,0.465,1.065,1.043,1.066,1.918 c0.025,0.912-0.348,1.606-1.129,2.121c-1.014,0.651-2.64,0.647-4.505,0.032c-0.438-0.146-0.918-0.082-1.302,0.175 c-0.384,0.255-0.629,0.672-0.665,1.132l-0.068,0.872C0.75,88.973,1.135,89.588,1.75,89.83c0.33,0.13,0.551,0.183,1.022,0.281 c0.857,0.196,1.84,0.302,2.842,0.302c1.493,0,4.248-0.247,5.944-1.919c1.657-1.69,1.974-4.11,1.56-5.729 C12.636,80.704,11.461,79.946,10.491,79.516z\"></path> </g> </g> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.image ?? true\" aria-label=\"Insert Image\" type=\"button\"\r\n style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\" title=\"Insert Image\" >\r\n <input type=\"file\" accept=\"png,jpg,jpeg\" (change)=\"insertImageToEditor($event)\"\r\n style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n aria-hidden=\"true\" />\r\n <!-- <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon> -->\r\n <svg viewBox=\"2 1 20 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M14.2647 15.9377L12.5473 14.2346C11.758 13.4519 11.3633 13.0605 10.9089 12.9137C10.5092 12.7845 10.079 12.7845 9.67922 12.9137C9.22485 13.0605 8.83017 13.4519 8.04082 14.2346L4.04193 18.2622M14.2647 15.9377L14.606 15.5991C15.412 14.7999 15.8149 14.4003 16.2773 14.2545C16.6839 14.1262 17.1208 14.1312 17.5244 14.2688C17.9832 14.4253 18.3769 14.834 19.1642 15.6515L20 16.5001M14.2647 15.9377L18.22 19.9628M18.22 19.9628C17.8703 20 17.4213 20 16.8 20H7.2C6.07989 20 5.51984 20 5.09202 19.782C4.7157 19.5903 4.40973 19.2843 4.21799 18.908C4.12583 18.7271 4.07264 18.5226 4.04193 18.2622M18.22 19.9628C18.5007 19.9329 18.7175 19.8791 18.908 19.782C19.2843 19.5903 19.5903 19.2843 19.782 18.908C20 18.4802 20 17.9201 20 16.8V13M11 4H7.2C6.07989 4 5.51984 4 5.09202 4.21799C4.7157 4.40973 4.40973 4.71569 4.21799 5.09202C4 5.51984 4 6.0799 4 7.2V16.8C4 17.4466 4 17.9066 4.04193 18.2622M18 9V6M18 6V3M18 6H21M18 6H15\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.table ?? true\" (click)=\"openTableDialog($event)\" type=\"button\" title=\"Table\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg width=\"256px\" height=\"256px\" viewBox=\"2 12 20 3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M3 9H21M3 15H21M9 9L9 20M15 9L15 20M6.2 20H17.8C18.9201 20 19.4802 20 19.908 19.782C20.2843 19.5903 20.5903 19.2843 20.782 18.908C21 18.4802 21 17.9201 21 16.8V7.2C21 6.0799 21 5.51984 20.782 5.09202C20.5903 4.71569 20.2843 4.40973 19.908 4.21799C19.4802 4 18.9201 4 17.8 4H6.2C5.0799 4 4.51984 4 4.09202 4.21799C3.71569 4.40973 3.40973 4.71569 3.21799 5.09202C3 5.51984 3 6.07989 3 7.2V16.8C3 17.9201 3 18.4802 3.21799 18.908C3.40973 19.2843 3.71569 19.5903 4.09202 19.782C4.51984 20 5.07989 20 6.2 20Z\" [attr.stroke]=\"iconColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.tableHeader ?? true\" class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" aria-label=\"Make Header\" title=\"Table Header\" >\r\n <!-- <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n page_header\r\n </span> -->\r\n <svg [attr.fill]=\"iconColor\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M213.333 0C95.5126 0 0 95.5126 0 213.333V1706.67C0 1824.49 95.5126 1920 213.333 1920H1706.67C1824.49 1920 1920 1824.49 1920 1706.67V213.333C1920 95.5126 1824.49 0 1706.67 0H213.333ZM266.667 746.667C237.211 746.667 213.333 722.788 213.333 693.333V373.333C213.333 343.878 237.211 320 266.667 320H1653.33C1682.79 320 1706.67 343.878 1706.67 373.333V693.333C1706.67 722.788 1682.79 746.667 1653.33 746.667H266.667Z\"></path> </g></svg>\r\n </button>\r\n\r\n <button *ngIf=\"editorOptions?.options?.signature ?? true\" (click)=\"openSignatureDialog($event)\" type=\"button\" title=\"Signature\"\r\n aria-label=\"Choose table rows and columns\">\r\n <!-- <mat-icon>border_all</mat-icon> -->\r\n <svg viewBox=\"0 0 28 28\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <desc>Created with Sketch.</desc> <g id=\"\uD83D\uDD0D-Product-Icons\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"ic_fluent_signature_28_regular\" fill=\"#212121\" fill-rule=\"nonzero\"> <path d=\"M16.4798956,21.0019578 L16.75,21 C17.9702352,21 18.6112441,21.5058032 19.4020627,22.7041662 L19.7958278,23.3124409 C20.1028266,23.766938 20.2944374,23.9573247 20.535784,24.0567929 C20.9684873,24.2351266 21.3271008,24.1474446 22.6440782,23.5133213 L23.0473273,23.3170319 C23.8709982,22.9126711 24.4330286,22.6811606 25.0680983,22.5223931 C25.4699445,22.4219316 25.8771453,22.6662521 25.9776069,23.0680983 C26.0780684,23.4699445 25.8337479,23.8771453 25.4319017,23.9776069 C25.0371606,24.0762922 24.6589465,24.2178819 24.1641364,24.4458997 L23.0054899,25.0032673 C21.4376302,25.7436944 20.9059009,25.8317321 19.964216,25.4436275 C19.3391237,25.1860028 18.9836765,24.813298 18.4635639,24.0180227 L18.2688903,23.7140849 C17.7071112,22.8288731 17.4057794,22.5384538 16.8688444,22.5036655 L16.75,22.5 C16.2017306,22.5 16.0933104,22.5684572 14.009281,24.1150241 C12.2670395,25.4079488 10.9383359,26.0254984 9.24864243,26.0254984 C7.18872869,26.0254984 5.24773367,25.647067 3.43145875,24.8905363 L6.31377803,24.2241784 C7.25769404,24.4250762 8.23567143,24.5254984 9.24864243,24.5254984 C10.5393035,24.5254984 11.609129,24.0282691 13.1153796,22.9104743 L14.275444,22.0545488 C15.5468065,21.1304903 15.8296113,21.016032 16.4798956,21.0019578 L16.4798956,21.0019578 Z M22.7770988,3.22208979 C24.4507223,4.8957133 24.4507566,7.60916079 22.7771889,9.28281324 L21.741655,10.3184475 C22.8936263,11.7199657 22.8521526,13.2053774 21.7811031,14.279556 L18.7800727,17.2805874 L18.7800727,17.2805874 C18.4870374,17.5733384 18.0121637,17.573108 17.7194126,17.2800727 C17.4266616,16.9870374 17.426892,16.5121637 17.7199273,16.2194126 L20.7188969,13.220444 C21.2039571,12.7339668 21.2600021,12.1299983 20.678941,11.3818945 L10.0845437,21.9761011 C9.78635459,22.2743053 9.41036117,22.482705 8.99944703,22.5775313 L2.91864463,23.9807934 C2.37859061,24.1054212 1.89457875,23.6214094 2.0192066,23.0813554 L3.42247794,17.0005129 C3.51729557,16.5896365 3.72566589,16.2136736 4.0238276,15.9154968 L16.7165019,3.22217992 C18.3900415,1.54855555 21.1034349,1.54851059 22.7770988,3.22208979 Z M17.7771889,4.28281324 L5.08451462,16.9761302 C4.98512738,17.0755224 4.91567061,17.2008434 4.88406473,17.3378022 L3.7506248,22.2493752 L8.66215777,21.1159445 C8.79912915,21.0843357 8.92446029,21.0148692 9.02385665,20.9154678 L21.7165019,8.22217992 C22.8043063,7.13432049 22.8042862,5.37060478 21.7164588,4.2827701 C20.6285914,3.19496507 18.8649506,3.19499653 17.7771889,4.28281324 Z\" id=\"\uD83C\uDFA8-Color\"> </path> </g> </g> </g></svg>\r\n </button>\r\n\r\n </div>\r\n <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\" (keyup)=\"onEditorKeyUp($event)\" (mouseup)=\"updateCurrentFormat()\"\r\n (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n </div>\r\n </div>\r\n <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Choose Table Size</h2>\r\n <mat-dialog-content>\r\n <div class=\"grid-container\">\r\n <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n 'grid-item': true,\r\n 'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n </div>\r\n <p>{{ rows }} x {{ cols }} </p>\r\n </mat-dialog-content>\r\n </ng-template>\r\n\r\n <ng-template #signatureDialog let-dialogRef=\"dialogRef\">\r\n <h2 mat-dialog-title>Draw a Signature</h2>\r\n <signature-pad #sigPad [options]=\"signaturePadOptions\" class=\"sign\" ></signature-pad>\r\n <div class=\"action\" >\r\n <!-- <button type=\"button\" class=\"normal\" > Close </button> -->\r\n <button type=\"button\" class=\"normal\" (click)=\"closeSignDialog(dialogRef)\" > Close </button>\r\n <button type=\"button\" class=\"submit\" (click)=\"submitSignDialog(dialogRef)\" > Submit </button>\r\n </div>\r\n \r\n </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%}::ng-deep .editor table,::ng-deep .editor th,::ng-deep .editor td{border:1px solid black;border-collapse:collapse}::ng-deep .editor th,::ng-deep .editor td{padding:.4rem}::ng-deep .editor th{background-color:#f3f3f3}.fs-12{font-size:12px!important}.fs-13{font-size:13px!important}.fs-14{font-size:14px!important}.fs-16{font-size:16px!important}.fs-18{font-size:18px!important}.fs-20{font-size:20px!important}.fs-24{font-size:24px!important}.fs-28{font-size:28px!important}.editor h1{font-size:32px!important;font-weight:700!important;margin:0}.editor h2{font-size:28px!important;font-weight:700!important;margin:0}.editor h3{font-size:24px!important;font-weight:700!important;margin:0}.editor h4{font-size:20px!important;font-weight:700!important;margin:0}.editor h5{font-size:18px!important;font-weight:600!important;margin:0}.editor h6{font-size:16px!important;font-weight:600!important;margin:0}.editor p{font-size:14px!important;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted black;cursor:pointer}.tooltiptext{visibility:hidden;width:130px;background-color:#000;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1}.tooltip:hover .tooltiptext{visibility:visible}mat-icon{font-size:20px!important;color:inherit!important}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}.image-resize-wrapper{position:relative;display:inline-block}.image-resize-wrapper .resizer{width:10px;height:10px;background:#007bff;position:absolute;bottom:0;right:0;cursor:se-resize;border-radius:50%}.normal{width:50%;height:100%;border:1px solid red;border-radius:5px;color:red;padding:10px;font-size:16px}.normal:hover{color:red}.submit{width:50%;height:100%;border:none;border-radius:5px;color:#fff;padding:10px;background-color:#151544}.submit:hover{color:#fff}.action{margin-top:10px;padding:10px;display:flex;width:100%;justify-content:end;align-items:center;gap:5px}::ng-deep .sign canvas{border:1px dotted #ccc}\n"] }]
|
|
878
902
|
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentCapture: [{
|
|
879
903
|
type: Input
|
|
880
904
|
}], height: [{
|
|
@@ -883,6 +907,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
883
907
|
type: Input
|
|
884
908
|
}], iconColor: [{
|
|
885
909
|
type: Input
|
|
910
|
+
}], editorOptions: [{
|
|
911
|
+
type: Input,
|
|
912
|
+
args: ['editorOptions']
|
|
886
913
|
}], contentChange: [{
|
|
887
914
|
type: Output
|
|
888
915
|
}], editor: [{
|