@cleavelandprice/ngx-lib 3.2.6 → 3.2.8

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.
@@ -1,18 +1,23 @@
1
1
  import * as i0 from '@angular/core';
2
- import { EventEmitter, forwardRef, Component, Optional, Inject, ViewChild, Input, Output, NgModule, SkipSelf } from '@angular/core';
2
+ import { Component, Inject, EventEmitter, forwardRef, Optional, ViewChild, Input, Output, NgModule, SkipSelf } from '@angular/core';
3
3
  import * as i3 from '@angular/forms';
4
4
  import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
5
5
  import * as i1 from '@angular/material/dialog';
6
6
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
7
- import * as i6 from 'ngx-quill';
7
+ import * as i6$1 from 'ngx-quill';
8
8
  import { QuillEditorComponent, QuillModule as QuillModule$1 } from 'ngx-quill';
9
- import * as i2 from '@angular/common';
10
- import { CommonModule } from '@angular/common';
11
- import * as i4 from '@angular/material/icon';
9
+ import * as i2 from '@angular/material/button';
10
+ import { MatButtonModule } from '@angular/material/button';
11
+ import * as i4 from '@angular/material/form-field';
12
+ import { MatFormFieldModule } from '@angular/material/form-field';
13
+ import * as i5 from '@angular/material/icon';
12
14
  import { MatIconModule } from '@angular/material/icon';
13
- import * as i5 from '@angular/material/tooltip';
15
+ import * as i6 from '@angular/material/input';
16
+ import { MatInputModule } from '@angular/material/input';
17
+ import * as i2$1 from '@angular/common';
18
+ import { CommonModule } from '@angular/common';
19
+ import * as i5$1 from '@angular/material/tooltip';
14
20
  import { MatTooltipModule } from '@angular/material/tooltip';
15
- import { MatButtonModule } from '@angular/material/button';
16
21
 
17
22
  class Buttons {
18
23
  constructor() {
@@ -61,6 +66,7 @@ class Buttons {
61
66
  this.formula = true;
62
67
  this.rtl = true;
63
68
  this.editorSize = true;
69
+ this.rawEditor = false;
64
70
  //#endregion
65
71
  }
66
72
  }
@@ -124,6 +130,7 @@ class Tooltips {
124
130
  this.minimize = 'Minimize';
125
131
  this.popout = 'Popout';
126
132
  this.popin = 'Done';
133
+ this.rawEditor = 'Edit raw HTML (dangerous!)';
127
134
  //#endregion
128
135
  }
129
136
  }
@@ -165,6 +172,23 @@ class Config {
165
172
  }
166
173
  }
167
174
 
175
+ class RawComponent {
176
+ constructor(data) {
177
+ this.data = data;
178
+ }
179
+ }
180
+ RawComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: RawComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
181
+ RawComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: RawComponent, 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: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.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"] }] });
182
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: RawComponent, decorators: [{
183
+ type: Component,
184
+ args: [{ selector: 'cpquill-raw', 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
+ }], ctorParameters: function () {
186
+ return [{ type: undefined, decorators: [{
187
+ type: Inject,
188
+ args: [MAT_DIALOG_DATA]
189
+ }] }];
190
+ } });
191
+
168
192
  class EditorComponent {
169
193
  //#endregion
170
194
  constructor(data, dialogRef,
@@ -197,57 +221,42 @@ class EditorComponent {
197
221
  }*/
198
222
  }
199
223
  initialize() {
200
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
224
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21;
201
225
  this.config = (_c = (_a = this.config) !== null && _a !== void 0 ? _a : (_b = this.data) === null || _b === void 0 ? void 0 : _b.config) !== null && _c !== void 0 ? _c : new Config();
202
226
  this.value = (_d = this.value) !== null && _d !== void 0 ? _d : (_e = this.data) === null || _e === void 0 ? void 0 : _e.value;
203
- /*this.imageResizeModule = this.imageResizeModule !== undefined ?
204
- this.imageResizeModule :
205
- this.imageResizeModule ?? this.config.imageResizeModule;
206
-
207
- this.imageDropModule = this.imageDropModule !== undefined ?
208
- this.imageDropModule :
209
- this.imageDropModule ?? this.config.imageDropModule;*/
210
- /*this.mentionModule = this.mentionModule !== undefined ?
211
- this.mentionModule :
212
- this.mentionModule ?? this.config.mentionModule;*/
213
- /*this.syntaxModule = this.syntaxModule !== undefined ?
214
- this.syntaxModule :
215
- this.syntaxModule ?? this.config.syntaxModule;*/
216
227
  // Moved to client responsibility
217
228
  /*if (this.imageDropModule) {
218
229
  Quill.register('modules/imageDrop', ImageDrop);
219
230
  }*/
220
231
  this.placeholder = (_f = this.placeholder) !== null && _f !== void 0 ? _f : (_g = this.data) === null || _g === void 0 ? void 0 : _g.placeholder;
221
232
  //this.users = this.users ?? this.data?.users;
222
- // Debug
223
- console.log(this.imageResizeModule, (_h = this.data) === null || _h === void 0 ? void 0 : _h.imageResizeModule, this.config.imageResizeModule);
224
- this.imageDropModule = (_l = (_j = this.imageDropModule) !== null && _j !== void 0 ? _j : (_k = this.data) === null || _k === void 0 ? void 0 : _k.imageDropModule) !== null && _l !== void 0 ? _l : this.config.imageDropModule;
225
- this.imageResizeModule = (_p = (_m = this.imageResizeModule) !== null && _m !== void 0 ? _m : (_o = this.data) === null || _o === void 0 ? void 0 : _o.imageResizeModule) !== null && _p !== void 0 ? _p : this.config.imageResizeModule;
226
- this.syntaxModule = (_s = (_q = this.syntaxModule) !== null && _q !== void 0 ? _q : (_r = this.data) === null || _r === void 0 ? void 0 : _r.syntaxModule) !== null && _s !== void 0 ? _s : this.config.syntaxModule;
227
- this.format = (_v = (_t = this.format) !== null && _t !== void 0 ? _t : (_u = this.data) === null || _u === void 0 ? void 0 : _u.format) !== null && _v !== void 0 ? _v : this.config.format;
228
- this.height = (_y = (_w = this.height) !== null && _w !== void 0 ? _w : (_x = this.data) === null || _x === void 0 ? void 0 : _x.height) !== null && _y !== void 0 ? _y : this.config.height;
229
- this.width = (_1 = (_z = this.width) !== null && _z !== void 0 ? _z : (_0 = this.data) === null || _0 === void 0 ? void 0 : _0.width) !== null && _1 !== void 0 ? _1 : this.config.width;
230
- this.fullscreenHeight = (_4 = (_2 = this.fullscreenHeight) !== null && _2 !== void 0 ? _2 : (_3 = this.data) === null || _3 === void 0 ? void 0 : _3.maxHeight) !== null && _4 !== void 0 ? _4 : this.config.fullscreenHeight;
231
- this.fullscreenWidth = (_7 = (_5 = this.fullscreenWidth) !== null && _5 !== void 0 ? _5 : (_6 = this.data) === null || _6 === void 0 ? void 0 : _6.maxWidth) !== null && _7 !== void 0 ? _7 : this.config.fullscreenWidth;
232
- this.fullscreenMode = (_10 = (_8 = this.fullscreenMode) !== null && _8 !== void 0 ? _8 : (_9 = this.data) === null || _9 === void 0 ? void 0 : _9.fullscreenMode) !== null && _10 !== void 0 ? _10 : this.config.fullscreenMode;
233
+ this.imageDropModule = (_k = (_h = this.imageDropModule) !== null && _h !== void 0 ? _h : (_j = this.data) === null || _j === void 0 ? void 0 : _j.imageDropModule) !== null && _k !== void 0 ? _k : this.config.imageDropModule;
234
+ this.imageResizeModule = (_o = (_l = this.imageResizeModule) !== null && _l !== void 0 ? _l : (_m = this.data) === null || _m === void 0 ? void 0 : _m.imageResizeModule) !== null && _o !== void 0 ? _o : this.config.imageResizeModule;
235
+ this.syntaxModule = (_r = (_p = this.syntaxModule) !== null && _p !== void 0 ? _p : (_q = this.data) === null || _q === void 0 ? void 0 : _q.syntaxModule) !== null && _r !== void 0 ? _r : this.config.syntaxModule;
236
+ this.format = (_u = (_s = this.format) !== null && _s !== void 0 ? _s : (_t = this.data) === null || _t === void 0 ? void 0 : _t.format) !== null && _u !== void 0 ? _u : this.config.format;
237
+ this.height = (_x = (_v = this.height) !== null && _v !== void 0 ? _v : (_w = this.data) === null || _w === void 0 ? void 0 : _w.height) !== null && _x !== void 0 ? _x : this.config.height;
238
+ this.width = (_0 = (_y = this.width) !== null && _y !== void 0 ? _y : (_z = this.data) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : this.config.width;
239
+ this.fullscreenHeight = (_3 = (_1 = this.fullscreenHeight) !== null && _1 !== void 0 ? _1 : (_2 = this.data) === null || _2 === void 0 ? void 0 : _2.maxHeight) !== null && _3 !== void 0 ? _3 : this.config.fullscreenHeight;
240
+ this.fullscreenWidth = (_6 = (_4 = this.fullscreenWidth) !== null && _4 !== void 0 ? _4 : (_5 = this.data) === null || _5 === void 0 ? void 0 : _5.maxWidth) !== null && _6 !== void 0 ? _6 : this.config.fullscreenWidth;
241
+ this.fullscreenMode = (_9 = (_7 = this.fullscreenMode) !== null && _7 !== void 0 ? _7 : (_8 = this.data) === null || _8 === void 0 ? void 0 : _8.fullscreenMode) !== null && _9 !== void 0 ? _9 : this.config.fullscreenMode;
233
242
  this.enableTooltips = this.enableTooltips !== undefined ?
234
243
  this.enableTooltips :
235
- (_12 = (_11 = this.data) === null || _11 === void 0 ? void 0 : _11.enableTooltips) !== null && _12 !== void 0 ? _12 : this.config.enableTooltips;
244
+ (_11 = (_10 = this.data) === null || _10 === void 0 ? void 0 : _10.enableTooltips) !== null && _11 !== void 0 ? _11 : this.config.enableTooltips;
236
245
  this.fullscreen = this.fullscreen !== undefined ?
237
246
  this.fullscreen :
238
- (_14 = (_13 = this.data) === null || _13 === void 0 ? void 0 : _13.fullscreen) !== null && _14 !== void 0 ? _14 : this.config.fullscreen;
247
+ (_13 = (_12 = this.data) === null || _12 === void 0 ? void 0 : _12.fullscreen) !== null && _13 !== void 0 ? _13 : this.config.fullscreen;
239
248
  this.readonly = this.readonly !== undefined ?
240
249
  this.readonly :
241
- (_16 = (_15 = this.data) === null || _15 === void 0 ? void 0 : _15.readonly) !== null && _16 !== void 0 ? _16 : this.config.readonly;
250
+ (_15 = (_14 = this.data) === null || _14 === void 0 ? void 0 : _14.readonly) !== null && _15 !== void 0 ? _15 : this.config.readonly;
242
251
  this.applyReadonlyStyle = this.applyReadonlyStyle !== undefined ?
243
252
  this.applyReadonlyStyle :
244
- (_18 = (_17 = this.data) === null || _17 === void 0 ? void 0 : _17.applyReadonlyStyle) !== null && _18 !== void 0 ? _18 : this.config.applyReadonlyStyle;
253
+ (_17 = (_16 = this.data) === null || _16 === void 0 ? void 0 : _16.applyReadonlyStyle) !== null && _17 !== void 0 ? _17 : this.config.applyReadonlyStyle;
245
254
  this.showToolbar = this.showToolbar !== undefined ?
246
255
  this.showToolbar :
247
- (_20 = (_19 = this.data) === null || _19 === void 0 ? void 0 : _19.showToolbar) !== null && _20 !== void 0 ? _20 : this.config.showToolbar;
256
+ (_19 = (_18 = this.data) === null || _18 === void 0 ? void 0 : _18.showToolbar) !== null && _19 !== void 0 ? _19 : this.config.showToolbar;
248
257
  this.showBorder = this.showBorder !== undefined ?
249
258
  this.showBorder :
250
- (_22 = (_21 = this.data) === null || _21 === void 0 ? void 0 : _21.showBorder) !== null && _22 !== void 0 ? _22 : this.config.showBorder;
259
+ (_21 = (_20 = this.data) === null || _20 === void 0 ? void 0 : _20.showBorder) !== null && _21 !== void 0 ? _21 : this.config.showBorder;
251
260
  }
252
261
  toggleFullscreen() {
253
262
  if (this.fullscreenMode === 'expand') {
@@ -296,6 +305,21 @@ class EditorComponent {
296
305
  }
297
306
  }
298
307
  }
308
+ rawEdit() {
309
+ this.dialog.open(RawComponent, {
310
+ data: this.value,
311
+ disableClose: true,
312
+ height: '90%',
313
+ width: '100%'
314
+ })
315
+ .afterClosed()
316
+ .subscribe(value => {
317
+ if (value === '__DO!!NOT!!UPDATE__') {
318
+ return;
319
+ }
320
+ this.value = value;
321
+ });
322
+ }
299
323
  tooltip(val) {
300
324
  return this.enableTooltips ? val : '';
301
325
  }
@@ -372,14 +396,14 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
372
396
  provide: NG_VALUE_ACCESSOR,
373
397
  useExisting: forwardRef(() => EditorComponent),
374
398
  multi: true
375
- }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n\r\n [placeholder]=\"placeholder\"\r\n [format]=\"format\"\r\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n [readOnly]=\"readonly\"\r\n [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n [class.no-toolbar]=\"!showToolbar\"\r\n [class.no-border]=\"!showBorder\"\r\n [modules]=\"modules\"\r\n \r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n \r\n <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n </div>\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\r\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\r\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\r\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\r\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\r\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\r\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\r\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\r\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\r\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\r\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\r\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\r\n </span>\r\n</ng-template>\r\n \r\n<ng-template #indentStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\r\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\r\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [matTooltip]=\"tooltip(config.tooltips.fontSize)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [matTooltip]=\"tooltip(config.tooltips.headingStyle)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [matTooltip]=\"tooltip(config.tooltips.font)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [matTooltip]=\"tooltip(config.tooltips.align)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\r\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\r\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\r\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen ?\r\n (fullscreenMode === 'expand' ? config.tooltips.minimize : config.tooltips.popin) :\r\n (fullscreenMode === 'expand' ? config.tooltips.maximize : config.tooltips.popout))\">\r\n\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen ?\r\n (fullscreenMode === 'expand' ? config.icons.minimize : config.icons.popin) :\r\n (fullscreenMode === 'expand' ? config.icons.maximize : config.icons.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6.QuillEditorComponent, selector: "quill-editor" }] });
399
+ }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true }], ngImport: i0, template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n\r\n [placeholder]=\"placeholder\"\r\n [format]=\"format\"\r\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n [readOnly]=\"readonly\"\r\n [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n [class.no-toolbar]=\"!showToolbar\"\r\n [class.no-border]=\"!showBorder\"\r\n [modules]=\"modules\"\r\n \r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n \r\n <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n </div>\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\r\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\r\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\r\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\r\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\r\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\r\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\r\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\r\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\r\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\r\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\r\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\r\n </span>\r\n</ng-template>\r\n \r\n<ng-template #indentStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\r\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\r\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [matTooltip]=\"tooltip(config.tooltips.fontSize)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [matTooltip]=\"tooltip(config.tooltips.headingStyle)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [matTooltip]=\"tooltip(config.tooltips.font)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [matTooltip]=\"tooltip(config.tooltips.align)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\r\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\r\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\r\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rawEditor\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config.tooltips.rawEditor)\">\r\n\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen ?\r\n (fullscreenMode === 'expand' ? config.tooltips.minimize : config.tooltips.popin) :\r\n (fullscreenMode === 'expand' ? config.tooltips.maximize : config.tooltips.popout))\">\r\n\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen ?\r\n (fullscreenMode === 'expand' ? config.icons.minimize : config.icons.popin) :\r\n (fullscreenMode === 'expand' ? config.icons.maximize : config.icons.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.QuillEditorComponent, selector: "quill-editor" }] });
376
400
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: EditorComponent, decorators: [{
377
401
  type: Component,
378
402
  args: [{ selector: 'cpquill-editor', providers: [{
379
403
  provide: NG_VALUE_ACCESSOR,
380
404
  useExisting: forwardRef(() => EditorComponent),
381
405
  multi: true
382
- }], template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n\r\n [placeholder]=\"placeholder\"\r\n [format]=\"format\"\r\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n [readOnly]=\"readonly\"\r\n [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n [class.no-toolbar]=\"!showToolbar\"\r\n [class.no-border]=\"!showBorder\"\r\n [modules]=\"modules\"\r\n \r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n \r\n <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n </div>\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\r\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\r\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\r\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\r\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\r\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\r\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\r\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\r\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\r\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\r\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\r\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\r\n </span>\r\n</ng-template>\r\n \r\n<ng-template #indentStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\r\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\r\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [matTooltip]=\"tooltip(config.tooltips.fontSize)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [matTooltip]=\"tooltip(config.tooltips.headingStyle)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [matTooltip]=\"tooltip(config.tooltips.font)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [matTooltip]=\"tooltip(config.tooltips.align)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\r\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\r\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\r\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen ?\r\n (fullscreenMode === 'expand' ? config.tooltips.minimize : config.tooltips.popin) :\r\n (fullscreenMode === 'expand' ? config.tooltips.maximize : config.tooltips.popout))\">\r\n\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen ?\r\n (fullscreenMode === 'expand' ? config.icons.minimize : config.icons.popin) :\r\n (fullscreenMode === 'expand' ? config.icons.maximize : config.icons.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\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"] }]
406
+ }], template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n\r\n [placeholder]=\"placeholder\"\r\n [format]=\"format\"\r\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\r\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\r\n [readOnly]=\"readonly\"\r\n [class.readonly]=\"readonly && applyReadonlyStyle\"\r\n [class.no-toolbar]=\"!showToolbar\"\r\n [class.no-border]=\"!showBorder\"\r\n [modules]=\"modules\"\r\n \r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n \r\n <div quill-editor-toolbar *ngIf=\"showToolbar\">\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"></ng-container>\r\n </div>\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"heading\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"color\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"font\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"align\"></ng-container>\r\n <ng-container [ngTemplateOutlet]=\"clean\"></ng-container>\r\n <nt-container [ngTemplateOutlet]=\"formula\"></nt-container>\r\n <ng-container [ngTemplateOutlet]=\"media\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showFontStyle\">\r\n <button class=\"ql-bold\" *ngIf=\"config.buttons.bold\" [matTooltip]=\"tooltip(config.tooltips.bold)\"></button>\r\n <button class=\"ql-italic\" *ngIf=\"config.buttons.italic\" [matTooltip]=\"tooltip(config.tooltips.italic)\"></button>\r\n <button class=\"ql-underline\" *ngIf=\"config.buttons.underline\" [matTooltip]=\"tooltip(config.tooltips.underline)\"></button>\r\n <button class=\"ql-strike\" *ngIf=\"config.buttons.strike\" [matTooltip]=\"tooltip(config.tooltips.strike)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showBlockStyle\">\r\n <button class=\"ql-blockquote\" *ngIf=\"config.buttons.blockquote\" [matTooltip]=\"tooltip(config.tooltips.blockquote)\"></button>\r\n <button class=\"ql-code-block\" *ngIf=\"config.buttons.codeblock\" [matTooltip]=\"tooltip(config.tooltips.codeblock)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showQuickHeadingStyle\">\r\n <button class=\"ql-header\" value=\"1\" *ngIf=\"config.buttons.h1\" [matTooltip]=\"tooltip(config.tooltips.h1)\"></button>\r\n <button class=\"ql-header\" value=\"2\" *ngIf=\"config.buttons.h2\" [matTooltip]=\"tooltip(config.tooltips.h2)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showListStyle\">\r\n <button class=\"ql-list\" value=\"ordered\" *ngIf=\"config.buttons.ordered\" [matTooltip]=\"tooltip(config.tooltips.ordered)\"></button>\r\n <button class=\"ql-list\" value=\"bullet\" *ngIf=\"config.buttons.bulleted\" [matTooltip]=\"tooltip(config.tooltips.bulleted)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showScriptStyle\">\r\n <button class=\"ql-script\" value=\"sub\" *ngIf=\"config.buttons.subScript\" [matTooltip]=\"tooltip(config.tooltips.subScript)\"></button>\r\n <button class=\"ql-script\" value=\"super\" *ngIf=\"config.buttons.superScript\" [matTooltip]=\"tooltip(config.tooltips.superScript)\"></button>\r\n </span>\r\n</ng-template>\r\n \r\n<ng-template #indentStyle>\r\n <span class=\"ql-formats\" *ngIf=\"config.showIndentStyle\">\r\n <button class=\"ql-indent\" value=\"-1\" *ngIf=\"config.buttons.decreaseIndent\" [matTooltip]=\"tooltip(config.tooltips.decreaseIndent)\"></button>\r\n <button class=\"ql-indent\" value=\"+1\" *ngIf=\"config.buttons.increaseIndent\" [matTooltip]=\"tooltip(config.tooltips.increaseIndent)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rtl\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config.tooltips.rtl)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.fontSize\" [matTooltip]=\"tooltip(config.tooltips.fontSize)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.headingStyle\" [matTooltip]=\"tooltip(config.tooltips.headingStyle)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.color\" [matTooltip]=\"tooltip(config.tooltips.color)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.font\" [matTooltip]=\"tooltip(config.tooltips.font)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.align\" [matTooltip]=\"tooltip(config.tooltips.align)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.clean\" [matTooltip]=\"tooltip(config.tooltips.clean)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n <span class=\"ql-formats\" *ngIf=\"config.showMedia\">\r\n <button class=\"ql-link\" *ngIf=\"config.buttons.link\" [matTooltip]=\"tooltip(config.tooltips.link)\"></button>\r\n <button class=\"ql-image\" *ngIf=\"config.buttons.image\" [matTooltip]=\"tooltip(config.tooltips.image)\"></button>\r\n <button class=\"ql-video\" *ngIf=\"config.buttons.video\" [matTooltip]=\"tooltip(config.tooltips.video)\"></button>\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.rawEditor\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config.tooltips.rawEditor)\">\r\n\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.editorSize\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen ?\r\n (fullscreenMode === 'expand' ? config.tooltips.minimize : config.tooltips.popin) :\r\n (fullscreenMode === 'expand' ? config.tooltips.maximize : config.tooltips.popout))\">\r\n\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen ?\r\n (fullscreenMode === 'expand' ? config.icons.minimize : config.icons.popin) :\r\n (fullscreenMode === 'expand' ? config.icons.maximize : config.icons.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n <span class=\"ql-formats\" *ngIf=\"config.buttons.formula\" [matTooltip]=\"tooltip(config.tooltips.formula)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\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"] }]
383
407
  }], ctorParameters: function () {
384
408
  return [{ type: undefined, decorators: [{
385
409
  type: Optional
@@ -455,26 +479,33 @@ class QuillModule {
455
479
  }
456
480
  }
457
481
  QuillModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: QuillModule, deps: [{ token: QuillModule, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.NgModule });
458
- QuillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: QuillModule, declarations: [EditorComponent], imports: [CommonModule,
482
+ QuillModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: QuillModule, declarations: [EditorComponent,
483
+ RawComponent], imports: [CommonModule,
459
484
  FormsModule,
460
485
  ReactiveFormsModule,
461
486
  MatButtonModule,
462
487
  MatDialogModule,
488
+ MatFormFieldModule,
463
489
  MatIconModule,
464
- MatTooltipModule, i6.QuillModule], exports: [EditorComponent] });
490
+ MatInputModule,
491
+ MatTooltipModule, i6$1.QuillModule], exports: [EditorComponent,
492
+ RawComponent] });
465
493
  QuillModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: QuillModule, imports: [CommonModule,
466
494
  FormsModule,
467
495
  ReactiveFormsModule,
468
496
  MatButtonModule,
469
497
  MatDialogModule,
498
+ MatFormFieldModule,
470
499
  MatIconModule,
500
+ MatInputModule,
471
501
  MatTooltipModule,
472
502
  QuillModule$1.forRoot()] });
473
503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: QuillModule, decorators: [{
474
504
  type: NgModule,
475
505
  args: [{
476
506
  declarations: [
477
- EditorComponent
507
+ EditorComponent,
508
+ RawComponent
478
509
  ],
479
510
  imports: [
480
511
  CommonModule,
@@ -482,12 +513,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
482
513
  ReactiveFormsModule,
483
514
  MatButtonModule,
484
515
  MatDialogModule,
516
+ MatFormFieldModule,
485
517
  MatIconModule,
518
+ MatInputModule,
486
519
  MatTooltipModule,
487
520
  QuillModule$1.forRoot()
488
521
  ],
489
522
  exports: [
490
- EditorComponent
523
+ EditorComponent,
524
+ RawComponent
491
525
  ]
492
526
  }]
493
527
  }], ctorParameters: function () {
@@ -502,5 +536,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
502
536
  * Generated bundle index. Do not edit.
503
537
  */
504
538
 
505
- export { Buttons, Config, EditorComponent, Icons, QuillModule, Tooltips };
539
+ export { Buttons, Config, EditorComponent, Icons, QuillModule, RawComponent, Tooltips };
506
540
  //# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map