{"version":3,"sources":["../../src/app/components/editor/editor.ts"],"names":["EDITOR_VALUE_ACCESSOR","provide","NG_VALUE_ACCESSOR","useExisting","forwardRef","Editor","multi","el","this","onTextChange","EventEmitter","onSelectionChange","onInit","onModelChange","onModelTouched","prototype","ngAfterViewInit","_this","editorElement","DomHandler","findSingle","nativeElement","defaultModule","toolbar","modules","Object","assign","quill","Quill","placeholder","readOnly","readonly","theme","formats","bounds","debug","scrollingContainer","value","pasteHTML","on","delta","oldContents","source","html","children","innerHTML","text","getText","trim","emit","htmlValue","textValue","range","oldRange","editor","ngAfterContentInit","templates","forEach","item","getType","toolbarTemplate","template","writeValue","setText","registerOnChange","fn","registerOnTouched","getQuill","defineProperty","_readonly","val","disable","enable","Component","args","selector","providers","changeDetection","ChangeDetectionStrategy","OnPush","encapsulation","ViewEncapsulation","None","ElementRef","Output","ContentChild","Header","Input","ContentChildren","PrimeTemplate","NgModule","imports","CommonModule","exports","SharedModule","declarations"],"mappings":"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","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 * as 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 || toolbarTemplate\">\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 && !toolbarTemplate\">\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\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"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    encapsulation: ViewEncapsulation.None\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    toolbarTemplate: 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.pasteHTML(this.value);\n        }\n        \n        this.quill.on('text-change', (delta, oldContents, source) => {\n            if (source === 'user') {\n                let html = editorElement.children[0].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 'toolbar':\n                    this.toolbarTemplate = 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.pasteHTML(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"]}