primeng 14.0.0 → 14.1.0

package/fesm2020/primeng-editor.mjs

@@ -20,10 +20,61 @@ class Editor {
         this.onInit = new EventEmitter();
         this.onModelChange = () => { };
         this.onModelTouched = () => { };
+        this.quillElements = null;
     }
     ngAfterViewInit() {
-        let editorElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content');
-        let toolbarElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar');
+        this.initQuillElements();
+        if (this.quillElements?.editorElement?.isConnected) {
+            this.initQuillEditor();
+        }
+    }
+    ngAfterViewChecked() {
+        if (!this.quill && this.quillElements?.editorElement?.isConnected) {
+            this.initQuillEditor();
+        }
+    }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    writeValue(value) {
+        this.value = value;
+        if (this.quill) {
+            if (value)
+                this.quill.setContents(this.quill.clipboard.convert(value));
+            else
+                this.quill.setText('');
+        }
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    getQuill() {
+        return this.quill;
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(val) {
+        this._readonly = val;
+        if (this.quill) {
+            if (this._readonly)
+                this.quill.disable();
+            else
+                this.quill.enable();
+        }
+    }
+    initQuillEditor() {
+        this.initQuillElements();
+        const { toolbarElement, editorElement } = this.quillElements;
         let defaultModule = { toolbar: toolbarElement };
         let modules = this.modules ? { ...defaultModule, ...this.modules } : defaultModule;
         this.quill = new Quill(editorElement, {
@@ -67,48 +118,17 @@ class Editor {
             editor: this.quill
         });
     }
-    ngAfterContentInit() {
-        this.templates.forEach((item) => {
-            switch (item.getType()) {
-                case 'header':
-                    this.headerTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    writeValue(value) {
-        this.value = value;
-        if (this.quill) {
-            if (value)
-                this.quill.setContents(this.quill.clipboard.convert(value));
-            else
-                this.quill.setText('');
-        }
-    }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
-    }
-    getQuill() {
-        return this.quill;
-    }
-    get readonly() {
-        return this._readonly;
-    }
-    set readonly(val) {
-        this._readonly = val;
-        if (this.quill) {
-            if (this._readonly)
-                this.quill.disable();
-            else
-                this.quill.enable();
+    initQuillElements() {
+        if (!this.quillElements) {
+            this.quillElements = {
+                editorElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content'),
+                toolbarElement: DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar')
+            };
         }
     }
 }
-Editor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-Editor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: Editor, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onInit: "onInit" }, host: { classAttribute: "p-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+Editor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+Editor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: Editor, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onInit: "onInit" }, host: { classAttribute: "p-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
         <div [ngClass]="'p-editor-container'" [class]="styleClass">
             <div class="p-editor-toolbar" *ngIf="toolbar || headerTemplate">
                 <ng-content select="p-header"></ng-content>
@@ -158,7 +178,7 @@ Editor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.
             <div class="p-editor-content" [ngStyle]="style"></div>
         </div>
     `, isInline: true, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: Editor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Editor, decorators: [{
             type: Component,
             args: [{ selector: 'p-editor', template: `
         <div [ngClass]="'p-editor-container'" [class]="styleClass">
@@ -245,10 +265,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }] } });
 class EditorModule {
 }
-EditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule], exports: [Editor, SharedModule] });
-EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: EditorModule, decorators: [{
+EditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule], exports: [Editor, SharedModule] });
+EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: EditorModule, imports: [CommonModule, SharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: EditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2020/primeng-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-editor.mjs","sources":["../../src/app/components/editor/editor.ts","../../src/app/components/editor/primeng-editor.ts"],"sourcesContent":["import {NgModule,Component,ElementRef,AfterViewInit,Input,Output,EventEmitter,ContentChild,forwardRef,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, QueryList, AfterContentInit, TemplateRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SharedModule,Header, PrimeTemplate} from 'primeng/api'\nimport {DomHandler} from 'primeng/dom';\nimport {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';\nimport Quill from \"quill\";\n\nexport const EDITOR_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => Editor),\n  multi: true\n};\n\n@Component({\n    selector: 'p-editor',\n    template: `\n        <div [ngClass]=\"'p-editor-container'\" [class]=\"styleClass\">\n            <div class=\"p-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-editor-toolbar\" *ngIf=\"!toolbar && !headerTemplate\">\n                <span class=\"ql-formats\">\n                    <select class=\"ql-header\">\n                      <option value=\"1\">Heading</option>\n                      <option value=\"2\">Subheading</option>\n                      <option selected>Normal</option>\n                    </select>\n                    <select class=\"ql-font\">\n                      <option selected>Sans Serif</option>\n                      <option value=\"serif\">Serif</option>\n                      <option value=\"monospace\">Monospace</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n                    <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n                    <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <select class=\"ql-color\"></select>\n                    <select class=\"ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\n                    <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\n                    <select class=\"ql-align\">\n                        <option selected></option>\n                        <option value=\"center\">center</option>\n                        <option value=\"right\">right</option>\n                        <option value=\"justify\">justify</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n                    <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n                    <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\n                </span>\n            </div>\n            <div class=\"p-editor-content\" [ngStyle]=\"style\"></div>\n        </div>\n    `,\n    providers: [EDITOR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styleUrls: ['./editor.css'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        'class': 'p-element'\n    }\n})\nexport class Editor implements AfterViewInit,AfterContentInit,ControlValueAccessor {\n\n    @Output() onTextChange: EventEmitter<any> = new EventEmitter();\n\n    @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();\n\n    @ContentChild(Header) toolbar;\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() placeholder: string;\n\n    @Input() formats: string[];\n\n    @Input() modules: any;\n\n    @Input() bounds: any;\n\n    @Input() scrollingContainer: any;\n\n    @Input() debug: string;\n\n    @Output() onInit: EventEmitter<any> = new EventEmitter();\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    value: string;\n\n    _readonly: boolean;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    quill: any;\n\n    headerTemplate: TemplateRef<any>;\n\n    constructor(public el: ElementRef) {}\n\n    ngAfterViewInit() {\n        let editorElement = DomHandler.findSingle(this.el.nativeElement ,'div.p-editor-content');\n        let toolbarElement = DomHandler.findSingle(this.el.nativeElement ,'div.p-editor-toolbar');\n        let defaultModule  = {toolbar: toolbarElement};\n        let modules = this.modules ? {...defaultModule, ...this.modules} : defaultModule;\n\n        this.quill = new Quill(editorElement, {\n            modules: modules,\n            placeholder: this.placeholder,\n            readOnly: this.readonly,\n            theme: 'snow',\n            formats: this.formats,\n            bounds: this.bounds,\n            debug: this.debug,\n            scrollingContainer: this.scrollingContainer\n        });\n\n        if (this.value) {\n            this.quill.setContents(this.quill.clipboard.convert(this.value));\n        }\n\n        this.quill.on('text-change', (delta, oldContents, source) => {\n            if (source === 'user') {\n                let html = DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;\n                let text = this.quill.getText().trim();\n                if (html === '<p><br></p>') {\n                    html = null;\n                }\n\n                this.onTextChange.emit({\n                    htmlValue: html,\n                    textValue: text,\n                    delta: delta,\n                    source: source\n                });\n\n                this.onModelChange(html);\n                this.onModelTouched();\n            }\n        });\n\n        this.quill.on('selection-change', (range, oldRange, source) => {\n            this.onSelectionChange.emit({\n                range: range,\n                oldRange: oldRange,\n                source: source\n            });\n        });\n\n        this.onInit.emit({\n            editor: this.quill\n        });\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                break;\n            }\n        });\n    }\n\n    writeValue(value: any) : void {\n        this.value = value;\n\n        if (this.quill) {\n            if (value)\n                this.quill.setContents(this.quill.clipboard.convert(value));\n            else\n                this.quill.setText('');\n        }\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    getQuill() {\n        return this.quill;\n    }\n\n    @Input() get readonly(): boolean {\n        return this._readonly;\n    }\n\n    set readonly(val:boolean) {\n        this._readonly = val;\n\n        if (this.quill) {\n            if (this._readonly)\n                this.quill.disable();\n            else\n                this.quill.enable();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Editor,SharedModule],\n    declarations: [Editor]\n})\nexport class EditorModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-editor.mjs","sources":["../../src/app/components/editor/editor.ts","../../src/app/components/editor/primeng-editor.ts"],"sourcesContent":["import {NgModule,Component,ElementRef,AfterViewInit,Input,Output,EventEmitter,ContentChild,forwardRef,ChangeDetectionStrategy,ViewEncapsulation,ContentChildren,QueryList,AfterContentInit,TemplateRef,AfterViewChecked} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {SharedModule,Header, PrimeTemplate} from 'primeng/api'\nimport {DomHandler} from 'primeng/dom';\nimport {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';\nimport Quill from 'quill';\n\nexport const EDITOR_VALUE_ACCESSOR: any = {\n  provide: NG_VALUE_ACCESSOR,\n  useExisting: forwardRef(() => Editor),\n  multi: true\n};\n\n@Component({\n    selector: 'p-editor',\n    template: `\n        <div [ngClass]=\"'p-editor-container'\" [class]=\"styleClass\">\n            <div class=\"p-editor-toolbar\" *ngIf=\"toolbar || headerTemplate\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-editor-toolbar\" *ngIf=\"!toolbar && !headerTemplate\">\n                <span class=\"ql-formats\">\n                    <select class=\"ql-header\">\n                      <option value=\"1\">Heading</option>\n                      <option value=\"2\">Subheading</option>\n                      <option selected>Normal</option>\n                    </select>\n                    <select class=\"ql-font\">\n                      <option selected>Sans Serif</option>\n                      <option value=\"serif\">Serif</option>\n                      <option value=\"monospace\">Monospace</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-bold\" aria-label=\"Bold\" type=\"button\"></button>\n                    <button class=\"ql-italic\" aria-label=\"Italic\" type=\"button\"></button>\n                    <button class=\"ql-underline\" aria-label=\"Underline\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <select class=\"ql-color\"></select>\n                    <select class=\"ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-list\" value=\"ordered\" aria-label=\"Ordered List\" type=\"button\"></button>\n                    <button class=\"ql-list\" value=\"bullet\" aria-label=\"Unordered List\" type=\"button\"></button>\n                    <select class=\"ql-align\">\n                        <option selected></option>\n                        <option value=\"center\">center</option>\n                        <option value=\"right\">right</option>\n                        <option value=\"justify\">justify</option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-link\" aria-label=\"Insert Link\" type=\"button\"></button>\n                    <button class=\"ql-image\" aria-label=\"Insert Image\" type=\"button\"></button>\n                    <button class=\"ql-code-block\" aria-label=\"Insert Code Block\" type=\"button\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button class=\"ql-clean\" aria-label=\"Remove Styles\" type=\"button\"></button>\n                </span>\n            </div>\n            <div class=\"p-editor-content\" [ngStyle]=\"style\"></div>\n        </div>\n    `,\n    providers: [EDITOR_VALUE_ACCESSOR],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    styleUrls: ['./editor.css'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        'class': 'p-element'\n    }\n})\nexport class Editor implements AfterViewInit,AfterViewChecked,AfterContentInit,ControlValueAccessor {\n\n    @Output() onTextChange: EventEmitter<any> = new EventEmitter();\n\n    @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();\n\n    @ContentChild(Header) toolbar;\n\n    @Input() style: any;\n\n    @Input() styleClass: string;\n\n    @Input() placeholder: string;\n\n    @Input() formats: string[];\n\n    @Input() modules: any;\n\n    @Input() bounds: any;\n\n    @Input() scrollingContainer: any;\n\n    @Input() debug: string;\n\n    @Output() onInit: EventEmitter<any> = new EventEmitter();\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<any>;\n\n    value: string;\n\n    _readonly: boolean;\n\n    onModelChange: Function = () => {};\n\n    onModelTouched: Function = () => {};\n\n    quill: any;\n\n    headerTemplate: TemplateRef<any>;\n\n    private quillElements: {editorElement: HTMLElement, toolbarElement: HTMLElement} | null = null;\n\n    constructor(public el: ElementRef) {}\n\n    ngAfterViewInit(): void {\n        this.initQuillElements();\n\n        if (this.quillElements?.editorElement?.isConnected) {\n            this.initQuillEditor();\n        }\n    }\n    \n    ngAfterViewChecked(): void {\n        if (!this.quill && this.quillElements?.editorElement?.isConnected) {\n            this.initQuillEditor();\n        }\n    }\n\n    ngAfterContentInit() {\n        this.templates.forEach((item) => {\n            switch(item.getType()) {\n                case 'header':\n                    this.headerTemplate = item.template;\n                break;\n            }\n        });\n    }\n\n    writeValue(value: any) : void {\n        this.value = value;\n\n        if (this.quill) {\n            if (value)\n                this.quill.setContents(this.quill.clipboard.convert(value));\n            else\n                this.quill.setText('');\n        }\n    }\n\n    registerOnChange(fn: Function): void {\n        this.onModelChange = fn;\n    }\n\n    registerOnTouched(fn: Function): void {\n        this.onModelTouched = fn;\n    }\n\n    getQuill() {\n        return this.quill;\n    }\n\n    @Input() get readonly(): boolean {\n        return this._readonly;\n    }\n\n    set readonly(val:boolean) {\n        this._readonly = val;\n\n        if (this.quill) {\n            if (this._readonly)\n                this.quill.disable();\n            else\n                this.quill.enable();\n        }\n    }\n\n    private initQuillEditor(): void {\n        this.initQuillElements();\n\n        const { toolbarElement, editorElement } = this.quillElements;\n        let defaultModule  = {toolbar: toolbarElement};\n        let modules = this.modules ? {...defaultModule, ...this.modules} : defaultModule;\n        this.quill = new Quill(editorElement, {\n            modules: modules,\n            placeholder: this.placeholder,\n            readOnly: this.readonly,\n            theme: 'snow',\n            formats: this.formats,\n            bounds: this.bounds,\n            debug: this.debug,\n            scrollingContainer: this.scrollingContainer\n        });\n\n        if (this.value) {\n            this.quill.setContents(this.quill.clipboard.convert(this.value));\n        }\n\n        this.quill.on('text-change', (delta, oldContents, source) => {\n            if (source === 'user') {\n                let html = DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;\n                let text = this.quill.getText().trim();\n                if (html === '<p><br></p>') {\n                    html = null;\n                }\n\n                this.onTextChange.emit({\n                    htmlValue: html,\n                    textValue: text,\n                    delta: delta,\n                    source: source\n                });\n\n                this.onModelChange(html);\n                this.onModelTouched();\n            }\n        });\n\n        this.quill.on('selection-change', (range, oldRange, source) => {\n            this.onSelectionChange.emit({\n                range: range,\n                oldRange: oldRange,\n                source: source\n            });\n        });\n\n        this.onInit.emit({\n            editor: this.quill\n        });\n    }\n\n    private initQuillElements(): void {\n        if (!this.quillElements) {\n            this.quillElements = {\n                editorElement: DomHandler.findSingle(this.el.nativeElement ,'div.p-editor-content'),\n                toolbarElement: DomHandler.findSingle(this.el.nativeElement ,'div.p-editor-toolbar')\n            };\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [Editor,SharedModule],\n    declarations: [Editor]\n})\nexport class EditorModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/primeng-fieldset.mjs

@@ -58,8 +58,8 @@ class Fieldset {
         this.animating = false;
     }
 }
-Fieldset.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: Fieldset, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-Fieldset.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: Fieldset, selector: "p-fieldset", inputs: { legend: "legend", toggleable: "toggleable", collapsed: "collapsed", style: "style", styleClass: "styleClass", transitionOptions: "transitionOptions" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
+Fieldset.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Fieldset, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+Fieldset.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: Fieldset, selector: "p-fieldset", inputs: { legend: "legend", toggleable: "toggleable", collapsed: "collapsed", style: "style", styleClass: "styleClass", transitionOptions: "transitionOptions" }, outputs: { collapsedChange: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
         <fieldset [attr.id]="id" [ngClass]="{'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable}" [ngStyle]="style" [class]="styleClass">
             <legend class="p-fieldset-legend">
                 <ng-container *ngIf="toggleable; else legendContent">
@@ -95,7 +95,7 @@ Fieldset.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
             transition('void => *', animate(0))
         ])
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: Fieldset, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Fieldset, decorators: [{
             type: Component,
             args: [{ selector: 'p-fieldset', template: `
         <fieldset [attr.id]="id" [ngClass]="{'p-fieldset p-component': true, 'p-fieldset-toggleable': toggleable, 'p-fieldset-expanded': !collapsed && toggleable}" [ngStyle]="style" [class]="styleClass">
@@ -159,10 +159,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }] } });
 class FieldsetModule {
 }
-FieldsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: FieldsetModule, declarations: [Fieldset], imports: [CommonModule, RippleModule], exports: [Fieldset, SharedModule] });
-FieldsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FieldsetModule, imports: [CommonModule, RippleModule, SharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FieldsetModule, decorators: [{
+FieldsetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FieldsetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: FieldsetModule, declarations: [Fieldset], imports: [CommonModule, RippleModule], exports: [Fieldset, SharedModule] });
+FieldsetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FieldsetModule, imports: [CommonModule, RippleModule, SharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FieldsetModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RippleModule],

package/fesm2020/primeng-fileupload.mjs

@@ -148,6 +148,7 @@ class FileUpload {
         return !!window['MSInputMethodContext'] && !!document['documentMode'];
     }
     validate(file) {
+        this.msgs = [];
         if (this.accept && !this.isFileTypeValid(file)) {
             this.msgs.push({
                 severity: 'error',
@@ -261,6 +262,7 @@ class FileUpload {
         this.clearInputElement();
         this.onRemove.emit({ originalEvent: event, file: this.files[index] });
         this.files.splice(index, 1);
+        this.checkFileLimit();
     }
     isFileLimitExceeded() {
         if (this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount && this.focus) {
@@ -272,6 +274,7 @@ class FileUpload {
         return this.fileLimit && this.fileLimit <= this.files.length + this.uploadedFileCount;
     }
     checkFileLimit() {
+        this.msgs = [];
         if (this.isFileLimitExceeded()) {
             this.msgs.push({
                 severity: 'error',
@@ -279,6 +282,9 @@ class FileUpload {
                 detail: this.invalidFileLimitMessageDetail.replace('{0}', this.fileLimit.toString())
             });
         }
+        else {
+            this.msgs = [];
+        }
     }
     clearInputElement() {
         if (this.advancedFileInput && this.advancedFileInput.nativeElement) {
@@ -377,19 +383,19 @@ class FileUpload {
         }
     }
 }
-FileUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FileUpload, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-FileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: FileUpload, selector: "p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: "multiple", accept: "accept", disabled: "disabled", auto: "auto", withCredentials: "withCredentials", maxFileSize: "maxFileSize", invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: "previewWidth", chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: "showUploadButton", showCancelButton: "showCancelButton", mode: "mode", headers: "headers", customUpload: "customUpload", fileLimit: "fileLimit", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
+FileUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FileUpload, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: i0.NgZone }, { token: i2.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+FileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: FileUpload, selector: "p-fileUpload", inputs: { name: "name", url: "url", method: "method", multiple: "multiple", accept: "accept", disabled: "disabled", auto: "auto", withCredentials: "withCredentials", maxFileSize: "maxFileSize", invalidFileSizeMessageSummary: "invalidFileSizeMessageSummary", invalidFileSizeMessageDetail: "invalidFileSizeMessageDetail", invalidFileTypeMessageSummary: "invalidFileTypeMessageSummary", invalidFileTypeMessageDetail: "invalidFileTypeMessageDetail", invalidFileLimitMessageDetail: "invalidFileLimitMessageDetail", invalidFileLimitMessageSummary: "invalidFileLimitMessageSummary", style: "style", styleClass: "styleClass", previewWidth: "previewWidth", chooseLabel: "chooseLabel", uploadLabel: "uploadLabel", cancelLabel: "cancelLabel", chooseIcon: "chooseIcon", uploadIcon: "uploadIcon", cancelIcon: "cancelIcon", showUploadButton: "showUploadButton", showCancelButton: "showCancelButton", mode: "mode", headers: "headers", customUpload: "customUpload", fileLimit: "fileLimit", uploadStyleClass: "uploadStyleClass", cancelStyleClass: "cancelStyleClass", removeStyleClass: "removeStyleClass", chooseStyleClass: "chooseStyleClass", files: "files" }, outputs: { onBeforeUpload: "onBeforeUpload", onSend: "onSend", onUpload: "onUpload", onError: "onError", onClear: "onClear", onRemove: "onRemove", onSelect: "onSelect", onProgress: "onProgress", uploadHandler: "uploadHandler" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "advancedFileInput", first: true, predicate: ["advancedfileinput"], descendants: true }, { propertyName: "basicFileInput", first: true, predicate: ["basicfileinput"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
             <div class="p-fileupload-buttonbar">
                 <span class="p-button p-component p-fileupload-choose" [ngClass]="{'p-focus': focus, 'p-disabled':disabled || isChooseDisabled()}" (focus)="onFocus()" (blur)="onBlur()" pRipple
-                    (click)="choose()" (keydown.enter)="choose()" tabindex="0">
+                    (click)="choose()" (keydown.enter)="choose()" tabindex="0" [class]="chooseStyleClass">
                     <input #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''">
                     <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon"></span>
                     <span class="p-button-label">{{chooseButtonLabel}}</span>
                 </span>
 
-                <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()"></p-button>
-                <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading"></p-button>
+                <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass"></p-button>
+                <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass"></p-button>
 
                 <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
             </div>
@@ -405,7 +411,7 @@ FileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "1
                             <div class="p-fileupload-filename">{{file.name}}</div>
                             <div>{{formatSize(file.size)}}</div>
                             <div>
-                                <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading"></button>
+                                <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading" [class]="removeStyleClass"></button>
                             </div>
                         </div>
                     </div>
@@ -427,20 +433,20 @@ FileUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "1
             </span>
         </div>
     `, isInline: true, styles: [".p-fileupload-content{position:relative}.p-fileupload-row{display:flex;align-items:center}.p-fileupload-row>div{flex:1 1 auto;width:25%}.p-fileupload-row>div:last-child{text-align:right}.p-fileupload-content .p-progressbar{width:100%;position:absolute;top:0;left:0}.p-button.p-fileupload-choose{position:relative;overflow:hidden}.p-button.p-fileupload-choose input[type=file],.p-fileupload-choose.p-fileupload-choose-selected input[type=file]{display:none}.p-fluid .p-fileupload .p-button{width:auto}.p-fileupload-filename{word-break:break-all}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i5.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "style", "styleClass", "unit", "mode"] }, { kind: "component", type: i7.Messages, selector: "p-messages", inputs: ["value", "closable", "style", "styleClass", "enableService", "key", "escape", "severity", "showTransitionOptions", "hideTransitionOptions"], outputs: ["valueChange"] }, { kind: "directive", type: i8.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FileUpload, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FileUpload, decorators: [{
             type: Component,
             args: [{ selector: 'p-fileUpload', template: `
         <div [ngClass]="'p-fileupload p-fileupload-advanced p-component'" [ngStyle]="style" [class]="styleClass" *ngIf="mode === 'advanced'">
             <div class="p-fileupload-buttonbar">
                 <span class="p-button p-component p-fileupload-choose" [ngClass]="{'p-focus': focus, 'p-disabled':disabled || isChooseDisabled()}" (focus)="onFocus()" (blur)="onBlur()" pRipple
-                    (click)="choose()" (keydown.enter)="choose()" tabindex="0">
+                    (click)="choose()" (keydown.enter)="choose()" tabindex="0" [class]="chooseStyleClass">
                     <input #advancedfileinput type="file" (change)="onFileSelect($event)" [multiple]="multiple" [accept]="accept" [disabled]="disabled || isChooseDisabled()" [attr.title]="''">
                     <span [ngClass]="'p-button-icon p-button-icon-left'" [class]="chooseIcon"></span>
                     <span class="p-button-label">{{chooseButtonLabel}}</span>
                 </span>
 
-                <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()"></p-button>
-                <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading"></p-button>
+                <p-button *ngIf="!auto&&showUploadButton" type="button" [label]="uploadButtonLabel" [icon]="uploadIcon" (onClick)="upload()" [disabled]="!hasFiles() || isFileLimitExceeded()" [styleClass]="uploadStyleClass"></p-button>
+                <p-button *ngIf="!auto&&showCancelButton" type="button" [label]="cancelButtonLabel" [icon]="cancelIcon" (onClick)="clear()" [disabled]="!hasFiles() || uploading" [styleClass]="cancelStyleClass"></p-button>
 
                 <ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
             </div>
@@ -456,7 +462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                             <div class="p-fileupload-filename">{{file.name}}</div>
                             <div>{{formatSize(file.size)}}</div>
                             <div>
-                                <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading"></button>
+                                <button type="button" icon="pi pi-times" pButton (click)="remove($event,i)" [disabled]="uploading" [class]="removeStyleClass"></button>
                             </div>
                         </div>
                     </div>
@@ -540,6 +546,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], fileLimit: [{
                 type: Input
+            }], uploadStyleClass: [{
+                type: Input
+            }], cancelStyleClass: [{
+                type: Input
+            }], removeStyleClass: [{
+                type: Input
+            }], chooseStyleClass: [{
+                type: Input
             }], onBeforeUpload: [{
                 type: Output
             }], onSend: [{
@@ -575,10 +589,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
             }] } });
 class FileUploadModule {
 }
-FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: FileUploadModule, declarations: [FileUpload], imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule], exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
-FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FileUploadModule, imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: FileUploadModule, decorators: [{
+FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.7", ngImport: i0, type: FileUploadModule, declarations: [FileUpload], imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule], exports: [FileUpload, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
+FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FileUploadModule, imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule, ButtonModule, ProgressBarModule, MessagesModule, RippleModule],