@cleavelandprice/ngx-lib 4.7.12 → 4.7.14

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.
Files changed (35) hide show
  1. package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs +184 -175
  2. package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs.map +1 -1
  3. package/fesm2022/cleavelandprice-ngx-lib-active-directory.mjs +7 -7
  4. package/fesm2022/cleavelandprice-ngx-lib-active-directory.mjs.map +1 -1
  5. package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs +35 -34
  6. package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs.map +1 -1
  7. package/fesm2022/cleavelandprice-ngx-lib-authentication-object.mjs +7 -7
  8. package/fesm2022/cleavelandprice-ngx-lib-authentication-object.mjs.map +1 -1
  9. package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs +17 -19
  10. package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs.map +1 -1
  11. package/fesm2022/cleavelandprice-ngx-lib-authentication-token.mjs +7 -7
  12. package/fesm2022/cleavelandprice-ngx-lib-authentication-token.mjs.map +1 -1
  13. package/fesm2022/cleavelandprice-ngx-lib-authentication.mjs +4 -4
  14. package/fesm2022/cleavelandprice-ngx-lib-authentication.mjs.map +1 -1
  15. package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs +63 -61
  16. package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs.map +1 -1
  17. package/fesm2022/cleavelandprice-ngx-lib-msgraph.mjs +4 -4
  18. package/fesm2022/cleavelandprice-ngx-lib-msgraph.mjs.map +1 -1
  19. package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +41 -25
  20. package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
  21. package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +141 -84
  22. package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
  23. package/fesm2022/cleavelandprice-ngx-lib-sharepoint.mjs +28 -26
  24. package/fesm2022/cleavelandprice-ngx-lib-sharepoint.mjs.map +1 -1
  25. package/fesm2022/cleavelandprice-ngx-lib-table.mjs +76 -48
  26. package/fesm2022/cleavelandprice-ngx-lib-table.mjs.map +1 -1
  27. package/fesm2022/cleavelandprice-ngx-lib-upload.mjs +31 -30
  28. package/fesm2022/cleavelandprice-ngx-lib-upload.mjs.map +1 -1
  29. package/fesm2022/cleavelandprice-ngx-lib-url-utilities.mjs +13 -13
  30. package/fesm2022/cleavelandprice-ngx-lib-url-utilities.mjs.map +1 -1
  31. package/fesm2022/cleavelandprice-ngx-lib.mjs +7 -7
  32. package/fesm2022/cleavelandprice-ngx-lib.mjs.map +1 -1
  33. package/package.json +5 -4
  34. package/types/cleavelandprice-ngx-lib-active-directory-material.d.ts +1 -1
  35. package/types/cleavelandprice-ngx-lib-table.d.ts +2 -1
@@ -1,6 +1,6 @@
1
1
  import { NgTemplateOutlet, CommonModule } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
- import { inject, Component, viewChild, model, output, forwardRef, Optional, SkipSelf, NgModule } from '@angular/core';
3
+ import { inject, ChangeDetectionStrategy, Component, viewChild, model, output, forwardRef, Optional, SkipSelf, NgModule } from '@angular/core';
4
4
  import * as i1 from '@angular/forms';
5
5
  import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
6
6
  import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
@@ -158,10 +158,10 @@ class RawComponent {
158
158
  constructor() {
159
159
  this.data = inject(MAT_DIALOG_DATA);
160
160
  }
161
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
162
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", 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],[formArray],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]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }] }); }
161
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
162
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
163
163
  }
164
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RawComponent, decorators: [{
164
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RawComponent, decorators: [{
165
165
  type: Component,
166
166
  args: [{ selector: 'cpquill-raw', imports: [
167
167
  FormsModule,
@@ -171,8 +171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
171
171
  MatDialogContent,
172
172
  MatFormField,
173
173
  MatIcon,
174
- MatInput
175
- ], standalone: true, 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"] }]
174
+ MatInput,
175
+ ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, 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"] }]
176
176
  }] });
177
177
 
178
178
  class EditorComponent {
@@ -180,29 +180,47 @@ class EditorComponent {
180
180
  this.#data = inject(MAT_DIALOG_DATA, { optional: true });
181
181
  this.#dialogRef = inject((MatDialogRef), { optional: true });
182
182
  this.#dialog = inject(MatDialog);
183
- this.editor = viewChild(QuillEditorComponent, ...(ngDevMode ? [{ debugName: "editor" }] : []));
183
+ this.editor = viewChild(QuillEditorComponent, /* @ts-ignore */
184
+ ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
184
185
  this.onChange = (_) => { }; // Invoked when the model has been changed
185
186
  this.onTouched = () => { }; // Invoked when the model has been touched
186
187
  //#endregion
187
- this.config = model(DefaultConfig, ...(ngDevMode ? [{ debugName: "config" }] : []));
188
- this.placeholder = model(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
188
+ this.config = model(DefaultConfig, /* @ts-ignore */
189
+ ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
190
+ this.placeholder = model(/* @ts-ignore */
191
+ ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
189
192
  //#region These can be passed in as @Input(), or use values from config
190
- this.format = model(...(ngDevMode ? [undefined, { debugName: "format" }] : []));
191
- this.height = model(...(ngDevMode ? [undefined, { debugName: "height" }] : []));
192
- this.width = model(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
193
- this.fullscreenHeight = model(...(ngDevMode ? [undefined, { debugName: "fullscreenHeight" }] : []));
194
- this.fullscreenWidth = model(...(ngDevMode ? [undefined, { debugName: "fullscreenWidth" }] : []));
195
- this.fullscreenMode = model(...(ngDevMode ? [undefined, { debugName: "fullscreenMode" }] : []));
196
- this.enableTooltips = model(...(ngDevMode ? [undefined, { debugName: "enableTooltips" }] : []));
197
- this.fullscreen = model(...(ngDevMode ? [undefined, { debugName: "fullscreen" }] : []));
198
- this.readonly = model(...(ngDevMode ? [undefined, { debugName: "readonly" }] : []));
199
- this.applyReadonlyStyle = model(...(ngDevMode ? [undefined, { debugName: "applyReadonlyStyle" }] : []));
200
- this.showToolbar = model(...(ngDevMode ? [undefined, { debugName: "showToolbar" }] : []));
201
- this.showBorder = model(...(ngDevMode ? [undefined, { debugName: "showBorder" }] : []));
193
+ this.format = model(/* @ts-ignore */
194
+ ...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
195
+ this.height = model(/* @ts-ignore */
196
+ ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
197
+ this.width = model(/* @ts-ignore */
198
+ ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
199
+ this.fullscreenHeight = model(/* @ts-ignore */
200
+ ...(ngDevMode ? [undefined, { debugName: "fullscreenHeight" }] : /* istanbul ignore next */ []));
201
+ this.fullscreenWidth = model(/* @ts-ignore */
202
+ ...(ngDevMode ? [undefined, { debugName: "fullscreenWidth" }] : /* istanbul ignore next */ []));
203
+ this.fullscreenMode = model(/* @ts-ignore */
204
+ ...(ngDevMode ? [undefined, { debugName: "fullscreenMode" }] : /* istanbul ignore next */ []));
205
+ this.enableTooltips = model(/* @ts-ignore */
206
+ ...(ngDevMode ? [undefined, { debugName: "enableTooltips" }] : /* istanbul ignore next */ []));
207
+ this.fullscreen = model(/* @ts-ignore */
208
+ ...(ngDevMode ? [undefined, { debugName: "fullscreen" }] : /* istanbul ignore next */ []));
209
+ this.readonly = model(/* @ts-ignore */
210
+ ...(ngDevMode ? [undefined, { debugName: "readonly" }] : /* istanbul ignore next */ []));
211
+ this.applyReadonlyStyle = model(/* @ts-ignore */
212
+ ...(ngDevMode ? [undefined, { debugName: "applyReadonlyStyle" }] : /* istanbul ignore next */ []));
213
+ this.showToolbar = model(/* @ts-ignore */
214
+ ...(ngDevMode ? [undefined, { debugName: "showToolbar" }] : /* istanbul ignore next */ []));
215
+ this.showBorder = model(/* @ts-ignore */
216
+ ...(ngDevMode ? [undefined, { debugName: "showBorder" }] : /* istanbul ignore next */ []));
202
217
  //#region Optional Quill modules
203
- this.imageResizeModule = model(...(ngDevMode ? [undefined, { debugName: "imageResizeModule" }] : []));
204
- this.imageDropModule = model(...(ngDevMode ? [undefined, { debugName: "imageDropModule" }] : []));
205
- this.syntaxModule = model(...(ngDevMode ? [undefined, { debugName: "syntaxModule" }] : []));
218
+ this.imageResizeModule = model(/* @ts-ignore */
219
+ ...(ngDevMode ? [undefined, { debugName: "imageResizeModule" }] : /* istanbul ignore next */ []));
220
+ this.imageDropModule = model(/* @ts-ignore */
221
+ ...(ngDevMode ? [undefined, { debugName: "imageDropModule" }] : /* istanbul ignore next */ []));
222
+ this.syntaxModule = model(/* @ts-ignore */
223
+ ...(ngDevMode ? [undefined, { debugName: "syntaxModule" }] : /* istanbul ignore next */ []));
206
224
  //#endregion
207
225
  //#endregion
208
226
  this.fullscreenChanged = output();
@@ -214,20 +232,41 @@ class EditorComponent {
214
232
  this.onFocus = output();
215
233
  this.onSelectionChanged = output();
216
234
  }
217
- get showBlockStyle() { return (this.config()?.buttons?.blockquote || this.config()?.buttons?.codeblock) ?? false; }
218
- ;
219
- get showFontStyle() { return (this.config()?.buttons?.bold || this.config()?.buttons?.italic || this.config()?.buttons?.strike || this.config()?.buttons?.underline) ?? false; }
220
- ;
221
- get showQuickHeadingStyle() { return (this.config()?.buttons?.h1 || this.config()?.buttons?.h2) ?? false; }
222
- ;
223
- get showIndentStyle() { return (this.config()?.buttons?.decreaseIndent || this.config()?.buttons?.increaseIndent) ?? false; }
224
- ;
225
- get showListStyle() { return (this.config()?.buttons?.bulleted || this.config()?.buttons?.ordered) ?? false; }
226
- ;
227
- get showMedia() { return (this.config()?.buttons?.link || this.config()?.buttons?.image || this.config()?.buttons?.video) ?? false; }
228
- ;
229
- get showScriptStyle() { return (this.config()?.buttons?.subScript || this.config()?.buttons?.superScript) ?? false; }
230
- ;
235
+ get showBlockStyle() {
236
+ return ((this.config()?.buttons?.blockquote ||
237
+ this.config()?.buttons?.codeblock) ??
238
+ false);
239
+ }
240
+ get showFontStyle() {
241
+ return ((this.config()?.buttons?.bold ||
242
+ this.config()?.buttons?.italic ||
243
+ this.config()?.buttons?.strike ||
244
+ this.config()?.buttons?.underline) ??
245
+ false);
246
+ }
247
+ get showQuickHeadingStyle() {
248
+ return (this.config()?.buttons?.h1 || this.config()?.buttons?.h2) ?? false;
249
+ }
250
+ get showIndentStyle() {
251
+ return ((this.config()?.buttons?.decreaseIndent ||
252
+ this.config()?.buttons?.increaseIndent) ??
253
+ false);
254
+ }
255
+ get showListStyle() {
256
+ return ((this.config()?.buttons?.bulleted || this.config()?.buttons?.ordered) ??
257
+ false);
258
+ }
259
+ get showMedia() {
260
+ return ((this.config()?.buttons?.link ||
261
+ this.config()?.buttons?.image ||
262
+ this.config()?.buttons?.video) ??
263
+ false);
264
+ }
265
+ get showScriptStyle() {
266
+ return ((this.config()?.buttons?.subScript ||
267
+ this.config()?.buttons?.superScript) ??
268
+ false);
269
+ }
231
270
  #data;
232
271
  #dialogRef;
233
272
  #dialog;
@@ -248,12 +287,12 @@ class EditorComponent {
248
287
  buttons: this.config()?.buttons ?? DefaultButtons,
249
288
  icons: {
250
289
  ...DefaultIcons,
251
- ...this.config()?.icons
290
+ ...this.config()?.icons,
252
291
  },
253
292
  tooltips: {
254
293
  ...DefaultTooltips,
255
- ...this.config()?.tooltips
256
- }
294
+ ...this.config()?.tooltips,
295
+ },
257
296
  });
258
297
  this.value = this.value ?? this.#data?.value;
259
298
  // Moved to client responsibility
@@ -261,33 +300,45 @@ class EditorComponent {
261
300
  Quill.register('modules/imageDrop', ImageDrop);
262
301
  }*/
263
302
  this.placeholder.set(this.placeholder() ?? this.#data?.placeholder);
264
- this.imageDropModule.set(this.imageDropModule() ?? this.#data?.imageDropModule ?? this.config().imageDropModule);
265
- this.imageResizeModule.set(this.imageResizeModule() ?? this.#data?.imageResizeModule ?? this.config().imageResizeModule);
266
- this.syntaxModule.set(this.syntaxModule() ?? this.#data?.syntaxModule ?? this.config().syntaxModule);
303
+ this.imageDropModule.set(this.imageDropModule() ??
304
+ this.#data?.imageDropModule ??
305
+ this.config().imageDropModule);
306
+ this.imageResizeModule.set(this.imageResizeModule() ??
307
+ this.#data?.imageResizeModule ??
308
+ this.config().imageResizeModule);
309
+ this.syntaxModule.set(this.syntaxModule() ??
310
+ this.#data?.syntaxModule ??
311
+ this.config().syntaxModule);
267
312
  this.format.set(this.format() ?? this.#data?.format ?? this.config().format);
268
313
  this.height.set(this.height() ?? this.#data?.height ?? this.config().height);
269
314
  this.width.set(this.width() ?? this.#data?.width ?? this.config().width);
270
- this.fullscreenHeight.set(this.fullscreenHeight() ?? this.#data?.maxHeight ?? this.config().fullscreenHeight);
271
- this.fullscreenWidth.set(this.fullscreenWidth() ?? this.#data?.maxWidth ?? this.config().fullscreenWidth);
272
- this.fullscreenMode.set(this.fullscreenMode() ?? this.#data?.fullscreenMode ?? this.config().fullscreenMode);
273
- this.enableTooltips.set(this.enableTooltips() !== undefined ?
274
- this.enableTooltips() :
275
- this.#data?.enableTooltips ?? this.config().enableTooltips);
276
- this.fullscreen.set(this.fullscreen() !== undefined ?
277
- this.fullscreen() :
278
- this.#data?.fullscreen ?? this.config().fullscreen);
279
- this.readonly.set(this.readonly() !== undefined ?
280
- this.readonly() :
281
- this.#data?.readonly ?? this.config().readonly);
282
- this.applyReadonlyStyle.set(this.applyReadonlyStyle() !== undefined ?
283
- this.applyReadonlyStyle() :
284
- this.#data?.applyReadonlyStyle ?? this.config().applyReadonlyStyle);
285
- this.showToolbar.set(this.showToolbar() !== undefined ?
286
- this.showToolbar() :
287
- this.#data?.showToolbar ?? this.config().showToolbar);
288
- this.showBorder.set(this.showBorder() !== undefined ?
289
- this.showBorder() :
290
- this.#data?.showBorder ?? this.config().showBorder);
315
+ this.fullscreenHeight.set(this.fullscreenHeight() ??
316
+ this.#data?.maxHeight ??
317
+ this.config().fullscreenHeight);
318
+ this.fullscreenWidth.set(this.fullscreenWidth() ??
319
+ this.#data?.maxWidth ??
320
+ this.config().fullscreenWidth);
321
+ this.fullscreenMode.set(this.fullscreenMode() ??
322
+ this.#data?.fullscreenMode ??
323
+ this.config().fullscreenMode);
324
+ this.enableTooltips.set(this.enableTooltips() !== undefined
325
+ ? this.enableTooltips()
326
+ : (this.#data?.enableTooltips ?? this.config().enableTooltips));
327
+ this.fullscreen.set(this.fullscreen() !== undefined
328
+ ? this.fullscreen()
329
+ : (this.#data?.fullscreen ?? this.config().fullscreen));
330
+ this.readonly.set(this.readonly() !== undefined
331
+ ? this.readonly()
332
+ : (this.#data?.readonly ?? this.config().readonly));
333
+ this.applyReadonlyStyle.set(this.applyReadonlyStyle() !== undefined
334
+ ? this.applyReadonlyStyle()
335
+ : (this.#data?.applyReadonlyStyle ?? this.config().applyReadonlyStyle));
336
+ this.showToolbar.set(this.showToolbar() !== undefined
337
+ ? this.showToolbar()
338
+ : (this.#data?.showToolbar ?? this.config().showToolbar));
339
+ this.showBorder.set(this.showBorder() !== undefined
340
+ ? this.showBorder()
341
+ : (this.#data?.showBorder ?? this.config().showBorder));
291
342
  }
292
343
  toggleFullscreen() {
293
344
  if (this.fullscreenMode() === 'expand') {
@@ -318,17 +369,18 @@ class EditorComponent {
318
369
  showBorder: this.showBorder(),
319
370
  imageResizeModule: this.imageResizeModule(),
320
371
  imageDropModule: this.imageDropModule(),
321
- syntaxModule: this.syntaxModule()
372
+ syntaxModule: this.syntaxModule(),
322
373
  //users: this.users
323
374
  };
324
- this.#dialog.open(EditorComponent, {
375
+ this.#dialog
376
+ .open(EditorComponent, {
325
377
  disableClose: true,
326
378
  width: this.fullscreenWidth(),
327
379
  height: this.fullscreenHeight(),
328
- data
380
+ data,
329
381
  })
330
382
  .afterClosed()
331
- .subscribe(value => {
383
+ .subscribe((value) => {
332
384
  this.value = value;
333
385
  this.updateChanges();
334
386
  });
@@ -337,14 +389,15 @@ class EditorComponent {
337
389
  }
338
390
  }
339
391
  rawEdit() {
340
- this.#dialog.open(RawComponent, {
392
+ this.#dialog
393
+ .open(RawComponent, {
341
394
  data: this.value,
342
395
  disableClose: true,
343
396
  height: '90%',
344
- width: '100%'
397
+ width: '100%',
345
398
  })
346
399
  .afterClosed()
347
- .subscribe(value => {
400
+ .subscribe((value) => {
348
401
  if (value === '__DO!!NOT!!UPDATE__') {
349
402
  return;
350
403
  }
@@ -421,14 +474,16 @@ class EditorComponent {
421
474
  registerOnTouched(fn) {
422
475
  this.onTouched = fn;
423
476
  }
424
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
425
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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: [{
477
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
478
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: [
479
+ {
426
480
  provide: NG_VALUE_ACCESSOR,
427
481
  useExisting: forwardRef(() => EditorComponent),
428
- multi: true
429
- }], 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() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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]):not([formArray]),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" }] }); }
482
+ multi: true,
483
+ },
484
+ ], 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() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],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]):not([formArray]),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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
430
485
  }
431
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditorComponent, decorators: [{
486
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: EditorComponent, decorators: [{
432
487
  type: Component,
433
488
  args: [{ selector: 'cpquill-editor', imports: [
434
489
  FormsModule,
@@ -436,11 +491,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
436
491
  MatTooltip,
437
492
  NgTemplateOutlet,
438
493
  QuillEditorComponent,
439
- ], standalone: true, providers: [{
494
+ ], standalone: true, changeDetection: ChangeDetectionStrategy.Eager, providers: [
495
+ {
440
496
  provide: NG_VALUE_ACCESSOR,
441
497
  useExisting: forwardRef(() => EditorComponent),
442
- multi: true
443
- }], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
498
+ multi: true,
499
+ },
500
+ ], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
444
501
  }], propDecorators: { editor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => QuillEditorComponent), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], fullscreenHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenHeight", required: false }] }, { type: i0.Output, args: ["fullscreenHeightChange"] }], fullscreenWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenWidth", required: false }] }, { type: i0.Output, args: ["fullscreenWidthChange"] }], fullscreenMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenMode", required: false }] }, { type: i0.Output, args: ["fullscreenModeChange"] }], enableTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTooltips", required: false }] }, { type: i0.Output, args: ["enableTooltipsChange"] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }, { type: i0.Output, args: ["fullscreenChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], applyReadonlyStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyReadonlyStyle", required: false }] }, { type: i0.Output, args: ["applyReadonlyStyleChange"] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }, { type: i0.Output, args: ["showToolbarChange"] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }, { type: i0.Output, args: ["showBorderChange"] }], imageResizeModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageResizeModule", required: false }] }, { type: i0.Output, args: ["imageResizeModuleChange"] }], imageDropModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageDropModule", required: false }] }, { type: i0.Output, args: ["imageDropModuleChange"] }], syntaxModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxModule", required: false }] }, { type: i0.Output, args: ["syntaxModuleChange"] }], fullscreenChanged: [{ type: i0.Output, args: ["fullscreenChanged"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onContentChanged: [{ type: i0.Output, args: ["onContentChanged"] }], onEditorChanged: [{ type: i0.Output, args: ["onEditorChanged"] }], onEditorCreated: [{ type: i0.Output, args: ["onEditorCreated"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
445
502
 
446
503
  class QuillModule {
@@ -449,8 +506,8 @@ class QuillModule {
449
506
  throw new Error('QuillModule is already loaded. Import it in the AppModule only');
450
507
  }
451
508
  }
452
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: QuillModule, deps: [{ token: QuillModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
453
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: QuillModule, imports: [CommonModule,
509
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: QuillModule, deps: [{ token: QuillModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
510
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: QuillModule, imports: [CommonModule,
454
511
  FormsModule,
455
512
  ReactiveFormsModule,
456
513
  MatButtonModule,
@@ -463,7 +520,7 @@ class QuillModule {
463
520
  EditorComponent,
464
521
  RawComponent], exports: [EditorComponent,
465
522
  RawComponent] }); }
466
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: QuillModule, imports: [CommonModule,
523
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: QuillModule, imports: [CommonModule,
467
524
  FormsModule,
468
525
  ReactiveFormsModule,
469
526
  MatButtonModule,
@@ -476,7 +533,7 @@ class QuillModule {
476
533
  EditorComponent,
477
534
  RawComponent] }); }
478
535
  }
479
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: QuillModule, decorators: [{
536
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: QuillModule, decorators: [{
480
537
  type: NgModule,
481
538
  args: [{
482
539
  declarations: [],