@firestitch/app-message 9.1.3 → 9.2.0

package/app/modules/app-message/interfaces/app-message-config.d.ts

@@ -1,10 +1,11 @@
 import { FsListActionSelected } from "@firestitch/list";
 import { Observable } from "rxjs";
-import { DeleteMessageTemplate, DownloadMessageQueueAttachment, ForwardMessageQueue, LoadMessageQueueAttachments, LoadLogs, LoadMessage, LoadMessageQueue, LoadMessageQueues, LoadMessages, LoadMessageTemplate, LoadMessageTemplates, ResendMessageQueue, SaveMessage, SaveMessageTemplate, TestMessage, DeleteWebhook, CreateWebhook, LoadWebhooks } from "../types";
+import { DeleteMessageTemplate, DownloadMessageQueueAttachment, ForwardMessageQueue, LoadMessageQueueAttachments, LoadLogs, LoadMessage, LoadMessageQueue, LoadMessageQueues, LoadMessages, LoadMessageTemplate, LoadMessageTemplates, ResendMessageQueue, SaveMessage, SaveMessageTemplate, TestMessage, DeleteWebhook, CreateWebhook, LoadWebhooks, LoadMessageQueueEvents } from "../types";
 export interface FsAppMessageConfig {
     loadMessages: LoadMessages;
     loadMessageQueues: LoadMessageQueues;
     loadMessageQueue: LoadMessageQueue;
+    loadMessageQueueEvents: LoadMessageQueueEvents;
     loadLogs: LoadLogs;
     loadMessageQueueAttachments: LoadMessageQueueAttachments;
     downloadMessageQueueAttachment: DownloadMessageQueueAttachment;

package/app/modules/app-message/types/types.type.d.ts

@@ -12,6 +12,10 @@ export declare type LoadMessageQueues = (query: any) => Observable<{
     data: any[];
     paging: any;
 }>;
+export declare type LoadMessageQueueEvents = (messageQueue: any, query: any) => Observable<{
+    data: any[];
+    paging: any;
+}>;
 export declare type LoadMessageQueue = (messageQueue: any) => Observable<any>;
 export declare type LoadLogs = (messageQueue: any, query: any) => Observable<{
     data: any[];

package/app/modules/message-queues/components/queue/queue.component.d.ts

@@ -3,7 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { FsMessage } from '@firestitch/message';
 import { FsPrompt } from '@firestitch/prompt';
 import { FsListComponent, FsListConfig } from '@firestitch/list';
-import { EmailMessageQueueFormat } from '../../enums';
+import { EmailMessageQueueFormat, MessageQueueEventType } from '../../enums';
 import { FsAppMessageConfig } from '../../../app-message/interfaces';
 import { ResendMessageQueue, ForwardMessageQueue, LoadMessage } from '../../../app-message/types';
 export declare class QueueComponent implements OnInit, OnDestroy {
@@ -22,15 +22,19 @@ export declare class QueueComponent implements OnInit, OnDestroy {
     messageQueueStates: any;
     logConfig: FsListConfig;
     attachmentConfig: FsListConfig;
+    eventConfig: FsListConfig;
+    MessageQueueEventTypes: {};
+    MessageQueueEventType: typeof MessageQueueEventType;
     private _destroy$;
     constructor(_config: FsAppMessageConfig, _message: FsMessage, _prompt: FsPrompt, _dialog: MatDialog, _data: any);
     ngOnInit(): void;
-    anchorme(html: any): any;
+    anchorMe(html: any): any;
     openMessage(message: any): void;
     resend(): void;
     forward(): void;
     ngOnDestroy(): void;
     private _setLogsConfig;
+    private _setEventsConfig;
     private _setAttachmentsConfig;
     private _prettyFilesize;
 }

package/app/modules/message-queues/components/queues/queues.component.d.ts

@@ -3,16 +3,18 @@ import { MatDialog } from '@angular/material/dialog';
 import { FsListComponent, FsListConfig } from '@firestitch/list';
 import { MessageQueueState } from '../../enums/message-queue-state.enum';
 import { FsAppMessageConfig } from '../../../app-message/interfaces';
+import { FsMessageQueueService } from '../../services/message-queue.service';
 export declare class QueuesComponent implements OnInit, OnDestroy {
     private _config;
     private _dialog;
+    private _messageQueueService;
     list: FsListComponent;
     query: {};
     config: FsListConfig;
     messageQueueStates: {};
     MessageQueueState: typeof MessageQueueState;
     private _destroy$;
-    constructor(_config: FsAppMessageConfig, _dialog: MatDialog);
+    constructor(_config: FsAppMessageConfig, _dialog: MatDialog, _messageQueueService: FsMessageQueueService);
     ngOnInit(): void;
     open(messageQueue: any): void;
     ngOnDestroy(): void;

package/app/modules/message-queues/consts/message-queue-event-type.const.d.ts

@@ -0,0 +1,5 @@
+import { MessageQueueEventType } from "../enums";
+export declare const MessageQueueEventTypes: {
+    name: string;
+    value: MessageQueueEventType;
+}[];

package/app/modules/message-queues/enums/index.d.ts

@@ -1,2 +1,3 @@
 export * from './email-message-queue-format.enum';
 export * from './message-queue-type.enum';
+export * from './message-queue-event-type.enum';

package/app/modules/message-queues/enums/message-queue-event-type.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum MessageQueueEventType {
+    Click = "click",
+    Open = "open"
+}

package/app/modules/message-queues/services/message-queue.service.d.ts

@@ -0,0 +1,9 @@
+import { OnDestroy } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+export declare class FsMessageQueueService implements OnDestroy {
+    private _dialog;
+    private _destroy$;
+    constructor(_dialog: MatDialog);
+    openMessageQueue(messageQueueId: number, options?: any): import("rxjs").Observable<any>;
+    ngOnDestroy(): void;
+}

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

@@ -427,12 +427,8 @@
             });
             dialogRef.afterClosed()
                 .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (response) {
-                if (response) {
-                    _this.list.updateData(response, function (row) {
-                        return row.id === response.id;
-                    });
-                }
+                .subscribe(function () {
+                _this.list.reload();
             });
         };
         MessagesComponent.prototype.ngOnDestroy = function () {
@@ -521,19 +517,6 @@
         return FsAppMessagesModule;
     }());
 
-    var EmailMessageQueueFormat;
-    (function (EmailMessageQueueFormat) {
-        EmailMessageQueueFormat["Text"] = "T";
-        EmailMessageQueueFormat["HTML"] = "H";
-        EmailMessageQueueFormat["RichText"] = "R";
-    })(EmailMessageQueueFormat || (EmailMessageQueueFormat = {}));
-
-    var MessageQueueType;
-    (function (MessageQueueType) {
-        MessageQueueType["Sms"] = "S";
-        MessageQueueType["Email"] = "E";
-    })(MessageQueueType || (MessageQueueType = {}));
-
     var MessageQueueState;
     (function (MessageQueueState) {
         MessageQueueState["Sent"] = "S";
@@ -555,6 +538,30 @@
         { name: 'Failed', value: MessageQueueState.Failed }
     ];
 
+    var EmailMessageQueueFormat;
+    (function (EmailMessageQueueFormat) {
+        EmailMessageQueueFormat["Text"] = "T";
+        EmailMessageQueueFormat["HTML"] = "H";
+        EmailMessageQueueFormat["RichText"] = "R";
+    })(EmailMessageQueueFormat || (EmailMessageQueueFormat = {}));
+
+    var MessageQueueType;
+    (function (MessageQueueType) {
+        MessageQueueType["Sms"] = "S";
+        MessageQueueType["Email"] = "E";
+    })(MessageQueueType || (MessageQueueType = {}));
+
+    var MessageQueueEventType;
+    (function (MessageQueueEventType) {
+        MessageQueueEventType["Click"] = "click";
+        MessageQueueEventType["Open"] = "open";
+    })(MessageQueueEventType || (MessageQueueEventType = {}));
+
+    var MessageQueueEventTypes = [
+        { name: 'Open', value: MessageQueueEventType.Open },
+        { name: 'Click', value: MessageQueueEventType.Click },
+    ];
+
     var QueueComponent = /** @class */ (function () {
         function QueueComponent(_config, _message, _prompt, _dialog, _data) {
             this._config = _config;
@@ -564,6 +571,8 @@
             this._data = _data;
             this.messageQueueRecipients = {};
             this.emailMessageQueueFormat = EmailMessageQueueFormat;
+            this.MessageQueueEventTypes = indexNameValue(MessageQueueEventTypes);
+            this.MessageQueueEventType = MessageQueueEventType;
             this._destroy$ = new rxjs.Subject();
         }
         QueueComponent.prototype.ngOnInit = function () {
@@ -571,7 +580,7 @@
             this.messageQueueStates = indexNameValue(MessageQueueStates);
             this.resendMessageQueue = this._config.resendMessageQueue;
             this.forwardMessageQueue = this._config.forwardMessageQueue;
-            this._config.loadMessageQueue(this._data.messageQueue.id)
+            this._config.loadMessageQueue(this._data.messageQueueId)
                 .subscribe(function (messageQueue) {
                 _this.messageQueue = messageQueue;
                 if (_this.messageQueue.emailMessageQueue) {
@@ -588,12 +597,12 @@
                         }
                     }
                     else {
-                        body = _this.anchorme(body);
+                        body = _this.anchorMe(body);
                     }
                     _this.messageQueue.emailMessageQueue.body = body;
                 }
                 if (_this.messageQueue.smsMessageQueue) {
-                    _this.messageQueue.smsMessageQueue.body = _this.anchorme(_this.messageQueue.smsMessageQueue.body);
+                    _this.messageQueue.smsMessageQueue.body = _this.anchorMe(_this.messageQueue.smsMessageQueue.body);
                 }
                 _this.messageQueueRecipients = _this.messageQueue.messageQueueRecipients
                     .reduce(function (accum, messageQueueRecipient) {
@@ -602,9 +611,10 @@
                 }, {});
                 _this._setLogsConfig(messageQueue);
                 _this._setAttachmentsConfig(messageQueue);
+                _this._setEventsConfig(messageQueue);
             });
         };
-        QueueComponent.prototype.anchorme = function (html) {
+        QueueComponent.prototype.anchorMe = function (html) {
             return anchorme(html, {
                 options: {
                     attributes: [
@@ -675,6 +685,16 @@
                 }
             };
         };
+        QueueComponent.prototype._setEventsConfig = function (messageQueue) {
+            var _this = this;
+            this.eventConfig = {
+                loadMore: true,
+                queryParam: false,
+                fetch: function (query) {
+                    return _this._config.loadMessageQueueEvents(messageQueue, query);
+                }
+            };
+        };
         QueueComponent.prototype._setAttachmentsConfig = function (messageQueue) {
             var _this = this;
             this.attachmentConfig = {
@@ -720,7 +740,7 @@
         ], QueueComponent.prototype, "logList", void 0);
         QueueComponent = __decorate([
             core.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",
+                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 label=\"Events\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"eventConfig\">\n            <fs-list-column title=\"Event\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{MessageQueueEventTypes[row.type]}}\n                <div class=\"small\" *ngIf=\"row.type === MessageQueueEventType.Click\">\n                  {{row.meta?.url}}\n                </div>\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.createDate | fsDateFormat: 'date-time-yearless'}}\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}"]
             }),
             __param(0, core.Inject(FS_APP_MESSAGE_CONFIG)),
@@ -732,10 +752,37 @@
         return QueueComponent;
     }());
 
+    var FsMessageQueueService = /** @class */ (function () {
+        function FsMessageQueueService(_dialog) {
+            this._dialog = _dialog;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsMessageQueueService.prototype.openMessageQueue = function (messageQueueId, options) {
+            if (options === void 0) { options = {}; }
+            return this._dialog.open(QueueComponent, __assign(__assign({}, options), { data: {
+                    messageQueueId: messageQueueId,
+                }, width: options.width || '85%' })).afterClosed()
+                .pipe(operators.takeUntil(this._destroy$));
+        };
+        FsMessageQueueService.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsMessageQueueService.ctorParameters = function () { return [
+            { type: dialog.MatDialog }
+        ]; };
+        FsMessageQueueService = __decorate([
+            core.Injectable(),
+            __metadata("design:paramtypes", [dialog.MatDialog])
+        ], FsMessageQueueService);
+        return FsMessageQueueService;
+    }());
+
     var QueuesComponent = /** @class */ (function () {
-        function QueuesComponent(_config, _dialog) {
+        function QueuesComponent(_config, _dialog, _messageQueueService) {
             this._config = _config;
             this._dialog = _dialog;
+            this._messageQueueService = _messageQueueService;
             this.list = null;
             this.query = {};
             this.config = null;
@@ -824,13 +871,7 @@
         };
         QueuesComponent.prototype.open = function (messageQueue) {
             var _this = this;
-            this._dialog.open(QueueComponent, {
-                data: {
-                    messageQueue: messageQueue,
-                },
-                width: '85%'
-            })
-                .afterClosed()
+            this._messageQueueService.openMessageQueue(messageQueue.id)
                 .pipe(operators.takeUntil(this._destroy$))
                 .subscribe(function () {
                 _this.list.reload();
@@ -842,7 +883,8 @@
         };
         QueuesComponent.ctorParameters = function () { return [
             { type: undefined, decorators: [{ type: core.Inject, args: [FS_APP_MESSAGE_CONFIG,] }] },
-            { type: dialog.MatDialog }
+            { type: dialog.MatDialog },
+            { type: FsMessageQueueService }
         ]; };
         __decorate([
             core.ViewChild(list.FsListComponent, { static: true }),
@@ -855,15 +897,45 @@
         QueuesComponent = __decorate([
             core.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]\"\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]\"\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]\"\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      <fs-date-ago [date]=\"row.createdDate\"></fs-date-ago>\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>",
+                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}"]
             }),
             __param(0, core.Inject(FS_APP_MESSAGE_CONFIG)),
-            __metadata("design:paramtypes", [Object, dialog.MatDialog])
+            __metadata("design:paramtypes", [Object, dialog.MatDialog,
+                FsMessageQueueService])
         ], QueuesComponent);
         return QueuesComponent;
     }());
 
+    var RecipientComponent = /** @class */ (function () {
+        function RecipientComponent() {
+        }
+        RecipientComponent.prototype.ngOnInit = function () {
+            var icons = {
+                'S': { name: 'check_circle', tooltip: 'Sent' },
+                'E': { name: 'offline_bolt', tooltip: 'Sending' },
+                'F': { name: 'info', tooltip: 'Failed' },
+            };
+            this.icon = icons[this.state];
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], RecipientComponent.prototype, "name", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object)
+        ], RecipientComponent.prototype, "state", void 0);
+        RecipientComponent = __decorate([
+            core.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}"]
+            })
+        ], RecipientComponent);
+        return RecipientComponent;
+    }());
+
     var LinkifyPipe = /** @class */ (function () {
         function LinkifyPipe() {
         }
@@ -906,35 +978,6 @@
         return TruncatePipe;
     }());
 
-    var RecipientComponent = /** @class */ (function () {
-        function RecipientComponent() {
-        }
-        RecipientComponent.prototype.ngOnInit = function () {
-            var icons = {
-                'S': { name: 'check_circle', tooltip: 'Sent' },
-                'E': { name: 'offline_bolt', tooltip: 'Sending' },
-                'F': { name: 'info', tooltip: 'Failed' },
-            };
-            this.icon = icons[this.state];
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], RecipientComponent.prototype, "name", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Object)
-        ], RecipientComponent.prototype, "state", void 0);
-        RecipientComponent = __decorate([
-            core.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}"]
-            })
-        ], RecipientComponent);
-        return RecipientComponent;
-    }());
-
     var FsAppMessageQueuesModule = /** @class */ (function () {
         function FsAppMessageQueuesModule() {
         }
@@ -970,6 +1013,9 @@
                 exports: [
                     QueuesComponent,
                     QueueComponent,
+                ],
+                providers: [
+                    FsMessageQueueService
                 ]
             })
         ], FsAppMessageQueuesModule);
@@ -1269,6 +1315,7 @@
     exports.FsAppMessageTemplatesModule = FsAppMessageTemplatesModule;
     exports.FsAppMessageWebhooksModule = FsAppMessageWebhooksModule;
     exports.FsAppMessagesModule = FsAppMessagesModule;
+    exports.FsMessageQueueService = FsMessageQueueService;
     exports.MessageComponent = MessageComponent;
     exports.MessagesComponent = MessagesComponent;
     exports.QueueComponent = QueueComponent;