@cleavelandprice/ngx-lib 4.0.6 → 4.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/quill/components/editor/editor.component.mjs +3 -3
  2. package/esm2022/quill/mention/components/editor/editor.component.mjs +3 -3
  3. package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +2 -2
  4. package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
  5. package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +2 -2
  6. package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
  7. package/package.json +17 -17
package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs CHANGED
@@ -138,7 +138,7 @@ class EditorComponent extends EditorComponent$1 {
138
138
  provide: NG_VALUE_ACCESSOR,
139
139
  useExisting: forwardRef(() => EditorComponent),
140
140
  multi: true
141
- }], usesInheritance: true, ngImport: i0, template: "@if (_users) {\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\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\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 @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}\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" }] }); }
141
+ }], usesInheritance: true, ngImport: i0, template: "@if (_users) {\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 (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 @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}\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" }] }); }
142
142
  }
143
143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
144
144
  type: Component,
@@ -152,7 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
152
152
  provide: NG_VALUE_ACCESSOR,
153
153
  useExisting: forwardRef(() => EditorComponent),
154
154
  multi: true
155
- }], template: "@if (_users) {\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\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\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 @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}\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"] }]
155
+ }], template: "@if (_users) {\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 (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 @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}\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"] }]
156
156
  }] });
157
157
 
158
158
  class QuillMentionModule {
package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cleavelandprice-ngx-lib-quill-mention.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/buttons.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/config.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/icons.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/tooltips.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/components/editor/editor.component.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/components/editor/editor.component.html","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/quill-mention.module.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/cleavelandprice-ngx-lib-quill-mention.ts"],"sourcesContent":["import { Buttons as ButtonsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Buttons extends ButtonsBase {\r\n}","import { Config as ConfigBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Config extends ConfigBase {\r\n}","import { Icons as IconsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Icons extends IconsBase {\r\n}","import { Tooltips as TooltipsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Tooltips extends TooltipsBase {\r\n}","import { Component, OnInit, forwardRef, inject, input } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n//import { FormGroup } from '@angular/forms';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { ActiveDirectoryService, User } from '@cleavelandprice/ngx-lib/active-directory';\n\nimport 'quill-mention';\n\n//#region Moved to client responsibility\n//import Quill from 'quill';\n\n// This doesn't work when done from the library - it must be done from the client app\n//import ImageResize from 'quill-image-resize-module';\n//Quill.register('modules/imageResize', ImageResize);\n\n// Treating ImageDrop the same way as ImageResize, even though it doesn't have the same problem described above\n//import { ImageDrop } from 'quill-image-drop-module';\n\n//#endregion\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { EditorComponent as EditorComponentBase } from '@cleavelandprice/ngx-lib/quill';\nimport { QuillEditorComponent } from 'ngx-quill';\nimport { DialogData } from '../../model/dialog-data';\n\n@Component({\n selector: 'cpquill-editor-with-mention',\n templateUrl: './editor.component.html',\n styleUrl: './editor.component.scss',\n standalone: true,\n imports: [\n FormsModule,\n MatIcon,\n MatTooltip,\n NgTemplateOutlet,\n QuillEditorComponent,\n ],\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EditorComponent),\n multi: true\n }]\n})\nexport class EditorComponent extends EditorComponentBase implements OnInit, ControlValueAccessor {\n users = input<User[]>();\n _users!: User[];\n\n #dlgRef = inject(MatDialogRef<EditorComponent>, { optional: true });\n #dlg = inject(MatDialog);\n #activeDirectoryService = inject(ActiveDirectoryService);\n \n override ngOnInit(): void {\n this.initialize();\n \n if (!this.users()) {\n this.#activeDirectoryService.getUsers().subscribe(users =>\n this._users = users\n );\n }\n }\n\n override toggleFullscreen(): void {\n if (this.fullscreenMode === 'expand') {\n this.fullscreen = !this.fullscreen;\n this.fullscreenChanged.emit(this.fullscreen);\n }\n else {\n if (this.fullscreen) {\n this.#dlgRef?.close(this.value);\n this.fullscreenChanged.emit(false);\n } else {\n const data: DialogData = {\n\n value: this.value,\n config: this.config,\n placeholder: this.placeholder,\n format: this.format,\n height: this.fullscreenHeight,\n width: '100%',\n maxHeight: this.fullscreenHeight,\n maxWidth: '100%',\n enableTooltips: this.enableTooltips!,\n fullscreen: true,\n fullscreenMode: this.fullscreenMode,\n readonly: this.readonly!,\n applyReadonlyStyle: this.applyReadonlyStyle!,\n showToolbar: this.showToolbar!,\n showBorder: this.showBorder!,\n imageResizeModule: this.imageResizeModule!,\n imageDropModule: this.imageDropModule!,\n syntaxModule: this.syntaxModule!,\n users: this._users\n };\n\n this.#dlg.open(EditorComponent, {\n disableClose: true,\n width: this.fullscreenWidth,\n height: this.fullscreenHeight,\n data\n })\n .afterClosed()\n .subscribe(value => {\n this.value = value;\n this.updateChanges();\n });\n\n this.fullscreenChanged.emit(true);\n }\n }\n }\n\n override get modules() {\n if (!this._users) { return {}; }\n\n const modules = {\n mention: {\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\n\n onSelect: (item: DOMStringMap, insertItem: any) => {\n const editor = this.editor()!.quillEditor\n insertItem(item)\n // necessary because quill-mention triggers changes as 'api' instead of 'user'\n editor.insertText(editor.getLength() - 1, '', 'user')\n },\n\n source: (searchTerm: string, renderList: any) => {\n if (searchTerm.length === 0) {\n renderList(this._users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)\n } else {\n const matches: any[] = []\n\n this._users.forEach((entry) => {\n if (\n entry.displayName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||\n entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1\n ) {\n matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })\n }\n })\n\n renderList(matches, searchTerm)\n }\n }\n }\n };\n\n if (!this.showToolbar) {\n modules['toolbar'] = [];\n }\n\n if (this.imageResizeModule) {\n modules['imageResize'] = {};\n }\n\n if (this.imageDropModule) {\n modules['imageDrop'] = true;\n }\n\n if (this.syntaxModule) {\n modules['syntax'] = true;\n }\n\n return modules;\n }\n}","@if (_users) {\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\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\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 @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}\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>","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { QuillModule as NgxQuillModule } from 'ngx-quill';\r\nimport { EditorComponent } from './components/editor/editor.component';\r\n\r\n@NgModule({\r\n declarations: [],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatDialogModule,\r\n MatIconModule,\r\n MatTooltipModule,\r\n\r\n NgxQuillModule.forRoot(),\r\n\r\n EditorComponent\r\n ],\r\n exports: [\r\n EditorComponent\r\n ]\r\n})\r\nexport class QuillMentionModule {\r\n static forRoot(): ModuleWithProviders<QuillMentionModule> {\r\n return {\r\n ngModule: QuillMentionModule\r\n };\r\n }\r\n\r\n constructor(@Optional() @SkipSelf() parentModule: QuillMentionModule) {\r\n if (parentModule) {\r\n throw new Error(\r\n 'QuillMentionModule is already loaded. Import it in the AppModule only');\r\n }\r\n }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './quill-mention.api';\n"],"names":["ButtonsBase","ConfigBase","IconsBase","TooltipsBase","EditorComponentBase","i1","NgxQuillModule"],"mappings":"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"}
1
+ {"version":3,"file":"cleavelandprice-ngx-lib-quill-mention.mjs","sources":["../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/buttons.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/config.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/icons.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/model/tooltips.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/components/editor/editor.component.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/components/editor/editor.component.html","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/quill-mention.module.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/cleavelandprice-ngx-lib-quill-mention.ts"],"sourcesContent":["import { Buttons as ButtonsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Buttons extends ButtonsBase {\r\n}","import { Config as ConfigBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Config extends ConfigBase {\r\n}","import { Icons as IconsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Icons extends IconsBase {\r\n}","import { Tooltips as TooltipsBase } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport class Tooltips extends TooltipsBase {\r\n}","import { Component, OnInit, forwardRef, inject, input } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n//import { FormGroup } from '@angular/forms';\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\nimport { ActiveDirectoryService, User } from '@cleavelandprice/ngx-lib/active-directory';\n\nimport 'quill-mention';\n\n//#region Moved to client responsibility\n//import Quill from 'quill';\n\n// This doesn't work when done from the library - it must be done from the client app\n//import ImageResize from 'quill-image-resize-module';\n//Quill.register('modules/imageResize', ImageResize);\n\n// Treating ImageDrop the same way as ImageResize, even though it doesn't have the same problem described above\n//import { ImageDrop } from 'quill-image-drop-module';\n\n//#endregion\n\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { EditorComponent as EditorComponentBase } from '@cleavelandprice/ngx-lib/quill';\nimport { QuillEditorComponent } from 'ngx-quill';\nimport { DialogData } from '../../model/dialog-data';\n\n@Component({\n selector: 'cpquill-editor-with-mention',\n templateUrl: './editor.component.html',\n styleUrl: './editor.component.scss',\n standalone: true,\n imports: [\n FormsModule,\n MatIcon,\n MatTooltip,\n NgTemplateOutlet,\n QuillEditorComponent,\n ],\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EditorComponent),\n multi: true\n }]\n})\nexport class EditorComponent extends EditorComponentBase implements OnInit, ControlValueAccessor {\n users = input<User[]>();\n _users!: User[];\n\n #dlgRef = inject(MatDialogRef<EditorComponent>, { optional: true });\n #dlg = inject(MatDialog);\n #activeDirectoryService = inject(ActiveDirectoryService);\n \n override ngOnInit(): void {\n this.initialize();\n \n if (!this.users()) {\n this.#activeDirectoryService.getUsers().subscribe(users =>\n this._users = users\n );\n }\n }\n\n override toggleFullscreen(): void {\n if (this.fullscreenMode === 'expand') {\n this.fullscreen = !this.fullscreen;\n this.fullscreenChanged.emit(this.fullscreen);\n }\n else {\n if (this.fullscreen) {\n this.#dlgRef?.close(this.value);\n this.fullscreenChanged.emit(false);\n } else {\n const data: DialogData = {\n\n value: this.value,\n config: this.config,\n placeholder: this.placeholder,\n format: this.format,\n height: this.fullscreenHeight,\n width: '100%',\n maxHeight: this.fullscreenHeight,\n maxWidth: '100%',\n enableTooltips: this.enableTooltips!,\n fullscreen: true,\n fullscreenMode: this.fullscreenMode,\n readonly: this.readonly!,\n applyReadonlyStyle: this.applyReadonlyStyle!,\n showToolbar: this.showToolbar!,\n showBorder: this.showBorder!,\n imageResizeModule: this.imageResizeModule!,\n imageDropModule: this.imageDropModule!,\n syntaxModule: this.syntaxModule!,\n users: this._users\n };\n\n this.#dlg.open(EditorComponent, {\n disableClose: true,\n width: this.fullscreenWidth,\n height: this.fullscreenHeight,\n data\n })\n .afterClosed()\n .subscribe(value => {\n this.value = value;\n this.updateChanges();\n });\n\n this.fullscreenChanged.emit(true);\n }\n }\n }\n\n override get modules() {\n if (!this._users) { return {}; }\n\n const modules = {\n mention: {\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\n\n onSelect: (item: DOMStringMap, insertItem: any) => {\n const editor = this.editor()!.quillEditor\n insertItem(item)\n // necessary because quill-mention triggers changes as 'api' instead of 'user'\n editor.insertText(editor.getLength() - 1, '', 'user')\n },\n\n source: (searchTerm: string, renderList: any) => {\n if (searchTerm.length === 0) {\n renderList(this._users?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)\n } else {\n const matches: any[] = []\n\n this._users.forEach((entry) => {\n if (\n entry.displayName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||\n entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1\n ) {\n matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })\n }\n })\n\n renderList(matches, searchTerm)\n }\n }\n }\n };\n\n if (!this.showToolbar) {\n modules['toolbar'] = [];\n }\n\n if (this.imageResizeModule) {\n modules['imageResize'] = {};\n }\n\n if (this.imageDropModule) {\n modules['imageDrop'] = true;\n }\n\n if (this.syntaxModule) {\n modules['syntax'] = true;\n }\n\n return modules;\n }\n}","@if (_users) {\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 (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 @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}\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>","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\n\r\nimport { QuillModule as NgxQuillModule } from 'ngx-quill';\r\nimport { EditorComponent } from './components/editor/editor.component';\r\n\r\n@NgModule({\r\n declarations: [],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n\r\n MatButtonModule,\r\n MatDialogModule,\r\n MatIconModule,\r\n MatTooltipModule,\r\n\r\n NgxQuillModule.forRoot(),\r\n\r\n EditorComponent\r\n ],\r\n exports: [\r\n EditorComponent\r\n ]\r\n})\r\nexport class QuillMentionModule {\r\n static forRoot(): ModuleWithProviders<QuillMentionModule> {\r\n return {\r\n ngModule: QuillMentionModule\r\n };\r\n }\r\n\r\n constructor(@Optional() @SkipSelf() parentModule: QuillMentionModule) {\r\n if (parentModule) {\r\n throw new Error(\r\n 'QuillMentionModule is already loaded. Import it in the AppModule only');\r\n }\r\n }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './quill-mention.api';\n"],"names":["ButtonsBase","ConfigBase","IconsBase","TooltipsBase","EditorComponentBase","i1","NgxQuillModule"],"mappings":"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"}
package/fesm2022/cleavelandprice-ngx-lib-quill.mjs CHANGED
@@ -390,7 +390,7 @@ class EditorComponent {
390
390
  provide: NG_VALUE_ACCESSOR,
391
391
  useExisting: forwardRef(() => EditorComponent),
392
392
  multi: true
393
- }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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" }] }); }
393
+ }], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder ?? ''\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly ?? false\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (config!.showFontStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n }\n @if (config!.buttons.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n }\n @if (config!.buttons.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n }\n @if (config!.buttons.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (config!.showBlockStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n }\n @if (config!.buttons.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (config!.showQuickHeadingStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n }\n @if (config!.buttons.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (config!.showListStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n }\n @if (config!.buttons.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (config!.showScriptStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n }\n @if (config!.buttons.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (config!.showIndentStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n }\n @if (config!.buttons.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config!.buttons.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config!.buttons.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config!.buttons.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config!.buttons.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config!.buttons.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config!.buttons.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config!.buttons.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (config!.showMedia()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n }\n @if (config!.buttons.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n }\n @if (config!.buttons.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config!.buttons.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config!.buttons.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen ?\n (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen ?\n (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config!.buttons.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
394
394
  }
395
395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: EditorComponent, decorators: [{
396
396
  type: Component,
@@ -404,7 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
404
404
  provide: NG_VALUE_ACCESSOR,
405
405
  useExisting: forwardRef(() => EditorComponent),
406
406
  multi: true
407
- }], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly\"\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"] }]
407
+ }], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n\n [placeholder]=\"placeholder ?? ''\"\n [format]=\"format\"\n [style.height]=\"fullscreen ? fullscreenHeight : height\"\n [style.width]=\"fullscreen ? fullscreenWidth : width\"\n [readOnly]=\"readonly ?? false\"\n [class.readonly]=\"readonly && applyReadonlyStyle\"\n [class.no-toolbar]=\"!showToolbar\"\n [class.no-border]=\"!showBorder\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (config!.showFontStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config!.tooltips.bold)\"></button>\n }\n @if (config!.buttons.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config!.tooltips.italic)\"></button>\n }\n @if (config!.buttons.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config!.tooltips.underline)\"></button>\n }\n @if (config!.buttons.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config!.tooltips.strike)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (config!.showBlockStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config!.tooltips.blockquote)\"></button>\n }\n @if (config!.buttons.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config!.tooltips.codeblock)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (config!.showQuickHeadingStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config!.tooltips.h1)\"></button>\n }\n @if (config!.buttons.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config!.tooltips.h2)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (config!.showListStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config!.tooltips.ordered)\"></button>\n }\n @if (config!.buttons.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config!.tooltips.bulleted)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (config!.showScriptStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config!.tooltips.subScript)\"></button>\n }\n @if (config!.buttons.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config!.tooltips.superScript)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (config!.showIndentStyle()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config!.tooltips.decreaseIndent)\"></button>\n }\n @if (config!.buttons.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config!.tooltips.increaseIndent)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config!.buttons.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config!.tooltips.rtl)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config!.buttons.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.fontSize)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config!.buttons.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.headingStyle)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config!.buttons.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.color)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config!.buttons.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.font)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config!.buttons.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.align)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config!.buttons.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.clean)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (config!.showMedia()) {\n <span class=\"ql-formats\">\n @if (config!.buttons.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config!.tooltips.link)\"></button>\n }\n @if (config!.buttons.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config!.tooltips.image)\"></button>\n }\n @if (config!.buttons.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config!.tooltips.video)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config!.buttons.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config!.tooltips.rawEditor)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config!.buttons.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen ?\n (fullscreenMode === 'expand' ? config!.tooltips.minimize : config!.tooltips.popin) :\n (fullscreenMode === 'expand' ? config!.tooltips.maximize : config!.tooltips.popout))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen ?\n (fullscreenMode === 'expand' ? config!.icons.minimize : config!.icons.popin) :\n (fullscreenMode === 'expand' ? config!.icons.maximize : config!.icons.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config!.buttons.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config!.tooltips.formula)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
408
408
  }], propDecorators: { config: [{
409
409
  type: Input
410
410
  }], placeholder: [{