@firestitch/app-message 12.7.7 → 13.0.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/iframe'), require('@firestitch/label'), require('@firestitch/list'), require('@firestitch/prompt'), require('@firestitch/skeleton'), require('@angular/material/core'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/checkbox'), require('@firestitch/tabs'), require('@firestitch/text-editor'), require('@firestitch/html-editor'), require('rxjs/operators'), require('rxjs'), require('@firestitch/filter'), require('@firestitch/message'), require('@firestitch/common'), require('@angular/flex-layout/flex'), require('anchorme'), require('@firestitch/selection'), require('date-fns')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/app-message', ['exports', '@angular/core', '@angular/common', '@angular/flex-layout', '@angular/forms', '@angular/router', '@angular/material/button', '@angular/material/dialog', '@angular/material/icon', '@angular/material/tabs', '@angular/material/tooltip', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/iframe', '@firestitch/label', '@firestitch/list', '@firestitch/prompt', '@firestitch/skeleton', '@angular/material/core', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/checkbox', '@firestitch/tabs', '@firestitch/text-editor', '@firestitch/html-editor', 'rxjs/operators', 'rxjs', '@firestitch/filter', '@firestitch/message', '@firestitch/common', '@angular/flex-layout/flex', 'anchorme', '@firestitch/selection', 'date-fns'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["app-message"] = {}), global.ng.core, global.ng.common, global.ng.flexLayout, global.ng.forms, global.ng.router, global.ng.material.button, global.ng.material.dialog, global.ng.material.icon, global.ng.material.tabs, global.ng.material.tooltip, global.i10$1, global.i4, global.i16, global.i2, global.i6$1, global.i2$1, global.i1$2, global.i14, global.ng.material.core, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.checkbox, global.i18, global.i10, global.i11, global.rxjs.operators, global.rxjs, global.filter, global.i1$1, global.i3$1, global.ng.flexLayout.flex, global.anchorme, global.selection, global.dateFns));
-})(this, (function (exports, i0, i17, flexLayout, i15, router, i3, i1, i1$3, i5, i3$2, i10$1, i4, i16, i2, i6$1, i2$1, i1$2, i14, i9, i6, i20, i8, checkbox, i18, i10, i11, operators, rxjs, filter, i1$1, i3$1, i19, anchorme, selection, dateFns) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/iframe'), require('@firestitch/label'), require('@firestitch/list'), require('@firestitch/prompt'), require('@firestitch/skeleton'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@firestitch/common'), require('@firestitch/html-editor'), require('@firestitch/tabs'), require('@firestitch/text-editor'), require('rxjs/operators'), require('rxjs'), require('@firestitch/message'), require('@firestitch/filter'), require('anchorme'), require('@firestitch/selection'), require('date-fns')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/app-message', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/router', '@angular/material/button', '@angular/material/dialog', '@angular/material/icon', '@angular/material/tabs', '@angular/material/tooltip', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/iframe', '@firestitch/label', '@firestitch/list', '@firestitch/prompt', '@firestitch/skeleton', '@angular/material/checkbox', '@angular/material/core', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@firestitch/common', '@firestitch/html-editor', '@firestitch/tabs', '@firestitch/text-editor', 'rxjs/operators', 'rxjs', '@firestitch/message', '@firestitch/filter', 'anchorme', '@firestitch/selection', 'date-fns'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["app-message"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.router, global.ng.material.button, global.ng.material.dialog, global.ng.material.icon, global.ng.material.tabs, global.ng.material.tooltip, global.i10$1, global.i4, global.i16, global.i2, global.i6$1, global.i2$1, global.i1$2, global.i14, global.ng.material.checkbox, global.ng.material.core, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.i3$1, global.i11, global.i18, global.i10, global.rxjs.operators, global.rxjs, global.i1$1, global.filter, global.anchorme, global.selection, global.dateFns));
+})(this, (function (exports, i0, i17, i15, router, i3, i1, i1$3, i5, i3$2, i10$1, i4, i16, i2, i6$1, i2$1, i1$2, i14, checkbox, i9, i6, i19, i8, i3$1, i11, i18, i10, operators, rxjs, i1$1, filter, anchorme, selection, dateFns) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -42,14 +42,13 @@
     var i14__namespace = /*#__PURE__*/_interopNamespace(i14);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-    var i20__namespace = /*#__PURE__*/_interopNamespace(i20);
+    var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
     var i18__namespace = /*#__PURE__*/_interopNamespace(i18);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i19__namespace = /*#__PURE__*/_interopNamespace(i19);
     var anchorme__default = /*#__PURE__*/_interopDefaultLegacy(anchorme);
 
     var FsAppMessageModule = /** @class */ (function () {
@@ -95,6 +94,40 @@
                         }] }];
         } });
 
+    var FsAppMessagePreviewModule = /** @class */ (function () {
+        function FsAppMessagePreviewModule() {
+        }
+        return FsAppMessagePreviewModule;
+    }());
+    FsAppMessagePreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsAppMessagePreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [i1.MatDialogModule,
+            i3.MatButtonModule,
+            i4.FsDialogModule,
+            i2.FsIFrameModule], exports: [PreviewComponent] });
+    FsAppMessagePreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, imports: [[
+                i1.MatDialogModule,
+                i3.MatButtonModule,
+                i4.FsDialogModule,
+                i2.FsIFrameModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i1.MatDialogModule,
+                            i3.MatButtonModule,
+                            i4.FsDialogModule,
+                            i2.FsIFrameModule,
+                        ],
+                        declarations: [
+                            PreviewComponent,
+                        ],
+                        exports: [
+                            PreviewComponent,
+                        ]
+                    }]
+            }] });
+
     var FS_APP_MESSAGE_ROOT_CONFIG = new i0.InjectionToken('fs-app-message-root-config');
     var FS_APP_MESSAGE_CONFIG = new i0.InjectionToken('fs-app-message-config');
 
@@ -281,7 +314,7 @@
         return MessageComponent;
     }());
     MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace$2.FsPrompt }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MessageComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"message\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"message\">\n    <div mat-dialog-title>Edit Message</div>\n    <mat-dialog-content>\n      <mat-tab-group \n          fsTabs \n          [(selected)]=\"tab\">\n        <mat-tab label=\"General\" name=\"general\">\n          <ng-template matTabContent>\n            <div fxLayout=\"column\">\n              <div fxLayoutGap=\"20px\">\n                <mat-form-field fxFlex>\n                  <input\n                    matInput\n                    placeholder=\"Name\"\n                    [(ngModel)]=\"message.name\"\n                    name=\"Name\"\n                    required>\n                </mat-form-field>\n                <fs-label-field>\n                  <fs-label>Reference</fs-label>\n                  {{message.reference}}\n                </fs-label-field>\n              </div>\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                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.HTML\">\n                          <fs-text-editor                          \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"body\"\n                            [config]=\"{ language: 'html '}\">\n                          </fs-text-editor>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText\">\n                          <fs-html-editor                          \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"body\">\n                          </fs-html-editor>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.Text\">\n                          <fs-text-editor                            \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"emailMessageBody\"\n                            [config]=\"{ language: 'text' }\">\n                          </fs-text-editor>\n                        </ng-container>\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        <ng-container *ngIf=\"tab==='email'\">\n          <button            \n              mat-button\n              type=\"button\"\n              (click)=\"openPreview()\"\n              type=\"button\">\n            Preview\n          </button>\n          <button\n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('email')\"\n              type=\"button\">\n            Send Test Email\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"tab==='sms'\">\n          <button            \n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('sms')\"\n              type=\"button\">\n            Send Test SMS\n          </button>\n        </ng-container>\n        <button \n            mat-button \n            [mat-dialog-close]=\"null\" \n            type=\"button\">\n          Cancel\n        </button>\n      </ng-container> \n      <ng-template #done>\n        <button \n            mat-button \n            color=\"primary\"\n            [mat-dialog-close]=\"null\" \n            type=\"button\">\n          Close\n        </button>\n      </ng-template>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: ["fs-label-field .content{white-space:pre-wrap}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}:host ::ng-deep .sms-message{width:100%}:host ::ng-deep .email-body-text-default{white-space:pre-line}.email-body-text{width:100%}.variable{margin-bottom:4px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i8__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i11__namespace.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "hint"] }, { type: i11__namespace.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { type: i18__namespace.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i19__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i19__namespace.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i20__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MessageComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"message\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"message\">\n    <div mat-dialog-title>Edit Message</div>\n    <mat-dialog-content>\n      <mat-tab-group \n          fsTabs \n          [(selected)]=\"tab\">\n        <mat-tab label=\"General\" name=\"general\">\n          <ng-template matTabContent>\n            <div class=\"fs-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              <fs-label-field>\n                <fs-label>Reference</fs-label>\n                {{message.reference}}\n              </fs-label-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 class=\"fs-row.gap-small.wrap\">\n                <mat-form-field>\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>\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>\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 class=\"fs-row.gap-small.wrap\">\n                <mat-form-field>\n                  <input\n                    matInput\n                    placeholder=\"To\"\n                    [(ngModel)]=\"message.emailMessage.toRecipients\"\n                    name=\"to\">\n                </mat-form-field>\n                <mat-form-field>\n                  <input\n                    matInput\n                    placeholder=\"CC\"\n                    [(ngModel)]=\"message.emailMessage.ccRecipients\"\n                    name=\"cc\">\n                </mat-form-field>\n                <mat-form-field>\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 class=\"fs-column\">\n              <div class=\"fs-row.gap-small\">\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>\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                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.HTML\">\n                          <fs-text-editor                          \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"body\"\n                            [config]=\"{ language: 'html '}\">\n                          </fs-text-editor>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.RichText\">\n                          <fs-html-editor                          \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"body\">\n                          </fs-html-editor>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"message.emailMessage.format===emailMessageFormat.Text\">\n                          <fs-text-editor                            \n                            [(ngModel)]=\"message.emailMessage.body\"\n                            name=\"emailMessageBody\"\n                            [config]=\"{ language: 'text' }\">\n                          </fs-text-editor>\n                        </ng-container>\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        <ng-container *ngIf=\"tab==='email'\">\n          <button            \n              mat-button\n              type=\"button\"\n              (click)=\"openPreview()\"\n              type=\"button\">\n            Preview\n          </button>\n          <button\n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('email')\"\n              type=\"button\">\n            Send Test Email\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"tab==='sms'\">\n          <button            \n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('sms')\"\n              type=\"button\">\n            Send Test SMS\n          </button>\n        </ng-container>\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}.fs-column .mat-form-field{flex:1}.email-body-text{width:100%}.variable{margin-bottom:4px}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i8__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i11__namespace.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "hint"] }, { type: i11__namespace.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i18__namespace.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { type: i18__namespace.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i19__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MessageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -373,40 +406,6 @@
                     args: [i2$1.FsListComponent, { static: true }]
                 }] } });
 
-    var FsAppMessagePreviewModule = /** @class */ (function () {
-        function FsAppMessagePreviewModule() {
-        }
-        return FsAppMessagePreviewModule;
-    }());
-    FsAppMessagePreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsAppMessagePreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [i1.MatDialogModule,
-            i3.MatButtonModule,
-            i4.FsDialogModule,
-            i2.FsIFrameModule], exports: [PreviewComponent] });
-    FsAppMessagePreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, imports: [[
-                i1.MatDialogModule,
-                i3.MatButtonModule,
-                i4.FsDialogModule,
-                i2.FsIFrameModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessagePreviewModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i1.MatDialogModule,
-                            i3.MatButtonModule,
-                            i4.FsDialogModule,
-                            i2.FsIFrameModule,
-                        ],
-                        declarations: [
-                            PreviewComponent,
-                        ],
-                        exports: [
-                            PreviewComponent,
-                        ]
-                    }]
-            }] });
-
     var FsAppMessagesModule = /** @class */ (function () {
         function FsAppMessagesModule() {
         }
@@ -422,7 +421,7 @@
             i3.MatButtonModule,
             i5.MatTabsModule,
             i6.MatFormFieldModule,
-            i20.MatInputModule,
+            i19.MatInputModule,
             i9.MatOptionModule,
             i8.MatSelectModule,
             i3$2.MatTooltipModule,
@@ -430,7 +429,6 @@
             i4.FsDialogModule,
             i2$1.FsListModule,
             i6$1.FsLabelModule,
-            flexLayout.FlexLayoutModule,
             i14.FsSkeletonModule,
             i16.FsFormModule,
             i10.FsTextEditorModule,
@@ -448,7 +446,7 @@
                 i3.MatButtonModule,
                 i5.MatTabsModule,
                 i6.MatFormFieldModule,
-                i20.MatInputModule,
+                i19.MatInputModule,
                 i9.MatOptionModule,
                 i8.MatSelectModule,
                 i3$2.MatTooltipModule,
@@ -456,7 +454,6 @@
                 i4.FsDialogModule,
                 i2$1.FsListModule,
                 i6$1.FsLabelModule,
-                flexLayout.FlexLayoutModule,
                 i14.FsSkeletonModule,
                 i16.FsFormModule,
                 i10.FsTextEditorModule,
@@ -477,7 +474,7 @@
                             i3.MatButtonModule,
                             i5.MatTabsModule,
                             i6.MatFormFieldModule,
-                            i20.MatInputModule,
+                            i19.MatInputModule,
                             i9.MatOptionModule,
                             i8.MatSelectModule,
                             i3$2.MatTooltipModule,
@@ -485,7 +482,6 @@
                             i4.FsDialogModule,
                             i2$1.FsListModule,
                             i6$1.FsLabelModule,
-                            flexLayout.FlexLayoutModule,
                             i14.FsSkeletonModule,
                             i16.FsFormModule,
                             i10.FsTextEditorModule,
@@ -753,7 +749,7 @@
         return QueueComponent;
     }());
     QueueComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace$2.FsPrompt }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    QueueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QueueComponent, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0__namespace, template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <div mat-dialog-title>Message Queue</div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div fxLayout=\"row wrap\" fxLayoutGap=\"25px\">\n            <ng-container *ngIf=\"messageQueue.emailMessageQueue\">\n              <fs-label-field>\n                <fs-label>\n                  To Recipients\n                </fs-label>\n                <app-recipient \n                  *ngFor=\"let recipient of messageQueue.emailMessageQueue.toRecipients\"\n                  [state]=\"messageQueueRecipients[recipient]\"\n                  [name]=\"recipient\">\n                </app-recipient>\n              </fs-label-field>\n\n              <fs-label-field *ngIf=\"messageQueue.emailMessageQueue.ccRecipients.length\">\n                <fs-label>\n                  CC\n                </fs-label>\n                <app-recipient \n                  *ngFor=\"let recipient of messageQueue.emailMessageQueue.ccRecipients\"\n                  [state]=\"messageQueueRecipients[recipient]\"\n                  [name]=\"recipient\">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf=\"messageQueue.emailMessageQueue.bccRecipients.length\">\n                <fs-label>\n                  BCC\n                </fs-label>\n                <app-recipient \n                  *ngFor=\"let recipient of messageQueue.emailMessageQueue.bccRecipients\"\n                  [state]=\"messageQueueRecipients[recipient]\"\n                  [name]=\"recipient\">\n                </app-recipient>                \n              </fs-label-field>\n\n              <fs-label-field *ngIf=\"messageQueue.emailMessageQueue.fromName || messageQueue.emailMessageQueue.fromEmail\">\n                <fs-label>\n                  From\n                </fs-label>\n                <ng-container *ngIf=\"messageQueue.emailMessageQueue.fromName === messageQueue.emailMessageQueue.fromEmail; else fromEmailName\">\n                  {{messageQueue.emailMessageQueue.fromName}}\n                </ng-container>\n\n                <ng-template #fromEmailName>\n                  {{messageQueue.emailMessageQueue.fromName}}\n                  <ng-container *ngIf=\"messageQueue.emailMessageQueue.fromEmail\">\n                    ({{messageQueue.emailMessageQueue.fromEmail}})\n                  </ng-container>\n                </ng-template>\n              </fs-label-field>\n\n              <fs-label-field *ngIf=\"messageQueue.emailMessageQueue.replyEmail && messageQueue.emailMessageQueue.replyEmail.length\">\n                <fs-label>\n                  Reply To\n                </fs-label>\n                {{messageQueue.emailMessageQueue.replyEmail.join(', ')}}\n              </fs-label-field>\n            </ng-container>\n\n            <ng-container *ngIf=\"messageQueue.smsMessageQueue\">\n              <fs-label-field>\n                <fs-label>\n                  To Number\n                </fs-label>\n                <app-recipient \n                  [state]=\"messageQueue.state\"\n                  [name]=\"messageQueue.smsMessageQueue.toNumber\">\n                </app-recipient>                 \n              </fs-label-field>\n\n              <fs-label-field *ngIf=\"messageQueue.smsMessageQueue.fromNumber\">\n                <fs-label>\n                  From Number\n                </fs-label>\n                {{messageQueue.smsMessageQueue.fromNumber}}\n              </fs-label-field>\n            </ng-container>\n  \n            <fs-label-field>\n              <fs-label>\n                Date\n              </fs-label>\n              {{messageQueue.scheduledDate | fsDateFormat: 'full-date-time'}}\n            </fs-label-field>\n\n            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{messageQueueStates[messageQueue.state]}}\n            </fs-label-field>\n\n            <fs-label-field *ngIf=\"messageQueue.message\">\n              <fs-label>\n                Message Type\n              </fs-label>\n              <a\n                (click)=\"openMessage(messageQueue.message)\"\n                *ngIf=\"loadMessage; else elseMessage\">\n                {{messageQueue.message.name}}\n              </a>\n              <ng-template #elseMessage>\n                {{messageQueue.message.name}}\n              </ng-template>\n            </fs-label-field>\n          </div>\n\n          <ng-container *ngIf=\"messageQueue.emailMessageQueue\">\n            <fs-label-field class=\"subject\">\n              <fs-label>\n                Subject\n              </fs-label>\n              {{messageQueue.emailMessageQueue.subject}}\n            </fs-label-field>\n\n            <fs-label-field class=\"body\">\n              <fs-label>\n                Body\n              </fs-label>\n              <div\n                  *ngIf=\"messageQueue.emailMessageQueue.format===emailMessageQueueFormat.Text\"\n                  class=\"format-text\"\n                  [innerHTML]=\"messageQueue.emailMessageQueue.body\">\n              </div>\n              <fs-iframe\n                *ngIf=\"messageQueue.emailMessageQueue.format===emailMessageQueueFormat.HTML || messageQueue.emailMessageQueue.format===emailMessageQueueFormat.RichText\"\n                [html]=\"messageQueue.emailMessageQueue.body\"\n                [width]=\"'100%'\">\n              </fs-iframe>\n            </fs-label-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"messageQueue.smsMessageQueue\">\n            <fs-label-field>\n              <fs-label>\n                Message\n              </fs-label>\n              <div\n                class=\"format-text\"\n                [innerHTML]=\"messageQueue.smsMessageQueue.body\">\n              </div>\n            </fs-label-field>\n          </ng-container>\n\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"logConfig\" #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.message}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <fs-date-ago [date]=\"row.createdDate\"></fs-date-ago>\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Attachments\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"attachmentConfig\">\n            <fs-list-column title=\"File Name\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.filename}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.prettyFilesize}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Events\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"eventConfig\">\n            <fs-list-column title=\"Recipient\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.messageQueueRecipient.recipient}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{MessageQueueEventTypes[row.type]}}\n                <div class=\"small\" *ngIf=\"row.type === MessageQueueEventType.Click\">\n                  <a [href]=\"row.meta?.url\" target=\"_blank\">{{row.meta?.url}}</a>\n                </div>\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.createDate | fsDateFormat: 'date-time-yearless'}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"null\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        *ngIf=\"resendMessageQueue\"\n        type=\"button\"\n        (click)=\"resend()\"\n        type=\"button\">\n      Resend\n    </button>\n    <button\n        mat-button\n        *ngIf=\"forwardMessageQueue\"\n        type=\"button\"\n        (click)=\"forward()\"\n        type=\"button\">\n      Forward\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".subject,.body{display:block;margin-top:15px}.body .format-text{white-space:pre-wrap}.body .body-frame{border:0}.body ::ng-deep .field-label{margin-bottom:10px}app-recipient{display:block}[hidden]{display:none!important}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"] }, { type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10__namespace$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i19__namespace.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    QueueComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QueueComponent, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0__namespace, template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <div mat-dialog-title>Message Queue</div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div class=\"fs-row.gap-large.wrap\">\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                [width]=\"'100%'\">\n              </fs-iframe>\n            </fs-label-field>\n          </ng-container>\n\n          <ng-container *ngIf=\"messageQueue.smsMessageQueue\">\n            <fs-label-field>\n              <fs-label>\n                Message\n              </fs-label>\n              <div\n                class=\"format-text\"\n                [innerHTML]=\"messageQueue.smsMessageQueue.body\">\n              </div>\n            </fs-label-field>\n          </ng-container>\n\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"logConfig\" #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.message}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <fs-date-ago [date]=\"row.createdDate\"></fs-date-ago>\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Attachments\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"attachmentConfig\">\n            <fs-list-column title=\"File Name\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.filename}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.prettyFilesize}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Events\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"eventConfig\">\n            <fs-list-column title=\"Recipient\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.messageQueueRecipient.recipient}}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{MessageQueueEventTypes[row.type]}}\n                <div class=\"small\" *ngIf=\"row.type === MessageQueueEventType.Click\">\n                  <a [href]=\"row.meta?.url\" target=\"_blank\">{{row.meta?.url}}</a>\n                </div>\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                {{row.createDate | fsDateFormat: 'date-time-yearless'}}\n              </ng-template>\n            </fs-list-column>\n          </fs-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"null\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        *ngIf=\"resendMessageQueue\"\n        type=\"button\"\n        (click)=\"resend()\"\n        type=\"button\">\n      Resend\n    </button>\n    <button\n        mat-button\n        *ngIf=\"forwardMessageQueue\"\n        type=\"button\"\n        (click)=\"forward()\"\n        type=\"button\">\n      Forward\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".subject,.body{display:block;margin-top:15px}.body .format-text{white-space:pre-wrap}.body .body-frame{border:0}.body ::ng-deep .field-label{margin-bottom:10px}app-recipient{display:block}[hidden]{display:none!important}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { type: i2__namespace.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"] }, { type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i10__namespace$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QueueComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1396,7 +1392,7 @@
         return QueuesComponent;
     }());
     QueuesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: FsMessageQueueService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    QueuesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QueuesComponent, selector: "fs-app-message-queues", inputs: { query: "query" }, viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"config\" #list>\n  <fs-list-column title=\"Message\" name=\"subject\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n          <a (click)=\"open(row)\">{{row.emailMessageQueue.subject|truncate:100}}</a>\n          <mat-icon *ngIf=\"row.messageQueueAttachmentCount\" [matTooltip]=\"row.messageQueueAttachmentCount + ' Attachment(s)'\">attach_file</mat-icon>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"row.smsMessageQueue\">\n        <a (click)=\"open(row)\">{{row.smsMessageQueue.body|truncate:100}}</a>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Recipients\" class=\"col-recipients\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <ng-container *ngIf=\"row.emailMessageQueue.toRecipients.length; else unspecified\">\n          <div class=\"small\" *ngFor=\"let recipient of row.emailMessageQueue.toRecipients\">\n            <app-recipient \n              [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n              [name]=\"recipient\">\n            </app-recipient>\n          </div>\n        </ng-container>\n        <div class=\"small\" *ngFor=\"let recipient of row.emailMessageQueue.ccRecipients\">\n          <app-recipient \n            [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n            [name]=\"recipient\">\n          </app-recipient>\n        </div>\n        <div class=\"small\" *ngFor=\"let recipient of row.emailMessageQueue.bccRecipients\">\n          <app-recipient             \n            [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n            [name]=\"recipient\">\n          </app-recipient>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"row.smsMessageQueue\">\n        <ng-container *ngIf=\"row.smsMessageQueue.toNumber; else unspecified\">\n          <app-recipient \n            class=\"small\"\n            [state]=\"row.state\"\n            [name]=\"row.smsMessageQueue.toNumber\">\n          </app-recipient>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title=\"Status\" class=\"col-state\">\n    <ng-template fs-list-cell let-row=\"row\">    \n      <ng-container *ngIf=\"row.scheduled; else state\">\n        Scheduled\n        <div class=\"small\">\n           {{row.scheduledDate | fsDateFormat: 'date-time' }}\n        </div>\n      </ng-container>\n      <ng-template #state>\n        <span [class]=\"'state-' + row.state\">{{messageQueueStates[row.state]}}</span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title=\"Date\" name=\"created_date\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n\n<ng-template #unspecified>\n  <app-recipient \n    class=\"small\"\n    [state]=\"MessageQueueState.Failed\"\n    name=\"Unspecified\">\n  </app-recipient>\n</ng-template>", styles: [":host ::ng-deep .col-recipients small+small:before{content:\", \"}:host ::ng-deep .col-state .state-F,:host ::ng-deep .col-state .state-P{color:#d8524e}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i19__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i19__namespace.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3__namespace$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    QueuesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: QueuesComponent, selector: "fs-app-message-queues", inputs: { query: "query" }, viewQueries: [{ propertyName: "list", first: true, predicate: i2$1.FsListComponent, descendants: true, static: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"config\" #list>\n  <fs-list-column title=\"Message\" name=\"subject\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <div class=\"fs-row.gap-tiny\">\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      <ng-container *ngIf=\"row.scheduled; else state\">\n        Scheduled\n        <div class=\"small\">\n           {{row.scheduledDate | fsDateFormat: 'date-time' }}\n        </div>\n      </ng-container>\n      <ng-template #state>\n        <span [class]=\"'state-' + row.state\">{{messageQueueStates[row.state]}}</span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column> \n  <fs-list-column title=\"Date\" name=\"created_date\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n\n<ng-template #unspecified>\n  <app-recipient \n    class=\"small\"\n    [state]=\"MessageQueueState.Failed\"\n    name=\"Unspecified\">\n  </app-recipient>\n</ng-template>", styles: [":host ::ng-deep .col-recipients small+small:before{content:\", \"}:host ::ng-deep .col-state .state-F,:host ::ng-deep .col-state .state-P{color:#d8524e}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i1__namespace$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i17__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "truncate": TruncatePipe, "fsDateFormat": i10__namespace$1.FsDateFormatPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: QueuesComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1452,7 +1448,6 @@
             RecipientComponent], imports: [router.RouterModule,
             i15.FormsModule,
             i17.CommonModule,
-            flexLayout.FlexLayoutModule,
             i3$2.MatTooltipModule,
             i1.MatDialogModule,
             i3.MatButtonModule,
@@ -1469,12 +1464,11 @@
             i2.FsIFrameModule], exports: [QueuesComponent,
             QueueComponent] });
     FsAppMessageQueuesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: FsAppMessageQueuesModule, providers: [
-            FsMessageQueueService
+            FsMessageQueueService,
         ], imports: [[
                 router.RouterModule,
                 i15.FormsModule,
                 i17.CommonModule,
-                flexLayout.FlexLayoutModule,
                 i3$2.MatTooltipModule,
                 i1.MatDialogModule,
                 i3.MatButtonModule,
@@ -1497,7 +1491,6 @@
                             router.RouterModule,
                             i15.FormsModule,
                             i17.CommonModule,
-                            flexLayout.FlexLayoutModule,
                             i3$2.MatTooltipModule,
                             i1.MatDialogModule,
                             i3.MatButtonModule,
@@ -1525,8 +1518,8 @@
                             QueueComponent,
                         ],
                         providers: [
-                            FsMessageQueueService
-                        ]
+                            FsMessageQueueService,
+                        ],
                     }]
             }] });
 
@@ -1582,7 +1575,7 @@
         return TemplateComponent;
     }());
     TemplateComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1__namespace.MatDialogRef }, { token: i1__namespace$1.FsMessage }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"messageTemplate\">\n    <div mat-dialog-title>Message Template</div>\n    <mat-dialog-content>\n      <mat-form-field class=\"name\">\n        <input\n          matInput\n          placeholder=\"Name\"\n          [(ngModel)]=\"messageTemplate.name\"\n          name=\"name\"\n          >\n      </mat-form-field>\n      <div [@.disabled]=\"true\">\n        <mat-tab-group\n            mat-align-tabs=\"start\"\n            [dynamicHeight]=\"false\">\n          <mat-tab label=\"Content\">\n            <ng-template matTabContent>\n              <div class=\"content\">\n                <fs-label-field>\n                  <fs-text-editor\n                    [(ngModel)]=\"messageTemplate.content\"\n                    name=\"body\"\n                    [config]=\"htmlEditorconfig\">\n                  </fs-text-editor>\n                  <fs-label-message>\n                    &#123;$content&#125; will be replaced with the message content.\n                  </fs-label-message>\n                </fs-label-field>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab label=\"Styles\">\n            <ng-template matTabContent>\n              <div class=\"styles\">\n                <fs-text-editor\n                  [(ngModel)]=\"messageTemplate.styles\"\n                  name=\"styles\"\n                  [config]=\"cssEditorconfig\">\n                </fs-text-editor>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\" name=\"close\">Save</button>\n      <button mat-button type=\"submit\" name=\"save-close\">Save & Close</button>\n      <button mat-button (click)=\"openPreview()\" type=\"button\">Preview</button>\n      <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [".name{width:100%}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i10__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6__namespace$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i20__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    TemplateComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TemplateComponent, selector: "ng-component", ngImport: i0__namespace, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"messageTemplate\">\n    <div mat-dialog-title>Message Template</div>\n    <mat-dialog-content>\n      <mat-form-field class=\"name\">\n        <input\n          matInput\n          placeholder=\"Name\"\n          [(ngModel)]=\"messageTemplate.name\"\n          name=\"name\"\n          >\n      </mat-form-field>\n      <div [@.disabled]=\"true\">\n        <mat-tab-group\n            mat-align-tabs=\"start\"\n            [dynamicHeight]=\"false\">\n          <mat-tab label=\"Content\">\n            <ng-template matTabContent>\n              <div class=\"content\">\n                <fs-label-field>\n                  <fs-text-editor\n                    [(ngModel)]=\"messageTemplate.content\"\n                    name=\"body\"\n                    [config]=\"htmlEditorconfig\">\n                  </fs-text-editor>\n                  <fs-label-message>\n                    &#123;$content&#125; will be replaced with the message content.\n                  </fs-label-message>\n                </fs-label-field>\n              </div>\n            </ng-template>\n          </mat-tab>\n          <mat-tab label=\"Styles\">\n            <ng-template matTabContent>\n              <div class=\"styles\">\n                <fs-text-editor\n                  [(ngModel)]=\"messageTemplate.styles\"\n                  name=\"styles\"\n                  [config]=\"cssEditorconfig\">\n                </fs-text-editor>\n              </div>\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </div>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button mat-button type=\"submit\" color=\"primary\" name=\"close\">Save</button>\n      <button mat-button type=\"submit\" name=\"save-close\">Save & Close</button>\n      <button mat-button (click)=\"openPreview()\" type=\"button\">Preview</button>\n      <button mat-button [mat-dialog-close]=\"null\" type=\"button\">Cancel</button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [".name{width:100%}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"], components: [{ type: i4__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i6__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i5__namespace.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i6__namespace$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i10__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i6__namespace$1.FsLabelMessageComponent, selector: "fs-label-message" }, { type: i3__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i14__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i15__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i15__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i15__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i16__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i17__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i19__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i15__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i15__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i5__namespace.MatTabContent, selector: "[matTabContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i16__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TemplateComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1694,11 +1687,10 @@
             i5.MatTabsModule,
             i6.MatFormFieldModule,
             i6.MatFormFieldModule,
-            i20.MatInputModule,
+            i19.MatInputModule,
             i2$1.FsListModule,
             i4.FsDialogModule,
             i6$1.FsLabelModule,
-            flexLayout.FlexLayoutModule,
             i14.FsSkeletonModule,
             i16.FsFormModule,
             i10.FsTextEditorModule,
@@ -1714,11 +1706,10 @@
                 i5.MatTabsModule,
                 i6.MatFormFieldModule,
                 i6.MatFormFieldModule,
-                i20.MatInputModule,
+                i19.MatInputModule,
                 i2$1.FsListModule,
                 i4.FsDialogModule,
                 i6$1.FsLabelModule,
-                flexLayout.FlexLayoutModule,
                 i14.FsSkeletonModule,
                 i16.FsFormModule,
                 i10.FsTextEditorModule,
@@ -1737,11 +1728,10 @@
                             i5.MatTabsModule,
                             i6.MatFormFieldModule,
                             i6.MatFormFieldModule,
-                            i20.MatInputModule,
+                            i19.MatInputModule,
                             i2$1.FsListModule,
                             i4.FsDialogModule,
                             i6$1.FsLabelModule,
-                            flexLayout.FlexLayoutModule,
                             i14.FsSkeletonModule,
                             i16.FsFormModule,
                             i10.FsTextEditorModule,