@stratusjs/angular 0.3.6 → 0.3.8

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,C=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){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){},function(e){}],execute:function(){"@stratusjs/angular","froala-editor","codemirror",b="editor",y=u.cookie("env")?"":".min",v=`${l.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^\/]*$/,"")}`,w=`${l.Stratus.BaseUrl}${boot.configuration.paths["codemirror/*"].replace(/[^\/]*$/,"")}`,k=`${l.Stratus.BaseUrl}${boot.configuration.paths["froala-editor"].replace(/js\/[^\/]*$/,"")}`,S=(e,t)=>d.default.has(e,t)&&!d.default.isEmpty(d.default.get(e,t)),x=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=S,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(b)}_component_`),l.Stratus.Instances[this.uid]=this,l.Stratus.Internals.LoadCss([`${v}editor/editor.component${y}.css`,`${w}lib/codemirror.css`,`${k}css/froala_editor.pkgd${y}.css`,`${k}css/third_party/embedly${y}.css`,`${k}css/third_party/font_awesome${y}.css`,`${k}css/third_party/image_tui${y}.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))})}},C([i.Input(),T("design:type",String)],x.prototype,"target",void 0),C([i.Input(),T("design:type",String)],x.prototype,"targetSuffix",void 0),C([i.Input(),T("design:type",Number)],x.prototype,"id",void 0),C([i.Input(),T("design:type",Boolean)],x.prototype,"manifest",void 0),C([i.Input(),T("design:type",Boolean)],x.prototype,"decouple",void 0),C([i.Input(),T("design:type",Boolean)],x.prototype,"direct",void 0),C([i.Input(),T("design:type",Object)],x.prototype,"api",void 0),C([i.Input(),T("design:type",String)],x.prototype,"urlRoot",void 0),C([i.Input(),T("design:type",String)],x.prototype,"property",void 0),x=C([i.Component({selector:"sa-editor",templateUrl:`${v}/editor/editor.component${y}.html`}),T("design:paramtypes",[s.DomSanitizer,i.ChangeDetectorRef,i.ElementRef,n.FormBuilder,a.MatDialog])],x),e("EditorComponent",x)}}});
+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:["linkManager","insertImage","insertVideo","insertFile","insertTable","insertLink","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'
@@ -415,11 +420,12 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             // 'lineHeight'
         ],
         moreRich: [
-            'insertLink',
+            'linkManager',
             'insertImage',
             'insertVideo',
             'insertFile',
             'insertTable',
+            'insertLink',
             'insertHR',
             'specialCharacters',
             // FIXME: The free version is lacking and will require custom `fontAwesomeSets` to remove PRO icons
@@ -762,6 +768,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 +839,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             'lineBreaker',
             // 'lineHeight',
             'link',
+            'linkManager',
             'lists',
             'mediaManager',
             // 'menuButton',
@@ -840,6 +861,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             'image',
             'video',
             'media',
+            'link',
             'embedly',
             'table',
             'ul',
@@ -1364,12 +1386,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,236 @@
+.link-dialog-content {
+  /* Styles for Both Selector and Content Areas */
+  /* Selector Autocomplete Options */
+  /* Draggable Content List */
+  /* Based on Angular Material 8+ */
+  /* Content List Custom */
+  margin: 0 auto;
+}
+.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;
+}
+.link-dialog-content .autocomplete-option .content-type {
+  margin-bottom: 2px;
+}
+.link-dialog-content .autocomplete-option .content-type md-icon,
+.link-dialog-content .autocomplete-option .content-type mat-icon {
+  margin-right: 4px;
+  height: 14px;
+  width: 14px;
+  min-height: 14px;
+  min-width: 14px;
+}
+.link-dialog-content .autocomplete-option .content-type .content-type-name {
+  font-weight: bold;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.link-dialog-content .autocomplete-option .no-image-icon md-icon,
+.link-dialog-content .autocomplete-option .no-image-icon mat-icon {
+  height: 28px;
+  width: 28px;
+  min-height: 28px;
+  min-width: 28px;
+}
+.link-dialog-content .autocomplete-option .no-image-icon md-icon svg g,
+.link-dialog-content .autocomplete-option .no-image-icon mat-icon svg g {
+  fill: #FFF;
+}
+.link-dialog-content .autocomplete-option .shapeholder {
+  width: 100%;
+  display: block;
+}
+.link-dialog-content .content-selector-autocomplete .column-title h3 {
+  margin: 0 0 5px;
+  font-size: 16px;
+}
+.link-dialog-content md-autocomplete,
+.link-dialog-content .content-selector {
+  margin-top: 12px;
+}
+.link-dialog-content .selector-filter md-checkbox {
+  padding-right: 10px;
+}
+.link-dialog-content .md-autocomplete-suggestions li {
+  height: 80px;
+}
+.link-dialog-content .content-selector-autocomplete .autocomplete-row {
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.link-dialog-content .content-selector-autocomplete .autocomplete-row * {
+  line-height: 1.4;
+}
+.link-dialog-content .content-selector-autocomplete .autocomplete-row .column-image .image-container {
+  margin-right: 18px;
+}
+.link-dialog-content .content-selector-autocomplete .autocomplete-row h3 {
+  font-size: 14px;
+}
+.link-dialog-content .content-selector-autocomplete .autocomplete-row .routing {
+  font-size: 13px;
+}
+.link-dialog-content .content-selector-autocomplete .content .image,
+.link-dialog-content .content-selector-autocomplete .content .column-title {
+  opacity: 0.3;
+}
+.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon,
+.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon {
+  z-index: 5;
+  height: 40px;
+  width: 40px;
+  min-height: 40px;
+  min-width: 40px;
+}
+.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon svg,
+.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon svg {
+  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+  -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
+}
+.link-dialog-content .content-selector-autocomplete .content md-icon.content-icon svg g,
+.link-dialog-content .content-selector-autocomplete .content mat-icon.content-icon svg g {
+  fill: #FFF;
+}
+.link-dialog-content .selector-wrapper {
+  background: rgba(255, 255, 255, 0.4);
+  margin-top: 20px;
+  padding: 40px;
+}
+.link-dialog-content .content-list {
+  margin: 0 auto;
+  max-width: 600px;
+  min-height: 60px;
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.link-dialog-content .content-box {
+  padding: 12px 16px;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: white;
+  font-size: 14px;
+}
+.link-dialog-content .content-box:last-child {
+  border: none;
+}
+.link-dialog-content .custom-ghost-placeholder {
+  background: rgba(0, 0, 0, 0.4);
+  min-height: 60px;
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.link-dialog-content .column-image,
+.link-dialog-content .column-title,
+.link-dialog-content .column-action {
+  float: left;
+}
+.link-dialog-content .column-image {
+  width: 15%;
+  padding-right: 10px;
+}
+.link-dialog-content .column-image .image,
+.link-dialog-content .column-image .no-image-icon {
+  margin-right: 10px;
+}
+.link-dialog-content .column-title {
+  width: 70%;
+}
+.link-dialog-content .column-action {
+  width: 15%;
+}
+.link-dialog-content .column-action > * {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 2px;
+}
+.link-dialog-content .column-action > *:last-child {
+  margin-bottom: 0;
+}
+.link-dialog-content .content-box.cdk-drag-preview .column-image {
+  width: 15%;
+}
+.link-dialog-content .content-box.cdk-drag-preview .column-title {
+  width: 85%;
+}
+.link-dialog-content .routing {
+  color: #333;
+  font-size: 13px;
+}
+.link-dialog-content .content-list .content-list-header {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+}
+.link-dialog-content .content-list .content-list-header h3,
+.link-dialog-content .content-list .content-list-header .note {
+  margin: 0;
+  display: inline-block;
+  vertical-align: text-bottom;
+  line-height: 1.2;
+}
+.link-dialog-content .content-list .content-list-header .note {
+  padding-left: 10px;
+}
+.link-dialog-content .content-list .content-list-container {
+  width: 100%;
+}
+.link-dialog-content .content-list .content-list-row {
+  margin-bottom: 10px;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 2px;
+  cursor: pointer;
+}
+.link-dialog-content .content-list .content-list-row.inactive {
+  background: #DDD;
+}
+.link-dialog-content .content-list .content-list-row.unpublished {
+  background: #DDD;
+}
+.link-dialog-content .content-list .btn.btn-delete, .link-dialog-content .content-list .btn.btn-edit {
+  float: right;
+  width: 35px;
+  min-width: unset;
+  height: 35px;
+  font-size: 10px;
+  margin-left: 12px;
+  padding: 0;
+  background: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+.link-dialog-content .content-list .btn.btn-delete:hover, .link-dialog-content .content-list .btn.btn-edit:hover {
+  background: #fff;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+}
+.link-dialog-content .content-list .btn.btn-delete svg, .link-dialog-content .content-list .btn.btn-edit svg {
+  margin: 0 auto;
+  width: 60%;
+}
+.link-dialog-content .content-list .btn.btn-delete svg g, .link-dialog-content .content-list .btn.btn-edit svg g {
+  fill: #222;
+}
+.link-dialog-content .firefox .btn.btn-delete svg,
+.link-dialog-content .firefox .btn.btn-delete svg g, .link-dialog-content .firefox .btn.btn-edit svg,
+.link-dialog-content .firefox .btn.btn-edit svg g {
+  max-width: 28px;
+  max-height: 28px;
+}
+/*# 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":"AAEI;AAsBE;AA8CA;AAqDA;AAQA;AA8BA;EAsCA;;AAnME;EACE;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EAEE;;AAKA;EACE;;AACA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAIN;EACE;EACA;;AAKF;EACE;EACA;;AAOJ;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAGA;EACE;EACA;;AACA;EACE;;AAGA;EACE;;AAGJ;EACE;;AAEF;EACE;;AAIF;AAAA;EAEE;;AAEF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;;AACA;AAAA;EACE;;AASV;EACE;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAIF;AAAA;AAAA;EAGE;;AAGF;EACE;EACA;;AACA;AAAA;EAEE;;AAGJ;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;EACA;;AACA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAMJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAIA;EAEE;;AAKF;EAEE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;;AAMN;AAAA;AAAA;EAEE;EACA","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      /* Styles for Both Selector and Content Areas */\n      .autocomplete-option {\n        .content-type {\n          margin-bottom: 2px;\n          md-icon,\n          mat-icon {\n            margin-right: 4px;\n            height: 14px;\n            width: 14px;\n            min-height: 14px;\n            min-width: 14px;\n          }\n          .content-type-name {\n            font-weight: bold;\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n          }\n        }\n        .no-image-icon {\n          md-icon,\n          mat-icon {\n            height: 28px;\n            width: 28px;\n            min-height: 28px;\n            min-width: 28px;\n            svg g {\n              fill: #FFF;\n            }\n          }\n        }\n        .shapeholder {\n          width: 100%;\n          display: block;\n        }\n      }\n\n      .content-selector-autocomplete {\n        .column-title h3 {\n          margin: 0 0 5px;\n          font-size: 16px;\n        }\n      }\n\n\n\n      /* Selector Autocomplete Options */\n      md-autocomplete,\n      .content-selector {\n        margin-top: 12px;\n      }\n      .selector-filter md-checkbox {\n        padding-right: 10px;\n      }\n      .md-autocomplete-suggestions li {\n        height: 80px;\n      }\n      .content-selector-autocomplete {\n        .autocomplete-row {\n          padding: 4px 0;\n          border-bottom: 1px solid rgba(0,0,0,.1);\n          * {\n            line-height: 1.4;\n          }\n          .column-image {\n            .image-container {\n              margin-right: 18px;\n            }\n          }\n          h3 {\n            font-size: 14px;\n          }\n          .routing {\n            font-size: 13px;\n          }\n        }\n        .content {\n          .image,\n          .column-title {\n            opacity: .3;\n          }\n          md-icon.content-icon,\n          mat-icon.content-icon {\n            z-index: 5;\n            height: 40px;\n            width: 40px;\n            min-height: 40px;\n            min-width: 40px;\n            svg {\n              filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));\n              -webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));\n              g {\n                fill: #FFF;\n              }\n            }\n          }\n        }\n      }\n\n      /* Draggable Content List */\n\n      .selector-wrapper {\n        background: rgba(255,255,255,.4);\n        margin-top: 20px;\n        padding: 40px;\n      }\n\n      /* Based on Angular Material 8+ */\n\n      .content-list {\n        margin: 0 auto;\n        max-width: 600px;\n        min-height: 60px;\n        display: block;\n        border-radius: 4px;\n        overflow: hidden;\n      }\n      .content-box {\n        padding: 12px 16px;\n        color: rgba(0, 0, 0, 0.87);\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        box-sizing: border-box;\n        background: white;\n        font-size: 14px;\n      }\n      .content-box:last-child {\n        border: none;\n      }\n      .custom-ghost-placeholder {\n        background: rgba(0,0,0,.4);\n        min-height: 60px;\n        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n      }\n\n      /* Content List Custom */\n      .column-image,\n      .column-title,\n      .column-action {\n        float: left;\n      }\n\n      .column-image {\n        width: 15%;\n        padding-right: 10px;\n        .image,\n        .no-image-icon {\n          margin-right: 10px;\n        }\n      }\n      .column-title {\n        width: 70%;\n      }\n      .column-action {\n        width: 15%;\n        > * {\n          display: inline-block;\n          vertical-align: middle;\n          margin-bottom: 2px;\n          &:last-child {\n            margin-bottom: 0;\n          }\n        }\n      }\n      .content-box.cdk-drag-preview {\n        .column-image {\n          width: 15%;\n        }\n        .column-title {\n          width: 85%;\n        }\n      }\n\n      margin: 0 auto;\n      .routing {\n        color: #333;\n        font-size: 13px;\n      }\n      .content-list {\n        .content-list-header {\n          margin-bottom: 20px;\n          padding-bottom: 20px;\n          h3,\n          .note {\n            margin: 0;\n            display: inline-block;\n            vertical-align: text-bottom;\n            line-height: 1.2;\n          }\n          .note {\n            padding-left: 10px;\n          }\n        }\n        .content-message-box {\n          // extra information for the list messages (currently only used for an empty list)\n        }\n        .content-list-container {\n          width: 100%;\n        }\n        .content-list-row {\n          margin-bottom: 10px;\n          padding: 12px 16px;\n          background: rgba(0, 0, 0, 0.04);\n          border-radius: 2px;\n          cursor: pointer;\n          &.active {\n            // extra options for status >= 1\n          }\n          &.inactive {\n            // extra options for status < 1\n            background: #DDD;\n          }\n          &.published {\n            // extra options for status == 1\n          }\n          &.unpublished {\n            // extra options for published != 1\n            background: #DDD;\n          }\n        }\n        .btn.btn-delete, .btn.btn-edit {\n          float: right;\n          width: 35px;\n          min-width: unset;\n          height: 35px;\n          font-size: 10px;\n          margin-left: 12px;\n          padding: 0;\n          background: #fff;\n          box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n          &:hover {\n            background: #fff;\n            box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);\n          }\n          svg {\n            margin: 0 auto;\n            width: 60%;\n            g {\n              fill: #222;\n            }\n          }\n        }\n      }\n      .firefox .btn.btn-delete svg, .firefox .btn.btn-edit svg {\n        &,\n        g {\n          max-width: 28px;\n          max-height: 28px;\n        }\n      }\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,77 @@
+<h1 mat-dialog-title>Link Selector</h1>
+
+<div mat-dialog-content class="link-dialog-content">
+    <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 || !styled"></mat-progress-bar>
+    <div class="content-list" *ngIf="styled">
+        <!--[matTooltip]="isSelected(contentEntity) ? 'Selected' : 'Not Selected'"-->
+        <div class="content-list-row content-box"
+             [ngClass]="{'active': _.get(contentEntity, 'status') === 1, 'inactive' : _.get(contentEntity, 'status') !== 1, 'published': _.get(contentEntity, 'version.published') === 1, 'unpublished': _.get(contentEntity, 'version.published') !== 1, 'selected': isSelected(contentEntity)}"
+             (click)="select(contentEntity)"
+             *ngFor="let contentEntity of contentEntities">
+            <div class="content-list-container">
+                <div class="column-image position-anchor">
+                    <!-- This adds stratus-src lazy loading if bestImage isn't a third party service without image sizes, e.g. Video -->
+                    <div class="image position-all"
+                         *ngIf="_.has(contentEntity, 'version.bestImage._thumbnailUrl')"
+                         [attr.data-stratus-src]="!_.get(contentEntity, 'version.bestImage.service') ? true : false"
+                         [ngStyle]="{'background': 'url(' + _.get(contentEntity, 'version.bestImage._thumbnailUrl') + ') no-repeat center center', 'background-size': 'cover'}">
+                    </div>
+
+                    <!-- Icon for items with no image -->
+                    <div class="no-image-icon position-all"
+                         *ngIf="!_.has(contentEntity, 'version.bestImage._thumbnailUrl')"
+                         [ngClass]="_.get(contentEntity, 'contentType.class') + '-background-color'">
+
+                        <mat-icon class="content-type-icon position-center"
+                                  [svgIcon]="getSvg(Stratus.BaseUrl + (_.get(contentEntity, 'contentType.iconResourcePath') || _.get(contentEntity, 'iconResourcePath'))) | async">
+                            Icon
+                        </mat-icon>
+                    </div>
+
+                    <!-- Shapeholder -->
+                    <img class="shapeholder" [src]="Stratus.BaseUrl + 'sitetheorycore/images/shapeholder-square.png'">
+
+                </div>
+                <div class="column-title">
+                    <!-- _.has(contentEntity, 'iconResourcePath') || _.has(contentEntity, 'contentType.iconResourcePath') -->
+                    <div class="content-type" *ngIf="_.has(contentEntity, 'contentType.iconResourcePath')">
+                        <!--
+                        I disabled the position-center class on this one as it causes the icon
+                        to break away from the div and float to the top of the selector container
+                        -->
+                        <mat-icon class="content-type-icon"
+                                  [svgIcon]="getSvg(Stratus.BaseUrl + _.get(contentEntity, 'contentType.iconResourcePath')) | async">
+                            ContentType Icon
+                        </mat-icon>
+                        <span class="comment content-type-name font-body"
+                              [ngClass]="((_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name')) | lowercase) + '-color'"
+                              [textContent]="(_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name')) + ((_.get(contentEntity, 'status') !== 1) ? ' (hidden)' : '') + ((_.get(contentEntity, 'version.published') !== 1) ? ' (unpublished)' : '')">
+                        </span>
+                    </div>
+
+                    <!-- This include fallbacks in case a version is not present -->
+                    <h3 [innerHTML]="_.get(contentEntity, 'version.bestIdentifier') || _.get(contentEntity, 'name') || (_.get(contentEntity, 'contentType.controller') === 'Content\\Module' ? _.get(contentEntity, 'version.internalIdentifier') : 'Untitled ' + _.get(contentEntity, 'contentType.name') + ' (' + _.get(contentEntity, 'id') + ')')"></h3>
+                    <!-- TODO: make this clickable in new window -->
+                    <span class="routing"
+                          [textContent]="(_.has(contentEntity, 'routing') ? '/' + _.get(contentEntity, 'routing[0].url') : null) || _.get(contentEntity, 'description') || ''">
+                    </span>
+                </div>
+                <div class="column-action">
+                    <a mat-button
+                       *ngIf="_.has(contentEntity, 'contentType.editUrl')"
+                       [matTooltip]="'Edit ' + (_.get(contentEntity, 'contentType.name') || _.get(contentEntity, 'name'))"
+                       aria-label="Edit Item in New Window"
+                       class="btn btn-edit"
+                       (click)="goToUrl(contentEntity, '_blank');">
+                        <mat-icon svgIcon="selector_edit" aria-hidden="false" aria-label="Edit Item">Edit</mat-icon>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>