@stratusjs/angular 0.5.4 → 0.5.6

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","../core/root.component","./citation-dialog.component","./link-dialog.component","./media-dialog.component","./code-view-dialog.component","./code-mirror-bridge","@stratusjs/angularjs/services/registry","@stratusjs/core/environment","@stratusjs/core/events/eventManager","codemirror","@codemirror/lang-html","html2pdf","font-awesome","froala-plugins","froala-embedly","froala-font-awesome","froala-image-tui","../froala/plugins/citationManager","../froala/plugins/linkManager","../froala/plugins/mediaManager"],function(e,t){"use strict";var i,n,a,o,r,s,l,d,c,g,m,u,p,h,f,b,y,v,k,w,S,x,C,M,T=this&&this.__decorate||function(e,t,i,n){var a,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(o<3?a(r):o>3?a(t,i,r):a(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r},E=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){o=e},function(e){r=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){y=e},function(e){v=e},function(e){k=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","editor",w=b.cookie("env")?"":".min",S=`${l.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^\/]*$/,"").replace(/\/dist\/$/,"/src/")}`,x=`${l.Stratus.BaseUrl}${boot.configuration.paths["froala-editor"].replace(/js\/[^\/]*$/,"")}`,C=(e,t)=>d.default.has(e,t)&&!d.default.isEmpty(d.default.get(e,t)),M=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=!!b.cookie("env"),this.editor="froala",this._=d.default,this.has=C,this.log=console.log,this.Stratus=l.Stratus,this.registry=new f.Registry,this.onChange=new o.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.debounceSave=!0,this.debounceTime=5e3,this.forceSave=!0,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:["linkManager","formatOL","formatUL","indent","outdent","quote","paragraphFormat","paragraphStyle","alignLeft","alignCenter","alignRight","alignJustify"],moreRich:["mediaManager","insertTable","insertImage","insertVideo","insertFile","citationInsert","insertHR","specialCharacters"],moreMisc:["html","undo","redo","fullscreen","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:{fromTextArea:(e,t)=>new h.CodeMirrorBridge({extensions:[v.basicSetup,k.html({}),v.EditorView.lineWrapping]}).fromTextArea(e,t)},codeMirrorOptions:{indentWithTabs:!1,lineNumbers:!0,lineWrapping:!0,mode:"text/html",tabMode:"space",tabSize:4},fileInsertButtons:["fileBack"],fileUploadURL:"https://app.sitetheory.io/?session="+b.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","stratus-citation-notitle","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","stratus-.+"],htmlRemoveTags:[],htmlSimpleAmpersand:!1,imageInsertButtons:["imageBack","|","imageUpload","imageByURL"],imageUpload:!0,imageUploadRemoteUrls:!0,imageUploadURL:"https://app.sitetheory.io/?session="+b.cookie("SITETHEORY"),imageManagerPageSize:20,imageManagerScrollOffset:10,imageManagerLoadMethod:"GET",imageManagerLoadURL:"/Api/Media?payload-only=true",linkEditButtons:["linkOpen","linkManagerEdit","linkRemove"],linkInsertButtons:["linkBack"],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","citationManager","lists","mediaManager","paragraphFormat","paragraphStyle","print","quickInsert","quote","save","specialCharacters","table","url","video","wordPaste"],quickInsertButtons:["media","link","video","embedly","table","ul","ol","hr"],scrollableContainer:l.Stratus.Environment.get("viewPort")||"body",spellcheck:!0,toolbarSticky:!0,toolbarButtons:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:3},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:8},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:1},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:1}},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:0}},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:0}},useClasses:!0,videoInsertButtons:["videoBack","|","videoByURL","videoEmbed","videoUpload"],videoUpload:!0,videoUploadURL:"https://app.sitetheory.io/?session="+b.cookie("SITETHEORY")},this.uid=d.default.uniqueId(`sa_${d.default.snakeCase("editor")}_component_`),l.Stratus.Instances[this.uid]=this,l.Stratus.Internals.LoadCss([`${S}editor/editor.component${w}.css`,`${x}css/froala_editor.pkgd${w}.css`,`${x}css/third_party/embedly${w}.css`,`${x}css/third_party/font_awesome${w}.css`,`${x}css/third_party/image_tui${w}.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","debounceSave","debounceTime","forceSave","froalaEditorDirective","froalaButtons","froalaStandardButtons","froalaConfig","sanitizer","ref","elementRef","fb","dialog","ngOnInit","modelSave","listDuplicates","normalizeIn","normalizeOut","changeImgSize","handleError","fetchData","dataDefer","dataRef","onDataChange","created","changedEditor","onChangeEvent","onFocus","onBlur","bypassHTML","trigger","openCitationDialog","openLinkDialog","openMediaDialog","openCodeViewDialog","hydrate","disableRefresh","stagger","reloading","refresh","ngOnDestroy"]),this.fetchData().then(e=>{if(!(e&&e instanceof y.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 o.Observable(e=>(this.dev&&console.warn("[observable] creating subscriber on "+this.uid,e),this.dataDefer(e))),this.dataSub.pipe(r.debounce(()=>o.timer(250)),r.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;const e=this.form.get("dataString");this.debounceSave?(e.valueChanges.pipe(r.debounce(()=>o.timer(this.debounceTime)),r.catchError(this.handleError)).subscribe(e=>this.modelSave(e)),e.valueChanges.pipe(r.debounce(()=>o.timer(250)),r.catchError(this.handleError)).subscribe(e=>{this.model.changedExternal||(this.model.changedExternal=!0,this.model.trigger("change"))})):e.valueChanges.forEach(e=>this.modelSave(e)),this.dev&&this.listDuplicates(this.froalaConfig)}modelSave(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.model.changedExternal=!1,this.forceSave&&!d.default.isEmpty(this.model.getIdentifier())&&this.model.save()}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):"citation-input"===e?this.openCitationDialog(i):"link-library"===e?this.openLinkDialog(i,t):"code-view"===e&&this.openCodeViewDialog()}openCitationDialog(e){const t=this.dialog.open(g.CitationDialogComponent,{width:"1000px",data:{editor:this,eventManager:e,form:this.form,model:this.model,property:this.property}}),i=this;t.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(i.refresh(),this.dev&&e&&console.log("citation dialog result:",e))})}openLinkDialog(e,t){const i=this.dialog.open(m.LinkDialogComponent,{width:"500px",data:{editor:this,eventManager:e,element:t,form:this.form,model:this.model,property:this.property}});this.refresh();const n=this;i.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(n.refresh(),this.dev&&e&&console.log("link dialog result:",e))})}openMediaDialog(e){const t=this.dialog.open(u.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(p.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))})}},T([i.Input(),E("design:type",String)],M.prototype,"target",void 0),T([i.Input(),E("design:type",String)],M.prototype,"targetSuffix",void 0),T([i.Input(),E("design:type",Number)],M.prototype,"id",void 0),T([i.Input(),E("design:type",Boolean)],M.prototype,"manifest",void 0),T([i.Input(),E("design:type",Boolean)],M.prototype,"decouple",void 0),T([i.Input(),E("design:type",Boolean)],M.prototype,"direct",void 0),T([i.Input(),E("design:type",Object)],M.prototype,"api",void 0),T([i.Input(),E("design:type",String)],M.prototype,"urlRoot",void 0),T([i.Input(),E("design:type",String)],M.prototype,"property",void 0),M=T([i.Component({selector:"sa-editor",templateUrl:`${S}/editor/editor.component${w}.html`}),E("design:paramtypes",[s.DomSanitizer,i.ChangeDetectorRef,i.ElementRef,n.FormBuilder,a.MatDialog])],M),e("EditorComponent",M)}}});
+System.register(["@angular/core","@angular/forms","@angular/material/dialog","rxjs","rxjs/operators","@angular/platform-browser","@stratusjs/runtime/stratus","lodash","../core/root.component","./citation-dialog.component","./link-dialog.component","./media-dialog.component","./code-view-dialog.component","./code-mirror-bridge","@stratusjs/angularjs/services/registry","@stratusjs/core/environment","@stratusjs/core/events/eventManager","codemirror","@codemirror/lang-html","html2pdf","font-awesome","froala-plugins","froala-embedly","froala-font-awesome","froala-image-tui","../froala/plugins/citationManager","../froala/plugins/linkManager","../froala/plugins/mediaManager"],function(e,t){"use strict";var i,n,a,o,r,s,l,d,c,g,u,m,h,p,f,b,v,y,k,w,S,x,C,D,M=this&&this.__decorate||function(e,t,i,n){var a,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(o<3?a(r):o>3?a(t,i,r):a(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r},E=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){o=e},function(e){r=e},function(e){s=e},function(e){l=e},function(e){d=e},function(e){c=e},function(e){g=e},function(e){u=e},function(e){m=e},function(e){h=e},function(e){p=e},function(e){f=e},function(e){b=e},function(e){v=e},function(e){y=e},function(e){k=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","editor",w=b.cookie("env")?"":".min",S=`${l.Stratus.BaseUrl}${boot.configuration.paths["@stratusjs/angular/*"].replace(/[^\/]*$/,"").replace(/\/dist\/$/,"/src/")}`,x=`${l.Stratus.BaseUrl}${boot.configuration.paths["froala-editor"].replace(/js\/[^\/]*$/,"")}`,C=(e,t)=>d.default.has(e,t)&&!d.default.isEmpty(d.default.get(e,t)),D=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=!!b.cookie("env"),this.debug=!!b.cookie("debug_editor"),this.editor="froala",this._=d.default,this.has=C,this.log=console.log,this.Stratus=l.Stratus,this.registry=new f.Registry,this.onChange=new o.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.incomingData="",this.outgoingData="",this.debounceSave=!0,this.debounceTime=5e3,this.forceSave=!1,this.froalaStandardButtons={moreText:["bold","italic","underline","strikeThrough","subscript","superscript","fontFamily","fontSize","textColor","backgroundColor","inlineClass","inlineStyle","clearFormatting"],moreParagraph:["linkManager","formatOL","formatUL","indent","outdent","quote","paragraphFormat","paragraphStyle","alignLeft","alignCenter","alignRight","alignJustify"],moreRich:["mediaManager","insertTable","insertImage","insertVideo","insertFile","citationInsert","insertHR","specialCharacters"],moreMisc:["html","undo","redo","fullscreen","print","selectAll","help"]},this.froalaConfig={attribution:!1,key:l.Stratus.Environment.get("froalaKey"),zIndex:9999,events:{initialized:e=>{this.froalaEditorDirective=e},blur:e=>this.onBlur(e),focus:e=>this.onFocus(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.cookie("codemirror")?{fromTextArea:(e,t)=>new p.CodeMirrorBridge({extensions:[y.minimalSetup,k.html({})]}).fromTextArea(e,t)}:null,codeMirrorOptions:{indentWithTabs:!1,lineNumbers:!0,lineWrapping:!0,mode:"text/html",tabMode:"space",tabSize:4},fileInsertButtons:["fileBack"],fileUploadURL:"https://app.sitetheory.io/?session="+b.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","form","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","stratus-base","stratus-citation","stratus-citation-notitle","stratus-content-selector","stratus-date-time","stratus-error-message","stratus-facebook","stratus-filter","stratus-help","stratus-image-carousel","stratus-json-editor","stratus-media-details","stratus-media-library","stratus-media-selector","stratus-media-short-details","stratus-media-uploader","stratus-option-value","stratus-pagination","stratus-permissions","stratus-publish","stratus-search","stratus-tag","stratus-twitter-feed","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","stratus-.+"],htmlRemoveTags:[],htmlSimpleAmpersand:!1,imageInsertButtons:["imageBack","|","imageUpload","imageByURL"],imageUpload:!0,imageUploadRemoteUrls:!0,imageUploadURL:"https://app.sitetheory.io/?session="+b.cookie("SITETHEORY"),imageManagerPageSize:20,imageManagerScrollOffset:10,imageManagerLoadMethod:"GET",imageManagerLoadURL:"/Api/Media?payload-only=true",linkEditButtons:["linkOpen","linkManagerEdit","linkRemove"],linkInsertButtons:["linkBack"],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","citationManager","lists","mediaManager","paragraphFormat","paragraphStyle","print","quickInsert","quote","save","specialCharacters","table","url","video","wordPaste"],quickInsertButtons:["media","link","video","embedly","table","ul","ol","hr"],scrollableContainer:l.Stratus.Environment.get("viewPort")||"body",spellcheck:!0,toolbarSticky:!0,toolbarButtons:{moreText:{buttons:this.froalaStandardButtons.moreText,buttonsVisible:3},moreParagraph:{buttons:this.froalaStandardButtons.moreParagraph,buttonsVisible:8},moreRich:{buttons:this.froalaStandardButtons.moreRich,buttonsVisible:1},moreMisc:{buttons:this.froalaStandardButtons.moreMisc,align:"right",buttonsVisible:1}},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:0}},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:0}},useClasses:!0,videoInsertButtons:["videoBack","|","videoByURL","videoEmbed","videoUpload"],videoUpload:!0,videoUploadURL:"https://app.sitetheory.io/?session="+b.cookie("SITETHEORY")},this.uid=d.default.uniqueId(`sa_${d.default.snakeCase("editor")}_component_`),l.Stratus.Instances[this.uid]=this,l.Stratus.Internals.LoadCss([`${S}editor/editor.component${w}.css`,`${x}css/froala_editor.pkgd${w}.css`,`${x}css/third_party/embedly${w}.css`,`${x}css/third_party/font_awesome${w}.css`,`${x}css/third_party/image_tui${w}.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","incomingData","outgoingData","debounceSave","debounceTime","forceSave","froalaEditorDirective","froalaStandardButtons","froalaConfig","sanitizer","ref","elementRef","fb","dialog","ngOnInit","modelSave","listDuplicates","normalizeIn","normalizeOut","changeImgSize","handleError","fetchData","dataDefer","dataRef","onDataChange","created","changedEditor","onChangeEvent","onFocus","onBlur","bypassHTML","trigger","openCitationDialog","openLinkDialog","openMediaDialog","openCodeViewDialog","hydrate","disableRefresh","stagger","reloading","refresh","ngOnDestroy"]),this.fetchData().then(e=>{if(!(e&&e instanceof v.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 o.Observable(e=>(this.dev&&console.warn("[observable] creating subscriber on "+this.uid,e),this.dataDefer(e))),this.dataSub.pipe(r.debounce(()=>o.timer(250)),r.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;const e=this.form.get("dataString");this.debounceSave?(e.valueChanges.pipe(r.debounce(()=>o.timer(this.debounceTime)),r.catchError(this.handleError)).subscribe(e=>this.modelSave(e)),e.valueChanges.pipe(r.debounce(()=>o.timer(250)),r.catchError(this.handleError)).subscribe(e=>{this.model.changedExternal||(this.model.changedExternal=!0,this.model.trigger("change"))}),e.valueChanges.forEach(e=>this.outgoingData=e)):e.valueChanges.forEach(e=>this.modelSave(e)),this.dev&&this.listDuplicates(this.froalaConfig)}modelSave(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.debounceSave&&(this.model.changedExternal=!1),this.forceSave&&!d.default.isEmpty(this.model.getIdentifier())&&this.model.save()}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.incomingData),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.incomingData=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.dev&&this.debug&&console.warn("[onFocus] triggered on "+this.uid),this.focused=!0,this.blurred=!1}onBlur(e){this.dev&&this.debug&&console.warn("[onBlur] triggered on "+this.uid),this.focused=!1,this.blurred=!0,this.debounceSave&&this.modelSave(this.outgoingData)}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):"citation-input"===e?this.openCitationDialog(i):"link-library"===e?this.openLinkDialog(i,t):"code-view"===e&&this.openCodeViewDialog()}openCitationDialog(e){const t=this.dialog.open(g.CitationDialogComponent,{width:"1000px",data:{editor:this,eventManager:e,form:this.form,model:this.model,property:this.property}}),i=this;t.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(i.refresh(),this.dev&&e&&console.log("citation dialog result:",e))})}openLinkDialog(e,t){const i=this.dialog.open(u.LinkDialogComponent,{width:"500px",data:{editor:this,eventManager:e,element:t,form:this.form,model:this.model,property:this.property}});this.refresh();const n=this;i.afterClosed().subscribe(e=>{e&&!d.default.isEmpty(e)&&(n.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(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))})}},M([i.Input(),E("design:type",String)],D.prototype,"target",void 0),M([i.Input(),E("design:type",String)],D.prototype,"targetSuffix",void 0),M([i.Input(),E("design:type",Number)],D.prototype,"id",void 0),M([i.Input(),E("design:type",Boolean)],D.prototype,"manifest",void 0),M([i.Input(),E("design:type",Boolean)],D.prototype,"decouple",void 0),M([i.Input(),E("design:type",Boolean)],D.prototype,"direct",void 0),M([i.Input(),E("design:type",Object)],D.prototype,"api",void 0),M([i.Input(),E("design:type",String)],D.prototype,"urlRoot",void 0),M([i.Input(),E("design:type",String)],D.prototype,"property",void 0),D=M([i.Component({selector:"sa-editor",templateUrl:`${S}/editor/editor.component${w}.html`}),E("design:paramtypes",[s.DomSanitizer,i.ChangeDetectorRef,i.ElementRef,n.FormBuilder,a.MatDialog])],D),e("EditorComponent",D)}}});

package/src/editor/editor.component.ts

@@ -121,7 +121,7 @@ import {
 } from 'ts-transformer-keys'
 
 // Froala External Requirements (Before Plugins are Loaded)
-import {EditorView, basicSetup} from 'codemirror'
+import {EditorView, basicSetup, minimalSetup} from 'codemirror'
 import {html} from '@codemirror/lang-html'
 import 'html2pdf'
 import 'font-awesome'
@@ -217,10 +217,10 @@ const has = (object: object, path: string) => _.has(object, path) && !_.isEmpty(
 export class EditorComponent extends RootComponent implements OnInit, TriggerInterface { // implements OnInit, OnChanges
 
     // Basic Component Settings
-    title = moduleName + '_component'
+    title = `${moduleName}_component`
     uid: string
     dev = !!cookie('env')
-    debug: true
+    debug = !!cookie(`debug_${moduleName}`)
     editor: 'froala'|'angular-editor'|'quill' = 'froala'
 
     // Registry Attributes
@@ -274,14 +274,15 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         dataString: new FormControl(),
     })
     dataChangeLog: string[] = []
-    dataString = ''
+    incomingData = ''
+    outgoingData = ''
 
     // Debounce Saving Controls
     debounceSave = true
     debounceTime = 5000
 
     // Model Saving Controls
-    forceSave = true
+    forceSave = false
 
     // Child Components
     froalaEditorDirective: FroalaEditorDirective
@@ -393,15 +394,6 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
     }
     /* */
 
-    // Froala 2 Buttons (For Reference)
-    // 'insertOrderedList', 'insertUnorderedList', 'createLink', 'table'
-    froalaButtons: string[] = [
-        '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'
-    ]
-
     froalaStandardButtons = {
         moreText: [
             'bold',
@@ -481,6 +473,10 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                 // console.log('initialized:', editor.html.get(), editor, froalaEditorDirective)
                 this.froalaEditorDirective = froalaEditorDirective
             },
+            // blur: this.onBlur,
+            blur: (event: FocusEvent) => this.onBlur(event),
+            // FIXME: Froala doesn't support focus events, so this never fires...
+            focus: (event: FocusEvent) => this.onFocus(event),
             // bound to Froala Editor
             // contentChanged () {
             //     const editor = this
@@ -506,12 +502,13 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             wrap_line_length: 0
         },
         // fromTextArea
-        codeMirror: {
+        codeMirror: !cookie('codemirror') ? null : {
             fromTextArea: (el: HTMLTextAreaElement, opts: LooseObject) => {
                 // Note: We're instantiating a Bridge Class to act as an intermediate for Froala's legacy implementation.
                 return new CodeMirrorBridge({
                     extensions: [
-                        basicSetup,
+                        // basicSetup,
+                        minimalSetup,
                         html({
                             // extraTags: [
                             //     'sa-editor'
@@ -521,7 +518,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                             // ],
                         }),
                         // TODO: Make this an optional extension, based on options
-                        EditorView.lineWrapping
+                        // EditorView.lineWrapping
                     ]
                 }).fromTextArea(el, opts)
             }
@@ -637,6 +634,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         ],
         htmlAllowedEmptyTags: [
             'textarea', 'a', 'iframe', 'object', 'video', 'style', 'script',
+            'form',
             // '.fa', '.fr-emoticon', '.fr-inner',
             // 'path', 'line',
             'hr', 'div',
@@ -671,7 +669,29 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             // AngularJS Material Secondary Tags
             'md-svg-src',
             // Stratus AngularJS Tags
+            'stratus-base',
+            'stratus-citation',
             'stratus-citation-notitle',
+            'stratus-content-selector',
+            'stratus-date-time',
+            'stratus-error-message',
+            'stratus-facebook',
+            'stratus-filter',
+            'stratus-help',
+            'stratus-image-carousel',
+            'stratus-json-editor',
+            'stratus-media-details',
+            'stratus-media-library',
+            'stratus-media-selector',
+            'stratus-media-short-details',
+            'stratus-media-uploader',
+            'stratus-option-value',
+            'stratus-pagination',
+            'stratus-permissions',
+            'stratus-publish',
+            'stratus-search',
+            'stratus-tag',
+            'stratus-twitter-feed',
             // Stratus Angular+ Tags
             'sa-boot',
             'sa-editor',
@@ -865,7 +885,9 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             'sa-.+'
         ],
         pasteDeniedTags: [
-            'form', 'input', 'label',
+            'form',
+            'input',
+            'label',
             'style'
         ],
         pastePlain: false,
@@ -1063,7 +1085,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         this.hydrate(elementRef, sanitizer, keys<EditorComponent>())
 
         // Data Connections
-        // TODO: Spelunk through this code to determine why I keep getting an empty component...
+        // TODO: Spelunk through this code to determine why I am getting an empty component on occasion...
         this.fetchData()
             .then(data => {
                 if (!data || !(data instanceof EventManager)) {
@@ -1155,11 +1177,16 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
                 this.model.changedExternal = true
                 this.model.trigger('change')
             })
+            // Pipe for outgoingData
+            dataControl.valueChanges.forEach(
+                (value: string) => this.outgoingData = value
+            )
         } else {
             dataControl.valueChanges.forEach(
                 (value: string) => this.modelSave(value)
             )
         }
+        // Detect and list duplicates
         if (this.dev) {
             this.listDuplicates(this.froalaConfig)
         }
@@ -1201,7 +1228,13 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             this.property,
             this.normalizeOut(innerHTML || value)
         )
-        this.model.changedExternal = false
+
+        // Remove the changedExternal flag if using debounceSave
+        if (this.debounceSave) {
+            this.model.changedExternal = false
+        }
+
+        // If enabled, Force Save on Persisted Models
         if (this.forceSave && !_.isEmpty(this.model.getIdentifier())) {
             this.model.save()
         }
@@ -1369,7 +1402,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
             }, 250)
             return
         }
-        const prevString = _.clone(this.dataString)
+        const prevString = _.clone(this.incomingData)
         const dataString = this.dataRef()
         // ensure changes have occurred
         if (prevString === dataString) {
@@ -1403,7 +1436,7 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
         if (!this.model) {
             return ''
         }
-        return this.dataString = this.normalizeIn(
+        return this.incomingData = this.normalizeIn(
             this.model.get(this.property)
         )
     }
@@ -1439,24 +1472,33 @@ export class EditorComponent extends RootComponent implements OnInit, TriggerInt
     }
 
     // changedEditor(event: EditorChangeContent | EditorChangeSelection) {
-    changedEditor(event: any) {
+    changedEditor(event: Event) {
         console.log('editor-change:', event)
     }
 
-    onChangeEvent($event: any) {
-        console.log('change:', $event)
+    onChangeEvent(event: Event) {
+        console.log('change:', event)
     }
 
-    onFocus($event: any) {
-        // console.log('focus:', $event)
+    onFocus(event: FocusEvent) {
+        if (this.dev && this.debug) {
+            console.warn(`[onFocus] triggered on ${this.uid}`)
+        }
         this.focused = true
         this.blurred = false
     }
 
-    onBlur($event: any) {
-        // console.log('blur:', $event)
+    onBlur(event: FocusEvent) {
+        if (this.dev && this.debug) {
+            console.warn(`[onBlur] triggered on ${this.uid}`)
+        }
         this.focused = false
         this.blurred = true
+        // Handle debounce triggers
+        if (!this.debounceSave) {
+            return
+        }
+        this.modelSave(this.outgoingData)
     }
 
     bypassHTML(html: string) {

package/src/selector/selector.component.css

@@ -191,10 +191,11 @@ sa-selector .column-image .no-image-icon {
   margin-right: 10px;
 }
 sa-selector .column-title {
-  width: 70%;
+  width: 60%;
+  padding-right: 10px;
 }
 sa-selector .column-action {
-  width: 15%;
+  width: 25%;
 }
 sa-selector .column-action > * {
   display: inline-block;
@@ -248,26 +249,26 @@ sa-selector .selected-list .selected-list-row.inactive {
 sa-selector .selected-list .selected-list-row.unpublished {
   background: #DDD;
 }
-sa-selector .selected-list .btn.btn-delete, sa-selector .selected-list .btn.btn-edit {
+sa-selector .selected-list .btn.btn-delete, sa-selector .selected-list .btn.btn-edit, sa-selector .selected-list .btn.btn-status {
   float: right;
   width: 35px;
   min-width: unset;
   height: 35px;
   font-size: 10px;
-  margin-left: 12px;
+  margin-left: 3px;
   padding: 0;
   background: #fff;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
 }
-sa-selector .selected-list .btn.btn-delete:hover, sa-selector .selected-list .btn.btn-edit:hover {
+sa-selector .selected-list .btn.btn-delete:hover, sa-selector .selected-list .btn.btn-edit:hover, sa-selector .selected-list .btn.btn-status:hover {
   background: #fff;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
 }
-sa-selector .selected-list .btn.btn-delete svg, sa-selector .selected-list .btn.btn-edit svg {
+sa-selector .selected-list .btn.btn-delete svg, sa-selector .selected-list .btn.btn-edit svg, sa-selector .selected-list .btn.btn-status svg {
   margin: 0 auto;
   width: 60%;
 }
-sa-selector .selected-list .btn.btn-delete svg g, sa-selector .selected-list .btn.btn-edit svg g {
+sa-selector .selected-list .btn.btn-delete svg g, sa-selector .selected-list .btn.btn-edit svg g, sa-selector .selected-list .btn.btn-status svg g {
   fill: #222;
 }
 

package/src/selector/selector.component.css.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/angular/src/selector/selector.component.scss"],"names":[],"mappings":"AACA;AAME;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;AAAA;AAAA;EACE;EACA;;;AAMF;AAAA;AAAA;EACE;EACA;;;AAMJ;AACA;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;AAEA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAIF;AAKE;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;EACE;EACA;;AACA;AAAA;EAEE;;AAGJ;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;;;AAMN;EACE;;AAEF;EACE;;;AAMJ;EACE;;AACA;EACE;EACA;;AAGA;EACE;EACA;;AACA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAMJ;EACE;;AAEF;EACE;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;;;AAOR;AAAA;AAAA;EAEE;EACA","file":"selector.component.css","sourcesContent":["\n/* Styles for Both Selector and Selected Areas */\n\n.admin-select-content,\n.autocomplete-option,\n.sa-selector,\n.selected-box.cdk-drag-preview {\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.content-selector-autocomplete,\n.admin-select-content,\n.selected-box.cdk-drag-preview {\n  .column-title h3 {\n    margin: 0 0 5px;\n    font-size: 16px;\n  }\n}\n\n\n\n/* Selector Autocomplete Options */\nmd-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  .selected {\n    .image,\n    .column-title {\n      opacity: .3;\n    }\n    md-icon.selected-icon,\n    mat-icon.selected-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\n\n/* Draggable Selected 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.selected-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.selected-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  cursor: move;\n  background: white;\n  font-size: 14px;\n}\n.selected-box.cdk-drag-preview {\n  box-sizing: border-box;\n  border-radius: 4px;\n  box-shadow: 2px 2px 4px rgba(0,0,0,.3)\n}\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n.selected-box:last-child {\n  border: none;\n}\n.selected-list.cdk-drop-list-dragging .selected-box:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\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\n/* Selected List Custom */\n\n\nsa-selector,\n.selected-box.cdk-drag-preview {\n  .column-image,\n  .column-title,\n  .column-action {\n    float: left;\n  }\n}\n\nsa-selector {\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}\n.selected-box.cdk-drag-preview {\n  .column-image {\n    width: 15%;\n  }\n  .column-title {\n    width: 85%;\n  }\n}\n\n\n\nsa-selector {\n  margin: 0 auto;\n  .routing {\n    color: #333;\n    font-size: 13px;\n  }\n  .selected-list {\n    .selected-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    .selected-message-box {\n      // extra information for the list messages (currently only used for an empty list)\n    }\n    .selected-list-container {\n      width: 100%;\n    }\n    .selected-list-row {\n      margin-bottom: 10px;\n      padding: 12px 16px;\n      background: rgba(0, 0, 0, 0.04);\n      border-radius: 2px;\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}\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"]}
+{"version":3,"sources":["packages/angular/src/selector/selector.component.scss"],"names":[],"mappings":"AACA;AAME;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIN;AAAA;AAAA;AAAA;EACE;EACA;;;AAMF;AAAA;AAAA;EACE;EACA;;;AAMJ;AACA;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;AAEA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAIF;AAKE;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;EACE;EACA;;AACA;AAAA;EAEE;;AAGJ;EACE;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;;;AAMN;EACE;;AAEF;EACE;;;AAMJ;EACE;;AACA;EACE;EACA;;AAGA;EACE;EACA;;AACA;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;;AAMJ;EACE;;AAEF;EACE;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;;;AAOR;AAAA;AAAA;EAEE;EACA","file":"selector.component.css","sourcesContent":["\n/* Styles for Both Selector and Selected Areas */\n\n.admin-select-content,\n.autocomplete-option,\n.sa-selector,\n.selected-box.cdk-drag-preview {\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.content-selector-autocomplete,\n.admin-select-content,\n.selected-box.cdk-drag-preview {\n  .column-title h3 {\n    margin: 0 0 5px;\n    font-size: 16px;\n  }\n}\n\n\n\n/* Selector Autocomplete Options */\nmd-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  .selected {\n    .image,\n    .column-title {\n      opacity: .3;\n    }\n    md-icon.selected-icon,\n    mat-icon.selected-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\n\n/* Draggable Selected 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.selected-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.selected-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  cursor: move;\n  background: white;\n  font-size: 14px;\n}\n.selected-box.cdk-drag-preview {\n  box-sizing: border-box;\n  border-radius: 4px;\n  box-shadow: 2px 2px 4px rgba(0,0,0,.3)\n}\n.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n.selected-box:last-child {\n  border: none;\n}\n.selected-list.cdk-drop-list-dragging .selected-box:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\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\n/* Selected List Custom */\n\n\nsa-selector,\n.selected-box.cdk-drag-preview {\n  .column-image,\n  .column-title,\n  .column-action {\n    float: left;\n  }\n}\n\nsa-selector {\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: 60%;\n    padding-right: 10px;\n  }\n  .column-action {\n    width: 25%;\n    > * {\n      display: inline-block;\n      vertical-align: middle;\n      margin-bottom: 2px;\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n.selected-box.cdk-drag-preview {\n  .column-image {\n    width: 15%;\n  }\n  .column-title {\n    width: 85%;\n  }\n}\n\n\n\nsa-selector {\n  margin: 0 auto;\n  .routing {\n    color: #333;\n    font-size: 13px;\n  }\n  .selected-list {\n    .selected-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    .selected-message-box {\n      // extra information for the list messages (currently only used for an empty list)\n    }\n    .selected-list-container {\n      width: 100%;\n    }\n    .selected-list-row {\n      margin-bottom: 10px;\n      padding: 12px 16px;\n      background: rgba(0, 0, 0, 0.04);\n      border-radius: 2px;\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, .btn.btn-status {\n      float: right;\n      width: 35px;\n      min-width: unset;\n      height: 35px;\n      font-size: 10px;\n      margin-left: 3px;\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}\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"]}

package/src/selector/selector.component.html

@@ -96,19 +96,26 @@
                 </div>
                 <div class="column-action">
                     <a mat-button
-                            [matTooltip]="'Delete ' + (_.get(selectedModel, 'contentType.name') || _.get(selectedModel, 'name'))"
+                            [matTooltip]="'Delete ' + (_.get(selectedModel, 'contentType.name') || _.get(selectedModel, 'name')) + ' [THIS COLLECTION ONLY]'"
                             aria-label="Delete Item"
                             class="btn btn-delete"
                             (click)="remove(selectedModel)">
                         <mat-icon svgIcon="selector_delete" aria-hidden="false" aria-label="Delete Item">Delete</mat-icon>
                     </a>
+                    <a mat-button
+                       [matTooltip]="'Toggle ' + (_.get(selectedModel, 'contentType.name') || _.get(selectedModel, 'name')) + ' Status ' + (_.get(selectedModel, 'status') ? 'Off' : 'On') + ' [ALL CONTEXTS]'"
+                       aria-label="Toggle Status"
+                       class="btn btn-status"
+                       (click)="toggleStatus(selectedModel)">
+                        <mat-icon svgIcon="selector_status" aria-hidden="false" aria-label="Toggle Status">Toggle Status</mat-icon>
+                    </a>
                     <a mat-button
                             *ngIf="has(selectedModel, 'contentType.editUrl')"
                             [matTooltip]="'Edit ' + (_.get(selectedModel, 'contentType.name') || _.get(selectedModel, 'name'))"
                             aria-label="Edit Item in New Window"
                             class="btn btn-edit"
                             (click)="goToUrl(selectedModel, '_blank');">
-                        <mat-icon svgIcon="selector_edit" aria-hidden="false" aria-label="Edit Item">Edit</mat-icon>
+                        <mat-icon svgIcon="selector_edit" aria-hidden="false" aria-label="Edit">Edit</mat-icon>
                     </a>
                 </div>
             </div>

package/src/selector/selector.component.js

@@ -1,4 +1,4 @@
-System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "rxjs", "@angular/platform-browser", "@angular/material/icon", "@stratusjs/runtime/stratus", "lodash", "@stratusjs/core/environment", "../core/root.component", "@stratusjs/angularjs/services/registry", "@stratusjs/core/events/eventManager"], function (exports_1, context_1) {
+System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "rxjs", "@angular/platform-browser", "@angular/material/icon", "@stratusjs/runtime/stratus", "lodash", "@stratusjs/core/environment", "../core/root.component", "@stratusjs/angularjs/services/registry", "@stratusjs/core/events/eventManager", "@stratusjs/core/datastore/xhr"], function (exports_1, context_1) {
     "use strict";
     var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -9,7 +9,7 @@ System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "r
     var __metadata = (this && this.__metadata) || function (k, v) {
         if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
     };
-    var core_1, forms_1, drag_drop_1, rxjs_1, platform_browser_1, icon_1, stratus_1, lodash_1, environment_1, root_component_1, registry_1, eventManager_1, systemDir, moduleName, min, localDir, has, SelectorComponent;
+    var core_1, forms_1, drag_drop_1, rxjs_1, platform_browser_1, icon_1, stratus_1, lodash_1, environment_1, root_component_1, registry_1, eventManager_1, xhr_1, systemDir, moduleName, min, localDir, has, SelectorComponent;
     var __moduleName = context_1 && context_1.id;
     return {
         setters: [
@@ -48,6 +48,9 @@ System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "r
             },
             function (eventManager_1_1) {
                 eventManager_1 = eventManager_1_1;
+            },
+            function (xhr_1_1) {
+                xhr_1 = xhr_1_1;
             }
         ],
         execute: function () {
@@ -79,6 +82,7 @@ System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "r
                     this.dataSub = new rxjs_1.Observable(subscriber => this.dataDefer(subscriber));
                     lodash_1.default.forEach({
                         selector_delete: `${stratus_1.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/delete.svg`,
+                        selector_status: `${stratus_1.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/visibility.svg`,
                         selector_edit: `${stratus_1.Stratus.BaseUrl}sitetheorycore/images/icons/actionButtons/edit.svg`
                     }, (value, key) => iconRegistry.addSvgIcon(key, sanitizer.bypassSecurityTrustResourceUrl(value)).getNamedSvgIcon(key));
                     stratus_1.Stratus.Internals.CssLoader(`${localDir}${moduleName}/${moduleName}.component${min}.css`)
@@ -92,7 +96,7 @@ System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "r
                         this.styled = true;
                         this.refresh();
                     });
-                    this.hydrate(elementRef, sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "ignorePriority", "_", "has", "log", "Stratus", "selectCtrl", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "styled", "empty", "iconRegistry", "sanitizer", "ref", "elementRef", "drop", "goToUrl", "remove", "fetchData", "dataDefer", "dataRef", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
+                    this.hydrate(elementRef, sanitizer, ["title", "uid", "target", "targetSuffix", "id", "manifest", "decouple", "direct", "api", "urlRoot", "type", "property", "endpoint", "ignorePriority", "_", "has", "log", "Stratus", "selectCtrl", "registry", "fetched", "data", "collection", "model", "dataSub", "onChange", "subscriber", "svgIcons", "styled", "empty", "iconRegistry", "sanitizer", "ref", "elementRef", "drop", "goToUrl", "toggleStatus", "remove", "fetchData", "dataDefer", "dataRef", "onDataChange", "prioritize", "getSvg", "addSvgIcon", "hydrate", "disableRefresh", "stagger", "reloading", "refresh", "ngOnDestroy"]);
                     this.fetchData()
                         .then(data => {
                         if (!data || !(data instanceof eventManager_1.EventManager)) {
@@ -130,6 +134,38 @@ System.register(["@angular/core", "@angular/forms", "@angular/cdk/drag-drop", "r
                     }
                     window.open(model.contentType.editUrl + '?id=' + model.id, '_blank');
                 }
+                toggleStatus(model) {
+                    const statusOriginal = model.status;
+                    model.status = statusOriginal === 1 ? 0 : 1;
+                    const xhr = new xhr_1.XHR({
+                        method: 'PUT',
+                        url: '/Api/Content/' + model.id,
+                        data: {
+                            route: {},
+                            meta: {},
+                            payload: {
+                                status: model.status
+                            }
+                        },
+                        type: 'application/json'
+                    });
+                    xhr.send()
+                        .then((response) => {
+                        if (!lodash_1.default.isObject(response) || lodash_1.default.get(response, 'meta.status[0].code') !== 'SUCCESS') {
+                            console.error('error[toggleStatus]:', response);
+                            model.status = statusOriginal;
+                            this.refresh();
+                            return;
+                        }
+                        console.log('success[toggleStatus]:', response);
+                    })
+                        .catch((error) => {
+                        console.error('error[toggleStatus]:', error);
+                        model.status = statusOriginal;
+                        this.refresh();
+                    });
+                    return;
+                }
                 remove(model) {
                     const models = this.dataRef();
                     if (!models || !models.length) {