@firestitch/app-message 9.1.4 → 9.1.5

package/bundles/firestitch-app-message.umd.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/router"),require("@angular/flex-layout"),require("@angular/material/button"),require("@angular/material/core"),require("@angular/material/dialog"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/select"),require("@angular/material/tabs"),require("@angular/material/checkbox"),require("@angular/material/tooltip"),require("@firestitch/label"),require("@firestitch/dialog"),require("@firestitch/list"),require("@firestitch/skeleton"),require("@angular/forms"),require("@firestitch/form"),require("@firestitch/text-editor"),require("@firestitch/editor"),require("rxjs/operators"),require("rxjs"),require("@firestitch/filter"),require("@firestitch/message"),require("@firestitch/prompt"),require("@firestitch/iframe"),require("@angular/material/icon"),require("@firestitch/date"),require("@firestitch/selection"),require("anchorme")):"function"==typeof define&&define.amd?define("@firestitch/app-message",["exports","@angular/core","@angular/common","@angular/router","@angular/flex-layout","@angular/material/button","@angular/material/core","@angular/material/dialog","@angular/material/form-field","@angular/material/input","@angular/material/select","@angular/material/tabs","@angular/material/checkbox","@angular/material/tooltip","@firestitch/label","@firestitch/dialog","@firestitch/list","@firestitch/skeleton","@angular/forms","@firestitch/form","@firestitch/text-editor","@firestitch/editor","rxjs/operators","rxjs","@firestitch/filter","@firestitch/message","@firestitch/prompt","@firestitch/iframe","@angular/material/icon","@firestitch/date","@firestitch/selection","anchorme"],t):t(((e=e||self).firestitch=e.firestitch||{},e.firestitch["app-message"]={}),e.ng.core,e.ng.common,e.ng.router,e.ng.flexLayout,e.ng.material.button,e.ng.material.core,e.ng.material.dialog,e.ng.material.formField,e.ng.material.input,e.ng.material.select,e.ng.material.tabs,e.ng.material.checkbox,e.ng.material.tooltip,e.label,e.dialog$1,e.list,e.skeleton,e.ng.forms,e.form,e.textEditor,e.editor,e.rxjs.operators,e.rxjs,e.filter,e.message,e.prompt,e.iframe,e.ng.material.icon,e.date,e.selection,e.anchorme)}(this,(function(e,t,n,a,s,i,o,l,r,m,u,g,c,f,p,d,b,M,h,y,v,Q,w,F,T,_,I,x,C,S,D,L){"use strict";L=L&&Object.prototype.hasOwnProperty.call(L,"default")?L.default:L;var j,R=function(){return(R=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function A(e,t,n,a){var s,i=arguments.length,o=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,n):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(o=(i<3?s(o):i>3?s(t,n,o):s(t,n))||o);return i>3&&o&&Object.defineProperty(t,n,o),o}function k(e,t){return function(n,a){t(n,a,e)}}function O(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function E(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var a,s,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(a=i.next()).done;)o.push(a.value)}catch(e){s={error:e}}finally{try{a&&!a.done&&(n=i.return)&&n.call(i)}finally{if(s)throw s.error}}return o}!function(e){e.Text="T",e.HTML="H",e.RichText="R"}(j||(j={}));var q=[{name:"Text",value:j.Text},{name:"HTML",value:j.HTML},{name:"Rich Text",value:j.RichText}],P=function(){function e(e){this._data=e,this.html=e.html,this.styles=e.styles}return e.prototype.ngOnInit=function(){},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]}]},e=A([t.Component({template:'<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]="html"\n      [styles]="styles">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]="null" color="primary" type="button">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n',styles:[""]}),k(0,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object])],e)}(),N=(new t.InjectionToken("fs-app-message-root-config"),new t.InjectionToken("fs-app-message-config")),z=function(){function e(e,t,n,a,s,i){var o=this;this._config=e,this._data=t,this._prompt=n,this._message=a,this._dialog=s,this._cdRef=i,this.messageTemplates=[],this.emailMessageFormats=q,this.emailMessageFormat=j,this.save=function(){return o._config.saveMessage(o.message).pipe(w.tap((function(){o._message.success("Saved Changes")})))}}return e.prototype.ngOnInit=function(){var e=this;this._config.loadMessage(this._data.message).subscribe((function(t){e.message=t,e.message.emailMessage&&void 0===e.message.emailMessage.customize&&(e.message.emailMessage.customize=!0),e.message.smsMessage&&void 0===e.message.smsMessage.customize&&(e.message.smsMessage.customize=!0),e._cdRef.markForCheck()})),this._config.loadMessageTemplates().subscribe((function(t){e.messageTemplates=t.data,e._cdRef.markForCheck()}))},e.prototype.tabChange=function(e){switch(e.tab.textLabel){case"SMS Message":this.tab="sms";break;case"Email Message":this.tab="email";break;default:this.tab=null}},e.prototype.openPreview=function(){var e=this,t=this.message.emailMessage.body,n=this.message.emailMessage.styles;if(this.message.emailMessage.messageTemplateId){var a=this.messageTemplates.find((function(t){return e.message.emailMessage.messageTemplateId===t.id}));a&&(t=a.content.replace("{$content}",t),n=a.styles.concat(n))}this._dialog.open(P,{data:{styles:n,html:t},width:"95%"})},e.prototype.sendTest=function(e){var t=this;F.of(!0).pipe(w.switchMap((function(){return"email"===e?t._config.getTestEmail():F.of("")})),w.switchMap((function(n){var a="email"===e?"an email":"phone number";return t._prompt.input({label:"Please enter "+a+" to send test to",title:"Send Test",commitLabel:"Send",default:n,required:!0})}))).subscribe((function(n){t._config.testMessage(t.message,n,e).subscribe((function(){t._message.success("Test Sent")}))}))},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]},{type:I.FsPrompt},{type:_.FsMessage},{type:l.MatDialog},{type:t.ChangeDetectorRef}]},e=A([t.Component({template:'<form\n    fsForm\n    [submit]="save"\n    #form="ngForm"\n    *fsSkeleton="message"\n    [dirtyConfirmTabs]="false">\n  <fs-dialog *ngIf="message">\n    <div mat-dialog-title>Edit Message</div>\n    <mat-dialog-content>\n\n      <mat-tab-group (selectedTabChange)="tabChange($event)">\n        <mat-tab label="General">\n          <ng-template matTabContent>\n            <div fxLayout="column">\n              <mat-form-field>\n                <input\n                  matInput\n                  placeholder="Name"\n                  [(ngModel)]="message.name"\n                  name="Name"\n                  required>\n              </mat-form-field>\n              <mat-form-field>\n                <input\n                  matInput\n                  placeholder="Description"\n                  [(ngModel)]="message.description"\n                  name="description">\n              </mat-form-field>\n\n              <div\n                fxLayout="row"\n                fxLayoutGap="10px"\n                fxLayout.xs="column"\n                fxLayout.sm="column">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="From Email"\n                    [(ngModel)]="message.emailMessage.fromEmail"\n                    name="from_email">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="From Name"\n                    [(ngModel)]="message.emailMessage.fromName"\n                    name="from_name">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="Reply To"\n                    [(ngModel)]="message.emailMessage.replyTo"\n                    name="reply_to">\n                </mat-form-field>\n              </div>\n\n              <div\n                fxLayout="row"\n                fxLayoutGap="10px"\n                fxLayout.xs="column"\n                fxLayout.sm="column">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="To"\n                    [(ngModel)]="message.emailMessage.toRecipients"\n                    name="to">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="CC"\n                    [(ngModel)]="message.emailMessage.ccRecipients"\n                    name="cc">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="BCC"\n                    [(ngModel)]="message.emailMessage.bccRecipients"\n                    name="bcc">\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label="Email Message" *ngIf="message.emailMessage">\n          <ng-template matTabContent>\n            <div fxLayout="column">\n              <div fxLayout="row" fxLayoutGap="10px">\n                <mat-form-field>\n                  <mat-select\n                    required\n                    placeholder="Customize Message"\n                    [(ngModel)]="message.emailMessage.customize"\n                    name="customizeEmail">\n                      <mat-option [value]="true">Yes</mat-option>\n                      <mat-option [value]="false">No</mat-option>\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-select\n                    required\n                    placeholder="Format"\n                    [(ngModel)]="message.emailMessage.format"\n                    name="format">\n                      <mat-option *ngFor="let item of emailMessageFormats" [value]="item.value">\n                        {{item.name}}\n                      </mat-option>\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-select\n                    placeholder="Template"\n                    [(ngModel)]="message.emailMessage.messageTemplateId"\n                    name="template">\n                      <mat-option [value]="null">None</mat-option>\n                      <mat-option *ngFor="let item of messageTemplates" [value]="item.id">\n                        {{item.name}}\n                      </mat-option>\n                    </mat-select>\n                </mat-form-field>\n              </div>\n              <ng-container *ngIf="message.emailMessage.customize">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="Subject"\n                    [(ngModel)]="message.emailMessage.subject"\n                    name="name"\n                    required>\n                </mat-form-field>\n\n                <div [@.disabled]="true">\n                  <mat-tab-group [dynamicHeight]="false">\n                    <mat-tab label="Content">\n                      <ng-template matTabContent>\n                        <fs-text-editor\n                          *ngIf="message.emailMessage.format===emailMessageFormat.HTML"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="body"\n                          [config]="{ language: \'html \'}">\n                        </fs-text-editor>\n\n                        <fs-editor-rich-text\n                          *ngIf="message.emailMessage.format===emailMessageFormat.RichText"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="body">\n                        </fs-editor-rich-text>\n\n                        <fs-text-editor\n                            *ngIf="message.emailMessage.format===emailMessageFormat.Text"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="emailMessageBody"\n                          [config]="{ language: \'text\' }">\n                        </fs-text-editor>\n                      </ng-template>\n                    </mat-tab>\n                    <mat-tab\n                        *ngIf="message.emailMessage.format===emailMessageFormat.HTML"\n                        label="Styles">\n                      <ng-template matTabContent>\n                        <fs-text-editor\n                          [(ngModel)]="message.emailMessage.styles"\n                          name="styles"\n                          [config]="{ language: \'scss\' }">\n                        </fs-text-editor>\n                      </ng-template>\n                    </mat-tab>\n                  </mat-tab-group>\n                </div>\n\n              </ng-container>\n\n              <ng-container *ngIf="!message.emailMessage.customize">\n                <fs-label-field>\n                  <fs-label>Subject</fs-label>\n                  {{message.defaultEmailSubject}}\n                </fs-label-field>\n                <div>\n                  <fs-label-field>\n                    <fs-label>Content</fs-label>\n                    <div\n                      class="email-body-html-default"\n                      *ngIf="message.emailMessage.format===emailMessageFormat.HTML">\n                      {{message.defaultEmailBody}}\n                    </div>\n                    <div\n                      *ngIf="message.emailMessage.format===emailMessageFormat.RichText"\n                      fsEditorRenderer\n                      name="defaultEmailBody"\n                      [ngModel]="message.defaultEmailBody">\n                    </div>\n                    <div\n                      class="email-body-text-default"\n                      *ngIf="message.emailMessage.format===emailMessageFormat.Text">\n                      {{message.defaultEmailBody}}\n                    </div>\n                  </fs-label-field>\n                </div>\n              </ng-container>\n            </div>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="SMS Message" *ngIf="message.smsMessage">\n          <ng-template matTabContent>\n            <mat-form-field>\n              <mat-select\n                required\n                placeholder="Customize Message"\n                [(ngModel)]="message.smsMessage.customize"\n                name="customizeSms">\n                  <mat-option [value]="true">Yes</mat-option>\n                  <mat-option [value]="false">No</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div\n                *ngIf="message.smsMessage.customize"\n                [@.disabled]="true">\n              <mat-tab-group [dynamicHeight]="false">\n                <mat-tab label="Content">\n                  <ng-template matTabContent>\n                    <fs-text-editor\n                      [(ngModel)]="message.smsMessage.message"\n                      name="smsMessageMessage"\n                      [config]="{ language: \'text \'}">\n                    </fs-text-editor>\n                  </ng-template>\n                </mat-tab>\n              </mat-tab-group>\n            </div>\n             <fs-label-field *ngIf="!message.smsMessage.customize">\n                <fs-label>Message</fs-label>\n                {{message.defaultSmsMessage}}\n            </fs-label-field>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="Variables" *ngIf="message.variables">\n          <ng-template matTabContent>\n            <div *ngFor="let variable of message.variables" class="variable">\n              {{variable.name}}\n            </div>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="Defaults">\n          <ng-template matTabContent>\n            <ng-container *ngIf="message.emailMessage">\n              <h2 *ngIf="message.emailMessage && message.smsMessage">Email</h2>\n              <fs-label-field>\n                <fs-label>Subject</fs-label>\n                <div class="content">{{message.defaultEmailSubject}}</div>\n              </fs-label-field>\n              <fs-label-field>\n                <fs-label>Content</fs-label>\n                <div class="content">{{message.defaultEmailBody}}</div>\n              </fs-label-field>\n            </ng-container>\n            <ng-container *ngIf="message.smsMessage">\n              <h2 *ngIf="message.emailMessage && message.smsMessage">SMS</h2>\n              <fs-label-field>\n                <fs-label>Content</fs-label>\n                <div class="content">{{message.defaultSmsMessage}}</div>\n              </fs-label-field>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\n\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button color="primary">Save</button>\n      <button\n          *ngIf="tab===\'email\' && message.emailMessage.format===emailMessageFormat.HTML"\n          mat-button\n          type="button"\n          (click)="openPreview()"\n          type="button">\n        Preview\n      </button>\n      <button\n          *ngIf="tab===\'email\'"\n          mat-button\n          type="button"\n          (click)="sendTest(\'email\')"\n          type="button">\n        Send Test Email\n      </button>\n      <button\n          *ngIf="tab===\'sms\'"\n          mat-button\n          type="button"\n          (click)="sendTest(\'sms\')"\n          type="button">\n        Send Test SMS\n      </button>\n      <button mat-button [mat-dialog-close]="null" type="button">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["fs-label-field .content{white-space:pre-wrap}:host ::ng-deep .mat-tab-body,:host ::ng-deep .mat-tab-body-content{overflow:visible}:host ::ng-deep .sms-message{width:100%}:host ::ng-deep .email-body-html-default,:host ::ng-deep .email-body-text-default{white-space:pre-line}.email-body-text{width:100%}.variable{margin-bottom:4px}"]}),k(0,t.Inject(N)),k(1,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object,Object,I.FsPrompt,_.FsMessage,l.MatDialog,t.ChangeDetectorRef])],e)}();function $(e){var t={};return e.forEach((function(e){t[e.value]=e.name})),t}var H,B,G,V=function(){function e(e,t){this._config=e,this._dialog=t,this.list=null,this.config=null,this.emailMessageFormats={},this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.emailMessageFormats=$(q),this.config={filters:[{name:"keyword",type:T.ItemType.Keyword,label:"Search"}],fetch:function(t){return e._config.loadMessages(t).pipe(w.map((function(e){return{data:e.data,paging:e.paging}})))}}},e.prototype.open=function(e){var t=this;this._dialog.open(z,{data:{message:e},width:"85%"}).afterClosed().pipe(w.takeUntil(this._destroy$)).subscribe((function(e){e&&t.list.updateData(e,(function(t){return t.id===e.id}))}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-messages",template:'<fs-list [config]="config">\n  <fs-list-column title="Name" name="name" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      <a (click)="open(row)">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title="Email Format">\n    <ng-template fs-list-cell let-row="row">\n      {{emailMessageFormats[row.emailMessage.format]}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog])],e)}(),U=function(){function e(){}return e=A([t.NgModule({imports:[l.MatDialogModule,i.MatButtonModule,d.FsDialogModule,x.FsIFrameModule],declarations:[P],exports:[P]})],e)}(),W=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,n.CommonModule,h.FormsModule,l.MatDialogModule,i.MatButtonModule,g.MatTabsModule,r.MatFormFieldModule,m.MatInputModule,o.MatOptionModule,u.MatSelectModule,f.MatTooltipModule,c.MatCheckboxModule,d.FsDialogModule,b.FsListModule,p.FsLabelModule,s.FlexLayoutModule,M.FsSkeletonModule,y.FsFormModule,v.FsTextEditorModule,Q.FsEditorRichTextModule,U],declarations:[V,z],exports:[V,z]})],e)}();!function(e){e.Text="T",e.HTML="H",e.RichText="R"}(H||(H={})),function(e){e.Sms="S",e.Email="E"}(B||(B={})),function(e){e.Sent="S",e.PartiallySent="P",e.Sending="E",e.Queued="Q",e.Canceled="C",e.InvalidRecipients="I",e.Failed="F"}(G||(G={}));var K=[{name:"Sent",value:G.Sent},{name:"Partially Sent",value:G.PartiallySent},{name:"Sending",value:G.Sending},{name:"Queued",value:G.Queued},{name:"Canceled",value:G.Canceled},{name:"Invalid Recipients",value:G.InvalidRecipients},{name:"Failed",value:G.Failed}],Y=function(){function e(e,t,n,a,s){this._config=e,this._message=t,this._prompt=n,this._dialog=a,this._data=s,this.messageQueueRecipients={},this.emailMessageQueueFormat=H,this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.messageQueueStates=$(K),this.resendMessageQueue=this._config.resendMessageQueue,this.forwardMessageQueue=this._config.forwardMessageQueue,this._config.loadMessageQueue(this._data.messageQueue.id).subscribe((function(t){if(e.messageQueue=t,e.messageQueue.emailMessageQueue){var n=e.messageQueue.emailMessageQueue.body;if(e.messageQueue.emailMessageQueue.format===H.HTML)try{var a=(new DOMParser).parseFromString(n,"text/html");a.querySelectorAll("a").forEach((function(e){e.setAttribute("target","_blank")})),n=a.documentElement.innerHTML}catch(e){}else n=e.anchorme(n);e.messageQueue.emailMessageQueue.body=n}e.messageQueue.smsMessageQueue&&(e.messageQueue.smsMessageQueue.body=e.anchorme(e.messageQueue.smsMessageQueue.body)),e.messageQueueRecipients=e.messageQueue.messageQueueRecipients.reduce((function(e,t){return e[t.recipient]=t.state,e}),{}),e._setLogsConfig(t),e._setAttachmentsConfig(t)}))},e.prototype.anchorme=function(e){return L(e,{options:{attributes:[{name:"target",value:"_blank"}]}})},e.prototype.openMessage=function(e){this._dialog.open(z,{data:{message:e},width:"85%"})},e.prototype.resend=function(){var e=this;this._prompt.confirm({title:"Confirm",template:"Are you sure you would like to resend this message?"}).subscribe((function(){e.resendMessageQueue(e.messageQueue).subscribe((function(t){Object.assign(e.messageQueue,t),e._message.success("Successfully resent"),e.logList&&e.logList.reload()}))}))},e.prototype.forward=function(){var e=this,t=this.messageQueue.type===B.Email?"an email":"a phone number";this._prompt.input({label:"Please enter "+t+" to forward to",title:"Forward Message",commitLabel:"Forward",required:!0}).subscribe((function(t){t&&e.forwardMessageQueue(e.messageQueue,t).subscribe((function(t){e.messageQueue=R(R({},e.messageQueue),{messageQueue:t}),e._message.success("Successfully forwarded"),e.logList&&e.logList.reload()}))}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.prototype._setLogsConfig=function(e){var t=this;this.logConfig={loadMore:!0,queryParam:!1,fetch:function(n){return t._config.loadLogs(e,n)}}},e.prototype._setAttachmentsConfig=function(e){var t=this;this.attachmentConfig={queryParam:!1,fetch:function(n){return t._config.loadMessageQueueAttachments(e,n).pipe(w.map((function(e){return{data:e.data.map((function(e){return e.prettyFilesize=t._prettyFilesize(e.filesize),e})),paging:e.paging}})))}},this._config.downloadMessageQueueAttachment&&(this.attachmentConfig.rowActions=[{click:function(e){t._config.downloadMessageQueueAttachment(e,t.messageQueue)},label:"Download"}])},e.prototype._prettyFilesize=function(e){if(0===e)return"0.00 B";var t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(2)+" "+" KMGTP".charAt(t)+"B"},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:_.FsMessage},{type:I.FsPrompt},{type:l.MatDialog},{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]}]},A([t.ViewChild("logList"),O("design:type",b.FsListComponent)],e.prototype,"logList",void 0),e=A([t.Component({template:'<fs-dialog *fsSkeleton="messageQueue">\n  <div mat-dialog-title>Message Queue</div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label="Overview">\n        <ng-template matTabContent>\n          <div fxLayout="row wrap" fxLayoutGap="25px">\n            <ng-container *ngIf="messageQueue.emailMessageQueue">\n              <fs-label-field>\n                <fs-label>\n                  To Recipients\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.toRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>\n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.ccRecipients.length">\n                <fs-label>\n                  CC\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.ccRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.bccRecipients.length">\n                <fs-label>\n                  BCC\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.bccRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.fromName || messageQueue.emailMessageQueue.fromEmail">\n                <fs-label>\n                  From\n                </fs-label>\n                <ng-container *ngIf="messageQueue.emailMessageQueue.fromName === messageQueue.emailMessageQueue.fromEmail; else fromEmailName">\n                  {{messageQueue.emailMessageQueue.fromName}}\n                </ng-container>\n\n                <ng-template #fromEmailName>\n                  {{messageQueue.emailMessageQueue.fromName}}\n                  <ng-container *ngIf="messageQueue.emailMessageQueue.fromEmail">\n                    ({{messageQueue.emailMessageQueue.fromEmail}})\n                  </ng-container>\n                </ng-template>\n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.replyEmail && messageQueue.emailMessageQueue.replyEmail.length">\n                <fs-label>\n                  Reply To\n                </fs-label>\n                {{messageQueue.emailMessageQueue.replyEmail.join(\', \')}}\n              </fs-label-field>\n            </ng-container>\n\n            <ng-container *ngIf="messageQueue.smsMessageQueue">\n              <fs-label-field>\n                <fs-label>\n                  To Number\n                </fs-label>\n                <app-recipient \n                  [state]="messageQueue.state"\n                  [name]="messageQueue.smsMessageQueue.toNumber">\n                </app-recipient>                 \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.smsMessageQueue.fromNumber">\n                <fs-label>\n                  From Number\n                </fs-label>\n                {{messageQueue.smsMessageQueue.fromNumber}}\n              </fs-label-field>\n            </ng-container>\n  \n            <fs-label-field>\n              <fs-label>\n                Date\n              </fs-label>\n              {{messageQueue.scheduledDate | fsDateFormat: \'full-date-time\'}}\n            </fs-label-field>\n\n            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{messageQueueStates[messageQueue.state]}}\n            </fs-label-field>\n\n            <fs-label-field *ngIf="messageQueue.message">\n              <fs-label>\n                Message Type\n              </fs-label>\n              <a\n                (click)="openMessage(messageQueue.message)"\n                *ngIf="loadMessage; else elseMessage">\n                {{messageQueue.message.name}}\n              </a>\n              <ng-template #elseMessage>\n                {{messageQueue.message.name}}\n              </ng-template>\n            </fs-label-field>\n          </div>\n\n          <ng-container *ngIf="messageQueue.emailMessageQueue">\n            <fs-label-field class="subject">\n              <fs-label>\n                Subject\n              </fs-label>\n              {{messageQueue.emailMessageQueue.subject}}\n            </fs-label-field>\n\n            <fs-label-field class="body">\n              <fs-label>\n                Body\n              </fs-label>\n              <div\n                  *ngIf="messageQueue.emailMessageQueue.format===emailMessageQueueFormat.Text"\n                  class="format-text"\n                  [innerHTML]="messageQueue.emailMessageQueue.body">\n              </div>\n              <fs-iframe\n                *ngIf="messageQueue.emailMessageQueue.format===emailMessageQueueFormat.HTML || messageQueue.emailMessageQueue.format===emailMessageQueueFormat.RichText"\n                [html]="messageQueue.emailMessageQueue.body">\n              </fs-iframe>\n            </fs-label-field>\n          </ng-container>\n\n          <ng-container *ngIf="messageQueue.smsMessageQueue">\n            <fs-label-field>\n              <fs-label>\n                Message\n              </fs-label>\n              <div\n                class="format-text"\n                [innerHTML]="messageQueue.smsMessageQueue.body">\n              </div>\n            </fs-label-field>\n          </ng-container>\n\n        </ng-template>\n      </mat-tab>\n      <mat-tab label="Logs">\n        <ng-template matTabContent>\n          <fs-list [config]="logConfig" #logList>\n            <fs-list-column title="Message">\n              <ng-template fs-list-cell let-row="row">\n                {{row.message}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title="Date">\n              <ng-template fs-list-cell let-row="row">\n                <fs-date-ago [date]="row.createdDate"></fs-date-ago>\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label="Attachments">\n        <ng-template matTabContent>\n          <fs-list [config]="attachmentConfig">\n            <fs-list-column title="File Name">\n              <ng-template fs-list-cell let-row="row">\n                {{row.filename}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title="File Size">\n              <ng-template fs-list-cell let-row="row">\n                {{row.prettyFilesize}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]="null"\n        color="primary">\n      Done\n    </button>\n    <button\n        mat-button\n        *ngIf="resendMessageQueue"\n        type="button"\n        (click)="resend()"\n        type="button">\n      Resend\n    </button>\n    <button\n        mat-button\n        *ngIf="forwardMessageQueue"\n        type="button"\n        (click)="forward()"\n        type="button">\n      Forward\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n',styles:[".body,.subject{display:block;margin-top:15px}.body .format-text{white-space:pre-wrap}.body .body-frame{border:0}.body ::ng-deep .field-label{margin-bottom:10px}app-recipient{display:block}[hidden]{display:none!important}"]}),k(0,t.Inject(N)),k(4,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object,_.FsMessage,I.FsPrompt,l.MatDialog,Object])],e)}(),J=function(){function e(e,t){this._config=e,this._dialog=t,this.list=null,this.query={},this.config=null,this.messageQueueStates={},this.MessageQueueState=G,this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.messageQueueStates=$(K),this.config={filters:[{name:"keyword",type:T.ItemType.Keyword,label:"Search"},{name:"state",type:T.ItemType.Select,label:"Status",values:function(){return K}},{name:"date",type:T.ItemType.DateRange,label:["From Date","To Date"]}],sort:{value:"created_date",direction:"desc"},fetch:function(t){return t=R(R(R({},t),e.query),{messageQueueAttachmentCounts:!0,emailMessageQueues:!0,emailMessageQueueBodies:!1,smsMessageQueues:!0}),e._config.loadMessageQueues(t).pipe(w.map((function(e){return{data:e.data.map((function(e){return R(R({},e),{messageQueueRecipients:e.messageQueueRecipients.reduce((function(e,t){return e[t.recipient]=t.state,e}),{})})})),paging:e.paging}})))}},this._config.cancelMessageQueues&&(this.config.selection={selectAll:!1,actions:[],actionSelected:function(t){return F.of(!0).pipe(w.switchMap((function(){return"cancel"===t.action.name?e._config.cancelMessageQueues(t):F.of(!0)})),w.tap((function(){e.list.reload()})))}}),this._config.cancelMessageQueues&&this.config.selection.actions.push({type:D.SelectionActionType.Action,name:"cancel",label:"Cancel Queued"}),this.config.filters.push({name:"message_id",type:T.ItemType.Select,label:"Message Type",values:function(t){return t=R(R({},t),{limit:50}),e._config.loadMessages(t).pipe(w.map((function(e){return function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(E(arguments[t]));return e}([{value:null,name:"All"}],e.data.map((function(e){return{name:e.name,value:e.id}})))})))}})},e.prototype.open=function(e){var t=this;this._dialog.open(Y,{data:{messageQueue:e},width:"85%"}).afterClosed().pipe(w.takeUntil(this._destroy$)).subscribe((function(){t.list.reload()}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),A([t.Input(),O("design:type",Object)],e.prototype,"query",void 0),e=A([t.Component({selector:"fs-app-message-queues",template:'<fs-list [config]="config" #list>\n  <fs-list-column title="Message" name="subject" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      <ng-container *ngIf="row.emailMessageQueue">\n        <div fxLayout="row" fxLayoutAlign="start center">\n          <a (click)="open(row)">{{row.emailMessageQueue.subject|truncate:100}}</a>\n          <mat-icon *ngIf="row.messageQueueAttachmentCount" [matTooltip]="row.messageQueueAttachmentCount + \' Attachment(s)\'">attach_file</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="row.smsMessageQueue">\n        <a (click)="open(row)">{{row.smsMessageQueue.body|truncate:100}}</a>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title="Recipients" class="col-recipients">\n    <ng-template fs-list-cell let-row="row">\n      <ng-container *ngIf="row.emailMessageQueue">\n        <ng-container *ngIf="row.emailMessageQueue.toRecipients.length; else unspecified">\n          <div class="small" *ngFor="let recipient of row.emailMessageQueue.toRecipients">\n            <app-recipient \n              [state]="row.messageQueueRecipients[recipient] || row.state"\n              [name]="recipient">\n            </app-recipient>\n          </div>\n        </ng-container>\n        <div class="small" *ngFor="let recipient of row.emailMessageQueue.ccRecipients">\n          <app-recipient \n            [state]="row.messageQueueRecipients[recipient] || row.state"\n            [name]="recipient">\n          </app-recipient>\n        </div>\n        <div class="small" *ngFor="let recipient of row.emailMessageQueue.bccRecipients">\n          <app-recipient             \n            [state]="row.messageQueueRecipients[recipient] || row.state"\n            [name]="recipient">\n          </app-recipient>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="row.smsMessageQueue">\n        <ng-container *ngIf="row.smsMessageQueue.toNumber; else unspecified">\n          <app-recipient \n            class="small"\n            [state]="row.state"\n            [name]="row.smsMessageQueue.toNumber">\n          </app-recipient>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title="Status" class="col-state">\n    <ng-template fs-list-cell let-row="row">\n      <span [class]="\'state-\' + row.state">{{messageQueueStates[row.state]}}</span>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title="Date" name="created_date" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      {{ row.createdDate | fsDateFormat: \'date-time-yeardiff\' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n\n<ng-template #unspecified>\n  <app-recipient \n    class="small"\n    [state]="MessageQueueState.Failed"\n    name="Unspecified">\n  </app-recipient>\n</ng-template>',styles:[':host ::ng-deep .col-recipients small+small:before{content:", "}:host ::ng-deep .col-state .state-F,:host ::ng-deep .col-state .state-P{color:#d8524e}']}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog])],e)}(),X=function(){function e(){}return e.prototype.transform=function(e){return L(e,{attributes:[{name:"target",value:"_blank"}]})},e=A([t.Pipe({name:"linkify"})],e)}(),Z=function(){function e(){}return e.prototype.transform=function(e,t,n,a){return void 0===t&&(t=25),void 0===n&&(n=!1),void 0===a&&(a="..."),e.length<t?""+e.substr(0,t):(n&&(t=e.substr(0,t).lastIndexOf(" ")),""+e.substr(0,t)+a)},e=A([t.Pipe({name:"truncate"})],e)}(),ee=function(){function e(){}return e.prototype.ngOnInit=function(){this.icon={S:{name:"check_circle",tooltip:"Sent"},E:{name:"offline_bolt",tooltip:"Sending"},F:{name:"info",tooltip:"Failed"}}[this.state]},A([t.Input(),O("design:type",Object)],e.prototype,"name",void 0),A([t.Input(),O("design:type",Object)],e.prototype,"state",void 0),e=A([t.Component({selector:"app-recipient",template:'<span class="recipient">\n  <span class="name">{{name}}</span>\n  <mat-icon *ngIf="icon" [class]="\'state-\' + state" [matTooltip]="icon.tooltip">{{icon.name}}</mat-icon>\n</span>',styles:["mat-icon{font-size:14px;width:14px;height:14px;line-height:normal;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}"]})],e)}(),te=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,h.FormsModule,n.CommonModule,s.FlexLayoutModule,f.MatTooltipModule,l.MatDialogModule,i.MatButtonModule,C.MatIconModule,g.MatTabsModule,b.FsListModule,d.FsDialogModule,p.FsLabelModule,S.FsDateModule,M.FsSkeletonModule,W,y.FsFormModule,I.FsPromptInputModule,x.FsIFrameModule],declarations:[J,Y,X,Z,ee],exports:[J,Y]})],e)}(),ne=function(){function e(e,t,n,a,s){var i=this;this._data=e,this._config=t,this._dialogRef=n,this._message=a,this._dialog=s,this.htmlEditorconfig={language:"html",insertSpaces:!0,tabSize:2},this.cssEditorconfig={language:"scss",insertSpaces:!0,tabSize:2},this.save=function(e){return i._config.saveMessageTemplate(i.messageTemplate).pipe(w.tap((function(t){i._message.success("Saved Changes"),"save-close"===e.submitter&&i._dialogRef.close(t)})))}}return e.prototype.ngOnInit=function(){var e=this;this._data.messageTemplate.id?this._config.loadMessageTemplate(this._data.messageTemplate).subscribe((function(t){e.messageTemplate=t})):this.messageTemplate={}},e.prototype.openPreview=function(){this._dialog.open(P,{data:{styles:this.messageTemplate.styles,html:this.messageTemplate.content},width:"95%"})},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]},{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialogRef},{type:_.FsMessage},{type:l.MatDialog}]},e=A([t.Component({template:'<form\n    fsForm\n    [submit]="save"\n    #form="ngForm"\n    *fsSkeleton="messageTemplate"\n    [dirtyConfirmTabs]="false">\n  <fs-dialog *ngIf="messageTemplate">\n    <div mat-dialog-title>Message Template</div>\n    <mat-dialog-content>\n      <mat-form-field class="name">\n        <input\n          matInput\n          placeholder="Name"\n          [(ngModel)]="messageTemplate.name"\n          name="name"\n          >\n      </mat-form-field>\n      <div [@.disabled]="true">\n        <mat-tab-group\n            mat-align-tabs="start"\n            [dynamicHeight]="false">\n          <mat-tab label="Content">\n            <ng-template matTabContent>\n              <div class="content">\n                <fs-label-field>\n                  <fs-text-editor\n                    [(ngModel)]="messageTemplate.content"\n                    name="body"\n                    [config]="htmlEditorconfig">\n                  </fs-text-editor>\n                  <fs-label-message>\n                    &#123;$content&#125; will be replaced with the message content.\n                  </fs-label-message>\n                </fs-label-field>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab label="Styles">\n            <ng-template matTabContent>\n              <div class="styles">\n                <fs-text-editor\n                  [(ngModel)]="messageTemplate.styles"\n                  name="styles"\n                  [config]="cssEditorconfig">\n                </fs-text-editor>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button color="primary" name="close">Save</button>\n      <button mat-button name="save-close">Save & Close</button>\n      <button mat-button (click)="openPreview()" type="button">Preview</button>\n      <button mat-button [mat-dialog-close]="null" type="button">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n',styles:[".name{width:100%}:host ::ng-deep .mat-tab-body,:host ::ng-deep .mat-tab-body-content{overflow:visible}"]}),k(0,t.Inject(l.MAT_DIALOG_DATA)),k(1,t.Inject(N)),O("design:paramtypes",[Object,Object,l.MatDialogRef,_.FsMessage,l.MatDialog])],e)}(),ae=function(){function e(e,t){this._config=e,this._dialog=t,this.list=null,this.config=null,this.messageQueueStates=[],this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.config={actions:[{label:"Create",click:function(){e.open({})}}],status:!1,fetch:function(t){return e._config.loadMessageTemplates(t)}},this._config.deleteMessageTemplate&&(this.config.rowActions=[{click:function(t){return e._config.deleteMessageTemplate(t)},remove:{title:"Confirm",template:"Are you sure you would like to delete this template?"},menu:!0,label:"Delete"}])},e.prototype.open=function(e){var t=this;this._dialog.open(ne,{data:{messageTemplate:e},width:"85%"}).afterClosed().pipe(w.takeUntil(this._destroy$)).subscribe((function(e){e&&(t.list.updateData(e,(function(t){return t.id===e.id}))||t.list.reload())}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-message-templates",template:'<fs-list [config]="config">\n  <fs-list-column title="Name">\n    <ng-template fs-list-cell let-row="row">\n      <a (click)="open(row)">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog])],e)}(),se=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,n.CommonModule,h.FormsModule,f.MatTooltipModule,l.MatDialogModule,i.MatButtonModule,g.MatTabsModule,r.MatFormFieldModule,r.MatFormFieldModule,m.MatInputModule,b.FsListModule,d.FsDialogModule,p.FsLabelModule,s.FlexLayoutModule,M.FsSkeletonModule,y.FsFormModule,v.FsTextEditorModule,U],declarations:[ae,ne],exports:[ae,ne]})],e)}(),ie=function(){function e(e,t){this._config=e,this._message=t}return e.prototype.ngOnInit=function(){var e=this;this.listConfig={paging:!1,actions:[{click:function(){e._config.createWebhook().subscribe((function(){e._message.success("Created webhook"),e.list.reload()}))},label:"Create"}],rowActions:[{click:function(t){e._config.deleteWebhook(t).subscribe((function(){e._message.success("Deleted webhook"),e.list.reload()}))},label:"Delete"}],fetch:function(){return e._config.loadWebhooks().pipe(w.map((function(e){return{data:e}})))}}},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:_.FsMessage}]},A([t.ViewChild(b.FsListComponent),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-message-webhooks",template:'<fs-list [config]="listConfig">\r\n  <fs-list-column title="URL">\r\n    <ng-template fs-list-cell let-row="row">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title="Created">\r\n    <ng-template fs-list-cell let-row="row">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,_.FsMessage])],e)}(),oe=function(){function e(){}return e=A([t.NgModule({imports:[b.FsListModule,S.FsDateModule],declarations:[ie],exports:[ie]})],e)}(),le=function(){function e(){}var n;return n=e,e.forRoot=function(){return{ngModule:n}},e=n=A([t.NgModule({})],e)}();e.FS_APP_MESSAGE_CONFIG=N,e.FsAppMessageModule=le,e.FsAppMessageQueuesModule=te,e.FsAppMessageTemplatesModule=se,e.FsAppMessageWebhooksModule=oe,e.FsAppMessagesModule=W,e.MessageComponent=z,e.MessagesComponent=V,e.QueueComponent=Y,e.QueuesComponent=J,e.TemplatesComponent=ae,e.ɵa=U,e.ɵb=P,e.ɵc=N,e.ɵd=X,e.ɵe=Z,e.ɵf=ee,e.ɵg=ne,e.ɵh=ie,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/router"),require("@angular/flex-layout"),require("@angular/material/button"),require("@angular/material/core"),require("@angular/material/dialog"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/select"),require("@angular/material/tabs"),require("@angular/material/checkbox"),require("@angular/material/tooltip"),require("@firestitch/label"),require("@firestitch/dialog"),require("@firestitch/list"),require("@firestitch/skeleton"),require("@angular/forms"),require("@firestitch/form"),require("@firestitch/text-editor"),require("@firestitch/editor"),require("rxjs/operators"),require("rxjs"),require("@firestitch/filter"),require("@firestitch/message"),require("@firestitch/prompt"),require("@firestitch/iframe"),require("@angular/material/icon"),require("@firestitch/date"),require("@firestitch/selection"),require("anchorme")):"function"==typeof define&&define.amd?define("@firestitch/app-message",["exports","@angular/core","@angular/common","@angular/router","@angular/flex-layout","@angular/material/button","@angular/material/core","@angular/material/dialog","@angular/material/form-field","@angular/material/input","@angular/material/select","@angular/material/tabs","@angular/material/checkbox","@angular/material/tooltip","@firestitch/label","@firestitch/dialog","@firestitch/list","@firestitch/skeleton","@angular/forms","@firestitch/form","@firestitch/text-editor","@firestitch/editor","rxjs/operators","rxjs","@firestitch/filter","@firestitch/message","@firestitch/prompt","@firestitch/iframe","@angular/material/icon","@firestitch/date","@firestitch/selection","anchorme"],t):t(((e=e||self).firestitch=e.firestitch||{},e.firestitch["app-message"]={}),e.ng.core,e.ng.common,e.ng.router,e.ng.flexLayout,e.ng.material.button,e.ng.material.core,e.ng.material.dialog,e.ng.material.formField,e.ng.material.input,e.ng.material.select,e.ng.material.tabs,e.ng.material.checkbox,e.ng.material.tooltip,e.label,e.dialog$1,e.list,e.skeleton,e.ng.forms,e.form,e.textEditor,e.editor,e.rxjs.operators,e.rxjs,e.filter,e.message,e.prompt,e.iframe,e.ng.material.icon,e.date,e.selection,e.anchorme)}(this,(function(e,t,n,a,s,i,o,l,r,m,u,g,c,f,p,d,b,M,h,y,v,Q,w,F,_,T,I,x,C,S,D,j){"use strict";j=j&&Object.prototype.hasOwnProperty.call(j,"default")?j.default:j;var L,R=function(){return(R=Object.assign||function(e){for(var t,n=1,a=arguments.length;n<a;n++)for(var s in t=arguments[n])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)};function A(e,t,n,a){var s,i=arguments.length,o=i<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,n):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(o=(i<3?s(o):i>3?s(t,n,o):s(t,n))||o);return i>3&&o&&Object.defineProperty(t,n,o),o}function k(e,t){return function(n,a){t(n,a,e)}}function O(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function E(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var a,s,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(a=i.next()).done;)o.push(a.value)}catch(e){s={error:e}}finally{try{a&&!a.done&&(n=i.return)&&n.call(i)}finally{if(s)throw s.error}}return o}!function(e){e.Text="T",e.HTML="H",e.RichText="R"}(L||(L={}));var q=[{name:"Text",value:L.Text},{name:"HTML",value:L.HTML},{name:"Rich Text",value:L.RichText}],P=function(){function e(e){this._data=e,this.html=e.html,this.styles=e.styles}return e.prototype.ngOnInit=function(){},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]}]},e=A([t.Component({template:'<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]="html"\n      [styles]="styles">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]="null" color="primary" type="button">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n',styles:[""]}),k(0,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object])],e)}(),N=(new t.InjectionToken("fs-app-message-root-config"),new t.InjectionToken("fs-app-message-config")),z=function(){function e(e,t,n,a,s,i){var o=this;this._config=e,this._data=t,this._prompt=n,this._message=a,this._dialog=s,this._cdRef=i,this.messageTemplates=[],this.emailMessageFormats=q,this.emailMessageFormat=L,this.save=function(){return o._config.saveMessage(o.message).pipe(w.tap((function(){o._message.success("Saved Changes")})))}}return e.prototype.ngOnInit=function(){var e=this;this._config.loadMessage(this._data.message).subscribe((function(t){e.message=t,e.message.emailMessage&&void 0===e.message.emailMessage.customize&&(e.message.emailMessage.customize=!0),e.message.smsMessage&&void 0===e.message.smsMessage.customize&&(e.message.smsMessage.customize=!0),e._cdRef.markForCheck()})),this._config.loadMessageTemplates().subscribe((function(t){e.messageTemplates=t.data,e._cdRef.markForCheck()}))},e.prototype.tabChange=function(e){switch(e.tab.textLabel){case"SMS Message":this.tab="sms";break;case"Email Message":this.tab="email";break;default:this.tab=null}},e.prototype.openPreview=function(){var e=this,t=this.message.emailMessage.body,n=this.message.emailMessage.styles;if(this.message.emailMessage.messageTemplateId){var a=this.messageTemplates.find((function(t){return e.message.emailMessage.messageTemplateId===t.id}));a&&(t=a.content.replace("{$content}",t),n=a.styles.concat(n))}this._dialog.open(P,{data:{styles:n,html:t},width:"95%"})},e.prototype.sendTest=function(e){var t=this;F.of(!0).pipe(w.switchMap((function(){return"email"===e?t._config.getTestEmail():F.of("")})),w.switchMap((function(n){var a="email"===e?"an email":"phone number";return t._prompt.input({label:"Please enter "+a+" to send test to",title:"Send Test",commitLabel:"Send",default:n,required:!0})}))).subscribe((function(n){t._config.testMessage(t.message,n,e).subscribe((function(){t._message.success("Test Sent")}))}))},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]},{type:I.FsPrompt},{type:T.FsMessage},{type:l.MatDialog},{type:t.ChangeDetectorRef}]},e=A([t.Component({template:'<form\n    fsForm\n    [submit]="save"\n    #form="ngForm"\n    *fsSkeleton="message"\n    [dirtyConfirmTabs]="false">\n  <fs-dialog *ngIf="message">\n    <div mat-dialog-title>Edit Message</div>\n    <mat-dialog-content>\n\n      <mat-tab-group (selectedTabChange)="tabChange($event)">\n        <mat-tab label="General">\n          <ng-template matTabContent>\n            <div fxLayout="column">\n              <mat-form-field>\n                <input\n                  matInput\n                  placeholder="Name"\n                  [(ngModel)]="message.name"\n                  name="Name"\n                  required>\n              </mat-form-field>\n              <mat-form-field>\n                <input\n                  matInput\n                  placeholder="Description"\n                  [(ngModel)]="message.description"\n                  name="description">\n              </mat-form-field>\n\n              <div\n                fxLayout="row"\n                fxLayoutGap="10px"\n                fxLayout.xs="column"\n                fxLayout.sm="column">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="From Email"\n                    [(ngModel)]="message.emailMessage.fromEmail"\n                    name="from_email">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="From Name"\n                    [(ngModel)]="message.emailMessage.fromName"\n                    name="from_name">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="Reply To"\n                    [(ngModel)]="message.emailMessage.replyTo"\n                    name="reply_to">\n                </mat-form-field>\n              </div>\n\n              <div\n                fxLayout="row"\n                fxLayoutGap="10px"\n                fxLayout.xs="column"\n                fxLayout.sm="column">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="To"\n                    [(ngModel)]="message.emailMessage.toRecipients"\n                    name="to">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="CC"\n                    [(ngModel)]="message.emailMessage.ccRecipients"\n                    name="cc">\n                </mat-form-field>\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="BCC"\n                    [(ngModel)]="message.emailMessage.bccRecipients"\n                    name="bcc">\n                </mat-form-field>\n              </div>\n            </div>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label="Email Message" *ngIf="message.emailMessage">\n          <ng-template matTabContent>\n            <div fxLayout="column">\n              <div fxLayout="row" fxLayoutGap="10px">\n                <mat-form-field>\n                  <mat-select\n                    required\n                    placeholder="Customize Message"\n                    [(ngModel)]="message.emailMessage.customize"\n                    name="customizeEmail">\n                      <mat-option [value]="true">Yes</mat-option>\n                      <mat-option [value]="false">No</mat-option>\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-select\n                    required\n                    placeholder="Format"\n                    [(ngModel)]="message.emailMessage.format"\n                    name="format">\n                      <mat-option *ngFor="let item of emailMessageFormats" [value]="item.value">\n                        {{item.name}}\n                      </mat-option>\n                    </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-select\n                    placeholder="Template"\n                    [(ngModel)]="message.emailMessage.messageTemplateId"\n                    name="template">\n                      <mat-option [value]="null">None</mat-option>\n                      <mat-option *ngFor="let item of messageTemplates" [value]="item.id">\n                        {{item.name}}\n                      </mat-option>\n                    </mat-select>\n                </mat-form-field>\n              </div>\n              <ng-container *ngIf="message.emailMessage.customize">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder="Subject"\n                    [(ngModel)]="message.emailMessage.subject"\n                    name="name"\n                    required>\n                </mat-form-field>\n\n                <div [@.disabled]="true">\n                  <mat-tab-group [dynamicHeight]="false">\n                    <mat-tab label="Content">\n                      <ng-template matTabContent>\n                        <fs-text-editor\n                          *ngIf="message.emailMessage.format===emailMessageFormat.HTML"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="body"\n                          [config]="{ language: \'html \'}">\n                        </fs-text-editor>\n\n                        <fs-editor-rich-text\n                          *ngIf="message.emailMessage.format===emailMessageFormat.RichText"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="body">\n                        </fs-editor-rich-text>\n\n                        <fs-text-editor\n                            *ngIf="message.emailMessage.format===emailMessageFormat.Text"\n                          [(ngModel)]="message.emailMessage.body"\n                          name="emailMessageBody"\n                          [config]="{ language: \'text\' }">\n                        </fs-text-editor>\n                      </ng-template>\n                    </mat-tab>\n                    <mat-tab\n                        *ngIf="message.emailMessage.format===emailMessageFormat.HTML"\n                        label="Styles">\n                      <ng-template matTabContent>\n                        <fs-text-editor\n                          [(ngModel)]="message.emailMessage.styles"\n                          name="styles"\n                          [config]="{ language: \'scss\' }">\n                        </fs-text-editor>\n                      </ng-template>\n                    </mat-tab>\n                  </mat-tab-group>\n                </div>\n\n              </ng-container>\n\n              <ng-container *ngIf="!message.emailMessage.customize">\n                <fs-label-field>\n                  <fs-label>Subject</fs-label>\n                  {{message.defaultEmailSubject}}\n                </fs-label-field>\n                <div>\n                  <fs-label-field>\n                    <fs-label>Content</fs-label>\n                    <div\n                      class="email-body-html-default"\n                      *ngIf="message.emailMessage.format===emailMessageFormat.HTML">\n                      {{message.defaultEmailBody}}\n                    </div>\n                    <div\n                      *ngIf="message.emailMessage.format===emailMessageFormat.RichText"\n                      fsEditorRenderer\n                      name="defaultEmailBody"\n                      [ngModel]="message.defaultEmailBody">\n                    </div>\n                    <div\n                      class="email-body-text-default"\n                      *ngIf="message.emailMessage.format===emailMessageFormat.Text">\n                      {{message.defaultEmailBody}}\n                    </div>\n                  </fs-label-field>\n                </div>\n              </ng-container>\n            </div>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="SMS Message" *ngIf="message.smsMessage">\n          <ng-template matTabContent>\n            <mat-form-field>\n              <mat-select\n                required\n                placeholder="Customize Message"\n                [(ngModel)]="message.smsMessage.customize"\n                name="customizeSms">\n                  <mat-option [value]="true">Yes</mat-option>\n                  <mat-option [value]="false">No</mat-option>\n                </mat-select>\n            </mat-form-field>\n            <div\n                *ngIf="message.smsMessage.customize"\n                [@.disabled]="true">\n              <mat-tab-group [dynamicHeight]="false">\n                <mat-tab label="Content">\n                  <ng-template matTabContent>\n                    <fs-text-editor\n                      [(ngModel)]="message.smsMessage.message"\n                      name="smsMessageMessage"\n                      [config]="{ language: \'text \'}">\n                    </fs-text-editor>\n                  </ng-template>\n                </mat-tab>\n              </mat-tab-group>\n            </div>\n             <fs-label-field *ngIf="!message.smsMessage.customize">\n                <fs-label>Message</fs-label>\n                {{message.defaultSmsMessage}}\n            </fs-label-field>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="Variables" *ngIf="message.variables">\n          <ng-template matTabContent>\n            <div *ngFor="let variable of message.variables" class="variable">\n              {{variable.name}}\n            </div>\n          </ng-template>\n        </mat-tab>\n\n        <mat-tab label="Defaults">\n          <ng-template matTabContent>\n            <ng-container *ngIf="message.emailMessage">\n              <h2 *ngIf="message.emailMessage && message.smsMessage">Email</h2>\n              <fs-label-field>\n                <fs-label>Subject</fs-label>\n                <div class="content">{{message.defaultEmailSubject}}</div>\n              </fs-label-field>\n              <fs-label-field>\n                <fs-label>Content</fs-label>\n                <div class="content">{{message.defaultEmailBody}}</div>\n              </fs-label-field>\n            </ng-container>\n            <ng-container *ngIf="message.smsMessage">\n              <h2 *ngIf="message.emailMessage && message.smsMessage">SMS</h2>\n              <fs-label-field>\n                <fs-label>Content</fs-label>\n                <div class="content">{{message.defaultSmsMessage}}</div>\n              </fs-label-field>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\n\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button color="primary">Save</button>\n      <button\n          *ngIf="tab===\'email\' && message.emailMessage.format===emailMessageFormat.HTML"\n          mat-button\n          type="button"\n          (click)="openPreview()"\n          type="button">\n        Preview\n      </button>\n      <button\n          *ngIf="tab===\'email\'"\n          mat-button\n          type="button"\n          (click)="sendTest(\'email\')"\n          type="button">\n        Send Test Email\n      </button>\n      <button\n          *ngIf="tab===\'sms\'"\n          mat-button\n          type="button"\n          (click)="sendTest(\'sms\')"\n          type="button">\n        Send Test SMS\n      </button>\n      <button mat-button [mat-dialog-close]="null" type="button">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:["fs-label-field .content{white-space:pre-wrap}:host ::ng-deep .mat-tab-body,:host ::ng-deep .mat-tab-body-content{overflow:visible}:host ::ng-deep .sms-message{width:100%}:host ::ng-deep .email-body-html-default,:host ::ng-deep .email-body-text-default{white-space:pre-line}.email-body-text{width:100%}.variable{margin-bottom:4px}"]}),k(0,t.Inject(N)),k(1,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object,Object,I.FsPrompt,T.FsMessage,l.MatDialog,t.ChangeDetectorRef])],e)}();function $(e){var t={};return e.forEach((function(e){t[e.value]=e.name})),t}var H,B=function(){function e(e,t){this._config=e,this._dialog=t,this.list=null,this.config=null,this.emailMessageFormats={},this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.emailMessageFormats=$(q),this.config={filters:[{name:"keyword",type:_.ItemType.Keyword,label:"Search"}],fetch:function(t){return e._config.loadMessages(t).pipe(w.map((function(e){return{data:e.data,paging:e.paging}})))}}},e.prototype.open=function(e){var t=this;this._dialog.open(z,{data:{message:e},width:"85%"}).afterClosed().pipe(w.takeUntil(this._destroy$)).subscribe((function(e){e&&t.list.updateData(e,(function(t){return t.id===e.id}))}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-messages",template:'<fs-list [config]="config">\n  <fs-list-column title="Name" name="name" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      <a (click)="open(row)">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title="Email Format">\n    <ng-template fs-list-cell let-row="row">\n      {{emailMessageFormats[row.emailMessage.format]}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog])],e)}(),G=function(){function e(){}return e=A([t.NgModule({imports:[l.MatDialogModule,i.MatButtonModule,d.FsDialogModule,x.FsIFrameModule],declarations:[P],exports:[P]})],e)}(),U=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,n.CommonModule,h.FormsModule,l.MatDialogModule,i.MatButtonModule,g.MatTabsModule,r.MatFormFieldModule,m.MatInputModule,o.MatOptionModule,u.MatSelectModule,f.MatTooltipModule,c.MatCheckboxModule,d.FsDialogModule,b.FsListModule,p.FsLabelModule,s.FlexLayoutModule,M.FsSkeletonModule,y.FsFormModule,v.FsTextEditorModule,Q.FsEditorRichTextModule,G],declarations:[B,z],exports:[B,z]})],e)}();!function(e){e.Sent="S",e.PartiallySent="P",e.Sending="E",e.Queued="Q",e.Canceled="C",e.InvalidRecipients="I",e.Failed="F"}(H||(H={}));var V,W,K=[{name:"Sent",value:H.Sent},{name:"Partially Sent",value:H.PartiallySent},{name:"Sending",value:H.Sending},{name:"Queued",value:H.Queued},{name:"Canceled",value:H.Canceled},{name:"Invalid Recipients",value:H.InvalidRecipients},{name:"Failed",value:H.Failed}];!function(e){e.Text="T",e.HTML="H",e.RichText="R"}(V||(V={})),function(e){e.Sms="S",e.Email="E"}(W||(W={}));var Y=function(){function e(e,t,n,a,s){this._config=e,this._message=t,this._prompt=n,this._dialog=a,this._data=s,this.messageQueueRecipients={},this.emailMessageQueueFormat=V,this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.messageQueueStates=$(K),this.resendMessageQueue=this._config.resendMessageQueue,this.forwardMessageQueue=this._config.forwardMessageQueue,this._config.loadMessageQueue(this._data.messageQueueId).subscribe((function(t){if(e.messageQueue=t,e.messageQueue.emailMessageQueue){var n=e.messageQueue.emailMessageQueue.body;if(e.messageQueue.emailMessageQueue.format===V.HTML)try{var a=(new DOMParser).parseFromString(n,"text/html");a.querySelectorAll("a").forEach((function(e){e.setAttribute("target","_blank")})),n=a.documentElement.innerHTML}catch(e){}else n=e.anchorme(n);e.messageQueue.emailMessageQueue.body=n}e.messageQueue.smsMessageQueue&&(e.messageQueue.smsMessageQueue.body=e.anchorme(e.messageQueue.smsMessageQueue.body)),e.messageQueueRecipients=e.messageQueue.messageQueueRecipients.reduce((function(e,t){return e[t.recipient]=t.state,e}),{}),e._setLogsConfig(t),e._setAttachmentsConfig(t)}))},e.prototype.anchorme=function(e){return j(e,{options:{attributes:[{name:"target",value:"_blank"}]}})},e.prototype.openMessage=function(e){this._dialog.open(z,{data:{message:e},width:"85%"})},e.prototype.resend=function(){var e=this;this._prompt.confirm({title:"Confirm",template:"Are you sure you would like to resend this message?"}).subscribe((function(){e.resendMessageQueue(e.messageQueue).subscribe((function(t){Object.assign(e.messageQueue,t),e._message.success("Successfully resent"),e.logList&&e.logList.reload()}))}))},e.prototype.forward=function(){var e=this,t=this.messageQueue.type===W.Email?"an email":"a phone number";this._prompt.input({label:"Please enter "+t+" to forward to",title:"Forward Message",commitLabel:"Forward",required:!0}).subscribe((function(t){t&&e.forwardMessageQueue(e.messageQueue,t).subscribe((function(t){e.messageQueue=R(R({},e.messageQueue),{messageQueue:t}),e._message.success("Successfully forwarded"),e.logList&&e.logList.reload()}))}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.prototype._setLogsConfig=function(e){var t=this;this.logConfig={loadMore:!0,queryParam:!1,fetch:function(n){return t._config.loadLogs(e,n)}}},e.prototype._setAttachmentsConfig=function(e){var t=this;this.attachmentConfig={queryParam:!1,fetch:function(n){return t._config.loadMessageQueueAttachments(e,n).pipe(w.map((function(e){return{data:e.data.map((function(e){return e.prettyFilesize=t._prettyFilesize(e.filesize),e})),paging:e.paging}})))}},this._config.downloadMessageQueueAttachment&&(this.attachmentConfig.rowActions=[{click:function(e){t._config.downloadMessageQueueAttachment(e,t.messageQueue)},label:"Download"}])},e.prototype._prettyFilesize=function(e){if(0===e)return"0.00 B";var t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(2)+" "+" KMGTP".charAt(t)+"B"},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:T.FsMessage},{type:I.FsPrompt},{type:l.MatDialog},{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]}]},A([t.ViewChild("logList"),O("design:type",b.FsListComponent)],e.prototype,"logList",void 0),e=A([t.Component({template:'<fs-dialog *fsSkeleton="messageQueue">\n  <div mat-dialog-title>Message Queue</div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label="Overview">\n        <ng-template matTabContent>\n          <div fxLayout="row wrap" fxLayoutGap="25px">\n            <ng-container *ngIf="messageQueue.emailMessageQueue">\n              <fs-label-field>\n                <fs-label>\n                  To Recipients\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.toRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>\n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.ccRecipients.length">\n                <fs-label>\n                  CC\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.ccRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.bccRecipients.length">\n                <fs-label>\n                  BCC\n                </fs-label>\n                <app-recipient \n                  *ngFor="let recipient of messageQueue.emailMessageQueue.bccRecipients"\n                  [state]="messageQueueRecipients[recipient]"\n                  [name]="recipient">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.fromName || messageQueue.emailMessageQueue.fromEmail">\n                <fs-label>\n                  From\n                </fs-label>\n                <ng-container *ngIf="messageQueue.emailMessageQueue.fromName === messageQueue.emailMessageQueue.fromEmail; else fromEmailName">\n                  {{messageQueue.emailMessageQueue.fromName}}\n                </ng-container>\n\n                <ng-template #fromEmailName>\n                  {{messageQueue.emailMessageQueue.fromName}}\n                  <ng-container *ngIf="messageQueue.emailMessageQueue.fromEmail">\n                    ({{messageQueue.emailMessageQueue.fromEmail}})\n                  </ng-container>\n                </ng-template>\n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.emailMessageQueue.replyEmail && messageQueue.emailMessageQueue.replyEmail.length">\n                <fs-label>\n                  Reply To\n                </fs-label>\n                {{messageQueue.emailMessageQueue.replyEmail.join(\', \')}}\n              </fs-label-field>\n            </ng-container>\n\n            <ng-container *ngIf="messageQueue.smsMessageQueue">\n              <fs-label-field>\n                <fs-label>\n                  To Number\n                </fs-label>\n                <app-recipient \n                  [state]="messageQueue.state"\n                  [name]="messageQueue.smsMessageQueue.toNumber">\n                </app-recipient>                 \n              </fs-label-field>\n\n              <fs-label-field *ngIf="messageQueue.smsMessageQueue.fromNumber">\n                <fs-label>\n                  From Number\n                </fs-label>\n                {{messageQueue.smsMessageQueue.fromNumber}}\n              </fs-label-field>\n            </ng-container>\n  \n            <fs-label-field>\n              <fs-label>\n                Date\n              </fs-label>\n              {{messageQueue.scheduledDate | fsDateFormat: \'full-date-time\'}}\n            </fs-label-field>\n\n            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{messageQueueStates[messageQueue.state]}}\n            </fs-label-field>\n\n            <fs-label-field *ngIf="messageQueue.message">\n              <fs-label>\n                Message Type\n              </fs-label>\n              <a\n                (click)="openMessage(messageQueue.message)"\n                *ngIf="loadMessage; else elseMessage">\n                {{messageQueue.message.name}}\n              </a>\n              <ng-template #elseMessage>\n                {{messageQueue.message.name}}\n              </ng-template>\n            </fs-label-field>\n          </div>\n\n          <ng-container *ngIf="messageQueue.emailMessageQueue">\n            <fs-label-field class="subject">\n              <fs-label>\n                Subject\n              </fs-label>\n              {{messageQueue.emailMessageQueue.subject}}\n            </fs-label-field>\n\n            <fs-label-field class="body">\n              <fs-label>\n                Body\n              </fs-label>\n              <div\n                  *ngIf="messageQueue.emailMessageQueue.format===emailMessageQueueFormat.Text"\n                  class="format-text"\n                  [innerHTML]="messageQueue.emailMessageQueue.body">\n              </div>\n              <fs-iframe\n                *ngIf="messageQueue.emailMessageQueue.format===emailMessageQueueFormat.HTML || messageQueue.emailMessageQueue.format===emailMessageQueueFormat.RichText"\n                [html]="messageQueue.emailMessageQueue.body">\n              </fs-iframe>\n            </fs-label-field>\n          </ng-container>\n\n          <ng-container *ngIf="messageQueue.smsMessageQueue">\n            <fs-label-field>\n              <fs-label>\n                Message\n              </fs-label>\n              <div\n                class="format-text"\n                [innerHTML]="messageQueue.smsMessageQueue.body">\n              </div>\n            </fs-label-field>\n          </ng-container>\n\n        </ng-template>\n      </mat-tab>\n      <mat-tab label="Logs">\n        <ng-template matTabContent>\n          <fs-list [config]="logConfig" #logList>\n            <fs-list-column title="Message">\n              <ng-template fs-list-cell let-row="row">\n                {{row.message}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title="Date">\n              <ng-template fs-list-cell let-row="row">\n                <fs-date-ago [date]="row.createdDate"></fs-date-ago>\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label="Attachments">\n        <ng-template matTabContent>\n          <fs-list [config]="attachmentConfig">\n            <fs-list-column title="File Name">\n              <ng-template fs-list-cell let-row="row">\n                {{row.filename}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title="File Size">\n              <ng-template fs-list-cell let-row="row">\n                {{row.prettyFilesize}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]="null"\n        color="primary">\n      Done\n    </button>\n    <button\n        mat-button\n        *ngIf="resendMessageQueue"\n        type="button"\n        (click)="resend()"\n        type="button">\n      Resend\n    </button>\n    <button\n        mat-button\n        *ngIf="forwardMessageQueue"\n        type="button"\n        (click)="forward()"\n        type="button">\n      Forward\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n',styles:[".body,.subject{display:block;margin-top:15px}.body .format-text{white-space:pre-wrap}.body .body-frame{border:0}.body ::ng-deep .field-label{margin-bottom:10px}app-recipient{display:block}[hidden]{display:none!important}"]}),k(0,t.Inject(N)),k(4,t.Inject(l.MAT_DIALOG_DATA)),O("design:paramtypes",[Object,T.FsMessage,I.FsPrompt,l.MatDialog,Object])],e)}(),J=function(){function e(e){this._dialog=e,this._destroy$=new F.Subject}return e.prototype.openMessageQueue=function(e,t){return void 0===t&&(t={}),this._dialog.open(Y,R(R({},t),{data:{messageQueueId:e},width:t.width||"85%"})).afterClosed().pipe(w.takeUntil(this._destroy$))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:l.MatDialog}]},e=A([t.Injectable(),O("design:paramtypes",[l.MatDialog])],e)}(),X=function(){function e(e,t,n){this._config=e,this._dialog=t,this._messageQueueService=n,this.list=null,this.query={},this.config=null,this.messageQueueStates={},this.MessageQueueState=H,this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.messageQueueStates=$(K),this.config={filters:[{name:"keyword",type:_.ItemType.Keyword,label:"Search"},{name:"state",type:_.ItemType.Select,label:"Status",values:function(){return K}},{name:"date",type:_.ItemType.DateRange,label:["From Date","To Date"]}],sort:{value:"created_date",direction:"desc"},fetch:function(t){return t=R(R(R({},t),e.query),{messageQueueAttachmentCounts:!0,emailMessageQueues:!0,emailMessageQueueBodies:!1,smsMessageQueues:!0}),e._config.loadMessageQueues(t).pipe(w.map((function(e){return{data:e.data.map((function(e){return R(R({},e),{messageQueueRecipients:e.messageQueueRecipients.reduce((function(e,t){return e[t.recipient]=t.state,e}),{})})})),paging:e.paging}})))}},this._config.cancelMessageQueues&&(this.config.selection={selectAll:!1,actions:[],actionSelected:function(t){return F.of(!0).pipe(w.switchMap((function(){return"cancel"===t.action.name?e._config.cancelMessageQueues(t):F.of(!0)})),w.tap((function(){e.list.reload()})))}}),this._config.cancelMessageQueues&&this.config.selection.actions.push({type:D.SelectionActionType.Action,name:"cancel",label:"Cancel Queued"}),this.config.filters.push({name:"message_id",type:_.ItemType.Select,label:"Message Type",values:function(t){return t=R(R({},t),{limit:50}),e._config.loadMessages(t).pipe(w.map((function(e){return function(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(E(arguments[t]));return e}([{value:null,name:"All"}],e.data.map((function(e){return{name:e.name,value:e.id}})))})))}})},e.prototype.open=function(e){var t=this;this._messageQueueService.openMessageQueue(e.id).pipe(w.takeUntil(this._destroy$)).subscribe((function(){t.list.reload()}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog},{type:J}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),A([t.Input(),O("design:type",Object)],e.prototype,"query",void 0),e=A([t.Component({selector:"fs-app-message-queues",template:'<fs-list [config]="config" #list>\n  <fs-list-column title="Message" name="subject" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      <ng-container *ngIf="row.emailMessageQueue">\n        <div fxLayout="row" fxLayoutAlign="start center">\n          <a (click)="open(row)">{{row.emailMessageQueue.subject|truncate:100}}</a>\n          <mat-icon *ngIf="row.messageQueueAttachmentCount" [matTooltip]="row.messageQueueAttachmentCount + \' Attachment(s)\'">attach_file</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="row.smsMessageQueue">\n        <a (click)="open(row)">{{row.smsMessageQueue.body|truncate:100}}</a>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title="Recipients" class="col-recipients">\n    <ng-template fs-list-cell let-row="row">\n      <ng-container *ngIf="row.emailMessageQueue">\n        <ng-container *ngIf="row.emailMessageQueue.toRecipients.length; else unspecified">\n          <div class="small" *ngFor="let recipient of row.emailMessageQueue.toRecipients">\n            <app-recipient \n              [state]="row.messageQueueRecipients[recipient] || row.state"\n              [name]="recipient">\n            </app-recipient>\n          </div>\n        </ng-container>\n        <div class="small" *ngFor="let recipient of row.emailMessageQueue.ccRecipients">\n          <app-recipient \n            [state]="row.messageQueueRecipients[recipient] || row.state"\n            [name]="recipient">\n          </app-recipient>\n        </div>\n        <div class="small" *ngFor="let recipient of row.emailMessageQueue.bccRecipients">\n          <app-recipient             \n            [state]="row.messageQueueRecipients[recipient] || row.state"\n            [name]="recipient">\n          </app-recipient>\n        </div>\n      </ng-container>\n      <ng-container *ngIf="row.smsMessageQueue">\n        <ng-container *ngIf="row.smsMessageQueue.toNumber; else unspecified">\n          <app-recipient \n            class="small"\n            [state]="row.state"\n            [name]="row.smsMessageQueue.toNumber">\n          </app-recipient>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title="Status" class="col-state">\n    <ng-template fs-list-cell let-row="row">\n      <span [class]="\'state-\' + row.state">{{messageQueueStates[row.state]}}</span>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title="Date" name="created_date" sortable="true">\n    <ng-template fs-list-cell let-row="row">\n      {{ row.createdDate | fsDateFormat: \'date-time-yeardiff\' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n\n<ng-template #unspecified>\n  <app-recipient \n    class="small"\n    [state]="MessageQueueState.Failed"\n    name="Unspecified">\n  </app-recipient>\n</ng-template>',styles:[':host ::ng-deep .col-recipients small+small:before{content:", "}:host ::ng-deep .col-state .state-F,:host ::ng-deep .col-state .state-P{color:#d8524e}']}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog,J])],e)}(),Z=function(){function e(){}return e.prototype.ngOnInit=function(){this.icon={S:{name:"check_circle",tooltip:"Sent"},E:{name:"offline_bolt",tooltip:"Sending"},F:{name:"info",tooltip:"Failed"}}[this.state]},A([t.Input(),O("design:type",Object)],e.prototype,"name",void 0),A([t.Input(),O("design:type",Object)],e.prototype,"state",void 0),e=A([t.Component({selector:"app-recipient",template:'<span class="recipient">\n  <span class="name">{{name}}</span>\n  <mat-icon *ngIf="icon" [class]="\'state-\' + state" [matTooltip]="icon.tooltip">{{icon.name}}</mat-icon>\n</span>',styles:["mat-icon{font-size:14px;width:14px;height:14px;line-height:normal;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}"]})],e)}(),ee=function(){function e(){}return e.prototype.transform=function(e){return j(e,{attributes:[{name:"target",value:"_blank"}]})},e=A([t.Pipe({name:"linkify"})],e)}(),te=function(){function e(){}return e.prototype.transform=function(e,t,n,a){return void 0===t&&(t=25),void 0===n&&(n=!1),void 0===a&&(a="..."),e.length<t?""+e.substr(0,t):(n&&(t=e.substr(0,t).lastIndexOf(" ")),""+e.substr(0,t)+a)},e=A([t.Pipe({name:"truncate"})],e)}(),ne=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,h.FormsModule,n.CommonModule,s.FlexLayoutModule,f.MatTooltipModule,l.MatDialogModule,i.MatButtonModule,C.MatIconModule,g.MatTabsModule,b.FsListModule,d.FsDialogModule,p.FsLabelModule,S.FsDateModule,M.FsSkeletonModule,U,y.FsFormModule,I.FsPromptInputModule,x.FsIFrameModule],declarations:[X,Y,ee,te,Z],exports:[X,Y],providers:[J]})],e)}(),ae=function(){function e(e,t,n,a,s){var i=this;this._data=e,this._config=t,this._dialogRef=n,this._message=a,this._dialog=s,this.htmlEditorconfig={language:"html",insertSpaces:!0,tabSize:2},this.cssEditorconfig={language:"scss",insertSpaces:!0,tabSize:2},this.save=function(e){return i._config.saveMessageTemplate(i.messageTemplate).pipe(w.tap((function(t){i._message.success("Saved Changes"),"save-close"===e.submitter&&i._dialogRef.close(t)})))}}return e.prototype.ngOnInit=function(){var e=this;this._data.messageTemplate.id?this._config.loadMessageTemplate(this._data.messageTemplate).subscribe((function(t){e.messageTemplate=t})):this.messageTemplate={}},e.prototype.openPreview=function(){this._dialog.open(P,{data:{styles:this.messageTemplate.styles,html:this.messageTemplate.content},width:"95%"})},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[l.MAT_DIALOG_DATA]}]},{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialogRef},{type:T.FsMessage},{type:l.MatDialog}]},e=A([t.Component({template:'<form\n    fsForm\n    [submit]="save"\n    #form="ngForm"\n    *fsSkeleton="messageTemplate"\n    [dirtyConfirmTabs]="false">\n  <fs-dialog *ngIf="messageTemplate">\n    <div mat-dialog-title>Message Template</div>\n    <mat-dialog-content>\n      <mat-form-field class="name">\n        <input\n          matInput\n          placeholder="Name"\n          [(ngModel)]="messageTemplate.name"\n          name="name"\n          >\n      </mat-form-field>\n      <div [@.disabled]="true">\n        <mat-tab-group\n            mat-align-tabs="start"\n            [dynamicHeight]="false">\n          <mat-tab label="Content">\n            <ng-template matTabContent>\n              <div class="content">\n                <fs-label-field>\n                  <fs-text-editor\n                    [(ngModel)]="messageTemplate.content"\n                    name="body"\n                    [config]="htmlEditorconfig">\n                  </fs-text-editor>\n                  <fs-label-message>\n                    &#123;$content&#125; will be replaced with the message content.\n                  </fs-label-message>\n                </fs-label-field>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab label="Styles">\n            <ng-template matTabContent>\n              <div class="styles">\n                <fs-text-editor\n                  [(ngModel)]="messageTemplate.styles"\n                  name="styles"\n                  [config]="cssEditorconfig">\n                </fs-text-editor>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button color="primary" name="close">Save</button>\n      <button mat-button name="save-close">Save & Close</button>\n      <button mat-button (click)="openPreview()" type="button">Preview</button>\n      <button mat-button [mat-dialog-close]="null" type="button">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n',styles:[".name{width:100%}:host ::ng-deep .mat-tab-body,:host ::ng-deep .mat-tab-body-content{overflow:visible}"]}),k(0,t.Inject(l.MAT_DIALOG_DATA)),k(1,t.Inject(N)),O("design:paramtypes",[Object,Object,l.MatDialogRef,T.FsMessage,l.MatDialog])],e)}(),se=function(){function e(e,t){this._config=e,this._dialog=t,this.list=null,this.config=null,this.messageQueueStates=[],this._destroy$=new F.Subject}return e.prototype.ngOnInit=function(){var e=this;this.config={actions:[{label:"Create",click:function(){e.open({})}}],status:!1,fetch:function(t){return e._config.loadMessageTemplates(t)}},this._config.deleteMessageTemplate&&(this.config.rowActions=[{click:function(t){return e._config.deleteMessageTemplate(t)},remove:{title:"Confirm",template:"Are you sure you would like to delete this template?"},menu:!0,label:"Delete"}])},e.prototype.open=function(e){var t=this;this._dialog.open(ae,{data:{messageTemplate:e},width:"85%"}).afterClosed().pipe(w.takeUntil(this._destroy$)).subscribe((function(e){e&&(t.list.updateData(e,(function(t){return t.id===e.id}))||t.list.reload())}))},e.prototype.ngOnDestroy=function(){this._destroy$.next(),this._destroy$.complete()},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:l.MatDialog}]},A([t.ViewChild(b.FsListComponent,{static:!0}),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-message-templates",template:'<fs-list [config]="config">\n  <fs-list-column title="Name">\n    <ng-template fs-list-cell let-row="row">\n      <a (click)="open(row)">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,l.MatDialog])],e)}(),ie=function(){function e(){}return e=A([t.NgModule({imports:[a.RouterModule,n.CommonModule,h.FormsModule,f.MatTooltipModule,l.MatDialogModule,i.MatButtonModule,g.MatTabsModule,r.MatFormFieldModule,r.MatFormFieldModule,m.MatInputModule,b.FsListModule,d.FsDialogModule,p.FsLabelModule,s.FlexLayoutModule,M.FsSkeletonModule,y.FsFormModule,v.FsTextEditorModule,G],declarations:[se,ae],exports:[se,ae]})],e)}(),oe=function(){function e(e,t){this._config=e,this._message=t}return e.prototype.ngOnInit=function(){var e=this;this.listConfig={paging:!1,actions:[{click:function(){e._config.createWebhook().subscribe((function(){e._message.success("Created webhook"),e.list.reload()}))},label:"Create"}],rowActions:[{click:function(t){e._config.deleteWebhook(t).subscribe((function(){e._message.success("Deleted webhook"),e.list.reload()}))},label:"Delete"}],fetch:function(){return e._config.loadWebhooks().pipe(w.map((function(e){return{data:e}})))}}},e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[N]}]},{type:T.FsMessage}]},A([t.ViewChild(b.FsListComponent),O("design:type",b.FsListComponent)],e.prototype,"list",void 0),e=A([t.Component({selector:"fs-app-message-webhooks",template:'<fs-list [config]="listConfig">\r\n  <fs-list-column title="URL">\r\n    <ng-template fs-list-cell let-row="row">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title="Created">\r\n    <ng-template fs-list-cell let-row="row">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>'}),k(0,t.Inject(N)),O("design:paramtypes",[Object,T.FsMessage])],e)}(),le=function(){function e(){}return e=A([t.NgModule({imports:[b.FsListModule,S.FsDateModule],declarations:[oe],exports:[oe]})],e)}(),re=function(){function e(){}var n;return n=e,e.forRoot=function(){return{ngModule:n}},e=n=A([t.NgModule({})],e)}();e.FS_APP_MESSAGE_CONFIG=N,e.FsAppMessageModule=re,e.FsAppMessageQueuesModule=ne,e.FsAppMessageTemplatesModule=ie,e.FsAppMessageWebhooksModule=le,e.FsAppMessagesModule=U,e.FsMessageQueueService=J,e.MessageComponent=z,e.MessagesComponent=B,e.QueueComponent=Y,e.QueuesComponent=X,e.TemplatesComponent=se,e.ɵa=G,e.ɵb=P,e.ɵc=N,e.ɵd=ee,e.ɵe=te,e.ɵf=Z,e.ɵg=ae,e.ɵh=oe,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=firestitch-app-message.umd.min.js.map