@joniras/ngx-editor2
Version:
WYSIWYG Editor for Angular 8+
15 lines (13 loc) • 53 kB
JavaScript
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("ngx-bootstrap/popover"),require("@angular/common/http"),require("rxjs"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/free-regular-svg-icons"),require("@fortawesome/free-brands-svg-icons"),require("@fortawesome/angular-fontawesome")):"function"==typeof define&&define.amd?define("@joniras/ngx-editor2",["exports","@angular/core","@angular/common","@angular/forms","ngx-bootstrap/popover","@angular/common/http","rxjs","@fortawesome/free-solid-svg-icons","@fortawesome/free-regular-svg-icons","@fortawesome/free-brands-svg-icons","@fortawesome/angular-fontawesome"],o):o(((e=e||self).joniras=e.joniras||{},e.joniras["ngx-editor2"]={}),e.ng.core,e.ng.common,e.ng.forms,e.popover,e.ng.common.http,e.rxjs,e.freeSolidSvgIcons,e.freeRegularSvgIcons,e.freeBrandsSvgIcons,e.angularFontawesome)}(this,(function(e,o,t,n,r,i,a,l,p,s,c){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */function g(e,o,t,n){var r,i=arguments.length,a=i<3?o:null===n?n=Object.getOwnPropertyDescriptor(o,t):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,o,t,n);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(i<3?r(a):i>3?r(o,t,a):r(o,t))||a);return i>3&&a&&Object.defineProperty(o,t,a),a}function d(e,o){return!!e&&(0===o.length||!!o.filter((function(o){return-1!==o.indexOf(e)})).length)}function b(){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 u(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 m=Object.freeze({__proto__:null,canEnableToolbarOptions:d,getEditorConfiguration:function(e,o,t){for(var n in o)n&&(void 0!==t[n]&&(e[n]=t[n]),e.hasOwnProperty(n)||(e[n]=o[n]));return e},canResize:function(e){return"basic"===e&&"vertical"},saveSelection:b,restoreSelection:u}),f=function(){function e(e){this._http=e,this.savedSelection=void 0}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"),"h1"===e&&document.execCommand("formatBlock",!1,"h1"),"h2"===e&&document.execCommand("formatBlock",!1,"h2"),"h3"===e&&document.execCommand("formatBlock",!1,"h3"),"clear"===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&&u(this.savedSelection)){var o=document.createElement("img");if(o.src=e,o.style.width="auto",!this.insertHtml(o.outerHTML))throw new Error("Invalid URL")}},e.prototype.insertVideo=function(e){if(!this.savedSelection)throw new Error("Range out of the editor");if(e&&u(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");u(this.savedSelection)&&this.insertHtml(o)}else{u(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");u(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&&u(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&&u(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){var o=document.execCommand("insertHTML",!1,e);if(!o)throw new Error("Unable to perform the operation");return o},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.ctorParameters=function(){return[{type:i.HttpClient}]},e=g([o.Injectable()],e)}(),h=function(){function e(){this.message=new a.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(void 0)}),e)},e=g([o.Injectable()],e)}(),v={editable:!0,spellcheck:!0,height:"auto",minHeight:"0",width:"auto",minWidth:"0",translate:"yes",enableToolbar:!0,showToolbar:!0,placeholder:"Enter text here...",imageEndPoint:"",toolbar:[["h1","h2","h3","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"]],toolbarTitle:{bold:"Bold",italic:"Italic",underline:"Underline",strikeThrough:"strikeThrough",superscript:"Superscript",subscript:"Subscript",fontName:"Font Family",fontSize:"Font Size",color:"Color Picker",justifyLeft:"Justify Left",justifyCenter:"Justify Center",justifyRight:"Justify Right",justifyFull:"Justify Full",indent:"Indent",outdent:"Outdent",cut:"Cut",copy:"Copy",delete:"Delete",removeFormat:"Clear Formatting",undo:"Undo",redo:"Redo",paragraph:"Paragraph",blockquote:"Blockquote",removeBlockquote:"Remove Blockquote",horizontalLine:"Horizontal Line",orderedList:"Ordered List",unorderedList:"Color Picker",link:"Insert Link",URLInput:"URL",urlTextInput:"Text",urlNewTab:"Open in new tab",linkSubmit:"Submit",unlink:"Unlink",image:"Insert Image",chooseImage:"Choose Image",uploadingimage:"Uploading Image",imageURLInput:"URL",imageSubmit:"Submit",video:"Insert Video",videoURLInput:"URL",height:"height (px)",width:"width (px)",heightwidth:"Height/Width",videoSubmit:"Submit",textColor:"Text",backgroundColor:"Background",hexInput:"Hex Color",hexSubmit:"Submit",fontSubmit:"Submit",example:"Ex:"}},x=function(){function e(e,t,n){this._messageService=e,this._commandExecutor=t,this._renderer=n,this.resizer="stack",this.config=v,this.blur=new o.EventEmitter,this.focus=new o.EventEmitter,this.uploadImage=new o.EventEmitter,this.Utils=m}var t;return t=e,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=b(),"function"==typeof this.onTouched&&this.onTouched(),this.blur.emit("blur")},e.prototype.onUploadImage=function(e){this.uploadImage.emit(e)},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(e){this._messageService.sendMessage(e.message)}},e.prototype.writeValue=function(e){this.togglePlaceholder(e),null!=e&&""!==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,v,this.getCollectiveParams()),this.height=this.height||this.textArea.nativeElement.offsetHeight,this.executeCommand("enableObjectResizing")},e.ctorParameters=function(){return[{type:h},{type:f},{type:o.Renderer2}]},g([o.Input()],e.prototype,"editable",void 0),g([o.Input()],e.prototype,"spellcheck",void 0),g([o.Input()],e.prototype,"placeholder",void 0),g([o.Input()],e.prototype,"translate",void 0),g([o.Input()],e.prototype,"height",void 0),g([o.Input()],e.prototype,"minHeight",void 0),g([o.Input()],e.prototype,"width",void 0),g([o.Input()],e.prototype,"minWidth",void 0),g([o.Input()],e.prototype,"toolbar",void 0),g([o.Input()],e.prototype,"resizer",void 0),g([o.Input()],e.prototype,"config",void 0),g([o.Input()],e.prototype,"showToolbar",void 0),g([o.Input()],e.prototype,"enableToolbar",void 0),g([o.Input()],e.prototype,"imageEndPoint",void 0),g([o.Output()],e.prototype,"blur",void 0),g([o.Output()],e.prototype,"focus",void 0),g([o.Output()],e.prototype,"uploadImage",void 0),g([o.ViewChild("ngxTextArea",{static:!0})],e.prototype,"textArea",void 0),g([o.ViewChild("ngxWrapper",{static:!0})],e.prototype,"ngxWrapper",void 0),e=t=g([o.Component({selector:"ngx-text-editor",template:'<div class="ngx-text-editor"\r\n id="ngxTextEditor"\r\n [style.width]="config[\'width\']"\r\n [style.minWidth]="config[\'minWidth\']"\r\n tabindex="0"\r\n (focus)="onEditorFocus()">\r\n\r\n <ngx-text-editor-toolbar [config]="config"\r\n (execute)="executeCommand($event)"\r\n (uploadImage)="onUploadImage($event)"></ngx-text-editor-toolbar>\r\n\r\n \x3c!-- text area --\x3e\r\n <div #ngxWrapper\r\n class="ngx-wrapper">\r\n <div #ngxTextArea\r\n class="ngx-text-editor-textarea"\r\n [attr.contenteditable]="config[\'editable\']"\r\n (input)="onContentChange($event.target.innerHTML)"\r\n [attr.translate]="config[\'translate\']"\r\n [attr.spellcheck]="config[\'spellcheck\']"\r\n [style.height]="config[\'height\']"\r\n [style.minHeight]="config[\'minHeight\']"\r\n [style.resize]="Utils?.canResize(resizer)"\r\n (focus)="onTextAreaFocus()"\r\n (blur)="onTextAreaBlur()"></div>\r\n\r\n <span class="ngx-text-editor-placeholder">\r\n {{ placeholder || config[\'placeholder\'] }}\r\n </span>\r\n </div>\r\n\r\n <ngx-text-editor-message></ngx-text-editor-message>\r\n\r\n <ngx-grippie *ngIf="resizer === \'stack\'"></ngx-grippie>\r\n</div>\r\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:o.forwardRef((function(){return t})),multi:!0}],styles:[".ngx-text-editor{position:relative}.ngx-text-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);display:block;color:#868e96;opacity:1}.ngx-text-editor .ngx-wrapper{position:relative}.ngx-text-editor .ngx-wrapper .ngx-text-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-text-editor .ngx-wrapper .ngx-text-editor-textarea.focus,.ngx-text-editor .ngx-wrapper .ngx-text-editor-textarea:focus{outline:0}.ngx-text-editor .ngx-wrapper .ngx-text-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.ngx-text-editor .ngx-wrapper .ngx-text-editor-textarea::before{content:normal!important}.ngx-text-editor .ngx-wrapper ::ng-deep p{margin-bottom:0}.ngx-text-editor .ngx-wrapper .ngx-text-editor-placeholder{display:none;position:absolute;top:0;padding:.5rem .8rem 1rem .9rem;z-index:1;color:#6c757d;opacity:1}.ngx-text-editor .ngx-wrapper.show-placeholder .ngx-text-editor-placeholder{display:block}"]})],e)}(),y=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.ctorParameters=function(){return[{type:x}]},g([o.HostListener("document:mousemove",["$event"])],e.prototype,"onMouseMove",null),g([o.HostListener("document:mouseup",["$event"])],e.prototype,"onMouseUp",null),g([o.HostListener("mousedown",["$event"])],e.prototype,"onResize",null),e=g([o.Component({selector:"ngx-grippie",template:'<div class="ngx-text-editor-grippie">\r\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"\r\n width="26" height="5">\r\n <g id="sprites">\r\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"\r\n fill="rgb(147,153,159)" />\r\n </g>\r\n </svg>\r\n</div>\r\n',styles:[".ngx-text-editor-grippie{height:9px;background-color:#f1f1f1;position:relative;text-align:center;cursor:s-resize;border:1px solid #ddd;border-top:transparent}.ngx-text-editor-grippie svg{position:absolute;top:1.5px;width:50%;right:25%}"]})],e)}(),w=function(){function e(e){var o=this;this._messageService=e,this.ngxMessage=void 0,this._messageService.getMessage().subscribe((function(e){return o.ngxMessage=e}))}return e.prototype.clearMessage=function(){this.ngxMessage=void 0},e.ctorParameters=function(){return[{type:h}]},e=g([o.Component({selector:"ngx-text-editor-message",template:'<div class="ngx-text-editor-message" *ngIf="ngxMessage" (dblclick)="clearMessage()">\r\n {{ ngxMessage }}\r\n</div>\r\n',styles:[".ngx-text-editor-message{font-size:80%;background-color:#f1f1f1;border:1px solid #ddd;border-top:transparent;padding:0 .5rem .1rem;transition:.5s ease-in}"]})],e)}(),T=function(){function e(e,t,n,r){this._popOverConfig=e,this._formBuilder=t,this._messageService=n,this._commandExecutorService=r,this.uploadComplete=!0,this.updloadPercentage=0,this.isUploading=!1,this.selectedColorTab="textColor",this.fontName="",this.fontSize="",this.hexColor="",this.isImageUploader=!1,this.wasH1Pressed=!1,this.icons={heading:l.faHeading,bold:l.faBold,italic:l.faItalic,underline:l.faUnderline,strikethrough:l.faStrikethrough,superscript:l.faSuperscript,subscript:l.faSubscript,font:l.faFont,textheight:l.faTextHeight,tint:l.faTint,alignleft:l.faAlignLeft,aligncenter:l.faAlignCenter,alignright:l.faAlignRight,alignjustify:l.faAlignJustify,indent:l.faIndent,outdent:l.faOutdent,scissors:l.faCut,fileso:p.faCopy,trash:p.faTrashAlt,eraser:l.faEraser,undo:l.faUndo,repeat:l.faRedo,paragraph:l.faParagraph,quoteleft:l.faQuoteLeft,quoteright:l.faQuoteRight,minus:l.faMinus,listul:l.faListUl,listol:l.faListOl,link:l.faLink,chainbroken:l.faUnlink,pictureo:p.faImage,youtubeplay:s.faYoutube,upload:l.faFileUpload},this.execute=new o.EventEmitter,this.uploadImage=new o.EventEmitter,this._popOverConfig.outsideClick=!0,this._popOverConfig.placement="bottom",this._popOverConfig.container="body"}return e.prototype.canEnableToolbarOptions=function(e){return d(e,this.config.toolbar)},e.prototype.triggerCommand=function(e){this.execute.emit(e)},e.prototype.buildUrlForm=function(){this.urlForm=this._formBuilder.group({urlLink:["",[n.Validators.required]],urlText:["",[n.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:["",[n.Validators.required]]})},e.prototype.buildVideoForm=function(){this.videoForm=this._formBuilder.group({videoUrl:["",[n.Validators.required]],height:[""],width:[""]})},e.prototype.onFileChange=function(e){var o=this;if(this.uploadComplete=!1,this.isUploading=!0,e.target.files.length>0){var t=e.target.files[0];if(this.config.imageEndPoint)try{this._commandExecutorService.uploadImage(t,this.config.imageEndPoint).subscribe((function(e){if(e.type&&(o.updloadPercentage=Math.round(100*e.loaded/e.total)),e instanceof i.HttpResponse){try{o._commandExecutorService.insertImage(e.body.url)}catch(e){o._messageService.sendMessage(e.message)}o.uploadComplete=!0,o.isUploading=!1}}))}catch(e){this._messageService.sendMessage(e.message),this.uploadComplete=!0,this.isUploading=!1}else this.uploadImage.emit(t),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(e){this._messageService.sendMessage(e.message)}this.colorPopover.hide()},e.prototype.setFontSize=function(e){try{this._commandExecutorService.setFontSize(e)}catch(e){this._messageService.sendMessage(e.message)}this.fontSizePopover.hide()},e.prototype.setFontName=function(e){try{this._commandExecutorService.setFontName(e)}catch(e){this._messageService.sendMessage(e.message)}this.fontSizePopover.hide()},e.prototype.ngOnInit=function(){this.buildUrlForm(),this.buildImageForm(),this.buildVideoForm()},e.prototype.toggleHeading=function(e){this.wasH1Pressed?this.execute.emit("clear"):this.execute.emit(e),this.wasH1Pressed=!this.wasH1Pressed},e.ctorParameters=function(){return[{type:r.PopoverConfig},{type:n.FormBuilder},{type:h},{type:f}]},g([o.Input()],e.prototype,"config",void 0),g([o.ViewChild("urlPopover",{static:!0})],e.prototype,"urlPopover",void 0),g([o.ViewChild("imagePopover",{static:!0})],e.prototype,"imagePopover",void 0),g([o.ViewChild("videoPopover",{static:!0})],e.prototype,"videoPopover",void 0),g([o.ViewChild("fontSizePopover",{static:!0})],e.prototype,"fontSizePopover",void 0),g([o.ViewChild("colorPopover",{static:!0})],e.prototype,"colorPopover",void 0),g([o.Output()],e.prototype,"execute",void 0),g([o.Output()],e.prototype,"uploadImage",void 0),e=g([o.Component({selector:"ngx-text-editor-toolbar",template:'<div class="ngx-toolbar" *ngIf="config[\'showToolbar\']">\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'h1\')" (click)="toggleHeading(\'h1\')"\r\n title="H1" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.heading"></fa-icon><span class="headerNumber">1</span>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'h2\')" (click)="toggleHeading(\'h2\')"\r\n title="H2" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.heading"></fa-icon><span class="headerNumber">2</span>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'h3\')" (click)="toggleHeading(\'h3\')"\r\n title="H3" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.heading"></fa-icon><span class="headerNumber">3</span>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'bold\')" (click)="triggerCommand(\'bold\')"\r\n title="{{config.toolbarTitle[\'bold\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.bold"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'italic\')" (click)="triggerCommand(\'italic\')"\r\n title="{{config.toolbarTitle[\'italic\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.italic"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'underline\')" (click)="triggerCommand(\'underline\')"\r\n title="{{config.toolbarTitle[\'underline\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.underline"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'strikeThrough\')" (click)="triggerCommand(\'strikeThrough\')"\r\n title="{{config.toolbarTitle[\'strikeThrough\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.strikethrough"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'superscript\')" (click)="triggerCommand(\'superscript\')"\r\n title="{{config.toolbarTitle[\'superscript\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.superscript"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'subscript\')" (click)="triggerCommand(\'subscript\')"\r\n title="{{config.toolbarTitle[\'subscript\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.subscript"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'fontName\')" (click)="fontName = \'\'"\r\n title="{{config.toolbarTitle[\'fontName\']}}" [popover]="fontNameTemplate" #fontNamePopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.font"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'fontSize\')" (click)="fontSize = \'\'"\r\n title="{{config.toolbarTitle[\'fontSize\']}}" [popover]="fontSizeTemplate" #fontSizePopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.textheight"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'color\')" (click)="hexColor = \'\'"\r\n title="{{config.toolbarTitle[\'color\']}}" [popover]="insertColorTemplate" #colorPopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.tint"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'justifyLeft\')" (click)="triggerCommand(\'justifyLeft\')"\r\n title="{{config.toolbarTitle[\'justifyLeft\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.alignleft"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'justifyCenter\')" (click)="triggerCommand(\'justifyCenter\')"\r\n title="{{config.toolbarTitle[\'justifyCenter\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.aligncenter"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'justifyRight\')" (click)="triggerCommand(\'justifyRight\')"\r\n title="{{config.toolbarTitle[\'justifyRight\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.alignright"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'justifyFull\')" (click)="triggerCommand(\'justifyFull\')"\r\n title="{{config.toolbarTitle[\'justifyFull\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.alignjustify"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'indent\')" (click)="triggerCommand(\'indent\')"\r\n title="{{config.toolbarTitle[\'indent\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.indent"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'outdent\')" (click)="triggerCommand(\'outdent\')"\r\n title="{{config.toolbarTitle[\'outdent\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.outdent"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'cut\')" (click)="triggerCommand(\'cut\')"\r\n title="{{config.toolbarTitle[\'cut\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.scissors"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'copy\')" (click)="triggerCommand(\'copy\')"\r\n title="{{config.toolbarTitle[\'copy\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.fileso"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'delete\')" (click)="triggerCommand(\'delete\')"\r\n title="{{config.toolbarTitle[\'delete\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.trash"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'removeFormat\')" (click)="triggerCommand(\'removeFormat\')"\r\n title="{{config.toolbarTitle[\'removeFormat\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.eraser"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'undo\')" (click)="triggerCommand(\'undo\')"\r\n title="{{config.toolbarTitle[\'undo\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.undo"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'redo\')" (click)="triggerCommand(\'redo\')"\r\n title="{{config.toolbarTitle[\'redo\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.repeat"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'paragraph\')" (click)="triggerCommand(\'insertParagraph\')"\r\n title="{{config.toolbarTitle[\'paragraph\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.paragraph"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'blockquote\')" (click)="triggerCommand(\'blockquote\')"\r\n title="{{config.toolbarTitle[\'blockquote\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.quoteleft"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'removeBlockquote\')" (click)="triggerCommand(\'removeBlockquote\')"\r\n title="{{config.toolbarTitle[\'removeBlockquote\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.quoteright"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'horizontalLine\')" (click)="triggerCommand(\'insertHorizontalRule\')"\r\n title="{{config.toolbarTitle[\'horizontalLine\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.minus"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'unorderedList\')" (click)="triggerCommand(\'insertUnorderedList\')"\r\n title="{{config.toolbarTitle[\'unorderedList\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.listul"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'orderedList\')" (click)="triggerCommand(\'insertOrderedList\')"\r\n title="{{config.toolbarTitle[\'orderedList\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.listol"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="ngx-toolbar-set">\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'link\')" (click)="buildUrlForm()"\r\n [popover]="insertLinkTemplate" title="{{config.toolbarTitle[\'link\']}}" #urlPopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.link"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'unlink\')" (click)="triggerCommand(\'unlink\')"\r\n title="{{config.toolbarTitle[\'unlink\']}}" [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.chainbroken"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'image\')" (click)="buildImageForm()"\r\n title="{{config.toolbarTitle[\'image\']}}" [popover]="insertImageTemplate" #imagePopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.pictureo"></fa-icon>\r\n </button>\r\n <button type="button" class="ngx-text-editor-button" *ngIf="canEnableToolbarOptions(\'video\')" (click)="buildVideoForm()"\r\n title="{{config.toolbarTitle[\'video\']}}" [popover]="insertVideoTemplate" #videoPopover="bs-popover" containerClass="ngxePopover"\r\n [disabled]="!config[\'enableToolbar\']">\r\n <fa-icon [icon]="icons.youtubeplay"></fa-icon>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n\x3c!-- URL Popover template --\x3e\r\n<ng-template #insertLinkTemplate>\r\n <div class="ngxe-popover extra-gt">\r\n <form [formGroup]="urlForm" (ngSubmit)="urlForm.valid && insertLink()" autocomplete="off">\r\n <div class="form-group">\r\n <label for="urlInput" class="small">{{config.toolbarTitle[\'URLInput\']}}</label>\r\n <input type="text" class="form-control-sm" id="URLInput" placeholder="{{config.toolbarTitle[\'URLInput\']}}" formControlName="urlLink" required>\r\n </div>\r\n <div class="form-group">\r\n <label for="urlTextInput" class="small">{{config.toolbarTitle[\'urlTextInput\']}}</label>\r\n <input type="text" class="form-control-sm" id="urlTextInput" placeholder="{{config.toolbarTitle[\'urlTextInput\']}}" formControlName="urlText"\r\n required>\r\n </div>\r\n <div class="form-check">\r\n <input type="checkbox" class="form-check-input" id="urlNewTab" formControlName="urlNewTab">\r\n <label class="form-check-label" for="urlNewTab">{{config.toolbarTitle[\'urlNewTab\']}}</label>\r\n </div>\r\n <button type="submit" class="btn-primary btn-sm btn">{{config.toolbarTitle[\'linkSubmit\']}}</button>\r\n </form>\r\n </div>\r\n</ng-template>\r\n\r\n\x3c!-- Image Uploader Popover template --\x3e\r\n<ng-template #insertImageTemplate>\r\n <div class="ngxe-popover imgc-ctnr">\r\n <div class="imgc-topbar btn-ctnr">\r\n <button type="button" class="btn" [ngClass]="{active: isImageUploader}" (click)="isImageUploader = true">\r\n <fa-icon [icon]="icons.upload"></fa-icon>\r\n </button>\r\n <button type="button" class="btn" [ngClass]="{active: !isImageUploader}" (click)="isImageUploader = false">\r\n <fa-icon [icon]="icons.link"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="imgc-ctnt is-image">\r\n <div *ngIf="isImageUploader; else insertImageLink"> </div>\r\n <div *ngIf="!isImageUploader; else imageUploder"> </div>\r\n <ng-template #imageUploder>\r\n <div class="ngx-insert-img-ph">\r\n <p *ngIf="uploadComplete">{{config.toolbarTitle[\'chooseImage\']}}</p>\r\n <p *ngIf="!uploadComplete">\r\n <span>{{config.toolbarTitle[\'uploadingimage\']}}</span>\r\n <br>\r\n <span>{{ updloadPercentage }} %</span>\r\n </p>\r\n <div class="ngxe-img-upl-frm">\r\n <input type="file" (change)="onFileChange($event)" accept="image/*" [disabled]="isUploading" [style.cursor]="isUploading ? \'not-allowed\': \'allowed\'">\r\n </div>\r\n </div>\r\n </ng-template>\r\n <ng-template #insertImageLink>\r\n <form class="extra-gt" [formGroup]="imageForm" (ngSubmit)="imageForm.valid && insertImage()" autocomplete="off">\r\n <div class="form-group">\r\n <label for="imageURLInput" class="small">{{config.toolbarTitle[\'imageURLInput\']}}</label>\r\n <input type="text" class="form-control-sm" id="imageURLInput" placeholder="{{config.toolbarTitle[\'imageURLInput\']}}" formControlName="imageUrl"\r\n required>\r\n </div>\r\n <button type="submit" class="btn-primary btn-sm btn">{{config.toolbarTitle[\'imageSubmit\']}}</button>\r\n </form>\r\n </ng-template>\r\n <div class="progress" *ngIf="!uploadComplete">\r\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}"\r\n [style.width.%]="updloadPercentage"></div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\x3c!-- Insert Video Popover template --\x3e\r\n<ng-template #insertVideoTemplate>\r\n <div class="ngxe-popover imgc-ctnr">\r\n <div class="imgc-topbar btn-ctnr">\r\n <button type="button" class="btn active">\r\n <fa-icon [icon]="icons.link"></fa-icon>\r\n </button>\r\n </div>\r\n <div class="imgc-ctnt is-image">\r\n <form class="extra-gt" [formGroup]="videoForm" (ngSubmit)="videoForm.valid && insertVideo()" autocomplete="off">\r\n <div class="form-group">\r\n <label for="videoURLInput" class="small">{{config.toolbarTitle[\'videoURLInput\']}}</label>\r\n <input type="text" class="form-control-sm" id="videoURLInput" placeholder="{{config.toolbarTitle[\'videoURLInput\']}}" formControlName="videoUrl"\r\n required>\r\n </div>\r\n <div class="row form-group">\r\n <div class="col">\r\n <input type="text" class="form-control-sm" formControlName="height" placeholder="{{config.toolbarTitle[\'height\']}}" pattern="[0-9]">\r\n </div>\r\n <div class="col">\r\n <input type="text" class="form-control-sm" formControlName="width" placeholder="{{config.toolbarTitle[\'width\']}}" pattern="[0-9]">\r\n </div>\r\n <label class="small">{{config.toolbarTitle[\'heightwidth\']}}</label>\r\n </div>\r\n <button type="submit" class="btn-primary btn-sm btn">{{config.toolbarTitle[\'videoSubmit\']}}</button>\r\n </form>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\x3c!-- Insert color template --\x3e\r\n<ng-template #insertColorTemplate>\r\n <div class="ngxe-popover imgc-ctnr">\r\n <div class="imgc-topbar two-tabs">\r\n <span (click)="selectedColorTab =\'textColor\'" [ngClass]="{active: selectedColorTab ===\'textColor\'}">{{config.toolbarTitle[\'textColor\']}}</span>\r\n <span (click)="selectedColorTab =\'backgroundColor\'" [ngClass]="{active: selectedColorTab ===\'backgroundColor\'}">{{config.toolbarTitle[\'backgroundColor\']}}</span>\r\n </div>\r\n <div class="imgc-ctnt is-color extra-gt1">\r\n <form autocomplete="off">\r\n <div class="form-group">\r\n <label for="hexInput" class="small">{{config.toolbarTitle[\'hexInput\']}}</label>\r\n <input type="text" class="form-control-sm" id="hexInput" name="hexInput" maxlength="7" placeholder="{{config.toolbarTitle[\'hexInput\']}}"\r\n [(ngModel)]="hexColor" required>\r\n </div>\r\n <button type="button" class="btn-primary btn-sm btn" (click)="insertColor(hexColor, selectedColorTab)">{{config.toolbarTitle[\'hexSubmit\']}}</button>\r\n </form>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\x3c!-- font size template --\x3e\r\n<ng-template #fontSizeTemplate>\r\n <div class="ngxe-popover extra-gt1">\r\n <form autocomplete="off">\r\n <div class="form-group">\r\n <label for="fontSize" class="small">{{config.toolbarTitle[\'fontSize\']}}</label>\r\n <input type="text" class="form-control-sm" id="fontSize" name="fontSize" placeholder="{{config.toolbarTitle[\'fontSize\']}} (px/rem)"\r\n [(ngModel)]="fontSize" required>\r\n </div>\r\n <button type="button" class="btn-primary btn-sm btn" (click)="setFontSize(fontSize)">{{config.toolbarTitle[\'fontSubmit\']}}</button>\r\n </form>\r\n </div>\r\n</ng-template>\r\n\r\n\x3c!-- font family/name template --\x3e\r\n<ng-template #fontNameTemplate>\r\n <div class="ngxe-popover extra-gt1">\r\n <form autocomplete="off">\r\n <div class="form-group">\r\n <label for="fontSize" class="small">{{config.toolbarTitle[\'fontName\']}}</label>\r\n <input type="text" class="form-control-sm" id="fontSize" name="fontName" placeholder="{{config.toolbarTitle[\'example\']}} \'Times New Roman\', Times, serif"\r\n [(ngModel)]="fontName" required>\r\n </div>\r\n <button type="button" class="btn-primary btn-sm btn" (click)="setFontName(fontName)">{{config.toolbarTitle[\'fontSubmit\']}}</button>\r\n </form>\r\n </div>\r\n</ng-template>\r\n',providers:[r.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: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-text-editor-button{background-color:transparent;padding:.4rem;min-width:2.5rem;border:1px solid #ddd;border-right:transparent}.ngx-toolbar .ngx-toolbar-set .ngx-text-editor-button .headerNumber{font-size:15px;top:1px;position:relative;left:1px;font-weight:700}.ngx-toolbar .ngx-toolbar-set .ngx-text-editor-button:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s}.ngx-toolbar .ngx-toolbar-set .ngx-text-editor-button.focus,.ngx-toolbar .ngx-toolbar-set .ngx-text-editor-button:focus{outline:0}.ngx-toolbar .ngx-toolbar-set .ngx-text-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-text-editor-button:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.ngx-toolbar .ngx-toolbar-set .ngx-text-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 .ng