@cleavelandprice/ngx-lib 4.0.9 → 4.1.1

package/fesm2022/cleavelandprice-ngx-lib-quill.mjs

@@ -1,168 +1,158 @@
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, Component, viewChild, model, output, forwardRef, NgModule, Optional, SkipSelf } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef, MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { QuillEditorComponent, QuillModule as QuillModule$1 } from 'ngx-quill';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { QuillEditorComponent, QuillModule as QuillModule$1 } from 'ngx-quill';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInput, MatInputModule } from '@angular/material/input';
 
-class Buttons {
-    constructor() {
-        //#region Font Style
-        this.bold = true;
-        this.italic = true;
-        this.strike = true;
-        this.underline = true;
-        //#endregion
-        //#region Media
-        this.link = true;
-        this.image = true;
-        this.video = true;
-        //#endregion
-        //#region Block Style
-        this.blockquote = true;
-        this.codeblock = true;
-        //#endregion
-        //#region Heading Style
-        this.h1 = true;
-        this.h2 = true;
-        //#endregion
-        //#region Color
-        this.color = true;
-        //#endregion
-        //#region List Style
-        this.bulleted = true;
-        this.ordered = true;
-        //#endregion
-        //#region Script Style
-        this.subScript = true;
-        this.superScript = true;
-        //#endregion
-        //#region Indent Style
-        this.increaseIndent = true;
-        this.decreaseIndent = true;
-        //#endregion
-        //#region DropDowns
-        this.align = true;
-        this.font = true;
-        this.fontSize = true;
-        this.headingStyle = true;
-        //#endregion
-        //#region Single Buttons
-        this.clean = true;
-        this.formula = true;
-        this.rtl = true;
-        this.editorSize = true;
-        this.rawEditor = false;
-        //#endregion
-    }
-}
+;
 
-class Icons {
-    constructor() {
-        this.maximize = 'open_in_full';
-        this.minimize = 'close_fullscreen';
-        this.popout = 'open_in_full';
-        this.popin = 'done';
-    }
-}
+const DefaultButtons = {
+    //#region Font Style
+    bold: true,
+    italic: true,
+    strike: true,
+    underline: true,
+    //#endregion
+    //#region Media
+    link: true,
+    image: true,
+    video: true,
+    //#endregion
+    //#region Block Style
+    blockquote: true,
+    codeblock: true,
+    //#endregion
+    //#region Heading Style
+    h1: true,
+    h2: true,
+    //#endregion
+    //#region Color
+    color: true,
+    //#endregion
+    //#region List Style
+    bulleted: true,
+    ordered: true,
+    //#endregion
+    //#region Script Style
+    subScript: true,
+    superScript: true,
+    //#endregion
+    //#region Indent Style
+    increaseIndent: true,
+    decreaseIndent: true,
+    //#endregion
+    //#region DropDowns
+    align: true,
+    font: true,
+    fontSize: true,
+    headingStyle: true,
+    //#endregion
+    //#region Single Buttons
+    clean: true,
+    formula: true,
+    rtl: true,
+    editorSize: true,
+    rawEditor: false,
+    //#endregion
+};
 
-class Tooltips {
-    constructor() {
-        //#region Font Style
-        this.bold = 'Bold';
-        this.italic = 'Italic';
-        this.strike = 'Strikethrough';
-        this.underline = 'Underline';
-        //#endregion
-        //#region Media
-        this.link = 'Link';
-        this.image = 'Insert Image';
-        this.video = 'Insert Video';
-        //#endregion
-        //#region Block Style
-        this.blockquote = 'Blockquote';
-        this.codeblock = 'Code Block';
-        //#endregion
-        //#region Heading Style
-        this.h1 = 'Heading 1';
-        this.h2 = 'Heading 2';
-        //#endregion
-        //#region Color
-        this.color = 'Font / Background Color';
-        //#endregion
-        //#region List Style
-        this.bulleted = 'Bulleted List';
-        this.ordered = 'Ordered List';
-        //#endregion
-        //#region Script Style
-        this.subScript = 'Subscript';
-        this.superScript = 'Superscript';
-        //#endregion
-        //#region Indent Style
-        this.increaseIndent = 'Increase Indent';
-        this.decreaseIndent = 'Decrease Indent';
-        //#endregion
-        //#region DropDowns
-        this.align = 'Align';
-        this.font = 'Font';
-        this.fontSize = 'Font Size';
-        this.headingStyle = 'Heading';
-        //#endregion
-        //#region Single Buttons
-        this.clean = 'Clean';
-        this.formula = 'Formula';
-        this.rtl = 'Right-To-Left';
-        this.maximize = 'Maximize';
-        this.minimize = 'Minimize';
-        this.popout = 'Popout';
-        this.popin = 'Done';
-        this.rawEditor = 'Edit raw HTML (dangerous!)';
-        //#endregion
-    }
-}
+const DefaultIcons = {
+    maximize: 'open_in_full',
+    minimize: 'close_fullscreen',
+    popout: 'open_in_full',
+    popin: 'done'
+};
 
-class Config {
-    constructor() {
-        this.buttons = new Buttons();
-        this.tooltips = new Tooltips();
-        this.icons = new Icons();
-        //#region These can be overriden via @Input()
-        this.format = 'html';
-        this.height = '50vh';
-        this.width = '100%';
-        this.fullscreenHeight = '85vh';
-        this.fullscreenWidth = '100%';
-        this.enableTooltips = true;
-        this.fullscreen = false;
-        this.fullscreenMode = 'popout';
-        this.readonly = false;
-        this.applyReadonlyStyle = true;
-        this.showToolbar = true;
-        this.showBorder = true;
-        //#region Optional Quill modules
-        this.imageResizeModule = true;
-        this.imageDropModule = true;
-        //mentionModule = true;
-        this.syntaxModule = true;
-        //#endregion
-        //#endregion
-        //#region Groups
-        this.showBlockStyle = () => this.buttons.blockquote || this.buttons.codeblock;
-        this.showFontStyle = () => this.buttons.bold || this.buttons.italic || this.buttons.strike || this.buttons.underline;
-        this.showQuickHeadingStyle = () => this.buttons.h1 || this.buttons.h2;
-        this.showIndentStyle = () => this.buttons.decreaseIndent || this.buttons.increaseIndent;
-        this.showListStyle = () => this.buttons.bulleted || this.buttons.ordered;
-        this.showMedia = () => this.buttons.link || this.buttons.image || this.buttons.video;
-        this.showScriptStyle = () => this.buttons.subScript || this.buttons.superScript;
-        //#endregion
-    }
-}
+const DefaultTooltips = {
+    //#region Font Style
+    bold: 'Bold',
+    italic: 'Italic',
+    strike: 'Strikethrough',
+    underline: 'Underline',
+    //#endregion
+    //#region Media
+    link: 'Link',
+    image: 'Insert Image',
+    video: 'Insert Video',
+    //#endregion
+    //#region Block Style
+    blockquote: 'Blockquote',
+    codeblock: 'Code Block',
+    //#endregion
+    //#region Heading Style
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    //#endregion
+    //#region Color
+    color: 'Font / Background Color',
+    //#endregion
+    //#region List Style
+    bulleted: 'Bulleted List',
+    ordered: 'Ordered List',
+    //#endregion
+    //#region Script Style
+    subScript: 'Subscript',
+    superScript: 'Superscript',
+    //#endregion
+    //#region Indent Style
+    increaseIndent: 'Increase Indent',
+    decreaseIndent: 'Decrease Indent',
+    //#endregion
+    //#region DropDowns
+    align: 'Align',
+    font: 'Font',
+    fontSize: 'Font Size',
+    headingStyle: 'Heading',
+    //#endregion
+    //#region Single Buttons
+    clean: 'Clean',
+    formula: 'Formula',
+    rtl: 'Right-To-Left',
+    maximize: 'Maximize',
+    minimize: 'Minimize',
+    popout: 'Popout',
+    popin: 'Done',
+    rawEditor: 'Edit raw HTML (dangerous!)'
+    //#endregion
+};
+
+const DefaultConfig = {
+    buttons: DefaultButtons,
+    icons: DefaultIcons,
+    tooltips: DefaultTooltips,
+    //#region These can be overriden via input()
+    format: 'html',
+    height: '50vh',
+    width: '100%',
+    fullscreenHeight: '85vh',
+    fullscreenWidth: '100%',
+    enableTooltips: true,
+    fullscreen: false,
+    fullscreenMode: 'popout',
+    readonly: false,
+    applyReadonlyStyle: true,
+    showToolbar: true,
+    showBorder: true,
+    //#region Optional Quill modules
+    imageResizeModule: true,
+    imageDropModule: true,
+    syntaxModule: true
+    //#endregion
+    //#endregion
+};
+
+;
+
+;
+
+;
 
 class RawComponent {
     constructor() {
@@ -194,7 +184,7 @@ class EditorComponent {
         this.onChange = (_) => { }; // Invoked when the model has been changed
         this.onTouched = () => { }; // Invoked when the model has been touched
         //#endregion
-        this.config = model();
+        this.config = model(DefaultConfig);
         this.placeholder = model();
         //#region These can be passed in as @Input(), or use values from config
         this.format = model();
@@ -224,6 +214,20 @@ class EditorComponent {
         this.onFocus = output();
         this.onSelectionChanged = output();
     }
+    get showBlockStyle() { return (this.config()?.buttons?.blockquote || this.config()?.buttons?.codeblock) ?? false; }
+    ;
+    get showFontStyle() { return (this.config()?.buttons?.bold || this.config()?.buttons?.italic || this.config()?.buttons?.strike || this.config()?.buttons?.underline) ?? false; }
+    ;
+    get showQuickHeadingStyle() { return (this.config()?.buttons?.h1 || this.config()?.buttons?.h2) ?? false; }
+    ;
+    get showIndentStyle() { return (this.config()?.buttons?.decreaseIndent || this.config()?.buttons?.increaseIndent) ?? false; }
+    ;
+    get showListStyle() { return (this.config()?.buttons?.bulleted || this.config()?.buttons?.ordered) ?? false; }
+    ;
+    get showMedia() { return (this.config()?.buttons?.link || this.config()?.buttons?.image || this.config()?.buttons?.video) ?? false; }
+    ;
+    get showScriptStyle() { return (this.config()?.buttons?.subScript || this.config()?.buttons?.superScript) ?? false; }
+    ;
     #data;
     #dialogRef;
     #dialog;
@@ -237,24 +241,29 @@ class EditorComponent {
         }*/
     }
     initialize() {
-        this.config()?.showFontStyle();
-        this.config.set(this.config() ?? this.#data?.config ?? new Config());
+        this.config.set({
+            ...DefaultConfig,
+            ...this.config(),
+            ...this.#data?.config,
+            buttons: this.config()?.buttons ?? DefaultButtons,
+            icons: {
+                ...DefaultIcons,
+                ...this.config()?.icons
+            },
+            tooltips: {
+                ...DefaultTooltips,
+                ...this.config()?.tooltips
+            }
+        });
         this.value = this.value ?? this.#data?.value;
         // Moved to client responsibility
         /*if (this.imageDropModule) {
           Quill.register('modules/imageDrop', ImageDrop);
         }*/
-        //this.placeholder = this.placeholder ?? this.#data?.placeholder;
         this.placeholder.set(this.placeholder() ?? this.#data?.placeholder);
         this.imageDropModule.set(this.imageDropModule() ?? this.#data?.imageDropModule ?? this.config().imageDropModule);
         this.imageResizeModule.set(this.imageResizeModule() ?? this.#data?.imageResizeModule ?? this.config().imageResizeModule);
         this.syntaxModule.set(this.syntaxModule() ?? this.#data?.syntaxModule ?? this.config().syntaxModule);
-        //this.format = this.format ?? this.#data?.format ?? this.config.format;
-        //this.height = this.height ?? this.#data?.height ?? this.config.height;
-        //this.width = this.width ?? this.#data?.width ?? this.config.width;
-        //this.fullscreenHeight = this.fullscreenHeight ?? this.#data?.maxHeight ?? this.config.fullscreenHeight;
-        //this.fullscreenWidth = this.fullscreenWidth ?? this.#data?.maxWidth ?? this.config.fullscreenWidth;
-        //this.fullscreenMode = this.fullscreenMode ?? this.#data?.fullscreenMode ?? this.config.fullscreenMode;
         this.format.set(this.format() ?? this.#data?.format ?? this.config().format);
         this.height.set(this.height() ?? this.#data?.height ?? this.config().height);
         this.width.set(this.width() ?? this.#data?.width ?? this.config().width);
@@ -417,7 +426,7 @@ class EditorComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EditorComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n  <form>\n    <quill-editor name=\"editor\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"updateChanges()\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [format]=\"format()\"\n      [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n      [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n      [readOnly]=\"readonly() ?? false\"\n      [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n      [class.no-toolbar]=\"!showToolbar()\"\n      [class.no-border]=\"!showBorder()\"\n      [modules]=\"modules\"\n\n      (onBlur)=\"onBlur.emit($event)\"\n      (onContentChanged)=\"onContentChanged.emit($event)\"\n      (onEditorChanged)=\"onEditorChanged.emit($event)\"\n      (onEditorCreated)=\"onEditorCreated.emit()\"\n      (onFocus)=\"onFocus.emit($event)\"\n      (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n      @if (showToolbar()) {\n        <div quill-editor-toolbar>\n          <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n          <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n        </div>\n      }\n    </quill-editor>\n  </form>\n</ng-container>\n\n<ng-template #toolbar>\n  <div>\n    <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"rtl\"/>\n    <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n    <ng-container [ngTemplateOutlet]=\"heading\"/>\n    <ng-container [ngTemplateOutlet]=\"color\"/>\n    <ng-container [ngTemplateOutlet]=\"font\"/>\n    <ng-container [ngTemplateOutlet]=\"align\"/>\n    <ng-container [ngTemplateOutlet]=\"clean\"/>\n    <ng-container [ngTemplateOutlet]=\"formula\"/>\n    <ng-container [ngTemplateOutlet]=\"media\"/>\n  </div>\n</ng-template>\n\n<ng-template #fontStyle>\n  @if (config()!.showFontStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.bold) {\n        <button class=\"ql-bold\"           [matTooltip]=\"tooltip(config()!.tooltips.bold)\"></button>\n      }\n      @if (config()!.buttons.italic) {\n        <button class=\"ql-italic\"       [matTooltip]=\"tooltip(config()!.tooltips.italic)\"></button>\n      }\n      @if (config()!.buttons.underline) {\n        <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips.underline)\"></button>\n      }\n      @if (config()!.buttons.strike) {\n        <button class=\"ql-strike\"       [matTooltip]=\"tooltip(config()!.tooltips.strike)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #blockStyle>\n  @if (config()!.showBlockStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.blockquote) {\n        <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips.blockquote)\"></button>\n      }\n      @if (config()!.buttons.codeblock) {\n        <button class=\"ql-code-block\"  [matTooltip]=\"tooltip(config()!.tooltips.codeblock)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #headingStyle>\n  @if (config()!.showQuickHeadingStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.h1) {\n        <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips.h1)\"></button>\n      }\n      @if (config()!.buttons.h2) {\n        <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips.h2)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #listStyle>\n  @if (config()!.showListStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.ordered) {\n        <button class=\"ql-list\" value=\"ordered\"  [matTooltip]=\"tooltip(config()!.tooltips.ordered)\"></button>\n      }\n      @if (config()!.buttons.bulleted) {\n        <button class=\"ql-list\" value=\"bullet\"  [matTooltip]=\"tooltip(config()!.tooltips.bulleted)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #scriptStyle>\n  @if (config()!.showScriptStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.subScript) {\n        <button class=\"ql-script\" value=\"sub\"   [matTooltip]=\"tooltip(config()!.tooltips.subScript)\"></button>\n      }\n      @if (config()!.buttons.superScript) {\n        <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips.superScript)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #indentStyle>\n  @if (config()!.showIndentStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.decreaseIndent) {\n        <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips.decreaseIndent)\"></button>\n      }\n      @if (config()!.buttons.increaseIndent) {\n        <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips.increaseIndent)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #rtl>\n  @if (config()!.buttons.rtl) {\n    <span class=\"ql-formats\">\n      <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips.rtl)\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #fontSize>\n  @if (config()!.buttons.fontSize) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.fontSize)\">\n      <select class=\"ql-size\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #heading>\n  @if (config()!.buttons.headingStyle) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.headingStyle)\">\n      <select class=\"ql-header\">\n        <option value=\"1\"></option>\n        <option value=\"2\"></option>\n        <option value=\"3\"></option>\n        <option value=\"4\"></option>\n        <option value=\"5\"></option>\n        <option value=\"6\"></option>\n        <option selected=\"selected\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #color>\n  @if (config()!.buttons.color) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.color)\">\n      <select class=\"ql-color\"></select>\n      <select class=\"ql-background\"></select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #font>\n  @if (config()!.buttons.font) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.font)\">\n      <select class=\"ql-font\">\n        <option selected></option>\n        <option value=\"serif\"></option>\n        <option value=\"monospace\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #align>\n  @if (config()!.buttons.align) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.align)\">\n      <select class=\"ql-align\">\n        <option selected></option>\n        <option value=\"center\"></option>\n        <option value=\"right\"></option>\n        <option value=\"justify\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #clean>\n  @if (config()!.buttons.clean) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.clean)\">\n      <button class=\"ql-clean\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #media>\n  @if (config()!.showMedia()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.link) {\n        <button class=\"ql-link\"  [matTooltip]=\"tooltip(config()!.tooltips.link)\"></button>\n      }\n      @if (config()!.buttons.image) {\n        <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips.image)\"></button>\n      }\n      @if (config()!.buttons.video) {\n        <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips.video)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #editorSize>\n  <div>\n    @if (config()!.buttons.rawEditor) {\n      <span class=\"ql-formats\">\n        <button id=\"rawdog\"\n          [matTooltip]=\"tooltip(config()!.tooltips.rawEditor)\">\n          <mat-icon (click)=\"rawEdit()\">\n            code\n          </mat-icon>\n        </button>\n      </span>\n    }\n\n    @if (config()!.buttons.editorSize) {\n      <span class=\"ql-formats\">\n        <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen() ?\n                    (fullscreenMode() === 'expand' ? config()!.tooltips.minimize : config()!.tooltips.popin) :\n                    (fullscreenMode() === 'expand' ? config()!.tooltips.maximize : config()!.tooltips.popout))\">\n          <mat-icon (click)=\"toggleFullscreen()\">\n            {{ fullscreen() ?\n            (fullscreenMode() === 'expand' ? config()!.icons.minimize : config()!.icons.popin) :\n            (fullscreenMode() === 'expand' ? config()!.icons.maximize : config()!.icons.popout)\n            }}\n          </mat-icon>\n        </button>\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #formula>\n  @if (config()!.buttons.formula) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.formula)\">\n      <button class=\"ql-formula\"></button>\n    </span>\n  }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
+            }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n  <form>\n    <quill-editor name=\"editor\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"updateChanges()\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [format]=\"format()\"\n      [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n      [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n      [readOnly]=\"readonly() ?? false\"\n      [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n      [class.no-toolbar]=\"!showToolbar()\"\n      [class.no-border]=\"!showBorder()\"\n      [modules]=\"modules\"\n\n      (onBlur)=\"onBlur.emit($event)\"\n      (onContentChanged)=\"onContentChanged.emit($event)\"\n      (onEditorChanged)=\"onEditorChanged.emit($event)\"\n      (onEditorCreated)=\"onEditorCreated.emit()\"\n      (onFocus)=\"onFocus.emit($event)\"\n      (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n      @if (showToolbar()) {\n        <div quill-editor-toolbar>\n          <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n          <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n        </div>\n      }\n    </quill-editor>\n  </form>\n</ng-container>\n\n<ng-template #toolbar>\n  <div>\n    <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"rtl\"/>\n    <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n    <ng-container [ngTemplateOutlet]=\"heading\"/>\n    <ng-container [ngTemplateOutlet]=\"color\"/>\n    <ng-container [ngTemplateOutlet]=\"font\"/>\n    <ng-container [ngTemplateOutlet]=\"align\"/>\n    <ng-container [ngTemplateOutlet]=\"clean\"/>\n    <ng-container [ngTemplateOutlet]=\"formula\"/>\n    <ng-container [ngTemplateOutlet]=\"media\"/>\n  </div>\n</ng-template>\n\n<ng-template #fontStyle>\n  @if (showFontStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.bold) {\n        <button class=\"ql-bold\"           [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n      }\n      @if (config()!.buttons!.italic) {\n        <button class=\"ql-italic\"       [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n      }\n      @if (config()!.buttons!.underline) {\n        <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n      }\n      @if (config()!.buttons!.strike) {\n        <button class=\"ql-strike\"       [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #blockStyle>\n  @if (showBlockStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.blockquote) {\n        <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n      }\n      @if (config()!.buttons!.codeblock) {\n        <button class=\"ql-code-block\"  [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #headingStyle>\n  @if (showQuickHeadingStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.h1) {\n        <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n      }\n      @if (config()!.buttons!.h2) {\n        <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #listStyle>\n  @if (showListStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.ordered) {\n        <button class=\"ql-list\" value=\"ordered\"  [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n      }\n      @if (config()!.buttons!.bulleted) {\n        <button class=\"ql-list\" value=\"bullet\"  [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #scriptStyle>\n  @if (showScriptStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.subScript) {\n        <button class=\"ql-script\" value=\"sub\"   [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n      }\n      @if (config()!.buttons!.superScript) {\n        <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #indentStyle>\n  @if (showIndentStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.decreaseIndent) {\n        <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n      }\n      @if (config()!.buttons!.increaseIndent) {\n        <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #rtl>\n  @if (config()!.buttons!.rtl) {\n    <span class=\"ql-formats\">\n      <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #fontSize>\n  @if (config()!.buttons!.fontSize) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n      <select class=\"ql-size\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #heading>\n  @if (config()!.buttons!.headingStyle) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n      <select class=\"ql-header\">\n        <option value=\"1\"></option>\n        <option value=\"2\"></option>\n        <option value=\"3\"></option>\n        <option value=\"4\"></option>\n        <option value=\"5\"></option>\n        <option value=\"6\"></option>\n        <option selected=\"selected\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #color>\n  @if (config()!.buttons!.color) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n      <select class=\"ql-color\"></select>\n      <select class=\"ql-background\"></select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #font>\n  @if (config()!.buttons!.font) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n      <select class=\"ql-font\">\n        <option selected></option>\n        <option value=\"serif\"></option>\n        <option value=\"monospace\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #align>\n  @if (config()!.buttons!.align) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n      <select class=\"ql-align\">\n        <option selected></option>\n        <option value=\"center\"></option>\n        <option value=\"right\"></option>\n        <option value=\"justify\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #clean>\n  @if (config()!.buttons!.clean) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n      <button class=\"ql-clean\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #media>\n  @if (showMedia) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.link) {\n        <button class=\"ql-link\"  [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n      }\n      @if (config()!.buttons!.image) {\n        <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n      }\n      @if (config()!.buttons!.video) {\n        <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #editorSize>\n  <div>\n    @if (config()!.buttons!.rawEditor) {\n      <span class=\"ql-formats\">\n        <button id=\"rawdog\"\n          [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n          <mat-icon (click)=\"rawEdit()\">\n            code\n          </mat-icon>\n        </button>\n      </span>\n    }\n\n    @if (config()!.buttons!.editorSize) {\n      <span class=\"ql-formats\">\n        <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen() ?\n                    (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n                    (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n          <mat-icon (click)=\"toggleFullscreen()\">\n            {{ fullscreen() ?\n            (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n            (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n            }}\n          </mat-icon>\n        </button>\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #formula>\n  @if (config()!.buttons!.formula) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n      <button class=\"ql-formula\"></button>\n    </span>\n  }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
@@ -431,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => EditorComponent),
                             multi: true
-                        }], template: "<ng-container>\n  <form>\n    <quill-editor name=\"editor\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"updateChanges()\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [format]=\"format()\"\n      [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n      [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n      [readOnly]=\"readonly() ?? false\"\n      [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n      [class.no-toolbar]=\"!showToolbar()\"\n      [class.no-border]=\"!showBorder()\"\n      [modules]=\"modules\"\n\n      (onBlur)=\"onBlur.emit($event)\"\n      (onContentChanged)=\"onContentChanged.emit($event)\"\n      (onEditorChanged)=\"onEditorChanged.emit($event)\"\n      (onEditorCreated)=\"onEditorCreated.emit()\"\n      (onFocus)=\"onFocus.emit($event)\"\n      (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n      @if (showToolbar()) {\n        <div quill-editor-toolbar>\n          <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n          <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n        </div>\n      }\n    </quill-editor>\n  </form>\n</ng-container>\n\n<ng-template #toolbar>\n  <div>\n    <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"rtl\"/>\n    <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n    <ng-container [ngTemplateOutlet]=\"heading\"/>\n    <ng-container [ngTemplateOutlet]=\"color\"/>\n    <ng-container [ngTemplateOutlet]=\"font\"/>\n    <ng-container [ngTemplateOutlet]=\"align\"/>\n    <ng-container [ngTemplateOutlet]=\"clean\"/>\n    <ng-container [ngTemplateOutlet]=\"formula\"/>\n    <ng-container [ngTemplateOutlet]=\"media\"/>\n  </div>\n</ng-template>\n\n<ng-template #fontStyle>\n  @if (config()!.showFontStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.bold) {\n        <button class=\"ql-bold\"           [matTooltip]=\"tooltip(config()!.tooltips.bold)\"></button>\n      }\n      @if (config()!.buttons.italic) {\n        <button class=\"ql-italic\"       [matTooltip]=\"tooltip(config()!.tooltips.italic)\"></button>\n      }\n      @if (config()!.buttons.underline) {\n        <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips.underline)\"></button>\n      }\n      @if (config()!.buttons.strike) {\n        <button class=\"ql-strike\"       [matTooltip]=\"tooltip(config()!.tooltips.strike)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #blockStyle>\n  @if (config()!.showBlockStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.blockquote) {\n        <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips.blockquote)\"></button>\n      }\n      @if (config()!.buttons.codeblock) {\n        <button class=\"ql-code-block\"  [matTooltip]=\"tooltip(config()!.tooltips.codeblock)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #headingStyle>\n  @if (config()!.showQuickHeadingStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.h1) {\n        <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips.h1)\"></button>\n      }\n      @if (config()!.buttons.h2) {\n        <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips.h2)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #listStyle>\n  @if (config()!.showListStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.ordered) {\n        <button class=\"ql-list\" value=\"ordered\"  [matTooltip]=\"tooltip(config()!.tooltips.ordered)\"></button>\n      }\n      @if (config()!.buttons.bulleted) {\n        <button class=\"ql-list\" value=\"bullet\"  [matTooltip]=\"tooltip(config()!.tooltips.bulleted)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #scriptStyle>\n  @if (config()!.showScriptStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.subScript) {\n        <button class=\"ql-script\" value=\"sub\"   [matTooltip]=\"tooltip(config()!.tooltips.subScript)\"></button>\n      }\n      @if (config()!.buttons.superScript) {\n        <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips.superScript)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #indentStyle>\n  @if (config()!.showIndentStyle()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.decreaseIndent) {\n        <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips.decreaseIndent)\"></button>\n      }\n      @if (config()!.buttons.increaseIndent) {\n        <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips.increaseIndent)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #rtl>\n  @if (config()!.buttons.rtl) {\n    <span class=\"ql-formats\">\n      <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips.rtl)\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #fontSize>\n  @if (config()!.buttons.fontSize) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.fontSize)\">\n      <select class=\"ql-size\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #heading>\n  @if (config()!.buttons.headingStyle) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.headingStyle)\">\n      <select class=\"ql-header\">\n        <option value=\"1\"></option>\n        <option value=\"2\"></option>\n        <option value=\"3\"></option>\n        <option value=\"4\"></option>\n        <option value=\"5\"></option>\n        <option value=\"6\"></option>\n        <option selected=\"selected\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #color>\n  @if (config()!.buttons.color) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.color)\">\n      <select class=\"ql-color\"></select>\n      <select class=\"ql-background\"></select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #font>\n  @if (config()!.buttons.font) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.font)\">\n      <select class=\"ql-font\">\n        <option selected></option>\n        <option value=\"serif\"></option>\n        <option value=\"monospace\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #align>\n  @if (config()!.buttons.align) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.align)\">\n      <select class=\"ql-align\">\n        <option selected></option>\n        <option value=\"center\"></option>\n        <option value=\"right\"></option>\n        <option value=\"justify\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #clean>\n  @if (config()!.buttons.clean) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.clean)\">\n      <button class=\"ql-clean\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #media>\n  @if (config()!.showMedia()) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons.link) {\n        <button class=\"ql-link\"  [matTooltip]=\"tooltip(config()!.tooltips.link)\"></button>\n      }\n      @if (config()!.buttons.image) {\n        <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips.image)\"></button>\n      }\n      @if (config()!.buttons.video) {\n        <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips.video)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #editorSize>\n  <div>\n    @if (config()!.buttons.rawEditor) {\n      <span class=\"ql-formats\">\n        <button id=\"rawdog\"\n          [matTooltip]=\"tooltip(config()!.tooltips.rawEditor)\">\n          <mat-icon (click)=\"rawEdit()\">\n            code\n          </mat-icon>\n        </button>\n      </span>\n    }\n\n    @if (config()!.buttons.editorSize) {\n      <span class=\"ql-formats\">\n        <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen() ?\n                    (fullscreenMode() === 'expand' ? config()!.tooltips.minimize : config()!.tooltips.popin) :\n                    (fullscreenMode() === 'expand' ? config()!.tooltips.maximize : config()!.tooltips.popout))\">\n          <mat-icon (click)=\"toggleFullscreen()\">\n            {{ fullscreen() ?\n            (fullscreenMode() === 'expand' ? config()!.icons.minimize : config()!.icons.popin) :\n            (fullscreenMode() === 'expand' ? config()!.icons.maximize : config()!.icons.popout)\n            }}\n          </mat-icon>\n        </button>\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #formula>\n  @if (config()!.buttons.formula) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips.formula)\">\n      <button class=\"ql-formula\"></button>\n    </span>\n  }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
+                        }], template: "<ng-container>\n  <form>\n    <quill-editor name=\"editor\"\n      [(ngModel)]=\"value\"\n      (ngModelChange)=\"updateChanges()\"\n      [placeholder]=\"placeholder() ?? ''\"\n      [format]=\"format()\"\n      [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n      [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n      [readOnly]=\"readonly() ?? false\"\n      [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n      [class.no-toolbar]=\"!showToolbar()\"\n      [class.no-border]=\"!showBorder()\"\n      [modules]=\"modules\"\n\n      (onBlur)=\"onBlur.emit($event)\"\n      (onContentChanged)=\"onContentChanged.emit($event)\"\n      (onEditorChanged)=\"onEditorChanged.emit($event)\"\n      (onEditorCreated)=\"onEditorCreated.emit()\"\n      (onFocus)=\"onFocus.emit($event)\"\n      (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n      @if (showToolbar()) {\n        <div quill-editor-toolbar>\n          <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n          <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n        </div>\n      }\n    </quill-editor>\n  </form>\n</ng-container>\n\n<ng-template #toolbar>\n  <div>\n    <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n    <ng-container [ngTemplateOutlet]=\"rtl\"/>\n    <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n    <ng-container [ngTemplateOutlet]=\"heading\"/>\n    <ng-container [ngTemplateOutlet]=\"color\"/>\n    <ng-container [ngTemplateOutlet]=\"font\"/>\n    <ng-container [ngTemplateOutlet]=\"align\"/>\n    <ng-container [ngTemplateOutlet]=\"clean\"/>\n    <ng-container [ngTemplateOutlet]=\"formula\"/>\n    <ng-container [ngTemplateOutlet]=\"media\"/>\n  </div>\n</ng-template>\n\n<ng-template #fontStyle>\n  @if (showFontStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.bold) {\n        <button class=\"ql-bold\"           [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n      }\n      @if (config()!.buttons!.italic) {\n        <button class=\"ql-italic\"       [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n      }\n      @if (config()!.buttons!.underline) {\n        <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n      }\n      @if (config()!.buttons!.strike) {\n        <button class=\"ql-strike\"       [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #blockStyle>\n  @if (showBlockStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.blockquote) {\n        <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n      }\n      @if (config()!.buttons!.codeblock) {\n        <button class=\"ql-code-block\"  [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #headingStyle>\n  @if (showQuickHeadingStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.h1) {\n        <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n      }\n      @if (config()!.buttons!.h2) {\n        <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #listStyle>\n  @if (showListStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.ordered) {\n        <button class=\"ql-list\" value=\"ordered\"  [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n      }\n      @if (config()!.buttons!.bulleted) {\n        <button class=\"ql-list\" value=\"bullet\"  [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #scriptStyle>\n  @if (showScriptStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.subScript) {\n        <button class=\"ql-script\" value=\"sub\"   [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n      }\n      @if (config()!.buttons!.superScript) {\n        <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #indentStyle>\n  @if (showIndentStyle) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.decreaseIndent) {\n        <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n      }\n      @if (config()!.buttons!.increaseIndent) {\n        <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #rtl>\n  @if (config()!.buttons!.rtl) {\n    <span class=\"ql-formats\">\n      <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #fontSize>\n  @if (config()!.buttons!.fontSize) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n      <select class=\"ql-size\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #heading>\n  @if (config()!.buttons!.headingStyle) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n      <select class=\"ql-header\">\n        <option value=\"1\"></option>\n        <option value=\"2\"></option>\n        <option value=\"3\"></option>\n        <option value=\"4\"></option>\n        <option value=\"5\"></option>\n        <option value=\"6\"></option>\n        <option selected=\"selected\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #color>\n  @if (config()!.buttons!.color) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n      <select class=\"ql-color\"></select>\n      <select class=\"ql-background\"></select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #font>\n  @if (config()!.buttons!.font) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n      <select class=\"ql-font\">\n        <option selected></option>\n        <option value=\"serif\"></option>\n        <option value=\"monospace\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #align>\n  @if (config()!.buttons!.align) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n      <select class=\"ql-align\">\n        <option selected></option>\n        <option value=\"center\"></option>\n        <option value=\"right\"></option>\n        <option value=\"justify\"></option>\n      </select>\n    </span>\n  }\n</ng-template>\n\n<ng-template #clean>\n  @if (config()!.buttons!.clean) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n      <button class=\"ql-clean\"></button>\n    </span>\n  }\n</ng-template>\n\n<ng-template #media>\n  @if (showMedia) {\n    <span class=\"ql-formats\">\n      @if (config()!.buttons!.link) {\n        <button class=\"ql-link\"  [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n      }\n      @if (config()!.buttons!.image) {\n        <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n      }\n      @if (config()!.buttons!.video) {\n        <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n      }\n    </span>\n  }\n</ng-template>\n\n<ng-template #editorSize>\n  <div>\n    @if (config()!.buttons!.rawEditor) {\n      <span class=\"ql-formats\">\n        <button id=\"rawdog\"\n          [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n          <mat-icon (click)=\"rawEdit()\">\n            code\n          </mat-icon>\n        </button>\n      </span>\n    }\n\n    @if (config()!.buttons!.editorSize) {\n      <span class=\"ql-formats\">\n        <button id=\"fullscreen\"\n                [matTooltip]=\"tooltip(fullscreen() ?\n                    (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n                    (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n          <mat-icon (click)=\"toggleFullscreen()\">\n            {{ fullscreen() ?\n            (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n            (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n            }}\n          </mat-icon>\n        </button>\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #formula>\n  @if (config()!.buttons!.formula) {\n    <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n      <button class=\"ql-formula\"></button>\n    </span>\n  }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
         }] });
 
 class QuillModule {
@@ -500,5 +509,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Buttons, Config, EditorComponent, Icons, QuillModule, RawComponent, Tooltips };
+export { DefaultButtons, DefaultConfig, DefaultIcons, DefaultTooltips, EditorComponent, QuillModule, RawComponent };
 //# sourceMappingURL=cleavelandprice-ngx-lib-quill.mjs.map