@pobuca/email-builder 1.0.0 → 1.0.1

package/bundles/pobuca-email-builder.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/drag-drop"),require("@angular/common/http"),require("@angular/material/snack-bar"),require("@angular/material/dialog"),require("@angular/material/bottom-sheet"),require("@angular/platform-browser"),require("@angular/flex-layout"),require("@angular/material/button"),require("@angular/material/button-toggle"),require("@angular/material/divider"),require("@angular/material/expansion"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/material/input"),require("@angular/material/list"),require("@angular/material/menu"),require("@angular/material/progress-bar"),require("@angular/material/select"),require("@angular/material/sidenav"),require("@angular/material/slide-toggle"),require("@angular/material/slider"),require("@angular/material/tabs"),require("@angular/material/toolbar"),require("@angular/material/tooltip"),require("angular-resizable-element"),require("@angular/forms"),require("@angular/common"),require("@angular/cdk/scrolling"),require("quill"),require("ngx-quill"),require("ngx-color/chrome"),require("@angular/cdk/portal"),require("@angular/localize/init")):"function"==typeof define&&define.amd?define("@pobuca/email-builder",["exports","@angular/core","rxjs","rxjs/operators","@angular/cdk/drag-drop","@angular/common/http","@angular/material/snack-bar","@angular/material/dialog","@angular/material/bottom-sheet","@angular/platform-browser","@angular/flex-layout","@angular/material/button","@angular/material/button-toggle","@angular/material/divider","@angular/material/expansion","@angular/material/form-field","@angular/material/icon","@angular/material/input","@angular/material/list","@angular/material/menu","@angular/material/progress-bar","@angular/material/select","@angular/material/sidenav","@angular/material/slide-toggle","@angular/material/slider","@angular/material/tabs","@angular/material/toolbar","@angular/material/tooltip","angular-resizable-element","@angular/forms","@angular/common","@angular/cdk/scrolling","quill","ngx-quill","ngx-color/chrome","@angular/cdk/portal","@angular/localize/init"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).pobuca=e.pobuca||{},e.pobuca["email-builder"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.cdk.dragDrop,e.ng.common.http,e.ng.material.snackBar,e.ng.material.dialog,e.ng.material.bottomSheet,e.ng.platformBrowser,e.ng.flexLayout,e.ng.material.button,e.ng.material.buttonToggle,e.ng.material.divider,e.ng.material.expansion,e.ng.material.formField,e.ng.material.icon,e.ng.material.input,e.ng.material.list,e.ng.material.menu,e.ng.material.progressBar,e.ng.material.select,e.ng.material.sidenav,e.ng.material.slideToggle,e.ng.material.slider,e.ng.material.tabs,e.ng.material.toolbar,e.ng.material.tooltip,e.angularResizableElement,e.ng.forms,e.ng.common,e.ng.cdk.scrolling,null,e.ng.quill,e.ng.color.chrome,e.ng.cdk.portal)}(this,(function(e,t,n,o,r,i,l,a,s,c,p,u,d,m,b,g,h,f,y,k,v,q,x,w,S,C,I,P,T,O,D,M,j,L,B,_){"use strict";function E(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var $,F=E(t);e.ETemplatesStorage=void 0,($=e.ETemplatesStorage||(e.ETemplatesStorage={})).LATEST_USED="NGB_LATEST_USED_TEMPLATES",$.STORAGE="NGB_TEMP_TEMPLATES_STORAGE";var A=function(e,t){return(A=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function z(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}A(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function R(e,t,n,o){return new(n||(n=Promise))((function(r,i){function l(e){try{s(o.next(e))}catch(e){i(e)}}function a(e){try{s(o.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,a)}s((o=o.apply(e,t||[])).next())}))}function U(e,t){var n,o,r,i,l={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(s){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(l=0)),l;)try{if(n=1,o&&(r=2&a[0]?o.return:a[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;switch(o=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return l.label++,{value:a[1],done:!1};case 5:l.label++,o=a[1],a=[0];continue;case 7:a=l.ops.pop(),l.trys.pop();continue;default:if(!(r=l.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){l=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){l.label=a[1];break}if(6===a[0]&&l.label<r[1]){l.label=r[1],r=a;break}if(r&&l.label<r[2]){l.label=r[2],l.ops.push(a);break}r[2]&&l.ops.pop(),l.trys.pop();continue}a=t.call(e,l)}catch(e){a=[6,e],o=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}Object.create;function H(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function N(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)l.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return l}function G(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(N(arguments[t]));return e}function W(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}Object.create;"function"==typeof SuppressedError&&SuppressedError;function V(e){return void 0===e&&(e={}),JSON.parse(JSON.stringify(e))}function J(e,t){return JSON.stringify(e)===JSON.stringify(t)}function Y(e){var t,n;void 0===e&&(e={});for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];try{for(var i=H(o),l=i.next();!l.done;l=i.next()){var a=l.value;for(var s in a)e.hasOwnProperty(s)||(Array.isArray(a[s])||"object"!=typeof a[s]?e[s]=a[s]:e[s]=Y(e[s],a[s]))}}catch(e){t={error:e}}finally{try{l&&!l.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return e}function K(e,t){var n;void 0===t&&(t="border");var o=e.color,r=void 0===o?"#000000":o,i=e.style,l=void 0===i?"solid":i,a=e.width,s=void 0===a?4:a,c=e.radius,p=void 0===c?0:c;return(n={})[t]=s+"px "+l+" "+r,n.borderRadius=p+"px",n}function Q(e,t){var n;void 0===t&&(t="padding");var o=e.top,r=void 0===o?10:o,i=e.right,l=void 0===i?25:i,a=e.bottom,s=void 0===a?10:a,c=e.left;return(n={})[t]=r+"px "+l+"px "+s+"px "+(void 0===c?25:c)+"px",n}function X(e){var t=e.top,n=void 0===t?0:t,o=e.bottom;return{margin:n+"px 0 "+(void 0===o?0:o)+"px"}}function Z(e){var t=e.family,n=void 0===t?"":t,o=e.size,r=void 0===o?13:o,i=e.style,l=void 0===i?"normal":i,a=e.weight;return{fontFamily:n,fontSize:r+"px",fontStyle:l,fontWeight:void 0===a?"normal":a}}function ee(e){var t=e.value,n=void 0===t?22:t,o=e.unit,r=void 0===o?"px":o;return{lineHeight:"none"!==r?""+n+r:"normal"}}function te(e){var t=e.value,n=void 0===t?100:t,o=e.unit,r=void 0===o?"%":o,i=e.auto;return(void 0!==i&&i?"auto":["%","px"].indexOf(r)>-1&&""+n+r)||r}function ne(e,t){if(void 0===t&&(t=2),0===e)return"0 Bytes";var n=t<0?0:t,o=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,o)).toFixed(n))+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][o]}function oe(e){return"https://www.mailjet.com/images/theme/v1/icons/ico-social/"+e}function re(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.defer((function(){return n.of.apply(void 0,G(e))}))}var ie,le,ae,se,ce,pe,ue={background:{color:"transparent"},border:{width:0,color:"#cccccc",radius:0,style:"solid"},verticalAlign:"top"},de=function(e,t,n){void 0===e&&(e="cols_1"),void 0===t&&(t=[]),this.type=e,this.elements=t,this.columns=1,this.id=Date.now(),this.options={fullWidth:!1,border:{color:"#cccccc",style:"solid",width:0,radius:0},background:{color:"#ffffff",url:"",repeat:"repeat",size:{value:100,unit:"px",auto:!0,units:["px","%","cover","contain"]}},padding:{top:4,right:4,bottom:4,left:4},margin:{top:0,bottom:0},gaps:[4,4]},t.length||(["cols_2","cols_12","cols_21"].includes(e)?this.columns=2:"cols_3"===e?this.columns=3:"cols_4"===e&&(this.columns=4));var o=Array.from({length:this.columns},(function(){return ue})),r=[1];"cols_21"===e?r=[4,6]:"cols_12"===e?r=[6,4]:"cols_2"===e?r=[5,5]:"cols_3"===e?r=[3.33,3.33,3.33]:"cols_4"===e&&(r=[2.5,2.5,2.5,2.5]),this.options=Y(n,this.options,{columns:o,columnsWidth:r})},me=function(){},be=function(e,t,n){void 0===n&&(n={disabled:!1,message:""}),this.innerText=e,this.state=n,this.type="text",this.icon="text_format",this.options={color:"#000000",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",style:"normal",size:16,weight:400},lineHeight:{value:40,unit:"none"},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(ie||(ie=W([":@@text_block:Text"],[":@@text_block:Text"]))),this.options=Y(t,this.options)},ge=function(e,t,n){void 0===e&&(e="https://via.placeholder.com/600x200?text=CHANGE+ME"),void 0===n&&(n={disabled:!1,message:""}),this.src=e,this.state=n,this.type="image",this.icon="image",this.options={border:{color:"#cccccc",style:"solid",width:0,radius:0},width:{value:100,unit:"px",auto:!0,units:["px"]},height:{value:100,unit:"px",auto:!0,units:["px"]},link:{href:"",target:"_blank"},align:"center",title:"",padding:{top:0,right:0,bottom:0,left:0}},this.title=$localize(le||(le=W([":@@image_block:Image"],[":@@image_block:Image"]))),this.options=Y(t,this.options)},he=function(e,t,n){void 0===e&&(e="Click on me"),void 0===n&&(n={disabled:!1,message:""}),this.innerText=e,this.state=n,this.type="button",this.icon="radio_button_checked",this.options={backgroundColor:"#414141",border:{color:"#414141",style:"solid",width:0,radius:3},color:"#ffffff",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",size:13,style:"normal",weight:400},align:"center",fullWidth:!1,lineHeight:{value:120,unit:"%"},link:{href:"",target:"_blank"},innerPadding:{top:10,right:25,bottom:10,left:25},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(ae||(ae=W([":@@button_block:Button"],[":@@button_block:Button"]))),this.options=Y(t,this.options)},fe=function(e,t){void 0===t&&(t={disabled:!1,message:""}),this.state=t,this.type="divider",this.icon="remove",this.options={border:{color:"#000000",style:"solid",width:4},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(se||(se=W([":@@divider_block:Divider"],[":@@divider_block:Divider"]))),this.options=Y(e,this.options)},ye=function(e,t){void 0===t&&(t={disabled:!1,message:""}),this.state=t,this.type="spacer",this.icon="vertical_align_center",this.title=$localize(ce||(ce=W([":@@spacer_block:Spacer"],[":@@spacer_block:Spacer"]))),this.options={height:{value:20,unit:"px",units:["px"]}},this.options=Y(e,this.options)},ke=function(e,t,n){void 0===e&&(e=[]),void 0===n&&(n={disabled:!1,message:""}),this.networks=e,this.state=n,this.type="social",this.icon="share",this.title=$localize(pe||(pe=W([":@@share_block:Social"],[":@@share_block:Social"]))),this.options={align:"center",mode:"horizontal",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",style:"normal",size:16,weight:400},iconSize:{value:30,unit:"px"},lineHeight:{value:16,unit:"px"},color:"#333333",innerPadding:{top:4,right:4,bottom:4,left:4},padding:{top:10,right:25,bottom:10,left:25}},this.options=Y(t,this.options)},ve=["github","instagram","web","snapchat","youtube","vimeo","medium","soundcloud","dribbble","facebook","twitter","pinterest","linkedin","tumblr","xing","tiktok"],qe=new t.InjectionToken("PB Social Networks",{providedIn:"any",factory:function(){return ve}}),xe=["Open+Sans:300,400,500,700","Droid+Sans:300,400,500,700","Lato:300,400,500,700","Roboto:300,400,700,900","Ubuntu:300,400,500,700","Fira+Sans:300,400,500,700","Mansalva:400"],we=new t.InjectionToken("PB Google Fonts",{providedIn:"any",factory:function(){return xe}}),Se=["Palatino Linotype, Book Antiqua, Palatino, serif","Times New Roman, Times, serif","Arial, Helvetica, sans-serif","Arial Black, Gadget, sans-serif","Comic Sans MS, cursive, sans-serif","Impact, Charcoal, sans-serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif","Courier New, Courier, monospace","Lucida Console, Monaco, monospace"],Ce=new t.InjectionToken("PB Fallback Fonts",{providedIn:"any",factory:function(){return Se}}),Ie=[new de("cols_1"),new de("cols_2"),new de("cols_3"),new de("cols_4"),new de("cols_12"),new de("cols_21")],Pe=new t.InjectionToken("PB Structures",{providedIn:"any",factory:function(){return Ie}}),Te=[new be,new ge,new he,new fe,new ye,new ke],Oe=new t.InjectionToken("PB Blocks",{providedIn:"any",factory:function(){return Te}}),De=Object.freeze({xApiKey:"t7HdQfZjGp6R96fOV4P8v18ggf6LLTQZ1puUI2tz",useSaveButton:!0,usePreviewButton:!0,useDownloadButton:!0,templateListIfEmpty:!0,uploadImageName:"image"}),Me=new t.InjectionToken("PB Builder Configuration",{providedIn:"root",factory:function(){return De}}),je=new t.InjectionToken("PB Storage factory token",{providedIn:"any",factory:function(){return sessionStorage}}),Le=new t.InjectionToken("PB Token that stores temporary templates cache",{providedIn:"any",factory:function(){return sessionStorage}}),Be=function(e,t){void 0===e&&(e=[]),void 0===t&&(t={name:"",previewText:"",width:{value:600,unit:"px",units:["px"]},background:{color:"#f1f1f1",size:{value:100,unit:"%",auto:!0,units:["px","%","cover","contain"]}},padding:{top:16,right:10,bottom:10,left:10},direction:"ltr",global:{padding:{top:0,right:0,bottom:0,left:0}}}),this.structures=e,this.general=t},_e=function(e){function t(t){var n=void 0===t?{}:t,o=n.structures,r=n.general;return e.call(this,o,r)||this}return z(t,e),t}(Be),Ee=function(){function e(){}return e.prototype.createHTMLTemplate=function(e){return re(e)},e.prototype.togglePreview=function(e){return re(e)},e.prototype.togglePreviewDevice=function(e){return re(e.value)},e.prototype.chooseTemplate=function(e,t){return re({category:e,template:t})},e.prototype.uploadImage=function(e){return re(e)},e.prototype.addBlock=function(e,t){return re({event:e,column:t})},e.prototype.editBlock=function(e){return re(e)},e.prototype.removeBlock=function(e,t,n){return re({index:e,column:t})},e.prototype.duplicateBlock=function(e,t,n){return re({index:e,column:t,block:n})},e.prototype.disableBlockDragFromList=function(e){return re(!1)},e.prototype.disableBlockDragWithinEmailBody=function(e){return re(!1)},e.prototype.addStructure=function(e){return re(e)},e.prototype.editStructure=function(e){return re(e)},e.prototype.removeStructure=function(e,t){return re(e)},e.prototype.duplicateStructure=function(e,t){return re(e)},e.prototype.disableStructureDragFromList=function(e){return re(!1)},e.prototype.disableStructureDragWithinEmailBody=function(e){return re(!1)},e.prototype.preventWindowExit=function(e){return re(e)},e.prototype.exportFile=function(e){return re(e)},e.prototype.importFile=function(e){return re(e)},e.prototype.catchError=function(e){return re(e)},e}();Ee.decorators=[{type:t.Injectable}];var $e="https://ngb-api.wlocalhost.org/v1",Fe=function(){function e(e){this.http=e,this.getAllUserMergeFields$=re([]),this.getAllUserModules$=re([]),this.getAllUserTemplates$=this.http.get($e.concat("/templates")).pipe(o.map((function(e){return e.map((function(e){var t=e.category,n=e.templates;return{category:t,templates:n.map((function(e){return{thumbPath:"https://ngb-templates.s3.amazonaws.com/"+t+"-"+e+".jpg",title:e,templateData:null}}))}}))})),o.shareReplay())}return e.prototype.getUserTemplateData$=function(e,t){return t.templateData?re(t):this.http.get($e.concat("/templates"),{params:{category:e,template:t.title}}).pipe(o.map((function(e){return Object.assign(Object.assign({},t),{templateData:e})})))},e.prototype.userImageUpload$=function(e,t){return this.http.request("POST",t,{body:e,reportProgress:!0,responseType:"json",observe:"events"})},e.prototype.getUserImages$=function(){return re([])},e.prototype.createHTMLTemplate$=function(e,t){return void 0===t&&(t=$e),this.http.post(t,e)},e}();Fe.decorators=[{type:t.Injectable}],Fe.ctorParameters=function(){return[{type:i.HttpClient}]};var Ae=function(){function t(e){this.templateStorage=e}return t.prototype.getLatestUsedTemplates=function(){return JSON.parse(this.templateStorage.getItem(e.ETemplatesStorage.LATEST_USED))||[]},t.prototype.addTemplateToLatestUsed=function(t){var n=this.getLatestUsedTemplates().filter((function(e){return e.title!==t.title}));n.unshift(t),this.templateStorage.setItem(e.ETemplatesStorage.LATEST_USED,JSON.stringify(n))},t.prototype.clearLatestUsed=function(){this.templateStorage.removeItem(e.ETemplatesStorage.LATEST_USED)},t.prototype.cacheTemplateList=function(t){this.templateStorage.setItem(e.ETemplatesStorage.STORAGE,JSON.stringify(t))},t.prototype.getCachedTemplateList=function(){return JSON.parse(this.templateStorage.getItem(e.ETemplatesStorage.STORAGE))||[]},t.prototype.clearCachedTemplateList=function(){this.templateStorage.removeItem(e.ETemplatesStorage.STORAGE)},t}();Ae.decorators=[{type:t.Injectable}],Ae.ctorParameters=function(){return[{type:Storage,decorators:[{type:t.Inject,args:[Le]}]}]};var ze=function(){function e(e,t,r,i,l){var a=this;this.userRestApi=e,this.pbStorage=t,this.userMiddleware=r,this.googleFonts=i,this.config=l,this.Email=new _e,this.clonedEmail=V(this.Email),this._Email$=new n.BehaviorSubject(this.Email),this.emailAsObservable$=this._Email$.asObservable(),this.emailStructuresAsObservable$=this.emailAsObservable$.pipe(o.pluck("structures")),this.generalEmailOptionsAsObservable$=this.emailAsObservable$.pipe(o.pluck("general")),this.currentEmailHasChanges$=this.emailAsObservable$.pipe(o.map((function(e){return!J(e,a.clonedEmail)}))),this.builderContainerStyles$=this.generalEmailOptionsAsObservable$.pipe(o.map((function(e){var t=e.background,n=e.padding,o=e.direction;return Object.assign({direction:o,backgroundRepeat:t.repeat,backgroundColor:t.color,backgroundSize:te(t.size),backgroundPosition:"top center"},Q(n))}))),this._Mjml$=new n.BehaviorSubject(""),this.mjmlAsObservable$=this._Mjml$.asObservable(),this._Template$=new n.BehaviorSubject(""),this.templateAsObservable$=this._Template$.asObservable(),this._onTemplateCreated$=new n.Subject,this.onTemplateCreated$=this._onTemplateCreated$.pipe(o.withLatestFrom(this._Email$,this._Template$,this._Mjml$),o.map((function(e){var t=N(e);t[0];return t.slice(1)})))}return e.prototype.createHTMLTemplate$=function(){var e=this;return this.emailAsObservable$.pipe(o.switchMap((function(e){if(!e.structures.length)throw new Error("Please add some structures and blocks to perform this action.");return re(e)})),o.withLatestFrom(n.combineLatest([this.currentEmailHasChanges$,this.templateAsObservable$])),o.exhaustMap((function(t){var r=N(t,2),i=r[0],l=N(r[1],2),a=l[0],s=l[1];return a||!s?e.userMiddleware.createHTMLTemplate(i).pipe(o.exhaustMap((function(t){return e.userRestApi.createHTMLTemplate$(Object.assign(Object.assign({},t),{googleFonts:e.googleFonts}),e.config.apiPath)})),o.map((function(t){if(t.errors.length){var n=t.errors.map((function(e){var t=e.message;return e.tagName+" > "+t})).join("\n");throw new Error(n)}return e._Mjml$.next(t.mjml),e._Template$.next(t.html),e.clonedEmail=V(e.Email),e._onTemplateCreated$.next(),t}))):n.combineLatest([e._Mjml$,e._Template$]).pipe(o.map((function(e){var t=N(e,2),n=t[0];return{html:t[1],mjml:n,errors:[]}})))})))},e.prototype.markForCheck=function(){this._Email$.next(this.Email),this.Email.structures.length&&this.pbStorage.addTemplateToLatestUsed(V({templateData:this.Email,title:"last-edited",thumbPath:"https://via.placeholder.com/200x300?text=LAST+EDITED"}))},e.prototype.setEmail=function(e){if(!e.structures||!e.general)throw new Error("Injected object is not a valid PBEmail");this.Email=e,this.reset()},e.prototype.addStructure=function(e){var t=e.currentIndex,n=void 0===t?0:t,o=e.item,r=this.Email.structures,i=void 0===r?[]:r,l=!0;o.data.elements.length||(l=!1,o.data.elements=Array.from({length:o.data.columns},(function(){return[]})));var a=Object.assign(Object.assign({id:Date.now()},V(o.data)),{isModule:l});return i.splice(n,0,a),this.markForCheck(),a},e.prototype.changeStructureOrder=function(e){var t=e.previousIndex,n=void 0===t?0:t,o=e.currentIndex,i=void 0===o?0:o;r.moveItemInArray(this.Email.structures,n,i),this.markForCheck()},e.prototype.duplicateStructure=function(e){var t=this.Email.structures,n=void 0===t?[]:t,o=V(Object.assign(Object.assign({},n[e]),{id:Date.now()}));return n.splice(e,0,o),this.markForCheck(),o},e.prototype.removeStructure=function(e){var t=this.Email.structures;(void 0===t?[]:t).splice(e,1),this.markForCheck()},e.prototype.addBlock=function(e,t){var n=e.previousIndex,o=void 0===n?0:n,i=e.currentIndex,l=void 0===i?0:i,a=e.item,s=e.previousContainer,c=s.id,p=s.data;"block-elements"===c?t.splice(l,0,V(a.data)):r.transferArrayItem(p,t,o,l),this.markForCheck()},e.prototype.changeBlockOrder=function(e,t){var n=e.previousIndex,o=void 0===n?0:n,i=e.currentIndex,l=void 0===i?0:i;r.moveItemInArray(t,o,l),this.markForCheck()},e.prototype.duplicateBlock=function(e,t,n){var o=V(n);return t.splice(e,0,o),this.markForCheck(),o},e.prototype.removeBlock=function(e,t){t.splice(e,1),this.markForCheck()},e.prototype.reset=function(){this._Mjml$.next(null),this._Template$.next(null),this.clonedEmail=V(this.Email),this.markForCheck()},e}();ze.ɵprov=F.ɵɵdefineInjectable({factory:function(){return new ze(F.ɵɵinject(Fe),F.ɵɵinject(Ae),F.ɵɵinject(Ee),F.ɵɵinject(we),F.ɵɵinject(Me))},token:ze,providedIn:"root"}),ze.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],ze.ctorParameters=function(){return[{type:Fe},{type:Ae},{type:Ee},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]}]};var Re=function(){function e(e,t){var r=this;this.matDialogRef=e,this.templateList=t,this.chooseCategory$=new n.BehaviorSubject("latest"),this.currentCategoryTemplates$=this.chooseCategory$.pipe(o.map((function(e){return r.templateList.find((function(t){return t.category===e}))||{templates:[]}})),o.pluck("templates"),o.map((function(e){return e.length>0?e:null})))}return e.prototype.chooseTemplate=function(e){this.csdTemplate=e},e.prototype.chageCategory=function(e){this.chooseCategory$.next(e)},e.prototype.getTemplatesList=function(){return this.templateList.filter((function(e){return"latest"!==e.category}))},e.prototype.startBuilding=function(){var e=this;this.chooseCategory$.pipe(o.take(1)).subscribe((function(t){e.matDialogRef.close({category:t,template:e.csdTemplate})}))},e}();Re.decorators=[{type:t.Component,args:[{selector:"pb-template-list-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout="column" style="height: 100%;">\n  <h2 mat-dialog-title i18n="templates|Modal template header">Custom Templates</h2>\n  <div class="mat-typography template-list-wrapper" fxLayout fxLayoutGap="1rem" fxFlex>\n    <mat-list fxFlex="200px" dense>\n      <mat-list-item (click)="chageCategory(\'latest\')" [ngClass]="{active: (chooseCategory$ | async) === \'latest\'}"\n        i18n="templates|category name">\n        Latest\n      </mat-list-item>\n      <mat-divider></mat-divider>\n      <mat-list-item *ngFor="let list of getTemplatesList()" (click)="chageCategory(list.category)"\n        [ngClass]="{active: (chooseCategory$ | async) === list.category}" i18n="templates|category name">\n        {{list.category}}\n      </mat-list-item>\n    </mat-list>\n\n    <ng-container *ngIf="currentCategoryTemplates$ | async as templates;else emptyCategory">\n      <cdk-virtual-scroll-viewport itemSize="150" [maxBufferPx]="150" fxFlex>\n        <div class="template-list">\n          <div *cdkVirtualFor="let template of templates" class="template-list-item" (click)="chooseTemplate(template)"\n            i18n-matTooltip="templates|Click to choose message" matTooltip="Click to choose">\n            <img [src]="template.thumbPath" [alt]="template.title" />\n            <div class="description">\n              <h3>{{template.title}}</h3>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n  </div>\n  <mat-dialog-actions align="end">\n    <button mat-button mat-dialog-close i18n="actions|Undo">Undo</button>\n    <button mat-button (click)="startBuilding()" [disabled]="!csdTemplate" i18n="actions|Start">\n      Start\n    </button>\n  </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyCategory>\n  <div fxFlex fxLayout="column" fxLayoutAlign="center center" class="empty-category-notification">\n    <mat-icon>notifications</mat-icon>\n    <h2 i18n="templates|No templates in current category message">This category is empty!</h2>\n  </div>\n</ng-template>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:inherit}.template-list-wrapper mat-list{position:sticky;top:0}.template-list-wrapper mat-list mat-list-item{text-transform:capitalize;cursor:pointer;border-radius:3px;transition:all .3s linear}.template-list-wrapper mat-list mat-list-item.active,.template-list-wrapper mat-list mat-list-item:hover{background-color:#f3f3f3}.template-list-wrapper .template-list{display:grid;gap:1rem;grid-template:150px/repeat(3,1fr)}@media screen and (max-width:699px){.template-list-wrapper .template-list{grid-template:150px/repeat(2,1fr)}}.template-list-wrapper .template-list-item{border-radius:3px;overflow:hidden;border:1px solid #ccc;padding:.5rem;position:relative;background-color:#f3f3f3}.template-list-wrapper .template-list-item img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:calc(200px - 1rem);width:100%;cursor:pointer;animation:objectPosition 3s linear infinite alternate;animation-play-state:paused}.template-list-wrapper .template-list-item .description{position:absolute;bottom:0;right:0;left:0;background-color:#fff;padding:.5rem;opacity:1;transition:all .3s linear;text-transform:capitalize}.template-list-wrapper .template-list-item .description h3{margin:0}.template-list-wrapper .template-list-item:hover img{animation-play-state:running}.template-list-wrapper .template-list-item:hover .description{bottom:-44px;opacity:.6}.empty-category-notification mat-icon{height:50px;width:50px;font-size:50px}.empty-category-notification h2{text-transform:uppercase}@keyframes objectPosition{to{-o-object-position:bottom;object-position:bottom}}"]}]}],Re.ctorParameters=function(){return[{type:a.MatDialogRef},{type:Array,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]}]};var Ue=function(e,t){this.dialogRef=e,this.data=t};Ue.decorators=[{type:t.Component,args:[{selector:"pb-confirm-dialog",template:'\n    <h2 mat-dialog-title>Are you sure?</h2>\n    <mat-dialog-actions fxLayout fxLayoutAlign="space-between center" fxLayoutGap="1rem">\n      <button mat-stroked-button mat-dialog-close="0">No</button>\n      <button mat-stroked-button color="warn" mat-dialog-close="1">Yes</button>\n    </mat-dialog-actions>\n  '}]}],Ue.ctorParameters=function(){return[{type:a.MatDialogRef},{type:void 0,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]}]};var He=function(){function e(e,t){this.pbMiddlewares=e,this.bottomSheetRef=t,this.importing=!1,this.fileReader=new FileReader}return e.prototype.openBrowserModal=function(e){e.preventDefault(),this.uploadInput.nativeElement.click()},e.prototype.startImporting=function(){var e=this;this.importing=!0,this.pbMiddlewares.importFile(this.uploadInput.nativeElement.files.item(0)).pipe(o.take(1),o.catchError((function(t){return e.pbMiddlewares.catchError(t).pipe(o.switchMap((function(){return e.bottomSheetRef.dismiss(t),n.EMPTY})))}))).subscribe((function(t){e.fileReader.readAsText(t,"utf-8")}))},e.prototype.ngOnInit=function(){var e=this;this.fileReader.addEventListener("loadend",(function(){e.importing=!1;try{var t=JSON.parse(e.fileReader.result);e.bottomSheetRef.dismiss(t)}catch(t){throw e.bottomSheetRef.dismiss(null),new Error(t)}}))},e.prototype.ngOnDestroy=function(){},e}();He.decorators=[{type:t.Component,args:[{selector:"pb-import-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-nav-list>\n    <mat-list-item (click)="openBrowserModal($event)">\n        <div *ngIf="!importing">\n            <span mat-line i18n="import|Import JSON file">Import JSON file</span>\n        </div>\n        <ng-container *ngIf="importing">\n            <span mat-line i18n="import|Importing in progress">Importing in progress ...</span>\n            \x3c!-- <span mat-line>{{ imageInfo }}</span> --\x3e\n        </ng-container>\n    </mat-list-item>\n    <mat-progress-bar *ngIf="importing" mode="buffer" value="100"></mat-progress-bar>\n</mat-nav-list>\n<input type="file" accept="application/json" fxHide #uploadInput (change)="startImporting()" />\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */"]}]}],He.ctorParameters=function(){return[{type:Ee},{type:s.MatBottomSheetRef}]},He.propDecorators={uploadInput:[{type:t.ViewChild,args:["uploadInput",{read:t.ElementRef,static:!0}]}]};var Ne=function(){function e(e,t,r,i){var l=this;this.emailObjectStore=e,this.matDialog=t,this.bottomSheet=r,this.snackBar=i,this.activeMatProgress$=new n.ReplaySubject,this.cdkDropListConnectedTo$=this.emailObjectStore.emailStructuresAsObservable$.pipe(o.map((function(e){return e.reduce((function(e,t,n){var o=t.elements;return e.push.apply(e,G(o.map((function(e,t){return"column-droplist-"+t+"-"+n})))),e}),[])})),o.distinct(),o.distinctUntilKeyChanged("length"),o.shareReplay()),this._currentEditingStructure$=new n.BehaviorSubject(null),this.currentEditingStructure$=this._currentEditingStructure$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged(),o.catchError((function(){return n.of(null)})),o.shareReplay()),this._currentEditingBlock$=new n.BehaviorSubject(null),this.currentEditingBlock$=this._currentEditingBlock$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged(),o.catchError((function(){return n.of(null)})),o.shareReplay()),this._editGeneralSettings$=new n.Subject,this.editGeneralSettings$=this._editGeneralSettings$.pipe(o.subscribeOn(n.animationFrameScheduler),o.tap((function(){return l.changeTabIndex(2)})),o.distinctUntilChanged(),o.shareReplay()),this._currentTabIndex$=new n.BehaviorSubject(0),this.currentTabIndex$=this._currentTabIndex$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged())}return e.prototype.editBlock=function(e){this._currentEditingStructure$.next(null),this._currentEditingBlock$.next(e),this._editGeneralSettings$.next("block")},e.prototype.editStructure=function(e){this._currentEditingBlock$.next(null),this._editGeneralSettings$.next("structure"),this._currentEditingStructure$.next(e)},e.prototype.editGeneralSettings=function(){this.resetElements(),this._editGeneralSettings$.next("general")},e.prototype.changeTabIndex=function(e){this._currentTabIndex$.next(e)},e.prototype.confirmDialog$=function(){return this.matDialog.open(Ue).afterClosed().pipe(o.map((function(e){return"1"===e})))},e.prototype.templatesListDialog$=function(e){return this.matDialog.open(Re,{data:e,width:"60vw",maxWidth:"800px",height:"70vh",maxHeight:"900px"}).afterClosed().pipe(o.filter((function(e){return Boolean(e)})))},e.prototype.importDialog$=function(){return this.bottomSheet.open(He,{ariaLabel:"Browse media"}).afterDismissed()},e.prototype.notify=function(e,t,n){return void 0===t&&(t="dismiss"),void 0===n&&(n=3e3),this.snackBar.open(e,t,{duration:n})},e.prototype.currentEditingBlock=function(){return this._currentEditingBlock$.getValue()},e.prototype.currentEditingStructure=function(){return this._currentEditingStructure$.getValue()},e.prototype.currentStructureEqualWith=function(e){return this.currentEditingStructure()===e},e.prototype.currentBlockEqualWith=function(e){return this.currentEditingBlock()===e},e.prototype.currentStructureContainsActiveBlock=function(e){var t=this;return e.elements.some((function(e){return e.some((function(e){return e===t.currentEditingBlock()}))}))},e.prototype.resetElements=function(){this._currentEditingStructure$.next(null),this._currentEditingBlock$.next(null)},e.prototype.reset=function(){this.resetElements(),this.changeTabIndex(0)},e}();Ne.decorators=[{type:t.Injectable}],Ne.ctorParameters=function(){return[{type:ze},{type:a.MatDialog},{type:s.MatBottomSheet},{type:l.MatSnackBar}]};var Ge=function(){function e(e,t,n,r){this.config=e,this.emailObjectStore=t,this.pbMiddleWares=n,this.pbUserInterface=r,this.modules=new Set,this.customTemplates=new Set,this._mergeTags=new Set,this.onTemplateCreated$=this.emailObjectStore.onTemplateCreated$.pipe(o.shareReplay()),this.onSave$=this.onTemplateCreated$,this.isLoading=this.pbUserInterface.activeMatProgress$.asObservable(),this.isLoading$=this.pbUserInterface.activeMatProgress$.asObservable(),this.config=Object.assign(Object.assign({},De),this.config)}return e.prototype.createHTMLTemplate$=function(){var e=this;return this.pbUserInterface.activeMatProgress$.next(!0),this.emailObjectStore.createHTMLTemplate$().pipe(o.tap((function(){return e.pbUserInterface.activeMatProgress$.next(!1)})),o.catchError((function(t){return e.pbMiddleWares.catchError(t).pipe(o.switchMap((function(){return e.pbUserInterface.notify(t.message),e.pbUserInterface.activeMatProgress$.next(!1),n.EMPTY})))})),o.finalize((function(){return e.pbUserInterface.activeMatProgress$.next(!1)})))},e.prototype.saveEmail=function(){return this.createHTMLTemplate$()},Object.defineProperty(e.prototype,"Email",{get:function(){return this.emailObjectStore.Email},set:function(e){this.emailObjectStore.setEmail(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"Template",{get:function(){return null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"Mjml",{get:function(){return null},enumerable:!1,configurable:!0}),e.prototype.getEmailAsObservable$=function(){return this.emailObjectStore.emailAsObservable$},e.prototype.getTemplateAsObservable$=function(){return this.emailObjectStore.templateAsObservable$},e.prototype.getMjmlAsObservable$=function(){return this.emailObjectStore.mjmlAsObservable$},e.prototype.onChanges$=function(){return this.onTemplateCreated$},e}();Ge.decorators=[{type:t.Injectable}],Ge.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:ze},{type:Ee},{type:Ne}]};var We=function(){function e(e,t,o,r,i,l){this.sanitizer=e,this.ngb=t,this.userRestApi=o,this.userInterface=r,this.middlewares=i,this.bottomSheetRef=l,this.uploading=!1,this.progress=new n.Subject}return Object.defineProperty(e.prototype,"imageInfo",{get:function(){if(this.choosedImage){var e=this.choosedImage,t=e.lastModified,n=e.size;return new Date(t).toLocaleString()+", "+ne(n)+"."}return""},enumerable:!1,configurable:!0}),e.prototype.previewLink=function(){return this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl)},e.prototype.openBrowserModal=function(e){e.preventDefault();var t=this.ngb.config.uploadImagePath;!this.uploading&&t?this.uploadInput.nativeElement.click():t||this.userInterface.notify("Hm ... this isn't a bug, it seems 'uploadImagePath' is empty!")},e.prototype.uploadInputChanged=function(){var e=this.uploadInput.nativeElement;e.files.length&&this._startUploading(e.files.item(0))},e.prototype._startUploading=function(e){var t=this;this.objectUrl&&URL.revokeObjectURL(this.objectUrl),this.objectUrl=URL.createObjectURL(e),this.uploading=!0;var r=this.ngb.config,l=r.uploadImagePath,a=r.csrf,s=new FormData;return a&&s.append(a.name,a.token),s.append("image",e),this.userRestApi.userImageUpload$(s,l).pipe(o.catchError((function(e){return t.middlewares.catchError(e).pipe(o.switchMap((function(){return t.userInterface.notify(e.message),n.EMPTY})))})),o.finalize((function(){return t.progress.complete()}))).subscribe((function(e){if(e.type===i.HttpEventType.UploadProgress){var n=Math.round(100*e.loaded/e.total);t.progress.next(n)}else e instanceof i.HttpResponse&&(e.body.success?(t.bottomSheetRef.dismiss(e.body.path),t.userInterface.notify("Successfully uploaded.",null,1e3)):t.userInterface.notify(e.body.message,"Dismiss",null))}))},e.prototype.ngOnDestroy=function(){this.objectUrl&&URL.revokeObjectURL(this.objectUrl)},e}();We.decorators=[{type:t.Component,args:[{selector:"pb-upload-bottom-sheet-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-nav-list>\n  <mat-list-item (click)="openBrowserModal($event)">\n    <div *ngIf="!uploading">\n      <span mat-line i18n="upload|Browse images from computer">Browse images from computer</span>\n    </div>\n    <ng-container *ngIf="uploading">\n      <img matListAvatar [src]="previewLink()" />\n      <span mat-line i18n="upload|Uploading Message">Uploading ...</span>\n      <span mat-line>{{ imageInfo }}</span>\n    </ng-container>\n  </mat-list-item>\n  <mat-progress-bar *ngIf="uploading" mode="buffer" [value]="progress | async"></mat-progress-bar>\n</mat-nav-list>\n<input type="file" accept="image/*" fxHide #uploadInput (change)="uploadInputChanged()" />\n',styles:[""]}]}],We.ctorParameters=function(){return[{type:c.DomSanitizer},{type:Ge},{type:Fe},{type:Ne},{type:Ee},{type:s.MatBottomSheetRef}]},We.propDecorators={uploadInput:[{type:t.ViewChild,args:["uploadInput",{static:!0}]}]};var Ve=function(){};Ve.decorators=[{type:t.Injectable}];var Je=function(e){function t(t,n){var o=e.call(this)||this;return o.matBottomSheet=t,o.userMiddlewaresService=n,o}return z(t,e),t.prototype.browse$=function(){var e=this;return this.matBottomSheet.open(We,{ariaLabel:"Browse media"}).afterDismissed().pipe(o.switchMap((function(t){return e.userMiddlewaresService.uploadImage(t)})))},t}(Ve),Ye=function(){function e(e,t,n,o,r,i,l){this.imageCategoryList=e,this.userConfig=t,this.matDialogRef=n,this.sanitizer=o,this.userRestApi=r,this.middlewares=i,this.userInterface=l,this.currentMenuItem="gallery"}return e.prototype.changeCurrentMenuItem=function(e){this.currentMenuItem=e},e.prototype.addImageToTemplate=function(e){void 0===e&&(e=this.choseImage),this.matDialogRef.close(e)},e.prototype.previewImage=function(e){var t=e.target;this.uploadImageFile=t.files.item(0),this.imagePreviewObjectUrl&&URL.revokeObjectURL(this.imagePreviewObjectUrl),this.imagePreviewObjectUrl=URL.createObjectURL(this.uploadImageFile),this.uploadImagePreview=this.sanitizer.bypassSecurityTrustResourceUrl(this.imagePreviewObjectUrl)},e.prototype.startUploading=function(){var e=this,t=this.userConfig,r=t.csrf,l=t.uploadImagePath,a=new FormData;return r&&a.append(r.name,r.token),a.append("image",this.uploadImageFile),this.userRestApi.userImageUpload$(a,l).pipe(o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterface.notify(t.message),n.EMPTY})))}))).subscribe((function(t){t.type===i.HttpEventType.UploadProgress||t instanceof i.HttpResponse&&(t.body.success?(e.addImageToTemplate(t.body.path),e.userInterface.notify("Successfully uploaded.",null,1e3)):e.userInterface.notify(t.body.message,"Dismiss",null))}))},e.prototype.ngOnDestroy=function(){this.imagePreviewObjectUrl&&URL.revokeObjectURL(this.imagePreviewObjectUrl)},e}();Ye.decorators=[{type:t.Component,args:[{selector:"pb-upload-image-gallery",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout="column" style="height: 100%;">\n    <h2 mat-dialog-title i18n="image-gallery|Modal Image gallery header">Image Gallery</h2>\n    <div class="mat-typography gallery-list-wrapper" fxLayout fxLayoutGap="1rem" fxFlex>\n        <mat-list fxFlex="200px">\n            <mat-list-item (click)="changeCurrentMenuItem(\'gallery\')" [class.active]="currentMenuItem === \'gallery\'"\n                i18n="image-gallery|Image list">\n                Gallery Image list\n            </mat-list-item>\n            <mat-list-item (click)="changeCurrentMenuItem(\'upload\')" [class.active]="currentMenuItem === \'upload\'"\n                i18n="image-gallery|Upload an image">\n                Upload an image\n            </mat-list-item>\n        </mat-list>\n\n        <ng-container *ngIf="currentMenuItem === \'gallery\'">\n            <ng-container *ngIf="imageCategoryList.length;else emptyImageList">\n                <cdk-virtual-scroll-viewport itemSize="150" [minBufferPx]="150 * 10" fxFlex\n                    class="gallery-list">\n                    <div *cdkVirtualFor="let imagePath of imageCategoryList" class="gallery-list-item"\n                         (click)="choseImage = imagePath" i18n-matTooltip="image-gallery|Click to choose message"\n                         matTooltip="Click to choose">\n                        <img [src]="imagePath" />\n                    </div>\n                </cdk-virtual-scroll-viewport>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf="currentMenuItem === \'upload\'">\n            <div class="upload-image" fxLayout="column" fxLayoutAlign="center center" fxFlex fxLayoutGap="1rem">\n                <label class="upload-image-item" [class.empty]="!uploadImagePreview">\n                    <div class="upload-image-item-overview" fxLayout="column" fxLayoutAlign="center center">\n                        <mat-icon>backup</mat-icon>\n                    </div>\n                    <img class="upload-image-item-preview" *ngIf="uploadImagePreview" [src]="uploadImagePreview" />\n                    <input type="file" fxHide pattern="image/*" (change)="previewImage($event)">\n                </label>\n                <button mat-flat-button color="primary" (click)="startUploading()" i18n="image-gallery|Upload and insert into template">\n                  Upload and insert into template\n                </button>\n            </div>\n        </ng-container>\n    </div>\n    <mat-dialog-actions align="end">\n        <button mat-button mat-dialog-close i18n="actions|Undo">Cancel</button>\n        <button mat-stroked-button color="primary" [disabled]="!choseImage" (click)="addImageToTemplate()"\n                i18n="actions|Start">\n            Add to template\n        </button>\n    </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyImageList>\n    <div fxFlex fxLayout="column" fxLayoutAlign="center center" class="empty-category-notification">\n        <mat-icon>notifications</mat-icon>\n        <h2 i18n="image-gallery|Image list is empty message">Image list is empty!</h2>\n    </div>\n</ng-template>\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */mat-list{background-color:#fff}mat-list mat-list-item{cursor:pointer}mat-list mat-list-item.active{background-color:#ccc}.gallery-list ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;gap:.3rem;grid-template:auto/repeat(4,1fr)}.gallery-list-item{height:120px;background-color:#ccc;cursor:pointer}.gallery-list-item img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.upload-image-item{width:80%;height:200px;background-color:#ccc;position:relative;border-radius:3px;padding:1em;text-align:center}.upload-image-item.empty .upload-image-item-overview,.upload-image-item:hover .upload-image-item-overview{opacity:1}.upload-image-item-overview{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:opacity .5s linear}.upload-image-item-overview mat-icon{height:50px;width:50px;font-size:50px}.upload-image-item-preview{max-height:100%}"]}]}],Ye.ctorParameters=function(){return[{type:Array,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:a.MatDialogRef},{type:c.DomSanitizer},{type:Fe},{type:Ee},{type:Ne}]};var Ke=function(e){function t(t,n,o){var r=e.call(this)||this;return r.matDialog=t,r.userMiddleware=n,r.userRestApi=o,r}return z(t,e),t.prototype.browse$=function(){var e=this;return this.userRestApi.getUserImages$().pipe(o.exhaustMap((function(t){return e.matDialog.open(Ye,{data:t,width:"60vw",maxWidth:"800px",height:"60vh",maxHeight:"800px"}).afterClosed()})),o.filter((function(e){return!!e.length})),o.switchMap((function(t){return e.userMiddleware.uploadImage(t)})))},t}(Ve),Qe=function(){function e(e,t,o,r){this.userInterfaceService=e,this.emailObjectStore=t,this.chRef=o,this.pbMiddlewaresService=r,this.structure=new de,this.cdkDropListConnectedTo$=this.userInterfaceService.cdkDropListConnectedTo$,this.validate=function(e){var t=+(e.rectangle.width/this.fr).toFixed(2);return t>1&&t<=10-this.structure.columns}.bind(this),this.componentIsDestroyed$=new n.Subject}return Object.defineProperty(e.prototype,"isStructureActive",{get:function(){return this.isActive},enumerable:!1,configurable:!0}),e.prototype.onHostClick=function(e){e.stopImmediatePropagation(),this.editStructure()},e.prototype.removeStructure=function(e){var t=this;e.stopPropagation(),this.pbMiddlewaresService.removeStructure(this.index,this.structure).pipe(o.exhaustMap((function(){return t.userInterfaceService.confirmDialog$()})),o.filter((function(e){return e})),o.take(1)).subscribe((function(){t.emailObjectStore.removeStructure(t.index),t.userInterfaceService.resetElements()}))},e.prototype.duplicateStructure=function(e){var t=this;e.stopPropagation(),this.pbMiddlewaresService.duplicateStructure(this.index,this.structure).pipe(o.map((function(){return t.emailObjectStore.duplicateStructure(t.index)})),o.take(1)).subscribe((function(e){t.editStructure(e)}))},e.prototype.dropNewBlock=function(e,t){var n=this;e.previousContainer===e.container?this.emailObjectStore.addBlock(e,t):this.pbMiddlewaresService.addBlock(e,t).pipe(o.map((function(e){return n.emailObjectStore.addBlock(e.event,e.column)}))).subscribe((function(){n.chRef.markForCheck()}))},e.prototype.disableBlockDrag$=function(e){return this.pbMiddlewaresService.disableBlockDragWithinEmailBody(e).pipe(o.take(1))},e.prototype.editStructure=function(e){var t=this;void 0===e&&(e=this.structure),this.pbMiddlewaresService.editStructure(e).pipe(o.take(1)).subscribe((function(e){t.userInterfaceService.editStructure(e)}))},e.prototype.getResizeEdges=function(e){return{right:e+1!==this.structure.columns,left:0!==e}},e.prototype.createColumnId=function(e){return"column-droplist-"+e+"-"+this.index},e.prototype.getColumnStyles=function(e){var t=this.structure.options,n=t.gaps,o=void 0===n?[4,4]:n,r=t.columns,i=(void 0===r?[]:r)[e]||ue,l="center";return"bottom"===i.verticalAlign?l="flex-end":"top"===i.verticalAlign&&(l="flex-start"),Object.assign({padding:o.map((function(e){return e+"px"})).join(" "),backgroundColor:i.background.color,placeSelf:l+" stretch"},K(i.border))},e.prototype.onResizeEnd=function(e,t){var n=e.rectangle;this.structure.options.columnsWidth[t]=+(n.width/this.fr).toFixed(2)},e.prototype.ngDoCheck=function(){(this.isActive||this.userInterfaceService.currentStructureContainsActiveBlock(this.structure))&&this.chRef.markForCheck()},e.prototype.ngOnInit=function(){var e=this,t=this.structure.options,n=t.columns,r=t.columnsWidth;if(!n||!r){var i=this.structure,l=i.type,a=i.elements,s=i.options;this.editStructure(new de(l,a,s))}var c=this.emailObjectStore.Email.general.width.value,p=N(this.structure.options.gaps,2)[1];this.fr=(c-p*this.structure.columns)/10,this.userInterfaceService.currentEditingStructure$.pipe(o.map((function(t){return t===e.structure})),o.takeUntil(this.componentIsDestroyed$)).subscribe((function(t){e.isActive=t}))},e.prototype.ngOnDestroy=function(){this.componentIsDestroyed$.next(""),this.componentIsDestroyed$.complete()},e}();Qe.decorators=[{type:t.Component,args:[{selector:"pb-structure",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div class="column" *ngFor="let column of structure.elements; let index = index" cdkDropList mwlResizable\n  [enableGhostResize]="false" [resizeSnapGrid]="{ left: fr, right: fr }" [resizeEdges]="getResizeEdges(index)"\n  [validateResize]="validate" (resizing)="onResizeEnd($event, index)"\n  (cdkDropListDropped)="dropNewBlock($event, column)" [class.empty]="!column.length" [ngStyle]="getColumnStyles(index)"\n  [cdkDropListConnectedTo]="cdkDropListConnectedTo$ | async" [cdkDropListData]="column" [id]="createColumnId(index)">\n\n  <div *ngIf="!column.length" class="empty-block" i18n="structure|Inside empty block">DnD blocks</div>\n\n  <pb-block *ngFor="let block of column; let index = index" cdkDrag [cdkDragData]="block" [block]="block"\n    [index]="index" [column]="column" [cdkDragDisabled]="disableBlockDrag$(block) | async">\n    <button mat-icon-button class="move" cdkDragHandle i18n-matTooltip="block|Change Block order"\n      matTooltip="Change Block order" *ngIf="!(disableBlockDrag$(block) | async)">\n      <mat-icon i18n-aria-label="block|Move block" aria-label="Move block" inline>pan_tool</mat-icon>\n    </button>\n  </pb-block>\n</div>\n\n<ng-content select=".move"></ng-content>\n<div class="tools" fxLayoutGap="0.25rem">\n  <button mat-icon-button class="edit" color="primary" i18n-matTooltip="structure|Change structure settings"\n    matTooltip="Change structure settings">\n    <mat-icon i18n-aria-label="structure|Edit structure" aria-label="Edit structure" inline>edit</mat-icon>\n  </button>\n  <button mat-icon-button (click)="duplicateStructure($event)" i18n-matTooltip="structure|Duplicate structure"\n    matTooltip="Duplicate structure">\n    <mat-icon i18n-aria-label="structure|Duplicate structure" aria-label="Duplicate structure" inline>file_copy\n    </mat-icon>\n  </button>\n  <button mat-icon-button color="warn" (click)="removeStructure($event)" i18n-matTooltip="structure|Delete structure"\n    matTooltip="Delete structure">\n    <mat-icon i18n-aria-label="structure|Remove Structure" aria-label="Remove Structure" inline>delete_forever\n    </mat-icon>\n  </button>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.Emulated,exportAs:"structure",styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-block>.cdk-drag-handle{position:absolute;top:-30px;right:0;cursor:move;background-color:rgba(63,81,181,.5);color:#fff;border-radius:50% 50% 0 0;opacity:0;height:30px;width:30px;font-size:smaller}pb-block>.cdk-drag-handle mat-icon{margin-top:-8px}pb-block>.cdk-drag-handle:hover{background-color:#3f51b5}pb-block.cdk-drag-preview .cdk-drag-handle,pb-block:hover .cdk-drag-handle{opacity:1}:host{display:grid;border:1px solid #ccc;position:relative;grid-template-columns:1fr}:host>.tools{direction:ltr;position:absolute;opacity:0;left:0;bottom:-25px;color:#ff4081}:host>.tools button{background-color:#fff;border-radius:0 0 3px 3px;height:25px;width:25px;line-height:0}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview,:host:hover{box-shadow:0 0 1px 2px #ff4081;z-index:1}:host:hover>.tools{opacity:1}:host:hover>.tools button{background-color:#ff4081;color:#fff}:host.active>.tools>.edit{display:none}:host.cols_2{grid-template-columns:repeat(2,6fr)}:host.cols_3{grid-template-columns:repeat(3,4fr)}:host.cols_4{grid-template-columns:repeat(4,3fr)}:host.cols_12{grid-template-columns:7fr 5fr}:host.cols_21{grid-template-columns:5fr 7fr}:host .cdk-drop-list-dragging,:host .cdk-drop-list-receiving{height:100%}:host>.column{box-sizing:border-box}:host>.column.empty{height:60px}:host>.column.empty .empty-block{background-color:rgba(101,99,99,.21);height:100%;display:flex;justify-content:center;place-items:center;flex-direction:column;color:rgba(101,99,99,.3);font-size:small}:host>.column.empty.cdk-drop-list-dragging .empty-block{display:none}:host>.column.empty>.cdk-drag-placeholder{min-height:60px!important}"]}]}],Qe.ctorParameters=function(){return[{type:Ne},{type:ze},{type:t.ChangeDetectorRef},{type:Ee}]},Qe.propDecorators={structure:[{type:t.Input}],index:[{type:t.Input}],isStructureActive:[{type:t.HostBinding,args:["class.active"]}],onHostClick:[{type:t.HostListener,args:["click",["$event"]]}]};var Xe=function(){function e(){}return e.prototype.transform=function(e){var t,n,o={"áÁ":"a","éÉ":"e","íÍ":"i","óÓ":"o","úÚ":"u","ñÑ":"n"};try{for(var r=H(Object.keys(o)),i=r.next();!i.done;i=r.next()){var l=i.value;e=e.replace(new RegExp("["+l+"]","g"),o[l])}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}return e.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")},e}();Xe.decorators=[{type:t.Pipe,args:[{name:"slugify"}]}];var Ze=function(){function e(e,o,r,i,l,a,s,c,p,u,d,m){var b,g;if(this.ngb=e,this.userRestApiService=o,this.userInterfaceService=r,this.emailObjectStore=i,this.renderer2=l,this.slugifyPipe=a,this.middlewares=s,this.changeDetectorRef=c,this.structures=p,this.blocks=u,this.doc=m,this.emailChange=new t.EventEmitter,this.previewTemplate=!1,this.showGeneralSettings$=this.userInterfaceService.editGeneralSettings$,this.currentTabIndex$=this.userInterfaceService.currentTabIndex$,this.cdkDropListConnectedTo$=this.userInterfaceService.cdkDropListConnectedTo$,this.getBuilderContainerStyles$=this.emailObjectStore.builderContainerStyles$,this.currentHTMLTemplate$=this.emailObjectStore.templateAsObservable$,this.activeMatProgress$=this.userInterfaceService.activeMatProgress$.asObservable(),this.customModuleList$=this.userRestApiService.getAllUserModules$,this._onDestroy$=new n.Subject,this.includedFonts=new Set,this.doc)try{for(var h=H(d),f=h.next();!f.done;f=h.next()){var y=f.value,k=this.doc.createElement("link");k.href="https://fonts.googleapis.com/css?family="+y,k.rel="stylesheet",this.includedFonts.add(k),this.doc.head.appendChild(k)}}catch(e){b={error:e}}finally{try{f&&!f.done&&(g=h.return)&&g.call(h)}finally{if(b)throw b.error}}}return e.prototype.writeValue=function(e){try{this.emailObjectStore.setEmail(e),this.previewTemplate=!1,this.changeDetectorRef.markForCheck()}catch(e){this.userInterfaceService.notify(e.message)}},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){console.info("[IpEmailBuilderComponent] Method [setDisabledState] is not implemented.")},e.prototype.saveEmail=function(){var e=this;return this.emailObjectStore.currentEmailHasChanges$.pipe(o.exhaustMap((function(t){return n.iif((function(){return t}),e.ngb.createHTMLTemplate$(),e.userInterfaceService.notify("No changes were detected to be save!").afterDismissed())})),o.take(1)).subscribe()},e.prototype.disableBlocksList$=function(e){var t=this;return n.iif((function(){var t;return!(null===(t=e.state)||void 0===t?void 0:t.disabled)}),this.emailObjectStore.emailStructuresAsObservable$.pipe(o.map((function(e){return e.length>0})),o.exhaustMap((function(n){return n?t.middlewares.disableBlockDragFromList(e):re(!0)})))).pipe(o.take(1))},e.prototype.disableStructureList$=function(e){return this.middlewares.disableStructureDragFromList(e).pipe(o.take(1))},e.prototype.trackByFn=function(e){return e.type},e.prototype.changeTabIndex=function(e){this.userInterfaceService.changeTabIndex(e)},e.prototype.download=function(e){var t=this;return this.middlewares.exportFile(e).pipe(o.exhaustMap((function(){return t.ngb.createHTMLTemplate$().pipe(o.map((function(t){return Object.assign(Object.assign({},t),{type:e})})))})),o.catchError((function(e){return t.middlewares.catchError(e).pipe(o.switchMap((function(){return t.userInterfaceService.notify(e.message),n.EMPTY})))})),o.take(1)).subscribe((function(e){var n=e.type,o=e.html,r=e.mjml,i=t.renderer2.createElement("a"),l=o;"mjml"===n?l=r:"json"===n&&(l=JSON.stringify(t.ngb.Email,null,1));var a=URL.createObjectURL(new Blob([l],{type:"json"===n?"text/json":"text/html"})),s=t.slugifyPipe.transform(t.ngb.Email.general.name||"ngb-template");i.href=a,i.target="_blank",i.download=s+"."+n,i.click(),URL.revokeObjectURL(a)}))},e.prototype.importFile=function(){var e=this;this.userInterfaceService.importDialog$().pipe(o.switchMap((function(e){if(e instanceof Error)throw e;return re(e)})),o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterfaceService.notify(t.message),n.EMPTY})))})),o.take(1),o.filter((function(e){return!!e}))).subscribe((function(t){e.writeValue(t),e.userInterfaceService.notify("Email has been imported successfully.")}))},e.prototype.createArrayFromStructureColumns=function(e){var t=e.columns;return new Array(t).fill("")},e.prototype.togglePreview=function(){var e=this;return this.emailObjectStore.createHTMLTemplate$().pipe(o.exhaustMap((function(){return e.middlewares.togglePreview(!e.previewTemplate)})),o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterfaceService.notify(t.message),n.EMPTY})))})),o.take(1)).subscribe((function(t){e.previewTemplate=t,e.changeDetectorRef.markForCheck()}))},e.prototype.ngOnInit=function(){var e=this;n.fromEvent(window,"beforeunload").pipe(o.withLatestFrom(this.emailObjectStore.currentEmailHasChanges$),o.filter((function(e){var t=N(e,2);t[0];return t[1]})),o.switchMap((function(t){var n=N(t,1)[0];return e.middlewares.preventWindowExit(n)})),o.takeUntil(this._onDestroy$)).subscribe((function(e){e.preventDefault(),e.returnValue=""})),this.emailObjectStore.emailAsObservable$.pipe(o.takeUntil(this._onDestroy$)).subscribe((function(t){var n,o;null===(n=e.onTouched)||void 0===n||n.call(e),null===(o=e.onChange)||void 0===o||o.call(e,t),e.emailChange.next(t)}))},e.prototype.ngOnChanges=function(e){e.email&&this.writeValue(e.email.currentValue)},e.prototype.ngOnDestroy=function(){this._onDestroy$.next(),this._onDestroy$.complete(),this.userInterfaceService.reset(),this.doc&&this.includedFonts.forEach((function(e){return e.remove()})),this.includedFonts.clear()},e}();Ze.decorators=[{type:t.Component,args:[{selector:"pb-email-builder",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-sidenav-container>\n  <div class="pb-builder-container" fxLayout="column" fxFlex>\n    <mat-progress-bar *ngIf="activeMatProgress$ | async" mode="buffer"></mat-progress-bar>\n    <mat-toolbar fxLayoutGap="1rem" fxLayoutAlign="space-between center">\n      <ng-content fxLayout fxLayoutGap="0.5rem" select=".top-actions"></ng-content>\n\n      <div fxFlexlayout fxLayoutGap="0.5rem">\n        <button *ngIf="ngb.config.useSaveButton" type="button" (click)="saveEmail()" mat-stroked-button color="primary"\n                i18n="actions|Save Email">\n          Save Email\n        </button>\n        <button *ngIf="ngb.config.usePreviewButton" type="button" (click)="togglePreview()" mat-stroked-button>\n          <ng-container [ngSwitch]="previewTemplate">\n            <span *ngSwitchDefault i18n="actions|Preview">Preview</span>\n            <span *ngSwitchCase="true" i18n="actions|Close Preview">Close Preview</span>\n          </ng-container>\n        </button>\n\n        <button mat-button mat-stroked-button i18n="actions|Import" (click)="importFile()">\n          Import\n        </button>\n\n        <ng-container *ngIf="ngb.config.useDownloadButton">\n          <button mat-button [matMenuTriggerFor]="downloadMenu" mat-stroked-button i18n="actions|Export">\n            Export\n          </button>\n          <mat-menu #downloadMenu="matMenu">\n            <button mat-menu-item (click)="download(\'html\')" i18n="actions|Export HTML">\n              Export HTML\n            </button>\n            <button mat-menu-item (click)="download(\'mjml\')" i18n="actions|Export MJML">\n              Export MJML\n            </button>\n            <button mat-menu-item (click)="download(\'json\')" i18n="actions|Export JSON">\n              Export JSON\n            </button>\n          </mat-menu>\n        </ng-container>\n\n      </div>\n      \x3c!-- <div class="history-actions" style="margin-inline-start: auto;">\n        <span>Last saved Now</span>\n        <button type="button" mat-icon-button>\n          <mat-icon>undo</mat-icon>\n        </button>\n        <button type="button" mat-icon-button>\n          <mat-icon>redo</mat-icon>\n        </button>\n      </div> --\x3e\n    </mat-toolbar>\n    <ng-container [ngSwitch]="previewTemplate">\n      <pb-builder-container *ngSwitchDefault [ngStyle]="getBuilderContainerStyles$ | async">\n        <ng-content select=".rewrited-empty-email"></ng-content>\n      </pb-builder-container>\n\n      <pb-preview-template fxLayout fxFlex="auto" fxLayoutAlign="center" [template]="currentHTMLTemplate$ | async"\n                           *ngSwitchCase="true">\n      </pb-preview-template>\n    </ng-container>\n  </div>\n  <mat-sidenav mode="side" fxFlex="0 0 310px" [opened]="!previewTemplate" position="end" class="pb-builder-content">\n    <mat-tab-group [selectedIndex]="currentTabIndex$ | async" (selectedIndexChange)="changeTabIndex($event)">\n      <mat-tab i18n-label="Content" label="Content">\n        <div class="main-padding">\n          <cdk-drop-list class="elements" [cdkDropListConnectedTo]="cdkDropListConnectedTo$ | async"\n                         [cdkDropListData]="blocks" [cdkDropListSortingDisabled]="true" id="block-elements">\n            <div cdkDrag *ngFor="let block of blocks; trackBy: trackByFn" [cdkDragData]="block"\n                 [cdkDragDisabled]="disableBlocksList$(block) | async" class="drag-element"\n                 [matTooltip]="block.state.message">\n              <mat-icon>{{ block.icon }}</mat-icon>\n              <div class="drag-element-title">{{ block.title }}</div>\n            </div>\n          </cdk-drop-list>\n\n          <mat-divider style="margin: 1em 0;"></mat-divider>\n          \x3c!-- <h3 class="divider"><span>Structures</span></h3> --\x3e\n          <cdk-drop-list class="elements structure-elements" cdkDropListConnectedTo="structures-drop-list"\n                         [cdkDropListSortingDisabled]="true" [cdkDropListData]="structures">\n            <div cdkDrag *ngFor="let structure of structures; trackBy: trackByFn" [cdkDragData]="structure"\n                 [cdkDragDisabled]="disableStructureList$(structure) | async" class="drag-element structure-element"\n                 [ngClass]="structure.type">\n              <div *ngFor="let column of createArrayFromStructureColumns(structure)"></div>\n            </div>\n          </cdk-drop-list>\n          <ng-content fxLayout fxLayoutGap="0.5rem" select=".after-structure-blocks"></ng-content>\n        </div>\n      </mat-tab>\n      <mat-tab i18n-label="Modules" label="Modules" class="modules-tab">\n        <cdk-virtual-scroll-viewport itemSize="54" [minBufferPx]="54 * 10" [maxBufferPx]="54 * 20"\n                                     style="height: inherit;"\n                                     *ngIf="customModuleList$ | async as modules; else emptyModuleList">\n          <div class="main-padding">\n            <div class="custom-modules" cdkDropList cdkDropListConnectedTo="structures-drop-list"\n                 [cdkDropListData]="modules" [cdkDropListSortingDisabled]="true">\n              <div fxLayout="column" fxLayoutGap="1rem">\n                <ng-container *cdkVirtualFor="let module of modules">\n                  <div cdkDrag [cdkDragData]="module.module"\n                       [cdkDragDisabled]="disableStructureList$(module.module) | async" class="drag-element"\n                       style="padding: 1em;text-transform: uppercase;height: 54px;">\n                    <span *ngIf="module.name">{{module.name}}</span>\n                    \x3c!-- <img *ngIf="module.thumb" [src]="module.thumb" /> --\x3e\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <ng-content fxLayout fxLayoutGap="0.5rem" select=".after-content-blocks"></ng-content>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        <ng-template #emptyModuleList>\n          <h4 class="main-padding" style="text-align: center;" i18n="modules|empty list message">\n            Module list is empty\n          </h4>\n        </ng-template>\n      </mat-tab>\n      <mat-tab i18n-label="Settings" label="Settings">\n        <div class="pb-builder-options" [ngSwitch]="showGeneralSettings$ | async">\n          <pb-general-settings *ngSwitchDefault></pb-general-settings>\n          <pb-block-settings *ngSwitchCase="\'block\'"></pb-block-settings>\n          <pb-structure-settings *ngSwitchCase="\'structure\'" fxLayout="column"></pb-structure-settings>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-sidenav>\n</mat-sidenav-container>\n',exportAs:"pbEmailBuilder",changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:O.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return Ze})),multi:!0},Xe],styles:['/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:100vh}.hide{display:none}::ng-deep mat-sidenav-container{height:100%}::ng-deep mat-sidenav-container mat-sidenav-content{width:100%;z-index:unset!important;overflow:unset!important}::ng-deep h3.divider{text-align:center;display:block;overflow:hidden;margin:0 0 1rem}::ng-deep h3.divider span{font-weight:100;position:relative;display:inline-block}::ng-deep h3.divider span:after,::ng-deep h3.divider span:before{content:"";position:absolute;top:50%;height:1px;background:#ccc;width:99999px}::ng-deep h3.divider span:before{left:100%;margin-left:10px}::ng-deep h3.divider span:after{right:100%;margin-right:10px}::ng-deep .pb-builder-content{border-right:1px solid rgba(0,0,0,.12)}::ng-deep .pb-builder-content .overflow{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#fff;opacity:.5;display:none;z-index:3}::ng-deep .pb-builder-content.disabled .overflow{display:block}::ng-deep .pb-builder-content .mat-tab-label{width:50%;min-width:auto;height:64px;font-size:medium;text-transform:uppercase;padding:0 12px}::ng-deep .pb-builder-content .mat-tab-body-wrapper,::ng-deep .pb-builder-content .mat-tab-group{height:100%}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body{padding:0}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements{display:grid;grid-gap:.5rem;margin-bottom:1rem;grid-template:repeat(2,1fr)/repeat(3,1fr)}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.structure-elements{grid-template:repeat(4,1fr)/1fr}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.cdk-drop-list-dragging .cdk-drag{transform:none!important}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body input{height:auto;border:none}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .custom-modules .drag-element img{max-width:100%}::ng-deep .pb-builder-container{position:relative;height:100%}::ng-deep .pb-builder-container mat-progress-bar{position:absolute}::ng-deep .pb-builder-container mat-toolbar{background-color:#fff}::ng-deep .pb-builder-options .mat-expansion-panel{box-shadow:none!important}::ng-deep .pb-builder-options .mat-expansion-panel.mat-expanded{overflow:visible}::ng-deep .pb-builder-options mat-expansion-panel-header:not(.mat-expanded){background:rgba(0,0,0,.04)}::ng-deep .pb-builder-options ::ng-deep .group{display:grid;grid-template:auto/repeat(2,1fr);grid-gap:1rem}::ng-deep .pb-builder-options ::ng-deep .group>*{align-self:center}::ng-deep .pb-builder-options ::ng-deep .group+.group{margin-top:1em}::ng-deep .pb-builder-options ::ng-deep .group.four{grid-template-columns:repeat(4,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.f-large{grid-template-columns:2fr 1fr}::ng-deep .pb-builder-options ::ng-deep .group.l-large{grid-template-columns:1fr 2fr}::ng-deep .pb-builder-options ::ng-deep .group.three{grid-template-columns:repeat(3,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-small{grid-template-columns:1fr repeat(2,2fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-large{grid-template-columns:2fr repeat(2,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.l-large{grid-template-columns:repeat(2,1fr) 2fr}::ng-deep .pb-builder-options ::ng-deep .group .mat-form-field-infix{width:auto!important}::ng-deep .drag-element{text-align:center;border:1px solid #ccc;box-sizing:border-box;background:#fff;color:#7b7b7b;cursor:move;transition:box-shadow .3s ease-in-out;will-change:box-shadow;border-radius:3px}::ng-deep .drag-element.cdk-drag-disabled,::ng-deep .drag-element.cdk-drag-placeholder{cursor:not-allowed;opacity:.6}::ng-deep .drag-element:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}::ng-deep .drag-element .mat-icon{font-size:40px!important;padding:.5rem;width:auto;height:auto}::ng-deep .drag-element img{max-width:100%}::ng-deep .drag-element-title{font-size:.9em;text-transform:uppercase;margin-bottom:.5rem}::ng-deep .drag-element.structure-element{height:60px;position:relative;padding:4px;display:grid;grid-template:1fr/1fr}::ng-deep .drag-element.structure-element>div{background:#ccc;border:4px solid #bbb}::ng-deep .drag-element.structure-element.cols_2{grid-template-columns:repeat(2,5fr)}::ng-deep .drag-element.structure-element.cols_3{grid-template-columns:repeat(3,3.33fr)}::ng-deep .drag-element.structure-element.cols_4{grid-template-columns:repeat(4,2.5fr)}::ng-deep .drag-element.structure-element.cols_12{grid-template-columns:6fr 4fr}::ng-deep .drag-element.structure-element.cols_21{grid-template-columns:4fr 6fr}::ng-deep .main-padding{padding:1rem}::ng-deep .cdk-drop-list-receiving>:not(.cdk-drag){opacity:.6}::ng-deep .cdk-drop-list-dragging>*{pointer-events:none}@keyframes drag-animation{0%{opacity:0;height:0}to{opacity:1}}::ng-deep .cdk-drag-animating{animation:drag-animation 1s cubic-bezier(0,0,.2,1) infinite}::ng-deep .cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 2px rgba(63,81,181,.5);min-height:60px;min-width:100px;background-color:#fff}::ng-deep .cdk-drag.structure-element.cdk-drag-placeholder{box-shadow:0 0 1px 2px #ff4081;width:100%;pointer-events:none}']}]}],Ze.ctorParameters=function(){return[{type:Ge},{type:Fe},{type:Ne},{type:ze},{type:t.Renderer2},{type:Xe},{type:Ee},{type:t.ChangeDetectorRef},{type:Array,decorators:[{type:t.Inject,args:[Pe]}]},{type:Array,decorators:[{type:t.Inject,args:[Oe]}]},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:Document,decorators:[{type:t.Inject,args:[D.DOCUMENT]}]}]},Ze.propDecorators={email:[{type:t.Input}],emailChange:[{type:t.Output}]};var et=function(){function e(){}return e.prototype.ngOnInit=function(){},e}();et.decorators=[{type:t.Directive}],et.propDecorators={portal:[{type:t.ViewChild,args:[_.CdkPortal,{static:!0}]}]};var tt=function(e){function t(t,r,i){var l=e.call(this)||this;return l.userRestApi=t,l.emailObject=r,l.internalService=i,l.setAsReadOnly$=l.internalService.currentEditingBlock$.pipe(o.map((function(e){return e!==l.block}))),l.staticQuillConfig={toolbar:{container:[["bold","italic","underline","strike"],[{header:[1,2,3,4,5,6,!1]},{size:["small",!1,"large","huge"]}],[{align:[]},"link"],[{list:"ordered"},{list:"bullet"}],[{color:[]},{background:[]}],["clean"]],handlers:{placeholder:function(e){var t=this.quill.getSelection(),n=this.quill.getFormat(),o=this.quill.getText(t.index,t.length);this.quill.deleteText(t.index,o.length),this.quill.insertText(t.index,e,n),this.quill.setSelection(t.index,e.length)}}}},l.quillInit$=l.userRestApi.getAllUserMergeFields$.pipe(o.map((function(e){l.staticQuillConfig.toolbar.container.splice(-1,0,[{placeholder:e}])})),o.mapTo(!0),o.take(1)),l.textChanged$=new n.Subject,l.componentDestroyed$=new n.Subject,l}return z(t,e),t.prototype.getTextStyles=function(){var e=this.block.options,t=e.color,n=e.font,o=e.lineHeight,r=e.padding;return Object.assign(Object.assign(Object.assign({color:t,"word-break":"break-all"},ee(o)),Z(n)),Q(r))},t.prototype.contentChanged=function(){this.textChanged$.next()},t.prototype.ngOnInit=function(){var e=this;this.textChanged$.pipe(o.debounceTime(600),o.takeUntil(this.componentDestroyed$)).subscribe((function(){e.emailObject.markForCheck()}))},t.prototype.ngOnDestroy=function(){this.componentDestroyed$.next(),this.componentDestroyed$.complete()},t}(et);tt.decorators=[{type:t.Component,args:[{selector:"pb-text-element",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div [ngStyle]="getTextStyles()">\n  <quill-editor *ngIf="quillInit$ | async; else loadingModules" i18n-placeholder="text-element|placeholder"\n                placeholder="Insert text here ..." [modules]="staticQuillConfig" [readOnly]="setAsReadOnly$ |async"\n                [(ngModel)]="block.innerText" (onContentChanged)="contentChanged()">\n  </quill-editor>\n</div>\n\n<ng-template #loadingModules>\n  <span i18n="text-element|loading message">Please wait ...</span>\n</ng-template>\n',encapsulation:t.ViewEncapsulation.None,styles:['@charset "UTF-8";\n/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */\n/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:"•"}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:"☑"}.ql-editor ul[data-checked=false]>li:before{content:"☐"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:"";display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover{color:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble,.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:"";display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-stroke.ql-thin,.ql-bubble .ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-item:before,.ql-bubble .ql-picker.ql-header .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]:before{content:"Heading 1"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]:before{content:"Heading 2"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]:before{content:"Heading 3"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]:before{content:"Heading 4"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]:before{content:"Heading 5"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]:before{content:"Heading 6"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-item:before,.ql-bubble .ql-picker.ql-font .ql-picker-label:before{content:"Sans Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before{content:"Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before{content:"Monospace"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-item:before,.ql-bubble .ql-picker.ql-size .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before{content:"Small"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before{content:"Large"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before{content:"Huge"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"×";font-size:16px;font-weight:700}.ql-container.ql-bubble:not(.ql-disabled) a{position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:after,.ql-container.ql-bubble:not(.ql-disabled) a:before{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:hover:after,.ql-container.ql-bubble:not(.ql-disabled) a:hover:before{visibility:visible}quill-editor{display:block;word-break:break-word}quill-editor .ql-container{font-family:inherit;font-size:inherit}quill-editor .ql-container .ql-editor{padding:0!important;line-height:inherit;font:inherit;overflow:visible}quill-editor .ql-placeholder .ql-picker-label:before{display:block;content:"Tags";min-width:50px}quill-editor .ql-placeholder.ql-expanded .ql-picker-item:before{content:attr(data-value);width:-moz-min-content;width:min-content}quill-editor .ql-tooltip{z-index:10;line-height:normal}quill-editor .ql-tooltip .ql-picker-options{max-height:300px;overflow:auto}quill-editor .ql-toolbar{width:600px;width:-moz-max-content;width:max-content}quill-editor h1,quill-editor h2,quill-editor h3,quill-editor h4,quill-editor h5,quill-editor h6{font-weight:inherit;line-height:inherit}']}]}],tt.ctorParameters=function(){return[{type:Fe},{type:ze},{type:Ne}]};var nt=function(e){function t(t,n,o){var r=e.call(this)||this;return r.imageUploader=t,r.chRef=n,r.ngb=o,r}return z(t,e),Object.defineProperty(t.prototype,"align",{get:function(){return this.block.options.align},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"src",{get:function(){return this.block.src||"https://via.placeholder.com/600x200?text=CHANGE+ME"},enumerable:!1,configurable:!0}),t.prototype.uploadImage=function(){return R(this,void 0,void 0,(function(){var e;return U(this,(function(t){switch(t.label){case 0:return[4,this.imageUploader.browse$().toPromise()];case 1:return(e=t.sent())&&(this.block.src=e,this.chRef.markForCheck()),[2]}}))}))},t.prototype.getImageStyles=function(){var e=this.block.options,t=e.border,n=e.width,o=e.height,r=e.padding;return Object.assign(Object.assign({width:te(n),height:te(o)},Q(r)),K(t))},t}(et);nt.decorators=[{type:t.Component,args:[{selector:"pb-image",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n\x3c!-- <div\n  class="overflow"\n  *ngIf="(ngb.currentEditingBlock$ | async) !== block"\n  (click)="uploadImage()"\n>\n  <mat-icon inline>cloud_upload</mat-icon>\n</div> --\x3e\n<img [src]="src" [title]="block.options.title" [ngStyle]="getImageStyles()" />\n',styles:[":host{display:block;line-height:0}:host:hover .overflow{opacity:1}.overflow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3);opacity:0;will-change:opacity;transition:opacity .3s cubic-bezier(.075,.82,.165,1);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:3em}.overflow mat-icon{opacity:.8}img{max-width:100%;box-sizing:border-box}"]}]}],nt.ctorParameters=function(){return[{type:Ve},{type:t.ChangeDetectorRef},{type:Ge}]},nt.propDecorators={align:[{type:t.HostBinding,args:["style.textAlign"]}]};var ot=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getButtonStyles=function(){var e=this.block.options,t=e.backgroundColor,n=e.border,o=e.color,r=e.font,i=e.lineHeight,l=e.innerPadding,a=e.fullWidth;return Object.assign(Object.assign(Object.assign(Object.assign({color:o,width:a?"100%":"auto",backgroundColor:t},Z(r)),Q(l)),K(n)),ee(i))},t.prototype.getParentStyles=function(){var e=this.block.options,t=e.align,n=e.padding;return Object.assign({justifyContent:("center"===t?"center":"right"===t&&"flex-end")||"flex-start"},Q(n))},t}(et);ot.decorators=[{type:t.Component,args:[{selector:"pb-button",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout [ngStyle]="getParentStyles()">\n  <button type="button" [class.full-width]="block.options.fullWidth" [ngStyle]="getButtonStyles()">\n    {{ block.innerText }}\n  </button>\n</div>\n',encapsulation:t.ViewEncapsulation.Emulated,styles:["button{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]}]}];var rt=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getDividerStyles=function(){var e=this.block.options,t=e.border,n=e.padding;return Object.assign(Object.assign({},K(t,"borderTop")),Q(n,"margin"))},t.prototype.ngOnInit=function(){},t}(et);rt.decorators=[{type:t.Component,args:[{selector:"pb-divider",template:'<div [ngStyle]="getDividerStyles()"></div>',styles:["\n      :host {\n        display: table;\n        width: 100%;\n      }\n    "]}]}];var it=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),Object.defineProperty(t.prototype,"height",{get:function(){return te(this.block.options.height)},enumerable:!1,configurable:!0}),t}(et);it.decorators=[{type:t.Component,args:[{selector:"pb-spacer",template:"",styles:["\n      :host {\n        display: table;\n        width: 100%;\n        transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n      }\n    "]}]}],it.propDecorators={height:[{type:t.HostBinding,args:["style.height"]}]};var lt=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getParentStyles=function(){var e=this.block.options,t=e.color,n=e.font,o=e.lineHeight,r=e.padding;return Object.assign(Object.assign(Object.assign({color:t},ee(o)),Z(n)),Q(r))},t.prototype.getLabelStyles=function(){var e=this.block.options.innerPadding;return Object.assign(Object.assign({},Q(e)),{lineHeight:0})},t.prototype.getSocialListStyles=function(){var e=this.block.options.align;return{display:"flex",placeContent:("left"===e?"flex-start":"right"===e&&"flex-end")||e}},t.prototype.getSocialListClasses=function(){return"social-list "+this.block.options.mode},t.prototype.getSocialNetworkIcon=function(e){return oe(e+".png")},t}(et);lt.decorators=[{type:t.Component,args:[{selector:"pb-social",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout [ngStyle]="getParentStyles()">\n  <div [class]="getSocialListClasses()" [ngStyle]="getSocialListStyles()">\n    <ng-container *ngIf="block.networks.length; else noSocialNetworks">\n      <div class="social-list-item" *ngFor="let network of block.networks">\n        <div [ngStyle]="getLabelStyles()">\n          <img [src]="getSocialNetworkIcon(network.name)" [width]="block.options.iconSize.value"\n            [height]="block.options.iconSize.value" [classList]="network.name" [alt]="network.name" />\n        </div>\n        <span *ngIf="network.label">{{ network.label }}</span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #noSocialNetworks>\n  <p i18n="social block|Empty social list message">Please add some social networks.</p>\n</ng-template>\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px}.social-list-item img.facebook{background-color:#3a5898}.social-list-item img.twitter{background-color:#d95988}.social-list-item img.github{background-color:#000}.social-list-item img.instagram{background-color:#3f729b}.social-list-item img.web{background-color:#4bade9}.social-list-item img.snapchat{background-color:#fffa54}.social-list-item img.youtube{background-color:#ea3323}.social-list-item img.vimeo{background-color:#53b4e7}.social-list-item img.medium{background-color:#000}.social-list-item img.soundcloud{background-color:#ef7f31}.social-list-item img.dribbble{background-color:#d95988}.social-list-item img.pinterest{background-color:#bd071c}.social-list-item img.linkedin{background-color:#0077b5}.social-list-item img.tumblr{background-color:#334356}.social-list-item img.xing{background-color:#296365}.social-list-item img.tiktok{background-color:#000}"]}]}];var at=new Map,st=function(){function e(e,t){this.cResolver=e,this.viewContainerRef=t,at.set("text",tt),at.set("image",nt),at.set("button",ot),at.set("divider",rt),at.set("spacer",it),at.set("social",lt)}return Object.defineProperty(e.prototype,"pbDynamicComponent",{set:function(e){var t=this.cResolver.resolveComponentFactory(at.get(e.type));this.viewContainerRef.createComponent(t).instance.block=e},enumerable:!1,configurable:!0}),e}();st.decorators=[{type:t.Directive,args:[{selector:"[pbDynamicComponent]"}]}],st.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ViewContainerRef}]},st.propDecorators={pbDynamicComponent:[{type:t.Input}]};var ct=function(){function e(e,t,n,o,r,i,l){var a;this.userInterfaceService=e,this.emailObjectStore=t,this.userRestApi=n,this.pbStorage=o,this.pbMiddlewaresService=r,this.sanitizer=i,this.userConfig=l,this.showTemplateList=null===(a=this.userConfig.templateListIfEmpty)||void 0===a||a,this.getStructures$=this.emailObjectStore.emailStructuresAsObservable$,this.activeMatProgress$=this.userInterfaceService.activeMatProgress$}return e.prototype.onHostClick=function(){this.userInterfaceService.editGeneralSettings()},e.prototype.trackBy=function(e){return e.id},e.prototype.disableStructureDrag$=function(e){return this.pbMiddlewaresService.disableStructureDragWithinEmailBody(e).pipe(o.take(1))},e.prototype.openTemplateDialog=function(e){var t=this;e.stopImmediatePropagation(),this.userInterfaceService.activeMatProgress$.next(!0);var r=this.pbStorage.getCachedTemplateList();return n.iif((function(){return r.length>0}),re(r),this.userRestApi.getAllUserTemplates$.pipe(o.tap((function(e){return t.pbStorage.cacheTemplateList(e)})))).pipe(o.map((function(e){return G(e,[{category:"latest",templates:t.pbStorage.getLatestUsedTemplates()}])})),o.finalize((function(){return t.userInterfaceService.activeMatProgress$.next(!1)})),o.exhaustMap((function(e){return(null==e?void 0:e.length)>0?t.userInterfaceService.templatesListDialog$(e):n.throwError(new Error("The template list is empty"))})),o.switchMap((function(e){var n=e.category,o=e.template;return t.pbMiddlewaresService.chooseTemplate(n,o)})),o.exhaustMap((function(e){var n=e.category,r=e.template;return t.userRestApi.getUserTemplateData$(n,r).pipe(o.tap((function(e){"latest"!==n&&t.pbStorage.addTemplateToLatestUsed(e)})))})),o.catchError((function(e){return t.pbMiddlewaresService.catchError(e).pipe(o.switchMap((function(){return t.userInterfaceService.notify(e.message),n.EMPTY})))})),o.take(1)).subscribe((function(e){e?t.emailObjectStore.setEmail(new _e(e.templateData)):t.userInterfaceService.notify("No template was chosen")}))},e.prototype.dropNewStructure=function(e){var t=this;e.previousContainer===e.container?this.emailObjectStore.changeStructureOrder(e):this.pbMiddlewaresService.addStructure(e).pipe(o.tap((function(e){return t.emailObjectStore.addStructure(e)})),o.take(1)).subscribe()},e.prototype.getStructureStyles=function(e){var t=e.options,n=t.border,o=t.background,r=t.padding,i=t.margin,l=t.columnsWidth,a=t.fullWidth;return Object.assign(Object.assign(Object.assign({width:a?"100%":this.emailObjectStore.Email.general.width.value+"px",backgroundRepeat:o.repeat,backgroundColor:o.color,backgroundSize:te(o.size),backgroundPosition:"top center",gridTemplateColumns:l.map((function(e){return e+"fr"})).join(" ")},K(n)),Q(r)),X(i))},e.prototype.getBackgroundImage=function(e){var t=e.options.background.url;return this.sanitizer.bypassSecurityTrustStyle(t&&"url("+t+")")},e}();ct.decorators=[{type:t.Component,args:[{selector:"pb-builder-container",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="getStructures$ | async as structures">\n  <div cdkDropList [cdkDropListData]="structures"\n       cdkDropListConnectedTo="structures-drop-list" id="structures-drop-list"\n       (cdkDropListDropped)="dropNewStructure($event)" fxFlex fxLayout="column" fxLayoutAlign="start center">\n    <pb-structure cdkDrag\n                  *ngFor="let structure of structures; trackBy: trackBy; let index = index" [id]="structure.id"\n                  [index]="index" [ngClass]="structure.type" [structure]="structure"\n                  [ngStyle]="getStructureStyles(structure)"\n                  [style.backgroundImage]="getBackgroundImage(structure)"\n                  [cdkDragDisabled]="disableStructureDrag$(structure) | async">\n      <button cdkDragHandle mat-icon-button class="move" *ngIf="!(disableStructureDrag$(structure) | async)"\n              i18n-matTooltip="structure|Move Structure" matTooltip="Move Structure">\n        <mat-icon i18n-aria-label="structure|Move Structure" aria-label="Move structure" inline>pan_tool</mat-icon>\n      </button>\n    </pb-structure>\n\n    <div class="empty-email mat-typography" *ngIf="!structures.length">\n      <ng-content></ng-content>\n      <div class="default-empty-email" *ngIf="showTemplateList">\n        <h1 i18n="templates|First header">Choose template from list</h1>\n        <p i18n="templates|Description">Or create one from scratch by dragging structures and blocks here!</p>\n        <button type="button" color="primary" [disabled]="activeMatProgress$ | async"\n                (click)="openTemplateDialog($event)" mat-flat-button i18n="templates|Choose a template button">\n          Choose template\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n',providers:[],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-structure>.cdk-drag-handle{position:absolute;cursor:move;border-radius:50% 50% 0 0;height:30px;width:30px;font-size:smaller;line-height:0;top:-30px;right:0;background-color:#ff4081;color:#fff;opacity:0}pb-structure.cdk-drag-preview>.cdk-drag-handle,pb-structure:hover>.cdk-drag-handle{opacity:.8}pb-structure.cdk-drag-preview>.cdk-drag-handle:hover,pb-structure:hover>.cdk-drag-handle:hover{opacity:1}pb-structure ::ng-deep .cdk-drag-placeholder{background-color:#3f51b5;opacity:.6;cursor:move;border-radius:0}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep :not(mat-icon){display:none}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep mat-icon{padding:5px;color:#fff}:host{background-color:#f2f2f2;overflow-x:hidden;overflow-y:auto;position:relative;height:100%}:host #structures-drop-list{height:-moz-fit-content;height:fit-content;max-width:100%;padding-bottom:3rem;will-change:box-shadow}:host #structures-drop-list .empty-email{display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1 1 100%;margin-top:10%}:host #structures-drop-list .empty-email .default-empty-email{text-align:center}:host #structures-drop-list.cdk-drop-list-dragging .empty-email{display:none}"]}]}],ct.ctorParameters=function(){return[{type:Ne},{type:ze},{type:Fe},{type:Ae},{type:Ee},{type:c.DomSanitizer},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]}]},ct.propDecorators={onHostClick:[{type:t.HostListener,args:["click"]}]};var pt,ut,dt,mt=function(){function e(e,t,n){var o=this;this.pbEmailObject=e,this.fallbackFonts=n,this.fontsMap=new Map,this.stylesMap=new Map([["normal",$localize(pt||(pt=W([":@@font_style_normal:Normal"],[":@@font_style_normal:Normal"])))],["italic",$localize(ut||(ut=W([":@@font_style_italic:Italic"],[":@@font_style_italic:Italic"])))],["oblique",$localize(dt||(dt=W([":@@font_style_oblique:Oblique"],[":@@font_style_oblique:Oblique"])))]]),t.forEach((function(e){var t=N(e.match(/[^\d:,]{2,}|\d{3}/g)),n=t[0],r=t.slice(1);o.fontsMap.set(n.replace("+"," "),G(new Set(r.map(Number))))}))}return Object.defineProperty(e.prototype,"fontWeightList",{get:function(){return this.isGoogleFont()?this.fontsMap.get(this.font.family):[100,400,500,700,900]},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"fontFamilyList",{get:function(){return G(this.fontsMap.keys(),this.fallbackFonts)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"styles",{get:function(){return G(this.stylesMap.keys())},enumerable:!1,configurable:!0}),e.prototype.markForCheck=function(){this.pbEmailObject.markForCheck()},e.prototype.isGoogleFont=function(){return this.fontsMap.has(this.font.family)},e.prototype.getStyleLabel=function(e){return this.stylesMap.get(e)},e.prototype.hasProperty=function(e){return this.font.hasOwnProperty(e)},e}();mt.decorators=[{type:t.Component,args:[{selector:"pb-font-styles",template:'\n    <div class="group two">\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'family\')">\n        <mat-label i18n="settings|Font Family">Family</mat-label>\n        <mat-select [(value)]="font.family" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let name of fontFamilyList" [ngStyle]="{ fontFamily: name }" [value]="name">\n            {{ name }}\n          </mat-option>\n        </mat-select>\n        <mat-hint *ngIf="isGoogleFont()" i18n="settings|Partial support">Partial support.</mat-hint>\n        <mat-hint *ngIf="!isGoogleFont()" i18n="settings|Full support">Full support.</mat-hint>\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'fallback\')">\n        <mat-label i18n="settings|Font Fallback">Fallback</mat-label>\n        <mat-select [(value)]="font.fallback" [disabled]="!isGoogleFont()" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let name of fallbackFonts" [ngStyle]="{ fontFamily: name }" [value]="name">\n            {{ name }}\n          </mat-option>\n        </mat-select>\n        <mat-hint i18n="settings|Full support">Full support.</mat-hint>\n      </mat-form-field>\n    </div>\n\n    <div class="group three">\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'size\')">\n        <mat-label i18n="settings|Font Size">Size</mat-label>\n        <input matInput type="number" max="30" min="10" step="1" (input)="markForCheck()" [(ngModel)]="font.size" />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'weight\')">\n        <mat-label i18n="settings|Font Weight">Weight</mat-label>\n        <mat-select placeholder="Weight" [(value)]="font.weight" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let weight of fontWeightList" [value]="weight">\n            {{ weight }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance="outline" style="min-width: 90px;">\n        <mat-label i18n="settings|Font Style">Style</mat-label>\n        <mat-select placeholder="Style" [(value)]="font.style" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let style of styles" [value]="style" i18n>\n            {{ getStyleLabel(style) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],mt.ctorParameters=function(){return[{type:ze},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:Array,decorators:[{type:t.Inject,args:[Ce]}]}]},mt.propDecorators={font:[{type:t.Input}]};var bt=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();bt.decorators=[{type:t.Component,args:[{selector:"pb-padding",template:'\n    <div class="group four">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Top">Top</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.top" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Right">Right</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.right" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Bottom">Bottom</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.bottom" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Left">Left</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.left" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],bt.ctorParameters=function(){return[{type:ze}]},bt.propDecorators={padding:[{type:t.Input}]};var gt,ht,ft,yt,kt=function(){function e(e){this.emailObject=e,this.label=$localize(gt||(gt=W([":@@line_height_label:Line Height"],[":@@line_height_label:Line Height"]))),this.units=["%","px","none"],this.unitsLabels=new Map([["%",$localize(ht||(ht=W([":@@unit_percent:Percent"],[":@@unit_percent:Percent"])))],["px",$localize(ft||(ft=W([":@@unit_pixels:Pixels"],[":@@unit_pixels:Pixels"])))],["none",$localize(yt||(yt=W([":@@unit_none:None"],[":@@unit_none:None"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getUnitLabel=function(e){return this.unitsLabels.get(e)},e}();kt.decorators=[{type:t.Component,args:[{selector:"pb-line-height",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label>{{ label }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]="lineHeight.value"\n          type="number"\n          step="1"\n          (input)="markForCheck()"\n          [disabled]="lineHeight.unit === \'none\'"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Line Height Settings|Change Line Height Unit">Unit</mat-label>\n        <mat-select placeholder="Unit" [(value)]="lineHeight.unit" (selectionChange)="markForCheck()" disableRipple>\n          <mat-option *ngFor="let unit of units" [value]="unit" i18n>\n            {{ getUnitLabel(unit) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],kt.ctorParameters=function(){return[{type:ze}]},kt.propDecorators={lineHeight:[{type:t.Input}],label:[{type:t.Input}],units:[{type:t.Input}]};var vt,qt,xt,wt,St=function(){function e(e){this.emailObject=e,this.disabled=!1,this.units=new Map([["%",$localize(vt||(vt=W([":@@unit_percent:Percent"],[":@@unit_percent:Percent"])))],["px",$localize(qt||(qt=W([":@@unit_pixels:Pixels"],[":@@unit_pixels:Pixels"])))],["contain",$localize(xt||(xt=W([":@@unit_contain:Contain"],[":@@unit_contain:Contain"])))],["cover",$localize(wt||(wt=W([":@@unit_cover:Cover"],[":@@unit_cover:Cover"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getLabel=function(){return this.label},e.prototype.toggleChange=function(e){var t=e.checked;this.model.auto=t,this.markForCheck()},e.prototype.getUnits=function(){return this.model.units||["%","px"]},e.prototype.disableValueField=function(){return this.model.auto||-1===["%","px"].indexOf(this.model.unit)},e.prototype.showAutoSlider=function(){return this.model.hasOwnProperty("auto")},e.prototype.getUnitLabel=function(e){return this.units.get(e)},e}();St.decorators=[{type:t.Component,args:[{selector:"pb-width-height",template:'\n    <div class="group" [ngClass]="{ three: showAutoSlider() }">\n      <mat-form-field appearance="outline">\n        <mat-label>{{ getLabel() }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]="model.value"\n          [disabled]="disableValueField() || disabled"\n          type="number"\n          [placeholder]="getLabel()"\n          (input)="markForCheck()"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Size Settings|Size Unit">Unit</mat-label>\n        <mat-select [disabled]="model.auto || disabled" [(value)]="model.unit" (selectionChange)="markForCheck()" disableRipple>\n          <mat-option *ngFor="let unit of getUnits()" [value]="unit" i18n>\n            {{ getUnitLabel(unit) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-slide-toggle\n        style="margin-top: -20px;"\n        *ngIf="showAutoSlider()"\n        [checked]="model.auto"\n        (change)="toggleChange($event)"\n        [disabled]="disabled"\n        i18n="Size Settings|Size Auto"\n      >\n        Auto\n      </mat-slide-toggle>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],St.ctorParameters=function(){return[{type:ze}]},St.propDecorators={model:[{type:t.Input}],label:[{type:t.Input}],disabled:[{type:t.Input}]};var Ct,It,Pt,Tt,Ot,Dt=function(){function e(e){this.emailObject=e,this._styleLabels=new Map([["solid",$localize(Ct||(Ct=W([":@@border_style_solid:Solid"],[":@@border_style_solid:Solid"])))],["dotted",$localize(It||(It=W([":@@border_style_dotted:Dotted"],[":@@border_style_dotted:Dotted"])))],["dashed",$localize(Pt||(Pt=W([":@@border_style_dashed:Dashed"],[":@@border_style_dashed:Dashed"])))],["double",$localize(Tt||(Tt=W([":@@border_style_double:Double"],[":@@border_style_double:Double"])))],["groove",$localize(Ot||(Ot=W([":@@border_style_groove:Groove"],[":@@border_style_groove:Groove"])))]])}return Object.defineProperty(e.prototype,"styleLabels",{get:function(){return G(this._styleLabels.keys())},enumerable:!1,configurable:!0}),e.prototype.getStyleLabel=function(e){return this._styleLabels.get(e)},e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.isEven=function(){return Object.keys(this.border).length%2==0},e.prototype.hasOwnProperty=function(e){return this.border.hasOwnProperty(e)},e}();Dt.decorators=[{type:t.Component,args:[{selector:"pb-border",template:'\n    <div class="group" [class.three]="isEven()">\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'width\')">\n        <mat-label i18n="Border Settings|Change Border Width">Width</mat-label>\n        <input\n          matInput\n          [(ngModel)]="border.width"\n          type="number"\n          min="0"\n          step="1"\n          (input)="markForCheck()"\n          i18n-placeholder\n          placeholder="Border Settings|Change Border Width"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'radius\')">\n        <mat-label i18n="Border Settings|Change Border Radius">Radius</mat-label>\n        <input\n          matInput\n          [(ngModel)]="border.radius"\n          type="number"\n          min="0"\n          step="1"\n          (input)="markForCheck()"\n          i18n-placeholder\n          placeholder="Border Settings|Change Border Radius"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'style\')" style="min-width: 90px">\n        <mat-label i18n="Border Settings|Change Border Style">Style</mat-label>\n        <mat-select\n          placeholder="Style"\n          [disabled]="!border.width"\n          [(value)]="border.style"\n          (selectionChange)="markForCheck()"\n          disableRipple\n        >\n          <mat-option *ngFor="let style of styleLabels" [value]="style">\n            {{ getStyleLabel(style) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <pb-color [options]="border" [disabled]="!border.width" *ngIf="hasOwnProperty(\'color\')" key="color"></pb-color>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Dt.ctorParameters=function(){return[{type:ze}]},Dt.propDecorators={border:[{type:t.Input}]};var Mt=function(){function e(e){this.emailObject=e,this.disabled=!1,this.key="backgroundColor",this.transparent=!1,this.showColorPicker=!1}return Object.defineProperty(e.prototype,"currentColorModel",{get:function(){return this.options[this.key]},set:function(e){this.options[this.key]=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"currentColor",{get:function(){return this.transparent?this.oldValue:this.currentColorModel},set:function(e){this.currentColorModel=e},enumerable:!1,configurable:!0}),e.prototype.onHostMouseLeave=function(){this.showColorPicker=!1},e.prototype.changeColor=function(e){this.currentColor=e.color.hex,this.emailObject.markForCheck()},e.prototype.makeTransparentColor=function(){this.showColorPicker=!1,this.transparent?(this.oldValue=this.currentColorModel,this.currentColor="transparent"):this.currentColor=this.oldValue,this.emailObject.markForCheck()},e.prototype.ngOnInit=function(){"transparent"===this.currentColor&&(this.transparent=!0,this.oldValue="#ffffff")},e}();Mt.decorators=[{type:t.Component,args:[{selector:"pb-color",template:'\n    <div class="group" *ngIf="showTransparent">\n      <mat-slide-toggle\n        [disabled]="disabled"\n        [(ngModel)]="transparent"\n        (change)="makeTransparentColor()"\n        i18n="Color settings|Make color transparent"\n      >\n        Transparent\n      </mat-slide-toggle>\n    </div>\n    <div class="group two">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Color settings|Change color">Color</mat-label>\n        <input matInput [disabled]="transparent || disabled" (focus)="showColorPicker = false" [(ngModel)]="currentColor" type="text" />\n      </mat-form-field>\n      <div class="choose-color" [class.transparent]="transparent || disabled">\n        <div class="current-color" (mouseover)="showColorPicker = !transparent" [style.backgroundColor]="currentColor"></div>\n        <color-chrome\n          [disableAlpha]="true"\n          *ngIf="showColorPicker"\n          (onChangeComplete)="changeColor($event)"\n          [color]="currentColor"\n        ></color-chrome>\n      </div>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n\n      .choose-color {\n        display: block;\n        height: 100%;\n        width: 100%;\n      }\n\n      .current-color {\n        width: 100%;\n        height: 48px;\n        border-radius: 5px;\n        margin: 0.25em 0;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: 1px solid rgba(0, 0, 0, 0.12);\n        transition: background-color 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n      }\n\n      .choose-color.transparent .current-color {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      color-chrome {\n        position: absolute;\n        top: calc(100% - 1em);\n        right: 0;\n        z-index: 9;\n      }\n    "]}]}],Mt.ctorParameters=function(){return[{type:ze}]},Mt.propDecorators={options:[{type:t.Input}],showTransparent:[{type:t.Input}],disabled:[{type:t.Input}],key:[{type:t.Input}],onHostMouseLeave:[{type:t.HostListener,args:["mouseleave"]}]};var jt,Lt,Bt,_t,Et=function(){function e(e){this.emailObject=e,this.targetLabels=new Map([["_blank",$localize(jt||(jt=W([":@@link_target_blank:Blank"],[":@@link_target_blank:Blank"])))],["_self",$localize(Lt||(Lt=W([":@@link_target_self:Self"],[":@@link_target_self:Self"])))],["_parent",$localize(Bt||(Bt=W([":@@link_target_parent:Parent"],[":@@link_target_parent:Parent"])))],["_top",$localize(_t||(_t=W([":@@link_target_top:Top"],[":@@link_target_top:Top"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getTargets=function(){return["_blank","_self","_parent","_top"]},e.prototype.getTargetLabel=function(e){return this.targetLabels.get(e)},e}();Et.decorators=[{type:t.Component,args:[{selector:"pb-link",template:'\n    <div class="group f-large">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Link Settings|Link">Link</mat-label>\n        <input matInput [(ngModel)]="link.href" type="url" placeholder="Link" (blur)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Link Settings|Target">Target</mat-label>\n        <mat-select\n          placeholder="Target"\n          i18n-placeholder="Link Settings|Target"\n          [(value)]="link.target"\n          disableRipple\n          (selectionChange)="markForCheck()"\n        >\n          <mat-option *ngFor="let target of getTargets()" [value]="target">\n            {{ getTargetLabel(target) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],Et.ctorParameters=function(){return[{type:ze}]},Et.propDecorators={link:[{type:t.Input}]};var $t,Ft,At,zt,Rt,Ut,Ht=function(){function e(e){this.emailObject=e,this.mode="horizontal",this.labels=new Map([["left",$localize($t||($t=W([":@@horizontal_align_left:Left"],[":@@horizontal_align_left:Left"])))],["center",$localize(Ft||(Ft=W([":@@horizontal_align_center:Center"],[":@@horizontal_align_center:Center"])))],["right",$localize(At||(At=W([":@@horizontal_align_right:Right"],[":@@horizontal_align_right:Right"])))],["top",$localize(zt||(zt=W([":@@vertical_align_top:Top"],[":@@vertical_align_top:Top"])))],["middle",$localize(Rt||(Rt=W([":@@vertical_align_middle:Middle"],[":@@vertical_align_middle:Middle"])))],["bottom",$localize(Ut||(Ut=W([":@@vertical_align_bottom:Bottom"],[":@@vertical_align_bottom:Bottom"])))]])}return Object.defineProperty(e.prototype,"currentModel",{get:function(){return this.model.align||this.model.verticalAlign},set:function(e){this.model.align?this.model.align=e:this.model.verticalAlign=e,this.emailObject.markForCheck()},enumerable:!1,configurable:!0}),e.prototype.getLabel=function(e){return this.labels.get(e)},e.prototype.getPositions=function(){return"vertical"===this.mode?["top","middle","bottom"]:["left","center","right"]},e}();Ht.decorators=[{type:t.Component,args:[{selector:"pb-align",template:'\n    <mat-form-field appearance="outline">\n      <mat-label [ngSwitch]="mode">\n        <ng-container *ngSwitchCase="\'vertical\'" i18n="Align Settings|Vertical Align">Vertical Align</ng-container>\n        <ng-container *ngSwitchDefault i18n="Align Settings|Align">Align</ng-container>\n      </mat-label>\n      <mat-select [(ngModel)]="currentModel" disableRipple [disabled]="disabled">\n        <mat-option *ngFor="let position of getPositions()" [value]="position">\n          {{ getLabel(position) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Ht.ctorParameters=function(){return[{type:ze}]},Ht.propDecorators={model:[{type:t.Input}],mode:[{type:t.Input}],disabled:[{type:t.Input}]};var Nt,Gt,Wt=function(){function e(e){this.emailObject=e,this.dirLabels=new Map([["ltr",$localize(Nt||(Nt=W([":@@direction_ltr:Left to right"],[":@@direction_ltr:Left to right"])))],["rtl",$localize(Gt||(Gt=W([":@@direction_rtl:Right to left"],[":@@direction_rtl:Right to left"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getDirections=function(){return["ltr","rtl"]},e.prototype.getDirectionLabel=function(e){return this.dirLabels.get(e)},e}();Wt.decorators=[{type:t.Component,args:[{selector:"pb-direction",template:'\n    <mat-form-field appearance="outline">\n      <mat-label i18n="settings|Direction">Direction</mat-label>\n      <mat-select\n        i18n-placeholder="settings|Direction"\n        placeholder="Direction"\n        [(value)]="model.direction"\n        (selectionChange)="markForCheck()"\n        disableRipple\n      >\n        <mat-option *ngFor="let dir of getDirections()" [value]="dir">\n          {{ getDirectionLabel(dir) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Wt.ctorParameters=function(){return[{type:ze}]},Wt.propDecorators={model:[{type:t.Input}]};var Vt,Jt,Yt,Kt,Qt,Xt,Zt=function(){function e(){this.disabled=!1,this.repeatLabels=new Map([["no-repeat",$localize(Vt||(Vt=W([":@@no_repeat:No"],[":@@no_repeat:No"])))],["repeat",$localize(Jt||(Jt=W([":@@repeat:Repeat"],[":@@repeat:Repeat"])))],["repeat-x",$localize(Yt||(Yt=W([":@@repeat_x:X"],[":@@repeat_x:X"])))],["repeat-y",$localize(Kt||(Kt=W([":@@repeat_y:Y"],[":@@repeat_y:Y"])))],["round",$localize(Qt||(Qt=W([":@@repeat_round:Round"],[":@@repeat_round:Round"])))],["space",$localize(Xt||(Xt=W([":@@repeat_space:Space"],[":@@repeat_space:Space"])))]])}return e.prototype.getRepeats=function(){return["no-repeat","repeat","repeat-x","repeat-y"]},e.prototype.getRepeatLabel=function(e){return this.repeatLabels.get(e)},e}();Zt.decorators=[{type:t.Component,args:[{selector:"pb-back-repeat",template:'\n    <mat-form-field appearance="outline">\n      <mat-label i18n="settings|Background Repeat">Repeat</mat-label>\n      <mat-select [(value)]="model.repeat" [disabled]="disabled" disableRipple>\n        <mat-option *ngFor="let repeat of getRepeats()" [value]="repeat">\n          {{ getRepeatLabel(repeat) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Zt.propDecorators={model:[{type:t.Input}],disabled:[{type:t.Input}]};var en=new Map([["desktop","1 1 100%"],["smartphone","1 1 360px"],["tablet","1 1 768px"]]),tn=function(){function e(e,t){this.middlewares=e,this.sanitizer=t,this.device="desktop"}return e.prototype.changeDevice=function(e){var t=this;return this.middlewares.togglePreviewDevice(e).pipe(o.take(1)).subscribe((function(e){t.device=e}))},e.prototype.getFlexWidth=function(){return en.get(this.device)},e.prototype.ngOnInit=function(){this.src=URL.createObjectURL(new Blob([this.template],{type:"text/html"})),this.templateSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src)},e.prototype.ngOnDestroy=function(){this.src&&URL.revokeObjectURL(this.src)},e}();tn.decorators=[{type:t.Component,args:[{selector:"pb-preview-template",template:'\n    <iframe [src]="templateSrc" [fxFlex]="getFlexWidth()"></iframe>\n    <mat-button-toggle-group value="desktop" (change)="changeDevice($event)" vertical>\n      <mat-button-toggle value="desktop" matTooltip="Desktop / 100%" matTooltipPosition="left">\n        <mat-icon>desktop_windows</mat-icon>\n      </mat-button-toggle>\n      <mat-button-toggle value="tablet" matTooltip="Tablet / 768px" matTooltipPosition="left">\n        <mat-icon>tablet</mat-icon>\n      </mat-button-toggle>\n      <mat-button-toggle value="smartphone" matTooltip="Smartphone / 360px" matTooltipPosition="left">\n        <mat-icon>smartphone</mat-icon>\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      iframe {\n        border: 0;\n        will-change: width;\n        transition: all 500ms ease-in-out;\n      }\n\n      /* iframe a[href] {\n        pointer-events: none;\n      } */\n\n      /* iframe.active {\n        opacity: 1;\n      } */\n\n      mat-button-toggle-group {\n        position: absolute;\n        right: 0;\n        background: white;\n      }\n    "]}]}],tn.ctorParameters=function(){return[{type:Ee},{type:c.DomSanitizer}]},tn.propDecorators={template:[{type:t.Input}]};var nn=function(){function e(e,t,o,r){this.pbMiddlewaresService=e,this.userInterfaceService=t,this.emailObjectStore=o,this.chRef=r,this.isActive=!1,this.componentIsDestroyed$=new n.Subject}return e.prototype.onHostClick=function(e){e.stopImmediatePropagation(),this.editBlock()},Object.defineProperty(e.prototype,"isBlockActive",{get:function(){return this.isActive},enumerable:!1,configurable:!0}),e.prototype.removeBlock=function(){var e=this;this.pbMiddlewaresService.removeBlock(this.index,this.column,this.block).pipe(o.exhaustMap((function(){return e.userInterfaceService.confirmDialog$()})),o.filter((function(e){return e})),o.take(1)).subscribe((function(){e.emailObjectStore.removeBlock(e.index,e.column)}))},e.prototype.duplicateBlock=function(){var e=this;this.pbMiddlewaresService.duplicateBlock(this.index,this.column,this.block).pipe(o.map((function(t){return e.emailObjectStore.duplicateBlock(t.index,t.column,t.block)})),o.take(1)).subscribe((function(){}))},e.prototype.editBlock=function(){var e=this;this.pbMiddlewaresService.editBlock(this.block).pipe(o.take(1)).subscribe((function(t){e.userInterfaceService.editBlock(t)}))},e.prototype.ngOnInit=function(){var e=this;this.userInterfaceService.currentEditingBlock$.pipe(o.map((function(t){return t===e.block})),o.takeUntil(this.componentIsDestroyed$)).subscribe((function(t){e.isActive=t}))},e.prototype.ngDoCheck=function(){this.isActive&&this.chRef.markForCheck()},e.prototype.ngOnDestroy=function(){this.componentIsDestroyed$.next(""),this.componentIsDestroyed$.complete()},e}();nn.decorators=[{type:t.Component,args:[{selector:"pb-block",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-content select=".move"></ng-content>\n<div class="tools" fxLayout fxLayoutGap="0.25rem">\n  <button mat-icon-button (click)="duplicateBlock()" i18n-matTooltip="block|Duplicate Block"\n    matTooltip="Duplicate Block">\n    <mat-icon i18n-aria-label="block|Duplicate Block" aria-label="Duplicate block" inline>file_copy</mat-icon>\n  </button>\n  <button mat-icon-button (click)="removeBlock()" i18n-matTooltip="block|Remove Block" class="delete"\n    matTooltip="Remove Block">\n    <mat-icon i18n-aria-label="block|Remove Block" aria-label="Delete block" inline>delete_forever</mat-icon>\n  </button>\n</div>\n<ng-content *pbDynamicComponent="block"></ng-content>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;position:relative}:host.active:not(.cdk-drag-preview)>.tools{opacity:1;display:flex!important}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview{z-index:3;box-shadow:0 0 0 2px #3f51b5}:host:hover:not(.active){box-shadow:0 0 0 2px rgba(63,81,181,.5)}:host>.tools{direction:ltr;opacity:0;z-index:4;position:absolute;max-width:100%;bottom:-25px;right:0;display:none!important;transition:all .5s ease-in-out}:host>.tools>button{background:#3f51b5;border-radius:3px;color:#fff;line-height:0;width:25px;height:25px}:host>.tools>button mat-icon{font-size:14px;margin-top:-3px}:host>.tools ::ng-deep+*>*{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]}]}],nn.ctorParameters=function(){return[{type:Ee},{type:Ne},{type:ze},{type:t.ChangeDetectorRef}]},nn.propDecorators={block:[{type:t.Input}],column:[{type:t.Input}],index:[{type:t.Input}],onHostClick:[{type:t.HostListener,args:["click",["$event"]]}],isBlockActive:[{type:t.HostBinding,args:["class.active"]}]};var on=function(){function e(e,t){this.imageUpload=e,this.emailObject=t,this.key="src",this.browsing=new n.Subject}return Object.defineProperty(e.prototype,"source",{get:function(){return this.block[this.key]},set:function(e){this.block[this.key]=e},enumerable:!1,configurable:!0}),e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.browse=function(){return R(this,void 0,void 0,(function(){var e;return U(this,(function(t){switch(t.label){case 0:this.browsing.next(!0),t.label=1;case 1:return t.trys.push([1,,3,4]),[4,this.imageUpload.browse$().toPromise()];case 2:return(e=t.sent())&&(this.source=e,this.emailObject.markForCheck()),[3,4];case 3:return this.browsing.next(!1),[7];case 4:return[2]}}))}))},e.prototype.ngOnInit=function(){this.source=this.block.src||this.block.url},e}();on.decorators=[{type:t.Component,args:[{selector:"pb-image-upload",template:'\n    <div fxLayout fxLayoutAlign="space-between center">\n      <div class="image-info" [fxFlex]="source ? \'30%\' : \'60%\'" fxLayout fxLayoutGap="0.5em" fxLayoutAlign="center center">\n        <div *ngIf="source" class="chose-image">\n          <img [src]="source" alt="image source" />\n        </div>\n        <span *ngIf="!source" style="width: 100%;" i18n="Upload Image Settings|Upload an image"> Upload an image </span>\n      </div>\n      <button\n        type="button"\n        (click)="browse()"\n        [disabled]="browsing | async"\n        color="primary"\n        mat-stroked-button\n        i18n="Upload Image Settings|Browse"\n      >\n        Browse\n      </button>\n    </div>\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="Upload Image Settings|Image Source">Image Source</mat-label>\n      <input matInput [(ngModel)]="source" type="url" (input)="markForCheck()" />\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n      }\n\n      .chose-image {\n        width: 100%;\n        max-height: 60px;\n        overflow: hidden;\n        border-radius: 3px;\n        line-height: 0;\n      }\n\n      .chose-image img {\n        width: 100%;\n        height: 60px;\n        object-fit: cover;\n        object-position: center;\n      }\n\n      .size {\n        font-size: 80%;\n        color: #ccc;\n      }\n\n      mat-form-field {\n        margin-top: 0.5rem;\n      }\n    "]}]}],on.ctorParameters=function(){return[{type:Ve},{type:ze}]},on.propDecorators={block:[{type:t.Input}],key:[{type:t.Input}]};var rn=function(){function e(e,t,n){this.internalService=e,this.emailObject=t,this.networks=n,this.block$=this.internalService.currentEditingBlock$}return e.prototype.hasProperty=function(e,t){return e.hasOwnProperty(t)},e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.socialNetworks=function(e){return this.networks.filter((function(t){return!e.networks.find((function(e){return e.name===t}))})).sort()},e.prototype.addSocialNetwork=function(e,t){var n=e.value,o=e.source;t.networks.push({name:n,href:"",label:""}),o.value="",this.markForCheck()},e.prototype.removeSocialNetwork=function(e,t){t.networks=t.networks.filter((function(t){return t!==e})),this.markForCheck()},e.prototype.getSocialIcon=function(e){return oe(e+".png")},e}();rn.decorators=[{type:t.Component,args:[{selector:"pb-block-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="block$ | async as currentBlock">\n  <mat-accordion>\n    <mat-expansion-panel expanded *ngIf="hasProperty(currentBlock.options, \'font\')">\n      <mat-expansion-panel-header i18n="settings|Font">\n        Font\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="currentBlock.options" key="color"></pb-color>\n        <pb-font-styles [font]="currentBlock.options.font"></pb-font-styles>\n        <pb-line-height *ngIf="currentBlock.type !== \'social\'" [lineHeight]="currentBlock.options.lineHeight">\n        </pb-line-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf="currentBlock.type === \'image\'">\n      <mat-expansion-panel expanded>\n        <mat-expansion-panel-header i18n="settings|Image">\n          Image\n        </mat-expansion-panel-header>\n        <pb-image-upload [block]="currentBlock"></pb-image-upload>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Image Attributes">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group f-large">\n            <mat-form-field appearance="outline">\n              <mat-label i18n="settings|Image Alt">Alt</mat-label>\n              <input matInput [(ngModel)]="currentBlock.options.title" type="text" i18n-placeholder\n                placeholder="settings|Image Alt" (input)="markForCheck()" />\n            </mat-form-field>\n            <pb-align [model]="currentBlock.options"></pb-align>\n          </div>\n          <pb-link [link]="currentBlock.options.link"></pb-link>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <ng-container *ngIf="currentBlock.type === \'button\'">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Button Text">\n          Button Text\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance="outline" style="width: 100%">\n            <mat-label i18n="settings|Button Text">Button Text</mat-label>\n            <input matInput [(ngModel)]="currentBlock.innerText" type="text" i18n-placeholder\n              placeholder="settings|Button Text" (input)="markForCheck()" />\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Background">\n          Background\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <pb-color [options]="currentBlock.options"></pb-color>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Button Attributes">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group two" style="padding-bottom: 0">\n            <pb-align [model]="currentBlock.options" [disabled]="currentBlock.options.fullWidth"></pb-align>\n            <mat-slide-toggle style="margin-top: -24px" [(ngModel)]="currentBlock.options.fullWidth"\n              (change)="markForCheck()">\n              <ng-container i18n="settings|Button Full Width">Full Width</ng-container>\n            </mat-slide-toggle>\n          </div>\n          <pb-link [link]="currentBlock.options.link"></pb-link>\n          <pb-padding [padding]="currentBlock.options.innerPadding"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel [expanded]="currentBlock.type === \'spacer\'"\n      *ngIf="hasProperty(currentBlock.options, \'width\') || hasProperty(currentBlock.options, \'height\')">\n      <mat-expansion-panel-header i18n="settings|Sizes">\n        Sizes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height *ngIf="hasProperty(currentBlock.options, \'width\')" [model]="currentBlock.options.width"\n          label="width"></pb-width-height>\n        <pb-width-height *ngIf="hasProperty(currentBlock.options, \'height\')" [model]="currentBlock.options.height"\n          label="height"></pb-width-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel *ngIf="hasProperty(currentBlock.options, \'background\')">\n      <mat-expansion-panel-header i18n="settings|Background">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="currentBlock.options.background"></pb-color>\n      </ng-template>\n      backgroundColor\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]="currentBlock.type === \'divider\'"\n      *ngIf="hasProperty(currentBlock.options, \'border\')">\n      <mat-expansion-panel-header>\n        <ng-container i18n="settings|Divider Styles" *ngIf="currentBlock.type === \'divider\'">Styles</ng-container>\n        <ng-container i18n="settings|Border" *ngIf="currentBlock.type !== \'divider\'">Border</ng-container>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-border [border]="currentBlock.options.border"></pb-border>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf="currentBlock.type === \'social\'">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Icons">\n          Icons\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance="outline" style="width: 100%">\n            <mat-label i18n="settings|Add new Network">Add new Network</mat-label>\n            <mat-select (selectionChange)="addSocialNetwork($event, currentBlock)" [disabled]="!socialNetworks.length">\n              <mat-option style="text-transform: capitalize" *ngFor="let link of socialNetworks(currentBlock)"\n                [value]="link">\n                {{ link }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel class="networks-list" *ngFor="let network of currentBlock.networks">\n        <mat-expansion-panel-header style="text-transform: capitalize">\n          <img [class]="network.name" [src]="getSocialIcon(network.name)" [alt]="network.name" />\n          {{ network.name }}\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="networks-list-item">\n            <div class="item-info">\n              <mat-form-field matLine appearance="outline">\n                <mat-label i18n="settings|Social Network Label">Label</mat-label>\n                <input matInput autocomplete="off" [(ngModel)]="network.label"\n                  i18n-placeholder="settings|Social Network Label" placeholder="Label" type="text"\n                  (input)="markForCheck()" />\n              </mat-form-field>\n              <button mat-stroked-button color="warn" (click)="removeSocialNetwork(network, currentBlock)">\n                <mat-icon>delete_forever</mat-icon>\n              </button>\n            </div>\n            <mat-form-field matLine appearance="outline">\n              <mat-label style="text-transform: capitalize">\n                {{ network.name }} <ng-container i18n="settings|Social Network Link">Link</ng-container>\n              </mat-label>\n              <input autocomplete="off" matInput [(ngModel)]="network.href" type="url" (input)="markForCheck()" />\n            </mat-form-field>\n          </div>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Social Styles">\n          Styles\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group two" style="padding-bottom: 0">\n            <mat-form-field appearance="outline">\n              <mat-label i18n="settings|Social Model">Mode</mat-label>\n              <mat-select (selectionChange)="markForCheck()" i18n-placeholder="settings|Social Model" placeholder="Mode"\n                [(value)]="currentBlock.options.mode" disableRipple>\n                <mat-option *ngFor="let mode of [\'horizontal\', \'vertical\']" [value]="mode">\n                  {{ mode }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <pb-align [model]="currentBlock.options"></pb-align>\n          </div>\n          <pb-line-height [units]="[\'px\']" [lineHeight]="currentBlock.options.iconSize" label="Icon Size">\n          </pb-line-height>\n          <pb-padding [padding]="currentBlock.options.innerPadding"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel *ngIf="hasProperty(currentBlock.options, \'padding\')">\n      <mat-expansion-panel-header i18n="settings|Padding">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]="currentBlock.options.padding"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px}.networks-list mat-expansion-panel-header img.facebook{background-color:#3a5898}.networks-list mat-expansion-panel-header img.twitter{background-color:#d95988}.networks-list mat-expansion-panel-header img.github{background-color:#000}.networks-list mat-expansion-panel-header img.instagram{background-color:#3f729b}.networks-list mat-expansion-panel-header img.web{background-color:#4bade9}.networks-list mat-expansion-panel-header img.snapchat{background-color:#fffa54}.networks-list mat-expansion-panel-header img.youtube{background-color:#ea3323}.networks-list mat-expansion-panel-header img.vimeo{background-color:#53b4e7}.networks-list mat-expansion-panel-header img.medium{background-color:#000}.networks-list mat-expansion-panel-header img.soundcloud{background-color:#ef7f31}.networks-list mat-expansion-panel-header img.dribbble{background-color:#d95988}.networks-list mat-expansion-panel-header img.pinterest{background-color:#bd071c}.networks-list mat-expansion-panel-header img.linkedin{background-color:#0077b5}.networks-list mat-expansion-panel-header img.tumblr{background-color:#334356}.networks-list mat-expansion-panel-header img.xing{background-color:#296365}.networks-list mat-expansion-panel-header img.tiktok{background-color:#000}.networks-list-item{width:100%;display:grid;row-gap:.5rem}.networks-list-item .item-info{display:grid;grid-template-columns:2fr 1fr;-moz-column-gap:.5rem;column-gap:.5rem}.networks-list-item .item-info button{align-self:baseline;margin:.25rem 0;height:50px}.networks-list-item .item-info ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}"]}]}],rn.ctorParameters=function(){return[{type:Ne},{type:ze},{type:Array,decorators:[{type:t.Inject,args:[qe]}]}]};var ln=function(){function e(e,t){this.pbInternalService=e,this.emailObject=t,this.currentStructure$=this.pbInternalService.currentEditingStructure$}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();ln.decorators=[{type:t.Component,args:[{selector:"pb-structure-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-accordion *ngIf="currentStructure$ | async as structure">\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure Background">\n      Background\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-color [options]="structure.options.background" key="color"></pb-color>\n      <pb-image-upload [block]="structure.options.background" key="url" style="margin-bottom: 1em"></pb-image-upload>\n      <pb-back-repeat [disabled]="!structure.options.background.url"\n                      [model]="structure.options.background"></pb-back-repeat>\n      <pb-width-height [disabled]="!structure.options.background.url" [model]="structure.options.background.size"\n                       label="size">\n      </pb-width-height>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure border">\n      Border\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-border [border]="structure.options.border"></pb-border>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure padding">\n      Padding\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-padding [padding]="structure.options.padding"></pb-padding>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure margin">\n      Margin\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-margin [margin]="structure.options.margin"></pb-margin>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure layout">\n      Layout\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-gaps [gaps]="structure.options.gaps"></pb-gaps>\n      <mat-slide-toggle [disabled]="structure.type === \'cols_1\'" style="margin-top: -24px;"\n                        [(ngModel)]="structure.options.disableResponsive" i18n="Structure settings|Disable Responsive"\n                        (change)="markForCheck()">\n        Disable Responsive\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]="structure.options.fullWidth" i18n="Structure settings|Full Width"\n        (change)="markForCheck()">\n        Make section full width\n      </mat-slide-toggle>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel *ngFor="let column of structure.options.columns; let key = index">\n    <mat-expansion-panel-header>\n      <ng-container i18n="Structure settings|Structure Column">Column</ng-container>\n      {{ key + 1 }}\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Background">Column Background</span>\n      </h3>\n      <pb-color [options]="column.background" [showTransparent]="true" key="color"></pb-color>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Border">Column Border</span>\n      </h3>\n      <pb-border [border]="column.border"></pb-border>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Vertical Align">Vertical Align</span>\n      </h3>\n      <pb-align [model]="column" mode="vertical"></pb-align>\n    </ng-template>\n  </mat-expansion-panel>\n</mat-accordion>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[":host{display:block}"]}]}],ln.ctorParameters=function(){return[{type:Ne},{type:ze}]};var an=function(e){this.pbEmailObject=e,this.generalOptions$=this.pbEmailObject.generalEmailOptionsAsObservable$};an.decorators=[{type:t.Component,args:[{selector:"pb-general-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="generalOptions$ | async as general">\n  <div class="mat-expansion-panel-body" style="margin: 24px 0">\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="General Settings|Email Name">Email Name</mat-label>\n      <input matInput [(ngModel)]="general.name">\n    </mat-form-field>\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="General Settings|Email Preview Text">Preview Text</mat-label>\n      <textarea matInput [(ngModel)]="general.previewText"></textarea>\n      <mat-hint i18n="General Settings|Email Preview Text Hint">\n        This text is displayed in the inbox of the recipient.\n      </mat-hint>\n    </mat-form-field>\n  </div>\n\n  <mat-accordion>\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Background">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="general.background" key="color"></pb-color>\n        \x3c!-- <pb-image-upload [block]="structure.options.background" key="url" style="margin-bottom: 1em"></pb-image-upload>\n        <pb-back-repeat [disabled]="!structure.options.background.url" [model]="structure.options.background">\n        </pb-back-repeat>\n        <pb-width-height [model]="structure.options.background.size" label="Background Size"></pb-width-height> --\x3e\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Attributes">\n        Attributes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height [model]="general.width" label="width"></pb-width-height>\n        <pb-direction [model]="general"></pb-direction>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Padding">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]="general.padding"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[""]}]}],an.ctorParameters=function(){return[{type:ze}]};var sn=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();sn.decorators=[{type:t.Component,args:[{selector:"pb-margin",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Margin settings|Margin Top">Margin Top</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.top" (input)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Margin settings|Margin Bottom">Margin Bottom</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.bottom" (input)="markForCheck()" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],sn.ctorParameters=function(){return[{type:ze}]},sn.propDecorators={margin:[{type:t.Input}]};var cn=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();cn.decorators=[{type:t.Component,args:[{selector:"pb-gaps",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Gaps settings|Vertical Gaps">Vertical Gaps</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[0]" (input)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Gaps settings|Horizontal Gaps">Horizontal Gaps</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[1]" (input)="markForCheck()" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],cn.ctorParameters=function(){return[{type:ze}]},cn.propDecorators={gaps:[{type:t.Input}]};var pn="This feature is disabled in free version.",un=function(e){function t(){var t=e.call(this)||this;return console.warn("You use the Regular License of Angular Email Builder, some limitations are applied. More info on https://wlocalhost.org"),t}return z(t,e),t.prototype.chooseTemplate=function(){throw new Error(pn)},t.prototype.exportFile=function(e){return n.iif((function(){return"json"===e}),re(e),n.throwError(new Error(pn)))},t.prototype.importFile=function(e){return n.iif((function(){return"application/json"===e.type}),re(e),n.throwError(new Error(pn)))},t}(Ee),dn=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t}(Ee),mn=function(){function e(e,t){this.userConfig=e,this.userInterface=t}return e.prototype.intercept=function(e,t){if(e.url.startsWith("https://ngb-api.wlocalhost.org")){var n=this.userInterface.notify("Loading, please wait ...",null,null),r=Object.assign(Object.assign({},De),this.userConfig).xApiKey;return t.handle(e.clone({setHeaders:{"Content-Type":"application/json","X-Api-Key":r},responseType:"json"})).pipe(o.tap((function(e){e.type===i.HttpEventType.Response&&n.dismiss()})))}return t.handle(e)},e}();mn.ɵprov=F.ɵɵdefineInjectable({factory:function(){return new mn(F.ɵɵinject(Me),F.ɵɵinject(Ne))},token:mn,providedIn:"root"}),mn.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],mn.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:Ne}]};var bn=new t.InjectionToken("Library environment",{providedIn:"any",factory:function(){var e=t.inject(Me).xApiKey;return!(!e||e.length<40||e===De.xApiKey)}}),gn=function(e){function t(t){return e.call(this,t)||this}return z(t,e),t}(Fe),hn=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t}(Ae);function fn(e){return new gn(e)}function yn(e){return e?new dn:new un}function kn(e){return new hn(e)}function vn(e,t,n,o,r){return e?new Ke(n,o,r):new Je(t,o)}var qn={bounds:"pb-builder-container",theme:"bubble",format:"html",trackChanges:"all",suppressGlobalRegisterWarning:!0},xn=function(){function e(e,t,n){if(!(n||e instanceof un))throw new Error("Upgrade to an Extended or Commercial License to use Custom Middlewares.");if(!(n||t instanceof Je))throw new Error("Upgrade to an Extended or Commercial License to use Custom Image Uploader.")}return e.forRoot=function(t){return void 0===t&&(t={}),e.withConfig(t)},e.withConfig=function(t){return void 0===t&&(t={}),{ngModule:e,providers:[Ge,ze,Ne,{provide:Me,useValue:t},{provide:Ee,useFactory:yn,deps:[bn]},{provide:Ae,useFactory:kn,deps:[Le]},{provide:Ve,useFactory:vn,deps:[bn,s.MatBottomSheet,a.MatDialog,Ee,Fe]},{provide:Fe,useFactory:fn,deps:[i.HttpClient]}]}},e}();xn.decorators=[{type:t.NgModule,args:[{imports:[D.CommonModule,i.HttpClientModule,L.QuillModule,p.FlexLayoutModule,r.DragDropModule,O.FormsModule,B.ColorChromeModule,u.MatButtonModule,h.MatIconModule,g.MatFormFieldModule,f.MatInputModule,C.MatTabsModule,S.MatSliderModule,q.MatSelectModule,w.MatSlideToggleModule,d.MatButtonToggleModule,m.MatDividerModule,P.MatTooltipModule,a.MatDialogModule,l.MatSnackBarModule,v.MatProgressBarModule,k.MatMenuModule,x.MatSidenavModule,I.MatToolbarModule,y.MatListModule,s.MatBottomSheetModule,m.MatDividerModule,b.MatExpansionModule,T.ResizableModule,M.ScrollingModule,_.PortalModule],declarations:[Ze,Qe,nn,st,tn,tt,nt,ot,rt,it,lt,ct,mt,bt,sn,cn,kt,St,Dt,Mt,Et,Ht,Wt,Zt,Ue,on,rn,ln,an,We,Ye,Re,Xe,He],exports:[Ze,tn,Xe],entryComponents:[tt,nt,ot,rt,it,lt,Ue,We,Ye,Re,He],providers:[{provide:L.QUILL_CONFIG_TOKEN,useValue:qn},{provide:i.HTTP_INTERCEPTORS,useClass:mn,multi:!0},Ge,ze,Ne]}]}],xn.ctorParameters=function(){return[{type:Ee},{type:Ve},{type:Boolean,decorators:[{type:t.Inject,args:[bn]}]}]},e.AIPBlock=me,e.ButtonBlock=he,e.Defaults=Be,e.DividerBlock=fe,e.FreeUsersImageUploader=Je,e.ImageBlock=ge,e.PBEmail=_e,e.PB_BLOCKS=Oe,e.PB_CONFIG=Me,e.PB_DEFAULT_BLOCKS=Te,e.PB_DEFAULT_CONFIG=De,e.PB_DEFAULT_FALLBACK_FONTS=Se,e.PB_DEFAULT_GOOGLE_FONTS=xe,e.PB_DEFAULT_SOCIAL_NETWORKS=ve,e.PB_DEFAULT_STRUCTURES=Ie,e.PB_FALLBACK_FONTS=Ce,e.PB_GOOGLE_FONTS=we,e.PB_SOCIAL_NETWORKS=qe,e.PB_STORAGE_FACTORY=je,e.PB_STRUCTURES=Pe,e.PB_TEMPLATES_TEMPORARY_STORAGE=Le,e.PbEmailBuilderComponent=Ze,e.PbEmailBuilderModule=xn,e.PbEmailBuilderService=Ge,e.PbStorageService=Ae,e.PbUserImageUploaderService=Ve,e.PbUserMiddlewaresService=Ee,e.PbUserRestApiService=Fe,e.PreviewTemplateComponent=tn,e.SlugifyPipe=Xe,e.SocialBlock=ke,e.SpacerBlock=ye,e.Structure=de,e.TextBlock=be,e.bytesToSize=ne,e.cloneDeep=V,e.createBackground=function(e){var t=e.url,n=void 0===t?"":t,o=e.color,r=void 0===o?"white":o,i=e.repeat;return r+" "+(n&&"url("+n+")")+" "+(void 0===i?"no-repeat":i)+" top center"},e.createBorder=K,e.createCustomRestApiService=fn,e.createFont=Z,e.createLineHeight=ee,e.createMargin=X,e.createPadding=Q,e.createUserMiddlewareService=yn,e.createUserUploaderService=vn,e.createUsersIpStorage=kn,e.createWidthHeight=te,e.defaultColumnsOptions=ue,e.defaultsDeep=Y,e.deferOf=re,e.getAssetByPath=oe,e.isEqual=J,e["ɵ0"]=qn,e["ɵa"]=ze,e["ɵb"]=Ne,e["ɵba"]=Zt,e["ɵbb"]=Ue,e["ɵbc"]=on,e["ɵbd"]=rn,e["ɵbe"]=ln,e["ɵbf"]=an,e["ɵbg"]=We,e["ɵbh"]=Ye,e["ɵbi"]=Re,e["ɵbj"]=He,e["ɵbk"]=mn,e["ɵbl"]=bn,e["ɵc"]=gn,e["ɵd"]=hn,e["ɵe"]=Qe,e["ɵf"]=nn,e["ɵg"]=st,e["ɵh"]=tt,e["ɵi"]=et,e["ɵj"]=nt,e["ɵk"]=ot,e["ɵl"]=rt,e["ɵm"]=it,e["ɵn"]=lt,e["ɵo"]=ct,e["ɵp"]=mt,e["ɵq"]=bt,e["ɵr"]=sn,e["ɵs"]=cn,e["ɵt"]=kt,e["ɵu"]=St,e["ɵv"]=Dt,e["ɵw"]=Mt,e["ɵx"]=Et,e["ɵy"]=Ht,e["ɵz"]=Wt,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/drag-drop"),require("@angular/common/http"),require("@angular/material/snack-bar"),require("@angular/material/dialog"),require("@angular/material/bottom-sheet"),require("@angular/platform-browser"),require("@angular/flex-layout"),require("@angular/material/button"),require("@angular/material/button-toggle"),require("@angular/material/divider"),require("@angular/material/expansion"),require("@angular/material/form-field"),require("@angular/material/icon"),require("@angular/material/input"),require("@angular/material/list"),require("@angular/material/menu"),require("@angular/material/progress-bar"),require("@angular/material/select"),require("@angular/material/sidenav"),require("@angular/material/slide-toggle"),require("@angular/material/slider"),require("@angular/material/tabs"),require("@angular/material/toolbar"),require("@angular/material/tooltip"),require("angular-resizable-element"),require("@angular/forms"),require("@angular/common"),require("@angular/cdk/scrolling"),require("quill"),require("ngx-quill"),require("ngx-color/chrome"),require("@angular/cdk/portal"),require("@angular/localize/init")):"function"==typeof define&&define.amd?define("@pobuca/email-builder",["exports","@angular/core","rxjs","rxjs/operators","@angular/cdk/drag-drop","@angular/common/http","@angular/material/snack-bar","@angular/material/dialog","@angular/material/bottom-sheet","@angular/platform-browser","@angular/flex-layout","@angular/material/button","@angular/material/button-toggle","@angular/material/divider","@angular/material/expansion","@angular/material/form-field","@angular/material/icon","@angular/material/input","@angular/material/list","@angular/material/menu","@angular/material/progress-bar","@angular/material/select","@angular/material/sidenav","@angular/material/slide-toggle","@angular/material/slider","@angular/material/tabs","@angular/material/toolbar","@angular/material/tooltip","angular-resizable-element","@angular/forms","@angular/common","@angular/cdk/scrolling","quill","ngx-quill","ngx-color/chrome","@angular/cdk/portal","@angular/localize/init"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).pobuca=e.pobuca||{},e.pobuca["email-builder"]={}),e.ng.core,e.rxjs,e.rxjs.operators,e.ng.cdk.dragDrop,e.ng.common.http,e.ng.material.snackBar,e.ng.material.dialog,e.ng.material.bottomSheet,e.ng.platformBrowser,e.ng.flexLayout,e.ng.material.button,e.ng.material.buttonToggle,e.ng.material.divider,e.ng.material.expansion,e.ng.material.formField,e.ng.material.icon,e.ng.material.input,e.ng.material.list,e.ng.material.menu,e.ng.material.progressBar,e.ng.material.select,e.ng.material.sidenav,e.ng.material.slideToggle,e.ng.material.slider,e.ng.material.tabs,e.ng.material.toolbar,e.ng.material.tooltip,e.angularResizableElement,e.ng.forms,e.ng.common,e.ng.cdk.scrolling,null,e.ng.quill,e.ng.color.chrome,e.ng.cdk.portal)}(this,(function(e,t,n,o,r,i,l,a,s,c,p,u,d,m,b,g,h,f,y,k,v,q,x,w,S,C,I,P,T,O,D,M,j,L,B,_){"use strict";function E(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var $,F=E(t);e.ETemplatesStorage=void 0,($=e.ETemplatesStorage||(e.ETemplatesStorage={})).LATEST_USED="NGB_LATEST_USED_TEMPLATES",$.STORAGE="NGB_TEMP_TEMPLATES_STORAGE";var A=function(e,t){return(A=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function z(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}A(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function R(e,t,n,o){return new(n||(n=Promise))((function(r,i){function l(e){try{s(o.next(e))}catch(e){i(e)}}function a(e){try{s(o.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,a)}s((o=o.apply(e,t||[])).next())}))}function U(e,t){var n,o,r,i,l={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return i={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function a(a){return function(s){return function(a){if(n)throw new TypeError("Generator is already executing.");for(;i&&(i=0,a[0]&&(l=0)),l;)try{if(n=1,o&&(r=2&a[0]?o.return:a[0]?o.throw||((r=o.return)&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;switch(o=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return l.label++,{value:a[1],done:!1};case 5:l.label++,o=a[1],a=[0];continue;case 7:a=l.ops.pop(),l.trys.pop();continue;default:if(!(r=l.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){l=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){l.label=a[1];break}if(6===a[0]&&l.label<r[1]){l.label=r[1],r=a;break}if(r&&l.label<r[2]){l.label=r[2],l.ops.push(a);break}r[2]&&l.ops.pop(),l.trys.pop();continue}a=t.call(e,l)}catch(e){a=[6,e],o=0}finally{n=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,s])}}}Object.create;function H(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],o=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function N(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)l.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return l}function G(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(N(arguments[t]));return e}function W(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}Object.create;"function"==typeof SuppressedError&&SuppressedError;function V(e){return void 0===e&&(e={}),JSON.parse(JSON.stringify(e))}function J(e,t){return JSON.stringify(e)===JSON.stringify(t)}function Y(e){var t,n;void 0===e&&(e={});for(var o=[],r=1;r<arguments.length;r++)o[r-1]=arguments[r];try{for(var i=H(o),l=i.next();!l.done;l=i.next()){var a=l.value;for(var s in a)e.hasOwnProperty(s)||(Array.isArray(a[s])||"object"!=typeof a[s]?e[s]=a[s]:e[s]=Y(e[s],a[s]))}}catch(e){t={error:e}}finally{try{l&&!l.done&&(n=i.return)&&n.call(i)}finally{if(t)throw t.error}}return e}function K(e,t){var n;void 0===t&&(t="border");var o=e.color,r=void 0===o?"#000000":o,i=e.style,l=void 0===i?"solid":i,a=e.width,s=void 0===a?4:a,c=e.radius,p=void 0===c?0:c;return(n={})[t]=s+"px "+l+" "+r,n.borderRadius=p+"px",n}function Q(e,t){var n;void 0===t&&(t="padding");var o=e.top,r=void 0===o?10:o,i=e.right,l=void 0===i?25:i,a=e.bottom,s=void 0===a?10:a,c=e.left;return(n={})[t]=r+"px "+l+"px "+s+"px "+(void 0===c?25:c)+"px",n}function X(e){var t=e.top,n=void 0===t?0:t,o=e.bottom;return{margin:n+"px 0 "+(void 0===o?0:o)+"px"}}function Z(e){var t=e.family,n=void 0===t?"":t,o=e.size,r=void 0===o?13:o,i=e.style,l=void 0===i?"normal":i,a=e.weight;return{fontFamily:n,fontSize:r+"px",fontStyle:l,fontWeight:void 0===a?"normal":a}}function ee(e){var t=e.value,n=void 0===t?22:t,o=e.unit,r=void 0===o?"px":o;return{lineHeight:"none"!==r?""+n+r:"normal"}}function te(e){var t=e.value,n=void 0===t?100:t,o=e.unit,r=void 0===o?"%":o,i=e.auto;return(void 0!==i&&i?"auto":["%","px"].indexOf(r)>-1&&""+n+r)||r}function ne(e,t){if(void 0===t&&(t=2),0===e)return"0 Bytes";var n=t<0?0:t,o=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,o)).toFixed(n))+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][o]}function oe(e){return"https://www.mailjet.com/images/theme/v1/icons/ico-social/"+e}function re(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return n.defer((function(){return n.of.apply(void 0,G(e))}))}var ie,le,ae,se,ce,pe,ue={background:{color:"transparent"},border:{width:0,color:"#cccccc",radius:0,style:"solid"},verticalAlign:"top"},de=function(e,t,n){void 0===e&&(e="cols_1"),void 0===t&&(t=[]),this.type=e,this.elements=t,this.columns=1,this.id=Date.now(),this.options={fullWidth:!1,border:{color:"#cccccc",style:"solid",width:0,radius:0},background:{color:"#ffffff",url:"",repeat:"repeat",size:{value:100,unit:"px",auto:!0,units:["px","%","cover","contain"]}},padding:{top:4,right:4,bottom:4,left:4},margin:{top:0,bottom:0},gaps:[4,4]},t.length||(["cols_2","cols_12","cols_21"].includes(e)?this.columns=2:"cols_3"===e?this.columns=3:"cols_4"===e&&(this.columns=4));var o=Array.from({length:this.columns},(function(){return ue})),r=[1];"cols_21"===e?r=[4,6]:"cols_12"===e?r=[6,4]:"cols_2"===e?r=[5,5]:"cols_3"===e?r=[3.33,3.33,3.33]:"cols_4"===e&&(r=[2.5,2.5,2.5,2.5]),this.options=Y(n,this.options,{columns:o,columnsWidth:r})},me=function(){},be=function(e,t,n){void 0===n&&(n={disabled:!1,message:""}),this.innerText=e,this.state=n,this.type="text",this.icon="text_format",this.options={color:"#000000",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",style:"normal",size:16,weight:400},lineHeight:{value:40,unit:"none"},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(ie||(ie=W([":@@text_block:Text"],[":@@text_block:Text"]))),this.options=Y(t,this.options)},ge=function(e,t,n){void 0===e&&(e="https://via.placeholder.com/600x200?text=CHANGE+ME"),void 0===n&&(n={disabled:!1,message:""}),this.src=e,this.state=n,this.type="image",this.icon="image",this.options={border:{color:"#cccccc",style:"solid",width:0,radius:0},width:{value:100,unit:"px",auto:!0,units:["px"]},height:{value:100,unit:"px",auto:!0,units:["px"]},link:{href:"",target:"_blank"},align:"center",title:"",padding:{top:0,right:0,bottom:0,left:0}},this.title=$localize(le||(le=W([":@@image_block:Image"],[":@@image_block:Image"]))),this.options=Y(t,this.options)},he=function(e,t,n){void 0===e&&(e="Click on me"),void 0===n&&(n={disabled:!1,message:""}),this.innerText=e,this.state=n,this.type="button",this.icon="radio_button_checked",this.options={backgroundColor:"#414141",border:{color:"#414141",style:"solid",width:0,radius:3},color:"#ffffff",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",size:13,style:"normal",weight:400},align:"center",fullWidth:!1,lineHeight:{value:120,unit:"%"},link:{href:"",target:"_blank"},innerPadding:{top:10,right:25,bottom:10,left:25},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(ae||(ae=W([":@@button_block:Button"],[":@@button_block:Button"]))),this.options=Y(t,this.options)},fe=function(e,t){void 0===t&&(t={disabled:!1,message:""}),this.state=t,this.type="divider",this.icon="remove",this.options={border:{color:"#000000",style:"solid",width:4},padding:{top:10,right:25,bottom:10,left:25}},this.title=$localize(se||(se=W([":@@divider_block:Divider"],[":@@divider_block:Divider"]))),this.options=Y(e,this.options)},ye=function(e,t){void 0===t&&(t={disabled:!1,message:""}),this.state=t,this.type="spacer",this.icon="vertical_align_center",this.title=$localize(ce||(ce=W([":@@spacer_block:Spacer"],[":@@spacer_block:Spacer"]))),this.options={height:{value:20,unit:"px",units:["px"]}},this.options=Y(e,this.options)},ke=function(e,t,n){void 0===e&&(e=[]),void 0===n&&(n={disabled:!1,message:""}),this.networks=e,this.state=n,this.type="social",this.icon="share",this.title=$localize(pe||(pe=W([":@@share_block:Social"],[":@@share_block:Social"]))),this.options={align:"center",mode:"horizontal",font:{fallback:"Arial, Helvetica, sans-serif",family:"Roboto",style:"normal",size:16,weight:400},iconSize:{value:30,unit:"px"},lineHeight:{value:16,unit:"px"},color:"#333333",innerPadding:{top:4,right:4,bottom:4,left:4},padding:{top:10,right:25,bottom:10,left:25}},this.options=Y(t,this.options)},ve=["github","instagram","web","snapchat","youtube","vimeo","medium","soundcloud","dribbble","facebook","twitter","pinterest","linkedin","tumblr","xing","tiktok"],qe=new t.InjectionToken("PB Social Networks",{providedIn:"any",factory:function(){return ve}}),xe=["Open+Sans:300,400,500,700","Droid+Sans:300,400,500,700","Lato:300,400,500,700","Roboto:300,400,700,900","Ubuntu:300,400,500,700","Fira+Sans:300,400,500,700","Mansalva:400"],we=new t.InjectionToken("PB Google Fonts",{providedIn:"any",factory:function(){return xe}}),Se=["Palatino Linotype, Book Antiqua, Palatino, serif","Times New Roman, Times, serif","Arial, Helvetica, sans-serif","Arial Black, Gadget, sans-serif","Comic Sans MS, cursive, sans-serif","Impact, Charcoal, sans-serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Trebuchet MS, Helvetica, sans-serif","Verdana, Geneva, sans-serif","Courier New, Courier, monospace","Lucida Console, Monaco, monospace"],Ce=new t.InjectionToken("PB Fallback Fonts",{providedIn:"any",factory:function(){return Se}}),Ie=[new de("cols_1"),new de("cols_2"),new de("cols_3"),new de("cols_4"),new de("cols_12"),new de("cols_21")],Pe=new t.InjectionToken("PB Structures",{providedIn:"any",factory:function(){return Ie}}),Te=[new be,new ge,new he,new fe,new ye,new ke],Oe=new t.InjectionToken("PB Blocks",{providedIn:"any",factory:function(){return Te}}),De=Object.freeze({xApiKey:"t7HdQfZjGp6R96fOV4P8v18ggf6LLTQZ1puUI2tz",useSaveButton:!0,usePreviewButton:!0,useDownloadButton:!0,templateListIfEmpty:!0,uploadImageName:"image"}),Me=new t.InjectionToken("PB Builder Configuration",{providedIn:"root",factory:function(){return De}}),je=new t.InjectionToken("PB Storage factory token",{providedIn:"any",factory:function(){return sessionStorage}}),Le=new t.InjectionToken("PB Token that stores temporary templates cache",{providedIn:"any",factory:function(){return sessionStorage}}),Be=function(e,t){void 0===e&&(e=[]),void 0===t&&(t={name:"",previewText:"",width:{value:600,unit:"px",units:["px"]},background:{color:"#f1f1f1",size:{value:100,unit:"%",auto:!0,units:["px","%","cover","contain"]}},padding:{top:16,right:10,bottom:10,left:10},direction:"ltr",global:{padding:{top:0,right:0,bottom:0,left:0}}}),this.structures=e,this.general=t},_e=function(e){function t(t){var n=void 0===t?{}:t,o=n.structures,r=n.general;return e.call(this,o,r)||this}return z(t,e),t}(Be),Ee=function(){function e(){}return e.prototype.createHTMLTemplate=function(e){return re(e)},e.prototype.togglePreview=function(e){return re(e)},e.prototype.togglePreviewDevice=function(e){return re(e.value)},e.prototype.chooseTemplate=function(e,t){return re({category:e,template:t})},e.prototype.uploadImage=function(e){return re(e)},e.prototype.addBlock=function(e,t){return re({event:e,column:t})},e.prototype.editBlock=function(e){return re(e)},e.prototype.removeBlock=function(e,t,n){return re({index:e,column:t})},e.prototype.duplicateBlock=function(e,t,n){return re({index:e,column:t,block:n})},e.prototype.disableBlockDragFromList=function(e){return re(!1)},e.prototype.disableBlockDragWithinEmailBody=function(e){return re(!1)},e.prototype.addStructure=function(e){return re(e)},e.prototype.editStructure=function(e){return re(e)},e.prototype.removeStructure=function(e,t){return re(e)},e.prototype.duplicateStructure=function(e,t){return re(e)},e.prototype.disableStructureDragFromList=function(e){return re(!1)},e.prototype.disableStructureDragWithinEmailBody=function(e){return re(!1)},e.prototype.preventWindowExit=function(e){return re(e)},e.prototype.exportFile=function(e){return re(e)},e.prototype.importFile=function(e){return re(e)},e.prototype.catchError=function(e){return re(e)},e}();Ee.decorators=[{type:t.Injectable}];var $e="https://ngb-api.wlocalhost.org/v1",Fe=function(){function e(e){this.http=e,this.getAllUserMergeFields$=re([]),this.getAllUserModules$=re([]),this.getAllUserTemplates$=this.http.get($e.concat("/templates")).pipe(o.map((function(e){return e.map((function(e){var t=e.category,n=e.templates;return{category:t,templates:n.map((function(e){return{thumbPath:"https://ngb-templates.s3.amazonaws.com/"+t+"-"+e+".jpg",title:e,templateData:null}}))}}))})),o.shareReplay())}return e.prototype.getUserTemplateData$=function(e,t){return t.templateData?re(t):this.http.get($e.concat("/templates"),{params:{category:e,template:t.title}}).pipe(o.map((function(e){return Object.assign(Object.assign({},t),{templateData:e})})))},e.prototype.userImageUpload$=function(e,t){return this.http.request("POST",t,{body:e,reportProgress:!0,responseType:"json",observe:"events"})},e.prototype.getUserImages$=function(){return re([])},e.prototype.createHTMLTemplate$=function(e,t){return void 0===t&&(t=$e),this.http.post(t,e)},e}();Fe.decorators=[{type:t.Injectable}],Fe.ctorParameters=function(){return[{type:i.HttpClient}]};var Ae=function(){function t(e){this.templateStorage=e}return t.prototype.getLatestUsedTemplates=function(){return JSON.parse(this.templateStorage.getItem(e.ETemplatesStorage.LATEST_USED))||[]},t.prototype.addTemplateToLatestUsed=function(t){var n=this.getLatestUsedTemplates().filter((function(e){return e.title!==t.title}));n.unshift(t),this.templateStorage.setItem(e.ETemplatesStorage.LATEST_USED,JSON.stringify(n))},t.prototype.clearLatestUsed=function(){this.templateStorage.removeItem(e.ETemplatesStorage.LATEST_USED)},t.prototype.cacheTemplateList=function(t){this.templateStorage.setItem(e.ETemplatesStorage.STORAGE,JSON.stringify(t))},t.prototype.getCachedTemplateList=function(){return JSON.parse(this.templateStorage.getItem(e.ETemplatesStorage.STORAGE))||[]},t.prototype.clearCachedTemplateList=function(){this.templateStorage.removeItem(e.ETemplatesStorage.STORAGE)},t}();Ae.decorators=[{type:t.Injectable}],Ae.ctorParameters=function(){return[{type:Storage,decorators:[{type:t.Inject,args:[Le]}]}]};var ze=function(){function e(e,t,r,i,l){var a=this;this.userRestApi=e,this.pbStorage=t,this.userMiddleware=r,this.googleFonts=i,this.config=l,this.Email=new _e,this.clonedEmail=V(this.Email),this._Email$=new n.BehaviorSubject(this.Email),this.emailAsObservable$=this._Email$.asObservable(),this.emailStructuresAsObservable$=this.emailAsObservable$.pipe(o.pluck("structures")),this.generalEmailOptionsAsObservable$=this.emailAsObservable$.pipe(o.pluck("general")),this.currentEmailHasChanges$=this.emailAsObservable$.pipe(o.map((function(e){return!J(e,a.clonedEmail)}))),this.builderContainerStyles$=this.generalEmailOptionsAsObservable$.pipe(o.map((function(e){var t=e.background,n=e.padding,o=e.direction;return Object.assign({direction:o,backgroundRepeat:t.repeat,backgroundColor:t.color,backgroundSize:te(t.size),backgroundPosition:"top center"},Q(n))}))),this._Mjml$=new n.BehaviorSubject(""),this.mjmlAsObservable$=this._Mjml$.asObservable(),this._Template$=new n.BehaviorSubject(""),this.templateAsObservable$=this._Template$.asObservable(),this._onTemplateCreated$=new n.Subject,this.onTemplateCreated$=this._onTemplateCreated$.pipe(o.withLatestFrom(this._Email$,this._Template$,this._Mjml$),o.map((function(e){var t=N(e);t[0];return t.slice(1)})))}return e.prototype.createHTMLTemplate$=function(){var e=this;return this.emailAsObservable$.pipe(o.switchMap((function(e){if(!e.structures.length)throw new Error("Please add some structures and blocks to perform this action.");return re(e)})),o.withLatestFrom(n.combineLatest([this.currentEmailHasChanges$,this.templateAsObservable$])),o.exhaustMap((function(t){var r=N(t,2),i=r[0],l=N(r[1],2),a=l[0],s=l[1];return a||!s?e.userMiddleware.createHTMLTemplate(i).pipe(o.exhaustMap((function(t){return e.userRestApi.createHTMLTemplate$(Object.assign(Object.assign({},t),{googleFonts:e.googleFonts}),e.config.apiPath)})),o.map((function(t){if(t.errors.length){var n=t.errors.map((function(e){var t=e.message;return e.tagName+" > "+t})).join("\n");throw new Error(n)}return e._Mjml$.next(t.mjml),e._Template$.next(t.html),e.clonedEmail=V(e.Email),e._onTemplateCreated$.next(),t}))):n.combineLatest([e._Mjml$,e._Template$]).pipe(o.map((function(e){var t=N(e,2),n=t[0];return{html:t[1],mjml:n,errors:[]}})))})))},e.prototype.markForCheck=function(){this._Email$.next(this.Email),this.Email.structures.length&&this.pbStorage.addTemplateToLatestUsed(V({templateData:this.Email,title:"last-edited",thumbPath:"https://via.placeholder.com/200x300?text=LAST+EDITED"}))},e.prototype.setEmail=function(e){if(!e.structures||!e.general)throw new Error("Injected object is not a valid PBEmail");this.Email=e,this.reset()},e.prototype.addStructure=function(e){var t=e.currentIndex,n=void 0===t?0:t,o=e.item,r=this.Email.structures,i=void 0===r?[]:r,l=!0;o.data.elements.length||(l=!1,o.data.elements=Array.from({length:o.data.columns},(function(){return[]})));var a=Object.assign(Object.assign({id:Date.now()},V(o.data)),{isModule:l});return i.splice(n,0,a),this.markForCheck(),a},e.prototype.changeStructureOrder=function(e){var t=e.previousIndex,n=void 0===t?0:t,o=e.currentIndex,i=void 0===o?0:o;r.moveItemInArray(this.Email.structures,n,i),this.markForCheck()},e.prototype.duplicateStructure=function(e){var t=this.Email.structures,n=void 0===t?[]:t,o=V(Object.assign(Object.assign({},n[e]),{id:Date.now()}));return n.splice(e,0,o),this.markForCheck(),o},e.prototype.removeStructure=function(e){var t=this.Email.structures;(void 0===t?[]:t).splice(e,1),this.markForCheck()},e.prototype.addBlock=function(e,t){var n=e.previousIndex,o=void 0===n?0:n,i=e.currentIndex,l=void 0===i?0:i,a=e.item,s=e.previousContainer,c=s.id,p=s.data;"block-elements"===c?t.splice(l,0,V(a.data)):r.transferArrayItem(p,t,o,l),this.markForCheck()},e.prototype.changeBlockOrder=function(e,t){var n=e.previousIndex,o=void 0===n?0:n,i=e.currentIndex,l=void 0===i?0:i;r.moveItemInArray(t,o,l),this.markForCheck()},e.prototype.duplicateBlock=function(e,t,n){var o=V(n);return t.splice(e,0,o),this.markForCheck(),o},e.prototype.removeBlock=function(e,t){t.splice(e,1),this.markForCheck()},e.prototype.reset=function(){this._Mjml$.next(null),this._Template$.next(null),this.clonedEmail=V(this.Email),this.markForCheck()},e}();ze.ɵprov=F.ɵɵdefineInjectable({factory:function(){return new ze(F.ɵɵinject(Fe),F.ɵɵinject(Ae),F.ɵɵinject(Ee),F.ɵɵinject(we),F.ɵɵinject(Me))},token:ze,providedIn:"root"}),ze.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],ze.ctorParameters=function(){return[{type:Fe},{type:Ae},{type:Ee},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]}]};var Re=function(){function e(e,t){var r=this;this.matDialogRef=e,this.templateList=t,this.chooseCategory$=new n.BehaviorSubject("latest"),this.currentCategoryTemplates$=this.chooseCategory$.pipe(o.map((function(e){return r.templateList.find((function(t){return t.category===e}))||{templates:[]}})),o.pluck("templates"),o.map((function(e){return e.length>0?e:null})))}return e.prototype.chooseTemplate=function(e){this.csdTemplate=e},e.prototype.chageCategory=function(e){this.chooseCategory$.next(e)},e.prototype.getTemplatesList=function(){return this.templateList.filter((function(e){return"latest"!==e.category}))},e.prototype.startBuilding=function(){var e=this;this.chooseCategory$.pipe(o.take(1)).subscribe((function(t){e.matDialogRef.close({category:t,template:e.csdTemplate})}))},e}();Re.decorators=[{type:t.Component,args:[{selector:"pb-template-list-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout="column" style="height: 100%;">\n  <h2 mat-dialog-title i18n="templates|Modal template header">Custom Templates</h2>\n  <div class="mat-typography template-list-wrapper" fxLayout fxLayoutGap="1rem" fxFlex>\n    <mat-list fxFlex="200px" dense>\n      <mat-list-item (click)="chageCategory(\'latest\')" [ngClass]="{active: (chooseCategory$ | async) === \'latest\'}"\n        i18n="templates|category name">\n        Latest\n      </mat-list-item>\n      <mat-divider></mat-divider>\n      <mat-list-item *ngFor="let list of getTemplatesList()" (click)="chageCategory(list.category)"\n        [ngClass]="{active: (chooseCategory$ | async) === list.category}" i18n="templates|category name">\n        {{list.category}}\n      </mat-list-item>\n    </mat-list>\n\n    <ng-container *ngIf="currentCategoryTemplates$ | async as templates;else emptyCategory">\n      <cdk-virtual-scroll-viewport itemSize="150" [maxBufferPx]="150" fxFlex>\n        <div class="template-list">\n          <div *cdkVirtualFor="let template of templates" class="template-list-item" (click)="chooseTemplate(template)"\n            i18n-matTooltip="templates|Click to choose message" matTooltip="Click to choose">\n            <img [src]="template.thumbPath" [alt]="template.title" />\n            <div class="description">\n              <h3>{{template.title}}</h3>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n  </div>\n  <mat-dialog-actions align="end">\n    <button mat-button mat-dialog-close i18n="actions|Undo">Undo</button>\n    <button mat-button (click)="startBuilding()" [disabled]="!csdTemplate" i18n="actions|Start">\n      Start\n    </button>\n  </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyCategory>\n  <div fxFlex fxLayout="column" fxLayoutAlign="center center" class="empty-category-notification">\n    <mat-icon>notifications</mat-icon>\n    <h2 i18n="templates|No templates in current category message">This category is empty!</h2>\n  </div>\n</ng-template>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:inherit}.template-list-wrapper mat-list{position:sticky;top:0}.template-list-wrapper mat-list mat-list-item{text-transform:capitalize;cursor:pointer;border-radius:3px;transition:all .3s linear}.template-list-wrapper mat-list mat-list-item.active,.template-list-wrapper mat-list mat-list-item:hover{background-color:#f3f3f3}.template-list-wrapper .template-list{display:grid;gap:1rem;grid-template:150px/repeat(3,1fr)}@media screen and (max-width:699px){.template-list-wrapper .template-list{grid-template:150px/repeat(2,1fr)}}.template-list-wrapper .template-list-item{border-radius:3px;overflow:hidden;border:1px solid #ccc;padding:.5rem;position:relative;background-color:#f3f3f3}.template-list-wrapper .template-list-item img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:calc(200px - 1rem);width:100%;cursor:pointer;animation:objectPosition 3s linear infinite alternate;animation-play-state:paused}.template-list-wrapper .template-list-item .description{position:absolute;bottom:0;right:0;left:0;background-color:#fff;padding:.5rem;opacity:1;transition:all .3s linear;text-transform:capitalize}.template-list-wrapper .template-list-item .description h3{margin:0}.template-list-wrapper .template-list-item:hover img{animation-play-state:running}.template-list-wrapper .template-list-item:hover .description{bottom:-44px;opacity:.6}.empty-category-notification mat-icon{height:50px;width:50px;font-size:50px}.empty-category-notification h2{text-transform:uppercase}@keyframes objectPosition{to{-o-object-position:bottom;object-position:bottom}}"]}]}],Re.ctorParameters=function(){return[{type:a.MatDialogRef},{type:Array,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]}]};var Ue=function(e,t){this.dialogRef=e,this.data=t};Ue.decorators=[{type:t.Component,args:[{selector:"pb-confirm-dialog",template:'\n    <h2 mat-dialog-title>Are you sure?</h2>\n    <mat-dialog-actions fxLayout fxLayoutAlign="space-between center" fxLayoutGap="1rem">\n      <button mat-stroked-button mat-dialog-close="0">No</button>\n      <button mat-stroked-button color="warn" mat-dialog-close="1">Yes</button>\n    </mat-dialog-actions>\n  '}]}],Ue.ctorParameters=function(){return[{type:a.MatDialogRef},{type:void 0,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]}]};var He=function(){function e(e,t){this.pbMiddlewares=e,this.bottomSheetRef=t,this.importing=!1,this.fileReader=new FileReader}return e.prototype.openBrowserModal=function(e){e.preventDefault(),this.uploadInput.nativeElement.click()},e.prototype.startImporting=function(){var e=this;this.importing=!0,this.pbMiddlewares.importFile(this.uploadInput.nativeElement.files.item(0)).pipe(o.take(1),o.catchError((function(t){return e.pbMiddlewares.catchError(t).pipe(o.switchMap((function(){return e.bottomSheetRef.dismiss(t),n.EMPTY})))}))).subscribe((function(t){e.fileReader.readAsText(t,"utf-8")}))},e.prototype.ngOnInit=function(){var e=this;this.fileReader.addEventListener("loadend",(function(){e.importing=!1;try{var t=JSON.parse(e.fileReader.result);e.bottomSheetRef.dismiss(t)}catch(t){throw e.bottomSheetRef.dismiss(null),new Error(t)}}))},e.prototype.ngOnDestroy=function(){},e}();He.decorators=[{type:t.Component,args:[{selector:"pb-import-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-nav-list>\n    <mat-list-item (click)="openBrowserModal($event)">\n        <div *ngIf="!importing">\n            <span mat-line i18n="import|Import JSON file">Import JSON file</span>\n        </div>\n        <ng-container *ngIf="importing">\n            <span mat-line i18n="import|Importing in progress">Importing in progress ...</span>\n            \x3c!-- <span mat-line>{{ imageInfo }}</span> --\x3e\n        </ng-container>\n    </mat-list-item>\n    <mat-progress-bar *ngIf="importing" mode="buffer" value="100"></mat-progress-bar>\n</mat-nav-list>\n<input type="file" accept="application/json" fxHide #uploadInput (change)="startImporting()" />\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */"]}]}],He.ctorParameters=function(){return[{type:Ee},{type:s.MatBottomSheetRef}]},He.propDecorators={uploadInput:[{type:t.ViewChild,args:["uploadInput",{read:t.ElementRef,static:!0}]}]};var Ne=function(){function e(e,t,r,i){var l=this;this.emailObjectStore=e,this.matDialog=t,this.bottomSheet=r,this.snackBar=i,this.activeMatProgress$=new n.ReplaySubject,this.cdkDropListConnectedTo$=this.emailObjectStore.emailStructuresAsObservable$.pipe(o.map((function(e){return e.reduce((function(e,t,n){var o=t.elements;return e.push.apply(e,G(o.map((function(e,t){return"column-droplist-"+t+"-"+n})))),e}),[])})),o.distinct(),o.distinctUntilKeyChanged("length"),o.shareReplay()),this._currentEditingStructure$=new n.BehaviorSubject(null),this.currentEditingStructure$=this._currentEditingStructure$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged(),o.catchError((function(){return n.of(null)})),o.shareReplay()),this._currentEditingBlock$=new n.BehaviorSubject(null),this.currentEditingBlock$=this._currentEditingBlock$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged(),o.catchError((function(){return n.of(null)})),o.shareReplay()),this._editGeneralSettings$=new n.Subject,this.editGeneralSettings$=this._editGeneralSettings$.pipe(o.subscribeOn(n.animationFrameScheduler),o.tap((function(){return l.changeTabIndex(2)})),o.distinctUntilChanged(),o.shareReplay()),this._currentTabIndex$=new n.BehaviorSubject(0),this.currentTabIndex$=this._currentTabIndex$.pipe(o.subscribeOn(n.animationFrameScheduler),o.distinctUntilChanged())}return e.prototype.editBlock=function(e){this._currentEditingStructure$.next(null),this._currentEditingBlock$.next(e),this._editGeneralSettings$.next("block")},e.prototype.editStructure=function(e){this._currentEditingBlock$.next(null),this._editGeneralSettings$.next("structure"),this._currentEditingStructure$.next(e)},e.prototype.editGeneralSettings=function(){this.resetElements(),this._editGeneralSettings$.next("general")},e.prototype.changeTabIndex=function(e){this._currentTabIndex$.next(e)},e.prototype.confirmDialog$=function(){return this.matDialog.open(Ue).afterClosed().pipe(o.map((function(e){return"1"===e})))},e.prototype.templatesListDialog$=function(e){return this.matDialog.open(Re,{data:e,width:"60vw",maxWidth:"800px",height:"70vh",maxHeight:"900px"}).afterClosed().pipe(o.filter((function(e){return Boolean(e)})))},e.prototype.importDialog$=function(){return this.bottomSheet.open(He,{ariaLabel:"Browse media"}).afterDismissed()},e.prototype.notify=function(e,t,n){return void 0===t&&(t="dismiss"),void 0===n&&(n=3e3),this.snackBar.open(e,t,{duration:n})},e.prototype.currentEditingBlock=function(){return this._currentEditingBlock$.getValue()},e.prototype.currentEditingStructure=function(){return this._currentEditingStructure$.getValue()},e.prototype.currentStructureEqualWith=function(e){return this.currentEditingStructure()===e},e.prototype.currentBlockEqualWith=function(e){return this.currentEditingBlock()===e},e.prototype.currentStructureContainsActiveBlock=function(e){var t=this;return e.elements.some((function(e){return e.some((function(e){return e===t.currentEditingBlock()}))}))},e.prototype.resetElements=function(){this._currentEditingStructure$.next(null),this._currentEditingBlock$.next(null)},e.prototype.reset=function(){this.resetElements(),this.changeTabIndex(0)},e}();Ne.decorators=[{type:t.Injectable}],Ne.ctorParameters=function(){return[{type:ze},{type:a.MatDialog},{type:s.MatBottomSheet},{type:l.MatSnackBar}]};var Ge=function(){function e(e,t,n,r){this.config=e,this.emailObjectStore=t,this.pbMiddleWares=n,this.pbUserInterface=r,this.modules=new Set,this.customTemplates=new Set,this._mergeTags=new Set,this.onTemplateCreated$=this.emailObjectStore.onTemplateCreated$.pipe(o.shareReplay()),this.onSave$=this.onTemplateCreated$,this.isLoading=this.pbUserInterface.activeMatProgress$.asObservable(),this.isLoading$=this.pbUserInterface.activeMatProgress$.asObservable(),this.config=Object.assign(Object.assign({},De),this.config)}return e.prototype.createHTMLTemplate$=function(){var e=this;return this.pbUserInterface.activeMatProgress$.next(!0),this.emailObjectStore.createHTMLTemplate$().pipe(o.tap((function(){return e.pbUserInterface.activeMatProgress$.next(!1)})),o.catchError((function(t){return e.pbMiddleWares.catchError(t).pipe(o.switchMap((function(){return e.pbUserInterface.notify(t.message),e.pbUserInterface.activeMatProgress$.next(!1),n.EMPTY})))})),o.finalize((function(){return e.pbUserInterface.activeMatProgress$.next(!1)})))},e.prototype.saveEmail=function(){return this.createHTMLTemplate$()},Object.defineProperty(e.prototype,"Email",{get:function(){return this.emailObjectStore.Email},set:function(e){this.emailObjectStore.setEmail(e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"Template",{get:function(){return null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"Mjml",{get:function(){return null},enumerable:!1,configurable:!0}),e.prototype.getEmailAsObservable$=function(){return this.emailObjectStore.emailAsObservable$},e.prototype.getTemplateAsObservable$=function(){return this.emailObjectStore.templateAsObservable$},e.prototype.getMjmlAsObservable$=function(){return this.emailObjectStore.mjmlAsObservable$},e.prototype.onChanges$=function(){return this.onTemplateCreated$},e}();Ge.decorators=[{type:t.Injectable}],Ge.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:ze},{type:Ee},{type:Ne}]};var We=function(){function e(e,t,o,r,i,l){this.sanitizer=e,this.ngb=t,this.userRestApi=o,this.userInterface=r,this.middlewares=i,this.bottomSheetRef=l,this.uploading=!1,this.progress=new n.Subject}return Object.defineProperty(e.prototype,"imageInfo",{get:function(){if(this.choosedImage){var e=this.choosedImage,t=e.lastModified,n=e.size;return new Date(t).toLocaleString()+", "+ne(n)+"."}return""},enumerable:!1,configurable:!0}),e.prototype.previewLink=function(){return this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl)},e.prototype.openBrowserModal=function(e){e.preventDefault();var t=this.ngb.config.uploadImagePath;!this.uploading&&t?this.uploadInput.nativeElement.click():t||this.userInterface.notify("Hm ... this isn't a bug, it seems 'uploadImagePath' is empty!")},e.prototype.uploadInputChanged=function(){var e=this.uploadInput.nativeElement;e.files.length&&this._startUploading(e.files.item(0))},e.prototype._startUploading=function(e){var t=this;this.objectUrl&&URL.revokeObjectURL(this.objectUrl),this.objectUrl=URL.createObjectURL(e),this.uploading=!0;var r=this.ngb.config,l=r.uploadImagePath,a=r.csrf,s=new FormData;return a&&s.append(a.name,a.token),s.append("image",e),this.userRestApi.userImageUpload$(s,l).pipe(o.catchError((function(e){return t.middlewares.catchError(e).pipe(o.switchMap((function(){return t.userInterface.notify(e.message),n.EMPTY})))})),o.finalize((function(){return t.progress.complete()}))).subscribe((function(e){if(e.type===i.HttpEventType.UploadProgress){var n=Math.round(100*e.loaded/e.total);t.progress.next(n)}else e instanceof i.HttpResponse&&(e.body.success?(t.bottomSheetRef.dismiss(e.body.path),t.userInterface.notify("Successfully uploaded.",null,1e3)):t.userInterface.notify(e.body.message,"Dismiss",null))}))},e.prototype.ngOnDestroy=function(){this.objectUrl&&URL.revokeObjectURL(this.objectUrl)},e}();We.decorators=[{type:t.Component,args:[{selector:"pb-upload-bottom-sheet-dialog",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-nav-list>\n  <mat-list-item (click)="openBrowserModal($event)">\n    <div *ngIf="!uploading">\n      <span mat-line i18n="upload|Browse images from computer">Browse images from computer</span>\n    </div>\n    <ng-container *ngIf="uploading">\n      <img matListAvatar [src]="previewLink()" />\n      <span mat-line i18n="upload|Uploading Message">Uploading ...</span>\n      <span mat-line>{{ imageInfo }}</span>\n    </ng-container>\n  </mat-list-item>\n  <mat-progress-bar *ngIf="uploading" mode="buffer" [value]="progress | async"></mat-progress-bar>\n</mat-nav-list>\n<input type="file" accept="image/*" fxHide #uploadInput (change)="uploadInputChanged()" />\n',styles:[""]}]}],We.ctorParameters=function(){return[{type:c.DomSanitizer},{type:Ge},{type:Fe},{type:Ne},{type:Ee},{type:s.MatBottomSheetRef}]},We.propDecorators={uploadInput:[{type:t.ViewChild,args:["uploadInput",{static:!0}]}]};var Ve=function(){};Ve.decorators=[{type:t.Injectable}];var Je=function(e){function t(t,n){var o=e.call(this)||this;return o.matBottomSheet=t,o.userMiddlewaresService=n,o}return z(t,e),t.prototype.browse$=function(){var e=this;return this.matBottomSheet.open(We,{ariaLabel:"Browse media"}).afterDismissed().pipe(o.switchMap((function(t){return e.userMiddlewaresService.uploadImage(t)})))},t}(Ve),Ye=function(){function e(e,t,n,o,r,i,l){this.imageCategoryList=e,this.userConfig=t,this.matDialogRef=n,this.sanitizer=o,this.userRestApi=r,this.middlewares=i,this.userInterface=l,this.currentMenuItem="gallery"}return e.prototype.changeCurrentMenuItem=function(e){this.currentMenuItem=e},e.prototype.addImageToTemplate=function(e){void 0===e&&(e=this.choseImage),this.matDialogRef.close(e)},e.prototype.previewImage=function(e){var t=e.target;this.uploadImageFile=t.files.item(0),this.imagePreviewObjectUrl&&URL.revokeObjectURL(this.imagePreviewObjectUrl),this.imagePreviewObjectUrl=URL.createObjectURL(this.uploadImageFile),this.uploadImagePreview=this.sanitizer.bypassSecurityTrustResourceUrl(this.imagePreviewObjectUrl)},e.prototype.startUploading=function(){var e=this,t=this.userConfig,r=t.csrf,l=t.uploadImagePath,a=new FormData;return r&&a.append(r.name,r.token),a.append("image",this.uploadImageFile),this.userRestApi.userImageUpload$(a,l).pipe(o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterface.notify(t.message),n.EMPTY})))}))).subscribe((function(t){t.type===i.HttpEventType.UploadProgress||t instanceof i.HttpResponse&&(t.body.success?(e.addImageToTemplate(t.body.path),e.userInterface.notify("Successfully uploaded.",null,1e3)):e.userInterface.notify(t.body.message,"Dismiss",null))}))},e.prototype.ngOnDestroy=function(){this.imagePreviewObjectUrl&&URL.revokeObjectURL(this.imagePreviewObjectUrl)},e}();Ye.decorators=[{type:t.Component,args:[{selector:"pb-upload-image-gallery",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout="column" style="height: 100%;">\n    <h2 mat-dialog-title i18n="image-gallery|Modal Image gallery header">Image Gallery</h2>\n    <div class="mat-typography gallery-list-wrapper" fxLayout fxLayoutGap="1rem" fxFlex>\n        <mat-list fxFlex="200px">\n            <mat-list-item (click)="changeCurrentMenuItem(\'gallery\')" [class.active]="currentMenuItem === \'gallery\'"\n                i18n="image-gallery|Image list">\n                Gallery Image list\n            </mat-list-item>\n            <mat-list-item (click)="changeCurrentMenuItem(\'upload\')" [class.active]="currentMenuItem === \'upload\'"\n                i18n="image-gallery|Upload an image">\n                Upload an image\n            </mat-list-item>\n        </mat-list>\n\n        <ng-container *ngIf="currentMenuItem === \'gallery\'">\n            <ng-container *ngIf="imageCategoryList.length;else emptyImageList">\n                <cdk-virtual-scroll-viewport itemSize="150" [minBufferPx]="150 * 10" fxFlex\n                    class="gallery-list">\n                    <div *cdkVirtualFor="let imagePath of imageCategoryList" class="gallery-list-item"\n                         (click)="choseImage = imagePath" i18n-matTooltip="image-gallery|Click to choose message"\n                         matTooltip="Click to choose">\n                        <img [src]="imagePath" />\n                    </div>\n                </cdk-virtual-scroll-viewport>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf="currentMenuItem === \'upload\'">\n            <div class="upload-image" fxLayout="column" fxLayoutAlign="center center" fxFlex fxLayoutGap="1rem">\n                <label class="upload-image-item" [class.empty]="!uploadImagePreview">\n                    <div class="upload-image-item-overview" fxLayout="column" fxLayoutAlign="center center">\n                        <mat-icon>backup</mat-icon>\n                    </div>\n                    <img class="upload-image-item-preview" *ngIf="uploadImagePreview" [src]="uploadImagePreview" />\n                    <input type="file" fxHide pattern="image/*" (change)="previewImage($event)">\n                </label>\n                <button mat-flat-button color="primary" (click)="startUploading()" i18n="image-gallery|Upload and insert into template">\n                  Upload and insert into template\n                </button>\n            </div>\n        </ng-container>\n    </div>\n    <mat-dialog-actions align="end">\n        <button mat-button mat-dialog-close i18n="actions|Undo">Cancel</button>\n        <button mat-stroked-button color="primary" [disabled]="!choseImage" (click)="addImageToTemplate()"\n                i18n="actions|Start">\n            Add to template\n        </button>\n    </mat-dialog-actions>\n</div>\n\n\n<ng-template #emptyImageList>\n    <div fxFlex fxLayout="column" fxLayoutAlign="center center" class="empty-category-notification">\n        <mat-icon>notifications</mat-icon>\n        <h2 i18n="image-gallery|Image list is empty message">Image list is empty!</h2>\n    </div>\n</ng-template>\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */mat-list{background-color:#fff}mat-list mat-list-item{cursor:pointer}mat-list mat-list-item.active{background-color:#ccc}.gallery-list ::ng-deep .cdk-virtual-scroll-content-wrapper{display:grid;gap:.3rem;grid-template:auto/repeat(4,1fr)}.gallery-list-item{height:120px;background-color:#ccc;cursor:pointer}.gallery-list-item img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.upload-image-item{width:80%;height:200px;background-color:#ccc;position:relative;border-radius:3px;padding:1em;text-align:center}.upload-image-item.empty .upload-image-item-overview,.upload-image-item:hover .upload-image-item-overview{opacity:1}.upload-image-item-overview{opacity:0;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:opacity .5s linear}.upload-image-item-overview mat-icon{height:50px;width:50px;font-size:50px}.upload-image-item-preview{max-height:100%}"]}]}],Ye.ctorParameters=function(){return[{type:Array,decorators:[{type:t.Inject,args:[a.MAT_DIALOG_DATA]}]},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:a.MatDialogRef},{type:c.DomSanitizer},{type:Fe},{type:Ee},{type:Ne}]};var Ke=function(e){function t(t,n,o){var r=e.call(this)||this;return r.matDialog=t,r.userMiddleware=n,r.userRestApi=o,r}return z(t,e),t.prototype.browse$=function(){var e=this;return this.userRestApi.getUserImages$().pipe(o.exhaustMap((function(t){return e.matDialog.open(Ye,{data:t,width:"60vw",maxWidth:"800px",height:"60vh",maxHeight:"800px"}).afterClosed()})),o.filter((function(e){return!!e.length})),o.switchMap((function(t){return e.userMiddleware.uploadImage(t)})))},t}(Ve),Qe=function(){function e(e,t,o,r){this.userInterfaceService=e,this.emailObjectStore=t,this.chRef=o,this.pbMiddlewaresService=r,this.structure=new de,this.cdkDropListConnectedTo$=this.userInterfaceService.cdkDropListConnectedTo$,this.validate=function(e){var t=+(e.rectangle.width/this.fr).toFixed(2);return t>1&&t<=10-this.structure.columns}.bind(this),this.componentIsDestroyed$=new n.Subject}return Object.defineProperty(e.prototype,"isStructureActive",{get:function(){return this.isActive},enumerable:!1,configurable:!0}),e.prototype.onHostClick=function(e){e.stopImmediatePropagation(),this.editStructure()},e.prototype.removeStructure=function(e){var t=this;e.stopPropagation(),this.pbMiddlewaresService.removeStructure(this.index,this.structure).pipe(o.exhaustMap((function(){return t.userInterfaceService.confirmDialog$()})),o.filter((function(e){return e})),o.take(1)).subscribe((function(){t.emailObjectStore.removeStructure(t.index),t.userInterfaceService.resetElements()}))},e.prototype.duplicateStructure=function(e){var t=this;e.stopPropagation(),this.pbMiddlewaresService.duplicateStructure(this.index,this.structure).pipe(o.map((function(){return t.emailObjectStore.duplicateStructure(t.index)})),o.take(1)).subscribe((function(e){t.editStructure(e)}))},e.prototype.dropNewBlock=function(e,t){var n=this;e.previousContainer===e.container?this.emailObjectStore.addBlock(e,t):this.pbMiddlewaresService.addBlock(e,t).pipe(o.map((function(e){return n.emailObjectStore.addBlock(e.event,e.column)}))).subscribe((function(){n.chRef.markForCheck()}))},e.prototype.disableBlockDrag$=function(e){return this.pbMiddlewaresService.disableBlockDragWithinEmailBody(e).pipe(o.take(1))},e.prototype.editStructure=function(e){var t=this;void 0===e&&(e=this.structure),this.pbMiddlewaresService.editStructure(e).pipe(o.take(1)).subscribe((function(e){t.userInterfaceService.editStructure(e)}))},e.prototype.getResizeEdges=function(e){return{right:e+1!==this.structure.columns,left:0!==e}},e.prototype.createColumnId=function(e){return"column-droplist-"+e+"-"+this.index},e.prototype.getColumnStyles=function(e){var t=this.structure.options,n=t.gaps,o=void 0===n?[4,4]:n,r=t.columns,i=(void 0===r?[]:r)[e]||ue,l="center";return"bottom"===i.verticalAlign?l="flex-end":"top"===i.verticalAlign&&(l="flex-start"),Object.assign({padding:o.map((function(e){return e+"px"})).join(" "),backgroundColor:i.background.color,placeSelf:l+" stretch"},K(i.border))},e.prototype.onResizeEnd=function(e,t){var n=e.rectangle;this.structure.options.columnsWidth[t]=+(n.width/this.fr).toFixed(2)},e.prototype.ngDoCheck=function(){(this.isActive||this.userInterfaceService.currentStructureContainsActiveBlock(this.structure))&&this.chRef.markForCheck()},e.prototype.ngOnInit=function(){var e=this,t=this.structure.options,n=t.columns,r=t.columnsWidth;if(!n||!r){var i=this.structure,l=i.type,a=i.elements,s=i.options;this.editStructure(new de(l,a,s))}var c=this.emailObjectStore.Email.general.width.value,p=N(this.structure.options.gaps,2)[1];this.fr=(c-p*this.structure.columns)/10,this.userInterfaceService.currentEditingStructure$.pipe(o.map((function(t){return t===e.structure})),o.takeUntil(this.componentIsDestroyed$)).subscribe((function(t){e.isActive=t}))},e.prototype.ngOnDestroy=function(){this.componentIsDestroyed$.next(""),this.componentIsDestroyed$.complete()},e}();Qe.decorators=[{type:t.Component,args:[{selector:"pb-structure",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div class="column" *ngFor="let column of structure.elements; let index = index" cdkDropList mwlResizable\n  [enableGhostResize]="false" [resizeSnapGrid]="{ left: fr, right: fr }" [resizeEdges]="getResizeEdges(index)"\n  [validateResize]="validate" (resizing)="onResizeEnd($event, index)"\n  (cdkDropListDropped)="dropNewBlock($event, column)" [class.empty]="!column.length" [ngStyle]="getColumnStyles(index)"\n  [cdkDropListConnectedTo]="cdkDropListConnectedTo$ | async" [cdkDropListData]="column" [id]="createColumnId(index)">\n\n  <div *ngIf="!column.length" class="empty-block" i18n="structure|Inside empty block">DnD blocks</div>\n\n  <pb-block *ngFor="let block of column; let index = index" cdkDrag [cdkDragData]="block" [block]="block"\n    [index]="index" [column]="column" [cdkDragDisabled]="disableBlockDrag$(block) | async">\n    <button mat-icon-button class="move" cdkDragHandle i18n-matTooltip="block|Change Block order"\n      matTooltip="Change Block order" *ngIf="!(disableBlockDrag$(block) | async)">\n      <mat-icon i18n-aria-label="block|Move block" aria-label="Move block" inline>pan_tool</mat-icon>\n    </button>\n  </pb-block>\n</div>\n\n<ng-content select=".move"></ng-content>\n<div class="tools" fxLayoutGap="0.25rem">\n  <button mat-icon-button class="edit" color="primary" i18n-matTooltip="structure|Change structure settings"\n    matTooltip="Change structure settings">\n    <mat-icon i18n-aria-label="structure|Edit structure" aria-label="Edit structure" inline>edit</mat-icon>\n  </button>\n  <button mat-icon-button (click)="duplicateStructure($event)" i18n-matTooltip="structure|Duplicate structure"\n    matTooltip="Duplicate structure">\n    <mat-icon i18n-aria-label="structure|Duplicate structure" aria-label="Duplicate structure" inline>file_copy\n    </mat-icon>\n  </button>\n  <button mat-icon-button color="warn" (click)="removeStructure($event)" i18n-matTooltip="structure|Delete structure"\n    matTooltip="Delete structure">\n    <mat-icon i18n-aria-label="structure|Remove Structure" aria-label="Remove Structure" inline>delete_forever\n    </mat-icon>\n  </button>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.Emulated,exportAs:"structure",styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-block>.cdk-drag-handle{position:absolute;top:-30px;right:0;cursor:move;background-color:rgba(63,81,181,.5);color:#fff;border-radius:50% 50% 0 0;opacity:0;height:30px;width:30px;font-size:smaller}pb-block>.cdk-drag-handle mat-icon{margin-top:-8px}pb-block>.cdk-drag-handle:hover{background-color:#3f51b5}pb-block.cdk-drag-preview .cdk-drag-handle,pb-block:hover .cdk-drag-handle{opacity:1}:host{display:grid;border:1px solid #ccc;position:relative;grid-template-columns:1fr}:host>.tools{direction:ltr;position:absolute;opacity:0;left:0;bottom:-25px;color:#ff4081}:host>.tools button{background-color:#fff;border-radius:0 0 3px 3px;height:25px;width:25px;line-height:0}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview,:host:hover{box-shadow:0 0 1px 2px #ff4081;z-index:1}:host:hover>.tools{opacity:1}:host:hover>.tools button{background-color:#ff4081;color:#fff}:host.active>.tools>.edit{display:none}:host.cols_2{grid-template-columns:repeat(2,6fr)}:host.cols_3{grid-template-columns:repeat(3,4fr)}:host.cols_4{grid-template-columns:repeat(4,3fr)}:host.cols_12{grid-template-columns:7fr 5fr}:host.cols_21{grid-template-columns:5fr 7fr}:host .cdk-drop-list-dragging,:host .cdk-drop-list-receiving{height:100%}:host>.column{box-sizing:border-box}:host>.column.empty{height:60px}:host>.column.empty .empty-block{background-color:rgba(101,99,99,.21);height:100%;display:flex;justify-content:center;place-items:center;flex-direction:column;color:rgba(101,99,99,.3);font-size:small}:host>.column.empty.cdk-drop-list-dragging .empty-block{display:none}:host>.column.empty>.cdk-drag-placeholder{min-height:60px!important}"]}]}],Qe.ctorParameters=function(){return[{type:Ne},{type:ze},{type:t.ChangeDetectorRef},{type:Ee}]},Qe.propDecorators={structure:[{type:t.Input}],index:[{type:t.Input}],isStructureActive:[{type:t.HostBinding,args:["class.active"]}],onHostClick:[{type:t.HostListener,args:["click",["$event"]]}]};var Xe=function(){function e(){}return e.prototype.transform=function(e){var t,n,o={"áÁ":"a","éÉ":"e","íÍ":"i","óÓ":"o","úÚ":"u","ñÑ":"n"};try{for(var r=H(Object.keys(o)),i=r.next();!i.done;i=r.next()){var l=i.value;e=e.replace(new RegExp("["+l+"]","g"),o[l])}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}return e.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")},e}();Xe.decorators=[{type:t.Pipe,args:[{name:"slugify"}]}];var Ze=function(){function e(e,o,r,i,l,a,s,c,p,u,d,m){var b,g;if(this.ngb=e,this.userRestApiService=o,this.userInterfaceService=r,this.emailObjectStore=i,this.renderer2=l,this.slugifyPipe=a,this.middlewares=s,this.changeDetectorRef=c,this.structures=p,this.blocks=u,this.doc=m,this.emailChange=new t.EventEmitter,this.previewTemplate=!1,this.showGeneralSettings$=this.userInterfaceService.editGeneralSettings$,this.currentTabIndex$=this.userInterfaceService.currentTabIndex$,this.cdkDropListConnectedTo$=this.userInterfaceService.cdkDropListConnectedTo$,this.getBuilderContainerStyles$=this.emailObjectStore.builderContainerStyles$,this.currentHTMLTemplate$=this.emailObjectStore.templateAsObservable$,this.activeMatProgress$=this.userInterfaceService.activeMatProgress$.asObservable(),this.customModuleList$=this.userRestApiService.getAllUserModules$,this._onDestroy$=new n.Subject,this.includedFonts=new Set,this.doc)try{for(var h=H(d),f=h.next();!f.done;f=h.next()){var y=f.value,k=this.doc.createElement("link");k.href="https://fonts.googleapis.com/css?family="+y,k.rel="stylesheet",this.includedFonts.add(k),this.doc.head.appendChild(k)}}catch(e){b={error:e}}finally{try{f&&!f.done&&(g=h.return)&&g.call(h)}finally{if(b)throw b.error}}}return e.prototype.writeValue=function(e){try{this.emailObjectStore.setEmail(e),this.previewTemplate=!1,this.changeDetectorRef.markForCheck()}catch(e){this.userInterfaceService.notify(e.message)}},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){console.info("[IpEmailBuilderComponent] Method [setDisabledState] is not implemented.")},e.prototype.saveEmail=function(){var e=this;return this.emailObjectStore.currentEmailHasChanges$.pipe(o.exhaustMap((function(t){return n.iif((function(){return t}),e.ngb.createHTMLTemplate$(),e.userInterfaceService.notify("No changes were detected to be save!").afterDismissed())})),o.take(1)).subscribe()},e.prototype.disableBlocksList$=function(e){var t=this;return n.iif((function(){var t;return!(null===(t=e.state)||void 0===t?void 0:t.disabled)}),this.emailObjectStore.emailStructuresAsObservable$.pipe(o.map((function(e){return e.length>0})),o.exhaustMap((function(n){return n?t.middlewares.disableBlockDragFromList(e):re(!0)})))).pipe(o.take(1))},e.prototype.disableStructureList$=function(e){return this.middlewares.disableStructureDragFromList(e).pipe(o.take(1))},e.prototype.trackByFn=function(e){return e.type},e.prototype.changeTabIndex=function(e){this.userInterfaceService.changeTabIndex(e)},e.prototype.download=function(e){var t=this;return this.middlewares.exportFile(e).pipe(o.exhaustMap((function(){return t.ngb.createHTMLTemplate$().pipe(o.map((function(t){return Object.assign(Object.assign({},t),{type:e})})))})),o.catchError((function(e){return t.middlewares.catchError(e).pipe(o.switchMap((function(){return t.userInterfaceService.notify(e.message),n.EMPTY})))})),o.take(1)).subscribe((function(e){var n=e.type,o=e.html,r=e.mjml,i=t.renderer2.createElement("a"),l=o;"mjml"===n?l=r:"json"===n&&(l=JSON.stringify(t.ngb.Email,null,1));var a=URL.createObjectURL(new Blob([l],{type:"json"===n?"text/json":"text/html"})),s=t.slugifyPipe.transform(t.ngb.Email.general.name||"ngb-template");i.href=a,i.target="_blank",i.download=s+"."+n,i.click(),URL.revokeObjectURL(a)}))},e.prototype.importFile=function(){var e=this;this.userInterfaceService.importDialog$().pipe(o.switchMap((function(e){if(e instanceof Error)throw e;return re(e)})),o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterfaceService.notify(t.message),n.EMPTY})))})),o.take(1),o.filter((function(e){return!!e}))).subscribe((function(t){e.writeValue(t),e.userInterfaceService.notify("Email has been imported successfully.")}))},e.prototype.createArrayFromStructureColumns=function(e){var t=e.columns;return new Array(t).fill("")},e.prototype.togglePreview=function(){var e=this;return this.emailObjectStore.createHTMLTemplate$().pipe(o.exhaustMap((function(){return e.middlewares.togglePreview(!e.previewTemplate)})),o.catchError((function(t){return e.middlewares.catchError(t).pipe(o.switchMap((function(){return e.userInterfaceService.notify(t.message),n.EMPTY})))})),o.take(1)).subscribe((function(t){e.previewTemplate=t,e.changeDetectorRef.markForCheck()}))},e.prototype.ngOnInit=function(){var e=this;n.fromEvent(window,"beforeunload").pipe(o.withLatestFrom(this.emailObjectStore.currentEmailHasChanges$),o.filter((function(e){var t=N(e,2);t[0];return t[1]})),o.switchMap((function(t){var n=N(t,1)[0];return e.middlewares.preventWindowExit(n)})),o.takeUntil(this._onDestroy$)).subscribe((function(e){e.preventDefault(),e.returnValue=""})),this.emailObjectStore.emailAsObservable$.pipe(o.takeUntil(this._onDestroy$)).subscribe((function(t){var n,o;null===(n=e.onTouched)||void 0===n||n.call(e),null===(o=e.onChange)||void 0===o||o.call(e,t),e.emailChange.next(t)}))},e.prototype.ngOnChanges=function(e){e.email&&this.writeValue(e.email.currentValue)},e.prototype.ngOnDestroy=function(){this._onDestroy$.next(),this._onDestroy$.complete(),this.userInterfaceService.reset(),this.doc&&this.includedFonts.forEach((function(e){return e.remove()})),this.includedFonts.clear()},e}();Ze.decorators=[{type:t.Component,args:[{selector:"pb-email-builder",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-sidenav-container>\n  <div class="pb-builder-container" fxLayout="column" fxFlex>\n    <mat-progress-bar *ngIf="activeMatProgress$ | async" mode="buffer"></mat-progress-bar>\n    <mat-toolbar fxLayoutGap="1rem" fxLayoutAlign="space-between center">\n      <ng-content fxLayout fxLayoutGap="0.5rem" select=".top-actions"></ng-content>\n\n      <div fxFlexlayout fxLayoutGap="0.5rem">\n        <button *ngIf="ngb.config.useSaveButton" type="button" (click)="saveEmail()" mat-stroked-button color="primary"\n                i18n="actions|Save Email">\n          Save Email\n        </button>\n        <button *ngIf="ngb.config.usePreviewButton" type="button" (click)="togglePreview()" mat-stroked-button>\n          <ng-container [ngSwitch]="previewTemplate">\n            <span *ngSwitchDefault i18n="actions|Preview">Preview</span>\n            <span *ngSwitchCase="true" i18n="actions|Close Preview">Close Preview</span>\n          </ng-container>\n        </button>\n\n        <button mat-button mat-stroked-button i18n="actions|Import" (click)="importFile()">\n          Import\n        </button>\n\n        <ng-container *ngIf="ngb.config.useDownloadButton">\n          <button mat-button [matMenuTriggerFor]="downloadMenu" mat-stroked-button i18n="actions|Export">\n            Export\n          </button>\n          <mat-menu #downloadMenu="matMenu">\n            <button mat-menu-item (click)="download(\'html\')" i18n="actions|Export HTML">\n              Export HTML\n            </button>\n            <button mat-menu-item (click)="download(\'mjml\')" i18n="actions|Export MJML">\n              Export MJML\n            </button>\n            <button mat-menu-item (click)="download(\'json\')" i18n="actions|Export JSON">\n              Export JSON\n            </button>\n          </mat-menu>\n        </ng-container>\n\n      </div>\n      \x3c!-- <div class="history-actions" style="margin-inline-start: auto;">\n        <span>Last saved Now</span>\n        <button type="button" mat-icon-button>\n          <mat-icon>undo</mat-icon>\n        </button>\n        <button type="button" mat-icon-button>\n          <mat-icon>redo</mat-icon>\n        </button>\n      </div> --\x3e\n    </mat-toolbar>\n    <ng-container [ngSwitch]="previewTemplate">\n      <pb-builder-container *ngSwitchDefault [ngStyle]="getBuilderContainerStyles$ | async">\n        <ng-content select=".rewrited-empty-email"></ng-content>\n      </pb-builder-container>\n\n      <pb-preview-template fxLayout fxFlex="auto" fxLayoutAlign="center" [template]="currentHTMLTemplate$ | async"\n                           *ngSwitchCase="true">\n      </pb-preview-template>\n    </ng-container>\n  </div>\n  <mat-sidenav mode="side" fxFlex="0 0 310px" [opened]="!previewTemplate" position="end" class="pb-builder-content">\n    <mat-tab-group [selectedIndex]="currentTabIndex$ | async" (selectedIndexChange)="changeTabIndex($event)">\n      <mat-tab i18n-label="Content" label="Content">\n        <div class="main-padding">\n          <cdk-drop-list class="elements" [cdkDropListConnectedTo]="cdkDropListConnectedTo$ | async"\n                         [cdkDropListData]="blocks" [cdkDropListSortingDisabled]="true" id="block-elements">\n            <div cdkDrag *ngFor="let block of blocks; trackBy: trackByFn" [cdkDragData]="block"\n                 [cdkDragDisabled]="disableBlocksList$(block) | async" class="drag-element"\n                 [matTooltip]="block.state.message">\n              <mat-icon>{{ block.icon }}</mat-icon>\n              <div class="drag-element-title">{{ block.title }}</div>\n            </div>\n          </cdk-drop-list>\n\n          <mat-divider style="margin: 1em 0;"></mat-divider>\n          \x3c!-- <h3 class="divider"><span>Structures</span></h3> --\x3e\n          <cdk-drop-list class="elements structure-elements" cdkDropListConnectedTo="structures-drop-list"\n                         [cdkDropListSortingDisabled]="true" [cdkDropListData]="structures">\n            <div cdkDrag *ngFor="let structure of structures; trackBy: trackByFn" [cdkDragData]="structure"\n                 [cdkDragDisabled]="disableStructureList$(structure) | async" class="drag-element structure-element"\n                 [ngClass]="structure.type">\n              <div *ngFor="let column of createArrayFromStructureColumns(structure)"></div>\n            </div>\n          </cdk-drop-list>\n          <ng-content fxLayout fxLayoutGap="0.5rem" select=".after-structure-blocks"></ng-content>\n        </div>\n      </mat-tab>\n      <mat-tab i18n-label="Modules" label="Modules" class="modules-tab">\n        <cdk-virtual-scroll-viewport itemSize="54" [minBufferPx]="54 * 10" [maxBufferPx]="54 * 20"\n                                     style="height: inherit;"\n                                     *ngIf="customModuleList$ | async as modules; else emptyModuleList">\n          <div class="main-padding">\n            <div class="custom-modules" cdkDropList cdkDropListConnectedTo="structures-drop-list"\n                 [cdkDropListData]="modules" [cdkDropListSortingDisabled]="true">\n              <div fxLayout="column" fxLayoutGap="1rem">\n                <ng-container *cdkVirtualFor="let module of modules">\n                  <div cdkDrag [cdkDragData]="module.module"\n                       [cdkDragDisabled]="disableStructureList$(module.module) | async" class="drag-element"\n                       style="padding: 1em;text-transform: uppercase;height: 54px;">\n                    <span *ngIf="module.name">{{module.name}}</span>\n                    \x3c!-- <img *ngIf="module.thumb" [src]="module.thumb" /> --\x3e\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <ng-content fxLayout fxLayoutGap="0.5rem" select=".after-content-blocks"></ng-content>\n          </div>\n        </cdk-virtual-scroll-viewport>\n        <ng-template #emptyModuleList>\n          <h4 class="main-padding" style="text-align: center;" i18n="modules|empty list message">\n            Module list is empty\n          </h4>\n        </ng-template>\n      </mat-tab>\n      <mat-tab i18n-label="Settings" label="Settings">\n        <div class="pb-builder-options" [ngSwitch]="showGeneralSettings$ | async">\n          <pb-general-settings *ngSwitchDefault></pb-general-settings>\n          <pb-block-settings *ngSwitchCase="\'block\'"></pb-block-settings>\n          <pb-structure-settings *ngSwitchCase="\'structure\'" fxLayout="column"></pb-structure-settings>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-sidenav>\n</mat-sidenav-container>\n',exportAs:"pbEmailBuilder",changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:O.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return Ze})),multi:!0},Xe],styles:['/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;height:100vh}.hide{display:none}::ng-deep mat-sidenav-container{height:100%}::ng-deep mat-sidenav-container mat-sidenav-content{width:100%;z-index:unset!important;overflow:unset!important}::ng-deep h3.divider{text-align:center;display:block;overflow:hidden;margin:0 0 1rem}::ng-deep h3.divider span{font-weight:100;position:relative;display:inline-block}::ng-deep h3.divider span:after,::ng-deep h3.divider span:before{content:"";position:absolute;top:50%;height:1px;background:#ccc;width:99999px}::ng-deep h3.divider span:before{left:100%;margin-left:10px}::ng-deep h3.divider span:after{right:100%;margin-right:10px}::ng-deep .pb-builder-content{border-right:1px solid rgba(0,0,0,.12)}::ng-deep .pb-builder-content .overflow{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#fff;opacity:.5;display:none;z-index:3}::ng-deep .pb-builder-content.disabled .overflow{display:block}::ng-deep .pb-builder-content .mat-tab-label{width:50%;min-width:auto;height:64px;font-size:medium;text-transform:uppercase;padding:0 12px}::ng-deep .pb-builder-content .mat-tab-body-wrapper,::ng-deep .pb-builder-content .mat-tab-group{height:100%}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body{padding:0}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements{display:grid;grid-gap:.5rem;margin-bottom:1rem;grid-template:repeat(2,1fr)/repeat(3,1fr)}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.structure-elements{grid-template:repeat(4,1fr)/1fr}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .elements.cdk-drop-list-dragging .cdk-drag{transform:none!important}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body input{height:auto;border:none}::ng-deep .pb-builder-content .mat-tab-body-wrapper .mat-tab-body .custom-modules .drag-element img{max-width:100%}::ng-deep .pb-builder-container{position:relative;height:100%}::ng-deep .pb-builder-container mat-progress-bar{position:absolute}::ng-deep .pb-builder-container mat-toolbar{background-color:#fff}::ng-deep .pb-builder-options .mat-expansion-panel{box-shadow:none!important}::ng-deep .pb-builder-options .mat-expansion-panel.mat-expanded{overflow:visible}::ng-deep .pb-builder-options mat-expansion-panel-header:not(.mat-expanded){background:rgba(0,0,0,.04)}::ng-deep .pb-builder-options ::ng-deep .group{display:grid;grid-template:auto/repeat(2,1fr);grid-gap:1rem}::ng-deep .pb-builder-options ::ng-deep .group>*{align-self:center}::ng-deep .pb-builder-options ::ng-deep .group+.group{margin-top:1em}::ng-deep .pb-builder-options ::ng-deep .group.four{grid-template-columns:repeat(4,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.f-large{grid-template-columns:2fr 1fr}::ng-deep .pb-builder-options ::ng-deep .group.l-large{grid-template-columns:1fr 2fr}::ng-deep .pb-builder-options ::ng-deep .group.three{grid-template-columns:repeat(3,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-small{grid-template-columns:1fr repeat(2,2fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.f-large{grid-template-columns:2fr repeat(2,1fr)}::ng-deep .pb-builder-options ::ng-deep .group.three.l-large{grid-template-columns:repeat(2,1fr) 2fr}::ng-deep .pb-builder-options ::ng-deep .group .mat-form-field-infix{width:auto!important}::ng-deep .drag-element{text-align:center;border:1px solid #ccc;box-sizing:border-box;background:#fff;color:#7b7b7b;cursor:move;transition:box-shadow .3s ease-in-out;will-change:box-shadow;border-radius:3px}::ng-deep .drag-element.cdk-drag-disabled,::ng-deep .drag-element.cdk-drag-placeholder{cursor:not-allowed;opacity:.6}::ng-deep .drag-element:hover{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}::ng-deep .drag-element .mat-icon{font-size:40px!important;padding:.5rem;width:auto;height:auto}::ng-deep .drag-element img{max-width:100%}::ng-deep .drag-element-title{font-size:.9em;text-transform:uppercase;margin-bottom:.5rem}::ng-deep .drag-element.structure-element{height:60px;position:relative;padding:4px;display:grid;grid-template:1fr/1fr}::ng-deep .drag-element.structure-element>div{background:#ccc;border:4px solid #bbb}::ng-deep .drag-element.structure-element.cols_2{grid-template-columns:repeat(2,5fr)}::ng-deep .drag-element.structure-element.cols_3{grid-template-columns:repeat(3,3.33fr)}::ng-deep .drag-element.structure-element.cols_4{grid-template-columns:repeat(4,2.5fr)}::ng-deep .drag-element.structure-element.cols_12{grid-template-columns:6fr 4fr}::ng-deep .drag-element.structure-element.cols_21{grid-template-columns:4fr 6fr}::ng-deep .main-padding{padding:1rem}::ng-deep .cdk-drop-list-receiving>:not(.cdk-drag){opacity:.6}::ng-deep .cdk-drop-list-dragging>*{pointer-events:none}@keyframes drag-animation{0%{opacity:0;height:0}to{opacity:1}}::ng-deep .cdk-drag-animating{animation:drag-animation 1s cubic-bezier(0,0,.2,1) infinite}::ng-deep .cdk-drag-preview{border-radius:4px;box-shadow:0 0 0 2px rgba(63,81,181,.5);min-height:60px;min-width:100px;background-color:#fff}::ng-deep .cdk-drag.structure-element.cdk-drag-placeholder{box-shadow:0 0 1px 2px #ff4081;width:100%;pointer-events:none}']}]}],Ze.ctorParameters=function(){return[{type:Ge},{type:Fe},{type:Ne},{type:ze},{type:t.Renderer2},{type:Xe},{type:Ee},{type:t.ChangeDetectorRef},{type:Array,decorators:[{type:t.Inject,args:[Pe]}]},{type:Array,decorators:[{type:t.Inject,args:[Oe]}]},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:Document,decorators:[{type:t.Inject,args:[D.DOCUMENT]}]}]},Ze.propDecorators={email:[{type:t.Input}],emailChange:[{type:t.Output}]};var et=function(){function e(){}return e.prototype.ngOnInit=function(){},e}();et.decorators=[{type:t.Directive}],et.propDecorators={portal:[{type:t.ViewChild,args:[_.CdkPortal,{static:!0}]}]};var tt=function(e){function t(t,r,i){var l=e.call(this)||this;return l.userRestApi=t,l.emailObject=r,l.internalService=i,l.setAsReadOnly$=l.internalService.currentEditingBlock$.pipe(o.map((function(e){return e!==l.block}))),l.staticQuillConfig={toolbar:{container:[["bold","italic","underline","strike"],[{header:[1,2,3,4,5,6,!1]},{size:["small",!1,"large","huge"]}],[{align:[]},"link"],[{list:"ordered"},{list:"bullet"}],[{color:[]},{background:[]}],["clean"]],handlers:{placeholder:function(e){var t=this.quill.getSelection(),n=this.quill.getFormat(),o=this.quill.getText(t.index,t.length);this.quill.deleteText(t.index,o.length),this.quill.insertText(t.index,e,n),this.quill.setSelection(t.index,e.length)}}}},l.quillInit$=l.userRestApi.getAllUserMergeFields$.pipe(o.map((function(e){l.staticQuillConfig.toolbar.container.splice(-1,0,[{placeholder:e}])})),o.mapTo(!0),o.take(1)),l.textChanged$=new n.Subject,l.componentDestroyed$=new n.Subject,l}return z(t,e),t.prototype.getTextStyles=function(){var e=this.block.options,t=e.color,n=e.font,o=e.lineHeight,r=e.padding;return Object.assign(Object.assign(Object.assign({color:t,"word-break":"break-all"},ee(o)),Z(n)),Q(r))},t.prototype.contentChanged=function(){this.textChanged$.next()},t.prototype.ngOnInit=function(){var e=this;this.textChanged$.pipe(o.debounceTime(600),o.takeUntil(this.componentDestroyed$)).subscribe((function(){e.emailObject.markForCheck()}))},t.prototype.ngOnDestroy=function(){this.componentDestroyed$.next(),this.componentDestroyed$.complete()},t}(et);tt.decorators=[{type:t.Component,args:[{selector:"pb-text-element",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div [ngStyle]="getTextStyles()">\n  <quill-editor *ngIf="quillInit$ | async; else loadingModules" i18n-placeholder="text-element|placeholder"\n                placeholder="Insert text here ..." [modules]="staticQuillConfig" [readOnly]="setAsReadOnly$ |async"\n                [(ngModel)]="block.innerText" (onContentChanged)="contentChanged()">\n  </quill-editor>\n</div>\n\n<ng-template #loadingModules>\n  <span i18n="text-element|loading message">Please wait ...</span>\n</ng-template>\n',encapsulation:t.ViewEncapsulation.None,styles:['@charset "UTF-8";\n/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */\n/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:"•"}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:"☑"}.ql-editor ul[data-checked=false]>li:before{content:"☐"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:"";display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover{color:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble,.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:"";display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-stroke.ql-thin,.ql-bubble .ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-item:before,.ql-bubble .ql-picker.ql-header .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]:before{content:"Heading 1"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]:before{content:"Heading 2"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]:before{content:"Heading 3"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]:before{content:"Heading 4"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]:before{content:"Heading 5"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]:before{content:"Heading 6"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-item:before,.ql-bubble .ql-picker.ql-font .ql-picker-label:before{content:"Sans Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before{content:"Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before{content:"Monospace"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-item:before,.ql-bubble .ql-picker.ql-size .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before{content:"Small"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before{content:"Large"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before{content:"Huge"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"×";font-size:16px;font-weight:700}.ql-container.ql-bubble:not(.ql-disabled) a{position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:after,.ql-container.ql-bubble:not(.ql-disabled) a:before{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:hover:after,.ql-container.ql-bubble:not(.ql-disabled) a:hover:before{visibility:visible}quill-editor{display:block;word-break:break-word}quill-editor .ql-container{font-family:inherit;font-size:inherit}quill-editor .ql-container .ql-editor{padding:0!important;line-height:inherit;font:inherit;overflow:visible}quill-editor .ql-placeholder .ql-picker-label:before{display:block;content:"Tags";min-width:50px}quill-editor .ql-placeholder.ql-expanded .ql-picker-item:before{content:attr(data-value);width:-moz-min-content;width:min-content}quill-editor .ql-tooltip{z-index:10;line-height:normal}quill-editor .ql-tooltip .ql-picker-options{max-height:300px;overflow:auto}quill-editor .ql-toolbar{width:600px;width:-moz-max-content;width:max-content}quill-editor h1,quill-editor h2,quill-editor h3,quill-editor h4,quill-editor h5,quill-editor h6{font-weight:inherit;line-height:inherit}']}]}],tt.ctorParameters=function(){return[{type:Fe},{type:ze},{type:Ne}]};var nt=function(e){function t(t,n,o){var r=e.call(this)||this;return r.imageUploader=t,r.chRef=n,r.ngb=o,r}return z(t,e),Object.defineProperty(t.prototype,"align",{get:function(){return this.block.options.align},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"src",{get:function(){return this.block.src||"https://via.placeholder.com/600x200?text=CHANGE+ME"},enumerable:!1,configurable:!0}),t.prototype.uploadImage=function(){return R(this,void 0,void 0,(function(){var e;return U(this,(function(t){switch(t.label){case 0:return[4,this.imageUploader.browse$().toPromise()];case 1:return(e=t.sent())&&(this.block.src=e,this.chRef.markForCheck()),[2]}}))}))},t.prototype.getImageStyles=function(){var e=this.block.options,t=e.border,n=e.width,o=e.height,r=e.padding;return Object.assign(Object.assign({width:te(n),height:te(o)},Q(r)),K(t))},t}(et);nt.decorators=[{type:t.Component,args:[{selector:"pb-image",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n\x3c!-- <div\n  class="overflow"\n  *ngIf="(ngb.currentEditingBlock$ | async) !== block"\n  (click)="uploadImage()"\n>\n  <mat-icon inline>cloud_upload</mat-icon>\n</div> --\x3e\n<img [src]="src" [title]="block.options.title" [ngStyle]="getImageStyles()" />\n',styles:[":host{display:block;line-height:0}:host:hover .overflow{opacity:1}.overflow{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3);opacity:0;will-change:opacity;transition:opacity .3s cubic-bezier(.075,.82,.165,1);cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:3em}.overflow mat-icon{opacity:.8}img{max-width:100%;box-sizing:border-box}"]}]}],nt.ctorParameters=function(){return[{type:Ve},{type:t.ChangeDetectorRef},{type:Ge}]},nt.propDecorators={align:[{type:t.HostBinding,args:["style.textAlign"]}]};var ot=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getButtonStyles=function(){var e=this.block.options,t=e.backgroundColor,n=e.border,o=e.color,r=e.font,i=e.lineHeight,l=e.innerPadding,a=e.fullWidth;return Object.assign(Object.assign(Object.assign(Object.assign({color:o,width:a?"100%":"auto",backgroundColor:t},Z(r)),Q(l)),K(n)),ee(i))},t.prototype.getParentStyles=function(){var e=this.block.options,t=e.align,n=e.padding;return Object.assign({justifyContent:("center"===t?"center":"right"===t&&"flex-end")||"flex-start"},Q(n))},t}(et);ot.decorators=[{type:t.Component,args:[{selector:"pb-button",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout [ngStyle]="getParentStyles()">\n  <button type="button" [class.full-width]="block.options.fullWidth" [ngStyle]="getButtonStyles()">\n    {{ block.innerText }}\n  </button>\n</div>\n',encapsulation:t.ViewEncapsulation.Emulated,styles:["button{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]}]}];var rt=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getDividerStyles=function(){var e=this.block.options,t=e.border,n=e.padding;return Object.assign(Object.assign({},K(t,"borderTop")),Q(n,"margin"))},t.prototype.ngOnInit=function(){},t}(et);rt.decorators=[{type:t.Component,args:[{selector:"pb-divider",template:'<div [ngStyle]="getDividerStyles()"></div>',styles:["\n      :host {\n        display: table;\n        width: 100%;\n      }\n    "]}]}];var it=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),Object.defineProperty(t.prototype,"height",{get:function(){return te(this.block.options.height)},enumerable:!1,configurable:!0}),t}(et);it.decorators=[{type:t.Component,args:[{selector:"pb-spacer",template:"",styles:["\n      :host {\n        display: table;\n        width: 100%;\n        transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n      }\n    "]}]}],it.propDecorators={height:[{type:t.HostBinding,args:["style.height"]}]};var lt=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t.prototype.getParentStyles=function(){var e=this.block.options,t=e.color,n=e.font,o=e.lineHeight,r=e.padding;return Object.assign(Object.assign(Object.assign({color:t},ee(o)),Z(n)),Q(r))},t.prototype.getLabelStyles=function(){var e=this.block.options.innerPadding;return Object.assign(Object.assign({},Q(e)),{lineHeight:0})},t.prototype.getSocialListStyles=function(){var e=this.block.options.align;return{display:"flex",placeContent:("left"===e?"flex-start":"right"===e&&"flex-end")||e}},t.prototype.getSocialListClasses=function(){return"social-list "+this.block.options.mode},t.prototype.getSocialNetworkIcon=function(e){return oe(e+".png")},t}(et);lt.decorators=[{type:t.Component,args:[{selector:"pb-social",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<div fxLayout [ngStyle]="getParentStyles()">\n  <div [class]="getSocialListClasses()" [ngStyle]="getSocialListStyles()">\n    <ng-container *ngIf="block.networks.length; else noSocialNetworks">\n      <div class="social-list-item" *ngFor="let network of block.networks">\n        <div [ngStyle]="getLabelStyles()">\n          <img [src]="getSocialNetworkIcon(network.name)" [style.backgroundColor]="block.options.color" [width]="block.options.iconSize.value"\n            [height]="block.options.iconSize.value" [classList]="network.name" [alt]="network.name" />\n        </div>\n        <span *ngIf="network.label">{{ network.label }}</span>\n      </div>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #noSocialNetworks>\n  <p i18n="social block|Empty social list message">Please add some social networks.</p>\n</ng-template>\n',styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px;background-color:#000}"]}]}];var at=new Map,st=function(){function e(e,t){this.cResolver=e,this.viewContainerRef=t,at.set("text",tt),at.set("image",nt),at.set("button",ot),at.set("divider",rt),at.set("spacer",it),at.set("social",lt)}return Object.defineProperty(e.prototype,"pbDynamicComponent",{set:function(e){var t=this.cResolver.resolveComponentFactory(at.get(e.type));this.viewContainerRef.createComponent(t).instance.block=e},enumerable:!1,configurable:!0}),e}();st.decorators=[{type:t.Directive,args:[{selector:"[pbDynamicComponent]"}]}],st.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ViewContainerRef}]},st.propDecorators={pbDynamicComponent:[{type:t.Input}]};var ct=function(){function e(e,t,n,o,r,i,l){var a;this.userInterfaceService=e,this.emailObjectStore=t,this.userRestApi=n,this.pbStorage=o,this.pbMiddlewaresService=r,this.sanitizer=i,this.userConfig=l,this.showTemplateList=null===(a=this.userConfig.templateListIfEmpty)||void 0===a||a,this.getStructures$=this.emailObjectStore.emailStructuresAsObservable$,this.activeMatProgress$=this.userInterfaceService.activeMatProgress$}return e.prototype.onHostClick=function(){this.userInterfaceService.editGeneralSettings()},e.prototype.trackBy=function(e){return e.id},e.prototype.disableStructureDrag$=function(e){return this.pbMiddlewaresService.disableStructureDragWithinEmailBody(e).pipe(o.take(1))},e.prototype.openTemplateDialog=function(e){var t=this;e.stopImmediatePropagation(),this.userInterfaceService.activeMatProgress$.next(!0);var r=this.pbStorage.getCachedTemplateList();return n.iif((function(){return r.length>0}),re(r),this.userRestApi.getAllUserTemplates$.pipe(o.tap((function(e){return t.pbStorage.cacheTemplateList(e)})))).pipe(o.map((function(e){return G(e,[{category:"latest",templates:t.pbStorage.getLatestUsedTemplates()}])})),o.finalize((function(){return t.userInterfaceService.activeMatProgress$.next(!1)})),o.exhaustMap((function(e){return(null==e?void 0:e.length)>0?t.userInterfaceService.templatesListDialog$(e):n.throwError(new Error("The template list is empty"))})),o.switchMap((function(e){var n=e.category,o=e.template;return t.pbMiddlewaresService.chooseTemplate(n,o)})),o.exhaustMap((function(e){var n=e.category,r=e.template;return t.userRestApi.getUserTemplateData$(n,r).pipe(o.tap((function(e){"latest"!==n&&t.pbStorage.addTemplateToLatestUsed(e)})))})),o.catchError((function(e){return t.pbMiddlewaresService.catchError(e).pipe(o.switchMap((function(){return t.userInterfaceService.notify(e.message),n.EMPTY})))})),o.take(1)).subscribe((function(e){e?t.emailObjectStore.setEmail(new _e(e.templateData)):t.userInterfaceService.notify("No template was chosen")}))},e.prototype.dropNewStructure=function(e){var t=this;e.previousContainer===e.container?this.emailObjectStore.changeStructureOrder(e):this.pbMiddlewaresService.addStructure(e).pipe(o.tap((function(e){return t.emailObjectStore.addStructure(e)})),o.take(1)).subscribe()},e.prototype.getStructureStyles=function(e){var t=e.options,n=t.border,o=t.background,r=t.padding,i=t.margin,l=t.columnsWidth,a=t.fullWidth;return Object.assign(Object.assign(Object.assign({width:a?"100%":this.emailObjectStore.Email.general.width.value+"px",backgroundRepeat:o.repeat,backgroundColor:o.color,backgroundSize:te(o.size),backgroundPosition:"top center",gridTemplateColumns:l.map((function(e){return e+"fr"})).join(" ")},K(n)),Q(r)),X(i))},e.prototype.getBackgroundImage=function(e){var t=e.options.background.url;return this.sanitizer.bypassSecurityTrustStyle(t&&"url("+t+")")},e}();ct.decorators=[{type:t.Component,args:[{selector:"pb-builder-container",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="getStructures$ | async as structures">\n  <div cdkDropList [cdkDropListData]="structures"\n       cdkDropListConnectedTo="structures-drop-list" id="structures-drop-list"\n       (cdkDropListDropped)="dropNewStructure($event)" fxFlex fxLayout="column" fxLayoutAlign="start center">\n    <pb-structure cdkDrag\n                  *ngFor="let structure of structures; trackBy: trackBy; let index = index" [id]="structure.id"\n                  [index]="index" [ngClass]="structure.type" [structure]="structure"\n                  [ngStyle]="getStructureStyles(structure)"\n                  [style.backgroundImage]="getBackgroundImage(structure)"\n                  [cdkDragDisabled]="disableStructureDrag$(structure) | async">\n      <button cdkDragHandle mat-icon-button class="move" *ngIf="!(disableStructureDrag$(structure) | async)"\n              i18n-matTooltip="structure|Move Structure" matTooltip="Move Structure">\n        <mat-icon i18n-aria-label="structure|Move Structure" aria-label="Move structure" inline>pan_tool</mat-icon>\n      </button>\n    </pb-structure>\n\n    <div class="empty-email mat-typography" *ngIf="!structures.length">\n      <ng-content></ng-content>\n      <div class="default-empty-email" *ngIf="showTemplateList">\n        <h1 i18n="templates|First header">Choose template from list</h1>\n        <p i18n="templates|Description">Or create one from scratch by dragging structures and blocks here!</p>\n        <button type="button" color="primary" [disabled]="activeMatProgress$ | async"\n                (click)="openTemplateDialog($event)" mat-flat-button i18n="templates|Choose a template button">\n          Choose template\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n',providers:[],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */pb-structure>.cdk-drag-handle{position:absolute;cursor:move;border-radius:50% 50% 0 0;height:30px;width:30px;font-size:smaller;line-height:0;top:-30px;right:0;background-color:#ff4081;color:#fff;opacity:0}pb-structure.cdk-drag-preview>.cdk-drag-handle,pb-structure:hover>.cdk-drag-handle{opacity:.8}pb-structure.cdk-drag-preview>.cdk-drag-handle:hover,pb-structure:hover>.cdk-drag-handle:hover{opacity:1}pb-structure ::ng-deep .cdk-drag-placeholder{background-color:#3f51b5;opacity:.6;cursor:move;border-radius:0}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep :not(mat-icon){display:none}pb-structure ::ng-deep .cdk-drag-placeholder ::ng-deep mat-icon{padding:5px;color:#fff}:host{background-color:#f2f2f2;overflow-x:hidden;overflow-y:auto;position:relative;height:100%}:host #structures-drop-list{height:-moz-fit-content;height:fit-content;max-width:100%;padding-bottom:3rem;will-change:box-shadow}:host #structures-drop-list .empty-email{display:flex;justify-content:center;align-items:center;flex-direction:column;flex:1 1 100%;margin-top:10%}:host #structures-drop-list .empty-email .default-empty-email{text-align:center}:host #structures-drop-list.cdk-drop-list-dragging .empty-email{display:none}"]}]}],ct.ctorParameters=function(){return[{type:Ne},{type:ze},{type:Fe},{type:Ae},{type:Ee},{type:c.DomSanitizer},{type:void 0,decorators:[{type:t.Inject,args:[Me]}]}]},ct.propDecorators={onHostClick:[{type:t.HostListener,args:["click"]}]};var pt,ut,dt,mt=function(){function e(e,t,n){var o=this;this.pbEmailObject=e,this.fallbackFonts=n,this.fontsMap=new Map,this.stylesMap=new Map([["normal",$localize(pt||(pt=W([":@@font_style_normal:Normal"],[":@@font_style_normal:Normal"])))],["italic",$localize(ut||(ut=W([":@@font_style_italic:Italic"],[":@@font_style_italic:Italic"])))],["oblique",$localize(dt||(dt=W([":@@font_style_oblique:Oblique"],[":@@font_style_oblique:Oblique"])))]]),t.forEach((function(e){var t=N(e.match(/[^\d:,]{2,}|\d{3}/g)),n=t[0],r=t.slice(1);o.fontsMap.set(n.replace("+"," "),G(new Set(r.map(Number))))}))}return Object.defineProperty(e.prototype,"fontWeightList",{get:function(){return this.isGoogleFont()?this.fontsMap.get(this.font.family):[100,400,500,700,900]},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"fontFamilyList",{get:function(){return G(this.fontsMap.keys(),this.fallbackFonts)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"styles",{get:function(){return G(this.stylesMap.keys())},enumerable:!1,configurable:!0}),e.prototype.markForCheck=function(){this.pbEmailObject.markForCheck()},e.prototype.isGoogleFont=function(){return this.fontsMap.has(this.font.family)},e.prototype.getStyleLabel=function(e){return this.stylesMap.get(e)},e.prototype.hasProperty=function(e){return this.font.hasOwnProperty(e)},e}();mt.decorators=[{type:t.Component,args:[{selector:"pb-font-styles",template:'\n    <div class="group two">\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'family\')">\n        <mat-label i18n="settings|Font Family">Family</mat-label>\n        <mat-select [(value)]="font.family" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let name of fontFamilyList" [ngStyle]="{ fontFamily: name }" [value]="name">\n            {{ name }}\n          </mat-option>\n        </mat-select>\n        <mat-hint *ngIf="isGoogleFont()" i18n="settings|Partial support">Partial support.</mat-hint>\n        <mat-hint *ngIf="!isGoogleFont()" i18n="settings|Full support">Full support.</mat-hint>\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'fallback\')">\n        <mat-label i18n="settings|Font Fallback">Fallback</mat-label>\n        <mat-select [(value)]="font.fallback" [disabled]="!isGoogleFont()" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let name of fallbackFonts" [ngStyle]="{ fontFamily: name }" [value]="name">\n            {{ name }}\n          </mat-option>\n        </mat-select>\n        <mat-hint i18n="settings|Full support">Full support.</mat-hint>\n      </mat-form-field>\n    </div>\n\n    <div class="group three">\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'size\')">\n        <mat-label i18n="settings|Font Size">Size</mat-label>\n        <input matInput type="number" max="30" min="10" step="1" (input)="markForCheck()" [(ngModel)]="font.size" />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasProperty(\'weight\')">\n        <mat-label i18n="settings|Font Weight">Weight</mat-label>\n        <mat-select placeholder="Weight" [(value)]="font.weight" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let weight of fontWeightList" [value]="weight">\n            {{ weight }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance="outline" style="min-width: 90px;">\n        <mat-label i18n="settings|Font Style">Style</mat-label>\n        <mat-select placeholder="Style" [(value)]="font.style" disableRipple (selectionChange)="markForCheck()">\n          <mat-option *ngFor="let style of styles" [value]="style" i18n>\n            {{ getStyleLabel(style) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],mt.ctorParameters=function(){return[{type:ze},{type:Array,decorators:[{type:t.Inject,args:[we]}]},{type:Array,decorators:[{type:t.Inject,args:[Ce]}]}]},mt.propDecorators={font:[{type:t.Input}]};var bt=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();bt.decorators=[{type:t.Component,args:[{selector:"pb-padding",template:'\n    <div class="group four">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Top">Top</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.top" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Right">Right</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.right" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Bottom">Bottom</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.bottom" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Padding Settings|Padding Left">Left</mat-label>\n        <input matInput type="number" min="0" step="1" (input)="markForCheck()" [(ngModel)]="padding.left" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],bt.ctorParameters=function(){return[{type:ze}]},bt.propDecorators={padding:[{type:t.Input}]};var gt,ht,ft,yt,kt=function(){function e(e){this.emailObject=e,this.label=$localize(gt||(gt=W([":@@line_height_label:Line Height"],[":@@line_height_label:Line Height"]))),this.units=["%","px","none"],this.unitsLabels=new Map([["%",$localize(ht||(ht=W([":@@unit_percent:Percent"],[":@@unit_percent:Percent"])))],["px",$localize(ft||(ft=W([":@@unit_pixels:Pixels"],[":@@unit_pixels:Pixels"])))],["none",$localize(yt||(yt=W([":@@unit_none:None"],[":@@unit_none:None"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getUnitLabel=function(e){return this.unitsLabels.get(e)},e}();kt.decorators=[{type:t.Component,args:[{selector:"pb-line-height",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label>{{ label }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]="lineHeight.value"\n          type="number"\n          step="1"\n          (input)="markForCheck()"\n          [disabled]="lineHeight.unit === \'none\'"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Line Height Settings|Change Line Height Unit">Unit</mat-label>\n        <mat-select placeholder="Unit" [(value)]="lineHeight.unit" (selectionChange)="markForCheck()" disableRipple>\n          <mat-option *ngFor="let unit of units" [value]="unit" i18n>\n            {{ getUnitLabel(unit) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],kt.ctorParameters=function(){return[{type:ze}]},kt.propDecorators={lineHeight:[{type:t.Input}],label:[{type:t.Input}],units:[{type:t.Input}]};var vt,qt,xt,wt,St=function(){function e(e){this.emailObject=e,this.disabled=!1,this.units=new Map([["%",$localize(vt||(vt=W([":@@unit_percent:Percent"],[":@@unit_percent:Percent"])))],["px",$localize(qt||(qt=W([":@@unit_pixels:Pixels"],[":@@unit_pixels:Pixels"])))],["contain",$localize(xt||(xt=W([":@@unit_contain:Contain"],[":@@unit_contain:Contain"])))],["cover",$localize(wt||(wt=W([":@@unit_cover:Cover"],[":@@unit_cover:Cover"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getLabel=function(){return this.label},e.prototype.toggleChange=function(e){var t=e.checked;this.model.auto=t,this.markForCheck()},e.prototype.getUnits=function(){return this.model.units||["%","px"]},e.prototype.disableValueField=function(){return this.model.auto||-1===["%","px"].indexOf(this.model.unit)},e.prototype.showAutoSlider=function(){return this.model.hasOwnProperty("auto")},e.prototype.getUnitLabel=function(e){return this.units.get(e)},e}();St.decorators=[{type:t.Component,args:[{selector:"pb-width-height",template:'\n    <div class="group" [ngClass]="{ three: showAutoSlider() }">\n      <mat-form-field appearance="outline">\n        <mat-label>{{ getLabel() }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]="model.value"\n          [disabled]="disableValueField() || disabled"\n          type="number"\n          [placeholder]="getLabel()"\n          (input)="markForCheck()"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Size Settings|Size Unit">Unit</mat-label>\n        <mat-select [disabled]="model.auto || disabled" [(value)]="model.unit" (selectionChange)="markForCheck()" disableRipple>\n          <mat-option *ngFor="let unit of getUnits()" [value]="unit" i18n>\n            {{ getUnitLabel(unit) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-slide-toggle\n        style="margin-top: -20px;"\n        *ngIf="showAutoSlider()"\n        [checked]="model.auto"\n        (change)="toggleChange($event)"\n        [disabled]="disabled"\n        i18n="Size Settings|Size Auto"\n      >\n        Auto\n      </mat-slide-toggle>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],St.ctorParameters=function(){return[{type:ze}]},St.propDecorators={model:[{type:t.Input}],label:[{type:t.Input}],disabled:[{type:t.Input}]};var Ct,It,Pt,Tt,Ot,Dt=function(){function e(e){this.emailObject=e,this._styleLabels=new Map([["solid",$localize(Ct||(Ct=W([":@@border_style_solid:Solid"],[":@@border_style_solid:Solid"])))],["dotted",$localize(It||(It=W([":@@border_style_dotted:Dotted"],[":@@border_style_dotted:Dotted"])))],["dashed",$localize(Pt||(Pt=W([":@@border_style_dashed:Dashed"],[":@@border_style_dashed:Dashed"])))],["double",$localize(Tt||(Tt=W([":@@border_style_double:Double"],[":@@border_style_double:Double"])))],["groove",$localize(Ot||(Ot=W([":@@border_style_groove:Groove"],[":@@border_style_groove:Groove"])))]])}return Object.defineProperty(e.prototype,"styleLabels",{get:function(){return G(this._styleLabels.keys())},enumerable:!1,configurable:!0}),e.prototype.getStyleLabel=function(e){return this._styleLabels.get(e)},e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.isEven=function(){return Object.keys(this.border).length%2==0},e.prototype.hasOwnProperty=function(e){return this.border.hasOwnProperty(e)},e}();Dt.decorators=[{type:t.Component,args:[{selector:"pb-border",template:'\n    <div class="group" [class.three]="isEven()">\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'width\')">\n        <mat-label i18n="Border Settings|Change Border Width">Width</mat-label>\n        <input\n          matInput\n          [(ngModel)]="border.width"\n          type="number"\n          min="0"\n          step="1"\n          (input)="markForCheck()"\n          i18n-placeholder\n          placeholder="Border Settings|Change Border Width"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'radius\')">\n        <mat-label i18n="Border Settings|Change Border Radius">Radius</mat-label>\n        <input\n          matInput\n          [(ngModel)]="border.radius"\n          type="number"\n          min="0"\n          step="1"\n          (input)="markForCheck()"\n          i18n-placeholder\n          placeholder="Border Settings|Change Border Radius"\n        />\n      </mat-form-field>\n      <mat-form-field appearance="outline" *ngIf="hasOwnProperty(\'style\')" style="min-width: 90px">\n        <mat-label i18n="Border Settings|Change Border Style">Style</mat-label>\n        <mat-select\n          placeholder="Style"\n          [disabled]="!border.width"\n          [(value)]="border.style"\n          (selectionChange)="markForCheck()"\n          disableRipple\n        >\n          <mat-option *ngFor="let style of styleLabels" [value]="style">\n            {{ getStyleLabel(style) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n    <pb-color [options]="border" [disabled]="!border.width" *ngIf="hasOwnProperty(\'color\')" key="color"></pb-color>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Dt.ctorParameters=function(){return[{type:ze}]},Dt.propDecorators={border:[{type:t.Input}]};var Mt=function(){function e(e){this.emailObject=e,this.disabled=!1,this.key="backgroundColor",this.transparent=!1,this.showColorPicker=!1}return Object.defineProperty(e.prototype,"currentColorModel",{get:function(){return this.options[this.key]},set:function(e){this.options[this.key]=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"currentColor",{get:function(){return this.transparent?this.oldValue:this.currentColorModel},set:function(e){this.currentColorModel=e},enumerable:!1,configurable:!0}),e.prototype.onHostMouseLeave=function(){this.showColorPicker=!1},e.prototype.changeColor=function(e){this.currentColor=e.color.hex,this.emailObject.markForCheck()},e.prototype.makeTransparentColor=function(){this.showColorPicker=!1,this.transparent?(this.oldValue=this.currentColorModel,this.currentColor="transparent"):this.currentColor=this.oldValue,this.emailObject.markForCheck()},e.prototype.ngOnInit=function(){"transparent"===this.currentColor&&(this.transparent=!0,this.oldValue="#ffffff")},e}();Mt.decorators=[{type:t.Component,args:[{selector:"pb-color",template:'\n    <div class="group" *ngIf="showTransparent">\n      <mat-slide-toggle\n        [disabled]="disabled"\n        [(ngModel)]="transparent"\n        (change)="makeTransparentColor()"\n        i18n="Color settings|Make color transparent"\n      >\n        Transparent\n      </mat-slide-toggle>\n    </div>\n    <div class="group two">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Color settings|Change color">Color</mat-label>\n        <input matInput [disabled]="transparent || disabled" (focus)="showColorPicker = false" [(ngModel)]="currentColor" type="text" />\n      </mat-form-field>\n      <div class="choose-color" [class.transparent]="transparent || disabled">\n        <div class="current-color" (mouseover)="showColorPicker = !transparent" [style.backgroundColor]="currentColor"></div>\n        <color-chrome\n          [disableAlpha]="true"\n          *ngIf="showColorPicker"\n          (onChangeComplete)="changeColor($event)"\n          [color]="currentColor"\n        ></color-chrome>\n      </div>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n\n      .choose-color {\n        display: block;\n        height: 100%;\n        width: 100%;\n      }\n\n      .current-color {\n        width: 100%;\n        height: 48px;\n        border-radius: 5px;\n        margin: 0.25em 0;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: 1px solid rgba(0, 0, 0, 0.12);\n        transition: background-color 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);\n      }\n\n      .choose-color.transparent .current-color {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      color-chrome {\n        position: absolute;\n        top: calc(100% - 1em);\n        right: 0;\n        z-index: 9;\n      }\n    "]}]}],Mt.ctorParameters=function(){return[{type:ze}]},Mt.propDecorators={options:[{type:t.Input}],showTransparent:[{type:t.Input}],disabled:[{type:t.Input}],key:[{type:t.Input}],onHostMouseLeave:[{type:t.HostListener,args:["mouseleave"]}]};var jt,Lt,Bt,_t,Et=function(){function e(e){this.emailObject=e,this.targetLabels=new Map([["_blank",$localize(jt||(jt=W([":@@link_target_blank:Blank"],[":@@link_target_blank:Blank"])))],["_self",$localize(Lt||(Lt=W([":@@link_target_self:Self"],[":@@link_target_self:Self"])))],["_parent",$localize(Bt||(Bt=W([":@@link_target_parent:Parent"],[":@@link_target_parent:Parent"])))],["_top",$localize(_t||(_t=W([":@@link_target_top:Top"],[":@@link_target_top:Top"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getTargets=function(){return["_blank","_self","_parent","_top"]},e.prototype.getTargetLabel=function(e){return this.targetLabels.get(e)},e}();Et.decorators=[{type:t.Component,args:[{selector:"pb-link",template:'\n    <div class="group f-large">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Link Settings|Link">Link</mat-label>\n        <input matInput [(ngModel)]="link.href" type="url" placeholder="Link" (blur)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Link Settings|Target">Target</mat-label>\n        <mat-select\n          placeholder="Target"\n          i18n-placeholder="Link Settings|Target"\n          [(value)]="link.target"\n          disableRipple\n          (selectionChange)="markForCheck()"\n        >\n          <mat-option *ngFor="let target of getTargets()" [value]="target">\n            {{ getTargetLabel(target) }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],Et.ctorParameters=function(){return[{type:ze}]},Et.propDecorators={link:[{type:t.Input}]};var $t,Ft,At,zt,Rt,Ut,Ht=function(){function e(e){this.emailObject=e,this.mode="horizontal",this.labels=new Map([["left",$localize($t||($t=W([":@@horizontal_align_left:Left"],[":@@horizontal_align_left:Left"])))],["center",$localize(Ft||(Ft=W([":@@horizontal_align_center:Center"],[":@@horizontal_align_center:Center"])))],["right",$localize(At||(At=W([":@@horizontal_align_right:Right"],[":@@horizontal_align_right:Right"])))],["top",$localize(zt||(zt=W([":@@vertical_align_top:Top"],[":@@vertical_align_top:Top"])))],["middle",$localize(Rt||(Rt=W([":@@vertical_align_middle:Middle"],[":@@vertical_align_middle:Middle"])))],["bottom",$localize(Ut||(Ut=W([":@@vertical_align_bottom:Bottom"],[":@@vertical_align_bottom:Bottom"])))]])}return Object.defineProperty(e.prototype,"currentModel",{get:function(){return this.model.align||this.model.verticalAlign},set:function(e){this.model.align?this.model.align=e:this.model.verticalAlign=e,this.emailObject.markForCheck()},enumerable:!1,configurable:!0}),e.prototype.getLabel=function(e){return this.labels.get(e)},e.prototype.getPositions=function(){return"vertical"===this.mode?["top","middle","bottom"]:["left","center","right"]},e}();Ht.decorators=[{type:t.Component,args:[{selector:"pb-align",template:'\n    <mat-form-field appearance="outline">\n      <mat-label [ngSwitch]="mode">\n        <ng-container *ngSwitchCase="\'vertical\'" i18n="Align Settings|Vertical Align">Vertical Align</ng-container>\n        <ng-container *ngSwitchDefault i18n="Align Settings|Align">Align</ng-container>\n      </mat-label>\n      <mat-select [(ngModel)]="currentModel" disableRipple [disabled]="disabled">\n        <mat-option *ngFor="let position of getPositions()" [value]="position">\n          {{ getLabel(position) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Ht.ctorParameters=function(){return[{type:ze}]},Ht.propDecorators={model:[{type:t.Input}],mode:[{type:t.Input}],disabled:[{type:t.Input}]};var Nt,Gt,Wt=function(){function e(e){this.emailObject=e,this.dirLabels=new Map([["ltr",$localize(Nt||(Nt=W([":@@direction_ltr:Left to right"],[":@@direction_ltr:Left to right"])))],["rtl",$localize(Gt||(Gt=W([":@@direction_rtl:Right to left"],[":@@direction_rtl:Right to left"])))]])}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.getDirections=function(){return["ltr","rtl"]},e.prototype.getDirectionLabel=function(e){return this.dirLabels.get(e)},e}();Wt.decorators=[{type:t.Component,args:[{selector:"pb-direction",template:'\n    <mat-form-field appearance="outline">\n      <mat-label i18n="settings|Direction">Direction</mat-label>\n      <mat-select\n        i18n-placeholder="settings|Direction"\n        placeholder="Direction"\n        [(value)]="model.direction"\n        (selectionChange)="markForCheck()"\n        disableRipple\n      >\n        <mat-option *ngFor="let dir of getDirections()" [value]="dir">\n          {{ getDirectionLabel(dir) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Wt.ctorParameters=function(){return[{type:ze}]},Wt.propDecorators={model:[{type:t.Input}]};var Vt,Jt,Yt,Kt,Qt,Xt,Zt=function(){function e(){this.disabled=!1,this.repeatLabels=new Map([["no-repeat",$localize(Vt||(Vt=W([":@@no_repeat:No"],[":@@no_repeat:No"])))],["repeat",$localize(Jt||(Jt=W([":@@repeat:Repeat"],[":@@repeat:Repeat"])))],["repeat-x",$localize(Yt||(Yt=W([":@@repeat_x:X"],[":@@repeat_x:X"])))],["repeat-y",$localize(Kt||(Kt=W([":@@repeat_y:Y"],[":@@repeat_y:Y"])))],["round",$localize(Qt||(Qt=W([":@@repeat_round:Round"],[":@@repeat_round:Round"])))],["space",$localize(Xt||(Xt=W([":@@repeat_space:Space"],[":@@repeat_space:Space"])))]])}return e.prototype.getRepeats=function(){return["no-repeat","repeat","repeat-x","repeat-y"]},e.prototype.getRepeatLabel=function(e){return this.repeatLabels.get(e)},e}();Zt.decorators=[{type:t.Component,args:[{selector:"pb-back-repeat",template:'\n    <mat-form-field appearance="outline">\n      <mat-label i18n="settings|Background Repeat">Repeat</mat-label>\n      <mat-select [(value)]="model.repeat" [disabled]="disabled" disableRipple>\n        <mat-option *ngFor="let repeat of getRepeats()" [value]="repeat">\n          {{ getRepeatLabel(repeat) }}\n        </mat-option>\n      </mat-select>\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n\n      mat-form-field {\n        width: 100%;\n      }\n    "]}]}],Zt.propDecorators={model:[{type:t.Input}],disabled:[{type:t.Input}]};var en=new Map([["desktop","1 1 100%"],["smartphone","1 1 360px"],["tablet","1 1 768px"]]),tn=function(){function e(e,t){this.middlewares=e,this.sanitizer=t,this.device="desktop"}return e.prototype.changeDevice=function(e){var t=this;return this.middlewares.togglePreviewDevice(e).pipe(o.take(1)).subscribe((function(e){t.device=e}))},e.prototype.getFlexWidth=function(){return en.get(this.device)},e.prototype.ngOnInit=function(){this.src=URL.createObjectURL(new Blob([this.template],{type:"text/html"})),this.templateSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src)},e.prototype.ngOnDestroy=function(){this.src&&URL.revokeObjectURL(this.src)},e}();tn.decorators=[{type:t.Component,args:[{selector:"pb-preview-template",template:'\n    <iframe [src]="templateSrc" [fxFlex]="getFlexWidth()"></iframe>\n    <mat-button-toggle-group value="desktop" (change)="changeDevice($event)" vertical>\n      <mat-button-toggle value="desktop" matTooltip="Desktop / 100%" matTooltipPosition="left">\n        <mat-icon>desktop_windows</mat-icon>\n      </mat-button-toggle>\n      <mat-button-toggle value="tablet" matTooltip="Tablet / 768px" matTooltipPosition="left">\n        <mat-icon>tablet</mat-icon>\n      </mat-button-toggle>\n      <mat-button-toggle value="smartphone" matTooltip="Smartphone / 360px" matTooltipPosition="left">\n        <mat-icon>smartphone</mat-icon>\n      </mat-button-toggle>\n    </mat-button-toggle-group>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      iframe {\n        border: 0;\n        will-change: width;\n        transition: all 500ms ease-in-out;\n      }\n\n      /* iframe a[href] {\n        pointer-events: none;\n      } */\n\n      /* iframe.active {\n        opacity: 1;\n      } */\n\n      mat-button-toggle-group {\n        position: absolute;\n        right: 0;\n        background: white;\n      }\n    "]}]}],tn.ctorParameters=function(){return[{type:Ee},{type:c.DomSanitizer}]},tn.propDecorators={template:[{type:t.Input}]};var nn=function(){function e(e,t,o,r){this.pbMiddlewaresService=e,this.userInterfaceService=t,this.emailObjectStore=o,this.chRef=r,this.isActive=!1,this.componentIsDestroyed$=new n.Subject}return e.prototype.onHostClick=function(e){e.stopImmediatePropagation(),this.editBlock()},Object.defineProperty(e.prototype,"isBlockActive",{get:function(){return this.isActive},enumerable:!1,configurable:!0}),e.prototype.removeBlock=function(){var e=this;this.pbMiddlewaresService.removeBlock(this.index,this.column,this.block).pipe(o.exhaustMap((function(){return e.userInterfaceService.confirmDialog$()})),o.filter((function(e){return e})),o.take(1)).subscribe((function(){e.emailObjectStore.removeBlock(e.index,e.column)}))},e.prototype.duplicateBlock=function(){var e=this;this.pbMiddlewaresService.duplicateBlock(this.index,this.column,this.block).pipe(o.map((function(t){return e.emailObjectStore.duplicateBlock(t.index,t.column,t.block)})),o.take(1)).subscribe((function(){}))},e.prototype.editBlock=function(){var e=this;this.pbMiddlewaresService.editBlock(this.block).pipe(o.take(1)).subscribe((function(t){e.userInterfaceService.editBlock(t)}))},e.prototype.ngOnInit=function(){var e=this;this.userInterfaceService.currentEditingBlock$.pipe(o.map((function(t){return t===e.block})),o.takeUntil(this.componentIsDestroyed$)).subscribe((function(t){e.isActive=t}))},e.prototype.ngDoCheck=function(){this.isActive&&this.chRef.markForCheck()},e.prototype.ngOnDestroy=function(){this.componentIsDestroyed$.next(""),this.componentIsDestroyed$.complete()},e}();nn.decorators=[{type:t.Component,args:[{selector:"pb-block",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-content select=".move"></ng-content>\n<div class="tools" fxLayout fxLayoutGap="0.25rem">\n  <button mat-icon-button (click)="duplicateBlock()" i18n-matTooltip="block|Duplicate Block"\n    matTooltip="Duplicate Block">\n    <mat-icon i18n-aria-label="block|Duplicate Block" aria-label="Duplicate block" inline>file_copy</mat-icon>\n  </button>\n  <button mat-icon-button (click)="removeBlock()" i18n-matTooltip="block|Remove Block" class="delete"\n    matTooltip="Remove Block">\n    <mat-icon i18n-aria-label="block|Remove Block" aria-label="Delete block" inline>delete_forever</mat-icon>\n  </button>\n</div>\n<ng-content *pbDynamicComponent="block"></ng-content>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block;position:relative}:host.active:not(.cdk-drag-preview)>.tools{opacity:1;display:flex!important}:host.active,:host.cdk-drag-placeholder,:host.cdk-drag-preview{z-index:3;box-shadow:0 0 0 2px #3f51b5}:host:hover:not(.active){box-shadow:0 0 0 2px rgba(63,81,181,.5)}:host>.tools{direction:ltr;opacity:0;z-index:4;position:absolute;max-width:100%;bottom:-25px;right:0;display:none!important;transition:all .5s ease-in-out}:host>.tools>button{background:#3f51b5;border-radius:3px;color:#fff;line-height:0;width:25px;height:25px}:host>.tools>button mat-icon{font-size:14px;margin-top:-3px}:host>.tools ::ng-deep+*>*{transition:all .5s cubic-bezier(.445,.05,.55,.95)}"]}]}],nn.ctorParameters=function(){return[{type:Ee},{type:Ne},{type:ze},{type:t.ChangeDetectorRef}]},nn.propDecorators={block:[{type:t.Input}],column:[{type:t.Input}],index:[{type:t.Input}],onHostClick:[{type:t.HostListener,args:["click",["$event"]]}],isBlockActive:[{type:t.HostBinding,args:["class.active"]}]};var on=function(){function e(e,t){this.imageUpload=e,this.emailObject=t,this.key="src",this.browsing=new n.Subject}return Object.defineProperty(e.prototype,"source",{get:function(){return this.block[this.key]},set:function(e){this.block[this.key]=e},enumerable:!1,configurable:!0}),e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.browse=function(){return R(this,void 0,void 0,(function(){var e;return U(this,(function(t){switch(t.label){case 0:this.browsing.next(!0),t.label=1;case 1:return t.trys.push([1,,3,4]),[4,this.imageUpload.browse$().toPromise()];case 2:return(e=t.sent())&&(this.source=e,this.emailObject.markForCheck()),[3,4];case 3:return this.browsing.next(!1),[7];case 4:return[2]}}))}))},e.prototype.ngOnInit=function(){this.source=this.block.src||this.block.url},e}();on.decorators=[{type:t.Component,args:[{selector:"pb-image-upload",template:'\n    <div fxLayout fxLayoutAlign="space-between center">\n      <div class="image-info" [fxFlex]="source ? \'30%\' : \'60%\'" fxLayout fxLayoutGap="0.5em" fxLayoutAlign="center center">\n        <div *ngIf="source" class="chose-image">\n          <img [src]="source" alt="image source" />\n        </div>\n        <span *ngIf="!source" style="width: 100%;" i18n="Upload Image Settings|Upload an image"> Upload an image </span>\n      </div>\n      <button\n        type="button"\n        (click)="browse()"\n        [disabled]="browsing | async"\n        color="primary"\n        mat-stroked-button\n        i18n="Upload Image Settings|Browse"\n      >\n        Browse\n      </button>\n    </div>\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="Upload Image Settings|Image Source">Image Source</mat-label>\n      <input matInput [(ngModel)]="source" type="url" (input)="markForCheck()" />\n    </mat-form-field>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n      }\n\n      .chose-image {\n        width: 100%;\n        max-height: 60px;\n        overflow: hidden;\n        border-radius: 3px;\n        line-height: 0;\n      }\n\n      .chose-image img {\n        width: 100%;\n        height: 60px;\n        object-fit: cover;\n        object-position: center;\n      }\n\n      .size {\n        font-size: 80%;\n        color: #ccc;\n      }\n\n      mat-form-field {\n        margin-top: 0.5rem;\n      }\n    "]}]}],on.ctorParameters=function(){return[{type:Ve},{type:ze}]},on.propDecorators={block:[{type:t.Input}],key:[{type:t.Input}]};var rn=function(){function e(e,t,n){this.internalService=e,this.emailObject=t,this.networks=n,this.block$=this.internalService.currentEditingBlock$}return e.prototype.hasProperty=function(e,t){return e.hasOwnProperty(t)},e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e.prototype.socialNetworks=function(e){return this.networks.filter((function(t){return!e.networks.find((function(e){return e.name===t}))})).sort()},e.prototype.addSocialNetwork=function(e,t){var n=e.value,o=e.source;t.networks.push({name:n,href:"",label:""}),o.value="",this.markForCheck()},e.prototype.removeSocialNetwork=function(e,t){t.networks=t.networks.filter((function(t){return t!==e})),this.markForCheck()},e.prototype.getSocialIcon=function(e){return oe(e+".png")},e}();rn.decorators=[{type:t.Component,args:[{selector:"pb-block-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="block$ | async as currentBlock">\n  <mat-accordion>\n    <mat-expansion-panel expanded *ngIf="hasProperty(currentBlock.options, \'font\')">\n      <mat-expansion-panel-header i18n="settings|Font">\n        Font\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="currentBlock.options" key="color"></pb-color>\n        <pb-font-styles [font]="currentBlock.options.font"></pb-font-styles>\n        <pb-line-height *ngIf="currentBlock.type !== \'social\'" [lineHeight]="currentBlock.options.lineHeight">\n        </pb-line-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf="currentBlock.type === \'image\'">\n      <mat-expansion-panel expanded>\n        <mat-expansion-panel-header i18n="settings|Image">\n          Image\n        </mat-expansion-panel-header>\n        <pb-image-upload [block]="currentBlock"></pb-image-upload>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Image Attributes">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group f-large">\n            <mat-form-field appearance="outline">\n              <mat-label i18n="settings|Image Alt">Alt</mat-label>\n              <input matInput [(ngModel)]="currentBlock.options.title" type="text" i18n-placeholder\n                placeholder="settings|Image Alt" (input)="markForCheck()" />\n            </mat-form-field>\n            <pb-align [model]="currentBlock.options"></pb-align>\n          </div>\n          <pb-link [link]="currentBlock.options.link"></pb-link>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <ng-container *ngIf="currentBlock.type === \'button\'">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Button Text">\n          Button Text\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance="outline" style="width: 100%">\n            <mat-label i18n="settings|Button Text">Button Text</mat-label>\n            <input matInput [(ngModel)]="currentBlock.innerText" type="text" i18n-placeholder\n              placeholder="settings|Button Text" (input)="markForCheck()" />\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Background">\n          Background\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <pb-color [options]="currentBlock.options"></pb-color>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Button Attributes">\n          Attributes\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group two" style="padding-bottom: 0">\n            <pb-align [model]="currentBlock.options" [disabled]="currentBlock.options.fullWidth"></pb-align>\n            <mat-slide-toggle style="margin-top: -24px" [(ngModel)]="currentBlock.options.fullWidth"\n              (change)="markForCheck()">\n              <ng-container i18n="settings|Button Full Width">Full Width</ng-container>\n            </mat-slide-toggle>\n          </div>\n          <pb-link [link]="currentBlock.options.link"></pb-link>\n          <pb-padding [padding]="currentBlock.options.innerPadding"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel [expanded]="currentBlock.type === \'spacer\'"\n      *ngIf="hasProperty(currentBlock.options, \'width\') || hasProperty(currentBlock.options, \'height\')">\n      <mat-expansion-panel-header i18n="settings|Sizes">\n        Sizes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height *ngIf="hasProperty(currentBlock.options, \'width\')" [model]="currentBlock.options.width"\n          label="width"></pb-width-height>\n        <pb-width-height *ngIf="hasProperty(currentBlock.options, \'height\')" [model]="currentBlock.options.height"\n          label="height"></pb-width-height>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel *ngIf="hasProperty(currentBlock.options, \'background\')">\n      <mat-expansion-panel-header i18n="settings|Background">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="currentBlock.options.background"></pb-color>\n      </ng-template>\n      backgroundColor\n    </mat-expansion-panel>\n\n    <mat-expansion-panel [expanded]="currentBlock.type === \'divider\'"\n      *ngIf="hasProperty(currentBlock.options, \'border\')">\n      <mat-expansion-panel-header>\n        <ng-container i18n="settings|Divider Styles" *ngIf="currentBlock.type === \'divider\'">Styles</ng-container>\n        <ng-container i18n="settings|Border" *ngIf="currentBlock.type !== \'divider\'">Border</ng-container>\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-border [border]="currentBlock.options.border"></pb-border>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <ng-container *ngIf="currentBlock.type === \'social\'">\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Icons">\n          Icons\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <mat-form-field appearance="outline" style="width: 100%">\n            <mat-label i18n="settings|Add new Network">Add new Network</mat-label>\n            <mat-select (selectionChange)="addSocialNetwork($event, currentBlock)" [disabled]="!socialNetworks.length">\n              <mat-option style="text-transform: capitalize" *ngFor="let link of socialNetworks(currentBlock)"\n                [value]="link">\n                {{ link }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel class="networks-list" *ngFor="let network of currentBlock.networks">\n        <mat-expansion-panel-header style="text-transform: capitalize">\n          <img [class]="network.name" [src]="getSocialIcon(network.name)" [alt]="network.name" />\n          {{ network.name }}\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="networks-list-item">\n            <div class="item-info">\n              <mat-form-field matLine appearance="outline">\n                <mat-label i18n="settings|Social Network Label">Label</mat-label>\n                <input matInput autocomplete="off" [(ngModel)]="network.label"\n                  i18n-placeholder="settings|Social Network Label" placeholder="Label" type="text"\n                  (input)="markForCheck()" />\n              </mat-form-field>\n              <button mat-stroked-button color="warn" (click)="removeSocialNetwork(network, currentBlock)">\n                <mat-icon>delete_forever</mat-icon>\n              </button>\n            </div>\n            <mat-form-field matLine appearance="outline">\n              <mat-label style="text-transform: capitalize">\n                {{ network.name }} <ng-container i18n="settings|Social Network Link">Link</ng-container>\n              </mat-label>\n              <input autocomplete="off" matInput [(ngModel)]="network.href" type="url" (input)="markForCheck()" />\n            </mat-form-field>\n          </div>\n        </ng-template>\n      </mat-expansion-panel>\n\n      <mat-expansion-panel>\n        <mat-expansion-panel-header i18n="settings|Social Styles">\n          Styles\n        </mat-expansion-panel-header>\n        <ng-template matExpansionPanelContent>\n          <div class="group two" style="padding-bottom: 0">\n            <mat-form-field appearance="outline">\n              <mat-label i18n="settings|Social Model">Mode</mat-label>\n              <mat-select (selectionChange)="markForCheck()" i18n-placeholder="settings|Social Model" placeholder="Mode"\n                [(value)]="currentBlock.options.mode" disableRipple>\n                <mat-option *ngFor="let mode of [\'horizontal\', \'vertical\']" [value]="mode">\n                  {{ mode }}\n                </mat-option>\n              </mat-select>\n            </mat-form-field>\n            <pb-align [model]="currentBlock.options"></pb-align>\n          </div>\n          <pb-line-height [units]="[\'px\']" [lineHeight]="currentBlock.options.iconSize" label="Icon Size">\n          </pb-line-height>\n          <pb-padding [padding]="currentBlock.options.innerPadding"></pb-padding>\n        </ng-template>\n      </mat-expansion-panel>\n    </ng-container>\n\n    <mat-expansion-panel *ngIf="hasProperty(currentBlock.options, \'padding\')">\n      <mat-expansion-panel-header i18n="settings|Padding">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]="currentBlock.options.padding"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px;background-color:#000}.networks-list-item{width:100%;display:grid;row-gap:.5rem}.networks-list-item .item-info{display:grid;grid-template-columns:2fr 1fr;-moz-column-gap:.5rem;column-gap:.5rem}.networks-list-item .item-info button{align-self:baseline;margin:.25rem 0;height:50px}.networks-list-item .item-info ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}"]}]}],rn.ctorParameters=function(){return[{type:Ne},{type:ze},{type:Array,decorators:[{type:t.Inject,args:[qe]}]}]};var ln=function(){function e(e,t){this.pbInternalService=e,this.emailObject=t,this.currentStructure$=this.pbInternalService.currentEditingStructure$}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();ln.decorators=[{type:t.Component,args:[{selector:"pb-structure-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<mat-accordion *ngIf="currentStructure$ | async as structure">\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure Background">\n      Background\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-color [options]="structure.options.background" key="color"></pb-color>\n      <pb-image-upload [block]="structure.options.background" key="url" style="margin-bottom: 1em"></pb-image-upload>\n      <pb-back-repeat [disabled]="!structure.options.background.url"\n                      [model]="structure.options.background"></pb-back-repeat>\n      <pb-width-height [disabled]="!structure.options.background.url" [model]="structure.options.background.size"\n                       label="size">\n      </pb-width-height>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure border">\n      Border\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-border [border]="structure.options.border"></pb-border>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure padding">\n      Padding\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-padding [padding]="structure.options.padding"></pb-padding>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure margin">\n      Margin\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-margin [margin]="structure.options.margin"></pb-margin>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel>\n    <mat-expansion-panel-header i18n="Structure settings|Change structure layout">\n      Layout\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <pb-gaps [gaps]="structure.options.gaps"></pb-gaps>\n      <mat-slide-toggle [disabled]="structure.type === \'cols_1\'" style="margin-top: -24px;"\n                        [(ngModel)]="structure.options.disableResponsive" i18n="Structure settings|Disable Responsive"\n                        (change)="markForCheck()">\n        Disable Responsive\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]="structure.options.fullWidth" i18n="Structure settings|Full Width"\n        (change)="markForCheck()">\n        Make section full width\n      </mat-slide-toggle>\n    </ng-template>\n  </mat-expansion-panel>\n\n  <mat-expansion-panel *ngFor="let column of structure.options.columns; let key = index">\n    <mat-expansion-panel-header>\n      <ng-container i18n="Structure settings|Structure Column">Column</ng-container>\n      {{ key + 1 }}\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Background">Column Background</span>\n      </h3>\n      <pb-color [options]="column.background" [showTransparent]="true" key="color"></pb-color>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Border">Column Border</span>\n      </h3>\n      <pb-border [border]="column.border"></pb-border>\n      <h3 class="divider">\n        <span i18n="Structure settings|Column Vertical Align">Vertical Align</span>\n      </h3>\n      <pb-align [model]="column" mode="vertical"></pb-align>\n    </ng-template>\n  </mat-expansion-panel>\n</mat-accordion>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[":host{display:block}"]}]}],ln.ctorParameters=function(){return[{type:Ne},{type:ze}]};var an=function(e){this.pbEmailObject=e,this.generalOptions$=this.pbEmailObject.generalEmailOptionsAsObservable$};an.decorators=[{type:t.Component,args:[{selector:"pb-general-settings",template:'\x3c!--\n  ~ Copyright (c) 2024 Pobuca.\n  ~ All rights reserved.\n  --\x3e\n\n<ng-container *ngIf="generalOptions$ | async as general">\n  <div class="mat-expansion-panel-body" style="margin: 24px 0">\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="General Settings|Email Name">Email Name</mat-label>\n      <input matInput [(ngModel)]="general.name">\n    </mat-form-field>\n    <mat-form-field appearance="outline" style="width: 100%">\n      <mat-label i18n="General Settings|Email Preview Text">Preview Text</mat-label>\n      <textarea matInput [(ngModel)]="general.previewText"></textarea>\n      <mat-hint i18n="General Settings|Email Preview Text Hint">\n        This text is displayed in the inbox of the recipient.\n      </mat-hint>\n    </mat-form-field>\n  </div>\n\n  <mat-accordion>\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Background">\n        Background\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-color [options]="general.background" key="color"></pb-color>\n        \x3c!-- <pb-image-upload [block]="structure.options.background" key="url" style="margin-bottom: 1em"></pb-image-upload>\n        <pb-back-repeat [disabled]="!structure.options.background.url" [model]="structure.options.background">\n        </pb-back-repeat>\n        <pb-width-height [model]="structure.options.background.size" label="Background Size"></pb-width-height> --\x3e\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Attributes">\n        Attributes\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-width-height [model]="general.width" label="width"></pb-width-height>\n        <pb-direction [model]="general"></pb-direction>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <mat-expansion-panel>\n      <mat-expansion-panel-header i18n="General Settings|Email Padding">\n        Padding\n      </mat-expansion-panel-header>\n      <ng-template matExpansionPanelContent>\n        <pb-padding [padding]="general.padding"></pb-padding>\n      </ng-template>\n    </mat-expansion-panel>\n  </mat-accordion>\n</ng-container>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[""]}]}],an.ctorParameters=function(){return[{type:ze}]};var sn=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();sn.decorators=[{type:t.Component,args:[{selector:"pb-margin",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Margin settings|Margin Top">Margin Top</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.top" (input)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Margin settings|Margin Bottom">Margin Bottom</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="margin.bottom" (input)="markForCheck()" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],sn.ctorParameters=function(){return[{type:ze}]},sn.propDecorators={margin:[{type:t.Input}]};var cn=function(){function e(e){this.emailObject=e}return e.prototype.markForCheck=function(){this.emailObject.markForCheck()},e}();cn.decorators=[{type:t.Component,args:[{selector:"pb-gaps",template:'\n    <div class="group">\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Gaps settings|Vertical Gaps">Vertical Gaps</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[0]" (input)="markForCheck()" />\n      </mat-form-field>\n      <mat-form-field appearance="outline">\n        <mat-label i18n="Gaps settings|Horizontal Gaps">Horizontal Gaps</mat-label>\n        <input matInput type="number" min="0" step="1" [(ngModel)]="gaps[1]" (input)="markForCheck()" />\n      </mat-form-field>\n    </div>\n  ',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["\n      :host {\n        display: block;\n        width: 100%;\n      }\n    "]}]}],cn.ctorParameters=function(){return[{type:ze}]},cn.propDecorators={gaps:[{type:t.Input}]};var pn="This feature is disabled in free version.",un=function(e){function t(){var t=e.call(this)||this;return console.warn("You use the Regular License of Angular Email Builder, some limitations are applied. More info on https://wlocalhost.org"),t}return z(t,e),t.prototype.chooseTemplate=function(){throw new Error(pn)},t.prototype.exportFile=function(e){return n.iif((function(){return"json"===e}),re(e),n.throwError(new Error(pn)))},t.prototype.importFile=function(e){return n.iif((function(){return"application/json"===e.type}),re(e),n.throwError(new Error(pn)))},t}(Ee),dn=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t}(Ee),mn=function(){function e(e,t){this.userConfig=e,this.userInterface=t}return e.prototype.intercept=function(e,t){if(e.url.startsWith("https://ngb-api.wlocalhost.org")){var n=this.userInterface.notify("Loading, please wait ...",null,null),r=Object.assign(Object.assign({},De),this.userConfig).xApiKey;return t.handle(e.clone({setHeaders:{"Content-Type":"application/json","X-Api-Key":r},responseType:"json"})).pipe(o.tap((function(e){e.type===i.HttpEventType.Response&&n.dismiss()})))}return t.handle(e)},e}();mn.ɵprov=F.ɵɵdefineInjectable({factory:function(){return new mn(F.ɵɵinject(Me),F.ɵɵinject(Ne))},token:mn,providedIn:"root"}),mn.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],mn.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[Me]}]},{type:Ne}]};var bn=new t.InjectionToken("Library environment",{providedIn:"any",factory:function(){var e=t.inject(Me).xApiKey;return!(!e||e.length<40||e===De.xApiKey)}}),gn=function(e){function t(t){return e.call(this,t)||this}return z(t,e),t}(Fe),hn=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return z(t,e),t}(Ae);function fn(e){return new gn(e)}function yn(e){return e?new dn:new un}function kn(e){return new hn(e)}function vn(e,t,n,o,r){return e?new Ke(n,o,r):new Je(t,o)}var qn={bounds:"pb-builder-container",theme:"bubble",format:"html",trackChanges:"all",suppressGlobalRegisterWarning:!0},xn=function(){function e(e,t,n){if(!(n||e instanceof un))throw new Error("Upgrade to an Extended or Commercial License to use Custom Middlewares.");if(!(n||t instanceof Je))throw new Error("Upgrade to an Extended or Commercial License to use Custom Image Uploader.")}return e.forRoot=function(t){return void 0===t&&(t={}),e.withConfig(t)},e.withConfig=function(t){return void 0===t&&(t={}),{ngModule:e,providers:[Ge,ze,Ne,{provide:Me,useValue:t},{provide:Ee,useFactory:yn,deps:[bn]},{provide:Ae,useFactory:kn,deps:[Le]},{provide:Ve,useFactory:vn,deps:[bn,s.MatBottomSheet,a.MatDialog,Ee,Fe]},{provide:Fe,useFactory:fn,deps:[i.HttpClient]}]}},e}();xn.decorators=[{type:t.NgModule,args:[{imports:[D.CommonModule,i.HttpClientModule,L.QuillModule,p.FlexLayoutModule,r.DragDropModule,O.FormsModule,B.ColorChromeModule,u.MatButtonModule,h.MatIconModule,g.MatFormFieldModule,f.MatInputModule,C.MatTabsModule,S.MatSliderModule,q.MatSelectModule,w.MatSlideToggleModule,d.MatButtonToggleModule,m.MatDividerModule,P.MatTooltipModule,a.MatDialogModule,l.MatSnackBarModule,v.MatProgressBarModule,k.MatMenuModule,x.MatSidenavModule,I.MatToolbarModule,y.MatListModule,s.MatBottomSheetModule,m.MatDividerModule,b.MatExpansionModule,T.ResizableModule,M.ScrollingModule,_.PortalModule],declarations:[Ze,Qe,nn,st,tn,tt,nt,ot,rt,it,lt,ct,mt,bt,sn,cn,kt,St,Dt,Mt,Et,Ht,Wt,Zt,Ue,on,rn,ln,an,We,Ye,Re,Xe,He],exports:[Ze,tn,Xe],entryComponents:[tt,nt,ot,rt,it,lt,Ue,We,Ye,Re,He],providers:[{provide:L.QUILL_CONFIG_TOKEN,useValue:qn},{provide:i.HTTP_INTERCEPTORS,useClass:mn,multi:!0},Ge,ze,Ne]}]}],xn.ctorParameters=function(){return[{type:Ee},{type:Ve},{type:Boolean,decorators:[{type:t.Inject,args:[bn]}]}]},e.AIPBlock=me,e.ButtonBlock=he,e.Defaults=Be,e.DividerBlock=fe,e.FreeUsersImageUploader=Je,e.ImageBlock=ge,e.PBEmail=_e,e.PB_BLOCKS=Oe,e.PB_CONFIG=Me,e.PB_DEFAULT_BLOCKS=Te,e.PB_DEFAULT_CONFIG=De,e.PB_DEFAULT_FALLBACK_FONTS=Se,e.PB_DEFAULT_GOOGLE_FONTS=xe,e.PB_DEFAULT_SOCIAL_NETWORKS=ve,e.PB_DEFAULT_STRUCTURES=Ie,e.PB_FALLBACK_FONTS=Ce,e.PB_GOOGLE_FONTS=we,e.PB_SOCIAL_NETWORKS=qe,e.PB_STORAGE_FACTORY=je,e.PB_STRUCTURES=Pe,e.PB_TEMPLATES_TEMPORARY_STORAGE=Le,e.PbEmailBuilderComponent=Ze,e.PbEmailBuilderModule=xn,e.PbEmailBuilderService=Ge,e.PbStorageService=Ae,e.PbUserImageUploaderService=Ve,e.PbUserMiddlewaresService=Ee,e.PbUserRestApiService=Fe,e.PreviewTemplateComponent=tn,e.SlugifyPipe=Xe,e.SocialBlock=ke,e.SpacerBlock=ye,e.Structure=de,e.TextBlock=be,e.bytesToSize=ne,e.cloneDeep=V,e.createBackground=function(e){var t=e.url,n=void 0===t?"":t,o=e.color,r=void 0===o?"white":o,i=e.repeat;return r+" "+(n&&"url("+n+")")+" "+(void 0===i?"no-repeat":i)+" top center"},e.createBorder=K,e.createCustomRestApiService=fn,e.createFont=Z,e.createLineHeight=ee,e.createMargin=X,e.createPadding=Q,e.createUserMiddlewareService=yn,e.createUserUploaderService=vn,e.createUsersIpStorage=kn,e.createWidthHeight=te,e.defaultColumnsOptions=ue,e.defaultsDeep=Y,e.deferOf=re,e.getAssetByPath=oe,e.isEqual=J,e["ɵ0"]=qn,e["ɵa"]=ze,e["ɵb"]=Ne,e["ɵba"]=Zt,e["ɵbb"]=Ue,e["ɵbc"]=on,e["ɵbd"]=rn,e["ɵbe"]=ln,e["ɵbf"]=an,e["ɵbg"]=We,e["ɵbh"]=Ye,e["ɵbi"]=Re,e["ɵbj"]=He,e["ɵbk"]=mn,e["ɵbl"]=bn,e["ɵc"]=gn,e["ɵd"]=hn,e["ɵe"]=Qe,e["ɵf"]=nn,e["ɵg"]=st,e["ɵh"]=tt,e["ɵi"]=et,e["ɵj"]=nt,e["ɵk"]=ot,e["ɵl"]=rt,e["ɵm"]=it,e["ɵn"]=lt,e["ɵo"]=ct,e["ɵp"]=mt,e["ɵq"]=bt,e["ɵr"]=sn,e["ɵs"]=cn,e["ɵt"]=kt,e["ɵu"]=St,e["ɵv"]=Dt,e["ɵw"]=Mt,e["ɵx"]=Et,e["ɵy"]=Ht,e["ɵz"]=Wt,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=pobuca-email-builder.umd.min.js.map