@cleavelandprice/ngx-lib 4.7.12 → 4.7.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/fesm2022/cleavelandprice-ngx-lib-active-directory-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs +4 -4
- package/fesm2022/cleavelandprice-ngx-lib-authentication-material.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs +0 -4
- package/fesm2022/cleavelandprice-ngx-lib-authentication-sso.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs +10 -10
- package/fesm2022/cleavelandprice-ngx-lib-dialog.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-msgraph.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs +2 -2
- package/fesm2022/cleavelandprice-ngx-lib-quill-mention.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs +4 -4
- package/fesm2022/cleavelandprice-ngx-lib-quill.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs +4 -2
- package/fesm2022/cleavelandprice-ngx-lib-table.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs +2 -2
- package/fesm2022/cleavelandprice-ngx-lib-upload.mjs.map +1 -1
- package/fesm2022/cleavelandprice-ngx-lib-url-utilities.mjs.map +1 -1
- package/package.json +1 -1
- package/types/cleavelandprice-ngx-lib-table.d.ts +2 -1
|
@@ -127,7 +127,7 @@ class EditorComponent extends EditorComponent$1 {
|
|
|
127
127
|
provide: NG_VALUE_ACCESSOR,
|
|
128
128
|
useExisting: forwardRef(() => EditorComponent),
|
|
129
129
|
multi: true
|
|
130
|
-
}], 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() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n (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 (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold!) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic!) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline!) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike!) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote!) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock!) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1!) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2!) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered!) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted!) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript!) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript!) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent!) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent!) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl!) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link!) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image!) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video!) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor!) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize!) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
130
|
+
}], usesInheritance: true, ngImport: i0, template: "@if (users()) {\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n [placeholder]=\"placeholder() ?? ''\"\r\n [format]=\"format() ?? 'html'\"\r\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\r\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\r\n [readOnly]=\"readonly() ?? false\"\r\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\r\n [class.no-toolbar]=\"!showToolbar()\"\r\n [class.no-border]=\"!showBorder()\"\r\n [modules]=\"modules\"\r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n @if (showToolbar()) {\r\n <div quill-editor-toolbar>\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\r\n </div>\r\n }\r\n </quill-editor>\r\n </form>\r\n}\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\r\n <ng-container [ngTemplateOutlet]=\"heading\"/>\r\n <ng-container [ngTemplateOutlet]=\"color\"/>\r\n <ng-container [ngTemplateOutlet]=\"font\"/>\r\n <ng-container [ngTemplateOutlet]=\"align\"/>\r\n <ng-container [ngTemplateOutlet]=\"clean\"/>\r\n <ng-container [ngTemplateOutlet]=\"formula\"/>\r\n <ng-container [ngTemplateOutlet]=\"media\"/>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n @if (showFontStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.bold!) {\r\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\r\n }\r\n @if (config()!.buttons!.italic!) {\r\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\r\n }\r\n @if (config()!.buttons!.underline!) {\r\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\r\n }\r\n @if (config()!.buttons!.strike!) {\r\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n @if (showBlockStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.blockquote!) {\r\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\r\n }\r\n @if (config()!.buttons!.codeblock!) {\r\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n @if (showQuickHeadingStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.h1!) {\r\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\r\n }\r\n @if (config()!.buttons!.h2!) {\r\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n @if (showListStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.ordered!) {\r\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\r\n }\r\n @if (config()!.buttons!.bulleted!) {\r\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n @if (showScriptStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.subScript!) {\r\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\r\n }\r\n @if (config()!.buttons!.superScript!) {\r\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #indentStyle>\r\n @if (showIndentStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.decreaseIndent!) {\r\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\r\n }\r\n @if (config()!.buttons!.increaseIndent!) {\r\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n @if (config()!.buttons!.rtl!) {\r\n <span class=\"ql-formats\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n @if (config()!.buttons!.fontSize!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n @if (config()!.buttons!.headingStyle!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n @if (config()!.buttons!.color!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n @if (config()!.buttons!.font!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n @if (config()!.buttons!.align!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n @if (config()!.buttons!.clean!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n @if (showMedia) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.link!) {\r\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\r\n }\r\n @if (config()!.buttons!.image!) {\r\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\r\n }\r\n @if (config()!.buttons!.video!) {\r\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n @if (config()!.buttons!.rawEditor!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n\r\n @if (config()!.buttons!.editorSize!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n @if (config()!.buttons!.formula!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n }\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
131
131
|
}
|
|
132
132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditorComponent, decorators: [{
|
|
133
133
|
type: Component,
|
|
@@ -141,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
141
141
|
provide: NG_VALUE_ACCESSOR,
|
|
142
142
|
useExisting: forwardRef(() => EditorComponent),
|
|
143
143
|
multi: true
|
|
144
|
-
}], template: "@if (users()) {\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n (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 (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold!) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic!) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline!) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike!) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote!) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock!) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1!) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2!) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered!) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted!) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript!) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript!) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent!) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent!) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl!) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link!) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image!) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video!) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor!) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize!) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
|
|
144
|
+
}], template: "@if (users()) {\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n [placeholder]=\"placeholder() ?? ''\"\r\n [format]=\"format() ?? 'html'\"\r\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\r\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\r\n [readOnly]=\"readonly() ?? false\"\r\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\r\n [class.no-toolbar]=\"!showToolbar()\"\r\n [class.no-border]=\"!showBorder()\"\r\n [modules]=\"modules\"\r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n @if (showToolbar()) {\r\n <div quill-editor-toolbar>\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\r\n </div>\r\n }\r\n </quill-editor>\r\n </form>\r\n}\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\r\n <ng-container [ngTemplateOutlet]=\"heading\"/>\r\n <ng-container [ngTemplateOutlet]=\"color\"/>\r\n <ng-container [ngTemplateOutlet]=\"font\"/>\r\n <ng-container [ngTemplateOutlet]=\"align\"/>\r\n <ng-container [ngTemplateOutlet]=\"clean\"/>\r\n <ng-container [ngTemplateOutlet]=\"formula\"/>\r\n <ng-container [ngTemplateOutlet]=\"media\"/>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n @if (showFontStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.bold!) {\r\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\r\n }\r\n @if (config()!.buttons!.italic!) {\r\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\r\n }\r\n @if (config()!.buttons!.underline!) {\r\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\r\n }\r\n @if (config()!.buttons!.strike!) {\r\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n @if (showBlockStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.blockquote!) {\r\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\r\n }\r\n @if (config()!.buttons!.codeblock!) {\r\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n @if (showQuickHeadingStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.h1!) {\r\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\r\n }\r\n @if (config()!.buttons!.h2!) {\r\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n @if (showListStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.ordered!) {\r\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\r\n }\r\n @if (config()!.buttons!.bulleted!) {\r\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n @if (showScriptStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.subScript!) {\r\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\r\n }\r\n @if (config()!.buttons!.superScript!) {\r\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #indentStyle>\r\n @if (showIndentStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.decreaseIndent!) {\r\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\r\n }\r\n @if (config()!.buttons!.increaseIndent!) {\r\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n @if (config()!.buttons!.rtl!) {\r\n <span class=\"ql-formats\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n @if (config()!.buttons!.fontSize!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n @if (config()!.buttons!.headingStyle!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n @if (config()!.buttons!.color!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n @if (config()!.buttons!.font!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n @if (config()!.buttons!.align!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n @if (config()!.buttons!.clean!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n @if (showMedia) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.link!) {\r\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\r\n }\r\n @if (config()!.buttons!.image!) {\r\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\r\n }\r\n @if (config()!.buttons!.video!) {\r\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n @if (config()!.buttons!.rawEditor!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n\r\n @if (config()!.buttons!.editorSize!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n @if (config()!.buttons!.formula!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n }\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
|
|
145
145
|
}], propDecorators: { users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }, { type: i0.Output, args: ["usersChange"] }] } });
|
|
146
146
|
|
|
147
147
|
class QuillMentionModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cleavelandprice-ngx-lib-quill-mention.mjs","sources":["../../../../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/quill-mention.api.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/cleavelandprice-ngx-lib-quill-mention.ts"],"sourcesContent":["import { Component, OnInit, forwardRef, inject, model } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\n//import { FormGroup } from '@angular/forms';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport { ActiveDirectoryService, User } from '@cleavelandprice/ngx-lib/active-directory';\r\n\r\nimport 'quill-mention';\r\n\r\n//#region Moved to client responsibility\r\n//import Quill from 'quill';\r\n\r\n// This doesn't work when done from the library - it must be done from the client app\r\n//import ImageResize from 'quill-image-resize-module';\r\n//Quill.register('modules/imageResize', ImageResize);\r\n\r\n// Treating ImageDrop the same way as ImageResize, even though it doesn't have the same problem described above\r\n//import { ImageDrop } from 'quill-image-drop-module';\r\n\r\n//#endregion\r\n\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { EditorComponent as EditorComponentBase } from '@cleavelandprice/ngx-lib/quill';\r\nimport { QuillEditorComponent } from 'ngx-quill';\r\nimport { DialogData } from '../../model/dialog-data';\r\n\r\n@Component({\r\n selector: 'cpquill-editor-with-mention',\r\n templateUrl: './editor.component.html',\r\n styleUrl: './editor.component.scss',\r\n imports: [\r\n FormsModule,\r\n MatIcon,\r\n MatTooltip,\r\n NgTemplateOutlet,\r\n QuillEditorComponent,\r\n ],\r\n standalone: true,\r\n providers: [{\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => EditorComponent),\r\n multi: true\r\n }]\r\n})\r\nexport class EditorComponent extends EditorComponentBase implements OnInit, ControlValueAccessor {\r\n users = model<User[]>();\r\n\r\n #dlgRef = inject(MatDialogRef<EditorComponent>, { optional: true });\r\n #dlg = inject(MatDialog);\r\n #activeDirectoryService = inject(ActiveDirectoryService);\r\n\r\n override ngOnInit(): void {\r\n this.initialize();\r\n\r\n if (!this.users()) {\r\n this.#activeDirectoryService.getUsers('ngxlibQuillEditor').subscribe(users =>\r\n this.users.set(users)\r\n );\r\n }\r\n }\r\n\r\n override toggleFullscreen(): void {\r\n if (this.fullscreenMode() === 'expand') {\r\n this.fullscreen.set(!this.fullscreen());\r\n this.fullscreenChanged.emit(this.fullscreen()!);\r\n }\r\n else {\r\n if (this.fullscreen()) {\r\n this.#dlgRef?.close(this.value);\r\n this.fullscreenChanged.emit(false);\r\n } else {\r\n const data: DialogData = {\r\n\r\n value: this.value,\r\n config: this.config(),\r\n placeholder: this.placeholder(),\r\n format: this.format()!,\r\n height: this.fullscreenHeight()!,\r\n width: '100%',\r\n maxHeight: this.fullscreenHeight()!,\r\n maxWidth: '100%',\r\n enableTooltips: this.enableTooltips()!,\r\n fullscreen: true,\r\n fullscreenMode: this.fullscreenMode()!,\r\n readonly: this.readonly()!,\r\n applyReadonlyStyle: this.applyReadonlyStyle()!,\r\n showToolbar: this.showToolbar()!,\r\n showBorder: this.showBorder()!,\r\n imageResizeModule: this.imageResizeModule()!,\r\n imageDropModule: this.imageDropModule()!,\r\n syntaxModule: this.syntaxModule()!,\r\n users: this.users()\r\n };\r\n\r\n this.#dlg.open(EditorComponent, {\r\n disableClose: true,\r\n width: this.fullscreenWidth(),\r\n height: this.fullscreenHeight(),\r\n data\r\n })\r\n .afterClosed()\r\n .subscribe(value => {\r\n this.value = value;\r\n this.updateChanges();\r\n });\r\n\r\n this.fullscreenChanged.emit(true);\r\n }\r\n }\r\n }\r\n\r\n override get modules() {\r\n if (!this.users()) { return {}; }\r\n\r\n const modules = {\r\n mention: {\r\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\r\n\r\n onSelect: (item: DOMStringMap, insertItem: any) => {\r\n const editor = this.editor()!.quillEditor\r\n insertItem(item)\r\n // necessary because quill-mention triggers changes as 'api' instead of 'user'\r\n editor.insertText(editor.getLength() - 1, '', 'user')\r\n },\r\n\r\n source: (searchTerm: string, renderList: any) => {\r\n if (searchTerm.length === 0) {\r\n renderList(this.users()?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)\r\n } else {\r\n const matches: any[] = []\r\n\r\n this.users()!.forEach((entry) => {\r\n if (\r\n (entry.displayName ?? entry.name).toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||\r\n entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1\r\n ) {\r\n matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })\r\n }\r\n })\r\n\r\n renderList(matches, searchTerm)\r\n }\r\n }\r\n }\r\n };\r\n\r\n if (!this.showToolbar()) {\r\n modules['toolbar'] = [];\r\n }\r\n\r\n if (this.imageResizeModule()) {\r\n modules['imageResize'] = {};\r\n }\r\n\r\n if (this.imageDropModule()) {\r\n modules['imageDrop'] = true;\r\n }\r\n\r\n if (this.syntaxModule()) {\r\n modules['syntax'] = true;\r\n }\r\n\r\n return modules;\r\n }\r\n}\r\n","@if (users()) {\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n (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 (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold!) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic!) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline!) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike!) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote!) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock!) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1!) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2!) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered!) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted!) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript!) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript!) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent!) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent!) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl!) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link!) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image!) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video!) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor!) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize!) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula!) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>","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}","/*export * from './model/buttons';\r\nexport * from './model/config';\r\nexport * from './model/dialog-data';\r\nexport * from './model/icons';\r\nexport * from './model/tooltips';*/\r\n\r\nexport { Buttons, Config, DefaultButtons, DefaultConfig, DefaultIcons, DefaultTooltips, DialogData, Icons, Tooltips } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport * from './components/editor/editor.component';\r\n\r\nexport * from './quill-mention.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './quill-mention.api';\n"],"names":["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/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/quill-mention.api.ts","../../../../projects/cleavelandprice/ngx-lib/quill/mention/src/cleavelandprice-ngx-lib-quill-mention.ts"],"sourcesContent":["import { Component, OnInit, forwardRef, inject, model } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from \"@angular/forms\";\r\n//import { FormGroup } from '@angular/forms';\r\nimport { MatDialog, MatDialogRef } from '@angular/material/dialog';\r\nimport { ActiveDirectoryService, User } from '@cleavelandprice/ngx-lib/active-directory';\r\n\r\nimport 'quill-mention';\r\n\r\n//#region Moved to client responsibility\r\n//import Quill from 'quill';\r\n\r\n// This doesn't work when done from the library - it must be done from the client app\r\n//import ImageResize from 'quill-image-resize-module';\r\n//Quill.register('modules/imageResize', ImageResize);\r\n\r\n// Treating ImageDrop the same way as ImageResize, even though it doesn't have the same problem described above\r\n//import { ImageDrop } from 'quill-image-drop-module';\r\n\r\n//#endregion\r\n\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { MatIcon } from '@angular/material/icon';\r\nimport { MatTooltip } from '@angular/material/tooltip';\r\nimport { EditorComponent as EditorComponentBase } from '@cleavelandprice/ngx-lib/quill';\r\nimport { QuillEditorComponent } from 'ngx-quill';\r\nimport { DialogData } from '../../model/dialog-data';\r\n\r\n@Component({\r\n selector: 'cpquill-editor-with-mention',\r\n templateUrl: './editor.component.html',\r\n styleUrl: './editor.component.scss',\r\n imports: [\r\n FormsModule,\r\n MatIcon,\r\n MatTooltip,\r\n NgTemplateOutlet,\r\n QuillEditorComponent,\r\n ],\r\n standalone: true,\r\n providers: [{\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => EditorComponent),\r\n multi: true\r\n }]\r\n})\r\nexport class EditorComponent extends EditorComponentBase implements OnInit, ControlValueAccessor {\r\n users = model<User[]>();\r\n\r\n #dlgRef = inject(MatDialogRef<EditorComponent>, { optional: true });\r\n #dlg = inject(MatDialog);\r\n #activeDirectoryService = inject(ActiveDirectoryService);\r\n\r\n override ngOnInit(): void {\r\n this.initialize();\r\n\r\n if (!this.users()) {\r\n this.#activeDirectoryService.getUsers('ngxlibQuillEditor').subscribe(users =>\r\n this.users.set(users)\r\n );\r\n }\r\n }\r\n\r\n override toggleFullscreen(): void {\r\n if (this.fullscreenMode() === 'expand') {\r\n this.fullscreen.set(!this.fullscreen());\r\n this.fullscreenChanged.emit(this.fullscreen()!);\r\n }\r\n else {\r\n if (this.fullscreen()) {\r\n this.#dlgRef?.close(this.value);\r\n this.fullscreenChanged.emit(false);\r\n } else {\r\n const data: DialogData = {\r\n\r\n value: this.value,\r\n config: this.config(),\r\n placeholder: this.placeholder(),\r\n format: this.format()!,\r\n height: this.fullscreenHeight()!,\r\n width: '100%',\r\n maxHeight: this.fullscreenHeight()!,\r\n maxWidth: '100%',\r\n enableTooltips: this.enableTooltips()!,\r\n fullscreen: true,\r\n fullscreenMode: this.fullscreenMode()!,\r\n readonly: this.readonly()!,\r\n applyReadonlyStyle: this.applyReadonlyStyle()!,\r\n showToolbar: this.showToolbar()!,\r\n showBorder: this.showBorder()!,\r\n imageResizeModule: this.imageResizeModule()!,\r\n imageDropModule: this.imageDropModule()!,\r\n syntaxModule: this.syntaxModule()!,\r\n users: this.users()\r\n };\r\n\r\n this.#dlg.open(EditorComponent, {\r\n disableClose: true,\r\n width: this.fullscreenWidth(),\r\n height: this.fullscreenHeight(),\r\n data\r\n })\r\n .afterClosed()\r\n .subscribe(value => {\r\n this.value = value;\r\n this.updateChanges();\r\n });\r\n\r\n this.fullscreenChanged.emit(true);\r\n }\r\n }\r\n }\r\n\r\n override get modules() {\r\n if (!this.users()) { return {}; }\r\n\r\n const modules = {\r\n mention: {\r\n allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,\r\n\r\n onSelect: (item: DOMStringMap, insertItem: any) => {\r\n const editor = this.editor()!.quillEditor\r\n insertItem(item)\r\n // necessary because quill-mention triggers changes as 'api' instead of 'user'\r\n editor.insertText(editor.getLength() - 1, '', 'user')\r\n },\r\n\r\n source: (searchTerm: string, renderList: any) => {\r\n if (searchTerm.length === 0) {\r\n renderList(this.users()?.map(u => ({ value: `${u.displayName} (${u.sAMAccountName.toLowerCase()})` })), searchTerm)\r\n } else {\r\n const matches: any[] = []\r\n\r\n this.users()!.forEach((entry) => {\r\n if (\r\n (entry.displayName ?? entry.name).toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1 ||\r\n entry.sAMAccountName.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1\r\n ) {\r\n matches.push({ value: `${entry.displayName} (${entry.sAMAccountName.toLowerCase()})` })\r\n }\r\n })\r\n\r\n renderList(matches, searchTerm)\r\n }\r\n }\r\n }\r\n };\r\n\r\n if (!this.showToolbar()) {\r\n modules['toolbar'] = [];\r\n }\r\n\r\n if (this.imageResizeModule()) {\r\n modules['imageResize'] = {};\r\n }\r\n\r\n if (this.imageDropModule()) {\r\n modules['imageDrop'] = true;\r\n }\r\n\r\n if (this.syntaxModule()) {\r\n modules['syntax'] = true;\r\n }\r\n\r\n return modules;\r\n }\r\n}\r\n","@if (users()) {\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n [placeholder]=\"placeholder() ?? ''\"\r\n [format]=\"format() ?? 'html'\"\r\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\r\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\r\n [readOnly]=\"readonly() ?? false\"\r\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\r\n [class.no-toolbar]=\"!showToolbar()\"\r\n [class.no-border]=\"!showBorder()\"\r\n [modules]=\"modules\"\r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n @if (showToolbar()) {\r\n <div quill-editor-toolbar>\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\r\n </div>\r\n }\r\n </quill-editor>\r\n </form>\r\n}\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\r\n <ng-container [ngTemplateOutlet]=\"heading\"/>\r\n <ng-container [ngTemplateOutlet]=\"color\"/>\r\n <ng-container [ngTemplateOutlet]=\"font\"/>\r\n <ng-container [ngTemplateOutlet]=\"align\"/>\r\n <ng-container [ngTemplateOutlet]=\"clean\"/>\r\n <ng-container [ngTemplateOutlet]=\"formula\"/>\r\n <ng-container [ngTemplateOutlet]=\"media\"/>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n @if (showFontStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.bold!) {\r\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\r\n }\r\n @if (config()!.buttons!.italic!) {\r\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\r\n }\r\n @if (config()!.buttons!.underline!) {\r\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\r\n }\r\n @if (config()!.buttons!.strike!) {\r\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n @if (showBlockStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.blockquote!) {\r\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\r\n }\r\n @if (config()!.buttons!.codeblock!) {\r\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n @if (showQuickHeadingStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.h1!) {\r\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\r\n }\r\n @if (config()!.buttons!.h2!) {\r\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n @if (showListStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.ordered!) {\r\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\r\n }\r\n @if (config()!.buttons!.bulleted!) {\r\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n @if (showScriptStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.subScript!) {\r\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\r\n }\r\n @if (config()!.buttons!.superScript!) {\r\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #indentStyle>\r\n @if (showIndentStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.decreaseIndent!) {\r\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\r\n }\r\n @if (config()!.buttons!.increaseIndent!) {\r\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n @if (config()!.buttons!.rtl!) {\r\n <span class=\"ql-formats\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n @if (config()!.buttons!.fontSize!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n @if (config()!.buttons!.headingStyle!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n @if (config()!.buttons!.color!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n @if (config()!.buttons!.font!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n @if (config()!.buttons!.align!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n @if (config()!.buttons!.clean!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n @if (showMedia) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.link!) {\r\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\r\n }\r\n @if (config()!.buttons!.image!) {\r\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\r\n }\r\n @if (config()!.buttons!.video!) {\r\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n @if (config()!.buttons!.rawEditor!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n\r\n @if (config()!.buttons!.editorSize!) {\r\n <span class=\"ql-formats\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize! : config()!.icons!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize! : config()!.icons!.popout!)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n @if (config()!.buttons!.formula!) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n }\r\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}","/*export * from './model/buttons';\r\nexport * from './model/config';\r\nexport * from './model/dialog-data';\r\nexport * from './model/icons';\r\nexport * from './model/tooltips';*/\r\n\r\nexport { Buttons, Config, DefaultButtons, DefaultConfig, DefaultIcons, DefaultTooltips, DialogData, Icons, Tooltips } from '@cleavelandprice/ngx-lib/quill';\r\n\r\nexport * from './components/editor/editor.component';\r\n\r\nexport * from './quill-mention.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './quill-mention.api';\n"],"names":["EditorComponentBase","i1","NgxQuillModule"],"mappings":";;;;;;;;;;;;;;;;AA6CM,MAAO,eAAgB,SAAQA,iBAAmB,CAAA;AAlBxD,IAAA,WAAA,GAAA;;QAmBE,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AAEvB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,EAAC,YAA6B,GAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACnE,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC;AACxB,QAAA,IAAA,CAAA,uBAAuB,GAAG,MAAM,CAAC,sBAAsB,CAAC;AAmHzD;AArHC,IAAA,OAAO;AACP,IAAA,IAAI;AACJ,IAAA,uBAAuB;IAEd,QAAQ,GAAA;QACf,IAAI,CAAC,UAAU,EAAE;AAEjB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,SAAS,CAAC,KAAK,IACxE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CACtB;;;IAII,gBAAgB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE,KAAK,QAAQ,EAAE;YACpC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAG,CAAC;;aAE9C;AACH,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;;iBAC/B;AACL,gBAAA,MAAM,IAAI,GAAe;oBAEvB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,oBAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;AACrB,oBAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,oBAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EAAG;AACtB,oBAAA,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAG;AAChC,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAG;AACnC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,cAAc,EAAE,IAAI,CAAC,cAAc,EAAG;AACtC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,cAAc,EAAE,IAAI,CAAC,cAAc,EAAG;AACtC,oBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAG;AAC1B,oBAAA,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAG;AAC9C,oBAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAG;AAChC,oBAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAG;AAC9B,oBAAA,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAG;AAC5C,oBAAA,eAAe,EAAE,IAAI,CAAC,eAAe,EAAG;AACxC,oBAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAG;AAClC,oBAAA,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;AAED,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AAC9B,oBAAA,YAAY,EAAE,IAAI;AAClB,oBAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE;AAC7B,oBAAA,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE;oBAC/B;iBACD;AACA,qBAAA,WAAW;qBACX,SAAS,CAAC,KAAK,IAAG;AACjB,oBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;oBAClB,IAAI,CAAC,aAAa,EAAE;AACtB,iBAAC,CAAC;AAEF,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;;;AAKvC,IAAA,IAAa,OAAO,GAAA;AAClB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE;AAAE,YAAA,OAAO,EAAE;;AAE9B,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,OAAO,EAAE;AACP,gBAAA,YAAY,EAAE,qBAAqB;AAEnC,gBAAA,QAAQ,EAAE,CAAC,IAAkB,EAAE,UAAe,KAAI;oBAChD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAG,CAAC,WAAW;oBACzC,UAAU,CAAC,IAAI,CAAC;;AAEhB,oBAAA,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC;iBACtD;AAED,gBAAA,MAAM,EAAE,CAAC,UAAkB,EAAE,UAAe,KAAI;AAC9C,oBAAA,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3B,wBAAA,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAA,EAAG,CAAC,CAAC,WAAW,CAAA,EAAA,EAAK,CAAC,CAAC,cAAc,CAAC,WAAW,EAAE,CAAA,CAAA,CAAG,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;;yBAC9G;wBACL,MAAM,OAAO,GAAU,EAAE;wBAEzB,IAAI,CAAC,KAAK,EAAG,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;4BAC9B,IACE,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;AACxF,gCAAA,KAAK,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EACzE;gCACF,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAA,EAAG,KAAK,CAAC,WAAW,KAAK,KAAK,CAAC,cAAc,CAAC,WAAW,EAAE,CAAA,CAAA,CAAG,EAAE,CAAC;;AAE3F,yBAAC,CAAC;AAEF,wBAAA,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC;;;AAGpC;SACF;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;AACvB,YAAA,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;;AAGzB,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;AAC5B,YAAA,OAAO,CAAC,aAAa,CAAC,GAAG,EAAE;;AAG7B,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;AAC1B,YAAA,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI;;AAG7B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;AACvB,YAAA,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI;;AAG1B,QAAA,OAAO,OAAO;;8GAtHL,eAAe,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,iPANb,CAAC;AACJ,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE;aACV,CAAC,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3CV,8tTA0Qc,EAAA,MAAA,EAAA,CAAA,+VAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED1ON,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,sGAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,yEAAA,EAAA,MAAA,EAAA,CAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACX,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACP,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACV,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,oBAAoB,EAAA,QAAA,EAAA,cAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FASf,eAAe,EAAA,UAAA,EAAA,CAAA;kBAlB3B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,6BAA6B,EAAA,OAAA,EAG9B;wBACL,WAAW;wBACX,OAAO;wBACP,UAAU;wBACV,gBAAgB;wBAChB,oBAAoB;qBACvB,EAAA,UAAA,EACW,IAAI,aACL,CAAC;AACJ,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE;yBACV,CAAC,EAAA,QAAA,EAAA,8tTAAA,EAAA,MAAA,EAAA,CAAA,+VAAA,CAAA,EAAA;;;MEXG,kBAAkB,CAAA;AAC7B,IAAA,OAAO,OAAO,GAAA;QACV,OAAO;AACL,YAAA,QAAQ,EAAE;SACX;;AAGH,IAAA,WAAA,CAAoC,YAAgC,EAAA;QAClE,IAAI,YAAY,EAAE;AAChB,YAAA,MAAM,IAAI,KAAK,CACb,uEAAuE,CAAC;;;8GAVrE,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAjB3B,YAAY;YACZ,WAAW;YACX,mBAAmB;YAEnB,eAAe;YACf,eAAe;YACf,aAAa;YACb,gBAAgB,EAAAC,IAAA,CAAA,WAAA,EAIhB,eAAe,CAAA,EAAA,OAAA,EAAA,CAGf,eAAe,CAAA,EAAA,CAAA,CAAA;AAGN,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAjB3B,YAAY;YACZ,WAAW;YACX,mBAAmB;YAEnB,eAAe;YACf,eAAe;YACf,aAAa;YACb,gBAAgB;YAEhBC,WAAc,CAAC,OAAO,EAAE;YAExB,eAAe,CAAA,EAAA,CAAA,CAAA;;2FAMN,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBApB9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,EAAE;AAChB,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBACX,mBAAmB;wBAEnB,eAAe;wBACf,eAAe;wBACf,aAAa;wBACb,gBAAgB;wBAEhBA,WAAc,CAAC,OAAO,EAAE;wBAExB;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD;AACF,iBAAA;;0BAQgB;;0BAAY;;;ACvC7B;;;;AAImC;;ACJnC;;AAEG;;;;"}
|
|
@@ -159,7 +159,7 @@ class RawComponent {
|
|
|
159
159
|
this.data = inject(MAT_DIALOG_DATA);
|
|
160
160
|
}
|
|
161
161
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RawComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: RawComponent, isStandalone: true, selector: "cpquill-raw", ngImport: i0, template: "<mat-dialog-content>\r\n <form>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\r\n <mat-icon>cancel</mat-icon>\r\n <span>Cancel</span>\r\n </button>\r\n\r\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\r\n <mat-icon>done</mat-icon>\r\n <span>Accept</span>\r\n </button>\r\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] }); }
|
|
163
163
|
}
|
|
164
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RawComponent, decorators: [{
|
|
165
165
|
type: Component,
|
|
@@ -172,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
172
172
|
MatFormField,
|
|
173
173
|
MatIcon,
|
|
174
174
|
MatInput
|
|
175
|
-
], standalone: true, template: "<mat-dialog-content>\n <form>\n <mat-form-field appearance=\"outline\">\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\n </mat-form-field>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\n <mat-icon>cancel</mat-icon>\n <span>Cancel</span>\n </button>\n\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\n <mat-icon>done</mat-icon>\n <span>Accept</span>\n </button>\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
|
|
175
|
+
], standalone: true, template: "<mat-dialog-content>\r\n <form>\r\n <mat-form-field appearance=\"outline\">\r\n <textarea matInput [(ngModel)]=\"data\" name=\"data\"></textarea>\r\n </mat-form-field>\r\n </form>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions>\r\n <button mat-raised-button color=\"warn\" mat-dialog-close=\"__DO!!NOT!!UPDATE__\">\r\n <mat-icon>cancel</mat-icon>\r\n <span>Cancel</span>\r\n </button>\r\n\r\n <button mat-raised-button color=\"primary\" [mat-dialog-close]=\"data\">\r\n <mat-icon>done</mat-icon>\r\n <span>Accept</span>\r\n </button>\r\n</mat-dialog-actions>", styles: ["mat-dialog-content{height:95%;max-height:initial!important}form{width:100%}mat-form-field{width:100%}textarea{height:70vh}\n"] }]
|
|
176
176
|
}] });
|
|
177
177
|
|
|
178
178
|
class EditorComponent {
|
|
@@ -426,7 +426,7 @@ class EditorComponent {
|
|
|
426
426
|
provide: NG_VALUE_ACCESSOR,
|
|
427
427
|
useExisting: forwardRef(() => EditorComponent),
|
|
428
428
|
multi: true
|
|
429
|
-
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
429
|
+
}], viewQueries: [{ propertyName: "editor", first: true, predicate: QuillEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n [placeholder]=\"placeholder() ?? ''\"\r\n [format]=\"format() ?? 'html'\"\r\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\r\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\r\n [readOnly]=\"readonly() ?? false\"\r\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\r\n [class.no-toolbar]=\"!showToolbar()\"\r\n [class.no-border]=\"!showBorder()\"\r\n [modules]=\"modules\"\r\n\r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n\r\n @if (showToolbar()) {\r\n <div quill-editor-toolbar>\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\r\n </div>\r\n }\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\r\n <ng-container [ngTemplateOutlet]=\"heading\"/>\r\n <ng-container [ngTemplateOutlet]=\"color\"/>\r\n <ng-container [ngTemplateOutlet]=\"font\"/>\r\n <ng-container [ngTemplateOutlet]=\"align\"/>\r\n <ng-container [ngTemplateOutlet]=\"clean\"/>\r\n <ng-container [ngTemplateOutlet]=\"formula\"/>\r\n <ng-container [ngTemplateOutlet]=\"media\"/>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n @if (showFontStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.bold) {\r\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\r\n }\r\n @if (config()!.buttons!.italic) {\r\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\r\n }\r\n @if (config()!.buttons!.underline) {\r\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\r\n }\r\n @if (config()!.buttons!.strike) {\r\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n @if (showBlockStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.blockquote) {\r\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\r\n }\r\n @if (config()!.buttons!.codeblock) {\r\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n @if (showQuickHeadingStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.h1) {\r\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\r\n }\r\n @if (config()!.buttons!.h2) {\r\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n @if (showListStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.ordered) {\r\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\r\n }\r\n @if (config()!.buttons!.bulleted) {\r\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n @if (showScriptStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.subScript) {\r\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\r\n }\r\n @if (config()!.buttons!.superScript) {\r\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #indentStyle>\r\n @if (showIndentStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.decreaseIndent) {\r\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\r\n }\r\n @if (config()!.buttons!.increaseIndent) {\r\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n @if (config()!.buttons!.rtl) {\r\n <span class=\"ql-formats\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n @if (config()!.buttons!.fontSize) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n @if (config()!.buttons!.headingStyle) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n @if (config()!.buttons!.color) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n @if (config()!.buttons!.font) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n @if (config()!.buttons!.align) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n @if (config()!.buttons!.clean) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n @if (showMedia) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.link) {\r\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\r\n }\r\n @if (config()!.buttons!.image) {\r\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\r\n }\r\n @if (config()!.buttons!.video) {\r\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n @if (config()!.buttons!.rawEditor) {\r\n <span class=\"ql-formats\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n\r\n @if (config()!.buttons!.editorSize) {\r\n <span class=\"ql-formats\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\r\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n @if (config()!.buttons!.formula) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n }\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }] }); }
|
|
430
430
|
}
|
|
431
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: EditorComponent, decorators: [{
|
|
432
432
|
type: Component,
|
|
@@ -440,7 +440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
440
440
|
provide: NG_VALUE_ACCESSOR,
|
|
441
441
|
useExisting: forwardRef(() => EditorComponent),
|
|
442
442
|
multi: true
|
|
443
|
-
}], template: "<ng-container>\n <form>\n <quill-editor name=\"editor\"\n [(ngModel)]=\"value\"\n (ngModelChange)=\"updateChanges()\"\n [placeholder]=\"placeholder() ?? ''\"\n [format]=\"format() ?? 'html'\"\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\n [readOnly]=\"readonly() ?? false\"\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\n [class.no-toolbar]=\"!showToolbar()\"\n [class.no-border]=\"!showBorder()\"\n [modules]=\"modules\"\n\n (onBlur)=\"onBlur.emit($event)\"\n (onContentChanged)=\"onContentChanged.emit($event)\"\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\n (onEditorCreated)=\"onEditorCreated.emit()\"\n (onFocus)=\"onFocus.emit($event)\"\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\n\n @if (showToolbar()) {\n <div quill-editor-toolbar>\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\n </div>\n }\n </quill-editor>\n </form>\n</ng-container>\n\n<ng-template #toolbar>\n <div>\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\n <ng-container [ngTemplateOutlet]=\"heading\"/>\n <ng-container [ngTemplateOutlet]=\"color\"/>\n <ng-container [ngTemplateOutlet]=\"font\"/>\n <ng-container [ngTemplateOutlet]=\"align\"/>\n <ng-container [ngTemplateOutlet]=\"clean\"/>\n <ng-container [ngTemplateOutlet]=\"formula\"/>\n <ng-container [ngTemplateOutlet]=\"media\"/>\n </div>\n</ng-template>\n\n<ng-template #fontStyle>\n @if (showFontStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.bold) {\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\n }\n @if (config()!.buttons!.italic) {\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\n }\n @if (config()!.buttons!.underline) {\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\n }\n @if (config()!.buttons!.strike) {\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #blockStyle>\n @if (showBlockStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.blockquote) {\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\n }\n @if (config()!.buttons!.codeblock) {\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #headingStyle>\n @if (showQuickHeadingStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.h1) {\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\n }\n @if (config()!.buttons!.h2) {\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #listStyle>\n @if (showListStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.ordered) {\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\n }\n @if (config()!.buttons!.bulleted) {\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #scriptStyle>\n @if (showScriptStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.subScript) {\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\n }\n @if (config()!.buttons!.superScript) {\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #indentStyle>\n @if (showIndentStyle) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.decreaseIndent) {\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\n }\n @if (config()!.buttons!.increaseIndent) {\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #rtl>\n @if (config()!.buttons!.rtl) {\n <span class=\"ql-formats\">\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #fontSize>\n @if (config()!.buttons!.fontSize) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\n <select class=\"ql-size\">\n <option value=\"small\"></option>\n <option selected></option>\n <option value=\"large\"></option>\n <option value=\"huge\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #heading>\n @if (config()!.buttons!.headingStyle) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\n <select class=\"ql-header\">\n <option value=\"1\"></option>\n <option value=\"2\"></option>\n <option value=\"3\"></option>\n <option value=\"4\"></option>\n <option value=\"5\"></option>\n <option value=\"6\"></option>\n <option selected=\"selected\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #color>\n @if (config()!.buttons!.color) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\n <select class=\"ql-color\"></select>\n <select class=\"ql-background\"></select>\n </span>\n }\n</ng-template>\n\n<ng-template #font>\n @if (config()!.buttons!.font) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\n <select class=\"ql-font\">\n <option selected></option>\n <option value=\"serif\"></option>\n <option value=\"monospace\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #align>\n @if (config()!.buttons!.align) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\n <select class=\"ql-align\">\n <option selected></option>\n <option value=\"center\"></option>\n <option value=\"right\"></option>\n <option value=\"justify\"></option>\n </select>\n </span>\n }\n</ng-template>\n\n<ng-template #clean>\n @if (config()!.buttons!.clean) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\n <button class=\"ql-clean\"></button>\n </span>\n }\n</ng-template>\n\n<ng-template #media>\n @if (showMedia) {\n <span class=\"ql-formats\">\n @if (config()!.buttons!.link) {\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\n }\n @if (config()!.buttons!.image) {\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\n }\n @if (config()!.buttons!.video) {\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\n }\n </span>\n }\n</ng-template>\n\n<ng-template #editorSize>\n <div>\n @if (config()!.buttons!.rawEditor) {\n <span class=\"ql-formats\">\n <button id=\"rawdog\"\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\n <mat-icon (click)=\"rawEdit()\">\n code\n </mat-icon>\n </button>\n </span>\n }\n\n @if (config()!.buttons!.editorSize) {\n <span class=\"ql-formats\">\n <button id=\"fullscreen\"\n [matTooltip]=\"tooltip(fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\n <mat-icon (click)=\"toggleFullscreen()\">\n {{ fullscreen() ?\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\n }}\n </mat-icon>\n </button>\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #formula>\n @if (config()!.buttons!.formula) {\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\n <button class=\"ql-formula\"></button>\n </span>\n }\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
|
|
443
|
+
}], template: "<ng-container>\r\n <form>\r\n <quill-editor name=\"editor\"\r\n [(ngModel)]=\"value\"\r\n (ngModelChange)=\"updateChanges()\"\r\n [placeholder]=\"placeholder() ?? ''\"\r\n [format]=\"format() ?? 'html'\"\r\n [style.height]=\"fullscreen() ? fullscreenHeight() : height()\"\r\n [style.width]=\"fullscreen() ? fullscreenWidth() : width()\"\r\n [readOnly]=\"readonly() ?? false\"\r\n [class.readonly]=\"readonly() && applyReadonlyStyle()\"\r\n [class.no-toolbar]=\"!showToolbar()\"\r\n [class.no-border]=\"!showBorder()\"\r\n [modules]=\"modules\"\r\n\r\n (onBlur)=\"onBlur.emit($event)\"\r\n (onContentChanged)=\"onContentChanged.emit($event)\"\r\n (onEditorChanged)=\"onEditorChanged.emit($event)\"\r\n (onEditorCreated)=\"onEditorCreated.emit()\"\r\n (onFocus)=\"onFocus.emit($event)\"\r\n (onSelectionChanged)=\"onSelectionChanged.emit($event)\">\r\n\r\n @if (showToolbar()) {\r\n <div quill-editor-toolbar>\r\n <ng-container [ngTemplateOutlet]=\"toolbar\"/>\r\n <ng-container [ngTemplateOutlet]=\"editorSize\"/>\r\n </div>\r\n }\r\n </quill-editor>\r\n </form>\r\n</ng-container>\r\n\r\n<ng-template #toolbar>\r\n <div>\r\n <ng-container [ngTemplateOutlet]=\"fontStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"blockStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"headingStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"listStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"scriptStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"indentStyle\"/>\r\n <ng-container [ngTemplateOutlet]=\"rtl\"/>\r\n <ng-container [ngTemplateOutlet]=\"fontSize\"/>\r\n <ng-container [ngTemplateOutlet]=\"heading\"/>\r\n <ng-container [ngTemplateOutlet]=\"color\"/>\r\n <ng-container [ngTemplateOutlet]=\"font\"/>\r\n <ng-container [ngTemplateOutlet]=\"align\"/>\r\n <ng-container [ngTemplateOutlet]=\"clean\"/>\r\n <ng-container [ngTemplateOutlet]=\"formula\"/>\r\n <ng-container [ngTemplateOutlet]=\"media\"/>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #fontStyle>\r\n @if (showFontStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.bold) {\r\n <button class=\"ql-bold\" [matTooltip]=\"tooltip(config()!.tooltips!.bold!)\"></button>\r\n }\r\n @if (config()!.buttons!.italic) {\r\n <button class=\"ql-italic\" [matTooltip]=\"tooltip(config()!.tooltips!.italic!)\"></button>\r\n }\r\n @if (config()!.buttons!.underline) {\r\n <button class=\"ql-underline\" [matTooltip]=\"tooltip(config()!.tooltips!.underline!)\"></button>\r\n }\r\n @if (config()!.buttons!.strike) {\r\n <button class=\"ql-strike\" [matTooltip]=\"tooltip(config()!.tooltips!.strike!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #blockStyle>\r\n @if (showBlockStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.blockquote) {\r\n <button class=\"ql-blockquote\" [matTooltip]=\"tooltip(config()!.tooltips!.blockquote!)\"></button>\r\n }\r\n @if (config()!.buttons!.codeblock) {\r\n <button class=\"ql-code-block\" [matTooltip]=\"tooltip(config()!.tooltips!.codeblock!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #headingStyle>\r\n @if (showQuickHeadingStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.h1) {\r\n <button class=\"ql-header\" value=\"1\" [matTooltip]=\"tooltip(config()!.tooltips!.h1!)\"></button>\r\n }\r\n @if (config()!.buttons!.h2) {\r\n <button class=\"ql-header\" value=\"2\" [matTooltip]=\"tooltip(config()!.tooltips!.h2!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #listStyle>\r\n @if (showListStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.ordered) {\r\n <button class=\"ql-list\" value=\"ordered\" [matTooltip]=\"tooltip(config()!.tooltips!.ordered!)\"></button>\r\n }\r\n @if (config()!.buttons!.bulleted) {\r\n <button class=\"ql-list\" value=\"bullet\" [matTooltip]=\"tooltip(config()!.tooltips!.bulleted!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #scriptStyle>\r\n @if (showScriptStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.subScript) {\r\n <button class=\"ql-script\" value=\"sub\" [matTooltip]=\"tooltip(config()!.tooltips!.subScript!)\"></button>\r\n }\r\n @if (config()!.buttons!.superScript) {\r\n <button class=\"ql-script\" value=\"super\" [matTooltip]=\"tooltip(config()!.tooltips!.superScript!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #indentStyle>\r\n @if (showIndentStyle) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.decreaseIndent) {\r\n <button class=\"ql-indent\" value=\"-1\" [matTooltip]=\"tooltip(config()!.tooltips!.decreaseIndent!)\"></button>\r\n }\r\n @if (config()!.buttons!.increaseIndent) {\r\n <button class=\"ql-indent\" value=\"+1\" [matTooltip]=\"tooltip(config()!.tooltips!.increaseIndent!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #rtl>\r\n @if (config()!.buttons!.rtl) {\r\n <span class=\"ql-formats\">\r\n <button class=\"ql-direction\" value=\"rtl\" [matTooltip]=\"tooltip(config()!.tooltips!.rtl!)\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #fontSize>\r\n @if (config()!.buttons!.fontSize) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.fontSize!)\">\r\n <select class=\"ql-size\">\r\n <option value=\"small\"></option>\r\n <option selected></option>\r\n <option value=\"large\"></option>\r\n <option value=\"huge\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #heading>\r\n @if (config()!.buttons!.headingStyle) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.headingStyle!)\">\r\n <select class=\"ql-header\">\r\n <option value=\"1\"></option>\r\n <option value=\"2\"></option>\r\n <option value=\"3\"></option>\r\n <option value=\"4\"></option>\r\n <option value=\"5\"></option>\r\n <option value=\"6\"></option>\r\n <option selected=\"selected\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #color>\r\n @if (config()!.buttons!.color) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.color!)\">\r\n <select class=\"ql-color\"></select>\r\n <select class=\"ql-background\"></select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #font>\r\n @if (config()!.buttons!.font) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.font!)\">\r\n <select class=\"ql-font\">\r\n <option selected></option>\r\n <option value=\"serif\"></option>\r\n <option value=\"monospace\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #align>\r\n @if (config()!.buttons!.align) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.align!)\">\r\n <select class=\"ql-align\">\r\n <option selected></option>\r\n <option value=\"center\"></option>\r\n <option value=\"right\"></option>\r\n <option value=\"justify\"></option>\r\n </select>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #clean>\r\n @if (config()!.buttons!.clean) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.clean!)\">\r\n <button class=\"ql-clean\"></button>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #media>\r\n @if (showMedia) {\r\n <span class=\"ql-formats\">\r\n @if (config()!.buttons!.link) {\r\n <button class=\"ql-link\" [matTooltip]=\"tooltip(config()!.tooltips!.link!)\"></button>\r\n }\r\n @if (config()!.buttons!.image) {\r\n <button class=\"ql-image\" [matTooltip]=\"tooltip(config()!.tooltips!.image!)\"></button>\r\n }\r\n @if (config()!.buttons!.video) {\r\n <button class=\"ql-video\" [matTooltip]=\"tooltip(config()!.tooltips!.video!)\"></button>\r\n }\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #editorSize>\r\n <div>\r\n @if (config()!.buttons!.rawEditor) {\r\n <span class=\"ql-formats\">\r\n <button id=\"rawdog\"\r\n [matTooltip]=\"tooltip(config()!.tooltips!.rawEditor!)\">\r\n <mat-icon (click)=\"rawEdit()\">\r\n code\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n\r\n @if (config()!.buttons!.editorSize) {\r\n <span class=\"ql-formats\">\r\n <button id=\"fullscreen\"\r\n [matTooltip]=\"tooltip(fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.minimize! : config()!.tooltips!.popin!) :\r\n (fullscreenMode() === 'expand' ? config()!.tooltips!.maximize! : config()!.tooltips!.popout!))\">\r\n <mat-icon (click)=\"toggleFullscreen()\">\r\n {{ fullscreen() ?\r\n (fullscreenMode() === 'expand' ? config()!.icons!.minimize : config()!.icons!.popin) :\r\n (fullscreenMode() === 'expand' ? config()!.icons!.maximize : config()!.icons!.popout)\r\n }}\r\n </mat-icon>\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #formula>\r\n @if (config()!.buttons!.formula) {\r\n <span class=\"ql-formats\" [matTooltip]=\"tooltip(config()!.tooltips!.formula!)\">\r\n <button class=\"ql-formula\"></button>\r\n </span>\r\n }\r\n</ng-template>", styles: [".ql-toolbar{display:grid;grid-template-columns:1fr auto}mat-icon{color:#ff4500}quill-editor.readonly .ql-toolbar{opacity:.5}::ng-deep quill-editor.no-toolbar .ql-toolbar{height:0;padding:0;visibility:hidden}::ng-deep quill-editor.no-border .ql-container{border:none}::ng-deep quill-editor.readonly .ql-container{background-color:#f5f5f5!important}\n"] }]
|
|
444
444
|
}], propDecorators: { editor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => QuillEditorComponent), { isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }, { type: i0.Output, args: ["placeholderChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }, { type: i0.Output, args: ["formatChange"] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }, { type: i0.Output, args: ["heightChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], fullscreenHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenHeight", required: false }] }, { type: i0.Output, args: ["fullscreenHeightChange"] }], fullscreenWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenWidth", required: false }] }, { type: i0.Output, args: ["fullscreenWidthChange"] }], fullscreenMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenMode", required: false }] }, { type: i0.Output, args: ["fullscreenModeChange"] }], enableTooltips: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTooltips", required: false }] }, { type: i0.Output, args: ["enableTooltipsChange"] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }, { type: i0.Output, args: ["fullscreenChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], applyReadonlyStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyReadonlyStyle", required: false }] }, { type: i0.Output, args: ["applyReadonlyStyleChange"] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }, { type: i0.Output, args: ["showToolbarChange"] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }, { type: i0.Output, args: ["showBorderChange"] }], imageResizeModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageResizeModule", required: false }] }, { type: i0.Output, args: ["imageResizeModuleChange"] }], imageDropModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageDropModule", required: false }] }, { type: i0.Output, args: ["imageDropModuleChange"] }], syntaxModule: [{ type: i0.Input, args: [{ isSignal: true, alias: "syntaxModule", required: false }] }, { type: i0.Output, args: ["syntaxModuleChange"] }], fullscreenChanged: [{ type: i0.Output, args: ["fullscreenChanged"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onContentChanged: [{ type: i0.Output, args: ["onContentChanged"] }], onEditorChanged: [{ type: i0.Output, args: ["onEditorChanged"] }], onEditorCreated: [{ type: i0.Output, args: ["onEditorCreated"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
|
|
445
445
|
|
|
446
446
|
class QuillModule {
|