@firestitch/app-message 12.5.4 → 12.6.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(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/html-editor'), require('rxjs/operators'), require('rxjs'), require('@firestitch/filter'), require('@firestitch/iframe'), require('@firestitch/prompt'), require('@firestitch/message'), require('@angular/flex-layout/flex'), require('@angular/material/icon'), require('@firestitch/date'), require('@firestitch/selection'), require('anchorme')) :
-    typeof define === 'function' && 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/html-editor', 'rxjs/operators', 'rxjs', '@firestitch/filter', '@firestitch/iframe', '@firestitch/prompt', '@firestitch/message', '@angular/flex-layout/flex', '@angular/material/icon', '@firestitch/date', '@firestitch/selection', 'anchorme'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["app-message"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.flexLayout, global.ng.material.button, global.ng.material.core, global.ng.material.dialog, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.material.checkbox, global.ng.material.tooltip, global.i6$1, global.i4, global.i2$2, global.i13, global.ng.forms, global.i15, global.i9, global.i10, global.rxjs.operators, global.rxjs, global.filter, global.i2, global.i1$1, global.i2$1, global.ng.flexLayout.flex, global.ng.material.icon, global.i10$1, global.selection, global.anchorme));
-})(this, (function (exports, i0, i16, router, flexLayout, i3, i8, i1, i6, i18, i7, i5, checkbox, i3$1, i6$1, i4, i2$2, i13, i14, i15, i9, i10, operators, rxjs, filter, i2, i1$1, i2$1, i17, i1$2, i10$1, selection, anchorme) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(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('@firestitch/tabs'), require('@angular/forms'), require('@firestitch/form'), require('@firestitch/text-editor'), require('@firestitch/html-editor'), require('rxjs/operators'), require('rxjs'), require('@firestitch/filter'), require('@firestitch/iframe'), require('@firestitch/prompt'), require('@firestitch/message'), require('@firestitch/common'), require('@angular/flex-layout/flex'), require('@angular/material/icon'), require('@firestitch/date'), require('@firestitch/selection'), require('anchorme')) :
+    typeof define === 'function' && 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', '@firestitch/tabs', '@angular/forms', '@firestitch/form', '@firestitch/text-editor', '@firestitch/html-editor', 'rxjs/operators', 'rxjs', '@firestitch/filter', '@firestitch/iframe', '@firestitch/prompt', '@firestitch/message', '@firestitch/common', '@angular/flex-layout/flex', '@angular/material/icon', '@firestitch/date', '@firestitch/selection', 'anchorme'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["app-message"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.flexLayout, global.ng.material.button, global.ng.material.core, global.ng.material.dialog, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.material.checkbox, global.ng.material.tooltip, global.i6$1, global.i4, global.i2$1, global.i14, global.i18, global.ng.forms, global.i16, global.i9, global.i10, global.rxjs.operators, global.rxjs, global.filter, global.i2, global.i1$2, global.i1$1, global.i3$1, global.ng.flexLayout.flex, global.ng.material.icon, global.i10$1, global.selection, global.anchorme));
+})(this, (function (exports, i0, i17, router, flexLayout, i3, i8, i1, i6, i20, i7, i5, checkbox, i3$2, i6$1, i4, i2$1, i14, i18, i15, i16, i9, i10, operators, rxjs, filter, i2, i1$2, i1$1, i3$1, i19, i1$3, i10$1, selection, anchorme) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,1600 +25,1678 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i16__namespace = /*#__PURE__*/_interopNamespace(i16);
+    var i17__namespace = /*#__PURE__*/_interopNamespace(i17);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i18__namespace = /*#__PURE__*/_interopNamespace(i18);
+    var i20__namespace = /*#__PURE__*/_interopNamespace(i20);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
-    var i13__namespace = /*#__PURE__*/_interopNamespace(i13);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i14__namespace = /*#__PURE__*/_interopNamespace(i14);
+    var i18__namespace = /*#__PURE__*/_interopNamespace(i18);
     var i15__namespace = /*#__PURE__*/_interopNamespace(i15);
+    var i16__namespace = /*#__PURE__*/_interopNamespace(i16);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i17__namespace = /*#__PURE__*/_interopNamespace(i17);
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
+    var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
     var i10__namespace$1 = /*#__PURE__*/_interopNamespace(i10$1);
     var anchorme__default = /*#__PURE__*/_interopDefaultLegacy(anchorme);
 
-    var EmailMessageFormat;
-    (function (EmailMessageFormat) {
-        EmailMessageFormat["Text"] = "T";
-        EmailMessageFormat["HTML"] = "H";
-        EmailMessageFormat["RichText"] = "R";
+    var EmailMessageFormat;
+    (function (EmailMessageFormat) {
+        EmailMessageFormat["Text"] = "T";
+        EmailMessageFormat["HTML"] = "H";
+        EmailMessageFormat["RichText"] = "R";
     })(EmailMessageFormat || (EmailMessageFormat = {}));
 
-    var EmailMessageFormats = [
-        { name: 'Text', value: EmailMessageFormat.Text },
-        { name: 'HTML', value: EmailMessageFormat.HTML },
-        { name: 'Rich Text', value: EmailMessageFormat.RichText }
+    var EmailMessageFormats = [
+        { name: 'Text', value: EmailMessageFormat.Text },
+        { name: 'HTML', value: EmailMessageFormat.HTML },
+        { name: 'Rich Text', value: EmailMessageFormat.RichText }
     ];
 
-    var PreviewComponent = /** @class */ (function () {
-        function PreviewComponent(_data) {
-            this._data = _data;
-            this.html = _data.html;
-            this.styles = _data.styles;
-        }
-        PreviewComponent.prototype.ngOnInit = function () {
-        };
-        return PreviewComponent;
-    }());
-    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "ng-component", ngImport: i0__namespace, 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: [""], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './preview.component.html',
-                        styleUrls: ['./preview.component.scss']
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }];
+    var PreviewComponent = /** @class */ (function () {
+        function PreviewComponent(_data) {
+            this._data = _data;
+            this.html = _data.html;
+            this.styles = _data.styles;
+        }
+        PreviewComponent.prototype.ngOnInit = function () {
+        };
+        return PreviewComponent;
+    }());
+    PreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, deps: [{ token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "ng-component", ngImport: i0__namespace, 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: [""], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: PreviewComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './preview.component.html',
+                        styleUrls: ['./preview.component.scss']
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }];
         } });
 
-    var FS_APP_MESSAGE_ROOT_CONFIG = new i0.InjectionToken('fs-app-message-root-config');
+    var FS_APP_MESSAGE_ROOT_CONFIG = new i0.InjectionToken('fs-app-message-root-config');
     var FS_APP_MESSAGE_CONFIG = new i0.InjectionToken('fs-app-message-config');
 
-    var MessageComponent = /** @class */ (function () {
-        function MessageComponent(_config, _data, _prompt, _message, _dialog, _cdRef) {
-            var _this = this;
-            this._config = _config;
-            this._data = _data;
-            this._prompt = _prompt;
-            this._message = _message;
-            this._dialog = _dialog;
-            this._cdRef = _cdRef;
-            this.messageTemplates = [];
-            this.emailMessageFormats = EmailMessageFormats;
-            this.emailMessageFormat = EmailMessageFormat;
-            this.save = function () {
-                return _this._config.saveMessage(_this.message)
-                    .pipe(operators.tap(function () {
-                    _this._message.success('Saved Changes');
-                }));
-            };
-        }
-        MessageComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this._config.loadMessage(this._data.message)
-                .subscribe(function (response) {
-                _this.message = response;
-                if (_this.message.emailMessage && _this.message.emailMessage.customize === undefined) {
-                    _this.message.emailMessage.customize = true;
-                }
-                if (_this.message.smsMessage && _this.message.smsMessage.customize === undefined) {
-                    _this.message.smsMessage.customize = true;
-                }
-                _this._cdRef.markForCheck();
-            });
-            this._config.loadMessageTemplates()
-                .subscribe(function (data) {
-                _this.messageTemplates = data.data;
-                _this._cdRef.markForCheck();
-            });
-        };
-        MessageComponent.prototype.tabChange = function (event) {
-            switch (event.tab.textLabel) {
-                case 'SMS Message':
-                    this.tab = 'sms';
-                    break;
-                case 'Email Message':
-                    this.tab = 'email';
-                    break;
-                default:
-                    this.tab = null;
-            }
-        };
-        MessageComponent.prototype.openPreview = function () {
-            var _this = this;
-            var html = this.message.emailMessage.body;
-            var styles = this.message.emailMessage.styles;
-            if (this.message.emailMessage.messageTemplateId) {
-                var messageTemplate = this.messageTemplates
-                    .find(function (item) {
-                    return _this.message.emailMessage.messageTemplateId === item.id;
-                });
-                if (messageTemplate) {
-                    html = messageTemplate.content.replace('{$content}', html);
-                    styles = messageTemplate.styles.concat(styles);
-                }
-            }
-            this._dialog.open(PreviewComponent, {
-                data: {
-                    styles: styles,
-                    html: html,
-                },
-                width: '95%'
-            });
-        };
-        MessageComponent.prototype.sendTest = function (type) {
-            var _this = this;
-            rxjs.of(true)
-                .pipe(operators.switchMap(function () {
-                return type === 'email' ? _this._config.getTestEmail() : rxjs.of('');
-            }), operators.switchMap(function (default_) {
-                var typeName = type === 'email' ? 'an email' : 'phone number';
-                return _this._prompt.input({
-                    label: "Please enter " + typeName + " to send test to",
-                    title: 'Send Test',
-                    commitLabel: 'Send',
-                    default: default_,
-                    required: true
-                });
-            }))
-                .subscribe(function (value) {
-                _this._config.testMessage(_this.message, value, type)
-                    .subscribe(function () {
-                    _this._message.success('Test Sent');
-                });
-            });
-        };
-        return MessageComponent;
-    }());
-    MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace$1.FsPrompt }, { token: i2__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"message\"\n    [confirmTabs]=\"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-html-editor\n                          *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText\"\n                          [(ngModel)]=\"message.emailMessage.body\"\n                          name=\"body\">\n                        </fs-html-editor>\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 || message.emailMessage.format===emailMessageFormat.RichText\"\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 class=\"email-body-html-default\">\n                      <fs-html-renderer\n                        *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText || message.emailMessage.format===emailMessageFormat.HTML\"\n                        [html]=\"message.defaultEmailBody\">\n                      </fs-html-renderer>\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", styles: ["fs-label-field .content{white-space:pre-wrap}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}:host ::ng-deep .sms-message{width:100%}:host ::ng-deep .email-body-text-default{white-space:pre-line}.email-body-text{width:100%}.variable{margin-bottom:4px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i10__namespace.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i10__namespace.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i13__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i14__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i17__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i18__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i14__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i17__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i16__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessageComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './message.component.html',
-                        styleUrls: ['./message.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace$1.FsPrompt }, { type: i2__namespace$1.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }];
+    var AttachmentsComponent = /** @class */ (function () {
+        function AttachmentsComponent(_config, _message) {
+            this._config = _config;
+            this._message = _message;
+            this.list = null;
+            this.config = null;
+            this._destroy$ = new rxjs.Subject();
+        }
+        AttachmentsComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.config = {
+                actions: [
+                    {
+                        label: 'Upload',
+                        mode: filter.ActionMode.File,
+                        select: function (fsFile) {
+                            _this._config.uploadMessageAttachment(_this.message, fsFile)
+                                .subscribe(function () {
+                                _this._message.success('Saved attachment');
+                                _this.list.reload();
+                            });
+                        }
+                    }
+                ],
+                fetch: function (query) {
+                    return _this._config.loadMessageAttachments(_this.message, query);
+                }
+            };
+            if (this._config.deleteMessageAttachment) {
+                this.config.rowActions = [
+                    {
+                        click: function (data) {
+                            return _this._config.deleteMessageAttachment(data);
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this template?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                    },
+                ];
+            }
+        };
+        AttachmentsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return AttachmentsComponent;
+    }());
+    AttachmentsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AttachmentsComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace$1.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    AttachmentsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: { message: "message" }, viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"config\">\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.size | fsFormatBytes}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>", components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsFormatBytes": i3__namespace$1.FsFormatBytesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: AttachmentsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-app-message-attachments',
+                        templateUrl: './attachments.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: i1__namespace$1.FsMessage }];
+        }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent, { static: true }]
+                }], message: [{
+                    type: i0.Input
+                }] } });
+
+    var MessageComponent = /** @class */ (function () {
+        function MessageComponent(_config, _data, _prompt, _message, _dialog, _cdRef) {
+            var _this = this;
+            this._config = _config;
+            this._data = _data;
+            this._prompt = _prompt;
+            this._message = _message;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this.tab = 'general';
+            this.messageTemplates = [];
+            this.emailMessageFormats = EmailMessageFormats;
+            this.emailMessageFormat = EmailMessageFormat;
+            this.save = function () {
+                return _this._config.saveMessage(_this.message)
+                    .pipe(operators.tap(function () {
+                    _this._message.success('Saved Changes');
+                }));
+            };
+        }
+        MessageComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this._config.loadMessage(this._data.message)
+                .subscribe(function (response) {
+                _this.message = response;
+                if (_this.message.emailMessage && _this.message.emailMessage.customize === undefined) {
+                    _this.message.emailMessage.customize = true;
+                }
+                if (_this.message.smsMessage && _this.message.smsMessage.customize === undefined) {
+                    _this.message.smsMessage.customize = true;
+                }
+                _this._cdRef.markForCheck();
+            });
+            this._config.loadMessageTemplates()
+                .subscribe(function (data) {
+                _this.messageTemplates = data.data;
+                _this._cdRef.markForCheck();
+            });
+        };
+        MessageComponent.prototype.openPreview = function () {
+            var _this = this;
+            var html = this.message.emailMessage.body;
+            var styles = this.message.emailMessage.styles;
+            if (this.message.emailMessage.messageTemplateId) {
+                var messageTemplate = this.messageTemplates
+                    .find(function (item) {
+                    return _this.message.emailMessage.messageTemplateId === item.id;
+                });
+                if (messageTemplate) {
+                    html = messageTemplate.content.replace('{$content}', html);
+                    styles = messageTemplate.styles.concat(styles);
+                }
+            }
+            this._dialog.open(PreviewComponent, {
+                data: {
+                    styles: styles,
+                    html: html,
+                },
+                width: '95%'
+            });
+        };
+        MessageComponent.prototype.sendTest = function (type) {
+            var _this = this;
+            rxjs.of(true)
+                .pipe(operators.switchMap(function () {
+                return type === 'email' ? _this._config.getTestEmail() : rxjs.of('');
+            }), operators.switchMap(function (default_) {
+                var typeName = type === 'email' ? 'an email' : 'phone number';
+                return _this._prompt.input({
+                    label: "Please enter " + typeName + " to send test to",
+                    title: 'Send Test',
+                    commitLabel: 'Send',
+                    default: default_,
+                    required: true
+                });
+            }))
+                .subscribe(function (value) {
+                _this._config.testMessage(_this.message, value, type)
+                    .subscribe(function () {
+                    _this._message.success('Test Sent');
+                });
+            });
+        };
+        return MessageComponent;
+    }());
+    MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace$2.FsPrompt }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"message\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"message\">\n    <div mat-dialog-title>Edit Message</div>\n    <mat-dialog-content>\n      <mat-tab-group \n          fsTabs \n          [(selectedName)]=\"tab\">\n        <mat-tab label=\"General\" name=\"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\" name=\"email\">\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-html-editor\n                          *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText\"\n                          [(ngModel)]=\"message.emailMessage.body\"\n                          name=\"body\">\n                        </fs-html-editor>\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 || message.emailMessage.format===emailMessageFormat.RichText\"\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              </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 class=\"email-body-html-default\">\n                      <fs-html-renderer\n                        *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText || message.emailMessage.format===emailMessageFormat.HTML\"\n                        [html]=\"message.defaultEmailBody\">\n                      </fs-html-renderer>\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        <ng-container *ngIf=\"!!message.smsMessage\">\n          <mat-tab label=\"SMS Message\" name=\"sms\">\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        </ng-container>\n\n        <mat-tab label=\"Attachments\" *ngIf=\"message.emailMessage\" name=\"attachments\">\n          <ng-template matTabContent>\n            <fs-app-message-attachments \n              [message]=\"message\">\n            </fs-app-message-attachments>\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      <ng-container *ngIf=\"tab==='email' || tab==='sms' || tab==='general'; else done\">\n        <button \n            mat-button \n            color=\"primary\">\n          Save\n        </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 \n            mat-button \n            [mat-dialog-close]=\"null\" \n            type=\"button\">\n          Cancel\n        </button>\n      </ng-container> \n      <ng-template #done>\n        <button \n            mat-button \n            color=\"primary\"\n            [mat-dialog-close]=\"null\" \n            type=\"button\">\n          Close\n        </button>\n      </ng-template>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["fs-label-field .content{white-space:pre-wrap}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}:host ::ng-deep .sms-message{width:100%}:host ::ng-deep .email-body-text-default{white-space:pre-line}.email-body-text{width:100%}.variable{margin-bottom:4px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i10__namespace.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i10__namespace.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selectedName"], outputs: ["selectedNameChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { type: i18__namespace.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name"], exportAs: ["fsTabsTab"] }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i20__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i19__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i19__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './message.component.html',
+                        styleUrls: ['./message.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace$2.FsPrompt }, { type: i1__namespace$1.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }];
         } });
 
-    function indexNameValue(arry) {
-        var obj = {};
-        arry.forEach(function (item) {
-            obj[item.value] = item.name;
-        });
-        return obj;
+    function indexNameValue(arry) {
+        var obj = {};
+        arry.forEach(function (item) {
+            obj[item.value] = item.name;
+        });
+        return obj;
     }
 
-    var MessagesComponent = /** @class */ (function () {
-        function MessagesComponent(_config, _dialog) {
-            this._config = _config;
-            this._dialog = _dialog;
-            this.list = null;
-            this.config = null;
-            this.emailMessageFormats = {};
-            this._destroy$ = new rxjs.Subject();
-        }
-        MessagesComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.emailMessageFormats = indexNameValue(EmailMessageFormats);
-            this.config = {
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search'
-                    }
-                ],
-                fetch: function (query) {
-                    return _this._config.loadMessages(query)
-                        .pipe(operators.map(function (response) {
-                        return ({ data: response.data, paging: response.paging });
-                    }));
-                }
-            };
-        };
-        MessagesComponent.prototype.open = function (message) {
-            var _this = this;
-            var dialogRef = this._dialog.open(MessageComponent, {
-                data: {
-                    message: message,
-                },
-                width: '85%'
-            });
-            dialogRef.afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.list.reload();
-            });
-        };
-        MessagesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return MessagesComponent;
-    }());
-    MessagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessagesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessagesComponent, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: i2$2.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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-column title=\"Email Message Template\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.emailMessage.messageTemplate?.name || 'None'}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized Message\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessage?.customize || row.smsMessage?.customize; else noCustomize\">\n        <ng-container *ngIf=\"row.emailMessage?.customize\">\n          {{row.emailMessage.customize ? 'Email' : ''}}\n        </ng-container> \n        <ng-container *ngIf=\"row.smsMessage?.customize\">\n          {{row.smsMessage.customize ? 'SMS' : ''}}\n        </ng-container>         \n      </ng-container>\n      <ng-template #noCustomize>\n        None\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessagesComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-app-messages',
-                        templateUrl: './messages.component.html'
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }];
-        }, propDecorators: { list: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent, { static: true }]
+    var MessagesComponent = /** @class */ (function () {
+        function MessagesComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this.list = null;
+            this.config = null;
+            this.emailMessageFormats = {};
+            this._destroy$ = new rxjs.Subject();
+        }
+        MessagesComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.emailMessageFormats = indexNameValue(EmailMessageFormats);
+            this.config = {
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search'
+                    }
+                ],
+                fetch: function (query) {
+                    return _this._config.loadMessages(query)
+                        .pipe(operators.map(function (response) {
+                        return ({ data: response.data, paging: response.paging });
+                    }));
+                }
+            };
+        };
+        MessagesComponent.prototype.open = function (message) {
+            var _this = this;
+            var dialogRef = this._dialog.open(MessageComponent, {
+                data: {
+                    message: message,
+                },
+                width: '85%'
+            });
+            dialogRef.afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.list.reload();
+            });
+        };
+        MessagesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return MessagesComponent;
+    }());
+    MessagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessagesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    MessagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessagesComponent, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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-column title=\"Email Message Template\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.emailMessage.messageTemplate?.name || 'None'}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized Message\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessage?.customize || row.smsMessage?.customize; else noCustomize\">\n        <ng-container *ngIf=\"row.emailMessage?.customize\">\n          {{row.emailMessage.customize ? 'Email' : ''}}\n        </ng-container> \n        <ng-container *ngIf=\"row.smsMessage?.customize\">\n          {{row.smsMessage.customize ? 'SMS' : ''}}\n        </ng-container>         \n      </ng-container>\n      <ng-template #noCustomize>\n        None\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: MessagesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-app-messages',
+                        templateUrl: './messages.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent, { static: true }]
                 }] } });
 
-    var FsAppMessagePreviewModule = /** @class */ (function () {
-        function FsAppMessagePreviewModule() {
-        }
-        return FsAppMessagePreviewModule;
-    }());
-    FsAppMessagePreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessagePreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [i1.MatDialogModule,
-            i3.MatButtonModule,
-            i4.FsDialogModule,
-            i2.FsIFrameModule], exports: [PreviewComponent] });
-    FsAppMessagePreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, imports: [[
-                i1.MatDialogModule,
-                i3.MatButtonModule,
-                i4.FsDialogModule,
-                i2.FsIFrameModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i1.MatDialogModule,
-                            i3.MatButtonModule,
-                            i4.FsDialogModule,
-                            i2.FsIFrameModule,
-                        ],
-                        declarations: [
-                            PreviewComponent,
-                        ],
-                        exports: [
-                            PreviewComponent,
-                        ]
-                    }]
+    var FsAppMessagePreviewModule = /** @class */ (function () {
+        function FsAppMessagePreviewModule() {
+        }
+        return FsAppMessagePreviewModule;
+    }());
+    FsAppMessagePreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessagePreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [i1.MatDialogModule,
+            i3.MatButtonModule,
+            i4.FsDialogModule,
+            i2.FsIFrameModule], exports: [PreviewComponent] });
+    FsAppMessagePreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, imports: [[
+                i1.MatDialogModule,
+                i3.MatButtonModule,
+                i4.FsDialogModule,
+                i2.FsIFrameModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagePreviewModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i1.MatDialogModule,
+                            i3.MatButtonModule,
+                            i4.FsDialogModule,
+                            i2.FsIFrameModule,
+                        ],
+                        declarations: [
+                            PreviewComponent,
+                        ],
+                        exports: [
+                            PreviewComponent,
+                        ]
+                    }]
             }] });
 
-    var FsAppMessagesModule = /** @class */ (function () {
-        function FsAppMessagesModule() {
-        }
-        return FsAppMessagesModule;
-    }());
-    FsAppMessagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, declarations: [MessagesComponent,
-            MessageComponent], imports: [router.RouterModule,
-            i16.CommonModule,
-            i14.FormsModule,
-            i1.MatDialogModule,
-            i3.MatButtonModule,
-            i5.MatTabsModule,
-            i6.MatFormFieldModule,
-            i18.MatInputModule,
-            i8.MatOptionModule,
-            i7.MatSelectModule,
-            i3$1.MatTooltipModule,
-            checkbox.MatCheckboxModule,
-            i4.FsDialogModule,
-            i2$2.FsListModule,
-            i6$1.FsLabelModule,
-            flexLayout.FlexLayoutModule,
-            i13.FsSkeletonModule,
-            i15.FsFormModule,
-            i9.FsTextEditorModule,
-            i10.FsHtmlEditorModule,
-            i10.FsHtmlRendererModule,
-            FsAppMessagePreviewModule], exports: [MessagesComponent,
-            MessageComponent] });
-    FsAppMessagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, imports: [[
-                router.RouterModule,
-                i16.CommonModule,
-                i14.FormsModule,
-                i1.MatDialogModule,
-                i3.MatButtonModule,
-                i5.MatTabsModule,
-                i6.MatFormFieldModule,
-                i18.MatInputModule,
-                i8.MatOptionModule,
-                i7.MatSelectModule,
-                i3$1.MatTooltipModule,
-                checkbox.MatCheckboxModule,
-                i4.FsDialogModule,
-                i2$2.FsListModule,
-                i6$1.FsLabelModule,
-                flexLayout.FlexLayoutModule,
-                i13.FsSkeletonModule,
-                i15.FsFormModule,
-                i9.FsTextEditorModule,
-                i10.FsHtmlEditorModule,
-                i10.FsHtmlRendererModule,
-                FsAppMessagePreviewModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            router.RouterModule,
-                            i16.CommonModule,
-                            i14.FormsModule,
-                            i1.MatDialogModule,
-                            i3.MatButtonModule,
-                            i5.MatTabsModule,
-                            i6.MatFormFieldModule,
-                            i18.MatInputModule,
-                            i8.MatOptionModule,
-                            i7.MatSelectModule,
-                            i3$1.MatTooltipModule,
-                            checkbox.MatCheckboxModule,
-                            i4.FsDialogModule,
-                            i2$2.FsListModule,
-                            i6$1.FsLabelModule,
-                            flexLayout.FlexLayoutModule,
-                            i13.FsSkeletonModule,
-                            i15.FsFormModule,
-                            i9.FsTextEditorModule,
-                            i10.FsHtmlEditorModule,
-                            i10.FsHtmlRendererModule,
-                            FsAppMessagePreviewModule,
-                        ],
-                        declarations: [
-                            MessagesComponent,
-                            MessageComponent,
-                        ],
-                        exports: [
-                            MessagesComponent,
-                            MessageComponent,
-                        ],
-                    }]
+    var FsAppMessagesModule = /** @class */ (function () {
+        function FsAppMessagesModule() {
+        }
+        return FsAppMessagesModule;
+    }());
+    FsAppMessagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, declarations: [MessagesComponent,
+            MessageComponent,
+            AttachmentsComponent], imports: [router.RouterModule,
+            i17.CommonModule,
+            i15.FormsModule,
+            i1.MatDialogModule,
+            i3.MatButtonModule,
+            i5.MatTabsModule,
+            i6.MatFormFieldModule,
+            i20.MatInputModule,
+            i8.MatOptionModule,
+            i7.MatSelectModule,
+            i3$2.MatTooltipModule,
+            checkbox.MatCheckboxModule,
+            i4.FsDialogModule,
+            i2$1.FsListModule,
+            i6$1.FsLabelModule,
+            flexLayout.FlexLayoutModule,
+            i14.FsSkeletonModule,
+            i16.FsFormModule,
+            i9.FsTextEditorModule,
+            i10.FsHtmlEditorModule,
+            i10.FsHtmlRendererModule,
+            i3$1.FsCommonModule,
+            i18.FsTabsModule,
+            FsAppMessagePreviewModule], exports: [MessagesComponent,
+            MessageComponent] });
+    FsAppMessagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, imports: [[
+                router.RouterModule,
+                i17.CommonModule,
+                i15.FormsModule,
+                i1.MatDialogModule,
+                i3.MatButtonModule,
+                i5.MatTabsModule,
+                i6.MatFormFieldModule,
+                i20.MatInputModule,
+                i8.MatOptionModule,
+                i7.MatSelectModule,
+                i3$2.MatTooltipModule,
+                checkbox.MatCheckboxModule,
+                i4.FsDialogModule,
+                i2$1.FsListModule,
+                i6$1.FsLabelModule,
+                flexLayout.FlexLayoutModule,
+                i14.FsSkeletonModule,
+                i16.FsFormModule,
+                i9.FsTextEditorModule,
+                i10.FsHtmlEditorModule,
+                i10.FsHtmlRendererModule,
+                i3$1.FsCommonModule,
+                i18.FsTabsModule,
+                FsAppMessagePreviewModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessagesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            router.RouterModule,
+                            i17.CommonModule,
+                            i15.FormsModule,
+                            i1.MatDialogModule,
+                            i3.MatButtonModule,
+                            i5.MatTabsModule,
+                            i6.MatFormFieldModule,
+                            i20.MatInputModule,
+                            i8.MatOptionModule,
+                            i7.MatSelectModule,
+                            i3$2.MatTooltipModule,
+                            checkbox.MatCheckboxModule,
+                            i4.FsDialogModule,
+                            i2$1.FsListModule,
+                            i6$1.FsLabelModule,
+                            flexLayout.FlexLayoutModule,
+                            i14.FsSkeletonModule,
+                            i16.FsFormModule,
+                            i9.FsTextEditorModule,
+                            i10.FsHtmlEditorModule,
+                            i10.FsHtmlRendererModule,
+                            i3$1.FsCommonModule,
+                            i18.FsTabsModule,
+                            FsAppMessagePreviewModule,
+                        ],
+                        declarations: [
+                            MessagesComponent,
+                            MessageComponent,
+                            AttachmentsComponent,
+                        ],
+                        exports: [
+                            MessagesComponent,
+                            MessageComponent,
+                        ],
+                    }]
             }] });
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (_)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function verb(n) { if (g[n])
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b)
+                if (Object.prototype.hasOwnProperty.call(b, p))
+                    d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+    var __assign = function () {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s)
+                    if (Object.prototype.hasOwnProperty.call(s, p))
+                        t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+                t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+            r = Reflect.decorate(decorators, target, key, desc);
+        else
+            for (var i = decorators.length - 1; i >= 0; i--)
+                if (d = decorators[i])
+                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    }
+    function __param(paramIndex, decorator) {
+        return function (target, key) { decorator(target, key, paramIndex); };
+    }
+    function __metadata(metadataKey, metadataValue) {
+        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+            return Reflect.metadata(metadataKey, metadataValue);
+    }
+    function __awaiter(thisArg, _arguments, P, generator) {
+        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+        return new (P || (P = Promise))(function (resolve, reject) {
+            function fulfilled(value) { try {
+                step(generator.next(value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function rejected(value) { try {
+                step(generator["throw"](value));
+            }
+            catch (e) {
+                reject(e);
+            } }
+            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+            step((generator = generator.apply(thisArg, _arguments || [])).next());
+        });
+    }
+    function __generator(thisArg, body) {
+        var _ = { label: 0, sent: function () { if (t[0] & 1)
+                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
+        function verb(n) { return function (v) { return step([n, v]); }; }
+        function step(op) {
+            if (f)
+                throw new TypeError("Generator is already executing.");
+            while (_)
+                try {
+                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
+                        return t;
+                    if (y = 0, t)
+                        op = [op[0] & 2, t.value];
+                    switch (op[0]) {
+                        case 0:
+                        case 1:
+                            t = op;
+                            break;
+                        case 4:
+                            _.label++;
+                            return { value: op[1], done: false };
+                        case 5:
+                            _.label++;
+                            y = op[1];
+                            op = [0];
+                            continue;
+                        case 7:
+                            op = _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                        default:
+                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                                _ = 0;
+                                continue;
+                            }
+                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
+                                _.label = op[1];
+                                break;
+                            }
+                            if (op[0] === 6 && _.label < t[1]) {
+                                _.label = t[1];
+                                t = op;
+                                break;
+                            }
+                            if (t && _.label < t[2]) {
+                                _.label = t[2];
+                                _.ops.push(op);
+                                break;
+                            }
+                            if (t[2])
+                                _.ops.pop();
+                            _.trys.pop();
+                            continue;
+                    }
+                    op = body.call(thisArg, _);
+                }
+                catch (e) {
+                    op = [6, e];
+                    y = 0;
+                }
+                finally {
+                    f = t = 0;
+                }
+            if (op[0] & 5)
+                throw op[1];
+            return { value: op[0] ? op[1] : void 0, done: true };
+        }
+    }
+    var __createBinding = Object.create ? (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (function (o, m, k, k2) {
+        if (k2 === undefined)
+            k2 = k;
+        o[k2] = m[k];
+    });
+    function __exportStar(m, o) {
+        for (var p in m)
+            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
+                __createBinding(o, m, p);
+    }
+    function __values(o) {
+        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+        if (m)
+            return m.call(o);
+        if (o && typeof o.length === "number")
+            return {
+                next: function () {
+                    if (o && i >= o.length)
+                        o = void 0;
+                    return { value: o && o[i++], done: !o };
+                }
+            };
+        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+    }
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m)
+            return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
+                ar.push(r.value);
+        }
+        catch (error) {
+            e = { error: error };
+        }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"]))
+                    m.call(i);
+            }
+            finally {
+                if (e)
+                    throw e.error;
+            }
+        }
+        return ar;
+    }
+    /** @deprecated */
+    function __spread() {
+        for (var ar = [], i = 0; i < arguments.length; i++)
+            ar = ar.concat(__read(arguments[i]));
+        return ar;
+    }
+    /** @deprecated */
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
+            s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
+    }
+    function __await(v) {
+        return this instanceof __await ? (this.v = v, this) : new __await(v);
+    }
+    function __asyncGenerator(thisArg, _arguments, generator) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var g = generator.apply(thisArg, _arguments || []), i, q = [];
+        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        function resume(n, v) { try {
+            step(g[n](v));
+        }
+        catch (e) {
+            settle(q[0][3], e);
+        } }
+        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+        function fulfill(value) { resume("next", value); }
+        function reject(value) { resume("throw", value); }
+        function settle(f, v) { if (f(v), q.shift(), q.length)
+            resume(q[0][0], q[0][1]); }
+    }
+    function __asyncDelegator(o) {
+        var i, p;
+        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+    }
+    function __asyncValues(o) {
+        if (!Symbol.asyncIterator)
+            throw new TypeError("Symbol.asyncIterator is not defined.");
+        var m = o[Symbol.asyncIterator], i;
+        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+    }
+    function __makeTemplateObject(cooked, raw) {
+        if (Object.defineProperty) {
+            Object.defineProperty(cooked, "raw", { value: raw });
+        }
+        else {
+            cooked.raw = raw;
+        }
+        return cooked;
+    }
+    ;
+    var __setModuleDefault = Object.create ? (function (o, v) {
+        Object.defineProperty(o, "default", { enumerable: true, value: v });
+    }) : function (o, v) {
+        o["default"] = v;
+    };
+    function __importStar(mod) {
+        if (mod && mod.__esModule)
+            return mod;
+        var result = {};
+        if (mod != null)
+            for (var k in mod)
+                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
+                    __createBinding(result, mod, k);
+        __setModuleDefault(result, mod);
+        return result;
+    }
+    function __importDefault(mod) {
+        return (mod && mod.__esModule) ? mod : { default: mod };
+    }
+    function __classPrivateFieldGet(receiver, state, kind, f) {
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a getter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot read private member from an object whose class did not declare it");
+        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    }
+    function __classPrivateFieldSet(receiver, state, value, kind, f) {
+        if (kind === "m")
+            throw new TypeError("Private method is not writable");
+        if (kind === "a" && !f)
+            throw new TypeError("Private accessor was defined without a setter");
+        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+            throw new TypeError("Cannot write private member to an object whose class did not declare it");
+        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var MessageQueueState;
-    (function (MessageQueueState) {
-        MessageQueueState["Sent"] = "S";
-        MessageQueueState["PartiallySent"] = "P";
-        MessageQueueState["Sending"] = "E";
-        MessageQueueState["Queued"] = "Q";
-        MessageQueueState["Canceled"] = "C";
-        MessageQueueState["InvalidRecipients"] = "I";
-        MessageQueueState["Failed"] = "F";
+    var MessageQueueState;
+    (function (MessageQueueState) {
+        MessageQueueState["Sent"] = "S";
+        MessageQueueState["PartiallySent"] = "P";
+        MessageQueueState["Sending"] = "E";
+        MessageQueueState["Queued"] = "Q";
+        MessageQueueState["Canceled"] = "C";
+        MessageQueueState["InvalidRecipients"] = "I";
+        MessageQueueState["Failed"] = "F";
     })(MessageQueueState || (MessageQueueState = {}));
 
-    var MessageQueueStates = [
-        { name: 'Sent', value: MessageQueueState.Sent },
-        { name: 'Partially Sent', value: MessageQueueState.PartiallySent },
-        { name: 'Sending', value: MessageQueueState.Sending },
-        { name: 'Queued', value: MessageQueueState.Queued },
-        { name: 'Canceled', value: MessageQueueState.Canceled },
-        { name: 'Invalid Recipients', value: MessageQueueState.InvalidRecipients },
-        { name: 'Failed', value: MessageQueueState.Failed }
+    var MessageQueueStates = [
+        { name: 'Sent', value: MessageQueueState.Sent },
+        { name: 'Partially Sent', value: MessageQueueState.PartiallySent },
+        { name: 'Sending', value: MessageQueueState.Sending },
+        { name: 'Queued', value: MessageQueueState.Queued },
+        { name: 'Canceled', value: MessageQueueState.Canceled },
+        { name: 'Invalid Recipients', value: MessageQueueState.InvalidRecipients },
+        { name: 'Failed', value: MessageQueueState.Failed }
     ];
 
-    var EmailMessageQueueFormat;
-    (function (EmailMessageQueueFormat) {
-        EmailMessageQueueFormat["Text"] = "T";
-        EmailMessageQueueFormat["HTML"] = "H";
-        EmailMessageQueueFormat["RichText"] = "R";
+    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";
+    var MessageQueueType;
+    (function (MessageQueueType) {
+        MessageQueueType["Sms"] = "S";
+        MessageQueueType["Email"] = "E";
     })(MessageQueueType || (MessageQueueType = {}));
 
-    var MessageQueueEventType;
-    (function (MessageQueueEventType) {
-        MessageQueueEventType["Click"] = "click";
-        MessageQueueEventType["Open"] = "open";
+    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 MessageQueueEventTypes = [
+        { name: 'Open', value: MessageQueueEventType.Open },
+        { name: 'Click', value: MessageQueueEventType.Click },
     ];
 
-    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];
-        };
-        return RecipientComponent;
-    }());
-    RecipientComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RecipientComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    RecipientComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecipientComponent, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0__namespace, 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}\n"], components: [{ type: i1__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RecipientComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-recipient',
-                        templateUrl: './recipient.component.html',
-                        styleUrls: ['./recipient.component.scss'],
-                    }]
-            }], propDecorators: { name: [{
-                    type: i0.Input
-                }], state: [{
-                    type: i0.Input
+    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];
+        };
+        return RecipientComponent;
+    }());
+    RecipientComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RecipientComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    RecipientComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecipientComponent, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0__namespace, 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}\n"], components: [{ type: i1__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: RecipientComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-recipient',
+                        templateUrl: './recipient.component.html',
+                        styleUrls: ['./recipient.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], propDecorators: { name: [{
+                    type: i0.Input
+                }], state: [{
+                    type: i0.Input
                 }] } });
 
-    var QueueComponent = /** @class */ (function () {
-        function QueueComponent(_config, _message, _prompt, _dialog, _data) {
-            this._config = _config;
-            this._message = _message;
-            this._prompt = _prompt;
-            this._dialog = _dialog;
-            this._data = _data;
-            this.messageQueueRecipients = {};
-            this.emailMessageQueueFormat = EmailMessageQueueFormat;
-            this.MessageQueueEventTypes = indexNameValue(MessageQueueEventTypes);
-            this.MessageQueueEventType = MessageQueueEventType;
-            this._destroy$ = new rxjs.Subject();
-        }
-        QueueComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.messageQueueStates = indexNameValue(MessageQueueStates);
-            this.resendMessageQueue = this._config.resendMessageQueue;
-            this.forwardMessageQueue = this._config.forwardMessageQueue;
-            this._config.loadMessageQueue(this._data.messageQueueId)
-                .subscribe(function (messageQueue) {
-                _this.messageQueue = messageQueue;
-                if (_this.messageQueue.emailMessageQueue) {
-                    var body = _this.messageQueue.emailMessageQueue.body;
-                    if (_this.messageQueue.emailMessageQueue.format === EmailMessageQueueFormat.HTML) {
-                        try {
-                            var doc = new DOMParser().parseFromString(body, 'text/html');
-                            doc.querySelectorAll('a').forEach(function (el) {
-                                el.setAttribute('target', '_blank');
-                            });
-                            body = doc.documentElement.innerHTML;
-                        }
-                        catch (e) {
-                        }
-                    }
-                    else {
-                        body = _this.anchorMe(body);
-                    }
-                    _this.messageQueue.emailMessageQueue.body = body;
-                }
-                if (_this.messageQueue.smsMessageQueue) {
-                    _this.messageQueue.smsMessageQueue.body = _this.anchorMe(_this.messageQueue.smsMessageQueue.body);
-                }
-                _this.messageQueueRecipients = _this.messageQueue.messageQueueRecipients
-                    .reduce(function (accum, messageQueueRecipient) {
-                    accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
-                    return accum;
-                }, {});
-                _this._setLogsConfig(messageQueue);
-                _this._setAttachmentsConfig(messageQueue);
-                _this._setEventsConfig(messageQueue);
-            });
-        };
-        QueueComponent.prototype.anchorMe = function (html) {
-            return anchorme__default["default"](html, {
-                options: {
-                    attributes: [
-                        {
-                            name: 'target',
-                            value: '_blank'
-                        },
-                    ],
-                },
-            });
-        };
-        QueueComponent.prototype.openMessage = function (message) {
-            this._dialog.open(MessageComponent, {
-                data: {
-                    message: message,
-                },
-                width: '85%'
-            });
-        };
-        QueueComponent.prototype.resend = function () {
-            var _this = this;
-            this._prompt.confirm({
-                title: 'Confirm',
-                template: 'Are you sure you would like to resend this message?'
-            }).subscribe(function () {
-                _this.resendMessageQueue(_this.messageQueue)
-                    .subscribe(function (messageQueue) {
-                    Object.assign(_this.messageQueue, messageQueue);
-                    _this._message.success('Successfully resent');
-                    if (_this.logList) {
-                        _this.logList.reload();
-                    }
-                });
-            });
-        };
-        QueueComponent.prototype.forward = function () {
-            var _this = this;
-            var typeName = this.messageQueue.type === MessageQueueType.Email ? 'an email' : 'a phone number';
-            this._prompt.input({
-                label: "Please enter " + typeName + " to forward to",
-                title: 'Forward Message',
-                commitLabel: 'Forward',
-                required: true
-            }).subscribe(function (value) {
-                if (value) {
-                    _this.forwardMessageQueue(_this.messageQueue, value)
-                        .subscribe(function (messageQueue) {
-                        _this.messageQueue = Object.assign(Object.assign({}, _this.messageQueue), { messageQueue: messageQueue });
-                        _this._message.success('Successfully forwarded');
-                        if (_this.logList) {
-                            _this.logList.reload();
-                        }
-                    });
-                }
-            });
-        };
-        QueueComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        QueueComponent.prototype._setLogsConfig = function (messageQueue) {
-            var _this = this;
-            this.logConfig = {
-                loadMore: true,
-                queryParam: false,
-                fetch: function (query) {
-                    return _this._config.loadLogs(messageQueue, query);
-                }
-            };
-        };
-        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 = {
-                queryParam: false,
-                fetch: function (query) {
-                    return _this._config.loadMessageQueueAttachments(messageQueue, query)
-                        .pipe(operators.map(function (response) { return ({
-                        data: response.data.map(function (value) {
-                            value.prettyFilesize = _this._prettyFilesize(value.filesize);
-                            return value;
-                        }), paging: response.paging
-                    }); }));
-                }
-            };
-            if (this._config.downloadMessageQueueAttachment) {
-                this.attachmentConfig.rowActions = [
-                    {
-                        click: function (messageAttachment) {
-                            _this._config.downloadMessageQueueAttachment(messageAttachment, _this.messageQueue);
-                        },
-                        label: 'Download',
-                    }
-                ];
-            }
-        };
-        QueueComponent.prototype._prettyFilesize = function (bytes) {
-            if (bytes === 0) {
-                return '0.00 B';
-            }
-            var e = Math.floor(Math.log(bytes) / Math.log(1024));
-            return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
-        };
-        return QueueComponent;
-    }());
-    QueueComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i2__namespace$1.FsMessage }, { token: i1__namespace$1.FsPrompt }, { token: i1__namespace.MatDialog }, { token: i1.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    QueueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueueComponent, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0__namespace, 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: [".subject,.body{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}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10__namespace$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i13__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i17__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10__namespace$1.FsDateFormatPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueueComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './queue.component.html',
-                        styleUrls: ['./queue.component.scss'],
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i2__namespace$1.FsMessage }, { type: i1__namespace$1.FsPrompt }, { type: i1__namespace.MatDialog }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }];
-        }, propDecorators: { logList: [{
-                    type: i0.ViewChild,
-                    args: ['logList']
+    var QueueComponent = /** @class */ (function () {
+        function QueueComponent(_config, _data, _message, _prompt, _dialog, _cdRef) {
+            this._config = _config;
+            this._data = _data;
+            this._message = _message;
+            this._prompt = _prompt;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this.messageQueueRecipients = {};
+            this.emailMessageQueueFormat = EmailMessageQueueFormat;
+            this.MessageQueueEventTypes = indexNameValue(MessageQueueEventTypes);
+            this.MessageQueueEventType = MessageQueueEventType;
+            this._destroy$ = new rxjs.Subject();
+        }
+        QueueComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.messageQueueStates = indexNameValue(MessageQueueStates);
+            this.resendMessageQueue = this._config.resendMessageQueue;
+            this.forwardMessageQueue = this._config.forwardMessageQueue;
+            this._config.loadMessageQueue(this._data.messageQueueId)
+                .subscribe(function (messageQueue) {
+                _this.messageQueue = messageQueue;
+                if (_this.messageQueue.emailMessageQueue) {
+                    var body = _this.messageQueue.emailMessageQueue.body;
+                    if (_this.messageQueue.emailMessageQueue.format === EmailMessageQueueFormat.HTML) {
+                        try {
+                            var doc = new DOMParser().parseFromString(body, 'text/html');
+                            doc.querySelectorAll('a').forEach(function (el) {
+                                el.setAttribute('target', '_blank');
+                            });
+                            body = doc.documentElement.innerHTML;
+                        }
+                        catch (e) {
+                        }
+                    }
+                    else {
+                        body = _this.anchorMe(body);
+                    }
+                    _this.messageQueue.emailMessageQueue.body = body;
+                }
+                if (_this.messageQueue.smsMessageQueue) {
+                    _this.messageQueue.smsMessageQueue.body = _this.anchorMe(_this.messageQueue.smsMessageQueue.body);
+                }
+                _this.messageQueueRecipients = _this.messageQueue.messageQueueRecipients
+                    .reduce(function (accum, messageQueueRecipient) {
+                    accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
+                    return accum;
+                }, {});
+                _this._setLogsConfig(messageQueue);
+                _this._setAttachmentsConfig(messageQueue);
+                _this._setEventsConfig(messageQueue);
+                _this._cdRef.markForCheck();
+            });
+        };
+        QueueComponent.prototype.anchorMe = function (html) {
+            return anchorme__default["default"](html, {
+                options: {
+                    attributes: [
+                        {
+                            name: 'target',
+                            value: '_blank'
+                        },
+                    ],
+                },
+            });
+        };
+        QueueComponent.prototype.openMessage = function (message) {
+            this._dialog.open(MessageComponent, {
+                data: {
+                    message: message,
+                },
+                width: '85%'
+            });
+        };
+        QueueComponent.prototype.resend = function () {
+            var _this = this;
+            this._prompt.confirm({
+                title: 'Confirm',
+                template: 'Are you sure you would like to resend this message?'
+            }).subscribe(function () {
+                _this.resendMessageQueue(_this.messageQueue)
+                    .subscribe(function (messageQueue) {
+                    Object.assign(_this.messageQueue, messageQueue);
+                    _this._cdRef.markForCheck();
+                    _this._message.success('Successfully resent');
+                    if (_this.logList) {
+                        _this.logList.reload();
+                    }
+                });
+            });
+        };
+        QueueComponent.prototype.forward = function () {
+            var _this = this;
+            var typeName = this.messageQueue.type === MessageQueueType.Email ? 'an email' : 'a phone number';
+            this._prompt.input({
+                label: "Please enter " + typeName + " to forward to",
+                title: 'Forward Message',
+                commitLabel: 'Forward',
+                required: true
+            }).subscribe(function (value) {
+                if (value) {
+                    _this.forwardMessageQueue(_this.messageQueue, value)
+                        .subscribe(function (messageQueue) {
+                        _this.messageQueue = Object.assign(Object.assign({}, _this.messageQueue), { messageQueue: messageQueue });
+                        _this._message.success('Successfully forwarded');
+                        _this._cdRef.markForCheck();
+                        if (_this.logList) {
+                            _this.logList.reload();
+                        }
+                    });
+                }
+            });
+        };
+        QueueComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        QueueComponent.prototype._setLogsConfig = function (messageQueue) {
+            var _this = this;
+            this.logConfig = {
+                loadMore: true,
+                queryParam: false,
+                fetch: function (query) {
+                    return _this._config.loadLogs(messageQueue, query);
+                }
+            };
+        };
+        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 = {
+                queryParam: false,
+                fetch: function (query) {
+                    return _this._config.loadMessageQueueAttachments(messageQueue, query)
+                        .pipe(operators.map(function (response) { return ({
+                        data: response.data.map(function (value) {
+                            value.prettyFilesize = _this._prettyFilesize(value.filesize);
+                            return value;
+                        }), paging: response.paging
+                    }); }));
+                }
+            };
+            if (this._config.downloadMessageQueueAttachment) {
+                this.attachmentConfig.rowActions = [
+                    {
+                        click: function (messageAttachment) {
+                            _this._config.downloadMessageQueueAttachment(messageAttachment, _this.messageQueue);
+                        },
+                        label: 'Download',
+                    }
+                ];
+            }
+        };
+        QueueComponent.prototype._prettyFilesize = function (bytes) {
+            if (bytes === 0) {
+                return '0.00 B';
+            }
+            var e = Math.floor(Math.log(bytes) / Math.log(1024));
+            return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+        };
+        return QueueComponent;
+    }());
+    QueueComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace$2.FsPrompt }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    QueueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueueComponent, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0__namespace, 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: [".subject,.body{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}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10__namespace$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i19__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueueComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './queue.component.html',
+                        styleUrls: ['./queue.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace$1.FsMessage }, { type: i1__namespace$2.FsPrompt }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { logList: [{
+                    type: i0.ViewChild,
+                    args: ['logList']
                 }] } });
 
-    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, Object.assign(Object.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();
-        };
-        return FsMessageQueueService;
-    }());
-    FsMessageQueueService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    FsMessageQueueService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService, decorators: [{
-                type: i0.Injectable
+    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, Object.assign(Object.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();
+        };
+        return FsMessageQueueService;
+    }());
+    FsMessageQueueService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    FsMessageQueueService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsMessageQueueService, decorators: [{
+                type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i1__namespace.MatDialog }]; } });
 
-    var TruncatePipe = /** @class */ (function () {
-        function TruncatePipe() {
-        }
-        TruncatePipe.prototype.transform = function (value, limit, completeWords, ellipsis) {
-            if (limit === void 0) { limit = 25; }
-            if (completeWords === void 0) { completeWords = false; }
-            if (ellipsis === void 0) { ellipsis = '...'; }
-            if (value.length < limit) {
-                return "" + value.substr(0, limit);
-            }
-            if (completeWords) {
-                limit = value.substr(0, limit).lastIndexOf(' ');
-            }
-            return "" + value.substr(0, limit) + ellipsis;
-        };
-        return TruncatePipe;
-    }());
-    TruncatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    TruncatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, name: "truncate" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'truncate'
-                    }]
+    var TruncatePipe = /** @class */ (function () {
+        function TruncatePipe() {
+        }
+        TruncatePipe.prototype.transform = function (value, limit, completeWords, ellipsis) {
+            if (limit === void 0) { limit = 25; }
+            if (completeWords === void 0) { completeWords = false; }
+            if (ellipsis === void 0) { ellipsis = '...'; }
+            if (value.length < limit) {
+                return "" + value.substr(0, limit);
+            }
+            if (completeWords) {
+                limit = value.substr(0, limit).lastIndexOf(' ');
+            }
+            return "" + value.substr(0, limit) + ellipsis;
+        };
+        return TruncatePipe;
+    }());
+    TruncatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    TruncatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, name: "truncate" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TruncatePipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'truncate'
+                    }]
             }] });
 
-    var QueuesComponent = /** @class */ (function () {
-        function QueuesComponent(_config, _dialog, _messageQueueService) {
-            this._config = _config;
-            this._dialog = _dialog;
-            this._messageQueueService = _messageQueueService;
-            this.list = null;
-            this.query = {};
-            this.config = null;
-            this.messageQueueStates = {};
-            this.MessageQueueState = MessageQueueState;
-            this._destroy$ = new rxjs.Subject();
-        }
-        QueuesComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.messageQueueStates = indexNameValue(MessageQueueStates);
-            this.config = {
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search'
-                    },
-                    {
-                        name: 'state',
-                        type: filter.ItemType.Select,
-                        label: 'Status',
-                        values: function () {
-                            return MessageQueueStates;
-                        }
-                    },
-                    {
-                        name: 'date',
-                        type: filter.ItemType.DateRange,
-                        label: ['From Date', 'To Date'],
-                    },
-                ],
-                sort: { value: 'created_date', direction: 'desc' },
-                fetch: function (query) {
-                    query = Object.assign(Object.assign(Object.assign({}, query), _this.query), { messageQueueAttachmentCounts: true, emailMessageQueues: true, emailMessageQueueBodies: false, smsMessageQueues: true });
-                    return _this._config.loadMessageQueues(query)
-                        .pipe(operators.map(function (response) { return ({ data: response.data
-                            .map(function (messageQueue) {
-                            return Object.assign(Object.assign({}, messageQueue), { messageQueueRecipients: messageQueue.messageQueueRecipients
-                                    .reduce(function (accum, messageQueueRecipient) {
-                                    accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
-                                    return accum;
-                                }, {}) });
-                        }), paging: response.paging }); }));
-                }
-            };
-            if (this._config.bulkMessageQueues) {
-                this.config.selection = {
-                    selectAll: false,
-                    actions: [
-                        {
-                            type: selection.SelectionActionType.Action,
-                            name: 'queue',
-                            label: 'Queue',
-                        },
-                        {
-                            type: selection.SelectionActionType.Action,
-                            name: 'resend',
-                            label: 'Resend',
-                        },
-                        {
-                            type: selection.SelectionActionType.Action,
-                            name: 'cancel',
-                            label: 'Cancel',
-                        },
-                    ],
-                    actionSelected: function (actionSelected) {
-                        return _this._config.bulkMessageQueues(actionSelected.action.name, actionSelected.selected)
-                            .pipe(operators.tap(function () {
-                            _this.list.reload();
-                        }));
-                    }
-                };
-            }
-            this.config.filters.push({
-                name: 'message_id',
-                type: filter.ItemType.Select,
-                label: 'Message Type',
-                values: function (query) {
-                    query = Object.assign(Object.assign({}, query), { limit: 50 });
-                    return _this._config.loadMessages(query)
-                        .pipe(operators.map(function (response) {
-                        return __spreadArray([
-                            { value: null, name: 'All', }
-                        ], __read(response.data.map(function (item) { return ({ name: item.name, value: item.id }); })));
-                    }));
-                }
-            });
-        };
-        QueuesComponent.prototype.open = function (messageQueue) {
-            var _this = this;
-            this._messageQueueService.openMessageQueue(messageQueue.id)
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.list.reload();
-            });
-        };
-        QueuesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return QueuesComponent;
-    }());
-    QueuesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialog }, { token: FsMessageQueueService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    QueuesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueuesComponent, selector: "fs-app-message-queues", inputs: { query: "query" }, viewQueries: [{ propertyName: "list", first: true, predicate: i2$2.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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}\n"], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1__namespace$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i17__namespace.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i16__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10__namespace$1.FsDateFormatPipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueuesComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-app-message-queues',
-                        styleUrls: ['./queues.component.scss'],
-                        templateUrl: './queues.component.html'
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }, { type: FsMessageQueueService }];
-        }, propDecorators: { list: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent, { static: true }]
-                }], query: [{
-                    type: i0.Input
+    var QueuesComponent = /** @class */ (function () {
+        function QueuesComponent(_config, _messageQueueService) {
+            this._config = _config;
+            this._messageQueueService = _messageQueueService;
+            this.list = null;
+            this.query = {};
+            this.config = null;
+            this.messageQueueStates = {};
+            this.MessageQueueState = MessageQueueState;
+            this._destroy$ = new rxjs.Subject();
+        }
+        QueuesComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.messageQueueStates = indexNameValue(MessageQueueStates);
+            this.config = {
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search'
+                    },
+                    {
+                        name: 'state',
+                        type: filter.ItemType.Select,
+                        label: 'Status',
+                        values: function () {
+                            return MessageQueueStates;
+                        }
+                    },
+                    {
+                        name: 'date',
+                        type: filter.ItemType.DateRange,
+                        label: ['From Date', 'To Date'],
+                    },
+                ],
+                sort: { value: 'created_date', direction: 'desc' },
+                fetch: function (query) {
+                    query = Object.assign(Object.assign(Object.assign({}, query), _this.query), { messageQueueAttachmentCounts: true, emailMessageQueues: true, emailMessageQueueBodies: false, smsMessageQueues: true });
+                    return _this._config.loadMessageQueues(query)
+                        .pipe(operators.map(function (response) { return ({ data: response.data
+                            .map(function (messageQueue) {
+                            return Object.assign(Object.assign({}, messageQueue), { messageQueueRecipients: messageQueue.messageQueueRecipients
+                                    .reduce(function (accum, messageQueueRecipient) {
+                                    accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
+                                    return accum;
+                                }, {}) });
+                        }), paging: response.paging }); }));
+                }
+            };
+            if (this._config.bulkMessageQueues) {
+                this.config.selection = {
+                    selectAll: false,
+                    actions: [
+                        {
+                            type: selection.SelectionActionType.Action,
+                            name: 'queue',
+                            label: 'Queue',
+                        },
+                        {
+                            type: selection.SelectionActionType.Action,
+                            name: 'resend',
+                            label: 'Resend',
+                        },
+                        {
+                            type: selection.SelectionActionType.Action,
+                            name: 'cancel',
+                            label: 'Cancel',
+                        },
+                    ],
+                    actionSelected: function (actionSelected) {
+                        return _this._config.bulkMessageQueues(actionSelected.action.name, actionSelected.selected)
+                            .pipe(operators.tap(function () {
+                            _this.list.reload();
+                        }));
+                    }
+                };
+            }
+            this.config.filters.push({
+                name: 'message_id',
+                type: filter.ItemType.Select,
+                label: 'Message Type',
+                values: function (query) {
+                    query = Object.assign(Object.assign({}, query), { limit: 50 });
+                    return _this._config.loadMessages(query)
+                        .pipe(operators.map(function (response) {
+                        return __spreadArray([
+                            { value: null, name: 'All', }
+                        ], __read(response.data
+                            .map(function (item) { return ({ name: item.name, value: item.id }); })));
+                    }));
+                }
+            });
+        };
+        QueuesComponent.prototype.open = function (messageQueue) {
+            var _this = this;
+            this._messageQueueService.openMessageQueue(messageQueue.id)
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.list.reload();
+            });
+        };
+        QueuesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return QueuesComponent;
+    }());
+    QueuesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: FsMessageQueueService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    QueuesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: QueuesComponent, selector: "fs-app-message-queues", inputs: { query: "query" }, viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i19__namespace.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: QueuesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-app-message-queues',
+                        styleUrls: ['./queues.component.scss'],
+                        templateUrl: './queues.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: FsMessageQueueService }];
+        }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent, { static: true }]
+                }], query: [{
+                    type: i0.Input
                 }] } });
 
-    var LinkifyPipe = /** @class */ (function () {
-        function LinkifyPipe() {
-        }
-        LinkifyPipe.prototype.transform = function (value) {
-            return anchorme__default["default"](value, {
-                attributes: [
-                    {
-                        name: 'target',
-                        value: '_blank'
-                    },
-                ]
-            });
-        };
-        return LinkifyPipe;
-    }());
-    LinkifyPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    LinkifyPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, name: "linkify" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{ name: 'linkify' }]
+    var LinkifyPipe = /** @class */ (function () {
+        function LinkifyPipe() {
+        }
+        LinkifyPipe.prototype.transform = function (value) {
+            return anchorme__default["default"](value, {
+                attributes: [
+                    {
+                        name: 'target',
+                        value: '_blank'
+                    },
+                ]
+            });
+        };
+        return LinkifyPipe;
+    }());
+    LinkifyPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    LinkifyPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, name: "linkify" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: LinkifyPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{ name: 'linkify' }]
             }] });
 
-    var FsAppMessageQueuesModule = /** @class */ (function () {
-        function FsAppMessageQueuesModule() {
-        }
-        return FsAppMessageQueuesModule;
-    }());
-    FsAppMessageQueuesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessageQueuesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, declarations: [QueuesComponent,
-            QueueComponent,
-            LinkifyPipe,
-            TruncatePipe,
-            RecipientComponent], imports: [router.RouterModule,
-            i14.FormsModule,
-            i16.CommonModule,
-            flexLayout.FlexLayoutModule,
-            i3$1.MatTooltipModule,
-            i1.MatDialogModule,
-            i3.MatButtonModule,
-            i1$2.MatIconModule,
-            i5.MatTabsModule,
-            i2$2.FsListModule,
-            i4.FsDialogModule,
-            i6$1.FsLabelModule,
-            i10$1.FsDateModule,
-            i13.FsSkeletonModule,
-            FsAppMessagesModule,
-            i15.FsFormModule,
-            i1$1.FsPromptInputModule,
-            i2.FsIFrameModule], exports: [QueuesComponent,
-            QueueComponent] });
-    FsAppMessageQueuesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, providers: [
-            FsMessageQueueService
-        ], imports: [[
-                router.RouterModule,
-                i14.FormsModule,
-                i16.CommonModule,
-                flexLayout.FlexLayoutModule,
-                i3$1.MatTooltipModule,
-                i1.MatDialogModule,
-                i3.MatButtonModule,
-                i1$2.MatIconModule,
-                i5.MatTabsModule,
-                i2$2.FsListModule,
-                i4.FsDialogModule,
-                i6$1.FsLabelModule,
-                i10$1.FsDateModule,
-                i13.FsSkeletonModule,
-                FsAppMessagesModule,
-                i15.FsFormModule,
-                i1$1.FsPromptInputModule,
-                i2.FsIFrameModule,
-                //FsDeviceModule,
-                //FsIpModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            router.RouterModule,
-                            i14.FormsModule,
-                            i16.CommonModule,
-                            flexLayout.FlexLayoutModule,
-                            i3$1.MatTooltipModule,
-                            i1.MatDialogModule,
-                            i3.MatButtonModule,
-                            i1$2.MatIconModule,
-                            i5.MatTabsModule,
-                            i2$2.FsListModule,
-                            i4.FsDialogModule,
-                            i6$1.FsLabelModule,
-                            i10$1.FsDateModule,
-                            i13.FsSkeletonModule,
-                            FsAppMessagesModule,
-                            i15.FsFormModule,
-                            i1$1.FsPromptInputModule,
-                            i2.FsIFrameModule,
-                            //FsDeviceModule,
-                            //FsIpModule,
-                        ],
-                        declarations: [
-                            QueuesComponent,
-                            QueueComponent,
-                            LinkifyPipe,
-                            TruncatePipe,
-                            RecipientComponent,
-                        ],
-                        exports: [
-                            QueuesComponent,
-                            QueueComponent,
-                        ],
-                        providers: [
-                            FsMessageQueueService
-                        ]
-                    }]
+    var FsAppMessageQueuesModule = /** @class */ (function () {
+        function FsAppMessageQueuesModule() {
+        }
+        return FsAppMessageQueuesModule;
+    }());
+    FsAppMessageQueuesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessageQueuesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, declarations: [QueuesComponent,
+            QueueComponent,
+            LinkifyPipe,
+            TruncatePipe,
+            RecipientComponent], imports: [router.RouterModule,
+            i15.FormsModule,
+            i17.CommonModule,
+            flexLayout.FlexLayoutModule,
+            i3$2.MatTooltipModule,
+            i1.MatDialogModule,
+            i3.MatButtonModule,
+            i1$3.MatIconModule,
+            i5.MatTabsModule,
+            i2$1.FsListModule,
+            i4.FsDialogModule,
+            i6$1.FsLabelModule,
+            i10$1.FsDateModule,
+            i14.FsSkeletonModule,
+            FsAppMessagesModule,
+            i16.FsFormModule,
+            i1$2.FsPromptInputModule,
+            i2.FsIFrameModule], exports: [QueuesComponent,
+            QueueComponent] });
+    FsAppMessageQueuesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, providers: [
+            FsMessageQueueService
+        ], imports: [[
+                router.RouterModule,
+                i15.FormsModule,
+                i17.CommonModule,
+                flexLayout.FlexLayoutModule,
+                i3$2.MatTooltipModule,
+                i1.MatDialogModule,
+                i3.MatButtonModule,
+                i1$3.MatIconModule,
+                i5.MatTabsModule,
+                i2$1.FsListModule,
+                i4.FsDialogModule,
+                i6$1.FsLabelModule,
+                i10$1.FsDateModule,
+                i14.FsSkeletonModule,
+                FsAppMessagesModule,
+                i16.FsFormModule,
+                i1$2.FsPromptInputModule,
+                i2.FsIFrameModule,
+                //FsDeviceModule,
+                //FsIpModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageQueuesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            router.RouterModule,
+                            i15.FormsModule,
+                            i17.CommonModule,
+                            flexLayout.FlexLayoutModule,
+                            i3$2.MatTooltipModule,
+                            i1.MatDialogModule,
+                            i3.MatButtonModule,
+                            i1$3.MatIconModule,
+                            i5.MatTabsModule,
+                            i2$1.FsListModule,
+                            i4.FsDialogModule,
+                            i6$1.FsLabelModule,
+                            i10$1.FsDateModule,
+                            i14.FsSkeletonModule,
+                            FsAppMessagesModule,
+                            i16.FsFormModule,
+                            i1$2.FsPromptInputModule,
+                            i2.FsIFrameModule,
+                            //FsDeviceModule,
+                            //FsIpModule,
+                        ],
+                        declarations: [
+                            QueuesComponent,
+                            QueueComponent,
+                            LinkifyPipe,
+                            TruncatePipe,
+                            RecipientComponent,
+                        ],
+                        exports: [
+                            QueuesComponent,
+                            QueueComponent,
+                        ],
+                        providers: [
+                            FsMessageQueueService
+                        ]
+                    }]
             }] });
 
-    var TemplateComponent = /** @class */ (function () {
-        function TemplateComponent(_data, _config, _dialogRef, _message, _dialog) {
-            var _this = this;
-            this._data = _data;
-            this._config = _config;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._dialog = _dialog;
-            this.htmlEditorconfig = {
-                language: 'html',
-                insertSpaces: true,
-                tabSize: 2,
-            };
-            this.cssEditorconfig = {
-                language: 'scss',
-                insertSpaces: true,
-                tabSize: 2,
-            };
-            this.save = function (event) {
-                return _this._config.saveMessageTemplate(_this.messageTemplate)
-                    .pipe(operators.tap(function (messageTemplate) {
-                    _this._message.success('Saved Changes');
-                    if (event.submitter === 'save-close') {
-                        _this._dialogRef.close(messageTemplate);
-                    }
-                }));
-            };
-        }
-        TemplateComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (this._data.messageTemplate.id) {
-                this._config.loadMessageTemplate(this._data.messageTemplate)
-                    .subscribe(function (messageTemplate) {
-                    _this.messageTemplate = messageTemplate;
-                });
-            }
-            else {
-                this.messageTemplate = {};
-            }
-        };
-        TemplateComponent.prototype.openPreview = function () {
-            this._dialog.open(PreviewComponent, {
-                data: {
-                    styles: this.messageTemplate.styles,
-                    html: this.messageTemplate.content,
-                },
-                width: '95%',
-            });
-        };
-        return TemplateComponent;
-    }());
-    TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplateComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplateComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"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 type=\"submit\" color=\"primary\" name=\"close\">Save</button>\n      <button mat-button type=\"submit\" 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-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i9__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6__namespace$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i13__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i14__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i16__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i14__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i14__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './template.component.html',
-                        styleUrls: ['./template.component.scss']
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace$1.FsMessage }, { type: i1__namespace.MatDialog }];
+    var TemplateComponent = /** @class */ (function () {
+        function TemplateComponent(_data, _config, _dialogRef, _message, _dialog) {
+            var _this = this;
+            this._data = _data;
+            this._config = _config;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._dialog = _dialog;
+            this.htmlEditorconfig = {
+                language: 'html',
+                insertSpaces: true,
+                tabSize: 2,
+            };
+            this.cssEditorconfig = {
+                language: 'scss',
+                insertSpaces: true,
+                tabSize: 2,
+            };
+            this.save = function (event) {
+                return _this._config.saveMessageTemplate(_this.messageTemplate)
+                    .pipe(operators.tap(function (messageTemplate) {
+                    _this._message.success('Saved Changes');
+                    if (event.submitter === 'save-close') {
+                        _this._dialogRef.close(messageTemplate);
+                    }
+                }));
+            };
+        }
+        TemplateComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            if (this._data.messageTemplate.id) {
+                this._config.loadMessageTemplate(this._data.messageTemplate)
+                    .subscribe(function (messageTemplate) {
+                    _this.messageTemplate = messageTemplate;
+                });
+            }
+            else {
+                this.messageTemplate = {};
+            }
+        };
+        TemplateComponent.prototype.openPreview = function () {
+            this._dialog.open(PreviewComponent, {
+                data: {
+                    styles: this.messageTemplate.styles,
+                    html: this.messageTemplate.content,
+                },
+                width: '95%',
+            });
+        };
+        return TemplateComponent;
+    }());
+    TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplateComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialogRef }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplateComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"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 type=\"submit\" color=\"primary\" name=\"close\">Save</button>\n      <button mat-button type=\"submit\" 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-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i9__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6__namespace$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i20__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './template.component.html',
+                        styleUrls: ['./template.component.scss']
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i1__namespace$1.FsMessage }, { type: i1__namespace.MatDialog }];
         } });
 
-    var TemplatesComponent = /** @class */ (function () {
-        function TemplatesComponent(_config, _dialog) {
-            this._config = _config;
-            this._dialog = _dialog;
-            this.list = null;
-            this.config = null;
-            this.messageQueueStates = [];
-            this._destroy$ = new rxjs.Subject();
-        }
-        TemplatesComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.config = {
-                actions: [
-                    {
-                        label: 'Create',
-                        click: function () {
-                            _this.open({});
-                        }
-                    }
-                ],
-                status: false,
-                fetch: function (query) {
-                    return _this._config.loadMessageTemplates(query);
-                }
-            };
-            if (this._config.deleteMessageTemplate) {
-                this.config.rowActions = [
-                    {
-                        click: function (data) {
-                            return _this._config.deleteMessageTemplate(data);
-                        },
-                        remove: {
-                            title: 'Confirm',
-                            template: 'Are you sure you would like to delete this template?',
-                        },
-                        menu: true,
-                        label: 'Delete',
-                    },
-                ];
-            }
-        };
-        TemplatesComponent.prototype.open = function (messageTemplate) {
-            var _this = this;
-            var dialogRef = this._dialog.open(TemplateComponent, {
-                data: {
-                    messageTemplate: messageTemplate,
-                },
-                width: '85%',
-            });
-            dialogRef.afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.list.reload();
-            });
-        };
-        TemplatesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return TemplatesComponent;
-    }());
-    TemplatesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TemplatesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplatesComponent, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: i2$2.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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>", components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-app-message-templates',
-                        templateUrl: './templates.component.html'
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }];
-        }, propDecorators: { list: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent, { static: true }]
+    var TemplatesComponent = /** @class */ (function () {
+        function TemplatesComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this.list = null;
+            this.config = null;
+            this.messageQueueStates = [];
+            this._destroy$ = new rxjs.Subject();
+        }
+        TemplatesComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.config = {
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.open({});
+                        }
+                    }
+                ],
+                status: false,
+                fetch: function (query) {
+                    return _this._config.loadMessageTemplates(query);
+                }
+            };
+            if (this._config.deleteMessageTemplate) {
+                this.config.rowActions = [
+                    {
+                        click: function (data) {
+                            return _this._config.deleteMessageTemplate(data);
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this template?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                    },
+                ];
+            }
+        };
+        TemplatesComponent.prototype.open = function (messageTemplate) {
+            var _this = this;
+            var dialogRef = this._dialog.open(TemplateComponent, {
+                data: {
+                    messageTemplate: messageTemplate,
+                },
+                width: '85%',
+            });
+            dialogRef.afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.list.reload();
+            });
+        };
+        TemplatesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return TemplatesComponent;
+    }());
+    TemplatesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TemplatesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplatesComponent, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, 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>", components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: TemplatesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-app-message-templates',
+                        templateUrl: './templates.component.html'
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent, { static: true }]
                 }] } });
 
-    var FsAppMessageTemplatesModule = /** @class */ (function () {
-        function FsAppMessageTemplatesModule() {
-        }
-        return FsAppMessageTemplatesModule;
-    }());
-    FsAppMessageTemplatesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessageTemplatesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, declarations: [TemplatesComponent,
-            TemplateComponent], imports: [router.RouterModule,
-            i16.CommonModule,
-            i14.FormsModule,
-            i3$1.MatTooltipModule,
-            i1.MatDialogModule,
-            i3.MatButtonModule,
-            i5.MatTabsModule,
-            i6.MatFormFieldModule,
-            i6.MatFormFieldModule,
-            i18.MatInputModule,
-            i2$2.FsListModule,
-            i4.FsDialogModule,
-            i6$1.FsLabelModule,
-            flexLayout.FlexLayoutModule,
-            i13.FsSkeletonModule,
-            i15.FsFormModule,
-            i9.FsTextEditorModule,
-            FsAppMessagePreviewModule], exports: [TemplatesComponent,
-            TemplateComponent] });
-    FsAppMessageTemplatesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, imports: [[
-                router.RouterModule,
-                i16.CommonModule,
-                i14.FormsModule,
-                i3$1.MatTooltipModule,
-                i1.MatDialogModule,
-                i3.MatButtonModule,
-                i5.MatTabsModule,
-                i6.MatFormFieldModule,
-                i6.MatFormFieldModule,
-                i18.MatInputModule,
-                i2$2.FsListModule,
-                i4.FsDialogModule,
-                i6$1.FsLabelModule,
-                flexLayout.FlexLayoutModule,
-                i13.FsSkeletonModule,
-                i15.FsFormModule,
-                i9.FsTextEditorModule,
-                FsAppMessagePreviewModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            router.RouterModule,
-                            i16.CommonModule,
-                            i14.FormsModule,
-                            i3$1.MatTooltipModule,
-                            i1.MatDialogModule,
-                            i3.MatButtonModule,
-                            i5.MatTabsModule,
-                            i6.MatFormFieldModule,
-                            i6.MatFormFieldModule,
-                            i18.MatInputModule,
-                            i2$2.FsListModule,
-                            i4.FsDialogModule,
-                            i6$1.FsLabelModule,
-                            flexLayout.FlexLayoutModule,
-                            i13.FsSkeletonModule,
-                            i15.FsFormModule,
-                            i9.FsTextEditorModule,
-                            FsAppMessagePreviewModule,
-                        ],
-                        declarations: [
-                            TemplatesComponent,
-                            TemplateComponent,
-                        ],
-                        exports: [
-                            TemplatesComponent,
-                            TemplateComponent,
-                        ],
-                    }]
+    var FsAppMessageTemplatesModule = /** @class */ (function () {
+        function FsAppMessageTemplatesModule() {
+        }
+        return FsAppMessageTemplatesModule;
+    }());
+    FsAppMessageTemplatesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessageTemplatesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, declarations: [TemplatesComponent,
+            TemplateComponent], imports: [router.RouterModule,
+            i17.CommonModule,
+            i15.FormsModule,
+            i3$2.MatTooltipModule,
+            i1.MatDialogModule,
+            i3.MatButtonModule,
+            i5.MatTabsModule,
+            i6.MatFormFieldModule,
+            i6.MatFormFieldModule,
+            i20.MatInputModule,
+            i2$1.FsListModule,
+            i4.FsDialogModule,
+            i6$1.FsLabelModule,
+            flexLayout.FlexLayoutModule,
+            i14.FsSkeletonModule,
+            i16.FsFormModule,
+            i9.FsTextEditorModule,
+            FsAppMessagePreviewModule], exports: [TemplatesComponent,
+            TemplateComponent] });
+    FsAppMessageTemplatesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, imports: [[
+                router.RouterModule,
+                i17.CommonModule,
+                i15.FormsModule,
+                i3$2.MatTooltipModule,
+                i1.MatDialogModule,
+                i3.MatButtonModule,
+                i5.MatTabsModule,
+                i6.MatFormFieldModule,
+                i6.MatFormFieldModule,
+                i20.MatInputModule,
+                i2$1.FsListModule,
+                i4.FsDialogModule,
+                i6$1.FsLabelModule,
+                flexLayout.FlexLayoutModule,
+                i14.FsSkeletonModule,
+                i16.FsFormModule,
+                i9.FsTextEditorModule,
+                FsAppMessagePreviewModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageTemplatesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            router.RouterModule,
+                            i17.CommonModule,
+                            i15.FormsModule,
+                            i3$2.MatTooltipModule,
+                            i1.MatDialogModule,
+                            i3.MatButtonModule,
+                            i5.MatTabsModule,
+                            i6.MatFormFieldModule,
+                            i6.MatFormFieldModule,
+                            i20.MatInputModule,
+                            i2$1.FsListModule,
+                            i4.FsDialogModule,
+                            i6$1.FsLabelModule,
+                            flexLayout.FlexLayoutModule,
+                            i14.FsSkeletonModule,
+                            i16.FsFormModule,
+                            i9.FsTextEditorModule,
+                            FsAppMessagePreviewModule,
+                        ],
+                        declarations: [
+                            TemplatesComponent,
+                            TemplateComponent,
+                        ],
+                        exports: [
+                            TemplatesComponent,
+                            TemplateComponent,
+                        ],
+                    }]
             }] });
 
-    var WebhooksComponent = /** @class */ (function () {
-        function WebhooksComponent(_config, _message) {
-            this._config = _config;
-            this._message = _message;
-        }
-        WebhooksComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.listConfig = {
-                paging: false,
-                actions: [
-                    {
-                        click: function () {
-                            _this._config.createWebhook()
-                                .subscribe(function () {
-                                _this._message.success('Created webhook');
-                                _this.list.reload();
-                            });
-                        },
-                        label: 'Create',
-                    },
-                ],
-                rowActions: [
-                    {
-                        click: function (webhook) {
-                            _this._config.deleteWebhook(webhook)
-                                .subscribe(function () {
-                                _this._message.success('Deleted webhook');
-                                _this.list.reload();
-                            });
-                        },
-                        label: 'Delete',
-                    },
-                ],
-                fetch: function () {
-                    return _this._config.loadWebhooks()
-                        .pipe(operators.map(function (webhooks) { return ({ data: webhooks }); }));
-                },
-            };
-        };
-        return WebhooksComponent;
-    }());
-    WebhooksComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WebhooksComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i2__namespace$1.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    WebhooksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WebhooksComponent, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, 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>", components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i10__namespace$1.FsDatePipe } });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WebhooksComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-app-message-webhooks',
-                        templateUrl: './webhooks.component.html',
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_APP_MESSAGE_CONFIG]
-                        }] }, { type: i2__namespace$1.FsMessage }];
-        }, propDecorators: { list: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent]
+    var WebhooksComponent = /** @class */ (function () {
+        function WebhooksComponent(_config, _message) {
+            this._config = _config;
+            this._message = _message;
+        }
+        WebhooksComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.listConfig = {
+                paging: false,
+                actions: [
+                    {
+                        click: function () {
+                            _this._config.createWebhook()
+                                .subscribe(function () {
+                                _this._message.success('Created webhook');
+                                _this.list.reload();
+                            });
+                        },
+                        label: 'Create',
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (webhook) {
+                            _this._config.deleteWebhook(webhook)
+                                .subscribe(function () {
+                                _this._message.success('Deleted webhook');
+                                _this.list.reload();
+                            });
+                        },
+                        label: 'Delete',
+                    },
+                ],
+                fetch: function () {
+                    return _this._config.loadWebhooks()
+                        .pipe(operators.map(function (webhooks) { return ({ data: webhooks }); }));
+                },
+            };
+        };
+        return WebhooksComponent;
+    }());
+    WebhooksComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WebhooksComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace$1.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    WebhooksComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WebhooksComponent, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, 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>", components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i10__namespace$1.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: WebhooksComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-app-message-webhooks',
+                        templateUrl: './webhooks.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_APP_MESSAGE_CONFIG]
+                        }] }, { type: i1__namespace$1.FsMessage }];
+        }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent]
                 }] } });
 
-    var FsAppMessageWebhooksModule = /** @class */ (function () {
-        function FsAppMessageWebhooksModule() {
-        }
-        return FsAppMessageWebhooksModule;
-    }());
-    FsAppMessageWebhooksModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessageWebhooksModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, declarations: [WebhooksComponent], imports: [i2$2.FsListModule,
-            i10$1.FsDateModule], exports: [WebhooksComponent] });
-    FsAppMessageWebhooksModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, imports: [[
-                i2$2.FsListModule,
-                i10$1.FsDateModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i2$2.FsListModule,
-                            i10$1.FsDateModule,
-                        ],
-                        declarations: [
-                            WebhooksComponent,
-                        ],
-                        exports: [
-                            WebhooksComponent,
-                        ],
-                    }]
+    var FsAppMessageWebhooksModule = /** @class */ (function () {
+        function FsAppMessageWebhooksModule() {
+        }
+        return FsAppMessageWebhooksModule;
+    }());
+    FsAppMessageWebhooksModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessageWebhooksModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, declarations: [WebhooksComponent], imports: [i2$1.FsListModule,
+            i10$1.FsDateModule], exports: [WebhooksComponent] });
+    FsAppMessageWebhooksModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, imports: [[
+                i2$1.FsListModule,
+                i10$1.FsDateModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageWebhooksModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2$1.FsListModule,
+                            i10$1.FsDateModule,
+                        ],
+                        declarations: [
+                            WebhooksComponent,
+                        ],
+                        exports: [
+                            WebhooksComponent,
+                        ],
+                    }]
             }] });
 
-    var FsAppMessageModule = /** @class */ (function () {
-        function FsAppMessageModule() {
-        }
-        FsAppMessageModule.forRoot = function () {
-            return {
-                ngModule: FsAppMessageModule,
-            };
-        };
-        return FsAppMessageModule;
-    }());
-    FsAppMessageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule });
-    FsAppMessageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule, decorators: [{
-                type: i0.NgModule,
-                args: [{}]
+    var FsAppMessageModule = /** @class */ (function () {
+        function FsAppMessageModule() {
+        }
+        FsAppMessageModule.forRoot = function () {
+            return {
+                ngModule: FsAppMessageModule,
+            };
+        };
+        return FsAppMessageModule;
+    }());
+    FsAppMessageModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessageModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule });
+    FsAppMessageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsAppMessageModule, decorators: [{
+                type: i0.NgModule,
+                args: [{}]
             }] });
 
-    /*
-     * Public API Surface of fs-menu
+    /*
+     * Public API Surface of fs-menu
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.FS_APP_MESSAGE_CONFIG = FS_APP_MESSAGE_CONFIG;