@cleavelandprice/ngx-lib 4.0.8 → 4.1.0
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/esm2022/quill/components/editor/editor.component.mjs +113 -110
- package/esm2022/quill/components/raw/raw.component.mjs +5 -3
- package/esm2022/quill/mention/components/editor/editor.component.mjs +36 -39
- package/esm2022/quill/mention/quill-mention.api.mjs +4 -3
- package/esm2022/quill/model/buttons.mjs +51 -52
- package/esm2022/quill/model/config.mjs +10 -19
- package/esm2022/quill/model/icons.mjs +14 -9
- package/esm2022/quill/model/tooltips.mjs +54 -55
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +44 -52
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +235 -229
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
- package/package.json +7 -7
- package/quill/components/editor/editor.component.d.ts +25 -18
- package/quill/mention/components/editor/editor.component.d.ts +2 -3
- package/quill/mention/quill-mention.api.d.ts +1 -5
- package/quill/model/buttons.d.ts +29 -28
- package/quill/model/config.d.ts +22 -9
- package/quill/model/icons.d.ts +6 -5
- package/quill/model/tooltips.d.ts +32 -31
- package/esm2022/quill/mention/model/buttons.mjs +0 -4
- package/esm2022/quill/mention/model/config.mjs +0 -4
- package/esm2022/quill/mention/model/icons.mjs +0 -4
- package/esm2022/quill/mention/model/tooltips.mjs +0 -4
- package/quill/mention/model/buttons.d.ts +0 -3
- package/quill/mention/model/config.d.ts +0 -3
- package/quill/mention/model/icons.d.ts +0 -3
- package/quill/mention/model/tooltips.d.ts +0 -3
|
@@ -1,138 +1,141 @@
|
|
|
1
|
+
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Component, viewChild, output, forwardRef,
|
|
3
|
+
import { inject, Component, viewChild, model, output, forwardRef, NgModule, Optional, SkipSelf } from '@angular/core';
|
|
3
4
|
import * as i1 from '@angular/forms';
|
|
4
5
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
5
6
|
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
6
|
-
import { QuillEditorComponent, QuillModule as QuillModule$1 } from 'ngx-quill';
|
|
7
|
-
import { NgTemplateOutlet, CommonModule } from '@angular/common';
|
|
8
7
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
9
8
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
9
|
+
import { QuillEditorComponent, QuillModule as QuillModule$1 } from 'ngx-quill';
|
|
10
10
|
import { MatButton, MatButtonModule } from '@angular/material/button';
|
|
11
11
|
import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
|
|
12
|
-
import { MatInputModule } from '@angular/material/input';
|
|
12
|
+
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
14
|
+
;
|
|
15
|
+
const DefaultButtons = {
|
|
16
|
+
//#region Font Style
|
|
17
|
+
bold: true,
|
|
18
|
+
italic: true,
|
|
19
|
+
strike: true,
|
|
20
|
+
underline: true,
|
|
21
|
+
//#endregion
|
|
22
|
+
//#region Media
|
|
23
|
+
link: true,
|
|
24
|
+
image: true,
|
|
25
|
+
video: true,
|
|
26
|
+
//#endregion
|
|
27
|
+
//#region Block Style
|
|
28
|
+
blockquote: true,
|
|
29
|
+
codeblock: true,
|
|
30
|
+
//#endregion
|
|
31
|
+
//#region Heading Style
|
|
32
|
+
h1: true,
|
|
33
|
+
h2: true,
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region Color
|
|
36
|
+
color: true,
|
|
37
|
+
//#endregion
|
|
38
|
+
//#region List Style
|
|
39
|
+
bulleted: true,
|
|
40
|
+
ordered: true,
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region Script Style
|
|
43
|
+
subScript: true,
|
|
44
|
+
superScript: true,
|
|
45
|
+
//#endregion
|
|
46
|
+
//#region Indent Style
|
|
47
|
+
increaseIndent: true,
|
|
48
|
+
decreaseIndent: true,
|
|
49
|
+
//#endregion
|
|
50
|
+
//#region DropDowns
|
|
51
|
+
align: true,
|
|
52
|
+
font: true,
|
|
53
|
+
fontSize: true,
|
|
54
|
+
headingStyle: true,
|
|
55
|
+
//#endregion
|
|
56
|
+
//#region Single Buttons
|
|
57
|
+
clean: true,
|
|
58
|
+
formula: true,
|
|
59
|
+
rtl: true,
|
|
60
|
+
editorSize: true,
|
|
61
|
+
rawEditor: false,
|
|
62
|
+
//#endregion
|
|
63
|
+
};
|
|
65
64
|
|
|
66
|
-
class Icons {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
65
|
+
/*export class Icons {
|
|
66
|
+
maximize = 'open_in_full';
|
|
67
|
+
minimize = 'close_fullscreen';
|
|
68
|
+
popout = 'open_in_full';
|
|
69
|
+
popin = 'done';
|
|
70
|
+
}*/
|
|
71
|
+
;
|
|
72
|
+
const DefaultIcons = {
|
|
73
|
+
maximize: 'open_in_full',
|
|
74
|
+
minimize: 'close_fullscreen',
|
|
75
|
+
popout: 'open_in_full',
|
|
76
|
+
popin: 'done'
|
|
77
|
+
};
|
|
74
78
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
79
|
+
;
|
|
80
|
+
const DefaultTooltips = {
|
|
81
|
+
//#region Font Style
|
|
82
|
+
bold: 'Bold',
|
|
83
|
+
italic: 'Italic',
|
|
84
|
+
strike: 'Strikethrough',
|
|
85
|
+
underline: 'Underline',
|
|
86
|
+
//#endregion
|
|
87
|
+
//#region Media
|
|
88
|
+
link: 'Link',
|
|
89
|
+
image: 'Insert Image',
|
|
90
|
+
video: 'Insert Video',
|
|
91
|
+
//#endregion
|
|
92
|
+
//#region Block Style
|
|
93
|
+
blockquote: 'Blockquote',
|
|
94
|
+
codeblock: 'Code Block',
|
|
95
|
+
//#endregion
|
|
96
|
+
//#region Heading Style
|
|
97
|
+
h1: 'Heading 1',
|
|
98
|
+
h2: 'Heading 2',
|
|
99
|
+
//#endregion
|
|
100
|
+
//#region Color
|
|
101
|
+
color: 'Font / Background Color',
|
|
102
|
+
//#endregion
|
|
103
|
+
//#region List Style
|
|
104
|
+
bulleted: 'Bulleted List',
|
|
105
|
+
ordered: 'Ordered List',
|
|
106
|
+
//#endregion
|
|
107
|
+
//#region Script Style
|
|
108
|
+
subScript: 'Subscript',
|
|
109
|
+
superScript: 'Superscript',
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region Indent Style
|
|
112
|
+
increaseIndent: 'Increase Indent',
|
|
113
|
+
decreaseIndent: 'Decrease Indent',
|
|
114
|
+
//#endregion
|
|
115
|
+
//#region DropDowns
|
|
116
|
+
align: 'Align',
|
|
117
|
+
font: 'Font',
|
|
118
|
+
fontSize: 'Font Size',
|
|
119
|
+
headingStyle: 'Heading',
|
|
120
|
+
//#endregion
|
|
121
|
+
//#region Single Buttons
|
|
122
|
+
clean: 'Clean',
|
|
123
|
+
formula: 'Formula',
|
|
124
|
+
rtl: 'Right-To-Left',
|
|
125
|
+
maximize: 'Maximize',
|
|
126
|
+
minimize: 'Minimize',
|
|
127
|
+
popout: 'Popout',
|
|
128
|
+
popin: 'Done',
|
|
129
|
+
rawEditor: 'Edit raw HTML (dangerous!)'
|
|
130
|
+
//#endregion
|
|
131
|
+
};
|
|
129
132
|
|
|
130
|
-
class
|
|
133
|
+
class DefaultConfig {
|
|
131
134
|
constructor() {
|
|
132
|
-
this.buttons =
|
|
133
|
-
this.
|
|
134
|
-
this.
|
|
135
|
-
//#region These can be overriden via
|
|
135
|
+
this.buttons = DefaultButtons;
|
|
136
|
+
this.icons = DefaultIcons;
|
|
137
|
+
this.tooltips = DefaultTooltips;
|
|
138
|
+
//#region These can be overriden via input()
|
|
136
139
|
this.format = 'html';
|
|
137
140
|
this.height = '50vh';
|
|
138
141
|
this.width = '100%';
|
|
@@ -148,28 +151,19 @@ class Config {
|
|
|
148
151
|
//#region Optional Quill modules
|
|
149
152
|
this.imageResizeModule = true;
|
|
150
153
|
this.imageDropModule = true;
|
|
151
|
-
//mentionModule = true;
|
|
152
154
|
this.syntaxModule = true;
|
|
153
155
|
//#endregion
|
|
154
156
|
//#endregion
|
|
155
|
-
//#region Groups
|
|
156
|
-
this.showBlockStyle = () => this.buttons.blockquote || this.buttons.codeblock;
|
|
157
|
-
this.showFontStyle = () => this.buttons.bold || this.buttons.italic || this.buttons.strike || this.buttons.underline;
|
|
158
|
-
this.showQuickHeadingStyle = () => this.buttons.h1 || this.buttons.h2;
|
|
159
|
-
this.showIndentStyle = () => this.buttons.decreaseIndent || this.buttons.increaseIndent;
|
|
160
|
-
this.showListStyle = () => this.buttons.bulleted || this.buttons.ordered;
|
|
161
|
-
this.showMedia = () => this.buttons.link || this.buttons.image || this.buttons.video;
|
|
162
|
-
this.showScriptStyle = () => this.buttons.subScript || this.buttons.superScript;
|
|
163
|
-
//#endregion
|
|
164
157
|
}
|
|
165
158
|
}
|
|
159
|
+
;
|
|
166
160
|
|
|
167
161
|
class RawComponent {
|
|
168
162
|
constructor() {
|
|
169
163
|
this.data = inject(MAT_DIALOG_DATA);
|
|
170
164
|
}
|
|
171
165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
173
167
|
}
|
|
174
168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: RawComponent, decorators: [{
|
|
175
169
|
type: Component,
|
|
@@ -180,7 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
180
174
|
MatDialogClose,
|
|
181
175
|
MatDialogContent,
|
|
182
176
|
MatFormField,
|
|
183
|
-
MatIcon
|
|
177
|
+
MatIcon,
|
|
178
|
+
MatInput
|
|
184
179
|
], template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
|
|
185
180
|
}] });
|
|
186
181
|
|
|
@@ -189,11 +184,30 @@ class EditorComponent {
|
|
|
189
184
|
this.#data = inject(MAT_DIALOG_DATA, { optional: true });
|
|
190
185
|
this.#dialogRef = inject((MatDialogRef), { optional: true });
|
|
191
186
|
this.#dialog = inject(MatDialog);
|
|
192
|
-
//@ViewChild(QuillEditorComponent, { static: false }) editor?: QuillEditorComponent;
|
|
193
187
|
this.editor = viewChild(QuillEditorComponent);
|
|
194
188
|
this.onChange = (_) => { }; // Invoked when the model has been changed
|
|
195
189
|
this.onTouched = () => { }; // Invoked when the model has been touched
|
|
196
190
|
//#endregion
|
|
191
|
+
this.config = model(new DefaultConfig());
|
|
192
|
+
this.placeholder = model();
|
|
193
|
+
//#region These can be passed in as @Input(), or use values from config
|
|
194
|
+
this.format = model();
|
|
195
|
+
this.height = model();
|
|
196
|
+
this.width = model();
|
|
197
|
+
this.fullscreenHeight = model();
|
|
198
|
+
this.fullscreenWidth = model();
|
|
199
|
+
this.fullscreenMode = model();
|
|
200
|
+
this.enableTooltips = model();
|
|
201
|
+
this.fullscreen = model();
|
|
202
|
+
this.readonly = model();
|
|
203
|
+
this.applyReadonlyStyle = model();
|
|
204
|
+
this.showToolbar = model();
|
|
205
|
+
this.showBorder = model();
|
|
206
|
+
//#region Optional Quill modules
|
|
207
|
+
this.imageResizeModule = model();
|
|
208
|
+
this.imageDropModule = model();
|
|
209
|
+
this.syntaxModule = model();
|
|
210
|
+
//#endregion
|
|
197
211
|
//#endregion
|
|
198
212
|
this.fullscreenChanged = output();
|
|
199
213
|
//#region Passthrough events
|
|
@@ -204,6 +218,20 @@ class EditorComponent {
|
|
|
204
218
|
this.onFocus = output();
|
|
205
219
|
this.onSelectionChanged = output();
|
|
206
220
|
}
|
|
221
|
+
get showBlockStyle() { return (this.config()?.buttons?.blockquote || this.config()?.buttons?.codeblock) ?? false; }
|
|
222
|
+
;
|
|
223
|
+
get showFontStyle() { return (this.config()?.buttons?.bold || this.config()?.buttons?.italic || this.config()?.buttons?.strike || this.config()?.buttons?.underline) ?? false; }
|
|
224
|
+
;
|
|
225
|
+
get showQuickHeadingStyle() { return (this.config()?.buttons?.h1 || this.config()?.buttons?.h2) ?? false; }
|
|
226
|
+
;
|
|
227
|
+
get showIndentStyle() { return (this.config()?.buttons?.decreaseIndent || this.config()?.buttons?.increaseIndent) ?? false; }
|
|
228
|
+
;
|
|
229
|
+
get showListStyle() { return (this.config()?.buttons?.bulleted || this.config()?.buttons?.ordered) ?? false; }
|
|
230
|
+
;
|
|
231
|
+
get showMedia() { return (this.config()?.buttons?.link || this.config()?.buttons?.image || this.config()?.buttons?.video) ?? false; }
|
|
232
|
+
;
|
|
233
|
+
get showScriptStyle() { return (this.config()?.buttons?.subScript || this.config()?.buttons?.superScript) ?? false; }
|
|
234
|
+
;
|
|
207
235
|
#data;
|
|
208
236
|
#dialogRef;
|
|
209
237
|
#dialog;
|
|
@@ -217,78 +245,90 @@ class EditorComponent {
|
|
|
217
245
|
}*/
|
|
218
246
|
}
|
|
219
247
|
initialize() {
|
|
220
|
-
this.config
|
|
248
|
+
this.config.set({
|
|
249
|
+
...new DefaultConfig(),
|
|
250
|
+
...this.config(),
|
|
251
|
+
...this.#data?.config,
|
|
252
|
+
buttons: this.config()?.buttons ?? DefaultButtons,
|
|
253
|
+
icons: {
|
|
254
|
+
...DefaultIcons,
|
|
255
|
+
...this.config()?.icons
|
|
256
|
+
},
|
|
257
|
+
tooltips: {
|
|
258
|
+
...DefaultTooltips,
|
|
259
|
+
...this.config()?.tooltips
|
|
260
|
+
}
|
|
261
|
+
});
|
|
221
262
|
this.value = this.value ?? this.#data?.value;
|
|
222
263
|
// Moved to client responsibility
|
|
223
264
|
/*if (this.imageDropModule) {
|
|
224
265
|
Quill.register('modules/imageDrop', ImageDrop);
|
|
225
266
|
}*/
|
|
226
|
-
this.placeholder
|
|
227
|
-
|
|
228
|
-
this.
|
|
229
|
-
this.
|
|
230
|
-
this.
|
|
231
|
-
this.
|
|
232
|
-
this.
|
|
233
|
-
this.
|
|
234
|
-
this.
|
|
235
|
-
this.
|
|
236
|
-
this.
|
|
237
|
-
|
|
238
|
-
this.enableTooltips
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
this.fullscreen
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
this.readonly
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
this.applyReadonlyStyle
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
this.showToolbar
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
this.showBorder
|
|
254
|
-
this.#data?.showBorder ?? this.config.showBorder;
|
|
267
|
+
this.placeholder.set(this.placeholder() ?? this.#data?.placeholder);
|
|
268
|
+
this.imageDropModule.set(this.imageDropModule() ?? this.#data?.imageDropModule ?? this.config().imageDropModule);
|
|
269
|
+
this.imageResizeModule.set(this.imageResizeModule() ?? this.#data?.imageResizeModule ?? this.config().imageResizeModule);
|
|
270
|
+
this.syntaxModule.set(this.syntaxModule() ?? this.#data?.syntaxModule ?? this.config().syntaxModule);
|
|
271
|
+
this.format.set(this.format() ?? this.#data?.format ?? this.config().format);
|
|
272
|
+
this.height.set(this.height() ?? this.#data?.height ?? this.config().height);
|
|
273
|
+
this.width.set(this.width() ?? this.#data?.width ?? this.config().width);
|
|
274
|
+
this.fullscreenHeight.set(this.fullscreenHeight() ?? this.#data?.maxHeight ?? this.config().fullscreenHeight);
|
|
275
|
+
this.fullscreenWidth.set(this.fullscreenWidth() ?? this.#data?.maxWidth ?? this.config().fullscreenWidth);
|
|
276
|
+
this.fullscreenMode.set(this.fullscreenMode() ?? this.#data?.fullscreenMode ?? this.config().fullscreenMode);
|
|
277
|
+
this.enableTooltips.set(this.enableTooltips() !== undefined ?
|
|
278
|
+
this.enableTooltips() :
|
|
279
|
+
this.#data?.enableTooltips ?? this.config().enableTooltips);
|
|
280
|
+
this.fullscreen.set(this.fullscreen() !== undefined ?
|
|
281
|
+
this.fullscreen() :
|
|
282
|
+
this.#data?.fullscreen ?? this.config().fullscreen);
|
|
283
|
+
this.readonly.set(this.readonly() !== undefined ?
|
|
284
|
+
this.readonly() :
|
|
285
|
+
this.#data?.readonly ?? this.config().readonly);
|
|
286
|
+
this.applyReadonlyStyle.set(this.applyReadonlyStyle() !== undefined ?
|
|
287
|
+
this.applyReadonlyStyle() :
|
|
288
|
+
this.#data?.applyReadonlyStyle ?? this.config().applyReadonlyStyle);
|
|
289
|
+
this.showToolbar.set(this.showToolbar() !== undefined ?
|
|
290
|
+
this.showToolbar() :
|
|
291
|
+
this.#data?.showToolbar ?? this.config().showToolbar);
|
|
292
|
+
this.showBorder.set(this.showBorder() !== undefined ?
|
|
293
|
+
this.showBorder() :
|
|
294
|
+
this.#data?.showBorder ?? this.config().showBorder);
|
|
255
295
|
}
|
|
256
296
|
toggleFullscreen() {
|
|
257
|
-
if (this.fullscreenMode === 'expand') {
|
|
258
|
-
this.fullscreen
|
|
259
|
-
this.fullscreenChanged.emit(this.fullscreen);
|
|
297
|
+
if (this.fullscreenMode() === 'expand') {
|
|
298
|
+
this.fullscreen.set(!this.fullscreen());
|
|
299
|
+
this.fullscreenChanged.emit(this.fullscreen());
|
|
260
300
|
}
|
|
261
301
|
else {
|
|
262
|
-
if (this.fullscreen) {
|
|
302
|
+
if (this.fullscreen()) {
|
|
263
303
|
this.#dialogRef?.close(this.value);
|
|
264
304
|
this.fullscreenChanged.emit(false);
|
|
265
305
|
}
|
|
266
306
|
else {
|
|
267
307
|
const data = {
|
|
268
308
|
value: this.value,
|
|
269
|
-
config: this.config,
|
|
270
|
-
placeholder: this.placeholder,
|
|
271
|
-
format: this.format,
|
|
272
|
-
height: this.fullscreenHeight,
|
|
309
|
+
config: this.config(),
|
|
310
|
+
placeholder: this.placeholder(),
|
|
311
|
+
format: this.format(),
|
|
312
|
+
height: this.fullscreenHeight(),
|
|
273
313
|
width: '100%',
|
|
274
|
-
maxHeight: this.fullscreenHeight,
|
|
314
|
+
maxHeight: this.fullscreenHeight(),
|
|
275
315
|
maxWidth: '100%',
|
|
276
|
-
enableTooltips: this.enableTooltips,
|
|
316
|
+
enableTooltips: this.enableTooltips(),
|
|
277
317
|
fullscreen: true,
|
|
278
|
-
fullscreenMode: this.fullscreenMode,
|
|
279
|
-
readonly: this.readonly,
|
|
280
|
-
applyReadonlyStyle: this.applyReadonlyStyle,
|
|
281
|
-
showToolbar: this.showToolbar,
|
|
282
|
-
showBorder: this.showBorder,
|
|
283
|
-
imageResizeModule: this.imageResizeModule,
|
|
284
|
-
imageDropModule: this.imageDropModule,
|
|
285
|
-
syntaxModule: this.syntaxModule
|
|
318
|
+
fullscreenMode: this.fullscreenMode(),
|
|
319
|
+
readonly: this.readonly(),
|
|
320
|
+
applyReadonlyStyle: this.applyReadonlyStyle(),
|
|
321
|
+
showToolbar: this.showToolbar(),
|
|
322
|
+
showBorder: this.showBorder(),
|
|
323
|
+
imageResizeModule: this.imageResizeModule(),
|
|
324
|
+
imageDropModule: this.imageDropModule(),
|
|
325
|
+
syntaxModule: this.syntaxModule()
|
|
286
326
|
//users: this.users
|
|
287
327
|
};
|
|
288
328
|
this.#dialog.open(EditorComponent, {
|
|
289
329
|
disableClose: true,
|
|
290
|
-
width: this.fullscreenWidth,
|
|
291
|
-
height: this.fullscreenHeight,
|
|
330
|
+
width: this.fullscreenWidth(),
|
|
331
|
+
height: this.fullscreenHeight(),
|
|
292
332
|
data
|
|
293
333
|
})
|
|
294
334
|
.afterClosed()
|
|
@@ -316,21 +356,21 @@ class EditorComponent {
|
|
|
316
356
|
});
|
|
317
357
|
}
|
|
318
358
|
tooltip(val) {
|
|
319
|
-
return this.enableTooltips ? val : '';
|
|
359
|
+
return this.enableTooltips() ? val : '';
|
|
320
360
|
}
|
|
321
361
|
get modules() {
|
|
322
362
|
//if (!this.users) { return undefined; }
|
|
323
363
|
const modules = {};
|
|
324
|
-
if (!this.showToolbar) {
|
|
364
|
+
if (!this.showToolbar()) {
|
|
325
365
|
modules['toolbar'] = [];
|
|
326
366
|
}
|
|
327
|
-
if (this.imageResizeModule) {
|
|
367
|
+
if (this.imageResizeModule()) {
|
|
328
368
|
modules['imageResize'] = {};
|
|
329
369
|
}
|
|
330
|
-
if (this.imageDropModule) {
|
|
370
|
+
if (this.imageDropModule()) {
|
|
331
371
|
modules['imageDrop'] = true;
|
|
332
372
|
}
|
|
333
|
-
if (this.syntaxModule) {
|
|
373
|
+
if (this.syntaxModule()) {
|
|
334
374
|
modules['syntax'] = true;
|
|
335
375
|
}
|
|
336
376
|
/*if (this.mentionModule) {
|
|
@@ -386,11 +426,11 @@ class EditorComponent {
|
|
|
386
426
|
this.onTouched = fn;
|
|
387
427
|
}
|
|
388
428
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EditorComponent, isStandalone: true, selector: "cpquill-editor", inputs: { config: "config", placeholder: "placeholder", format: "format", height: "height", width: "width", fullscreenHeight: "fullscreenHeight", fullscreenWidth: "fullscreenWidth", fullscreenMode: "fullscreenMode", enableTooltips: "enableTooltips", fullscreen: "fullscreen", readonly: "readonly", applyReadonlyStyle: "applyReadonlyStyle", showToolbar: "showToolbar", showBorder: "showBorder", imageResizeModule: "imageResizeModule", imageDropModule: "imageDropModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
|
|
429
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EditorComponent, isStandalone: true, selector: "cpquill-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullscreenHeight: { classPropertyName: "fullscreenHeight", publicName: "fullscreenHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenWidth: { classPropertyName: "fullscreenWidth", publicName: "fullscreenWidth", isSignal: true, isRequired: false, transformFunction: null }, fullscreenMode: { classPropertyName: "fullscreenMode", publicName: "fullscreenMode", isSignal: true, isRequired: false, transformFunction: null }, enableTooltips: { classPropertyName: "enableTooltips", publicName: "enableTooltips", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, applyReadonlyStyle: { classPropertyName: "applyReadonlyStyle", publicName: "applyReadonlyStyle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, imageResizeModule: { classPropertyName: "imageResizeModule", publicName: "imageResizeModule", isSignal: true, isRequired: false, transformFunction: null }, imageDropModule: { classPropertyName: "imageDropModule", publicName: "imageDropModule", isSignal: true, isRequired: false, transformFunction: null }, syntaxModule: { classPropertyName: "syntaxModule", publicName: "syntaxModule", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", placeholder: "placeholderChange", format: "formatChange", height: "heightChange", width: "widthChange", fullscreenHeight: "fullscreenHeightChange", fullscreenWidth: "fullscreenWidthChange", fullscreenMode: "fullscreenModeChange", enableTooltips: "enableTooltipsChange", fullscreen: "fullscreenChange", readonly: "readonlyChange", applyReadonlyStyle: "applyReadonlyStyleChange", showToolbar: "showToolbarChange", showBorder: "showBorderChange", imageResizeModule: "imageResizeModuleChange", imageDropModule: "imageDropModuleChange", syntaxModule: "syntaxModuleChange", fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
|
|
390
430
|
provide: NG_VALUE_ACCESSOR,
|
|
391
431
|
useExisting: forwardRef(() => EditorComponent),
|
|
392
432
|
multi: true
|
|
393
|
-
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder ?? ''\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly ?? false\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (config!.showFontStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n }\n @if (config!.buttons.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n }\n @if (config!.buttons.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n }\n @if (config!.buttons.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (config!.showBlockStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n }\n @if (config!.buttons.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (config!.showQuickHeadingStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n }\n @if (config!.buttons.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (config!.showListStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n }\n @if (config!.buttons.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (config!.showScriptStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n }\n @if (config!.buttons.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (config!.showIndentStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n }\n @if (config!.buttons.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config!.buttons.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config!.buttons.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config!.buttons.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config!.buttons.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config!.buttons.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config!.buttons.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config!.buttons.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (config!.showMedia()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n }\n @if (config!.buttons.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n }\n @if (config!.buttons.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config!.buttons.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config!.buttons.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen ?\n (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen ?\n (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config!.buttons.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
433
|
+
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format()\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
394
434
|
}
|
|
395
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
|
|
396
436
|
type: Component,
|
|
@@ -404,42 +444,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
404
444
|
provide: NG_VALUE_ACCESSOR,
|
|
405
445
|
useExisting: forwardRef(() => EditorComponent),
|
|
406
446
|
multi: true
|
|
407
|
-
}], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n
|
|
408
|
-
}]
|
|
409
|
-
type: Input
|
|
410
|
-
}], placeholder: [{
|
|
411
|
-
type: Input
|
|
412
|
-
}], format: [{
|
|
413
|
-
type: Input
|
|
414
|
-
}], height: [{
|
|
415
|
-
type: Input
|
|
416
|
-
}], width: [{
|
|
417
|
-
type: Input
|
|
418
|
-
}], fullscreenHeight: [{
|
|
419
|
-
type: Input
|
|
420
|
-
}], fullscreenWidth: [{
|
|
421
|
-
type: Input
|
|
422
|
-
}], fullscreenMode: [{
|
|
423
|
-
type: Input
|
|
424
|
-
}], enableTooltips: [{
|
|
425
|
-
type: Input
|
|
426
|
-
}], fullscreen: [{
|
|
427
|
-
type: Input
|
|
428
|
-
}], readonly: [{
|
|
429
|
-
type: Input
|
|
430
|
-
}], applyReadonlyStyle: [{
|
|
431
|
-
type: Input
|
|
432
|
-
}], showToolbar: [{
|
|
433
|
-
type: Input
|
|
434
|
-
}], showBorder: [{
|
|
435
|
-
type: Input
|
|
436
|
-
}], imageResizeModule: [{
|
|
437
|
-
type: Input
|
|
438
|
-
}], imageDropModule: [{
|
|
439
|
-
type: Input
|
|
440
|
-
}], syntaxModule: [{
|
|
441
|
-
type: Input
|
|
442
|
-
}] } });
|
|
447
|
+
}], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format()\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
|
|
448
|
+
}] });
|
|
443
449
|
|
|
444
450
|
class QuillModule {
|
|
445
451
|
constructor(parentModule) {
|
|
@@ -507,5 +513,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
507
513
|
* Generated bundle index. Do not edit.
|
|
508
514
|
*/
|
|
509
515
|
|
|
510
|
-
export {
|
|
516
|
+
export { DefaultButtons, DefaultConfig, DefaultIcons, DefaultTooltips, EditorComponent, QuillModule, RawComponent };
|
|
511
517
|
//# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map
|