@cleavelandprice/ngx-lib 4.0.7 → 4.0.9
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 +88 -96
- package/esm2022/quill/components/raw/raw.component.mjs +5 -3
- package/esm2022/quill/mention/components/editor/editor.component.mjs +35 -35
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +34 -34
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +91 -98
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
- package/package.json +18 -18
- package/quill/components/editor/editor.component.d.ts +18 -18
- package/quill/mention/components/editor/editor.component.d.ts +2 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Component, viewChild, output, forwardRef,
|
|
2
|
+
import { inject, Component, viewChild, model, output, forwardRef, NgModule, Optional, SkipSelf } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
@@ -9,7 +9,7 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
9
9
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
10
10
|
import { MatButton, MatButtonModule } from '@angular/material/button';
|
|
11
11
|
import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
|
|
12
|
-
import { MatInputModule } from '@angular/material/input';
|
|
12
|
+
import { MatInput, MatInputModule } from '@angular/material/input';
|
|
13
13
|
|
|
14
14
|
class Buttons {
|
|
15
15
|
constructor() {
|
|
@@ -169,7 +169,7 @@ class RawComponent {
|
|
|
169
169
|
this.data = inject(MAT_DIALOG_DATA);
|
|
170
170
|
}
|
|
171
171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
172
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
|
|
173
173
|
}
|
|
174
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: RawComponent, decorators: [{
|
|
175
175
|
type: Component,
|
|
@@ -180,7 +180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
180
180
|
MatDialogClose,
|
|
181
181
|
MatDialogContent,
|
|
182
182
|
MatFormField,
|
|
183
|
-
MatIcon
|
|
183
|
+
MatIcon,
|
|
184
|
+
MatInput
|
|
184
185
|
], template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
|
|
185
186
|
}] });
|
|
186
187
|
|
|
@@ -189,11 +190,30 @@ class EditorComponent {
|
|
|
189
190
|
this.#data = inject(MAT_DIALOG_DATA, { optional: true });
|
|
190
191
|
this.#dialogRef = inject((MatDialogRef), { optional: true });
|
|
191
192
|
this.#dialog = inject(MatDialog);
|
|
192
|
-
//@ViewChild(QuillEditorComponent, { static: false }) editor?: QuillEditorComponent;
|
|
193
193
|
this.editor = viewChild(QuillEditorComponent);
|
|
194
194
|
this.onChange = (_) => { }; // Invoked when the model has been changed
|
|
195
195
|
this.onTouched = () => { }; // Invoked when the model has been touched
|
|
196
196
|
//#endregion
|
|
197
|
+
this.config = model();
|
|
198
|
+
this.placeholder = model();
|
|
199
|
+
//#region These can be passed in as @Input(), or use values from config
|
|
200
|
+
this.format = model();
|
|
201
|
+
this.height = model();
|
|
202
|
+
this.width = model();
|
|
203
|
+
this.fullscreenHeight = model();
|
|
204
|
+
this.fullscreenWidth = model();
|
|
205
|
+
this.fullscreenMode = model();
|
|
206
|
+
this.enableTooltips = model();
|
|
207
|
+
this.fullscreen = model();
|
|
208
|
+
this.readonly = model();
|
|
209
|
+
this.applyReadonlyStyle = model();
|
|
210
|
+
this.showToolbar = model();
|
|
211
|
+
this.showBorder = model();
|
|
212
|
+
//#region Optional Quill modules
|
|
213
|
+
this.imageResizeModule = model();
|
|
214
|
+
this.imageDropModule = model();
|
|
215
|
+
this.syntaxModule = model();
|
|
216
|
+
//#endregion
|
|
197
217
|
//#endregion
|
|
198
218
|
this.fullscreenChanged = output();
|
|
199
219
|
//#region Passthrough events
|
|
@@ -217,78 +237,85 @@ class EditorComponent {
|
|
|
217
237
|
}*/
|
|
218
238
|
}
|
|
219
239
|
initialize() {
|
|
220
|
-
this.config
|
|
240
|
+
this.config()?.showFontStyle();
|
|
241
|
+
this.config.set(this.config() ?? this.#data?.config ?? new Config());
|
|
221
242
|
this.value = this.value ?? this.#data?.value;
|
|
222
243
|
// Moved to client responsibility
|
|
223
244
|
/*if (this.imageDropModule) {
|
|
224
245
|
Quill.register('modules/imageDrop', ImageDrop);
|
|
225
246
|
}*/
|
|
226
|
-
this.placeholder = this.placeholder ?? this.#data?.placeholder;
|
|
227
|
-
|
|
228
|
-
this.imageDropModule
|
|
229
|
-
this.imageResizeModule
|
|
230
|
-
this.syntaxModule
|
|
231
|
-
this.format = this.format ?? this.#data?.format ?? this.config.format;
|
|
232
|
-
this.height = this.height ?? this.#data?.height ?? this.config.height;
|
|
233
|
-
this.width = this.width ?? this.#data?.width ?? this.config.width;
|
|
234
|
-
this.fullscreenHeight = this.fullscreenHeight ?? this.#data?.maxHeight ?? this.config.fullscreenHeight;
|
|
235
|
-
this.fullscreenWidth = this.fullscreenWidth ?? this.#data?.maxWidth ?? this.config.fullscreenWidth;
|
|
236
|
-
this.fullscreenMode = this.fullscreenMode ?? this.#data?.fullscreenMode ?? this.config.fullscreenMode;
|
|
237
|
-
this.
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
this.
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
this.
|
|
244
|
-
this.
|
|
245
|
-
this.#data?.
|
|
246
|
-
this.
|
|
247
|
-
this.
|
|
248
|
-
this.#data?.
|
|
249
|
-
this.
|
|
250
|
-
this.
|
|
251
|
-
this.#data?.
|
|
252
|
-
this.
|
|
253
|
-
this.
|
|
254
|
-
this.#data?.
|
|
247
|
+
//this.placeholder = this.placeholder ?? this.#data?.placeholder;
|
|
248
|
+
this.placeholder.set(this.placeholder() ?? this.#data?.placeholder);
|
|
249
|
+
this.imageDropModule.set(this.imageDropModule() ?? this.#data?.imageDropModule ?? this.config().imageDropModule);
|
|
250
|
+
this.imageResizeModule.set(this.imageResizeModule() ?? this.#data?.imageResizeModule ?? this.config().imageResizeModule);
|
|
251
|
+
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
|
+
this.format.set(this.format() ?? this.#data?.format ?? this.config().format);
|
|
259
|
+
this.height.set(this.height() ?? this.#data?.height ?? this.config().height);
|
|
260
|
+
this.width.set(this.width() ?? this.#data?.width ?? this.config().width);
|
|
261
|
+
this.fullscreenHeight.set(this.fullscreenHeight() ?? this.#data?.maxHeight ?? this.config().fullscreenHeight);
|
|
262
|
+
this.fullscreenWidth.set(this.fullscreenWidth() ?? this.#data?.maxWidth ?? this.config().fullscreenWidth);
|
|
263
|
+
this.fullscreenMode.set(this.fullscreenMode() ?? this.#data?.fullscreenMode ?? this.config().fullscreenMode);
|
|
264
|
+
this.enableTooltips.set(this.enableTooltips() !== undefined ?
|
|
265
|
+
this.enableTooltips() :
|
|
266
|
+
this.#data?.enableTooltips ?? this.config().enableTooltips);
|
|
267
|
+
this.fullscreen.set(this.fullscreen() !== undefined ?
|
|
268
|
+
this.fullscreen() :
|
|
269
|
+
this.#data?.fullscreen ?? this.config().fullscreen);
|
|
270
|
+
this.readonly.set(this.readonly() !== undefined ?
|
|
271
|
+
this.readonly() :
|
|
272
|
+
this.#data?.readonly ?? this.config().readonly);
|
|
273
|
+
this.applyReadonlyStyle.set(this.applyReadonlyStyle() !== undefined ?
|
|
274
|
+
this.applyReadonlyStyle() :
|
|
275
|
+
this.#data?.applyReadonlyStyle ?? this.config().applyReadonlyStyle);
|
|
276
|
+
this.showToolbar.set(this.showToolbar() !== undefined ?
|
|
277
|
+
this.showToolbar() :
|
|
278
|
+
this.#data?.showToolbar ?? this.config().showToolbar);
|
|
279
|
+
this.showBorder.set(this.showBorder() !== undefined ?
|
|
280
|
+
this.showBorder() :
|
|
281
|
+
this.#data?.showBorder ?? this.config().showBorder);
|
|
255
282
|
}
|
|
256
283
|
toggleFullscreen() {
|
|
257
|
-
if (this.fullscreenMode === 'expand') {
|
|
258
|
-
this.fullscreen
|
|
259
|
-
this.fullscreenChanged.emit(this.fullscreen);
|
|
284
|
+
if (this.fullscreenMode() === 'expand') {
|
|
285
|
+
this.fullscreen.set(!this.fullscreen());
|
|
286
|
+
this.fullscreenChanged.emit(this.fullscreen());
|
|
260
287
|
}
|
|
261
288
|
else {
|
|
262
|
-
if (this.fullscreen) {
|
|
289
|
+
if (this.fullscreen()) {
|
|
263
290
|
this.#dialogRef?.close(this.value);
|
|
264
291
|
this.fullscreenChanged.emit(false);
|
|
265
292
|
}
|
|
266
293
|
else {
|
|
267
294
|
const data = {
|
|
268
295
|
value: this.value,
|
|
269
|
-
config: this.config,
|
|
270
|
-
placeholder: this.placeholder,
|
|
271
|
-
format: this.format,
|
|
272
|
-
height: this.fullscreenHeight,
|
|
296
|
+
config: this.config(),
|
|
297
|
+
placeholder: this.placeholder(),
|
|
298
|
+
format: this.format(),
|
|
299
|
+
height: this.fullscreenHeight(),
|
|
273
300
|
width: '100%',
|
|
274
|
-
maxHeight: this.fullscreenHeight,
|
|
301
|
+
maxHeight: this.fullscreenHeight(),
|
|
275
302
|
maxWidth: '100%',
|
|
276
|
-
enableTooltips: this.enableTooltips,
|
|
303
|
+
enableTooltips: this.enableTooltips(),
|
|
277
304
|
fullscreen: true,
|
|
278
|
-
fullscreenMode: this.fullscreenMode,
|
|
279
|
-
readonly: this.readonly,
|
|
280
|
-
applyReadonlyStyle: this.applyReadonlyStyle,
|
|
281
|
-
showToolbar: this.showToolbar,
|
|
282
|
-
showBorder: this.showBorder,
|
|
283
|
-
imageResizeModule: this.imageResizeModule,
|
|
284
|
-
imageDropModule: this.imageDropModule,
|
|
285
|
-
syntaxModule: this.syntaxModule
|
|
305
|
+
fullscreenMode: this.fullscreenMode(),
|
|
306
|
+
readonly: this.readonly(),
|
|
307
|
+
applyReadonlyStyle: this.applyReadonlyStyle(),
|
|
308
|
+
showToolbar: this.showToolbar(),
|
|
309
|
+
showBorder: this.showBorder(),
|
|
310
|
+
imageResizeModule: this.imageResizeModule(),
|
|
311
|
+
imageDropModule: this.imageDropModule(),
|
|
312
|
+
syntaxModule: this.syntaxModule()
|
|
286
313
|
//users: this.users
|
|
287
314
|
};
|
|
288
315
|
this.#dialog.open(EditorComponent, {
|
|
289
316
|
disableClose: true,
|
|
290
|
-
width: this.fullscreenWidth,
|
|
291
|
-
height: this.fullscreenHeight,
|
|
317
|
+
width: this.fullscreenWidth(),
|
|
318
|
+
height: this.fullscreenHeight(),
|
|
292
319
|
data
|
|
293
320
|
})
|
|
294
321
|
.afterClosed()
|
|
@@ -316,21 +343,21 @@ class EditorComponent {
|
|
|
316
343
|
});
|
|
317
344
|
}
|
|
318
345
|
tooltip(val) {
|
|
319
|
-
return this.enableTooltips ? val : '';
|
|
346
|
+
return this.enableTooltips() ? val : '';
|
|
320
347
|
}
|
|
321
348
|
get modules() {
|
|
322
349
|
//if (!this.users) { return undefined; }
|
|
323
350
|
const modules = {};
|
|
324
|
-
if (!this.showToolbar) {
|
|
351
|
+
if (!this.showToolbar()) {
|
|
325
352
|
modules['toolbar'] = [];
|
|
326
353
|
}
|
|
327
|
-
if (this.imageResizeModule) {
|
|
354
|
+
if (this.imageResizeModule()) {
|
|
328
355
|
modules['imageResize'] = {};
|
|
329
356
|
}
|
|
330
|
-
if (this.imageDropModule) {
|
|
357
|
+
if (this.imageDropModule()) {
|
|
331
358
|
modules['imageDrop'] = true;
|
|
332
359
|
}
|
|
333
|
-
if (this.syntaxModule) {
|
|
360
|
+
if (this.syntaxModule()) {
|
|
334
361
|
modules['syntax'] = true;
|
|
335
362
|
}
|
|
336
363
|
/*if (this.mentionModule) {
|
|
@@ -386,11 +413,11 @@ class EditorComponent {
|
|
|
386
413
|
this.onTouched = fn;
|
|
387
414
|
}
|
|
388
415
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EditorComponent, isStandalone: true, selector: "cpquill-editor", inputs: { config: "config", placeholder: "placeholder", format: "format", height: "height", width: "width", fullscreenHeight: "fullscreenHeight", fullscreenWidth: "fullscreenWidth", fullscreenMode: "fullscreenMode", enableTooltips: "enableTooltips", fullscreen: "fullscreen", readonly: "readonly", applyReadonlyStyle: "applyReadonlyStyle", showToolbar: "showToolbar", showBorder: "showBorder", imageResizeModule: "imageResizeModule", imageDropModule: "imageDropModule", syntaxModule: "syntaxModule" }, outputs: { fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
|
|
416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: EditorComponent, isStandalone: true, selector: "cpquill-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, fullscreenHeight: { classPropertyName: "fullscreenHeight", publicName: "fullscreenHeight", isSignal: true, isRequired: false, transformFunction: null }, fullscreenWidth: { classPropertyName: "fullscreenWidth", publicName: "fullscreenWidth", isSignal: true, isRequired: false, transformFunction: null }, fullscreenMode: { classPropertyName: "fullscreenMode", publicName: "fullscreenMode", isSignal: true, isRequired: false, transformFunction: null }, enableTooltips: { classPropertyName: "enableTooltips", publicName: "enableTooltips", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, applyReadonlyStyle: { classPropertyName: "applyReadonlyStyle", publicName: "applyReadonlyStyle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, imageResizeModule: { classPropertyName: "imageResizeModule", publicName: "imageResizeModule", isSignal: true, isRequired: false, transformFunction: null }, imageDropModule: { classPropertyName: "imageDropModule", publicName: "imageDropModule", isSignal: true, isRequired: false, transformFunction: null }, syntaxModule: { classPropertyName: "syntaxModule", publicName: "syntaxModule", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", placeholder: "placeholderChange", format: "formatChange", height: "heightChange", width: "widthChange", fullscreenHeight: "fullscreenHeightChange", fullscreenWidth: "fullscreenWidthChange", fullscreenMode: "fullscreenModeChange", enableTooltips: "enableTooltipsChange", fullscreen: "fullscreenChange", readonly: "readonlyChange", applyReadonlyStyle: "applyReadonlyStyleChange", showToolbar: "showToolbarChange", showBorder: "showBorderChange", imageResizeModule: "imageResizeModuleChange", imageDropModule: "imageDropModuleChange", syntaxModule: "syntaxModuleChange", fullscreenChanged: "fullscreenChanged", onBlur: "onBlur", onContentChanged: "onContentChanged", onEditorChanged: "onEditorChanged", onEditorCreated: "onEditorCreated", onFocus: "onFocus", onSelectionChanged: "onSelectionChanged" }, providers: [{
|
|
390
417
|
provide: NG_VALUE_ACCESSOR,
|
|
391
418
|
useExisting: forwardRef(() => EditorComponent),
|
|
392
419
|
multi: true
|
|
393
|
-
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder ?? ''\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly ?? false\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (config!.showFontStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n }\n @if (config!.buttons.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n }\n @if (config!.buttons.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n }\n @if (config!.buttons.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (config!.showBlockStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n }\n @if (config!.buttons.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (config!.showQuickHeadingStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n }\n @if (config!.buttons.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (config!.showListStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n }\n @if (config!.buttons.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (config!.showScriptStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n }\n @if (config!.buttons.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (config!.showIndentStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n }\n @if (config!.buttons.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config!.buttons.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config!.buttons.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config!.buttons.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config!.buttons.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config!.buttons.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config!.buttons.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config!.buttons.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (config!.showMedia()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n }\n @if (config!.buttons.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n }\n @if (config!.buttons.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config!.buttons.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config!.buttons.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen ?\n (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen ?\n (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config!.buttons.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
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" }] }); }
|
|
394
421
|
}
|
|
395
422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
|
|
396
423
|
type: Component,
|
|
@@ -404,42 +431,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
404
431
|
provide: NG_VALUE_ACCESSOR,
|
|
405
432
|
useExisting: forwardRef(() => EditorComponent),
|
|
406
433
|
multi: true
|
|
407
|
-
}], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n
|
|
408
|
-
}]
|
|
409
|
-
type: Input
|
|
410
|
-
}], placeholder: [{
|
|
411
|
-
type: Input
|
|
412
|
-
}], format: [{
|
|
413
|
-
type: Input
|
|
414
|
-
}], height: [{
|
|
415
|
-
type: Input
|
|
416
|
-
}], width: [{
|
|
417
|
-
type: Input
|
|
418
|
-
}], fullscreenHeight: [{
|
|
419
|
-
type: Input
|
|
420
|
-
}], fullscreenWidth: [{
|
|
421
|
-
type: Input
|
|
422
|
-
}], fullscreenMode: [{
|
|
423
|
-
type: Input
|
|
424
|
-
}], enableTooltips: [{
|
|
425
|
-
type: Input
|
|
426
|
-
}], fullscreen: [{
|
|
427
|
-
type: Input
|
|
428
|
-
}], readonly: [{
|
|
429
|
-
type: Input
|
|
430
|
-
}], applyReadonlyStyle: [{
|
|
431
|
-
type: Input
|
|
432
|
-
}], showToolbar: [{
|
|
433
|
-
type: Input
|
|
434
|
-
}], showBorder: [{
|
|
435
|
-
type: Input
|
|
436
|
-
}], imageResizeModule: [{
|
|
437
|
-
type: Input
|
|
438
|
-
}], imageDropModule: [{
|
|
439
|
-
type: Input
|
|
440
|
-
}], syntaxModule: [{
|
|
441
|
-
type: Input
|
|
442
|
-
}] } });
|
|
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 (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"] }]
|
|
435
|
+
}] });
|
|
443
436
|
|
|
444
437
|
class QuillModule {
|
|
445
438
|
constructor(parentModule) {
|