@stratusjs/angular 0.3.5 → 0.3.7

package/src/editor/editor.component.min.js

@@ -1 +1 @@
-System.register(["@angular/core","@angular/forms","@angular/material/dialog","rxjs","rxjs/operators","@angular/platform-browser","@stratusjs/runtime/stratus","lodash","@stratusjs/angular/core/root.component","@stratusjs/angular/editor/media-dialog.component","@stratusjs/angularjs/services/registry","@stratusjs/core/environment","@stratusjs/core/events/eventManager","@stratusjs/angular/editor/code-view-dialog.component","codemirror/lib/codemirror","codemirror/mode/xml/xml","html2pdf","font-awesome","froala-plugins","froala-embedly","froala-font-awesome","froala-image-tui","@stratusjs/angular/froala/plugins/mediaManager"],function(e,t){"use strict";var i,n,a,r,o,s,l,d,c,g,m,u,p,h,f,b,y,v,w,k,S,x=this&&this.__decorate||function(e,t,i,n){var a,r=arguments.length,o=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o},C=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};t&&t.id;return{setters:[function(e){i=e},function(e){n=e},function(e){a=e},function(e){r=e},function(e){o=e},function(e){s=e},function(e){l=e},function(e){d=e},function(e){c=e},function(e){g=e},function(e){m=e},function(e){u=e},function(e){p=e},function(e){h=e},function(e){f=e},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){}],execute:function(){"@stratusjs/angular","froala-editor","codemirror","editor",b=u.cookie("env")?"":".min",y=`${l.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^\/]*$/,"")}`,v=`${l.Stratus.BaseUrl}${boot.configuration.paths["codemirror/*"].replace(/[^\/]*$/,"")}`,w=`${l.Stratus.BaseUrl}${boot.configuration.paths["froala-editor"].replace(/js\/[^\/]*$/,"")}`,k=(e,t)=>d.default.has(e,t)&&!d.default.isEmpty(d.default.get(e,t)),S=class extends c.RootComponent{constructor(e,t,i,a,s){super(),this.sanitizer=e,this.ref=t,this.elementRef=i,this.fb=a,this.dialog=s,this.title="editor_component",this.dev=!!u.cookie("env"),this.editor="froala",this._=d.default,this.has=k,this.log=console.log,this.Stratus=l.Stratus,this.registry=new m.Registry,this.onChange=new r.Subject,this.svgIcons={},this.initialized=!1,this.styled=!1,this.blurred=!1,this.focused=!1,this.form=this.fb.group({dataString:new n.FormControl}),this.dataChangeLog=[],this.dataString="",this.froalaButtons=["bold","italic","underline","strikeThrough","subscript","superscript","|","formatBlock","blockStyle","inlineStyle","paragraphStyle","paragraphFormat","align","formatOL","formatUL","outdent","indent","|","insertLink","insertImage","insertVideo","insertFile","insertTable","|","undo","redo","removeFormat","wordPaste","help","html","fullscreen"],this.froalaStandardButtons={moreText:["bold","italic","underline","strikeThrough","subscript","superscript","fontFamily","fontSize","textColor","backgroundColor","inlineClass","inlineStyle","clearFormatting"],moreParagraph:["alignLeft","alignCenter","alignRight","alignJustify","indent","outdent","paragraphFormat","paragraphStyle","formatOL","formatUL","quote"],moreRich:["insertLink","insertImage","insertVideo","insertFile","insertTable","insertHR","specialCharacters","embedly"],moreMisc:["undo","redo","fullscreen","html","print","selectAll","help"]},this.froalaConfig={attribution:!1,key:l.Stratus.Environment.get("froalaKey"),zIndex:9999,events:{initialized:e=>{this.froalaEditorDirective=e}},codeBeautifierOptions:{end_with_newline:!0,indent_inner_html:!0,extra_liners:'["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "pre", "ul", "ol", "table", "dl"]',brace_style:"expand",indent_char:" ",indent_size:4,wrap_line_length:0},codeMirror:f,codeMirrorOptions:{indentWithTabs:!1,lineNumbers:!0,lineWrapping:!0,mode:"text/html",tabMode:"space",tabSize:4},fileInsertButtons:["fileBack","|","mediaManager"],fileUploadURL:"https://app.sitetheory.io/?session="+u.cookie("SITETHEORY"),fontFamily:{"Arial,Helvetica,sans-serif":"Arial","Georgia,serif":"Georgia","Impact,Charcoal,sans-serif":"Impact","Tahoma,Geneva,sans-serif":"Tahoma",'"Times New Roman",Times,serif':"Times New Roman","Verdana,Geneva,sans-serif":"Verdana"},heightMax:window.innerHeight||document.documentElement.clientHeight||500,htmlAllowedAttrs:["aria-.+","data-.+","ng-.+","stratus-.+","sa-.+","accept","accept-charset","accesskey","action","align","allow","allowfullscreen","allowtransparency","alt","async","autocomplete","autofocus","autoplay","autosave","background","bgcolor","border","charset","cellpadding","cellspacing","checked","cite","class","color","cols","colspan","content","contenteditable","contextmenu","controls","coords","data","datetime","default","defer","dir","dirname","disabled","download","draggable","dropzone","enctype","for","form","formaction","frameborder","headers","height","hidden","high","href","hreflang","http-equiv","icon","id","ismap","itemprop","keytype","kind","label","lang","language","list","loop","low","max","maxlength","media","method","min","mozallowfullscreen","multiple","muted","name","novalidate","open","optimum","pattern","ping","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","reversed","rows","rowspan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","src","srcdoc","srclang","srcset","start","step","summary","spellcheck","style","tabindex","target","title","type","translate","usemap","value","valign","webkitallowfullscreen","width","wrap","xmlns","xmlns:xlink","accent-height","accumulate","additive","alignment-baseline","alphabetic","amplitude","arabic-form","ascent","attributeName","attributeType","azimuth","baseFrequency","baseline-shift","baseProfile","bbox","begin","bias","by","calcMode","cap-height","clip","clipPathUnits","clip-path","clip-rule","color-interpolation","color-interpolation-filters","color-profile","color-rendering","contentScriptType","contentStyleType","crossorigin","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominant-baseline","dur","dx","dy","edgeMode","elevation","enable-background","end","exponent","externalResourcesRequired","fill","fill-opacity","fill-rule","filter","filterRes","filterUnits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","format","from","fr","fx","fy","g1","g2","glyph-name","glyph-orientation-horizontal","glyph-orientation-vertical","glyphRef","gradientTransform","gradientUnits","hanging","horiz-adv-x","horiz-origin-x","ideographic","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letter-spacing","lighting-color","limitingConeAngle","local","marker-end","marker-mid","marker-start","markerHeight","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overline-position","overline-thickness","panose-1","paint-order","path","pathLength","patternContentUnits","patternTransform","patternUnits","pointer-events","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","referrerPolicy","refX","refY","rendering-intent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shape-rendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stop-color","stop-opacity","strikethrough-position","strikethrough-thickness","string","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","surfaceScale","systemLanguage","tableValues","targetX","targetY","text-anchor","text-decoration","text-rendering","textLength","to","transform","transform-origin","u1","u2","underline-position","underline-thickness","unicode","unicode-bidi","unicode-range","units-per-em","v-alphabetic","v-hanging","v-ideographic","v-mathematical","values","vector-effect","version","vert-adv-y","vert-origin-x","vert-origin-y","viewBox","viewTarget","visibility","widths","word-spacing","writing-mode","x","x-height","x1","x2","xChannelSelector","xlink:actuate","xlink:arcrole","xlink:href","xlink:role","xlink:show","xlink:title","xlink:type","xml:base","xml:lang","xml:space","y","y1","y2","yChannelSelector","z","zoomAndPan"],htmlAllowedEmptyTags:["textarea","a","iframe","object","video","style","script","hr","div","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","svg","switch","symbol","text","textPath","tspan","unknown","use","view","ng-app","ng-bind","ng-bind-html","ng-bind-template","ng-blur","ng-change","ng-checked","ng-class","ng-class-even","ng-class-odd","ng-click","ng-cloak","ng-controller","ng-copy","ng-csp","ng-cut","ng-dblclick","ng-disabled","ng-focus","ng-form","ng-hide","ng-href","ng-if","ng-include","ng-init","ng-jq","ng-keydown","ng-keypress","ng-keyup","ng-list","ng-maxlength","ng-minlength","ng-model","ng-model-options","ng-mousedown","ng-mouseenter","ng-mouseleave","ng-mousemove","ng-mouseover","ng-mouseup","ng-non-bindable","ng-on","ng-open","ng-options","ng-paste","ng-pattern","ng-pluralize","ng-prop","ng-readonly","ng-ref","ng-repeat","ng-required","ng-selected","ng-show","ng-src","ng-srcset","ng-style","ng-submit","ng-switch","ng-transclude","ng-value","ng-animate-children","ng-animate-swap","ng-outlet","ng-message","ng-message-default","ng-message-exp","ng-messages","ng-messages-include","ng-view","ng-swipe-left","ng-swipe-right","md-autocomplete","md-autofocus","md-button","md-calendar","md-card","md-checkbox","md-chip","md-chip-remove","md-chips","md-colors","md-contact-chips","md-content","md-datepicker","md-dialog","md-divider","md-fab-actions","md-fab-speed-dial","md-fab-toolbar","md-force-height","md-grid-list","md-grid-tile","md-highlight-text","md-icon","md-ink-ripple","md-input","md-input-container","md-list","md-list-item","md-menu","md-menu-bar","md-nav-bar","md-nav-item","md-optgroup","md-option","md-progress-circular","md-progress-linear","md-radio-button","md-radio-group","md-select","md-select-on-focus","md-sidenav","md-slider","md-slider-container","md-subheader","md-swipe-down","md-swipe-left","md-swipe-right","md-swipe-up","md-switch","md-tab","md-tabs","md-toolbar","md-tooltip","md-truncate","md-virtual-repeat","md-virtual-repeat-container","md-whiteframe","md-svg-src","sa-boot","sa-editor","sa-map","sa-media-selector","sa-selector","sa-stripe-payment-method-list","sa-stripe-payment-method-selector","sa-tree"],htmlAllowedStyleProps:[".*"],htmlAllowedTags:["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","br","button","canvas","caption","cite","code","col","colgroup","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meter","nav","noscript","object","ol","optgroup","option","output","p","param","pre","progress","queue","rp","rt","ruby","s","samp","script","style","section","select","small","source","span","strike","strong","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","svg","switch","symbol","text","textPath","tspan","unknown","use","view","ng-app","ng-bind","ng-bind-html","ng-bind-template","ng-blur","ng-change","ng-checked","ng-class","ng-class-even","ng-class-odd","ng-click","ng-cloak","ng-controller","ng-copy","ng-csp","ng-cut","ng-dblclick","ng-disabled","ng-focus","ng-form","ng-hide","ng-href","ng-if","ng-include","ng-init","ng-jq","ng-keydown","ng-keypress","ng-keyup","ng-list","ng-maxlength","ng-minlength","ng-model","ng-model-options","ng-mousedown","ng-mouseenter","ng-mouseleave","ng-mousemove","ng-mouseover","ng-mouseup","ng-non-bindable","ng-on","ng-open","ng-options","ng-paste","ng-pattern","ng-pluralize","ng-prop","ng-readonly","ng-ref","ng-repeat","ng-required","ng-selected","ng-show","ng-src","ng-srcset","ng-style","ng-submit","ng-switch","ng-transclude","ng-value","ng-animate-children","ng-animate-swap","ng-outlet","ng-message","ng-message-default","ng-message-exp","ng-messages","ng-messages-include","ng-view","ng-swipe-left","ng-swipe-right","md-autocomplete","md-autofocus","md-button","md-calendar","md-card","md-checkbox","md-chip","md-chip-remove","md-chips","md-colors","md-contact-chips","md-content","md-datepicker","md-dialog","md-divider","md-fab-actions","md-fab-speed-dial","md-fab-toolbar","md-force-height","md-grid-list","md-grid-tile","md-highlight-text","md-icon","md-ink-ripple","md-input","md-input-container","md-list","md-list-item","md-menu","md-menu-bar","md-nav-bar","md-nav-item","md-optgroup","md-option","md-progress-circular","md-progress-linear","md-radio-button","md-radio-group","md-select","md-select-on-focus","md-sidenav","md-slider","md-slider-container","md-subheader","md-swipe-down","md-swipe-left","md-swipe-right","md-swipe-up","md-switch","md-tab","md-tabs","md-toolbar","md-tooltip","md-truncate","md-virtual-repeat","md-virtual-repeat-container","md-whiteframe","md-svg-src","sa-boot","sa-editor","sa-map","sa-media-selector","sa-selector","sa-stripe-payment-method-list","sa-stripe-payment-method-selector","sa-tree"],htmlRemoveTags:[],htmlSimpleAmpersand:!1,imageInsertButtons:["imageBack","|","mediaManager","imageUpload","imageByURL"],imageUpload:!0,imageUploadRemoteUrls:!0,imageUploadURL:"https://app.sitetheory.io/?session="+u.cookie("SITETHEORY"),imageManagerPageSize:20,imageManagerScrollOffset:10,imageManagerLoadMethod:"GET",imageManagerLoadURL:"/Api/Media?payload-only=true",multiLine:!0,paragraphStyles:{btn:"Button",header:"Header",title:"Title","alt-title":"Alt Title (over)",subtitle:"Subtitle",pullout:"Pullout Quote"},pasteDeniedAttrs:["id","class","style","dir","data-.+","aria-.+","ng-.+","stratus-.+","sa-.+"],pasteDeniedTags:["form","input","label","style"],pastePlain:!1,pluginsEnabled:["align","charCounter","codeBeautifier","codeView","colors","draggable","embedly","entities","file","fontAwesome","fontFamily","fontSize","fullscreen","help","image","imageTUI","inlineStyle","inlineClass","lineBreaker","link","lists","mediaManager","paragraphFormat","paragraphStyle","print","quickInsert","quote","save","specialCharacters","table","url","video","wordPaste"],quickInsertButtons:["image","video","media","embedly","table","ul","ol","hr"],scrollableContainer:l.Stratus.Environment.get("viewPort")||"body",spellcheck:!0,toolbarSticky:!0,toolbarButtons:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:0},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:8},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:5},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:4}},toolbarButtonsSM:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:3},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:0},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:3},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:4}},toolbarButtonsXS:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:0},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:0},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:0},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:2}},useClasses:!0,videoInsertButtons:["videoBack","|","mediaManager","videoByURL","videoEmbed","videoUpload"],videoUpload:!0,videoUploadURL:"https://app.sitetheory.io/?session="+u.cookie("SITETHEORY")},this.uid=d.default.uniqueId(`sa_${d.default.snakeCase("editor")}_component_`),l.Stratus.Instances[this.uid]=this,l.Stratus.Internals.LoadCss([`${y}editor/editor.component${b}.css`,v+"lib/codemirror.css",`${w}css/froala_editor.pkgd${b}.css`,`${w}css/third_party/embedly${b}.css`,`${w}css/third_party/font_awesome${b}.css`,`${w}css/third_party/image_tui${b}.css`]).then(()=>{this.styled=!0,this.refresh()}).catch(e=>{console.error(e),console.warn("Issue detected in CSS Loader for Component:",this.uid),this.styled=!0,this.refresh()}),this.hydrate(i,e,["title","uid","dev","debug","editor","target","targetSuffix","id","manifest","decouple","direct","api","urlRoot","property","_","has","log","Stratus","registry","fetched","data","collection","model","dataSub","onChange","subscriber","svgIcons","initialized","styled","blurred","focused","codeViewIsOpen","form","dataChangeLog","dataString","froalaEditorDirective","froalaButtons","froalaStandardButtons","froalaConfig","sanitizer","ref","elementRef","fb","dialog","ngOnInit","listDuplicates","normalizeIn","normalizeOut","changeImgSize","handleError","fetchData","dataDefer","dataRef","onDataChange","created","changedEditor","onChangeEvent","onFocus","onBlur","bypassHTML","trigger","openMediaDialog","openCodeViewDialog","hydrate","disableRefresh","stagger","reloading","refresh","ngOnDestroy"]),this.fetchData().then(e=>{if(!(e&&e instanceof p.EventManager))return void console.warn("Unable to bind data from Registry!");const t=()=>{e.completed&&(this.dataDefer(this.subscriber),this.codeViewIsOpen)};e.on("change",t),t()}),this.dataSub=new r.Observable(e=>(this.dev&&console.warn("[observable] creating subscriber on "+this.uid,e),this.dataDefer(e))),this.dataSub.pipe(o.debounce(()=>r.timer(250)),o.catchError(this.handleError)).subscribe(e=>{if(this.focused)return void(this.dev&&console.warn("[subscriber] waiting on updates due to focus on "+this.uid));const t=this.form.get("dataString");t.value!==e?(t.patchValue(e),this.refresh()):this.initialized&&this.refresh()})}ngOnInit(){this.initialized=!0;this.form.get("dataString").valueChanges.forEach(e=>{if(!this.model.completed)return;let t=null;!this.froalaConfig.useClasses&&this.froalaEditorDirective&&this.froalaEditorDirective.getEditor()&&this.froalaEditorDirective.getEditor().el&&this.froalaEditorDirective.getEditor().el.innerHTML&&(t=this.froalaEditorDirective.getEditor().el.innerHTML),this.model.set(this.property,this.normalizeOut(t||e))}),this.dev&&this.listDuplicates(this.froalaConfig)}listDuplicates(e){return d.default.forEach(e,(e,t)=>{if(!d.default.isArray(e))return;const i={};e.forEach(e=>i[e]=(i[e]||0)+1);const n=d.default.filter(d.default.map(i,(e,t)=>e>1?t:null));n.length&&console.warn("Froala Config:",t,"has duplicates:",n)}),e}normalizeIn(e){return e&&d.default.isString(e)?this.changeImgSize(e,"hq"):""}normalizeOut(e){return null===e?"":d.default.isString(e)?this.changeImgSize(e,"xs"):e}changeImgSize(e,t){if(!e||!d.default.isString(e))return e;if(!t||!d.default.isString(t))return e;const i=/<img([\w\W]+?)>/gi;let n;for(;n=i.exec(e);){const i=n[0];if(i.includes("data:image"))continue;const a=/^<img\s(.+?)(-[A-Z]{2})?\.(?=[^.]*$)(.+)>/gi.exec(i);if(null!==a)if(i.includes("data-stratus-src"))e=e.replace(i,`<img ${a[1]}-${t}.${a[3]}>`);else{if(!i.includes("cdn.sitetheory.io"))continue;if(d.default.isEmpty(a[2]))continue;e=e.replace(i,`<img data-stratus-src ${a[1]}-${t}.${a[3]}>`)}else console.warn("Unable to find file name for image src:",i)}return e}handleError(e){return console.error(e),e}fetchData(){return this.fetched?this.fetched:this.fetched=this.registry.fetch(l.Stratus.Select(this.elementRef.nativeElement),this)}dataDefer(e){if(this.subscriber=this.subscriber||e,!this.subscriber)return this.dev&&console.warn("[defer] debouncing due to empty subscriber on "+this.uid),void setTimeout(()=>{this.dev&&console.warn("[defer] debounced subscriber returned on "+this.uid),this.dataDefer(e)},250);const t=d.default.clone(this.dataString),i=this.dataRef();return t!==i?i||this.data&&this.data.completed?void((this.froalaConfig.useClasses||t!==i)&&(this.dev&&console.warn(`[subscriber] new value submitted on ${this.uid}:`,i),this.subscriber.next(i))):(this.dev&&console.warn("[defer] debouncing subscriber due to unavailable data on "+this.uid,this.data),void setTimeout(()=>{this.dev&&console.warn("[defer] debounced subscriber returned on "+this.uid),this.dataDefer(e)},250)):void 0}dataRef(){return this.model?this.dataString=this.normalizeIn(this.model.get(this.property)):""}onDataChange(){this.dataDefer(this.subscriber),this.refresh()}created(){}changedEditor(e){console.log("editor-change:",e)}onChangeEvent(e){console.log("change:",e)}onFocus(e){this.focused=!0,this.blurred=!1}onBlur(e){this.focused=!1,this.blurred=!0}bypassHTML(e){return this.sanitizer.bypassSecurityTrustHtml(e)}trigger(e,t,i){this.dev&&this.debug&&console.log("editor.trigger:",e,i),"media-library"===e?this.openMediaDialog(i):"code-view"===e&&this.openCodeViewDialog()}openMediaDialog(e){const t=this.dialog.open(g.MediaDialogComponent,{width:"1000px",data:{editor:this,eventManager:e,form:this.form,model:this.model,property:this.property}});this.refresh();const i=this;t.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(i.refresh(),this.dev&&e&&console.log("media dialog result:",e))})}openCodeViewDialog(){this.codeViewIsOpen=!0;const e=this.dialog.open(h.CodeViewDialogComponent,{width:"1000px",data:{form:this.form,model:this.model,property:this.property}});this.refresh(),e.afterClosed().subscribe(e=>{this.codeViewIsOpen=!1,e&&!d.default.isEmpty(e)&&(this.refresh(),this.dev&&e&&console.log("code view dialog result:",e))})}},x([i.Input(),C("design:type",String)],S.prototype,"target",void 0),x([i.Input(),C("design:type",String)],S.prototype,"targetSuffix",void 0),x([i.Input(),C("design:type",Number)],S.prototype,"id",void 0),x([i.Input(),C("design:type",Boolean)],S.prototype,"manifest",void 0),x([i.Input(),C("design:type",Boolean)],S.prototype,"decouple",void 0),x([i.Input(),C("design:type",Boolean)],S.prototype,"direct",void 0),x([i.Input(),C("design:type",Object)],S.prototype,"api",void 0),x([i.Input(),C("design:type",String)],S.prototype,"urlRoot",void 0),x([i.Input(),C("design:type",String)],S.prototype,"property",void 0),S=x([i.Component({selector:"sa-editor",templateUrl:`${y}/editor/editor.component${b}.html`}),C("design:paramtypes",[s.DomSanitizer,i.ChangeDetectorRef,i.ElementRef,n.FormBuilder,a.MatDialog])],S),e("EditorComponent",S)}}});
+System.register(["@angular/core","@angular/forms","@angular/material/dialog","rxjs","rxjs/operators","@angular/platform-browser","@stratusjs/runtime/stratus","lodash","@stratusjs/angular/core/root.component","@stratusjs/angular/editor/link-dialog.component","@stratusjs/angular/editor/media-dialog.component","@stratusjs/angularjs/services/registry","@stratusjs/core/environment","@stratusjs/core/events/eventManager","@stratusjs/angular/editor/code-view-dialog.component","codemirror/lib/codemirror","codemirror/mode/xml/xml","html2pdf","font-awesome","froala-plugins","froala-embedly","froala-font-awesome","froala-image-tui","@stratusjs/angular/froala/plugins/linkManager","@stratusjs/angular/froala/plugins/mediaManager"],function(e,t){"use strict";var i,n,a,r,o,s,l,d,c,g,m,u,p,h,f,b,y,v,k,w,S,x,C,M=this&&this.__decorate||function(e,t,i,n){var a,r=arguments.length,o=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o},T=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};t&&t.id;return{setters:[function(e){i=e},function(e){n=e},function(e){a=e},function(e){r=e},function(e){o=e},function(e){s=e},function(e){l=e},function(e){d=e},function(e){c=e},function(e){g=e},function(e){m=e},function(e){u=e},function(e){p=e},function(e){h=e},function(e){f=e},function(e){b=e},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){}],execute:function(){"@stratusjs/angular","froala-editor","codemirror",y="editor",v=p.cookie("env")?"":".min",k=`${l.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^\/]*$/,"")}`,w=`${l.Stratus.BaseUrl}${boot.configuration.paths["codemirror/*"].replace(/[^\/]*$/,"")}`,S=`${l.Stratus.BaseUrl}${boot.configuration.paths["froala-editor"].replace(/js\/[^\/]*$/,"")}`,x=(e,t)=>d.default.has(e,t)&&!d.default.isEmpty(d.default.get(e,t)),C=class extends c.RootComponent{constructor(e,t,i,a,s){super(),this.sanitizer=e,this.ref=t,this.elementRef=i,this.fb=a,this.dialog=s,this.title="editor_component",this.dev=!!p.cookie("env"),this.editor="froala",this._=d.default,this.has=x,this.log=console.log,this.Stratus=l.Stratus,this.registry=new u.Registry,this.onChange=new r.Subject,this.svgIcons={},this.initialized=!1,this.styled=!1,this.blurred=!1,this.focused=!1,this.form=this.fb.group({dataString:new n.FormControl}),this.dataChangeLog=[],this.dataString="",this.froalaButtons=["bold","italic","underline","strikeThrough","subscript","superscript","|","formatBlock","blockStyle","inlineStyle","paragraphStyle","paragraphFormat","align","formatOL","formatUL","outdent","indent","|","insertLink","insertImage","insertVideo","insertFile","insertTable","|","undo","redo","removeFormat","wordPaste","help","html","fullscreen"],this.froalaStandardButtons={moreText:["bold","italic","underline","strikeThrough","subscript","superscript","fontFamily","fontSize","textColor","backgroundColor","inlineClass","inlineStyle","clearFormatting"],moreParagraph:["alignLeft","alignCenter","alignRight","alignJustify","indent","outdent","paragraphFormat","paragraphStyle","formatOL","formatUL","quote"],moreRich:["insertLink","insertImage","insertVideo","insertFile","insertTable","insertHR","specialCharacters","embedly"],moreMisc:["undo","redo","fullscreen","html","print","selectAll","help"]},this.froalaConfig={attribution:!1,key:l.Stratus.Environment.get("froalaKey"),zIndex:9999,events:{initialized:e=>{this.froalaEditorDirective=e}},codeBeautifierOptions:{end_with_newline:!0,indent_inner_html:!0,extra_liners:'["p", "h1", "h2", "h3", "h4", "h5", "h6", "blockquote", "pre", "ul", "ol", "table", "dl"]',brace_style:"expand",indent_char:" ",indent_size:4,wrap_line_length:0},codeMirror:b,codeMirrorOptions:{indentWithTabs:!1,lineNumbers:!0,lineWrapping:!0,mode:"text/html",tabMode:"space",tabSize:4},fileInsertButtons:["fileBack","|","mediaManager"],fileUploadURL:"https://app.sitetheory.io/?session="+p.cookie("SITETHEORY"),fontFamily:{"Arial,Helvetica,sans-serif":"Arial","Georgia,serif":"Georgia","Impact,Charcoal,sans-serif":"Impact","Tahoma,Geneva,sans-serif":"Tahoma",'"Times New Roman",Times,serif':"Times New Roman","Verdana,Geneva,sans-serif":"Verdana"},heightMax:window.innerHeight||document.documentElement.clientHeight||500,htmlAllowedAttrs:["aria-.+","data-.+","ng-.+","stratus-.+","sa-.+","accept","accept-charset","accesskey","action","align","allow","allowfullscreen","allowtransparency","alt","async","autocomplete","autofocus","autoplay","autosave","background","bgcolor","border","charset","cellpadding","cellspacing","checked","cite","class","color","cols","colspan","content","contenteditable","contextmenu","controls","coords","data","datetime","default","defer","dir","dirname","disabled","download","draggable","dropzone","enctype","for","form","formaction","frameborder","headers","height","hidden","high","href","hreflang","http-equiv","icon","id","ismap","itemprop","keytype","kind","label","lang","language","list","loop","low","max","maxlength","media","method","min","mozallowfullscreen","multiple","muted","name","novalidate","open","optimum","pattern","ping","placeholder","playsinline","poster","preload","pubdate","radiogroup","readonly","rel","required","reversed","rows","rowspan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","src","srcdoc","srclang","srcset","start","step","summary","spellcheck","style","tabindex","target","title","type","translate","usemap","value","valign","webkitallowfullscreen","width","wrap","xmlns","xmlns:xlink","accent-height","accumulate","additive","alignment-baseline","alphabetic","amplitude","arabic-form","ascent","attributeName","attributeType","azimuth","baseFrequency","baseline-shift","baseProfile","bbox","begin","bias","by","calcMode","cap-height","clip","clipPathUnits","clip-path","clip-rule","color-interpolation","color-interpolation-filters","color-profile","color-rendering","contentScriptType","contentStyleType","crossorigin","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominant-baseline","dur","dx","dy","edgeMode","elevation","enable-background","end","exponent","externalResourcesRequired","fill","fill-opacity","fill-rule","filter","filterRes","filterUnits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","format","from","fr","fx","fy","g1","g2","glyph-name","glyph-orientation-horizontal","glyph-orientation-vertical","glyphRef","gradientTransform","gradientUnits","hanging","horiz-adv-x","horiz-origin-x","ideographic","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letter-spacing","lighting-color","limitingConeAngle","local","marker-end","marker-mid","marker-start","markerHeight","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overline-position","overline-thickness","panose-1","paint-order","path","pathLength","patternContentUnits","patternTransform","patternUnits","pointer-events","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","referrerPolicy","refX","refY","rendering-intent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shape-rendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stop-color","stop-opacity","strikethrough-position","strikethrough-thickness","string","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","surfaceScale","systemLanguage","tableValues","targetX","targetY","text-anchor","text-decoration","text-rendering","textLength","to","transform","transform-origin","u1","u2","underline-position","underline-thickness","unicode","unicode-bidi","unicode-range","units-per-em","v-alphabetic","v-hanging","v-ideographic","v-mathematical","values","vector-effect","version","vert-adv-y","vert-origin-x","vert-origin-y","viewBox","viewTarget","visibility","widths","word-spacing","writing-mode","x","x-height","x1","x2","xChannelSelector","xlink:actuate","xlink:arcrole","xlink:href","xlink:role","xlink:show","xlink:title","xlink:type","xml:base","xml:lang","xml:space","y","y1","y2","yChannelSelector","z","zoomAndPan"],htmlAllowedEmptyTags:["textarea","a","iframe","object","video","style","script","hr","div","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","svg","switch","symbol","text","textPath","tspan","unknown","use","view","ng-app","ng-bind","ng-bind-html","ng-bind-template","ng-blur","ng-change","ng-checked","ng-class","ng-class-even","ng-class-odd","ng-click","ng-cloak","ng-controller","ng-copy","ng-csp","ng-cut","ng-dblclick","ng-disabled","ng-focus","ng-form","ng-hide","ng-href","ng-if","ng-include","ng-init","ng-jq","ng-keydown","ng-keypress","ng-keyup","ng-list","ng-maxlength","ng-minlength","ng-model","ng-model-options","ng-mousedown","ng-mouseenter","ng-mouseleave","ng-mousemove","ng-mouseover","ng-mouseup","ng-non-bindable","ng-on","ng-open","ng-options","ng-paste","ng-pattern","ng-pluralize","ng-prop","ng-readonly","ng-ref","ng-repeat","ng-required","ng-selected","ng-show","ng-src","ng-srcset","ng-style","ng-submit","ng-switch","ng-transclude","ng-value","ng-animate-children","ng-animate-swap","ng-outlet","ng-message","ng-message-default","ng-message-exp","ng-messages","ng-messages-include","ng-view","ng-swipe-left","ng-swipe-right","md-autocomplete","md-autofocus","md-button","md-calendar","md-card","md-checkbox","md-chip","md-chip-remove","md-chips","md-colors","md-contact-chips","md-content","md-datepicker","md-dialog","md-divider","md-fab-actions","md-fab-speed-dial","md-fab-toolbar","md-force-height","md-grid-list","md-grid-tile","md-highlight-text","md-icon","md-ink-ripple","md-input","md-input-container","md-list","md-list-item","md-menu","md-menu-bar","md-nav-bar","md-nav-item","md-optgroup","md-option","md-progress-circular","md-progress-linear","md-radio-button","md-radio-group","md-select","md-select-on-focus","md-sidenav","md-slider","md-slider-container","md-subheader","md-swipe-down","md-swipe-left","md-swipe-right","md-swipe-up","md-switch","md-tab","md-tabs","md-toolbar","md-tooltip","md-truncate","md-virtual-repeat","md-virtual-repeat-container","md-whiteframe","md-svg-src","sa-boot","sa-editor","sa-map","sa-media-selector","sa-selector","sa-stripe-payment-method-list","sa-stripe-payment-method-selector","sa-tree"],htmlAllowedStyleProps:[".*"],htmlAllowedTags:["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","br","button","canvas","caption","cite","code","col","colgroup","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meter","nav","noscript","object","ol","optgroup","option","output","p","param","pre","progress","queue","rp","rt","ruby","s","samp","script","style","section","select","small","source","span","strike","strong","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr","animate","animateMotion","animateTransform","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","set","stop","svg","switch","symbol","text","textPath","tspan","unknown","use","view","ng-app","ng-bind","ng-bind-html","ng-bind-template","ng-blur","ng-change","ng-checked","ng-class","ng-class-even","ng-class-odd","ng-click","ng-cloak","ng-controller","ng-copy","ng-csp","ng-cut","ng-dblclick","ng-disabled","ng-focus","ng-form","ng-hide","ng-href","ng-if","ng-include","ng-init","ng-jq","ng-keydown","ng-keypress","ng-keyup","ng-list","ng-maxlength","ng-minlength","ng-model","ng-model-options","ng-mousedown","ng-mouseenter","ng-mouseleave","ng-mousemove","ng-mouseover","ng-mouseup","ng-non-bindable","ng-on","ng-open","ng-options","ng-paste","ng-pattern","ng-pluralize","ng-prop","ng-readonly","ng-ref","ng-repeat","ng-required","ng-selected","ng-show","ng-src","ng-srcset","ng-style","ng-submit","ng-switch","ng-transclude","ng-value","ng-animate-children","ng-animate-swap","ng-outlet","ng-message","ng-message-default","ng-message-exp","ng-messages","ng-messages-include","ng-view","ng-swipe-left","ng-swipe-right","md-autocomplete","md-autofocus","md-button","md-calendar","md-card","md-checkbox","md-chip","md-chip-remove","md-chips","md-colors","md-contact-chips","md-content","md-datepicker","md-dialog","md-divider","md-fab-actions","md-fab-speed-dial","md-fab-toolbar","md-force-height","md-grid-list","md-grid-tile","md-highlight-text","md-icon","md-ink-ripple","md-input","md-input-container","md-list","md-list-item","md-menu","md-menu-bar","md-nav-bar","md-nav-item","md-optgroup","md-option","md-progress-circular","md-progress-linear","md-radio-button","md-radio-group","md-select","md-select-on-focus","md-sidenav","md-slider","md-slider-container","md-subheader","md-swipe-down","md-swipe-left","md-swipe-right","md-swipe-up","md-switch","md-tab","md-tabs","md-toolbar","md-tooltip","md-truncate","md-virtual-repeat","md-virtual-repeat-container","md-whiteframe","md-svg-src","sa-boot","sa-editor","sa-map","sa-media-selector","sa-selector","sa-stripe-payment-method-list","sa-stripe-payment-method-selector","sa-tree"],htmlRemoveTags:[],htmlSimpleAmpersand:!1,imageInsertButtons:["imageBack","|","mediaManager","imageUpload","imageByURL"],imageUpload:!0,imageUploadRemoteUrls:!0,imageUploadURL:"https://app.sitetheory.io/?session="+p.cookie("SITETHEORY"),imageManagerPageSize:20,imageManagerScrollOffset:10,imageManagerLoadMethod:"GET",imageManagerLoadURL:"/Api/Media?payload-only=true",linkInsertButtons:["linkBack","|","linkList","linkManager"],multiLine:!0,paragraphStyles:{btn:"Button",header:"Header",title:"Title","alt-title":"Alt Title (over)",subtitle:"Subtitle",pullout:"Pullout Quote"},pasteDeniedAttrs:["id","class","style","dir","data-.+","aria-.+","ng-.+","stratus-.+","sa-.+"],pasteDeniedTags:["form","input","label","style"],pastePlain:!1,pluginsEnabled:["align","charCounter","codeBeautifier","codeView","colors","draggable","embedly","entities","file","fontAwesome","fontFamily","fontSize","fullscreen","help","image","imageTUI","inlineStyle","inlineClass","lineBreaker","link","linkManager","lists","mediaManager","paragraphFormat","paragraphStyle","print","quickInsert","quote","save","specialCharacters","table","url","video","wordPaste"],quickInsertButtons:["image","video","media","link","embedly","table","ul","ol","hr"],scrollableContainer:l.Stratus.Environment.get("viewPort")||"body",spellcheck:!0,toolbarSticky:!0,toolbarButtons:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:0},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:8},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:5},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:4}},toolbarButtonsSM:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:3},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:0},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:3},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:4}},toolbarButtonsXS:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:0},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:0},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:0},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:2}},useClasses:!0,videoInsertButtons:["videoBack","|","mediaManager","videoByURL","videoEmbed","videoUpload"],videoUpload:!0,videoUploadURL:"https://app.sitetheory.io/?session="+p.cookie("SITETHEORY")},this.uid=d.default.uniqueId(`sa_${d.default.snakeCase(y)}_component_`),l.Stratus.Instances[this.uid]=this,l.Stratus.Internals.LoadCss([`${k}editor/editor.component${v}.css`,`${w}lib/codemirror.css`,`${S}css/froala_editor.pkgd${v}.css`,`${S}css/third_party/embedly${v}.css`,`${S}css/third_party/font_awesome${v}.css`,`${S}css/third_party/image_tui${v}.css`]).then(()=>{this.styled=!0,this.refresh()}).catch(e=>{console.error(e),console.warn("Issue detected in CSS Loader for Component:",this.uid),this.styled=!0,this.refresh()}),this.hydrate(i,e,["title","uid","dev","debug","editor","target","targetSuffix","id","manifest","decouple","direct","api","urlRoot","property","_","has","log","Stratus","registry","fetched","data","collection","model","dataSub","onChange","subscriber","svgIcons","initialized","styled","blurred","focused","codeViewIsOpen","form","dataChangeLog","dataString","froalaEditorDirective","froalaButtons","froalaStandardButtons","froalaConfig","sanitizer","ref","elementRef","fb","dialog","ngOnInit","listDuplicates","normalizeIn","normalizeOut","changeImgSize","handleError","fetchData","dataDefer","dataRef","onDataChange","created","changedEditor","onChangeEvent","onFocus","onBlur","bypassHTML","trigger","openLinkDialog","openMediaDialog","openCodeViewDialog","hydrate","disableRefresh","stagger","reloading","refresh","ngOnDestroy"]),this.fetchData().then(e=>{if(!(e&&e instanceof h.EventManager))return void console.warn("Unable to bind data from Registry!");const t=()=>{e.completed&&(this.dataDefer(this.subscriber),this.codeViewIsOpen)};e.on("change",t),t()}),this.dataSub=new r.Observable(e=>(this.dev&&console.warn(`[observable] creating subscriber on ${this.uid}`,e),this.dataDefer(e))),this.dataSub.pipe(o.debounce(()=>r.timer(250)),o.catchError(this.handleError)).subscribe(e=>{if(this.focused)return void(this.dev&&console.warn(`[subscriber] waiting on updates due to focus on ${this.uid}`));const t=this.form.get("dataString");t.value!==e?(t.patchValue(e),this.refresh()):this.initialized&&this.refresh()})}ngOnInit(){this.initialized=!0;this.form.get("dataString").valueChanges.forEach(e=>{if(!this.model.completed)return;let t=null;!this.froalaConfig.useClasses&&this.froalaEditorDirective&&this.froalaEditorDirective.getEditor()&&this.froalaEditorDirective.getEditor().el&&this.froalaEditorDirective.getEditor().el.innerHTML&&(t=this.froalaEditorDirective.getEditor().el.innerHTML),this.model.set(this.property,this.normalizeOut(t||e))}),this.dev&&this.listDuplicates(this.froalaConfig)}listDuplicates(e){return d.default.forEach(e,(e,t)=>{if(!d.default.isArray(e))return;const i={};e.forEach(e=>i[e]=(i[e]||0)+1);const n=d.default.filter(d.default.map(i,(e,t)=>e>1?t:null));n.length&&console.warn("Froala Config:",t,"has duplicates:",n)}),e}normalizeIn(e){return e&&d.default.isString(e)?this.changeImgSize(e,"hq"):""}normalizeOut(e){return null===e?"":d.default.isString(e)?this.changeImgSize(e,"xs"):e}changeImgSize(e,t){if(!e||!d.default.isString(e))return e;if(!t||!d.default.isString(t))return e;const i=/<img([\w\W]+?)>/gi;let n;for(;n=i.exec(e);){const i=n[0];if(i.includes("data:image"))continue;const a=/^<img\s(.+?)(-[A-Z]{2})?\.(?=[^.]*$)(.+)>/gi.exec(i);if(null!==a)if(i.includes("data-stratus-src"))e=e.replace(i,`<img ${a[1]}-${t}.${a[3]}>`);else{if(!i.includes("cdn.sitetheory.io"))continue;if(d.default.isEmpty(a[2]))continue;e=e.replace(i,`<img data-stratus-src ${a[1]}-${t}.${a[3]}>`)}else console.warn("Unable to find file name for image src:",i)}return e}handleError(e){return console.error(e),e}fetchData(){return this.fetched?this.fetched:this.fetched=this.registry.fetch(l.Stratus.Select(this.elementRef.nativeElement),this)}dataDefer(e){if(this.subscriber=this.subscriber||e,!this.subscriber)return this.dev&&console.warn(`[defer] debouncing due to empty subscriber on ${this.uid}`),void setTimeout(()=>{this.dev&&console.warn(`[defer] debounced subscriber returned on ${this.uid}`),this.dataDefer(e)},250);const t=d.default.clone(this.dataString),i=this.dataRef();return t!==i?i||this.data&&this.data.completed?void((this.froalaConfig.useClasses||t!==i)&&(this.dev&&console.warn(`[subscriber] new value submitted on ${this.uid}:`,i),this.subscriber.next(i))):(this.dev&&console.warn(`[defer] debouncing subscriber due to unavailable data on ${this.uid}`,this.data),void setTimeout(()=>{this.dev&&console.warn(`[defer] debounced subscriber returned on ${this.uid}`),this.dataDefer(e)},250)):void 0}dataRef(){return this.model?this.dataString=this.normalizeIn(this.model.get(this.property)):""}onDataChange(){this.dataDefer(this.subscriber),this.refresh()}created(){}changedEditor(e){console.log("editor-change:",e)}onChangeEvent(e){console.log("change:",e)}onFocus(e){this.focused=!0,this.blurred=!1}onBlur(e){this.focused=!1,this.blurred=!0}bypassHTML(e){return this.sanitizer.bypassSecurityTrustHtml(e)}trigger(e,t,i){this.dev&&this.debug&&console.log("editor.trigger:",e,i),"media-library"===e?this.openMediaDialog(i):"link-library"===e?this.openLinkDialog(i):"code-view"===e&&this.openCodeViewDialog()}openLinkDialog(e){const t=this.dialog.open(g.LinkDialogComponent,{width:"1000px",data:{editor:this,eventManager:e,form:this.form,model:this.model,property:this.property}});this.refresh();const i=this;t.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(i.refresh(),this.dev&&e&&console.log("link dialog result:",e))})}openMediaDialog(e){const t=this.dialog.open(m.MediaDialogComponent,{width:"1000px",data:{editor:this,eventManager:e,form:this.form,model:this.model,property:this.property}});this.refresh();const i=this;t.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(i.refresh(),this.dev&&e&&console.log("media dialog result:",e))})}openCodeViewDialog(){this.codeViewIsOpen=!0;const e=this.dialog.open(f.CodeViewDialogComponent,{width:"1000px",data:{form:this.form,model:this.model,property:this.property}});this.refresh(),e.afterClosed().subscribe(e=>{this.codeViewIsOpen=!1,e&&!d.default.isEmpty(e)&&(this.refresh(),this.dev&&e&&console.log("code view dialog result:",e))})}},M([i.Input(),T("design:type",String)],C.prototype,"target",void 0),M([i.Input(),T("design:type",String)],C.prototype,"targetSuffix",void 0),M([i.Input(),T("design:type",Number)],C.prototype,"id",void 0),M([i.Input(),T("design:type",Boolean)],C.prototype,"manifest",void 0),M([i.Input(),T("design:type",Boolean)],C.prototype,"decouple",void 0),M([i.Input(),T("design:type",Boolean)],C.prototype,"direct",void 0),M([i.Input(),T("design:type",Object)],C.prototype,"api",void 0),M([i.Input(),T("design:type",String)],C.prototype,"urlRoot",void 0),M([i.Input(),T("design:type",String)],C.prototype,"property",void 0),C=M([i.Component({selector:"sa-editor",templateUrl:`${k}/editor/editor.component${v}.html`}),T("design:paramtypes",[s.DomSanitizer,i.ChangeDetectorRef,i.ElementRef,n.FormBuilder,a.MatDialog])],C),e("EditorComponent",C)}}});

package/src/editor/editor.component.ts

@@ -63,6 +63,10 @@ import {
 import {
     RootComponent
 } from '@stratusjs/angular/core/root.component'
+import {
+    LinkDialogComponent,
+    LinkDialogData
+} from '@stratusjs/angular/editor/link-dialog.component'
 import {
     MediaDialogComponent,
     MediaDialogData
@@ -157,6 +161,7 @@ import 'froala-image-tui'
 // import 'froala-word-paste'
 
 // Froala Custom Plugins
+import '@stratusjs/angular/froala/plugins/linkManager'
 import '@stratusjs/angular/froala/plugins/mediaManager'
 import {FroalaEditorDirective} from 'angular-froala-wysiwyg'
 // import '@stratusjs/angular/froala/plugins/menuButton'
@@ -762,6 +767,20 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         // Note: The request will contain the image source as src parameter.
         // imageManagerDeleteURL: '/Api/MediaSrc',
         // imageManagerPreloader: '/images/loader.gif',
+        linkInsertButtons: [
+            'linkBack',
+            '|',
+            'linkList',
+            'linkManager'
+        ],
+        // linkList: [
+        //     {
+        //         text: 'Meow',
+        //         href: 'https://meow.com/',
+        //         target: '_blank',
+        //         rel: 'nofollow'
+        //     }
+        // ],
         multiLine: true,
         paragraphStyles: {
             // 'fr-text-gray': 'Gray',
@@ -819,6 +838,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             'lineBreaker',
             // 'lineHeight',
             'link',
+            'linkManager',
             'lists',
             'mediaManager',
             // 'menuButton',
@@ -840,6 +860,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             'image',
             'video',
             'media',
+            'link',
             'embedly',
             'table',
             'ul',
@@ -1364,12 +1385,42 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         }
         if (name === 'media-library') {
             this.openMediaDialog(callee)
+        } else if (name === 'link-library') {
+            this.openLinkDialog(callee)
         } else if (name === 'code-view') {
             this.openCodeViewDialog()
         }
         // callee.trigger('editor', null, this)
     }
 
+    public openLinkDialog(callee: TriggerInterface): void {
+        const dialogRef = this.dialog.open(LinkDialogComponent, {
+            width: '1000px',
+            data: {
+                editor: this,
+                eventManager: callee,
+                // eventInsert: false,
+                form: this.form,
+                model: this.model,
+                property: this.property
+            }
+        })
+        this.refresh()
+
+        const that = this
+        dialogRef.afterClosed().subscribe((result: LinkDialogData) => {
+            if (!result || _.isEmpty(result)) {
+                return
+            }
+            // Refresh Component
+            that.refresh()
+            // Display output if one exists
+            if (this.dev && result) {
+                console.log('link dialog result:', result)
+            }
+        })
+    }
+
     public openMediaDialog(callee: TriggerInterface): void {
         const dialogRef = this.dialog.open(MediaDialogComponent, {
             width: '1000px',

package/src/editor/link-dialog.component.css

@@ -0,0 +1,18 @@
+.link-dialog-content .radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+.link-dialog-content .radio-button {
+  margin: 5px;
+}
+.link-dialog-content img.selected {
+  opacity: 0.5;
+}
+.link-dialog-content .link-card {
+  max-width: 400px;
+}
+.link-dialog-content .link-header-image {
+  background-size: cover;
+}
+/*# sourceMappingURL=link-dialog.component.css.map */

package/src/editor/link-dialog.component.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/angular/src/editor/link-dialog.component.scss"],"names":[],"mappings":"AAIQ;EACE;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EAEE","file":"link-dialog.component.css","sourcesContent":[".link {\n  &-dialog {\n    &-content {\n      .radio {\n        &-group {\n          display: flex;\n          flex-direction: column;\n          margin: 15px 0;\n        }\n        &-button {\n          margin: 5px;\n        }\n      }\n      img.selected {\n        opacity: 0.5;\n      }\n      .link-card {\n        max-width: 400px;\n      }\n      .link-header-image {\n        //background-image: url('');\n        background-size: cover;\n      }\n    }\n  }\n}\n"]}

package/src/editor/link-dialog.component.html

@@ -0,0 +1,208 @@
+<h1 mat-dialog-title>Link Selector</h1>
+
+<!-- Note: This spawns from the Media Dialog Component, so the UI here will need a revamp after it becomes functional. -->
+<div mat-dialog-content class="link-dialog-content">
+    <!-- Target Editor -->
+    <form class="dialog-form" [formGroup]='dialogLinkForm'>
+        <mat-form-field class="form-field">
+            <input matInput placeholder="Search Content" aria-label="Search Content" formControlName='linkQueryInput'>
+        </mat-form-field>
+    </form>
+    <mat-progress-bar mode="indeterminate" *ngIf="isContentLoading"></mat-progress-bar>
+    <!-- TODO: Add more information for the Content items -->
+    <div class="content" fxLayout="row wrap" fxLayoutGap="16px grid">
+        <div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let contentEntity of contentEntities">
+            <mat-card class="content-card">
+                <mat-card-header>
+                    <!--<div mat-card-avatar class="content-header-image"></div>-->
+                    <!--<mat-card-title [innerText]="contentEntity.version.title || 'Untitled'"></mat-card-title>-->
+                    <mat-card-title>
+                        <ng-container *ngIf="contentEntity.version.title && contentEntity.version.title.length > 16; else defaultTitle">
+                            <span [matTooltip]="contentEntity.version.title"
+                                  [innerText]="(contentEntity.version.title | slice:0:13) + '...'"
+                                  [style.cursor]="'help'">
+                            </span>
+                        </ng-container>
+                        <ng-template #defaultTitle>
+                            <span [innerText]="contentEntity.version.title || 'Untitled'"
+                                  [style.cursor]="'default'">
+                            </span>
+                        </ng-template>
+                    </mat-card-title>
+                    <mat-card-subtitle>
+                        <ng-container *ngIf="contentEntity.contentType.name && contentEntity.contentType.name.length > 24; else defaultSubtitle">
+                            <span [matTooltip]="contentEntity.contentType.name"
+                                  [innerText]="(contentEntity.contentType.name | slice:0:21) + '...'"
+                                  [style.cursor]="'help'">
+                            </span>
+                        </ng-container>
+                        <ng-template #defaultSubtitle>
+                            <span [innerText]="contentEntity.contentType.name"
+                                  [style.cursor]="'default'">
+                            </span>
+                        </ng-template>
+                    </mat-card-subtitle>
+                </mat-card-header>
+                <ng-template #defaultBody>
+                    <mat-icon aria-hidden="true"
+                              [svgIcon]="getSvg(Stratus.BaseUrl + contentEntity.contentType.iconResourcePath) | async">
+                        ContentType Icon
+                    </mat-icon>
+                </ng-template>
+                <ng-container *ngIf="contentEntity.version && contentEntity.version.bestImage; else defaultBody">
+                    <ng-container *ngIf="contentEntity.version.bestImage._thumbnailUrl">
+                        <img mat-card-image
+                             class="generic-thumb basic-image"
+                             [src]="contentEntity.version.bestImage.mime !== 'image/gif' ? contentEntity.version.bestImage._thumbnailUrl : contentEntity.version.bestImage._directUrl"
+                             [alt]="contentEntity.version.title"
+                             [ngClass]="{'selected' : isSelected(contentEntity)}">
+                    </ng-container>
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && contentEntity.version.bestImage.mime === 'video'">
+                        <ng-container *ngIf="contentEntity.version.bestImage.service === 'vimeo'">
+                            <ng-container *ngIf="contentEntity.version.bestImage.meta && contentEntity.version.bestImage.meta.thumbnail_large; else basicVimeoButton">
+                                <!-- [src]="contentEntity.version.bestImage.meta.thumbnail_large || Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeIcons/media-icon-video.png'" -->
+                                <img mat-card-image
+                                     class="vimeo"
+                                     [src]="contentEntity.version.bestImage.meta.thumbnail_large"
+                                     [alt]="contentEntity.version.title"
+                                     [ngClass]="{'selected' : isSelected(contentEntity)}">
+                            </ng-container>
+                            <ng-template #basicVimeoButton>
+                                <!-- TODO: Change Generic Video Image to Generic Vimeo Image -->
+                                <!-- Generic Video Image -->
+                                <!-- TODO: make this a local file -->
+                                <img mat-card-image
+                                     class="vimeo basic-image"
+                                     [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeIcons/media-icon-video.png'"
+                                     style="background: #4e4e4e;"
+                                     [alt]="contentEntity.version.title"
+                                     [ngClass]="{'selected' : isSelected(contentEntity)}">
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="contentEntity.version.bestImage.service === 'youtube'">
+                            <ng-container *ngIf="contentEntity.version.bestImage.serviceMediaId; else basicYoutubeButton">
+                                <img mat-card-image
+                                     class="youtube"
+                                     [src]="'https://img.youtube.com/vi/' + contentEntity.version.bestImage.serviceMediaId + '/hqdefault.jpg'"
+                                     [alt]="contentEntity.version.title"
+                                     [ngClass]="{'selected' : isSelected(contentEntity)}">
+                            </ng-container>
+                            <ng-template #basicYoutubeButton>
+                                <!-- TODO: Change Generic Video Image to Generic Youtube Image -->
+                                <!-- Generic Video Image -->
+                                <!-- TODO: make this a local file -->
+                                <img mat-card-image
+                                     class="youtube basic-image"
+                                     [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeIcons/media-icon-video.png'"
+                                     style="background: #4e4e4e;"
+                                     [alt]="contentEntity.version.title"
+                                     [ngClass]="{'selected' : isSelected(contentEntity)}">
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="contentEntity.version.bestImage.service === 'facebook'">
+                            <!-- TODO: Change Generic Video Image until we have dynamic thumbnails fetched -->
+                            <!-- Generic Video Image -->
+                            <!-- TODO: make this a local file -->
+                            <img mat-card-image
+                                 class="facebook-video basic-image"
+                                 [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeIcons/media-icon-video.png'"
+                                 style="background: #4e4e4e;"
+                                 [alt]="contentEntity.version.title"
+                                 [ngClass]="{'selected' : isSelected(contentEntity)}">
+                        </ng-container>
+                        <ng-container *ngIf="!['vimeo', 'youtube', 'facebook'].includes(contentEntity.version.bestImage.service)">
+                            <!-- Generic Video Image -->
+                            <!-- TODO: make this a local file -->
+                            <img mat-card-image
+                                 class="generic-video basic-image"
+                                 [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeIcons/media-icon-video.png'"
+                                 style="background: #4e4e4e;"
+                                 [alt]="contentEntity.version.title"
+                                 [ngClass]="{'selected' : isSelected(contentEntity)}">
+                        </ng-container>
+                    </ng-container>
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && _.startsWith(contentEntity.version.bestImage.mime, 'audio')">
+                        <!-- TODO: make this a local file -->
+                        <img mat-card-image
+                             class="generic-audio"
+                             [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeGraphics/media-graphic-audio.png'"
+                             style="background: #4e4e4e;"
+                             [alt]="contentEntity.version.title"
+                             [ngClass]="{'selected' : isSelected(contentEntity)}">
+                    </ng-container>
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && contentEntity.version.bestImage.mime === 'application/pdf'">
+                        <!-- TODO: make this a local file -->
+                        <img mat-card-image
+                             class="generic-pdf basic-image"
+                             [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeGraphics/media-graphic-pdf.png'"
+                             [alt]="contentEntity.version.title"
+                             [ngClass]="{'selected' : isSelected(contentEntity)}">
+                    </ng-container>
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && contentEntity.version.bestImage.mime === 'application/msword'">
+                        <!-- TODO: make this a local file -->
+                        <img mat-card-image
+                             class="generic-word basic-image"
+                             [src]="Stratus.BaseUrl + 'sitetheorymedia/images/mediaTypeGraphics/media-graphic-doc.png'"
+                             [alt]="contentEntity.version.title"
+                             [ngClass]="{'selected' : isSelected(contentEntity)}">
+                    </ng-container>
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && contentEntity.version.bestImage.service === 'directLink'
+                                          && contentEntity.version.bestImage.file">
+                        <!-- In some cases, there are external images with a service of 'directLink' -->
+                        <img mat-card-image
+                             class="direct-link"
+                             [src]="contentEntity.version.bestImage.file"
+                             [alt]="contentEntity.version.title"
+                             [ngClass]="{'selected' : isSelected(contentEntity)}">
+                    </ng-container>
+
+                    <!-- Note: This shows info for entities that don't have a proper display -->
+                    <!--
+                    <ng-container *ngIf="!contentEntity.version.bestImage._thumbnailUrl
+                                          && !_.startsWith(contentEntity.version.bestImage.mime, 'audio')
+                                          && !['application/pdf', 'application/msword', 'video'].includes(contentEntity.version.bestImage.mime)
+                                          && !(contentEntity.version.bestImage.service === 'directLink' && contentEntity.version.bestImage.file)">
+                        <mat-card-content>
+                            <p>
+                                ID: <span [innerText]="contentEntity.version.bestImage.id"></span>
+                            </p>
+                            <p>
+                                Service: <span [innerText]="contentEntity.version.bestImage.service|json"></span>
+                            </p>
+                        </mat-card-content>
+                    </ng-container>
+                    -->
+
+                </ng-container>
+
+                <!--
+                <mat-card-content>
+                    <p>
+                        This can have a description, maybe.
+                    </p>
+                </mat-card-content>
+                -->
+                <mat-card-actions>
+                    <!-- This action button is for selecting the Media, instead of clicking directly on the image -->
+                    <button mat-button
+                            [disabled]="isSelected(contentEntity)"
+                            (click)="select(contentEntity)">
+                        <span [innerText]="isSelected(contentEntity) ? 'Selected' : 'Insert'"></span>
+                    </button>
+                    <!-- TODO: Add action buttons for deleting media with confirm dialog (i.e. trash can) -->
+                </mat-card-actions>
+            </mat-card>
+        </div>
+    </div>
+    <!-- Pagination is based on the latest Convoy Meta -->
+    <mat-paginator [length]="(!meta || !meta.pagination) ? contentEntities.length : (meta.pagination.countTotal || contentEntities.length)"
+                   [pageSize]="(!meta || !meta.pagination) ? limit : (meta.pagination.limit || limit)"
+                   [pageSizeOptions]="[5, 10, 25, 50, 100]"
+                   (page)="onPage($event)">
+    </mat-paginator>
+</div>