@firestitch/app-message 12.5.4 → 12.6.1

package/fesm2015/firestitch-app-message.js

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, InjectionToken, ChangeDetectionStrategy, ViewChild, NgModule, Input, Injectable, Pipe } from '@angular/core';
-import * as i16 from '@angular/common';
+import { Component, Inject, InjectionToken, ChangeDetectionStrategy, ViewChild, Input, NgModule, Injectable, Pipe } from '@angular/core';
+import * as i17 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -12,1224 +12,1310 @@ import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i18 from '@angular/material/input';
+import * as i20 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i7 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i3$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i6$1 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
 import * as i4 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i2$2 from '@firestitch/list';
+import * as i2$1 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
-import * as i13 from '@firestitch/skeleton';
+import * as i14 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i14 from '@angular/forms';
+import * as i18 from '@firestitch/tabs';
+import { FsTabsModule } from '@firestitch/tabs';
+import * as i15 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i15 from '@firestitch/form';
+import * as i16 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 import * as i9 from '@firestitch/text-editor';
 import { FsTextEditorModule } from '@firestitch/text-editor';
 import * as i10 from '@firestitch/html-editor';
 import { FsHtmlEditorModule, FsHtmlRendererModule } from '@firestitch/html-editor';
 import { tap, switchMap, map, takeUntil } from 'rxjs/operators';
-import { of, Subject } from 'rxjs';
-import { ItemType } from '@firestitch/filter';
-import * as i2$1 from '@firestitch/message';
-import * as i1$1 from '@firestitch/prompt';
+import { Subject, of } from 'rxjs';
+import { ActionMode, ItemType } from '@firestitch/filter';
+import * as i1$1 from '@firestitch/message';
+import * as i1$2 from '@firestitch/prompt';
 import { FsPromptInputModule } from '@firestitch/prompt';
 import * as i2 from '@firestitch/iframe';
 import { FsIFrameModule } from '@firestitch/iframe';
-import * as i17 from '@angular/flex-layout/flex';
-import * as i1$2 from '@angular/material/icon';
+import * as i3$1 from '@firestitch/common';
+import { FsCommonModule } from '@firestitch/common';
+import * as i19 from '@angular/flex-layout/flex';
+import * as i1$3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10$1 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
 import { SelectionActionType } from '@firestitch/selection';
 import anchorme from '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 = {}));
 
-const EmailMessageFormats = [
-    { name: 'Text', value: EmailMessageFormat.Text },
-    { name: 'HTML', value: EmailMessageFormat.HTML },
-    { name: 'Rich Text', value: EmailMessageFormat.RichText }
+const EmailMessageFormats = [
+    { name: 'Text', value: EmailMessageFormat.Text },
+    { name: 'HTML', value: EmailMessageFormat.HTML },
+    { name: 'Rich Text', value: EmailMessageFormat.RichText }
 ];
 
-class PreviewComponent {
-    constructor(_data) {
-        this._data = _data;
-        this.html = _data.html;
-        this.styles = _data.styles;
-    }
-    ngOnInit() {
-    }
-}
-PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i3.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './preview.component.html',
-                    styleUrls: ['./preview.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class PreviewComponent {
+    constructor(_data) {
+        this._data = _data;
+        this.html = _data.html;
+        this.styles = _data.styles;
+    }
+    ngOnInit() {
+    }
+}
+PreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+PreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PreviewComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i3.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PreviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './preview.component.html',
+                    styleUrls: ['./preview.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-const FS_APP_MESSAGE_ROOT_CONFIG = new InjectionToken('fs-app-message-root-config');
+const FS_APP_MESSAGE_ROOT_CONFIG = new InjectionToken('fs-app-message-root-config');
 const FS_APP_MESSAGE_CONFIG = new InjectionToken('fs-app-message-config');
 
-class MessageComponent {
-    constructor(_config, _data, _prompt, _message, _dialog, _cdRef) {
-        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 = () => {
-            return this._config.saveMessage(this.message)
-                .pipe(tap(() => {
-                this._message.success('Saved Changes');
-            }));
-        };
-    }
-    ngOnInit() {
-        this._config.loadMessage(this._data.message)
-            .subscribe((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((data) => {
-            this.messageTemplates = data.data;
-            this._cdRef.markForCheck();
-        });
-    }
-    tabChange(event) {
-        switch (event.tab.textLabel) {
-            case 'SMS Message':
-                this.tab = 'sms';
-                break;
-            case 'Email Message':
-                this.tab = 'email';
-                break;
-            default:
-                this.tab = null;
-        }
-    }
-    openPreview() {
-        let html = this.message.emailMessage.body;
-        let styles = this.message.emailMessage.styles;
-        if (this.message.emailMessage.messageTemplateId) {
-            const messageTemplate = this.messageTemplates
-                .find((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,
-                html,
-            },
-            width: '95%'
-        });
-    }
-    sendTest(type) {
-        of(true)
-            .pipe(switchMap(() => {
-            return type === 'email' ? this._config.getTestEmail() : of('');
-        }), switchMap((default_) => {
-            const 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((value) => {
-            this._config.testMessage(this.message, value, type)
-                .subscribe(() => {
-                this._message.success('Test Sent');
-            });
-        });
-    }
-}
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1$1.FsPrompt }, { token: i2$1.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i10.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6$1.FsLabelComponent, selector: "fs-label" }, { type: i10.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i17.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.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i15.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i17.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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './message.component.html',
-                    styleUrls: ['./message.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.FsPrompt }, { type: i2$1.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
+class AttachmentsComponent {
+    constructor(_config, _message) {
+        this._config = _config;
+        this._message = _message;
+        this.list = null;
+        this.config = null;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.config = {
+            rowActions: [],
+            actions: [
+                {
+                    label: 'Upload',
+                    mode: ActionMode.File,
+                    select: (fsFile) => {
+                        this._config.uploadMessageAttachment(this.message, fsFile)
+                            .subscribe(() => {
+                            this._message.success('Saved attachment');
+                            this.list.reload();
+                        });
+                    }
+                }
+            ],
+            fetch: query => {
+                return this._config.loadMessageAttachments(this.message, query);
+            }
+        };
+        if (this._config.downloadMessageAttachment) {
+            this.config.rowActions = [
+                {
+                    click: data => {
+                        return this._config.downloadMessageAttachment(data);
+                    },
+                    label: 'Download',
+                },
+            ];
+        }
+        if (this._config.deleteMessageAttachment) {
+            this.config.rowActions = [
+                {
+                    click: data => {
+                        return this._config.deleteMessageAttachment(data);
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this template?',
+                    },
+                    label: 'Delete',
+                },
+            ];
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+AttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AttachmentsComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentsComponent.ɵcmp = i0.ɵɵ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: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsFormatBytes": i3$1.FsFormatBytesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AttachmentsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-app-message-attachments',
+                    templateUrl: './attachments.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: i1$1.FsMessage }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
+            }], message: [{
+                type: Input
+            }] } });
 
-function indexNameValue(arry) {
-    const obj = {};
-    arry.forEach(item => {
-        obj[item.value] = item.name;
-    });
-    return obj;
-}
+class MessageComponent {
+    constructor(_config, _data, _prompt, _message, _dialog, _cdRef) {
+        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 = () => {
+            return this._config.saveMessage(this.message)
+                .pipe(tap(() => {
+                this._message.success('Saved Changes');
+            }));
+        };
+    }
+    ngOnInit() {
+        this._config.loadMessage(this._data.message)
+            .subscribe((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((data) => {
+            this.messageTemplates = data.data;
+            this._cdRef.markForCheck();
+        });
+    }
+    openPreview() {
+        let html = this.message.emailMessage.body;
+        let styles = this.message.emailMessage.styles;
+        if (this.message.emailMessage.messageTemplateId) {
+            const messageTemplate = this.messageTemplates
+                .find((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,
+                html,
+            },
+            width: '95%'
+        });
+    }
+    sendTest(type) {
+        of(true)
+            .pipe(switchMap(() => {
+            return type === 'email' ? this._config.getTestEmail() : of('');
+        }), switchMap((default_) => {
+            const 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((value) => {
+            this._config.testMessage(this.message, value, type)
+                .subscribe(() => {
+                this._message.success('Test Sent');
+            });
+        });
+    }
+}
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1$2.FsPrompt }, { token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i10.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6$1.FsLabelComponent, selector: "fs-label" }, { type: i10.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selectedName"], outputs: ["selectedNameChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { type: i18.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name"], exportAs: ["fsTabsTab"] }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i19.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.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i15.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i19.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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './message.component.html',
+                    styleUrls: ['./message.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$2.FsPrompt }, { type: i1$1.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
 
-class MessagesComponent {
-    constructor(_config, _dialog) {
-        this._config = _config;
-        this._dialog = _dialog;
-        this.list = null;
-        this.config = null;
-        this.emailMessageFormats = {};
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.emailMessageFormats = indexNameValue(EmailMessageFormats);
-        this.config = {
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search'
-                }
-            ],
-            fetch: query => {
-                return this._config.loadMessages(query)
-                    .pipe(map(response => {
-                    return ({ data: response.data, paging: response.paging });
-                }));
-            }
-        };
-    }
-    open(message) {
-        const dialogRef = this._dialog.open(MessageComponent, {
-            data: {
-                message: message,
-            },
-            width: '85%'
-        });
-        dialogRef.afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.list.reload();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
+function indexNameValue(arry) {
+    const obj = {};
+    arry.forEach(item => {
+        obj[item.value] = item.name;
+    });
+    return obj;
 }
-MessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessagesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-MessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessagesComponent, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-app-messages',
-                    templateUrl: './messages.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
+
+class MessagesComponent {
+    constructor(_config, _dialog) {
+        this._config = _config;
+        this._dialog = _dialog;
+        this.list = null;
+        this.config = null;
+        this.emailMessageFormats = {};
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.emailMessageFormats = indexNameValue(EmailMessageFormats);
+        this.config = {
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search'
+                }
+            ],
+            fetch: query => {
+                return this._config.loadMessages(query)
+                    .pipe(map(response => {
+                    return ({ data: response.data, paging: response.paging });
+                }));
+            }
+        };
+    }
+    open(message) {
+        const dialogRef = this._dialog.open(MessageComponent, {
+            data: {
+                message: message,
+            },
+            width: '85%'
+        });
+        dialogRef.afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.list.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+MessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessagesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+MessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessagesComponent, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-app-messages',
+                    templateUrl: './messages.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
             }] } });
 
-class FsAppMessagePreviewModule {
-}
-FsAppMessagePreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessagePreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [MatDialogModule,
-        MatButtonModule,
-        FsDialogModule,
-        FsIFrameModule], exports: [PreviewComponent] });
-FsAppMessagePreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, imports: [[
-            MatDialogModule,
-            MatButtonModule,
-            FsDialogModule,
-            FsIFrameModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatDialogModule,
-                        MatButtonModule,
-                        FsDialogModule,
-                        FsIFrameModule,
-                    ],
-                    declarations: [
-                        PreviewComponent,
-                    ],
-                    exports: [
-                        PreviewComponent,
-                    ]
-                }]
+class FsAppMessagePreviewModule {
+}
+FsAppMessagePreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessagePreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [MatDialogModule,
+        MatButtonModule,
+        FsDialogModule,
+        FsIFrameModule], exports: [PreviewComponent] });
+FsAppMessagePreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, imports: [[
+            MatDialogModule,
+            MatButtonModule,
+            FsDialogModule,
+            FsIFrameModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagePreviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MatDialogModule,
+                        MatButtonModule,
+                        FsDialogModule,
+                        FsIFrameModule,
+                    ],
+                    declarations: [
+                        PreviewComponent,
+                    ],
+                    exports: [
+                        PreviewComponent,
+                    ]
+                }]
         }] });
 
-class FsAppMessagesModule {
-}
-FsAppMessagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, declarations: [MessagesComponent,
-        MessageComponent], imports: [RouterModule,
-        CommonModule,
-        FormsModule,
-        MatDialogModule,
-        MatButtonModule,
-        MatTabsModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatOptionModule,
-        MatSelectModule,
-        MatTooltipModule,
-        MatCheckboxModule,
-        FsDialogModule,
-        FsListModule,
-        FsLabelModule,
-        FlexLayoutModule,
-        FsSkeletonModule,
-        FsFormModule,
-        FsTextEditorModule,
-        FsHtmlEditorModule,
-        FsHtmlRendererModule,
-        FsAppMessagePreviewModule], exports: [MessagesComponent,
-        MessageComponent] });
-FsAppMessagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, imports: [[
-            RouterModule,
-            CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule,
-            MatCheckboxModule,
-            FsDialogModule,
-            FsListModule,
-            FsLabelModule,
-            FlexLayoutModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsHtmlEditorModule,
-            FsHtmlRendererModule,
-            FsAppMessagePreviewModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        MatCheckboxModule,
-                        FsDialogModule,
-                        FsListModule,
-                        FsLabelModule,
-                        FlexLayoutModule,
-                        FsSkeletonModule,
-                        FsFormModule,
-                        FsTextEditorModule,
-                        FsHtmlEditorModule,
-                        FsHtmlRendererModule,
-                        FsAppMessagePreviewModule,
-                    ],
-                    declarations: [
-                        MessagesComponent,
-                        MessageComponent,
-                    ],
-                    exports: [
-                        MessagesComponent,
-                        MessageComponent,
-                    ],
-                }]
+class FsAppMessagesModule {
+}
+FsAppMessagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, declarations: [MessagesComponent,
+        MessageComponent,
+        AttachmentsComponent], imports: [RouterModule,
+        CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatTabsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatOptionModule,
+        MatSelectModule,
+        MatTooltipModule,
+        MatCheckboxModule,
+        FsDialogModule,
+        FsListModule,
+        FsLabelModule,
+        FlexLayoutModule,
+        FsSkeletonModule,
+        FsFormModule,
+        FsTextEditorModule,
+        FsHtmlEditorModule,
+        FsHtmlRendererModule,
+        FsCommonModule,
+        FsTabsModule,
+        FsAppMessagePreviewModule], exports: [MessagesComponent,
+        MessageComponent] });
+FsAppMessagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, imports: [[
+            RouterModule,
+            CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatOptionModule,
+            MatSelectModule,
+            MatTooltipModule,
+            MatCheckboxModule,
+            FsDialogModule,
+            FsListModule,
+            FsLabelModule,
+            FlexLayoutModule,
+            FsSkeletonModule,
+            FsFormModule,
+            FsTextEditorModule,
+            FsHtmlEditorModule,
+            FsHtmlRendererModule,
+            FsCommonModule,
+            FsTabsModule,
+            FsAppMessagePreviewModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessagesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RouterModule,
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatSelectModule,
+                        MatTooltipModule,
+                        MatCheckboxModule,
+                        FsDialogModule,
+                        FsListModule,
+                        FsLabelModule,
+                        FlexLayoutModule,
+                        FsSkeletonModule,
+                        FsFormModule,
+                        FsTextEditorModule,
+                        FsHtmlEditorModule,
+                        FsHtmlRendererModule,
+                        FsCommonModule,
+                        FsTabsModule,
+                        FsAppMessagePreviewModule,
+                    ],
+                    declarations: [
+                        MessagesComponent,
+                        MessageComponent,
+                        AttachmentsComponent,
+                    ],
+                    exports: [
+                        MessagesComponent,
+                        MessageComponent,
+                    ],
+                }]
         }] });
 
-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 = {}));
 
-const 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 }
+const 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 = {}));
 
-const MessageQueueEventTypes = [
-    { name: 'Open', value: MessageQueueEventType.Open },
-    { name: 'Click', value: MessageQueueEventType.Click },
+const MessageQueueEventTypes = [
+    { name: 'Open', value: MessageQueueEventType.Open },
+    { name: 'Click', value: MessageQueueEventType.Click },
 ];
 
-class RecipientComponent {
-    ngOnInit() {
-        const icons = {
-            'S': { name: 'check_circle', tooltip: 'Sent' },
-            'E': { name: 'offline_bolt', tooltip: 'Sending' },
-            'F': { name: 'info', tooltip: 'Failed' },
-        };
-        this.icon = icons[this.state];
-    }
-}
-RecipientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecipientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RecipientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecipientComponent, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0, 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$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecipientComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-recipient',
-                    templateUrl: './recipient.component.html',
-                    styleUrls: ['./recipient.component.scss'],
-                }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], state: [{
-                type: Input
+class RecipientComponent {
+    ngOnInit() {
+        const icons = {
+            'S': { name: 'check_circle', tooltip: 'Sent' },
+            'E': { name: 'offline_bolt', tooltip: 'Sending' },
+            'F': { name: 'info', tooltip: 'Failed' },
+        };
+        this.icon = icons[this.state];
+    }
+}
+RecipientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecipientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RecipientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: RecipientComponent, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0, 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$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: RecipientComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-recipient',
+                    templateUrl: './recipient.component.html',
+                    styleUrls: ['./recipient.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], state: [{
+                type: Input
             }] } });
 
-class QueueComponent {
-    constructor(_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 Subject();
-    }
-    ngOnInit() {
-        this.messageQueueStates = indexNameValue(MessageQueueStates);
-        this.resendMessageQueue = this._config.resendMessageQueue;
-        this.forwardMessageQueue = this._config.forwardMessageQueue;
-        this._config.loadMessageQueue(this._data.messageQueueId)
-            .subscribe((messageQueue) => {
-            this.messageQueue = messageQueue;
-            if (this.messageQueue.emailMessageQueue) {
-                let body = this.messageQueue.emailMessageQueue.body;
-                if (this.messageQueue.emailMessageQueue.format === EmailMessageQueueFormat.HTML) {
-                    try {
-                        const doc = new DOMParser().parseFromString(body, 'text/html');
-                        doc.querySelectorAll('a').forEach((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((accum, messageQueueRecipient) => {
-                accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
-                return accum;
-            }, {});
-            this._setLogsConfig(messageQueue);
-            this._setAttachmentsConfig(messageQueue);
-            this._setEventsConfig(messageQueue);
-        });
-    }
-    anchorMe(html) {
-        return anchorme(html, {
-            options: {
-                attributes: [
-                    {
-                        name: 'target',
-                        value: '_blank'
-                    },
-                ],
-            },
-        });
-    }
-    openMessage(message) {
-        this._dialog.open(MessageComponent, {
-            data: {
-                message: message,
-            },
-            width: '85%'
-        });
-    }
-    resend() {
-        this._prompt.confirm({
-            title: 'Confirm',
-            template: 'Are you sure you would like to resend this message?'
-        }).subscribe(() => {
-            this.resendMessageQueue(this.messageQueue)
-                .subscribe(messageQueue => {
-                Object.assign(this.messageQueue, messageQueue);
-                this._message.success('Successfully resent');
-                if (this.logList) {
-                    this.logList.reload();
-                }
-            });
-        });
-    }
-    forward() {
-        const 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((value) => {
-            if (value) {
-                this.forwardMessageQueue(this.messageQueue, value)
-                    .subscribe(messageQueue => {
-                    this.messageQueue = Object.assign(Object.assign({}, this.messageQueue), { messageQueue });
-                    this._message.success('Successfully forwarded');
-                    if (this.logList) {
-                        this.logList.reload();
-                    }
-                });
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _setLogsConfig(messageQueue) {
-        this.logConfig = {
-            loadMore: true,
-            queryParam: false,
-            fetch: query => {
-                return this._config.loadLogs(messageQueue, query);
-            }
-        };
-    }
-    _setEventsConfig(messageQueue) {
-        this.eventConfig = {
-            loadMore: true,
-            queryParam: false,
-            fetch: (query) => {
-                return this._config.loadMessageQueueEvents(messageQueue, query);
-            }
-        };
-    }
-    _setAttachmentsConfig(messageQueue) {
-        this.attachmentConfig = {
-            queryParam: false,
-            fetch: query => {
-                return this._config.loadMessageQueueAttachments(messageQueue, query)
-                    .pipe(map(response => ({
-                    data: response.data.map(value => {
-                        value.prettyFilesize = this._prettyFilesize(value.filesize);
-                        return value;
-                    }), paging: response.paging
-                })));
-            }
-        };
-        if (this._config.downloadMessageQueueAttachment) {
-            this.attachmentConfig.rowActions = [
-                {
-                    click: (messageAttachment) => {
-                        this._config.downloadMessageQueueAttachment(messageAttachment, this.messageQueue);
-                    },
-                    label: 'Download',
-                }
-            ];
-        }
-    }
-    _prettyFilesize(bytes) {
-        if (bytes === 0) {
-            return '0.00 B';
-        }
-        const e = Math.floor(Math.log(bytes) / Math.log(1024));
-        return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
-    }
-}
-QueueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i2$1.FsMessage }, { token: i1$1.FsPrompt }, { token: i1.MatDialog }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-QueueComponent.ɵcmp = i0.ɵɵ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, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i17.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10$1.FsDateFormatPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueueComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './queue.component.html',
-                    styleUrls: ['./queue.component.scss'],
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i2$1.FsMessage }, { type: i1$1.FsPrompt }, { type: i1.MatDialog }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }]; }, propDecorators: { logList: [{
-                type: ViewChild,
-                args: ['logList']
+class QueueComponent {
+    constructor(_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 Subject();
+    }
+    ngOnInit() {
+        this.messageQueueStates = indexNameValue(MessageQueueStates);
+        this.resendMessageQueue = this._config.resendMessageQueue;
+        this.forwardMessageQueue = this._config.forwardMessageQueue;
+        this._config.loadMessageQueue(this._data.messageQueueId)
+            .subscribe((messageQueue) => {
+            this.messageQueue = messageQueue;
+            if (this.messageQueue.emailMessageQueue) {
+                let body = this.messageQueue.emailMessageQueue.body;
+                if (this.messageQueue.emailMessageQueue.format === EmailMessageQueueFormat.HTML) {
+                    try {
+                        const doc = new DOMParser().parseFromString(body, 'text/html');
+                        doc.querySelectorAll('a').forEach((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((accum, messageQueueRecipient) => {
+                accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
+                return accum;
+            }, {});
+            this._setLogsConfig(messageQueue);
+            this._setAttachmentsConfig(messageQueue);
+            this._setEventsConfig(messageQueue);
+            this._cdRef.markForCheck();
+        });
+    }
+    anchorMe(html) {
+        return anchorme(html, {
+            options: {
+                attributes: [
+                    {
+                        name: 'target',
+                        value: '_blank'
+                    },
+                ],
+            },
+        });
+    }
+    openMessage(message) {
+        this._dialog.open(MessageComponent, {
+            data: {
+                message: message,
+            },
+            width: '85%'
+        });
+    }
+    resend() {
+        this._prompt.confirm({
+            title: 'Confirm',
+            template: 'Are you sure you would like to resend this message?'
+        }).subscribe(() => {
+            this.resendMessageQueue(this.messageQueue)
+                .subscribe(messageQueue => {
+                Object.assign(this.messageQueue, messageQueue);
+                this._cdRef.markForCheck();
+                this._message.success('Successfully resent');
+                if (this.logList) {
+                    this.logList.reload();
+                }
+            });
+        });
+    }
+    forward() {
+        const 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((value) => {
+            if (value) {
+                this.forwardMessageQueue(this.messageQueue, value)
+                    .subscribe(messageQueue => {
+                    this.messageQueue = Object.assign(Object.assign({}, this.messageQueue), { messageQueue });
+                    this._message.success('Successfully forwarded');
+                    this._cdRef.markForCheck();
+                    if (this.logList) {
+                        this.logList.reload();
+                    }
+                });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _setLogsConfig(messageQueue) {
+        this.logConfig = {
+            loadMore: true,
+            queryParam: false,
+            fetch: query => {
+                return this._config.loadLogs(messageQueue, query);
+            }
+        };
+    }
+    _setEventsConfig(messageQueue) {
+        this.eventConfig = {
+            loadMore: true,
+            queryParam: false,
+            fetch: (query) => {
+                return this._config.loadMessageQueueEvents(messageQueue, query);
+            }
+        };
+    }
+    _setAttachmentsConfig(messageQueue) {
+        this.attachmentConfig = {
+            queryParam: false,
+            fetch: query => {
+                return this._config.loadMessageQueueAttachments(messageQueue, query)
+                    .pipe(map(response => ({
+                    data: response.data.map(value => {
+                        value.prettyFilesize = this._prettyFilesize(value.filesize);
+                        return value;
+                    }), paging: response.paging
+                })));
+            }
+        };
+        if (this._config.downloadMessageQueueAttachment) {
+            this.attachmentConfig.rowActions = [
+                {
+                    click: (messageAttachment) => {
+                        this._config.downloadMessageQueueAttachment(messageAttachment, this.messageQueue);
+                    },
+                    label: 'Download',
+                }
+            ];
+        }
+    }
+    _prettyFilesize(bytes) {
+        if (bytes === 0) {
+            return '0.00 B';
+        }
+        const e = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
+    }
+}
+QueueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1$1.FsMessage }, { token: i1$2.FsPrompt }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+QueueComponent.ɵcmp = i0.ɵɵ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, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "styles"] }, { type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i19.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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10$1.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueueComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './queue.component.html',
+                    styleUrls: ['./queue.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$1.FsMessage }, { type: i1$2.FsPrompt }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { logList: [{
+                type: ViewChild,
+                args: ['logList']
             }] } });
 
-class FsMessageQueueService {
-    constructor(_dialog) {
-        this._dialog = _dialog;
-        this._destroy$ = new Subject();
-    }
-    openMessageQueue(messageQueueId, options = {}) {
-        return this._dialog.open(QueueComponent, Object.assign(Object.assign({}, options), { data: {
-                messageQueueId,
-            }, width: options.width || '85%' })).afterClosed()
-            .pipe(takeUntil(this._destroy$));
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-FsMessageQueueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-FsMessageQueueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService, decorators: [{
-            type: Injectable
+class FsMessageQueueService {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this._destroy$ = new Subject();
+    }
+    openMessageQueue(messageQueueId, options = {}) {
+        return this._dialog.open(QueueComponent, Object.assign(Object.assign({}, options), { data: {
+                messageQueueId,
+            }, width: options.width || '85%' })).afterClosed()
+            .pipe(takeUntil(this._destroy$));
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+FsMessageQueueService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+FsMessageQueueService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsMessageQueueService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; } });
 
-class TruncatePipe {
-    transform(value, limit = 25, completeWords = false, ellipsis = '...') {
-        if (value.length < limit) {
-            return `${value.substr(0, limit)}`;
-        }
-        if (completeWords) {
-            limit = value.substr(0, limit).lastIndexOf(' ');
-        }
-        return `${value.substr(0, limit)}${ellipsis}`;
-    }
-}
-TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, name: "truncate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'truncate'
-                }]
+class TruncatePipe {
+    transform(value, limit = 25, completeWords = false, ellipsis = '...') {
+        if (value.length < limit) {
+            return `${value.substr(0, limit)}`;
+        }
+        if (completeWords) {
+            limit = value.substr(0, limit).lastIndexOf(' ');
+        }
+        return `${value.substr(0, limit)}${ellipsis}`;
+    }
+}
+TruncatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TruncatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, name: "truncate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate'
+                }]
         }] });
 
-class QueuesComponent {
-    constructor(_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 Subject();
-    }
-    ngOnInit() {
-        this.messageQueueStates = indexNameValue(MessageQueueStates);
-        this.config = {
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search'
-                },
-                {
-                    name: 'state',
-                    type: ItemType.Select,
-                    label: 'Status',
-                    values: () => {
-                        return MessageQueueStates;
-                    }
-                },
-                {
-                    name: 'date',
-                    type: ItemType.DateRange,
-                    label: ['From Date', 'To Date'],
-                },
-            ],
-            sort: { value: 'created_date', direction: 'desc' },
-            fetch: 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(map(response => ({ data: response.data
-                        .map((messageQueue) => {
-                        return Object.assign(Object.assign({}, messageQueue), { messageQueueRecipients: messageQueue.messageQueueRecipients
-                                .reduce((accum, messageQueueRecipient) => {
-                                accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
-                                return accum;
-                            }, {}) });
-                    }), paging: response.paging })));
-            }
-        };
-        if (this._config.bulkMessageQueues) {
-            this.config.selection = {
-                selectAll: false,
-                actions: [
-                    {
-                        type: SelectionActionType.Action,
-                        name: 'queue',
-                        label: 'Queue',
-                    },
-                    {
-                        type: SelectionActionType.Action,
-                        name: 'resend',
-                        label: 'Resend',
-                    },
-                    {
-                        type: SelectionActionType.Action,
-                        name: 'cancel',
-                        label: 'Cancel',
-                    },
-                ],
-                actionSelected: (actionSelected) => {
-                    return this._config.bulkMessageQueues(actionSelected.action.name, actionSelected.selected)
-                        .pipe(tap(() => {
-                        this.list.reload();
-                    }));
-                }
-            };
-        }
-        this.config.filters.push({
-            name: 'message_id',
-            type: ItemType.Select,
-            label: 'Message Type',
-            values: (query) => {
-                query = Object.assign(Object.assign({}, query), { limit: 50 });
-                return this._config.loadMessages(query)
-                    .pipe(map((response) => {
-                    return [
-                        { value: null, name: 'All', },
-                        ...response.data.map((item) => ({ name: item.name, value: item.id })),
-                    ];
-                }));
-            }
-        });
-    }
-    open(messageQueue) {
-        this._messageQueueService.openMessageQueue(messageQueue.id)
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.list.reload();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-QueuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }, { token: FsMessageQueueService }], target: i0.ɵɵFactoryTarget.Component });
-QueuesComponent.ɵcmp = i0.ɵɵ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: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.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.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$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i16.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10$1.FsDateFormatPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueuesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-app-message-queues',
-                    styleUrls: ['./queues.component.scss'],
-                    templateUrl: './queues.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialog }, { type: FsMessageQueueService }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
-            }], query: [{
-                type: Input
+class QueuesComponent {
+    constructor(_config, _messageQueueService) {
+        this._config = _config;
+        this._messageQueueService = _messageQueueService;
+        this.list = null;
+        this.query = {};
+        this.config = null;
+        this.messageQueueStates = {};
+        this.MessageQueueState = MessageQueueState;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.messageQueueStates = indexNameValue(MessageQueueStates);
+        this.config = {
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search'
+                },
+                {
+                    name: 'state',
+                    type: ItemType.Select,
+                    label: 'Status',
+                    values: () => {
+                        return MessageQueueStates;
+                    }
+                },
+                {
+                    name: 'date',
+                    type: ItemType.DateRange,
+                    label: ['From Date', 'To Date'],
+                },
+            ],
+            sort: { value: 'created_date', direction: 'desc' },
+            fetch: 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(map(response => ({ data: response.data
+                        .map((messageQueue) => {
+                        return Object.assign(Object.assign({}, messageQueue), { messageQueueRecipients: messageQueue.messageQueueRecipients
+                                .reduce((accum, messageQueueRecipient) => {
+                                accum[messageQueueRecipient.recipient] = messageQueueRecipient.state;
+                                return accum;
+                            }, {}) });
+                    }), paging: response.paging })));
+            }
+        };
+        if (this._config.bulkMessageQueues) {
+            this.config.selection = {
+                selectAll: false,
+                actions: [
+                    {
+                        type: SelectionActionType.Action,
+                        name: 'queue',
+                        label: 'Queue',
+                    },
+                    {
+                        type: SelectionActionType.Action,
+                        name: 'resend',
+                        label: 'Resend',
+                    },
+                    {
+                        type: SelectionActionType.Action,
+                        name: 'cancel',
+                        label: 'Cancel',
+                    },
+                ],
+                actionSelected: (actionSelected) => {
+                    return this._config.bulkMessageQueues(actionSelected.action.name, actionSelected.selected)
+                        .pipe(tap(() => {
+                        this.list.reload();
+                    }));
+                }
+            };
+        }
+        this.config.filters.push({
+            name: 'message_id',
+            type: ItemType.Select,
+            label: 'Message Type',
+            values: (query) => {
+                query = Object.assign(Object.assign({}, query), { limit: 50 });
+                return this._config.loadMessages(query)
+                    .pipe(map((response) => {
+                    return [
+                        { value: null, name: 'All', },
+                        ...response.data
+                            .map((item) => ({ name: item.name, value: item.id })),
+                    ];
+                }));
+            }
+        });
+    }
+    open(messageQueue) {
+        this._messageQueueService.openMessageQueue(messageQueue.id)
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.list.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+QueuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: FsMessageQueueService }], target: i0.ɵɵFactoryTarget.Component });
+QueuesComponent.ɵcmp = i0.ɵɵ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: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19.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.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$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10$1.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: QueuesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-app-message-queues',
+                    styleUrls: ['./queues.component.scss'],
+                    templateUrl: './queues.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: FsMessageQueueService }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
+            }], query: [{
+                type: Input
             }] } });
 
-class LinkifyPipe {
-    transform(value) {
-        return anchorme(value, {
-            attributes: [
-                {
-                    name: 'target',
-                    value: '_blank'
-                },
-            ]
-        });
-    }
-}
-LinkifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-LinkifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, name: "linkify" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'linkify' }]
+class LinkifyPipe {
+    transform(value) {
+        return anchorme(value, {
+            attributes: [
+                {
+                    name: 'target',
+                    value: '_blank'
+                },
+            ]
+        });
+    }
+}
+LinkifyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+LinkifyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, name: "linkify" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LinkifyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'linkify' }]
         }] });
 
-class FsAppMessageQueuesModule {
-}
-FsAppMessageQueuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessageQueuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, declarations: [QueuesComponent,
-        QueueComponent,
-        LinkifyPipe,
-        TruncatePipe,
-        RecipientComponent], imports: [RouterModule,
-        FormsModule,
-        CommonModule,
-        FlexLayoutModule,
-        MatTooltipModule,
-        MatDialogModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTabsModule,
-        FsListModule,
-        FsDialogModule,
-        FsLabelModule,
-        FsDateModule,
-        FsSkeletonModule,
-        FsAppMessagesModule,
-        FsFormModule,
-        FsPromptInputModule,
-        FsIFrameModule], exports: [QueuesComponent,
-        QueueComponent] });
-FsAppMessageQueuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, providers: [
-        FsMessageQueueService
-    ], imports: [[
-            RouterModule,
-            FormsModule,
-            CommonModule,
-            FlexLayoutModule,
-            MatTooltipModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatIconModule,
-            MatTabsModule,
-            FsListModule,
-            FsDialogModule,
-            FsLabelModule,
-            FsDateModule,
-            FsSkeletonModule,
-            FsAppMessagesModule,
-            FsFormModule,
-            FsPromptInputModule,
-            FsIFrameModule,
-            //FsDeviceModule,
-            //FsIpModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        RouterModule,
-                        FormsModule,
-                        CommonModule,
-                        FlexLayoutModule,
-                        MatTooltipModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTabsModule,
-                        FsListModule,
-                        FsDialogModule,
-                        FsLabelModule,
-                        FsDateModule,
-                        FsSkeletonModule,
-                        FsAppMessagesModule,
-                        FsFormModule,
-                        FsPromptInputModule,
-                        FsIFrameModule,
-                        //FsDeviceModule,
-                        //FsIpModule,
-                    ],
-                    declarations: [
-                        QueuesComponent,
-                        QueueComponent,
-                        LinkifyPipe,
-                        TruncatePipe,
-                        RecipientComponent,
-                    ],
-                    exports: [
-                        QueuesComponent,
-                        QueueComponent,
-                    ],
-                    providers: [
-                        FsMessageQueueService
-                    ]
-                }]
+class FsAppMessageQueuesModule {
+}
+FsAppMessageQueuesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessageQueuesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, declarations: [QueuesComponent,
+        QueueComponent,
+        LinkifyPipe,
+        TruncatePipe,
+        RecipientComponent], imports: [RouterModule,
+        FormsModule,
+        CommonModule,
+        FlexLayoutModule,
+        MatTooltipModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatIconModule,
+        MatTabsModule,
+        FsListModule,
+        FsDialogModule,
+        FsLabelModule,
+        FsDateModule,
+        FsSkeletonModule,
+        FsAppMessagesModule,
+        FsFormModule,
+        FsPromptInputModule,
+        FsIFrameModule], exports: [QueuesComponent,
+        QueueComponent] });
+FsAppMessageQueuesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, providers: [
+        FsMessageQueueService
+    ], imports: [[
+            RouterModule,
+            FormsModule,
+            CommonModule,
+            FlexLayoutModule,
+            MatTooltipModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatIconModule,
+            MatTabsModule,
+            FsListModule,
+            FsDialogModule,
+            FsLabelModule,
+            FsDateModule,
+            FsSkeletonModule,
+            FsAppMessagesModule,
+            FsFormModule,
+            FsPromptInputModule,
+            FsIFrameModule,
+            //FsDeviceModule,
+            //FsIpModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageQueuesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RouterModule,
+                        FormsModule,
+                        CommonModule,
+                        FlexLayoutModule,
+                        MatTooltipModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTabsModule,
+                        FsListModule,
+                        FsDialogModule,
+                        FsLabelModule,
+                        FsDateModule,
+                        FsSkeletonModule,
+                        FsAppMessagesModule,
+                        FsFormModule,
+                        FsPromptInputModule,
+                        FsIFrameModule,
+                        //FsDeviceModule,
+                        //FsIpModule,
+                    ],
+                    declarations: [
+                        QueuesComponent,
+                        QueueComponent,
+                        LinkifyPipe,
+                        TruncatePipe,
+                        RecipientComponent,
+                    ],
+                    exports: [
+                        QueuesComponent,
+                        QueueComponent,
+                    ],
+                    providers: [
+                        FsMessageQueueService
+                    ]
+                }]
         }] });
 
-class TemplateComponent {
-    constructor(_data, _config, _dialogRef, _message, _dialog) {
-        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 = (event) => {
-            return this._config.saveMessageTemplate(this.messageTemplate)
-                .pipe(tap((messageTemplate) => {
-                this._message.success('Saved Changes');
-                if (event.submitter === 'save-close') {
-                    this._dialogRef.close(messageTemplate);
-                }
-            }));
-        };
-    }
-    ngOnInit() {
-        if (this._data.messageTemplate.id) {
-            this._config.loadMessageTemplate(this._data.messageTemplate)
-                .subscribe(messageTemplate => {
-                this.messageTemplate = messageTemplate;
-            });
-        }
-        else {
-            this.messageTemplate = {};
-        }
-    }
-    openPreview() {
-        this._dialog.open(PreviewComponent, {
-            data: {
-                styles: this.messageTemplate.styles,
-                html: this.messageTemplate.content,
-            },
-            width: '95%',
-        });
-    }
-}
-TemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialogRef }, { token: i2$1.FsMessage }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplateComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i9.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i14.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i14.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i14.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i15.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i15.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './template.component.html',
-                    styleUrls: ['./template.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialogRef }, { type: i2$1.FsMessage }, { type: i1.MatDialog }]; } });
+class TemplateComponent {
+    constructor(_data, _config, _dialogRef, _message, _dialog) {
+        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 = (event) => {
+            return this._config.saveMessageTemplate(this.messageTemplate)
+                .pipe(tap((messageTemplate) => {
+                this._message.success('Saved Changes');
+                if (event.submitter === 'save-close') {
+                    this._dialogRef.close(messageTemplate);
+                }
+            }));
+        };
+    }
+    ngOnInit() {
+        if (this._data.messageTemplate.id) {
+            this._config.loadMessageTemplate(this._data.messageTemplate)
+                .subscribe(messageTemplate => {
+                this.messageTemplate = messageTemplate;
+            });
+        }
+        else {
+            this.messageTemplate = {};
+        }
+    }
+    openPreview() {
+        this._dialog.open(PreviewComponent, {
+            data: {
+                styles: this.messageTemplate.styles,
+                html: this.messageTemplate.content,
+            },
+            width: '95%',
+        });
+    }
+}
+TemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialogRef }, { token: i1$1.FsMessage }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplateComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i9.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3.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.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i20.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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.MatTabContent, selector: "[matTabContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16.FsSubmitButtonDirective, selector: "button[type=\"submit\"]", inputs: ["name", "dirtySubmit"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './template.component.html',
+                    styleUrls: ['./template.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: i1.MatDialogRef }, { type: i1$1.FsMessage }, { type: i1.MatDialog }]; } });
 
-class TemplatesComponent {
-    constructor(_config, _dialog) {
-        this._config = _config;
-        this._dialog = _dialog;
-        this.list = null;
-        this.config = null;
-        this.messageQueueStates = [];
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.config = {
-            actions: [
-                {
-                    label: 'Create',
-                    click: () => {
-                        this.open({});
-                    }
-                }
-            ],
-            status: false,
-            fetch: query => {
-                return this._config.loadMessageTemplates(query);
-            }
-        };
-        if (this._config.deleteMessageTemplate) {
-            this.config.rowActions = [
-                {
-                    click: data => {
-                        return this._config.deleteMessageTemplate(data);
-                    },
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you would like to delete this template?',
-                    },
-                    menu: true,
-                    label: 'Delete',
-                },
-            ];
-        }
-    }
-    open(messageTemplate) {
-        const dialogRef = this._dialog.open(TemplateComponent, {
-            data: {
-                messageTemplate,
-            },
-            width: '85%',
-        });
-        dialogRef.afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.list.reload();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-TemplatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TemplatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplatesComponent, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-app-message-templates',
-                    templateUrl: './templates.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
+class TemplatesComponent {
+    constructor(_config, _dialog) {
+        this._config = _config;
+        this._dialog = _dialog;
+        this.list = null;
+        this.config = null;
+        this.messageQueueStates = [];
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.config = {
+            actions: [
+                {
+                    label: 'Create',
+                    click: () => {
+                        this.open({});
+                    }
+                }
+            ],
+            status: false,
+            fetch: query => {
+                return this._config.loadMessageTemplates(query);
+            }
+        };
+        if (this._config.deleteMessageTemplate) {
+            this.config.rowActions = [
+                {
+                    click: data => {
+                        return this._config.deleteMessageTemplate(data);
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this template?',
+                    },
+                    menu: true,
+                    label: 'Delete',
+                },
+            ];
+        }
+    }
+    open(messageTemplate) {
+        const dialogRef = this._dialog.open(TemplateComponent, {
+            data: {
+                messageTemplate,
+            },
+            width: '85%',
+        });
+        dialogRef.afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.list.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+TemplatesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+TemplatesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TemplatesComponent, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplatesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-app-message-templates',
+                    templateUrl: './templates.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
             }] } });
 
-class FsAppMessageTemplatesModule {
-}
-FsAppMessageTemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessageTemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, declarations: [TemplatesComponent,
-        TemplateComponent], imports: [RouterModule,
-        CommonModule,
-        FormsModule,
-        MatTooltipModule,
-        MatDialogModule,
-        MatButtonModule,
-        MatTabsModule,
-        MatFormFieldModule,
-        MatFormFieldModule,
-        MatInputModule,
-        FsListModule,
-        FsDialogModule,
-        FsLabelModule,
-        FlexLayoutModule,
-        FsSkeletonModule,
-        FsFormModule,
-        FsTextEditorModule,
-        FsAppMessagePreviewModule], exports: [TemplatesComponent,
-        TemplateComponent] });
-FsAppMessageTemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, imports: [[
-            RouterModule,
-            CommonModule,
-            FormsModule,
-            MatTooltipModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FsListModule,
-            FsDialogModule,
-            FsLabelModule,
-            FlexLayoutModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsAppMessagePreviewModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
-                        MatTooltipModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        MatFormFieldModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        FsListModule,
-                        FsDialogModule,
-                        FsLabelModule,
-                        FlexLayoutModule,
-                        FsSkeletonModule,
-                        FsFormModule,
-                        FsTextEditorModule,
-                        FsAppMessagePreviewModule,
-                    ],
-                    declarations: [
-                        TemplatesComponent,
-                        TemplateComponent,
-                    ],
-                    exports: [
-                        TemplatesComponent,
-                        TemplateComponent,
-                    ],
-                }]
+class FsAppMessageTemplatesModule {
+}
+FsAppMessageTemplatesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessageTemplatesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, declarations: [TemplatesComponent,
+        TemplateComponent], imports: [RouterModule,
+        CommonModule,
+        FormsModule,
+        MatTooltipModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatTabsModule,
+        MatFormFieldModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FsListModule,
+        FsDialogModule,
+        FsLabelModule,
+        FlexLayoutModule,
+        FsSkeletonModule,
+        FsFormModule,
+        FsTextEditorModule,
+        FsAppMessagePreviewModule], exports: [TemplatesComponent,
+        TemplateComponent] });
+FsAppMessageTemplatesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, imports: [[
+            RouterModule,
+            CommonModule,
+            FormsModule,
+            MatTooltipModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatFormFieldModule,
+            MatFormFieldModule,
+            MatInputModule,
+            FsListModule,
+            FsDialogModule,
+            FsLabelModule,
+            FlexLayoutModule,
+            FsSkeletonModule,
+            FsFormModule,
+            FsTextEditorModule,
+            FsAppMessagePreviewModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageTemplatesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        RouterModule,
+                        CommonModule,
+                        FormsModule,
+                        MatTooltipModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatFormFieldModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FsListModule,
+                        FsDialogModule,
+                        FsLabelModule,
+                        FlexLayoutModule,
+                        FsSkeletonModule,
+                        FsFormModule,
+                        FsTextEditorModule,
+                        FsAppMessagePreviewModule,
+                    ],
+                    declarations: [
+                        TemplatesComponent,
+                        TemplateComponent,
+                    ],
+                    exports: [
+                        TemplatesComponent,
+                        TemplateComponent,
+                    ],
+                }]
         }] });
 
-class WebhooksComponent {
-    constructor(_config, _message) {
-        this._config = _config;
-        this._message = _message;
-    }
-    ngOnInit() {
-        this.listConfig = {
-            paging: false,
-            actions: [
-                {
-                    click: () => {
-                        this._config.createWebhook()
-                            .subscribe(() => {
-                            this._message.success('Created webhook');
-                            this.list.reload();
-                        });
-                    },
-                    label: 'Create',
-                },
-            ],
-            rowActions: [
-                {
-                    click: (webhook) => {
-                        this._config.deleteWebhook(webhook)
-                            .subscribe(() => {
-                            this._message.success('Deleted webhook');
-                            this.list.reload();
-                        });
-                    },
-                    label: 'Delete',
-                },
-            ],
-            fetch: () => {
-                return this._config.loadWebhooks()
-                    .pipe(map((webhooks) => ({ data: webhooks })));
-            },
-        };
-    }
-}
-WebhooksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WebhooksComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i2$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-WebhooksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WebhooksComponent, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, 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$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i10$1.FsDatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WebhooksComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-app-message-webhooks',
-                    templateUrl: './webhooks.component.html',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i2$1.FsMessage }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
+class WebhooksComponent {
+    constructor(_config, _message) {
+        this._config = _config;
+        this._message = _message;
+    }
+    ngOnInit() {
+        this.listConfig = {
+            paging: false,
+            actions: [
+                {
+                    click: () => {
+                        this._config.createWebhook()
+                            .subscribe(() => {
+                            this._message.success('Created webhook');
+                            this.list.reload();
+                        });
+                    },
+                    label: 'Create',
+                },
+            ],
+            rowActions: [
+                {
+                    click: (webhook) => {
+                        this._config.deleteWebhook(webhook)
+                            .subscribe(() => {
+                            this._message.success('Deleted webhook');
+                            this.list.reload();
+                        });
+                    },
+                    label: 'Delete',
+                },
+            ],
+            fetch: () => {
+                return this._config.loadWebhooks()
+                    .pipe(map((webhooks) => ({ data: webhooks })));
+            },
+        };
+    }
+}
+WebhooksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WebhooksComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
+WebhooksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WebhooksComponent, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i10$1.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WebhooksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-app-message-webhooks',
+                    templateUrl: './webhooks.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_APP_MESSAGE_CONFIG]
+                }] }, { type: i1$1.FsMessage }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
             }] } });
 
-class FsAppMessageWebhooksModule {
-}
-FsAppMessageWebhooksModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessageWebhooksModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, declarations: [WebhooksComponent], imports: [FsListModule,
-        FsDateModule], exports: [WebhooksComponent] });
-FsAppMessageWebhooksModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, imports: [[
-            FsListModule,
-            FsDateModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        FsListModule,
-                        FsDateModule,
-                    ],
-                    declarations: [
-                        WebhooksComponent,
-                    ],
-                    exports: [
-                        WebhooksComponent,
-                    ],
-                }]
+class FsAppMessageWebhooksModule {
+}
+FsAppMessageWebhooksModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessageWebhooksModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, declarations: [WebhooksComponent], imports: [FsListModule,
+        FsDateModule], exports: [WebhooksComponent] });
+FsAppMessageWebhooksModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, imports: [[
+            FsListModule,
+            FsDateModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageWebhooksModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FsListModule,
+                        FsDateModule,
+                    ],
+                    declarations: [
+                        WebhooksComponent,
+                    ],
+                    exports: [
+                        WebhooksComponent,
+                    ],
+                }]
         }] });
 
-class FsAppMessageModule {
-    static forRoot() {
-        return {
-            ngModule: FsAppMessageModule,
-        };
-    }
-}
-FsAppMessageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsAppMessageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule });
-FsAppMessageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule, decorators: [{
-            type: NgModule,
-            args: [{}]
+class FsAppMessageModule {
+    static forRoot() {
+        return {
+            ngModule: FsAppMessageModule,
+        };
+    }
+}
+FsAppMessageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsAppMessageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule });
+FsAppMessageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsAppMessageModule, decorators: [{
+            type: 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.
  */
 
 export { FS_APP_MESSAGE_CONFIG, FsAppMessageModule, FsAppMessageQueuesModule, FsAppMessageTemplatesModule, FsAppMessageWebhooksModule, FsAppMessagesModule, FsMessageQueueService, MessageComponent, MessagesComponent, QueueComponent, QueuesComponent, TemplateComponent, TemplatesComponent, WebhooksComponent };