@firestitch/app-message 9.1.4 → 9.2.1

package/fesm5/firestitch-app-message.js

@@ -1,5 +1,5 @@
 import { __decorate, __param, __metadata, __assign, __spread } from 'tslib';
-import { Inject, Component, InjectionToken, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, NgModule, Input, Pipe } from '@angular/core';
+import { Inject, Component, InjectionToken, ChangeDetectorRef, ChangeDetectionStrategy, ViewChild, NgModule, Injectable, Input, Pipe } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -233,12 +233,8 @@ var MessagesComponent = /** @class */ (function () {
         });
         dialogRef.afterClosed()
             .pipe(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 () {
@@ -327,19 +323,6 @@ var FsAppMessagesModule = /** @class */ (function () {
     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";
@@ -361,6 +344,30 @@ var MessageQueueStates = [
     { 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;
@@ -370,6 +377,8 @@ var QueueComponent = /** @class */ (function () {
         this._data = _data;
         this.messageQueueRecipients = {};
         this.emailMessageQueueFormat = EmailMessageQueueFormat;
+        this.MessageQueueEventTypes = indexNameValue(MessageQueueEventTypes);
+        this.MessageQueueEventType = MessageQueueEventType;
         this._destroy$ = new Subject();
     }
     QueueComponent.prototype.ngOnInit = function () {
@@ -377,7 +386,7 @@ var QueueComponent = /** @class */ (function () {
         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) {
@@ -394,12 +403,12 @@ var QueueComponent = /** @class */ (function () {
                     }
                 }
                 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) {
@@ -408,9 +417,10 @@ var QueueComponent = /** @class */ (function () {
             }, {});
             _this._setLogsConfig(messageQueue);
             _this._setAttachmentsConfig(messageQueue);
+            _this._setEventsConfig(messageQueue);
         });
     };
-    QueueComponent.prototype.anchorme = function (html) {
+    QueueComponent.prototype.anchorMe = function (html) {
         return anchorme(html, {
             options: {
                 attributes: [
@@ -481,6 +491,16 @@ var QueueComponent = /** @class */ (function () {
             }
         };
     };
+    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 = {
@@ -526,7 +546,7 @@ var QueueComponent = /** @class */ (function () {
     ], QueueComponent.prototype, "logList", void 0);
     QueueComponent = __decorate([
         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=\"Recipient\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.messageQueueRecipient.recipient}}\n              </ng-template>\n            </fs-list-column>\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                  <a [href]=\"row.meta?.url\" target=\"_blank\">{{row.meta?.url}}</a>\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, Inject(FS_APP_MESSAGE_CONFIG)),
@@ -538,10 +558,37 @@ var QueueComponent = /** @class */ (function () {
     return QueueComponent;
 }());
 
+var FsMessageQueueService = /** @class */ (function () {
+    function FsMessageQueueService(_dialog) {
+        this._dialog = _dialog;
+        this._destroy$ = new 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(takeUntil(this._destroy$));
+    };
+    FsMessageQueueService.prototype.ngOnDestroy = function () {
+        this._destroy$.next();
+        this._destroy$.complete();
+    };
+    FsMessageQueueService.ctorParameters = function () { return [
+        { type: MatDialog }
+    ]; };
+    FsMessageQueueService = __decorate([
+        Injectable(),
+        __metadata("design:paramtypes", [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;
@@ -630,13 +677,7 @@ var QueuesComponent = /** @class */ (function () {
     };
     QueuesComponent.prototype.open = function (messageQueue) {
         var _this = this;
-        this._dialog.open(QueueComponent, {
-            data: {
-                messageQueue: messageQueue,
-            },
-            width: '85%'
-        })
-            .afterClosed()
+        this._messageQueueService.openMessageQueue(messageQueue.id)
             .pipe(takeUntil(this._destroy$))
             .subscribe(function () {
             _this.list.reload();
@@ -648,7 +689,8 @@ var QueuesComponent = /** @class */ (function () {
     };
     QueuesComponent.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: Inject, args: [FS_APP_MESSAGE_CONFIG,] }] },
-        { type: MatDialog }
+        { type: MatDialog },
+        { type: FsMessageQueueService }
     ]; };
     __decorate([
         ViewChild(FsListComponent, { static: true }),
@@ -665,11 +707,41 @@ var QueuesComponent = /** @class */ (function () {
             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, Inject(FS_APP_MESSAGE_CONFIG)),
-        __metadata("design:paramtypes", [Object, MatDialog])
+        __metadata("design:paramtypes", [Object, 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([
+        Input(),
+        __metadata("design:type", Object)
+    ], RecipientComponent.prototype, "name", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], RecipientComponent.prototype, "state", void 0);
+    RecipientComponent = __decorate([
+        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() {
     }
@@ -712,35 +784,6 @@ var TruncatePipe = /** @class */ (function () {
     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([
-        Input(),
-        __metadata("design:type", Object)
-    ], RecipientComponent.prototype, "name", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], RecipientComponent.prototype, "state", void 0);
-    RecipientComponent = __decorate([
-        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() {
     }
@@ -776,6 +819,9 @@ var FsAppMessageQueuesModule = /** @class */ (function () {
             exports: [
                 QueuesComponent,
                 QueueComponent,
+            ],
+            providers: [
+                FsMessageQueueService
             ]
         })
     ], FsAppMessageQueuesModule);
@@ -1077,5 +1123,5 @@ var FsAppMessageModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { FS_APP_MESSAGE_CONFIG, FsAppMessageModule, FsAppMessageQueuesModule, FsAppMessageTemplatesModule, FsAppMessageWebhooksModule, FsAppMessagesModule, MessageComponent, MessagesComponent, QueueComponent, QueuesComponent, TemplatesComponent, FsAppMessagePreviewModule as ɵa, PreviewComponent as ɵb, FS_APP_MESSAGE_CONFIG as ɵc, LinkifyPipe as ɵd, TruncatePipe as ɵe, RecipientComponent as ɵf, TemplateComponent as ɵg, WebhooksComponent as ɵh };
+export { FS_APP_MESSAGE_CONFIG, FsAppMessageModule, FsAppMessageQueuesModule, FsAppMessageTemplatesModule, FsAppMessageWebhooksModule, FsAppMessagesModule, FsMessageQueueService, MessageComponent, MessagesComponent, QueueComponent, QueuesComponent, TemplatesComponent, FsAppMessagePreviewModule as ɵa, PreviewComponent as ɵb, FS_APP_MESSAGE_CONFIG as ɵc, LinkifyPipe as ɵd, TruncatePipe as ɵe, RecipientComponent as ɵf, TemplateComponent as ɵg, WebhooksComponent as ɵh };
 //# sourceMappingURL=firestitch-app-message.js.map