@cleavelandprice/ngx-lib 4.0.9 → 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 +38 -27
- package/esm2022/quill/mention/components/editor/editor.component.mjs +3 -3
- 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 +11 -16
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +156 -143
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
- package/package.json +24 -24
- package/quill/components/editor/editor.component.d.ts +8 -1
- 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
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
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,21 +151,12 @@ 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() {
|
|
@@ -194,7 +188,7 @@ class EditorComponent {
|
|
|
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
|
|
197
|
-
this.config = model();
|
|
191
|
+
this.config = model(new DefaultConfig());
|
|
198
192
|
this.placeholder = model();
|
|
199
193
|
//#region These can be passed in as @Input(), or use values from config
|
|
200
194
|
this.format = model();
|
|
@@ -224,6 +218,20 @@ class EditorComponent {
|
|
|
224
218
|
this.onFocus = output();
|
|
225
219
|
this.onSelectionChanged = output();
|
|
226
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
|
+
;
|
|
227
235
|
#data;
|
|
228
236
|
#dialogRef;
|
|
229
237
|
#dialog;
|
|
@@ -237,24 +245,29 @@ class EditorComponent {
|
|
|
237
245
|
}*/
|
|
238
246
|
}
|
|
239
247
|
initialize() {
|
|
240
|
-
this.config(
|
|
241
|
-
|
|
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
|
+
});
|
|
242
262
|
this.value = this.value ?? this.#data?.value;
|
|
243
263
|
// Moved to client responsibility
|
|
244
264
|
/*if (this.imageDropModule) {
|
|
245
265
|
Quill.register('modules/imageDrop', ImageDrop);
|
|
246
266
|
}*/
|
|
247
|
-
//this.placeholder = this.placeholder ?? this.#data?.placeholder;
|
|
248
267
|
this.placeholder.set(this.placeholder() ?? this.#data?.placeholder);
|
|
249
268
|
this.imageDropModule.set(this.imageDropModule() ?? this.#data?.imageDropModule ?? this.config().imageDropModule);
|
|
250
269
|
this.imageResizeModule.set(this.imageResizeModule() ?? this.#data?.imageResizeModule ?? this.config().imageResizeModule);
|
|
251
270
|
this.syntaxModule.set(this.syntaxModule() ?? this.#data?.syntaxModule ?? this.config().syntaxModule);
|
|
252
|
-
//this.format = this.format ?? this.#data?.format ?? this.config.format;
|
|
253
|
-
//this.height = this.height ?? this.#data?.height ?? this.config.height;
|
|
254
|
-
//this.width = this.width ?? this.#data?.width ?? this.config.width;
|
|
255
|
-
//this.fullscreenHeight = this.fullscreenHeight ?? this.#data?.maxHeight ?? this.config.fullscreenHeight;
|
|
256
|
-
//this.fullscreenWidth = this.fullscreenWidth ?? this.#data?.maxWidth ?? this.config.fullscreenWidth;
|
|
257
|
-
//this.fullscreenMode = this.fullscreenMode ?? this.#data?.fullscreenMode ?? this.config.fullscreenMode;
|
|
258
271
|
this.format.set(this.format() ?? this.#data?.format ?? this.config().format);
|
|
259
272
|
this.height.set(this.height() ?? this.#data?.height ?? this.config().height);
|
|
260
273
|
this.width.set(this.width() ?? this.#data?.width ?? this.config().width);
|
|
@@ -417,7 +430,7 @@ class EditorComponent {
|
|
|
417
430
|
provide: NG_VALUE_ACCESSOR,
|
|
418
431
|
useExisting: forwardRef(() => EditorComponent),
|
|
419
432
|
multi: true
|
|
420
|
-
}], 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 (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" }] }); }
|
|
421
434
|
}
|
|
422
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
|
|
423
436
|
type: Component,
|
|
@@ -431,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
431
444
|
provide: NG_VALUE_ACCESSOR,
|
|
432
445
|
useExisting: forwardRef(() => EditorComponent),
|
|
433
446
|
multi: true
|
|
434
|
-
}], 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 (
|
|
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"] }]
|
|
435
448
|
}] });
|
|
436
449
|
|
|
437
450
|
class QuillModule {
|
|
@@ -500,5 +513,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
500
513
|
* Generated bundle index. Do not edit.
|
|
501
514
|
*/
|
|
502
515
|
|
|
503
|
-
export {
|
|
516
|
+
export { DefaultButtons, DefaultConfig, DefaultIcons, DefaultTooltips, EditorComponent, QuillModule, RawComponent };
|
|
504
517
|
//# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map
|