ngx-editor/bundles/ngx-editor.umd.min.js

WYSIWYG Editor for Angular Applications

!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common/http"),require("rxjs"),require("@angular/forms"),require("ngx-bootstrap"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-editor",["exports","@angular/core","@angular/common/http","rxjs","@angular/forms","ngx-bootstrap","@angular/common"],o):o(e["ngx-editor"]={},e.ng.core,e.ng.common.http,e.rxjs,e.ng.forms,e["ngx-bootstrap"],e.ng.common)}(this,function(e,r,i,o,t,n,a){"use strict";function p(o,e){return!!o&&(0===e.length||!!e.filter(function(e){return-1!==e.indexOf(o)}).length)}function s(){if(window.getSelection){var e=window.getSelection();if(e.getRangeAt&&e.rangeCount)return e.getRangeAt(0)}else if(document.getSelection&&document.createRange)return document.createRange();return null}function l(e){if(!e)return!1;if(window.getSelection){var o=window.getSelection();return o.removeAllRanges(),o.addRange(e),!0}return document.getSelection&&e.select?(e.select(),!0):void 0}var d=Object.freeze({canEnableToolbarOptions:p,getEditorConfiguration:function x(e,o,t){for(var n in o)n&&(t[n]!==undefined&&(e[n]=t[n]),e.hasOwnProperty(n)||(e[n]=o[n]));return e},canResize:function y(e){return"basic"===e&&"vertical"},saveSelection:s,restoreSelection:l}),g=function(){function e(e){this._http=e,this.savedSelection=undefined}return e.prototype.execute=function(e){if(!this.savedSelection&&"enableObjectResizing"!==e)throw new Error("Range out of Editor");"enableObjectResizing"===e&&document.execCommand("enableObjectResizing",!0),"blockquote"===e&&document.execCommand("formatBlock",!1,"blockquote"),"removeBlockquote"===e&&document.execCommand("formatBlock",!1,"div"),document.execCommand(e,!1,null)},e.prototype.insertImage=function(e){if(!this.savedSelection)throw new Error("Range out of the editor");if(e&&l(this.savedSelection)&&!document.execCommand("insertImage",!1,e))throw new Error("Invalid URL")},e.prototype.insertVideo=function(e){if(!this.savedSelection)throw new Error("Range out of the editor");if(e&&l(this.savedSelection))if(this.isYoutubeLink(e.videoUrl)){var o='<iframe width="'+e.width+'" height="'+e.height+'"src="'+e.videoUrl+'"></iframe>';this.insertHtml(o)}else{if(!this.checkTagSupportInBrowser("video"))throw new Error("Unable to insert video");if(!this.isValidURL(e.videoUrl))throw new Error("Invalid video URL");var t='<video width="'+e.width+'" height="'+e.height+'" controls="true"><source src="'+e.videoUrl+'"></video>';this.insertHtml(t)}},e.prototype.isYoutubeLink=function(e){return/^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/.test(e)},e.prototype.isValidURL=function(e){return/(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/.test(e)},e.prototype.uploadImage=function(e,o){if(!o)throw new Error("Image Endpoint isn`t provided or invalid");var t=new FormData;if(e){t.append("file",e);var n=new i.HttpRequest("POST",o,t,{reportProgress:!0});return this._http.request(n)}throw new Error("Invalid Image")},e.prototype.createLink=function(e){if(!this.savedSelection)throw new Error("Range out of the editor");if(e.urlNewTab){var o='<a href="'+e.urlLink+'" target="_blank">'+e.urlText+"</a>";if("Range"===document.getSelection().type)throw new Error("Only new links can be inserted. You cannot edit URL`s");l(this.savedSelection)&&this.insertHtml(o)}else{l(this.savedSelection)&&document.execCommand("createLink",!1,e.urlLink)}},e.prototype.insertColor=function(e,o){if(!this.savedSelection)throw new Error("Range out of the editor");l(this.savedSelection)&&this.checkSelection()&&("textColor"===o?document.execCommand("foreColor",!1,e):document.execCommand("hiliteColor",!1,e))},e.prototype.setFontSize=function(e){if(!this.savedSelection||!this.checkSelection())throw new Error("Range out of the editor");var o=this.deleteAndGetElement();if(o&&l(this.savedSelection))if(this.isNumeric(e)){var t='<span style="font-size: '+e+'px;">'+o+"</span>";this.insertHtml(t)}else{t='<span style="font-size: '+e+';">'+o+"</span>";this.insertHtml(t)}},e.prototype.setFontName=function(e){if(!this.savedSelection||!this.checkSelection())throw new Error("Range out of the editor");var o=this.deleteAndGetElement();if(o&&l(this.savedSelection))if(this.isNumeric(e)){var t='<span style="font-family: '+e+'px;">'+o+"</span>";this.insertHtml(t)}else{t='<span style="font-family: '+e+';">'+o+"</span>";this.insertHtml(t)}},e.prototype.insertHtml=function(e){if(!document.execCommand("insertHTML",!1,e))throw new Error("Unable to perform the operation")},e.prototype.isNumeric=function(e){return/^-{0,1}\d+$/.test(e)},e.prototype.deleteAndGetElement=function(){var e;return!!this.savedSelection&&(e=this.savedSelection.toString(),this.savedSelection.deleteContents(),e)},e.prototype.checkSelection=function(){if(0===this.savedSelection.toString().length)throw new Error("No Selection Made");return!0},e.prototype.checkTagSupportInBrowser=function(e){return!(document.createElement(e)instanceof HTMLUnknownElement)},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[{type:i.HttpClient}]},e}(),c=function(){function e(){this.message=new o.Subject}return e.prototype.getMessage=function(){return this.message.asObservable()},e.prototype.sendMessage=function(e){this.message.next(e),this.clearMessageIn(7e3)},e.prototype.clearMessageIn=function(e){var o=this;setTimeout(function(){o.message.next(undefined)},e)},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[]},e}(),m={editable:!0,spellcheck:!0,height:"auto",minHeight:"0",width:"auto",minWidth:"0",translate:"yes",enableToolbar:!0,showToolbar:!0,placeholder:"Enter text here...",imageEndPoint:"",toolbar:[["bold","italic","underline","strikeThrough","superscript","subscript"],["fontName","fontSize","color"],["justifyLeft","justifyCenter","justifyRight","justifyFull","indent","outdent"],["cut","copy","delete","removeFormat","undo","redo"],["paragraph","blockquote","removeBlockquote","horizontalLine","orderedList","unorderedList"],["link","unlink","image","video"]]},b=function(){function e(e,o,t){this._messageService=e,this._commandExecutor=o,this._renderer=t,this.resizer="stack",this.config=m,this.blur=new r.EventEmitter,this.focus=new r.EventEmitter,this.Utils=d}return e.prototype.onTextAreaFocus=function(){this.focus.emit("focus")},e.prototype.onEditorFocus=function(){this.textArea.nativeElement.focus()},e.prototype.onContentChange=function(e){"function"==typeof this.onChange&&(this.onChange(e),this.togglePlaceholder(e))},e.prototype.onTextAreaBlur=function(){this._commandExecutor.savedSelection=s(),"function"==typeof this.onTouched&&this.onTouched(),this.blur.emit("blur")},e.prototype.resizeTextArea=function(e){var o=parseInt(this.height,10);o+=e,this.height=o+"px",this.textArea.nativeElement.style.height=this.height},e.prototype.executeCommand=function(e){try{this._commandExecutor.execute(e)}catch(o){this._messageService.sendMessage(o.message)}},e.prototype.writeValue=function(e){this.togglePlaceholder(e),null!==e&&e!==undefined&&""!==e&&"<br>"!==e||(e=null),this.refreshView(e)},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.refreshView=function(e){var o=null===e?"":e;this._renderer.setProperty(this.textArea.nativeElement,"innerHTML",o)},e.prototype.togglePlaceholder=function(e){e&&"<br>"!==e&&""!==e?this._renderer.removeClass(this.ngxWrapper.nativeElement,"show-placeholder"):this._renderer.addClass(this.ngxWrapper.nativeElement,"show-placeholder")},e.prototype.getCollectiveParams=function(){return{editable:this.editable,spellcheck:this.spellcheck,placeholder:this.placeholder,translate:this.translate,height:this.height,minHeight:this.minHeight,width:this.width,minWidth:this.minWidth,enableToolbar:this.enableToolbar,showToolbar:this.showToolbar,imageEndPoint:this.imageEndPoint,toolbar:this.toolbar}},e.prototype.ngOnInit=function(){this.config=this.Utils.getEditorConfiguration(this.config,m,this.getCollectiveParams()),this.height=this.height||this.textArea.nativeElement.offsetHeight,this.executeCommand("enableObjectResizing")},e.decorators=[{type:r.Component,args:[{selector:"app-ngx-editor",template:'<div class="ngx-editor" id="ngxEditor" [style.width]="config[\'width\']" [style.minWidth]="config[\'minWidth\']" tabindex="0"\n  (focus)="onEditorFocus()">\n\n  <app-ngx-editor-toolbar [config]="config" (execute)="executeCommand($event)"></app-ngx-editor-toolbar>\n\n  \x3c!-- text area --\x3e\n  <div class="ngx-wrapper" #ngxWrapper>\n    <div class="ngx-editor-textarea" [attr.contenteditable]="config[\'editable\']" (input)="onContentChange($event.target.innerHTML)"\n      [attr.translate]="config[\'translate\']" [attr.spellcheck]="config[\'spellcheck\']" [style.height]="config[\'height\']"\n      [style.minHeight]="config[\'minHeight\']" [style.resize]="Utils?.canResize(resizer)" (focus)="onTextAreaFocus()"\n      (blur)="onTextAreaBlur()" #ngxTextArea></div>\n\n    <span class="ngx-editor-placeholder">{{ placeholder || config[\'placeholder\'] }}</span>\n  </div>\n\n  <app-ngx-editor-message></app-ngx-editor-message>\n  <app-ngx-grippie *ngIf="resizer === \'stack\'"></app-ngx-grippie>\n\n</div>\n',providers:[{provide:t.NG_VALUE_ACCESSOR,useExisting:r.forwardRef(function(){return e}),multi:!0}],styles:[".ngx-editor{position:relative}.ngx-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);display:block;color:#868e96;opacity:1}.ngx-editor .ngx-wrapper{position:relative}.ngx-editor .ngx-wrapper .ngx-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border:1px solid #ddd;background-color:transparent;overflow-x:hidden;overflow-y:auto;z-index:2;position:relative}.ngx-editor .ngx-wrapper .ngx-editor-textarea.focus,.ngx-editor .ngx-wrapper .ngx-editor-textarea:focus{outline:0}.ngx-editor .ngx-wrapper .ngx-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.ngx-editor .ngx-wrapper ::ng-deep p{margin-bottom:0}.ngx-editor .ngx-wrapper .ngx-editor-placeholder{display:none;position:absolute;top:0;padding:.5rem .8rem 1rem .9rem;z-index:1;color:#6c757d;opacity:1}.ngx-editor .ngx-wrapper.show-placeholder .ngx-editor-placeholder{display:block}"]}]}],e.ctorParameters=function(){return[{type:c},{type:g},{type:r.Renderer2}]},e.propDecorators={editable:[{type:r.Input}],spellcheck:[{type:r.Input}],placeholder:[{type:r.Input}],translate:[{type:r.Input}],height:[{type:r.Input}],minHeight:[{type:r.Input}],width:[{type:r.Input}],minWidth:[{type:r.Input}],toolbar:[{type:r.Input}],resizer:[{type:r.Input}],config:[{type:r.Input}],showToolbar:[{type:r.Input}],enableToolbar:[{type:r.Input}],imageEndPoint:[{type:r.Input}],blur:[{type:r.Output}],focus:[{type:r.Output}],textArea:[{type:r.ViewChild,args:["ngxTextArea"]}],ngxWrapper:[{type:r.ViewChild,args:["ngxWrapper"]}]},e}(),u=function(){function e(e){this._editorComponent=e,this.oldY=0,this.grabber=!1}return e.prototype.onMouseMove=function(e){this.grabber&&(this._editorComponent.resizeTextArea(e.clientY-this.oldY),this.oldY=e.clientY)},e.prototype.onMouseUp=function(e){this.grabber=!1},e.prototype.onResize=function(e,o){this.grabber=!0,this.oldY=e.clientY,e.preventDefault()},e.decorators=[{type:r.Component,args:[{selector:"app-ngx-grippie",template:'<div class="ngx-editor-grippie">\n  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="651.6 235 26 5"\n    width="26" height="5">\n    <g id="sprites">\n      <path d=" M 651.6 235 L 653.6 235 L 653.6 237 L 651.6 237 M 654.6 238 L 656.6 238 L 656.6 240 L 654.6 240 M 660.6 238 L 662.6 238 L 662.6 240 L 660.6 240 M 666.6 238 L 668.6 238 L 668.6 240 L 666.6 240 M 672.6 238 L 674.6 238 L 674.6 240 L 672.6 240 M 657.6 235 L 659.6 235 L 659.6 237 L 657.6 237 M 663.6 235 L 665.6 235 L 665.6 237 L 663.6 237 M 669.6 235 L 671.6 235 L 671.6 237 L 669.6 237 M 675.6 235 L 677.6 235 L 677.6 237 L 675.6 237"\n        fill="rgb(147,153,159)" />\n    </g>\n  </svg>\n</div>\n',styles:[".ngx-editor-grippie{height:9px;background-color:#f1f1f1;position:relative;text-align:center;cursor:s-resize;border:1px solid #ddd;border-top:transparent}.ngx-editor-grippie svg{position:absolute;top:1.5px;width:50%;right:25%}"]}]}],e.ctorParameters=function(){return[{type:b}]},e.propDecorators={onMouseMove:[{type:r.HostListener,args:["document:mousemove",["$event"]]}],onMouseUp:[{type:r.HostListener,args:["document:mouseup",["$event"]]}],onResize:[{type:r.HostListener,args:["mousedown",["$event"]]}]},e}(),f=function(){function e(e){var o=this;this._messageService=e,this.ngxMessage=undefined,this._messageService.getMessage().subscribe(function(e){return o.ngxMessage=e})}return e.prototype.clearMessage=function(){this.ngxMessage=undefined},e.decorators=[{type:r.Component,args:[{selector:"app-ngx-editor-message",template:'<div class="ngx-editor-message" *ngIf="ngxMessage" (dblclick)="clearMessage()">\n  {{ ngxMessage }}\n</div>\n',styles:[".ngx-editor-message{font-size:80%;background-color:#f1f1f1;border:1px solid #ddd;border-top:transparent;padding:0 .5rem .1rem;transition:.5s ease-in}"]}]}],e.ctorParameters=function(){return[{type:c}]},e}(),h=function(){function e(e,o,t,n){this._popOverConfig=e,this._formBuilder=o,this._messageService=t,this._commandExecutorService=n,this.uploadComplete=!0,this.updloadPercentage=0,this.isUploading=!1,this.selectedColorTab="textColor",this.fontName="",this.fontSize="",this.hexColor="",this.isImageUploader=!1,this.execute=new r.EventEmitter,this._popOverConfig.outsideClick=!0,this._popOverConfig.placement="bottom",this._popOverConfig.container="body"}return e.prototype.canEnableToolbarOptions=function(e){return p(e,this.config.toolbar)},e.prototype.triggerCommand=function(e){this.execute.emit(e)},e.prototype.buildUrlForm=function(){this.urlForm=this._formBuilder.group({urlLink:["",[t.Validators.required]],urlText:["",[t.Validators.required]],urlNewTab:[!0]})},e.prototype.insertLink=function(){try{this._commandExecutorService.createLink(this.urlForm.value)}catch(e){this._messageService.sendMessage(e.message)}this.buildUrlForm(),this.urlPopover.hide()},e.prototype.buildImageForm=function(){this.imageForm=this._formBuilder.group({imageUrl:["",[t.Validators.required]]})},e.prototype.buildVideoForm=function(){this.videoForm=this._formBuilder.group({videoUrl:["",[t.Validators.required]],height:[""],width:[""]})},e.prototype.onFileChange=function(e){var t=this;if(this.uploadComplete=!1,this.isUploading=!0,0<e.target.files.length){var o=e.target.files[0];try{this._commandExecutorService.uploadImage(o,this.config.imageEndPoint).subscribe(function(e){if(e.type&&(t.updloadPercentage=Math.round(100*e.loaded/e.total)),e instanceof i.HttpResponse){try{t._commandExecutorService.insertImage(e.body.url)}catch(o){t._messageService.sendMessage(o.message)}t.uploadComplete=!0,t.isUploading=!1}})}catch(n){this._messageService.sendMessage(n.message),this.uploadComplete=!0,this.isUploading=!1}}},e.prototype.insertImage=function(){try{this._commandExecutorService.insertImage(this.imageForm.value.imageUrl)}catch(e){this._messageService.sendMessage(e.message)}this.buildImageForm(),this.imagePopover.hide()},e.prototype.insertVideo=function(){try{this._commandExecutorService.insertVideo(this.videoForm.value)}catch(e){this._messageService.sendMessage(e.message)}this.buildVideoForm(),this.videoPopover.hide()},e.prototype.insertColor=function(e,o){try{this._commandExecutorService.insertColor(e,o)}catch(t){this._messageService.sendMessage(t.message)}this.colorPopover.hide()},e.prototype.setFontSize=function(e){try{this._commandExecutorService.setFontSize(e)}catch(o){this._messageService.sendMessage(o.message)}this.fontSizePopover.hide()},e.prototype.setFontName=function(e){try{this._commandExecutorService.setFontName(e)}catch(o){this._messageService.sendMessage(o.message)}this.fontSizePopover.hide()},e.prototype.ngOnInit=function(){this.buildUrlForm(),this.buildImageForm(),this.buildVideoForm()},e.decorators=[{type:r.Component,args:[{selector:"app-ngx-editor-toolbar",template:'<div class="ngx-toolbar" *ngIf="config[\'showToolbar\']">\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'bold\')" (click)="triggerCommand(\'bold\')"\n      title="Bold" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-bold" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'italic\')" (click)="triggerCommand(\'italic\')"\n      title="Italic" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-italic" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'underline\')" (click)="triggerCommand(\'underline\')"\n      title="Underline" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-underline" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'strikeThrough\')" (click)="triggerCommand(\'strikeThrough\')"\n      title="Strikethrough" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-strikethrough" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'superscript\')" (click)="triggerCommand(\'superscript\')"\n      title="Superscript" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-superscript" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'subscript\')" (click)="triggerCommand(\'subscript\')"\n      title="Subscript" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-subscript" aria-hidden="true"></i>\n    </button>\n  </div>\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'fontName\')" (click)="fontName = \'\'"\n      title="Font Family" [popover]="fontNameTemplate" #fontNamePopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-font" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'fontSize\')" (click)="fontSize = \'\'"\n      title="Font Size" [popover]="fontSizeTemplate" #fontSizePopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-text-height" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'color\')" (click)="hexColor = \'\'"\n      title="Color Picker" [popover]="insertColorTemplate" #colorPopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-tint" aria-hidden="true"></i>\n    </button>\n  </div>\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'justifyLeft\')" (click)="triggerCommand(\'justifyLeft\')"\n      title="Justify Left" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-align-left" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'justifyCenter\')" (click)="triggerCommand(\'justifyCenter\')"\n      title="Justify Center" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-align-center" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'justifyRight\')" (click)="triggerCommand(\'justifyRight\')"\n      title="Justify Right" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-align-right" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'justifyFull\')" (click)="triggerCommand(\'justifyFull\')"\n      title="Justify" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-align-justify" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'indent\')" (click)="triggerCommand(\'indent\')"\n      title="Indent" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-indent" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'outdent\')" (click)="triggerCommand(\'outdent\')"\n      title="Outdent" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-outdent" aria-hidden="true"></i>\n    </button>\n  </div>\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'cut\')" (click)="triggerCommand(\'cut\')"\n      title="Cut" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-scissors" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'copy\')" (click)="triggerCommand(\'copy\')"\n      title="Copy" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-files-o" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'delete\')" (click)="triggerCommand(\'delete\')"\n      title="Delete" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-trash" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'removeFormat\')" (click)="triggerCommand(\'removeFormat\')"\n      title="Clear Formatting" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-eraser" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'undo\')" (click)="triggerCommand(\'undo\')"\n      title="Undo" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-undo" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'redo\')" (click)="triggerCommand(\'redo\')"\n      title="Redo" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-repeat" aria-hidden="true"></i>\n    </button>\n  </div>\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'paragraph\')" (click)="triggerCommand(\'insertParagraph\')"\n      title="Paragraph" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-paragraph" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'blockquote\')" (click)="triggerCommand(\'blockquote\')"\n      title="Blockquote" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-quote-left" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'removeBlockquote\')" (click)="triggerCommand(\'removeBlockquote\')"\n      title="Remove Blockquote" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-quote-right" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'horizontalLine\')" (click)="triggerCommand(\'insertHorizontalRule\')"\n      title="Horizontal Line" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-minus" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'unorderedList\')" (click)="triggerCommand(\'insertUnorderedList\')"\n      title="Unordered List" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-list-ul" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'orderedList\')" (click)="triggerCommand(\'insertOrderedList\')"\n      title="Ordered List" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-list-ol" aria-hidden="true"></i>\n    </button>\n  </div>\n  <div class="ngx-toolbar-set">\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'link\')" (click)="buildUrlForm()"\n      [popover]="insertLinkTemplate" title="Insert Link" #urlPopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-link" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'unlink\')" (click)="triggerCommand(\'unlink\')"\n      title="Unlink" [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-chain-broken" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'image\')" (click)="buildImageForm()"\n      title="Insert Image" [popover]="insertImageTemplate" #imagePopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-picture-o" aria-hidden="true"></i>\n    </button>\n    <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions(\'video\')" (click)="buildVideoForm()"\n      title="Insert Video" [popover]="insertVideoTemplate" #videoPopover="bs-popover" containerClass="ngxePopover"\n      [disabled]="!config[\'enableToolbar\']">\n      <i class="fa fa-youtube-play" aria-hidden="true"></i>\n    </button>\n  </div>\n</div>\n\n\x3c!-- URL Popover template --\x3e\n<ng-template #insertLinkTemplate>\n  <div class="ngxe-popover extra-gt">\n    <form [formGroup]="urlForm" (ngSubmit)="urlForm.valid && insertLink()" autocomplete="off">\n      <div class="form-group">\n        <label for="urlInput" class="small">URL</label>\n        <input type="text" class="form-control-sm" id="URLInput" placeholder="URL" formControlName="urlLink" required>\n      </div>\n      <div class="form-group">\n        <label for="urlTextInput" class="small">Text</label>\n        <input type="text" class="form-control-sm" id="urlTextInput" placeholder="Text" formControlName="urlText"\n          required>\n      </div>\n      <div class="form-check">\n        <input type="checkbox" class="form-check-input" id="urlNewTab" formControlName="urlNewTab">\n        <label class="form-check-label" for="urlNewTab">Open in new tab</label>\n      </div>\n      <button type="submit" class="btn-primary btn-sm btn">Submit</button>\n    </form>\n  </div>\n</ng-template>\n\n\x3c!-- Image Uploader Popover template --\x3e\n<ng-template #insertImageTemplate>\n  <div class="ngxe-popover imgc-ctnr">\n    <div class="imgc-topbar btn-ctnr">\n      <button type="button" class="btn" [ngClass]="{active: isImageUploader}" (click)="isImageUploader = true">\n        <i class="fa fa-upload"></i>\n      </button>\n      <button type="button" class="btn" [ngClass]="{active: !isImageUploader}" (click)="isImageUploader = false">\n        <i class="fa fa-link"></i>\n      </button>\n    </div>\n    <div class="imgc-ctnt is-image">\n      <div *ngIf="isImageUploader; else insertImageLink"> </div>\n      <div *ngIf="!isImageUploader; else imageUploder"> </div>\n      <ng-template #imageUploder>\n        <div class="ngx-insert-img-ph">\n          <p *ngIf="uploadComplete">Choose Image</p>\n          <p *ngIf="!uploadComplete">\n            <span>Uploading Image</span>\n            <br>\n            <span>{{ updloadPercentage }} %</span>\n          </p>\n          <div class="ngxe-img-upl-frm">\n            <input type="file" (change)="onFileChange($event)" accept="image/*" [disabled]="isUploading" [style.cursor]="isUploading ? \'not-allowed\': \'allowed\'">\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #insertImageLink>\n        <form class="extra-gt" [formGroup]="imageForm" (ngSubmit)="imageForm.valid && insertImage()" autocomplete="off">\n          <div class="form-group">\n            <label for="imageURLInput" class="small">URL</label>\n            <input type="text" class="form-control-sm" id="imageURLInput" placeholder="URL" formControlName="imageUrl"\n              required>\n          </div>\n          <button type="submit" class="btn-primary btn-sm btn">Submit</button>\n        </form>\n      </ng-template>\n      <div class="progress" *ngIf="!uploadComplete">\n        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" [ngClass]="{\'bg-danger\': updloadPercentage<20, \'bg-warning\': updloadPercentage<50, \'bg-success\': updloadPercentage>=100}"\n          [style.width.%]="updloadPercentage"></div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n\n\x3c!-- Insert Video Popover template --\x3e\n<ng-template #insertVideoTemplate>\n  <div class="ngxe-popover imgc-ctnr">\n    <div class="imgc-topbar btn-ctnr">\n      <button type="button" class="btn active">\n        <i class="fa fa-link"></i>\n      </button>\n    </div>\n    <div class="imgc-ctnt is-image">\n      <form class="extra-gt" [formGroup]="videoForm" (ngSubmit)="videoForm.valid && insertVideo()" autocomplete="off">\n        <div class="form-group">\n          <label for="videoURLInput" class="small">URL</label>\n          <input type="text" class="form-control-sm" id="videoURLInput" placeholder="URL" formControlName="videoUrl"\n            required>\n        </div>\n        <div class="row form-group">\n          <div class="col">\n            <input type="text" class="form-control-sm" formControlName="height" placeholder="height (px)" pattern="[0-9]">\n          </div>\n          <div class="col">\n            <input type="text" class="form-control-sm" formControlName="width" placeholder="width (px)" pattern="[0-9]">\n          </div>\n          <label class="small">Height/Width</label>\n        </div>\n        <button type="submit" class="btn-primary btn-sm btn">Submit</button>\n      </form>\n    </div>\n  </div>\n</ng-template>\n\n\x3c!-- Insert color template --\x3e\n<ng-template #insertColorTemplate>\n  <div class="ngxe-popover imgc-ctnr">\n    <div class="imgc-topbar two-tabs">\n      <span (click)="selectedColorTab =\'textColor\'" [ngClass]="{active: selectedColorTab ===\'textColor\'}">Text</span>\n      <span (click)="selectedColorTab =\'backgroundColor\'" [ngClass]="{active: selectedColorTab ===\'backgroundColor\'}">Background</span>\n    </div>\n    <div class="imgc-ctnt is-color extra-gt1">\n      <form autocomplete="off">\n        <div class="form-group">\n          <label for="hexInput" class="small">Hex Color</label>\n          <input type="text" class="form-control-sm" id="hexInput" name="hexInput" maxlength="7" placeholder="HEX Color"\n            [(ngModel)]="hexColor" required>\n        </div>\n        <button type="button" class="btn-primary btn-sm btn" (click)="insertColor(hexColor, selectedColorTab)">Submit</button>\n      </form>\n    </div>\n  </div>\n</ng-template>\n\n\x3c!-- font size template --\x3e\n<ng-template #fontSizeTemplate>\n  <div class="ngxe-popover extra-gt1">\n    <form autocomplete="off">\n      <div class="form-group">\n        <label for="fontSize" class="small">Font Size</label>\n        <input type="text" class="form-control-sm" id="fontSize" name="fontSize" placeholder="Font size in px/rem"\n          [(ngModel)]="fontSize" required>\n      </div>\n      <button type="button" class="btn-primary btn-sm btn" (click)="setFontSize(fontSize)">Submit</button>\n    </form>\n  </div>\n</ng-template>\n\n\x3c!-- font family/name template --\x3e\n<ng-template #fontNameTemplate>\n  <div class="ngxe-popover extra-gt1">\n    <form autocomplete="off">\n      <div class="form-group">\n        <label for="fontSize" class="small">Font Size</label>\n        <input type="text" class="form-control-sm" id="fontSize" name="fontName" placeholder="Ex: \'Times New Roman\', Times, serif"\n          [(ngModel)]="fontName" required>\n      </div>\n      <button type="button" class="btn-primary btn-sm btn" (click)="setFontName(fontName)">Submit</button>\n    </form>\n  </div>\n</ng-template>\n',providers:[n.PopoverConfig],styles:['::ng-deep .ngxePopover.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}::ng-deep .ngxePopover.popover .arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}::ng-deep .ngxePopover.popover .arrow::after,::ng-deep .ngxePopover.popover .arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}::ng-deep .ngxePopover.popover .popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}::ng-deep .ngxePopover.popover .popover-header:empty{display:none}::ng-deep .ngxePopover.popover .popover-body{padding:.5rem .75rem;color:#212529}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top],::ng-deep .ngxePopover.popover.bs-popover-top{margin-bottom:.5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top] .arrow,::ng-deep .ngxePopover.popover.bs-popover-top .arrow{bottom:calc((.5rem + 1px) * -1)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-top .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-top .arrow::before{border-width:.5rem .5rem 0}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-top .arrow::before{bottom:0;border-top-color:rgba(0,0,0,.25)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=top] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-top .arrow::after{bottom:1px;border-top-color:#fff}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right],::ng-deep .ngxePopover.popover.bs-popover-right{margin-left:.5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right] .arrow,::ng-deep .ngxePopover.popover.bs-popover-right .arrow{left:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-right .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-right .arrow::before{border-width:.5rem .5rem .5rem 0}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-right .arrow::before{left:0;border-right-color:rgba(0,0,0,.25)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=right] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-right .arrow::after{left:1px;border-right-color:#fff}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom],::ng-deep .ngxePopover.popover.bs-popover-bottom{margin-top:.5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .arrow,::ng-deep .ngxePopover.popover.bs-popover-bottom .arrow{left:45%!important;top:calc((.5rem + 1px) * -1)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-bottom .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-bottom .arrow::before{border-width:0 .5rem .5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-bottom .arrow::before{top:0;border-bottom-color:rgba(0,0,0,.25)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-bottom .arrow::after{top:1px;border-bottom-color:#fff}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,::ng-deep .ngxePopover.popover.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left],::ng-deep .ngxePopover.popover.bs-popover-left{margin-right:.5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left] .arrow,::ng-deep .ngxePopover.popover.bs-popover-left .arrow{right:calc((.5rem + 1px) * -1);width:.5rem;height:1rem;margin:.3rem 0}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-left .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-left .arrow::before{border-width:.5rem 0 .5rem .5rem}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left] .arrow::before,::ng-deep .ngxePopover.popover.bs-popover-left .arrow::before{right:0;border-left-color:rgba(0,0,0,.25)}::ng-deep .ngxePopover.popover.bs-popover-auto[x-placement^=left] .arrow::after,::ng-deep .ngxePopover.popover.bs-popover-left .arrow::after{right:1px;border-left-color:#fff}::ng-deep .ngxePopover .btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}::ng-deep .ngxePopover .btn.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}::ng-deep .ngxePopover .btn:active,::ng-deep .ngxePopover .btn:focus{outline:0;box-shadow:none}::ng-deep .ngxePopover .btn.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}::ng-deep .ngxePopover .btn.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}::ng-deep .ngxePopover .btn:not(:disabled):not(.disabled){cursor:pointer}::ng-deep .ngxePopover form .form-group{margin-bottom:1rem}::ng-deep .ngxePopover form .form-group input{overflow:visible}::ng-deep .ngxePopover form .form-group .form-control-sm{width:100%;outline:0;border:none;border-bottom:1px solid #bdbdbd;border-radius:0;margin-bottom:1px;padding:.25rem .5rem;font-size:.875rem;line-height:1.5}::ng-deep .ngxePopover form .form-group.row{display:flex;flex-wrap:wrap;margin-left:0;margin-right:0}::ng-deep .ngxePopover form .form-group.row .col{flex-basis:0;flex-grow:1;max-width:100%;padding:0}::ng-deep .ngxePopover form .form-group.row .col:first-child{padding-right:15px}::ng-deep .ngxePopover form .form-check{position:relative;display:block;padding-left:1.25rem}::ng-deep .ngxePopover form .form-check .form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.ngx-toolbar{display:flex;flex-wrap:wrap;background-color:#f5f5f5;font-size:.8rem;padding:.2rem .2rem 0;border:1px solid #ddd}.ngx-toolbar .ngx-toolbar-set{display:flex;border-radius:5px;background-color:#fff;margin-right:.2rem;margin-bottom:.2rem}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button{background-color:transparent;padding:.4rem;min-width:2.5rem;border:1px solid #ddd;border-right:transparent}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button.focus,.ngx-toolbar .ngx-toolbar-set .ngx-editor-button:focus{outline:0}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button:last-child{border-right:1px solid #ddd;border-top-right-radius:5px;border-bottom-right-radius:5px}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ngx-toolbar .ngx-toolbar-set .ngx-editor-button:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}::ng-deep .popover{border-top-right-radius:0;border-top-left-radius:0}::ng-deep .ngxe-popover{min-width:15rem;white-space:nowrap}::ng-deep .ngxe-popover .extra-gt,::ng-deep .ngxe-popover.extra-gt{padding-top:.5rem!important}::ng-deep .ngxe-popover .extra-gt1,::ng-deep .ngxe-popover.extra-gt1{padding-top:.75rem!important}::ng-deep .ngxe-popover .extra-gt2,::ng-deep .ngxe-popover.extra-gt2{padding-top:1rem!important}::ng-deep .ngxe-popover .form-group label{display:none;margin:0}::ng-deep .ngxe-popover .form-group .form-control-sm{width:100%;outline:0;border:none;border-bottom:1px solid #bdbdbd;border-radius:0;margin-bottom:1px;padding-left:0;padding-right:0}::ng-deep .ngxe-popover .form-group .form-control-sm:active,::ng-deep .ngxe-popover .form-group .form-control-sm:focus{border-bottom:2px solid #1e88e5;box-shadow:none;margin-bottom:0}::ng-deep .ngxe-popover .form-group .form-control-sm.ng-dirty.ng-invalid:not(.ng-pristine){border-bottom:2px solid red}::ng-deep .ngxe-popover .form-check{margin-bottom:1rem}::ng-deep .ngxe-popover .btn:focus{box-shadow:none!important}::ng-deep .ngxe-popover.imgc-ctnr{margin:-.5rem -.75rem}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px 1px rgba(0,0,0,.16);border-bottom:0}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.btn-ctnr button{background-color:transparent;border-radius:0}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.btn-ctnr button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.btn-ctnr button.active{color:#007bff;transition:.2s}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.two-tabs span{width:50%;display:inline-flex;justify-content:center;padding:.4rem 0;margin:0 -1px 2px}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.two-tabs span:hover{cursor:pointer}::ng-deep .ngxe-popover.imgc-ctnr .imgc-topbar.two-tabs span.active{margin-bottom:-2px;border-bottom:2px solid #007bff;color:#007bff}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt{padding:.5rem}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image .progress{height:.5rem;margin:.5rem -.5rem -.6rem}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image p{margin:0}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image .ngx-insert-img-ph{border:2px dashed #bdbdbd;padding:1.8rem 0;position:relative;letter-spacing:1px;text-align:center}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image .ngx-insert-img-ph:hover{background:#ebebeb}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image .ngx-insert-img-ph .ngxe-img-upl-frm{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;z-index:2147483640;overflow:hidden;margin:0;padding:0;width:100%}::ng-deep .ngxe-popover.imgc-ctnr .imgc-ctnt.is-image .ngx-insert-img-ph .ngxe-img-upl-frm input{cursor:pointer;position:absolute;right:0;top:0;bottom:0;margin:0}']}]}],e.ctorParameters=function(){return[{type:n.PopoverConfig},{type:t.FormBuilder},{type:c},{type:g}]},e.propDecorators={config:[{type:r.Input}],urlPopover:[{type:r.ViewChild,args:["urlPopover"]}],imagePopover:[{type:r.ViewChild,args:["imagePopover"]}],videoPopover:[{type:r.ViewChild,args:["videoPopover"]}],fontSizePopover:[{type:r.ViewChild,args:["fontSizePopover"]}],colorPopover:[{type:r.ViewChild,args:["colorPopover"]}],execute:[{type:r.Output}]},e}(),v=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[a.CommonModule,t.FormsModule,t.ReactiveFormsModule,n.PopoverModule.forRoot()],declarations:[b,u,f,h],exports:[b],providers:[g,c]}]}],e}();e.NgxEditorModule=v,e.MaxLengthValidator=function w(t,n){return function(e){var o=(new DOMParser).parseFromString(e.value,"text/html").body.innerText||"";return n.excludeLineBreaks&&(o=o.replace(/(\r\n\t|\n|\r\t)/gm,"")),n.concatWhiteSpaces&&(o=o.replace(/(\s\s+)/gm," ")),n.excludeWhiteSpaces&&(o=o.replace(/(\s)/gm,"")),o.length>t?{ngxEditor:{allowedLength:t,textLength:o.length}}:null}},e.ɵc=g,e.ɵb=c,e.ɵe=f,e.ɵf=h,e.ɵa=b,e.ɵd=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-editor.umd.min.js.map