@cleavelandprice/ngx-lib 3.1.51 → 3.1.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/quill-editor/components/editor/editor.component.mjs +47 -28
- package/esm2020/quill-editor/model/dialog-data.mjs +1 -1
- package/fesm2015/cleavelandprice-ngx-lib-quill-editor.mjs +66 -51
- package/fesm2015/cleavelandprice-ngx-lib-quill-editor.mjs.map +1 -1
- package/fesm2020/cleavelandprice-ngx-lib-quill-editor.mjs +46 -29
- package/fesm2020/cleavelandprice-ngx-lib-quill-editor.mjs.map +1 -1
- package/package.json +1 -1
- package/quill-editor/components/editor/editor.component.d.ts +10 -7
- package/quill-editor/model/dialog-data.d.ts +1 -4
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Optional, Inject, ViewChild, Input, Output, NgModule, SkipSelf } from '@angular/core';
|
|
2
|
+
import { EventEmitter, forwardRef, Component, Optional, Inject, ViewChild, Input, Output, NgModule, SkipSelf } from '@angular/core';
|
|
3
|
+
import * as i4 from '@angular/forms';
|
|
4
|
+
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
3
5
|
import * as i1 from '@angular/material/dialog';
|
|
4
6
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
5
7
|
import * as i7 from 'ngx-quill';
|
|
@@ -10,8 +12,6 @@ import { ImageDrop } from 'quill-image-drop-module';
|
|
|
10
12
|
import * as i2 from '@cleavelandprice/ngx-lib/active-directory';
|
|
11
13
|
import * as i3 from '@angular/common';
|
|
12
14
|
import { CommonModule } from '@angular/common';
|
|
13
|
-
import * as i4 from '@angular/forms';
|
|
14
|
-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
15
15
|
import * as i5 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
17
|
import * as i6 from '@angular/material/tooltip';
|
|
@@ -176,6 +176,12 @@ class EditorComponent {
|
|
|
176
176
|
this.dialogRef = dialogRef;
|
|
177
177
|
this.activeDirectoryService = activeDirectoryService;
|
|
178
178
|
this.dialog = dialog;
|
|
179
|
+
this.onChange = (_) => { }; // Invoked when the model has been changed
|
|
180
|
+
this.onTouched = () => { }; // Invoked when the model has been touched
|
|
181
|
+
//#endregion
|
|
182
|
+
/*@Input() formGroup!: FormGroup;
|
|
183
|
+
@Input() controlName!: string;
|
|
184
|
+
@Input() ngModelValue: string | undefined;*/
|
|
179
185
|
this.config = new Config();
|
|
180
186
|
//#region These can be passed in as @Input(), or use values from config
|
|
181
187
|
this.format = this.config.format;
|
|
@@ -194,7 +200,24 @@ class EditorComponent {
|
|
|
194
200
|
this.onEditorCreated = new EventEmitter();
|
|
195
201
|
this.onFocus = new EventEmitter();
|
|
196
202
|
this.onSelectionChanged = new EventEmitter();
|
|
197
|
-
|
|
203
|
+
}
|
|
204
|
+
// Method that is invoked on an update of a model.
|
|
205
|
+
updateChanges() {
|
|
206
|
+
this.onChange(this.value);
|
|
207
|
+
}
|
|
208
|
+
//#region Overrides
|
|
209
|
+
// Writes a new item to the element.
|
|
210
|
+
writeValue(value) {
|
|
211
|
+
this.value = value;
|
|
212
|
+
this.updateChanges();
|
|
213
|
+
}
|
|
214
|
+
// Registers a callback function that should be called when the control's value changes in the UI.
|
|
215
|
+
registerOnChange(fn) {
|
|
216
|
+
this.onChange = fn;
|
|
217
|
+
}
|
|
218
|
+
// Registers a callback function that should be called when the control receives a blur event.
|
|
219
|
+
registerOnTouched(fn) {
|
|
220
|
+
this.onTouched = fn;
|
|
198
221
|
}
|
|
199
222
|
ngOnInit() {
|
|
200
223
|
this.initialize();
|
|
@@ -203,71 +226,70 @@ class EditorComponent {
|
|
|
203
226
|
}
|
|
204
227
|
}
|
|
205
228
|
initialize() {
|
|
206
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18
|
|
229
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
|
|
207
230
|
this.config = (_c = (_a = this.config) !== null && _a !== void 0 ? _a : (_b = this.data) === null || _b === void 0 ? void 0 : _b.config) !== null && _c !== void 0 ? _c : new Config();
|
|
231
|
+
this.value = (_d = this.value) !== null && _d !== void 0 ? _d : (_e = this.data) === null || _e === void 0 ? void 0 : _e.value;
|
|
208
232
|
this.imageResizeModule = this.imageResizeModule !== undefined ?
|
|
209
233
|
this.imageResizeModule :
|
|
210
|
-
(
|
|
234
|
+
(_f = this.imageResizeModule) !== null && _f !== void 0 ? _f : this.config.imageResizeModule;
|
|
211
235
|
this.imageDropModule = this.imageDropModule !== undefined ?
|
|
212
236
|
this.imageDropModule :
|
|
213
|
-
(
|
|
237
|
+
(_g = this.imageDropModule) !== null && _g !== void 0 ? _g : this.config.imageDropModule;
|
|
214
238
|
this.mentionModule = this.mentionModule !== undefined ?
|
|
215
239
|
this.mentionModule :
|
|
216
|
-
(
|
|
240
|
+
(_h = this.mentionModule) !== null && _h !== void 0 ? _h : this.config.mentionModule;
|
|
217
241
|
this.syntaxModule = this.syntaxModule !== undefined ?
|
|
218
242
|
this.syntaxModule :
|
|
219
|
-
(
|
|
243
|
+
(_j = this.syntaxModule) !== null && _j !== void 0 ? _j : this.config.syntaxModule;
|
|
220
244
|
if (this.imageDropModule) {
|
|
221
245
|
Quill.register('modules/imageDrop', ImageDrop);
|
|
222
246
|
}
|
|
223
|
-
this.formGroup =
|
|
224
|
-
this.controlName =
|
|
225
|
-
this.ngModelValue =
|
|
226
|
-
this.placeholder = (
|
|
227
|
-
this.users = (
|
|
228
|
-
this.format = (
|
|
229
|
-
this.height = (
|
|
230
|
-
this.width = (
|
|
231
|
-
this.fullscreenHeight = (
|
|
232
|
-
this.fullscreenWidth = (
|
|
233
|
-
this.fullscreenMode = (
|
|
247
|
+
/*this.formGroup = this.formGroup ?? this.data?.formGroup;
|
|
248
|
+
this.controlName = this.controlName ?? this.data?.controlName;
|
|
249
|
+
this.ngModelValue = this.ngModelValue ?? this.data?.value;*/
|
|
250
|
+
this.placeholder = (_k = this.placeholder) !== null && _k !== void 0 ? _k : (_l = this.data) === null || _l === void 0 ? void 0 : _l.placeholder;
|
|
251
|
+
this.users = (_m = this.users) !== null && _m !== void 0 ? _m : (_o = this.data) === null || _o === void 0 ? void 0 : _o.users;
|
|
252
|
+
this.format = (_r = (_p = this.format) !== null && _p !== void 0 ? _p : (_q = this.data) === null || _q === void 0 ? void 0 : _q.format) !== null && _r !== void 0 ? _r : this.config.format;
|
|
253
|
+
this.height = (_u = (_s = this.height) !== null && _s !== void 0 ? _s : (_t = this.data) === null || _t === void 0 ? void 0 : _t.height) !== null && _u !== void 0 ? _u : this.config.height;
|
|
254
|
+
this.width = (_x = (_v = this.width) !== null && _v !== void 0 ? _v : (_w = this.data) === null || _w === void 0 ? void 0 : _w.width) !== null && _x !== void 0 ? _x : this.config.width;
|
|
255
|
+
this.fullscreenHeight = (_0 = (_y = this.fullscreenHeight) !== null && _y !== void 0 ? _y : (_z = this.data) === null || _z === void 0 ? void 0 : _z.maxHeight) !== null && _0 !== void 0 ? _0 : this.config.fullscreenHeight;
|
|
256
|
+
this.fullscreenWidth = (_3 = (_1 = this.fullscreenWidth) !== null && _1 !== void 0 ? _1 : (_2 = this.data) === null || _2 === void 0 ? void 0 : _2.maxWidth) !== null && _3 !== void 0 ? _3 : this.config.fullscreenWidth;
|
|
257
|
+
this.fullscreenMode = (_6 = (_4 = this.fullscreenMode) !== null && _4 !== void 0 ? _4 : (_5 = this.data) === null || _5 === void 0 ? void 0 : _5.fullscreenMode) !== null && _6 !== void 0 ? _6 : this.config.fullscreenMode;
|
|
234
258
|
this.enableTooltips = this.enableTooltips !== undefined ?
|
|
235
259
|
this.enableTooltips :
|
|
236
|
-
(
|
|
260
|
+
(_8 = (_7 = this.data) === null || _7 === void 0 ? void 0 : _7.enableTooltips) !== null && _8 !== void 0 ? _8 : this.config.enableTooltips;
|
|
237
261
|
this.fullscreen = this.fullscreen !== undefined ?
|
|
238
262
|
this.fullscreen :
|
|
239
|
-
(
|
|
263
|
+
(_10 = (_9 = this.data) === null || _9 === void 0 ? void 0 : _9.fullscreen) !== null && _10 !== void 0 ? _10 : this.config.fullscreen;
|
|
240
264
|
this.readonly = this.readonly !== undefined ?
|
|
241
265
|
this.readonly :
|
|
242
|
-
(
|
|
266
|
+
(_12 = (_11 = this.data) === null || _11 === void 0 ? void 0 : _11.readonly) !== null && _12 !== void 0 ? _12 : this.config.readonly;
|
|
243
267
|
this.applyReadonlyStyle = this.applyReadonlyStyle !== undefined ?
|
|
244
268
|
this.applyReadonlyStyle :
|
|
245
|
-
(
|
|
269
|
+
(_14 = (_13 = this.data) === null || _13 === void 0 ? void 0 : _13.applyReadonlyStyle) !== null && _14 !== void 0 ? _14 : this.config.applyReadonlyStyle;
|
|
246
270
|
this.showToolbar = this.showToolbar !== undefined ?
|
|
247
271
|
this.showToolbar :
|
|
248
|
-
(
|
|
272
|
+
(_16 = (_15 = this.data) === null || _15 === void 0 ? void 0 : _15.showToolbar) !== null && _16 !== void 0 ? _16 : this.config.showToolbar;
|
|
249
273
|
this.showBorder = this.showBorder !== undefined ?
|
|
250
274
|
this.showBorder :
|
|
251
|
-
(
|
|
275
|
+
(_18 = (_17 = this.data) === null || _17 === void 0 ? void 0 : _17.showBorder) !== null && _18 !== void 0 ? _18 : this.config.showBorder;
|
|
252
276
|
}
|
|
253
277
|
toggleFullscreen() {
|
|
254
|
-
var _a;
|
|
255
278
|
if (this.fullscreenMode === 'expand') {
|
|
256
279
|
this.fullscreen = !this.fullscreen;
|
|
257
280
|
this.fullscreenChanged.emit(this.fullscreen);
|
|
258
281
|
}
|
|
259
282
|
else {
|
|
260
283
|
if (this.fullscreen) {
|
|
261
|
-
this.dialogRef.close(this.
|
|
262
|
-
(_a = this.formGroup.get(this.controlName)) === null || _a === void 0 ? void 0 : _a.value :
|
|
263
|
-
this.ngModelValue);
|
|
284
|
+
this.dialogRef.close(this.value);
|
|
264
285
|
this.fullscreenChanged.emit(false);
|
|
265
286
|
}
|
|
266
287
|
else {
|
|
267
288
|
const data = {
|
|
268
|
-
formGroup: this.formGroup,
|
|
289
|
+
/*formGroup: this.formGroup,
|
|
269
290
|
controlName: this.controlName,
|
|
270
|
-
value: this.ngModelValue
|
|
291
|
+
value: this.ngModelValue,*/
|
|
292
|
+
value: this.value,
|
|
271
293
|
config: this.config,
|
|
272
294
|
placeholder: this.placeholder,
|
|
273
295
|
format: this.format,
|
|
@@ -292,15 +314,8 @@ class EditorComponent {
|
|
|
292
314
|
})
|
|
293
315
|
.afterClosed()
|
|
294
316
|
.subscribe(value => {
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
// Debug, why am I doing this?
|
|
298
|
-
(_a = this.formGroup.get(this.controlName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
|
|
299
|
-
}
|
|
300
|
-
else {
|
|
301
|
-
this.ngModelValue = value;
|
|
302
|
-
}
|
|
303
|
-
this.onFullscreenClosed.emit(value);
|
|
317
|
+
this.value = value;
|
|
318
|
+
this.updateChanges();
|
|
304
319
|
});
|
|
305
320
|
this.fullscreenChanged.emit(true);
|
|
306
321
|
}
|
|
@@ -357,10 +372,18 @@ class EditorComponent {
|
|
|
357
372
|
}
|
|
358
373
|
}
|
|
359
374
|
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1.MatDialogRef, optional: true }, { token: i2.ActiveDirectoryService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
-
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: EditorComponent, selector: "cpquill-editor", inputs: { formGroup: "formGroup", controlName: "controlName", ngModelValue: "ngModelValue", config: "config", placeholder: "placeholder", users: "users", 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", mentionModule: "mentionModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged", onFullscreenClosed: "onFullscreenClosed" }, viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"users\">\n <!-- Reactive forms -->\n <form *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n <quill-editor\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n \n <!-- NgModel forms -->\n <form *ngIf=\"!formGroup\">\n <quill-editor name=\"editor\"\n [(ngModel)]=\"ngModelValue\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\n </span>\n</ng-template>\n\n<ng-template #blockStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\n </span>\n</ng-template>\n\n<ng-template #headingStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\n </span>\n</ng-template>\n\n<ng-template #listStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\n </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\n </span>\n</ng-template>\n \n<ng-template #indentStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\n </span>\n</ng-template>\n\n<ng-template #rtl>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\n </span>\n</ng-template>\n\n<ng-template #fontSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [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</ng-template>\n\n<ng-template #heading>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [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</ng-template>\n\n<ng-template #color>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n</ng-template>\n\n<ng-template #font>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [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</ng-template>\n\n<ng-template #align>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [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</ng-template>\n\n<ng-template #clean>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n</ng-template>\n\n<ng-template #media>\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\n </span>\n</ng-template>\n\n<ng-template #editorSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\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\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</ng-template>\n\n<ng-template #formula>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\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: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.QuillEditorComponent, selector: "quill-editor" }] });
|
|
375
|
+
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: EditorComponent, selector: "cpquill-editor", inputs: { config: "config", placeholder: "placeholder", users: "users", 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", mentionModule: "mentionModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
|
|
376
|
+
provide: NG_VALUE_ACCESSOR,
|
|
377
|
+
useExisting: forwardRef(() => EditorComponent),
|
|
378
|
+
multi: true
|
|
379
|
+
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"users\">\n <!-- Reactive forms -->\n <!--<form *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n <quill-editor\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>-->\n \n <!-- NgModel forms -->\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\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\n </span>\n</ng-template>\n\n<ng-template #blockStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\n </span>\n</ng-template>\n\n<ng-template #headingStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\n </span>\n</ng-template>\n\n<ng-template #listStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\n </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\n </span>\n</ng-template>\n \n<ng-template #indentStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\n </span>\n</ng-template>\n\n<ng-template #rtl>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\n </span>\n</ng-template>\n\n<ng-template #fontSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [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</ng-template>\n\n<ng-template #heading>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [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</ng-template>\n\n<ng-template #color>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n</ng-template>\n\n<ng-template #font>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [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</ng-template>\n\n<ng-template #align>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [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</ng-template>\n\n<ng-template #clean>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n</ng-template>\n\n<ng-template #media>\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\n </span>\n</ng-template>\n\n<ng-template #editorSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\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\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</ng-template>\n\n<ng-template #formula>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\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: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i7.QuillEditorComponent, selector: "quill-editor" }] });
|
|
361
380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: EditorComponent, decorators: [{
|
|
362
381
|
type: Component,
|
|
363
|
-
args: [{ selector: 'cpquill-editor', template: "<ng-container *ngIf=\"users\">\n <!-- Reactive forms -->\n <form *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n <quill-editor\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n \n <!-- NgModel forms -->\n <form *ngIf=\"!formGroup\">\n <quill-editor name=\"editor\"\n [(ngModel)]=\"ngModelValue\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\n </span>\n</ng-template>\n\n<ng-template #blockStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\n </span>\n</ng-template>\n\n<ng-template #headingStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\n </span>\n</ng-template>\n\n<ng-template #listStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\n </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\n </span>\n</ng-template>\n \n<ng-template #indentStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\n </span>\n</ng-template>\n\n<ng-template #rtl>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\n </span>\n</ng-template>\n\n<ng-template #fontSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [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</ng-template>\n\n<ng-template #heading>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [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</ng-template>\n\n<ng-template #color>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n</ng-template>\n\n<ng-template #font>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [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</ng-template>\n\n<ng-template #align>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [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</ng-template>\n\n<ng-template #clean>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n</ng-template>\n\n<ng-template #media>\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\n </span>\n</ng-template>\n\n<ng-template #editorSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\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\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</ng-template>\n\n<ng-template #formula>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\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"] }]
|
|
382
|
+
args: [{ selector: 'cpquill-editor', providers: [{
|
|
383
|
+
provide: NG_VALUE_ACCESSOR,
|
|
384
|
+
useExisting: forwardRef(() => EditorComponent),
|
|
385
|
+
multi: true
|
|
386
|
+
}], template: "<ng-container *ngIf=\"users\">\n <!-- Reactive forms -->\n <!--<form *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\n <quill-editor\n [formControlName]=\"controlName\"\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>-->\n \n <!-- NgModel forms -->\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\"\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 <div quill-editor-toolbar *ngIf=\"showToolbar\">\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\n </div>\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\n </span>\n</ng-template>\n\n<ng-template #blockStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\n </span>\n</ng-template>\n\n<ng-template #headingStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\n </span>\n</ng-template>\n\n<ng-template #listStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\n </span>\n</ng-template>\n\n<ng-template #scriptStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\n </span>\n</ng-template>\n \n<ng-template #indentStyle>\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\n </span>\n</ng-template>\n\n<ng-template #rtl>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\n </span>\n</ng-template>\n\n<ng-template #fontSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [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</ng-template>\n\n<ng-template #heading>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [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</ng-template>\n\n<ng-template #color>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n</ng-template>\n\n<ng-template #font>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [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</ng-template>\n\n<ng-template #align>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [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</ng-template>\n\n<ng-template #clean>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n</ng-template>\n\n<ng-template #media>\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\n </span>\n</ng-template>\n\n<ng-template #editorSize>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\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\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</ng-template>\n\n<ng-template #formula>\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\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"] }]
|
|
364
387
|
}], ctorParameters: function () {
|
|
365
388
|
return [{ type: undefined, decorators: [{
|
|
366
389
|
type: Optional
|
|
@@ -373,12 +396,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
373
396
|
}, propDecorators: { editor: [{
|
|
374
397
|
type: ViewChild,
|
|
375
398
|
args: [QuillEditorComponent, { static: false }]
|
|
376
|
-
}], formGroup: [{
|
|
377
|
-
type: Input
|
|
378
|
-
}], controlName: [{
|
|
379
|
-
type: Input
|
|
380
|
-
}], ngModelValue: [{
|
|
381
|
-
type: Input
|
|
382
399
|
}], config: [{
|
|
383
400
|
type: Input
|
|
384
401
|
}], placeholder: [{
|
|
@@ -431,8 +448,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
|
|
|
431
448
|
type: Output
|
|
432
449
|
}], onSelectionChanged: [{
|
|
433
450
|
type: Output
|
|
434
|
-
}], onFullscreenClosed: [{
|
|
435
|
-
type: Output
|
|
436
451
|
}] } });
|
|
437
452
|
|
|
438
453
|
class QuillEditorModule {
|