@firestitch/app-message 18.0.14 → 18.0.16

package/fesm2022/firestitch-app-message.mjs

@@ -1,61 +1,50 @@
 import * as i0 from '@angular/core';
-import { NgModule, Component, Inject, InjectionToken, ChangeDetectionStrategy, ViewChild, Input, Injectable, Pipe } from '@angular/core';
-import * as i4$1 from '@angular/common';
+import { NgModule, inject, Component, InjectionToken, ChangeDetectionStrategy, ViewChild, Input, ChangeDetectorRef, Injectable, Pipe } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import * as i5$1 from '@angular/forms';
+import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import * as i5 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i3$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i2$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i10$1 from '@firestitch/date';
+import { MatButton, MatAnchor, MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { MatTabGroup, MatTab, MatTabContent, MatTabsModule } from '@angular/material/tabs';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import * as i6$1 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
-import * as i3 from '@firestitch/dialog';
+import * as i2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i12 from '@firestitch/form';
+import * as i3 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i4 from '@firestitch/iframe';
+import * as i2$1 from '@firestitch/iframe';
 import { FsIFrameModule } from '@firestitch/iframe';
-import * as i13 from '@firestitch/label';
+import * as i6 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i2 from '@firestitch/list';
+import * as i1 from '@firestitch/list';
 import { FsListComponent, FsListModule, PaginationStrategy } from '@firestitch/list';
-import * as i1$1 from '@firestitch/message';
-import { FsMessageModule } from '@firestitch/message';
-import * as i1$2 from '@firestitch/prompt';
-import { FsPromptInputModule } from '@firestitch/prompt';
-import * as i11$1 from '@firestitch/skeleton';
+import * as i1$2 from '@firestitch/message';
+import { FsMessage, FsMessageModule } from '@firestitch/message';
+import * as i1$1 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i10 from '@angular/material/core';
-import { MatOptionModule } from '@angular/material/core';
-import * as i8 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i11 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i3$1 from '@firestitch/common';
-import { FsCommonModule } from '@firestitch/common';
-import * as i17 from '@firestitch/html-editor';
-import { FsHtmlEditorModule, FsHtmlRendererModule } from '@firestitch/html-editor';
-import * as i18 from '@firestitch/tabs';
+import { FsPrompt } from '@firestitch/prompt';
+import { Subject, of } from 'rxjs';
+import { tap, switchMap, map, takeUntil, filter } from 'rxjs/operators';
+import anchorme from 'anchorme';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import * as i5 from '@firestitch/tabs';
 import { FsTabsModule } from '@firestitch/tabs';
-import * as i16 from '@firestitch/text-editor';
+import { MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
+import * as i7 from '@firestitch/text-editor';
 import { FsTextEditorModule } from '@firestitch/text-editor';
-import { tap, switchMap, map, takeUntil, filter } from 'rxjs/operators';
-import { Subject, of } from 'rxjs';
+import * as i8 from '@firestitch/html-editor';
+import { FsHtmlEditorModule, FsHtmlRendererModule } from '@firestitch/html-editor';
 import { ActionMode, ItemType } from '@firestitch/filter';
-import anchorme from 'anchorme';
+import * as i2$2 from '@firestitch/common';
+import { FsCommonModule } from '@firestitch/common';
 import { SelectionActionType } from '@firestitch/selection';
-import * as i2$2 from '@firestitch/store';
+import { FsStore } from '@firestitch/store';
 import { isAfter } from 'date-fns';
 
 class FsAppMessageModule {
@@ -73,56 +62,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{}]
         }] });
 
+function indexNameValue(arry) {
+    const obj = {};
+    arry.forEach(item => {
+        obj[item.value] = item.name;
+    });
+    return obj;
+}
+
 class PreviewComponent {
-    _data;
+    _data = inject(MAT_DIALOG_DATA);
     html;
     styles;
-    constructor(_data) {
-        this._data = _data;
+    constructor() {
+        const _data = this._data;
         this.html = _data.html;
         this.styles = _data.styles;
     }
     ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PreviewComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PreviewComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]=\"html\"\n      [width]=\"'100%'\"\n      [styles]=\"styles\">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"null\" color=\"primary\" type=\"button\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i4.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"], outputs: ["loaded"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PreviewComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]=\"html\"\n      [width]=\"'100%'\"\n      [styles]=\"styles\">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"null\" color=\"primary\" type=\"button\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsIFrameModule }, { kind: "component", type: i2$1.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"], outputs: ["loaded"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
-            args: [{ template: "<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]=\"html\"\n      [width]=\"'100%'\"\n      [styles]=\"styles\">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"null\" color=\"primary\" type=\"button\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
-
-class FsAppMessagePreviewModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagePreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagePreviewModule, declarations: [PreviewComponent], imports: [MatDialogModule,
-            MatButtonModule,
-            FsDialogModule,
-            FsIFrameModule], exports: [PreviewComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagePreviewModule, imports: [MatDialogModule,
-            MatButtonModule,
-            FsDialogModule,
-            FsIFrameModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagePreviewModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        MatDialogModule,
-                        MatButtonModule,
-                        FsDialogModule,
-                        FsIFrameModule,
-                    ],
-                    declarations: [
-                        PreviewComponent,
-                    ],
-                    exports: [
-                        PreviewComponent,
-                    ]
-                }]
-        }] });
+            args: [{ standalone: true, imports: [FsDialogModule, MatDialogTitle, CdkScrollable, MatDialogContent, FsIFrameModule, MatDialogActions, MatButton, MatDialogClose], template: "<fs-dialog>\n  <div mat-dialog-title>Preview</div>\n  <mat-dialog-content>\n    <fs-iframe\n      [html]=\"html\"\n      [width]=\"'100%'\"\n      [styles]=\"styles\">\n    </fs-iframe>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"null\" color=\"primary\" type=\"button\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n" }]
+        }], ctorParameters: () => [] });
 
 const FS_APP_MESSAGE_ROOT_CONFIG = new InjectionToken('fs-app-message-root-config');
 const FS_APP_MESSAGE_CONFIG = new InjectionToken('fs-app-message-config');
@@ -141,16 +106,12 @@ const EmailMessageFormats = [
 ];
 
 class AttachmentsComponent {
-    _config;
-    _message;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _message = inject(FsMessage);
     list = null;
     message;
     config = null;
     _destroy$ = new Subject();
-    constructor(_config, _message) {
-        this._config = _config;
-        this._message = _message;
-    }
     ngOnInit() {
         this.config = {
             rowActions: [],
@@ -198,16 +159,13 @@ class AttachmentsComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AttachmentsComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: { message: "message" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"File Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.filename}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"File Size\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.size | fsFormatBytes}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i3$1.FsFormatBytesPipe, name: "fsFormatBytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AttachmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: AttachmentsComponent, isStandalone: true, selector: "fs-app-message-attachments", inputs: { message: "message" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"File Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.filename}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"File Size\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.size | fsFormatBytes}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "pipe", type: i2$2.FsFormatBytesPipe, name: "fsFormatBytes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AttachmentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-app-message-attachments', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"File Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.filename}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"File Size\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.size | fsFormatBytes}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1$1.FsMessage }], propDecorators: { list: [{
+            args: [{ selector: 'fs-app-message-attachments', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsListModule, FsCommonModule], template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"File Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.filename}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"File Size\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.size | fsFormatBytes}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }], message: [{
@@ -215,25 +173,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class MessageComponent {
-    _config;
-    _data;
-    _prompt;
-    _message;
-    _dialog;
-    _cdRef;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _data = inject(MAT_DIALOG_DATA);
+    _prompt = inject(FsPrompt);
+    _message = inject(FsMessage);
+    _dialog = inject(MatDialog);
+    _cdRef = inject(ChangeDetectorRef);
     message;
     tab = 'general';
     messageTemplates = [];
     emailMessageFormats = EmailMessageFormats;
     emailMessageFormat = EmailMessageFormat;
-    constructor(_config, _data, _prompt, _message, _dialog, _cdRef) {
-        this._config = _config;
-        this._data = _data;
-        this._prompt = _prompt;
-        this._message = _message;
-        this._dialog = _dialog;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         this._config.loadMessage(this._data.message)
             .subscribe((message) => {
@@ -306,39 +256,46 @@ class MessageComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessageComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1$2.FsPrompt }, { token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: MessageComponent, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"message\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"message\">\n    <div mat-dialog-title>\n      Edit Message\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group\n          fsTabs\n          [(selected)]=\"tab\">\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <ng-template matTabContent>\n            <div class=\"fs-column\">\n              <mat-form-field>\n                <mat-label>\n                  Name\n                </mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"message.name\"\n                  name=\"Name\"\n                  required>\n              </mat-form-field>\n              <fs-label-field>\n                <fs-label>\n                  Reference\n                </fs-label>\n                {{ message.reference }}\n              </fs-label-field>\n              <mat-form-field>\n                <mat-label>\n                  Description\n                </mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"message.description\"\n                  name=\"description\">\n              </mat-form-field>\n              <div class=\"fs-row.gap-sm.wrap\">\n                <mat-form-field>\n                  <mat-label>\n                    From Email\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.fromEmail\"\n                    name=\"from_email\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    From Name\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.fromName\"\n                    name=\"from_name\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Reply To\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.replyEmail\"\n                    name=\"reply_to\">\n                </mat-form-field>\n              </div>\n              <div class=\"fs-row.gap-sm.wrap\">\n                <mat-form-field>\n                  <mat-label>\n                    To\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.toRecipients\"\n                    name=\"to\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    CC\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.ccRecipients\"\n                    name=\"cc\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    BCC\n                  </mat-label>\n                  <input\n                    matInput\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\n            label=\"Email Message\"\n            *ngIf=\"message.emailMessage\"\n            name=\"email\">\n          <ng-template matTabContent>\n            <div class=\"fs-column\">\n              <div class=\"fs-row.gap-sm\">\n                <mat-form-field>\n                  <mat-label>\n                    Customize Message\n                  </mat-label>\n                  <mat-select\n                      required\n                      [(ngModel)]=\"message.emailMessage.customize\"\n                      name=\"customizeEmail\">\n                    <mat-option [value]=\"true\">\n                      Yes\n                    </mat-option>\n                    <mat-option [value]=\"false\">\n                      No\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Format\n                  </mat-label>\n                  <mat-select\n                      required\n                      [(ngModel)]=\"message.emailMessage.format\"\n                      name=\"format\">\n                    <mat-option\n                        *ngFor=\"let item of emailMessageFormats\"\n                        [value]=\"item.value\">\n                      {{ item.name }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Template\n                  </mat-label>\n                  <mat-select\n                      [(ngModel)]=\"message.emailMessage.messageTemplateId\"\n                      name=\"template\">\n                    <mat-option [value]=\"null\">\n                      None\n                    </mat-option>\n                    <mat-option\n                        *ngFor=\"let item of messageTemplates\"\n                        [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                  <mat-label>\n                    Subject\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.subject\"\n                    name=\"name\"\n                    required>\n                </mat-form-field>\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                        <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                        <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              <ng-container *ngIf=\"!message.emailMessage.customize\">\n                <fs-label-field>\n                  <fs-label>\n                    Subject\n                  </fs-label>\n                  {{ message.defaultEmailSubject }}\n                </fs-label-field>\n                <div>\n                  <fs-label-field>\n                    <fs-label>\n                      Content\n                    </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        <ng-container *ngIf=\"!!message.smsMessage\">\n          <mat-tab\n              label=\"SMS Message\"\n              name=\"sms\">\n            <ng-template matTabContent>\n              <mat-form-field>\n                <mat-label>\n                  Customize Message\n                </mat-label>\n                <mat-select\n                    required\n                    [(ngModel)]=\"message.smsMessage.customize\"\n                    name=\"customizeSms\">\n                  <mat-option [value]=\"true\">\n                    Yes\n                  </mat-option>\n                  <mat-option [value]=\"false\">\n                    No\n                  </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>\n                  Message\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultSmsMessage }}\n                </div>\n              </fs-label-field>\n            </ng-template>\n          </mat-tab>\n        </ng-container>\n        <mat-tab\n            label=\"Attachments\"\n            *ngIf=\"message.emailMessage\"\n            name=\"attachments\">\n          <ng-template matTabContent>\n            <fs-app-message-attachments [message]=\"message\"></fs-app-message-attachments>\n          </ng-template>\n        </mat-tab>\n        <mat-tab\n            label=\"Variables\"\n            *ngIf=\"message.variables\">\n          <ng-template matTabContent>\n            <div\n                *ngFor=\"let variable of message.variables\"\n                class=\"variable\">\n              {{ variable.name }}\n            </div>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Defaults\">\n          <ng-template matTabContent>\n            <ng-container *ngIf=\"message.emailMessage\">\n              <h2 *ngIf=\"message.emailMessage && message.smsMessage\">\n                Email\n              </h2>\n              <fs-label-field>\n                <fs-label>\n                  Subject\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultEmailSubject }}\n                </div>\n              </fs-label-field>\n              <fs-label-field>\n                <fs-label>\n                  Content\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultEmailBody }}\n                </div>\n              </fs-label-field>\n            </ng-container>\n            <ng-container *ngIf=\"message.smsMessage\">\n              <h2 *ngIf=\"message.emailMessage && message.smsMessage\">\n                SMS\n              </h2>\n              <fs-label-field>\n                <fs-label>\n                  Content\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultSmsMessage }}\n                </div>\n              </fs-label-field>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\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>", 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"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i13.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i13.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "directive", type: i11$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "directive", type: i12.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"], exportAs: ["fsForm"] }, { kind: "directive", type: i12.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i12.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i12.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "component", type: i17.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "component", type: i17.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { kind: "directive", type: i18.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i18.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MessageComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n  fsForm\n  [submit]=\"save\"\n  #form=\"ngForm\"\n  *fsSkeleton=\"message\"\n  [confirmTabs]=\"false\">\n  @if (message) {\n    <fs-dialog>\n      <div mat-dialog-title>\n        Edit Message\n      </div>\n      <mat-dialog-content>\n        <mat-tab-group\n          fsTabs\n          [(selected)]=\"tab\">\n          <mat-tab\n            label=\"General\"\n            name=\"general\">\n            <ng-template matTabContent>\n              <div class=\"fs-column\">\n                <mat-form-field>\n                  <mat-label>\n                    Name\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.name\"\n                    name=\"Name\"\n                    required>\n                </mat-form-field>\n                <fs-label-field>\n                  <fs-label>\n                    Reference\n                  </fs-label>\n                  {{ message.reference }}\n                </fs-label-field>\n                <mat-form-field>\n                  <mat-label>\n                    Description\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.description\"\n                    name=\"description\">\n                </mat-form-field>\n                <div class=\"fs-row.gap-sm.wrap\">\n                  <mat-form-field>\n                    <mat-label>\n                      From Email\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.fromEmail\"\n                      name=\"from_email\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      From Name\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.fromName\"\n                      name=\"from_name\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      Reply To\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.replyEmail\"\n                      name=\"reply_to\">\n                  </mat-form-field>\n                </div>\n                <div class=\"fs-row.gap-sm.wrap\">\n                  <mat-form-field>\n                    <mat-label>\n                      To\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.toRecipients\"\n                      name=\"to\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      CC\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.ccRecipients\"\n                      name=\"cc\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      BCC\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.bccRecipients\"\n                      name=\"bcc\">\n                  </mat-form-field>\n                </div>\n              </div>\n            </ng-template>\n          </mat-tab>\n          @if (message.emailMessage) {\n            <mat-tab\n              label=\"Email Message\"\n              name=\"email\">\n              <ng-template matTabContent>\n                <div class=\"fs-column\">\n                  <div class=\"fs-row.gap-sm\">\n                    <mat-form-field>\n                      <mat-label>\n                        Customize Message\n                      </mat-label>\n                      <mat-select\n                        required\n                        [(ngModel)]=\"message.emailMessage.customize\"\n                        name=\"customizeEmail\">\n                        <mat-option [value]=\"true\">\n                          Yes\n                        </mat-option>\n                        <mat-option [value]=\"false\">\n                          No\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field>\n                      <mat-label>\n                        Format\n                      </mat-label>\n                      <mat-select\n                        required\n                        [(ngModel)]=\"message.emailMessage.format\"\n                        name=\"format\">\n                        @for (item of emailMessageFormats; track item) {\n                          <mat-option\n                            [value]=\"item.value\">\n                            {{ item.name }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field>\n                      <mat-label>\n                        Template\n                      </mat-label>\n                      <mat-select\n                        [(ngModel)]=\"message.emailMessage.messageTemplateId\"\n                        name=\"template\">\n                        <mat-option [value]=\"null\">\n                          None\n                        </mat-option>\n                        @for (item of messageTemplates; track item) {\n                          <mat-option\n                            [value]=\"item.id\">\n                            {{ item.name }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  @if (message.emailMessage.customize) {\n                    <mat-form-field>\n                      <mat-label>\n                        Subject\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"message.emailMessage.subject\"\n                        name=\"name\"\n                        required>\n                    </mat-form-field>\n                    <div [@.disabled]=\"true\">\n                      <mat-tab-group [dynamicHeight]=\"false\">\n                        <mat-tab label=\"Content\">\n                          <ng-template matTabContent>\n                            @if (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                            }\n                            @if (message.emailMessage.format===emailMessageFormat.RichText) {\n                              <fs-html-editor\n                                [(ngModel)]=\"message.emailMessage.body\"\n                                name=\"body\">\n                              </fs-html-editor>\n                            }\n                            @if (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                            }\n                          </ng-template>\n                        </mat-tab>\n                        @if (message.emailMessage.format===emailMessageFormat.HTML || message.emailMessage.format===emailMessageFormat.RichText) {\n                          <mat-tab\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                        }\n                      </mat-tab-group>\n                    </div>\n                  }\n                  @if (!message.emailMessage.customize) {\n                    <fs-label-field>\n                      <fs-label>\n                        Subject\n                      </fs-label>\n                      {{ message.defaultEmailSubject }}\n                    </fs-label-field>\n                    <div>\n                      <fs-label-field>\n                        <fs-label>\n                          Content\n                        </fs-label>\n                        <div class=\"email-body-html-default\">\n                          @if (message.emailMessage.format===emailMessageFormat.RichText || message.emailMessage.format===emailMessageFormat.HTML) {\n                            <fs-html-renderer\n                              [html]=\"message.defaultEmailBody\">\n                            </fs-html-renderer>\n                          }\n                        </div>\n                        @if (message.emailMessage.format===emailMessageFormat.Text) {\n                          <div\n                            class=\"email-body-text-default\"\n                            >\n                            {{ message.defaultEmailBody }}\n                          </div>\n                        }\n                      </fs-label-field>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-tab>\n          }\n          @if (!!message.smsMessage) {\n            <mat-tab\n              label=\"SMS Message\"\n              name=\"sms\">\n              <ng-template matTabContent>\n                <mat-form-field>\n                  <mat-label>\n                    Customize Message\n                  </mat-label>\n                  <mat-select\n                    required\n                    [(ngModel)]=\"message.smsMessage.customize\"\n                    name=\"customizeSms\">\n                    <mat-option [value]=\"true\">\n                      Yes\n                    </mat-option>\n                    <mat-option [value]=\"false\">\n                      No\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                @if (message.smsMessage.customize) {\n                  <div\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                }\n                @if (!message.smsMessage.customize) {\n                  <fs-label-field>\n                    <fs-label>\n                      Message\n                    </fs-label>\n                    <div class=\"content\">\n                      {{ message.defaultSmsMessage }}\n                    </div>\n                  </fs-label-field>\n                }\n              </ng-template>\n            </mat-tab>\n          }\n          @if (message.emailMessage) {\n            <mat-tab\n              label=\"Attachments\"\n              name=\"attachments\">\n              <ng-template matTabContent>\n                <fs-app-message-attachments [message]=\"message\"></fs-app-message-attachments>\n              </ng-template>\n            </mat-tab>\n          }\n          @if (message.variables) {\n            <mat-tab\n              label=\"Variables\"\n              >\n              <ng-template matTabContent>\n                @for (variable of message.variables; track variable) {\n                  <div\n                    class=\"variable\">\n                    {{ variable.name }}\n                  </div>\n                }\n              </ng-template>\n            </mat-tab>\n          }\n          <mat-tab label=\"Defaults\">\n            <ng-template matTabContent>\n              @if (message.emailMessage) {\n                @if (message.emailMessage && message.smsMessage) {\n                  <h2>\n                    Email\n                  </h2>\n                }\n                <fs-label-field>\n                  <fs-label>\n                    Subject\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultEmailSubject }}\n                  </div>\n                </fs-label-field>\n                <fs-label-field>\n                  <fs-label>\n                    Content\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultEmailBody }}\n                  </div>\n                </fs-label-field>\n              }\n              @if (message.smsMessage) {\n                @if (message.emailMessage && message.smsMessage) {\n                  <h2>\n                    SMS\n                  </h2>\n                }\n                <fs-label-field>\n                  <fs-label>\n                    Content\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultSmsMessage }}\n                  </div>\n                </fs-label-field>\n              }\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        @if (tab==='email' || tab==='sms' || tab==='general') {\n          <button\n            mat-button\n            color=\"primary\">\n            Save\n          </button>\n          @if (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          }\n          @if (tab==='sms') {\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('sms')\"\n              type=\"button\">\n              Send Test SMS\n            </button>\n          }\n          <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n            Cancel\n          </button>\n        } @else {\n          <button\n            mat-button\n            color=\"primary\"\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n            Close\n          </button>\n        }\n      </mat-dialog-actions>\n    </fs-dialog>\n  }\n</form>", 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"], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"], exportAs: ["fsForm"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: FsTabsModule }, { kind: "directive", type: i5.FsTabsHeaderTabGroupDirective, selector: "mat-tab-group, matTabGroup, [matTabGroup]", inputs: ["orientation", "selected", "selectedData"], outputs: ["selectedChange", "selectedDataChange"], exportAs: ["fsTabsHeaderTabGroup"] }, { kind: "directive", type: i5.FsTabsTabDirective, selector: "mat-tab,matTab", inputs: ["name", "data"], exportAs: ["fsTabsTab"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i6.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i7.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FsHtmlEditorModule }, { kind: "component", type: i8.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "ngmodule", type: FsHtmlRendererModule }, { kind: "component", type: i8.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }, { kind: "component", type: AttachmentsComponent, selector: "fs-app-message-attachments", inputs: ["message"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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>\n      Edit Message\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group\n          fsTabs\n          [(selected)]=\"tab\">\n        <mat-tab\n            label=\"General\"\n            name=\"general\">\n          <ng-template matTabContent>\n            <div class=\"fs-column\">\n              <mat-form-field>\n                <mat-label>\n                  Name\n                </mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"message.name\"\n                  name=\"Name\"\n                  required>\n              </mat-form-field>\n              <fs-label-field>\n                <fs-label>\n                  Reference\n                </fs-label>\n                {{ message.reference }}\n              </fs-label-field>\n              <mat-form-field>\n                <mat-label>\n                  Description\n                </mat-label>\n                <input\n                  matInput\n                  [(ngModel)]=\"message.description\"\n                  name=\"description\">\n              </mat-form-field>\n              <div class=\"fs-row.gap-sm.wrap\">\n                <mat-form-field>\n                  <mat-label>\n                    From Email\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.fromEmail\"\n                    name=\"from_email\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    From Name\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.fromName\"\n                    name=\"from_name\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Reply To\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.replyEmail\"\n                    name=\"reply_to\">\n                </mat-form-field>\n              </div>\n              <div class=\"fs-row.gap-sm.wrap\">\n                <mat-form-field>\n                  <mat-label>\n                    To\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.toRecipients\"\n                    name=\"to\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    CC\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.ccRecipients\"\n                    name=\"cc\">\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    BCC\n                  </mat-label>\n                  <input\n                    matInput\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\n            label=\"Email Message\"\n            *ngIf=\"message.emailMessage\"\n            name=\"email\">\n          <ng-template matTabContent>\n            <div class=\"fs-column\">\n              <div class=\"fs-row.gap-sm\">\n                <mat-form-field>\n                  <mat-label>\n                    Customize Message\n                  </mat-label>\n                  <mat-select\n                      required\n                      [(ngModel)]=\"message.emailMessage.customize\"\n                      name=\"customizeEmail\">\n                    <mat-option [value]=\"true\">\n                      Yes\n                    </mat-option>\n                    <mat-option [value]=\"false\">\n                      No\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Format\n                  </mat-label>\n                  <mat-select\n                      required\n                      [(ngModel)]=\"message.emailMessage.format\"\n                      name=\"format\">\n                    <mat-option\n                        *ngFor=\"let item of emailMessageFormats\"\n                        [value]=\"item.value\">\n                      {{ item.name }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field>\n                  <mat-label>\n                    Template\n                  </mat-label>\n                  <mat-select\n                      [(ngModel)]=\"message.emailMessage.messageTemplateId\"\n                      name=\"template\">\n                    <mat-option [value]=\"null\">\n                      None\n                    </mat-option>\n                    <mat-option\n                        *ngFor=\"let item of messageTemplates\"\n                        [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                  <mat-label>\n                    Subject\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.emailMessage.subject\"\n                    name=\"name\"\n                    required>\n                </mat-form-field>\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                        <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                        <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              <ng-container *ngIf=\"!message.emailMessage.customize\">\n                <fs-label-field>\n                  <fs-label>\n                    Subject\n                  </fs-label>\n                  {{ message.defaultEmailSubject }}\n                </fs-label-field>\n                <div>\n                  <fs-label-field>\n                    <fs-label>\n                      Content\n                    </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        <ng-container *ngIf=\"!!message.smsMessage\">\n          <mat-tab\n              label=\"SMS Message\"\n              name=\"sms\">\n            <ng-template matTabContent>\n              <mat-form-field>\n                <mat-label>\n                  Customize Message\n                </mat-label>\n                <mat-select\n                    required\n                    [(ngModel)]=\"message.smsMessage.customize\"\n                    name=\"customizeSms\">\n                  <mat-option [value]=\"true\">\n                    Yes\n                  </mat-option>\n                  <mat-option [value]=\"false\">\n                    No\n                  </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>\n                  Message\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultSmsMessage }}\n                </div>\n              </fs-label-field>\n            </ng-template>\n          </mat-tab>\n        </ng-container>\n        <mat-tab\n            label=\"Attachments\"\n            *ngIf=\"message.emailMessage\"\n            name=\"attachments\">\n          <ng-template matTabContent>\n            <fs-app-message-attachments [message]=\"message\"></fs-app-message-attachments>\n          </ng-template>\n        </mat-tab>\n        <mat-tab\n            label=\"Variables\"\n            *ngIf=\"message.variables\">\n          <ng-template matTabContent>\n            <div\n                *ngFor=\"let variable of message.variables\"\n                class=\"variable\">\n              {{ variable.name }}\n            </div>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Defaults\">\n          <ng-template matTabContent>\n            <ng-container *ngIf=\"message.emailMessage\">\n              <h2 *ngIf=\"message.emailMessage && message.smsMessage\">\n                Email\n              </h2>\n              <fs-label-field>\n                <fs-label>\n                  Subject\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultEmailSubject }}\n                </div>\n              </fs-label-field>\n              <fs-label-field>\n                <fs-label>\n                  Content\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultEmailBody }}\n                </div>\n              </fs-label-field>\n            </ng-container>\n            <ng-container *ngIf=\"message.smsMessage\">\n              <h2 *ngIf=\"message.emailMessage && message.smsMessage\">\n                SMS\n              </h2>\n              <fs-label-field>\n                <fs-label>\n                  Content\n                </fs-label>\n                <div class=\"content\">\n                  {{ message.defaultSmsMessage }}\n                </div>\n              </fs-label-field>\n            </ng-container>\n          </ng-template>\n        </mat-tab>\n      </mat-tab-group>\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>", 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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$2.FsPrompt }, { type: i1$1.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }] });
-
-function indexNameValue(arry) {
-    const obj = {};
-    arry.forEach(item => {
-        obj[item.value] = item.name;
-    });
-    return obj;
-}
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatTabGroup,
+                        FsTabsModule,
+                        MatTab,
+                        MatTabContent,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FsLabelModule,
+                        MatSelect,
+                        MatOption,
+                        FsTextEditorModule,
+                        FsHtmlEditorModule,
+                        FsHtmlRendererModule,
+                        AttachmentsComponent,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<form\n  fsForm\n  [submit]=\"save\"\n  #form=\"ngForm\"\n  *fsSkeleton=\"message\"\n  [confirmTabs]=\"false\">\n  @if (message) {\n    <fs-dialog>\n      <div mat-dialog-title>\n        Edit Message\n      </div>\n      <mat-dialog-content>\n        <mat-tab-group\n          fsTabs\n          [(selected)]=\"tab\">\n          <mat-tab\n            label=\"General\"\n            name=\"general\">\n            <ng-template matTabContent>\n              <div class=\"fs-column\">\n                <mat-form-field>\n                  <mat-label>\n                    Name\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.name\"\n                    name=\"Name\"\n                    required>\n                </mat-form-field>\n                <fs-label-field>\n                  <fs-label>\n                    Reference\n                  </fs-label>\n                  {{ message.reference }}\n                </fs-label-field>\n                <mat-form-field>\n                  <mat-label>\n                    Description\n                  </mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"message.description\"\n                    name=\"description\">\n                </mat-form-field>\n                <div class=\"fs-row.gap-sm.wrap\">\n                  <mat-form-field>\n                    <mat-label>\n                      From Email\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.fromEmail\"\n                      name=\"from_email\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      From Name\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.fromName\"\n                      name=\"from_name\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      Reply To\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.replyEmail\"\n                      name=\"reply_to\">\n                  </mat-form-field>\n                </div>\n                <div class=\"fs-row.gap-sm.wrap\">\n                  <mat-form-field>\n                    <mat-label>\n                      To\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.toRecipients\"\n                      name=\"to\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      CC\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.ccRecipients\"\n                      name=\"cc\">\n                  </mat-form-field>\n                  <mat-form-field>\n                    <mat-label>\n                      BCC\n                    </mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"message.emailMessage.bccRecipients\"\n                      name=\"bcc\">\n                  </mat-form-field>\n                </div>\n              </div>\n            </ng-template>\n          </mat-tab>\n          @if (message.emailMessage) {\n            <mat-tab\n              label=\"Email Message\"\n              name=\"email\">\n              <ng-template matTabContent>\n                <div class=\"fs-column\">\n                  <div class=\"fs-row.gap-sm\">\n                    <mat-form-field>\n                      <mat-label>\n                        Customize Message\n                      </mat-label>\n                      <mat-select\n                        required\n                        [(ngModel)]=\"message.emailMessage.customize\"\n                        name=\"customizeEmail\">\n                        <mat-option [value]=\"true\">\n                          Yes\n                        </mat-option>\n                        <mat-option [value]=\"false\">\n                          No\n                        </mat-option>\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field>\n                      <mat-label>\n                        Format\n                      </mat-label>\n                      <mat-select\n                        required\n                        [(ngModel)]=\"message.emailMessage.format\"\n                        name=\"format\">\n                        @for (item of emailMessageFormats; track item) {\n                          <mat-option\n                            [value]=\"item.value\">\n                            {{ item.name }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <mat-form-field>\n                      <mat-label>\n                        Template\n                      </mat-label>\n                      <mat-select\n                        [(ngModel)]=\"message.emailMessage.messageTemplateId\"\n                        name=\"template\">\n                        <mat-option [value]=\"null\">\n                          None\n                        </mat-option>\n                        @for (item of messageTemplates; track item) {\n                          <mat-option\n                            [value]=\"item.id\">\n                            {{ item.name }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  </div>\n                  @if (message.emailMessage.customize) {\n                    <mat-form-field>\n                      <mat-label>\n                        Subject\n                      </mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"message.emailMessage.subject\"\n                        name=\"name\"\n                        required>\n                    </mat-form-field>\n                    <div [@.disabled]=\"true\">\n                      <mat-tab-group [dynamicHeight]=\"false\">\n                        <mat-tab label=\"Content\">\n                          <ng-template matTabContent>\n                            @if (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                            }\n                            @if (message.emailMessage.format===emailMessageFormat.RichText) {\n                              <fs-html-editor\n                                [(ngModel)]=\"message.emailMessage.body\"\n                                name=\"body\">\n                              </fs-html-editor>\n                            }\n                            @if (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                            }\n                          </ng-template>\n                        </mat-tab>\n                        @if (message.emailMessage.format===emailMessageFormat.HTML || message.emailMessage.format===emailMessageFormat.RichText) {\n                          <mat-tab\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                        }\n                      </mat-tab-group>\n                    </div>\n                  }\n                  @if (!message.emailMessage.customize) {\n                    <fs-label-field>\n                      <fs-label>\n                        Subject\n                      </fs-label>\n                      {{ message.defaultEmailSubject }}\n                    </fs-label-field>\n                    <div>\n                      <fs-label-field>\n                        <fs-label>\n                          Content\n                        </fs-label>\n                        <div class=\"email-body-html-default\">\n                          @if (message.emailMessage.format===emailMessageFormat.RichText || message.emailMessage.format===emailMessageFormat.HTML) {\n                            <fs-html-renderer\n                              [html]=\"message.defaultEmailBody\">\n                            </fs-html-renderer>\n                          }\n                        </div>\n                        @if (message.emailMessage.format===emailMessageFormat.Text) {\n                          <div\n                            class=\"email-body-text-default\"\n                            >\n                            {{ message.defaultEmailBody }}\n                          </div>\n                        }\n                      </fs-label-field>\n                    </div>\n                  }\n                </div>\n              </ng-template>\n            </mat-tab>\n          }\n          @if (!!message.smsMessage) {\n            <mat-tab\n              label=\"SMS Message\"\n              name=\"sms\">\n              <ng-template matTabContent>\n                <mat-form-field>\n                  <mat-label>\n                    Customize Message\n                  </mat-label>\n                  <mat-select\n                    required\n                    [(ngModel)]=\"message.smsMessage.customize\"\n                    name=\"customizeSms\">\n                    <mat-option [value]=\"true\">\n                      Yes\n                    </mat-option>\n                    <mat-option [value]=\"false\">\n                      No\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                @if (message.smsMessage.customize) {\n                  <div\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                }\n                @if (!message.smsMessage.customize) {\n                  <fs-label-field>\n                    <fs-label>\n                      Message\n                    </fs-label>\n                    <div class=\"content\">\n                      {{ message.defaultSmsMessage }}\n                    </div>\n                  </fs-label-field>\n                }\n              </ng-template>\n            </mat-tab>\n          }\n          @if (message.emailMessage) {\n            <mat-tab\n              label=\"Attachments\"\n              name=\"attachments\">\n              <ng-template matTabContent>\n                <fs-app-message-attachments [message]=\"message\"></fs-app-message-attachments>\n              </ng-template>\n            </mat-tab>\n          }\n          @if (message.variables) {\n            <mat-tab\n              label=\"Variables\"\n              >\n              <ng-template matTabContent>\n                @for (variable of message.variables; track variable) {\n                  <div\n                    class=\"variable\">\n                    {{ variable.name }}\n                  </div>\n                }\n              </ng-template>\n            </mat-tab>\n          }\n          <mat-tab label=\"Defaults\">\n            <ng-template matTabContent>\n              @if (message.emailMessage) {\n                @if (message.emailMessage && message.smsMessage) {\n                  <h2>\n                    Email\n                  </h2>\n                }\n                <fs-label-field>\n                  <fs-label>\n                    Subject\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultEmailSubject }}\n                  </div>\n                </fs-label-field>\n                <fs-label-field>\n                  <fs-label>\n                    Content\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultEmailBody }}\n                  </div>\n                </fs-label-field>\n              }\n              @if (message.smsMessage) {\n                @if (message.emailMessage && message.smsMessage) {\n                  <h2>\n                    SMS\n                  </h2>\n                }\n                <fs-label-field>\n                  <fs-label>\n                    Content\n                  </fs-label>\n                  <div class=\"content\">\n                    {{ message.defaultSmsMessage }}\n                  </div>\n                </fs-label-field>\n              }\n            </ng-template>\n          </mat-tab>\n        </mat-tab-group>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        @if (tab==='email' || tab==='sms' || tab==='general') {\n          <button\n            mat-button\n            color=\"primary\">\n            Save\n          </button>\n          @if (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          }\n          @if (tab==='sms') {\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"sendTest('sms')\"\n              type=\"button\">\n              Send Test SMS\n            </button>\n          }\n          <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n            Cancel\n          </button>\n        } @else {\n          <button\n            mat-button\n            color=\"primary\"\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n            Close\n          </button>\n        }\n      </mat-dialog-actions>\n    </fs-dialog>\n  }\n</form>", 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"] }]
+        }] });
 
 class MessagesComponent {
-    _config;
-    _dialog;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _dialog = inject(MatDialog);
     list = null;
     config = null;
     emailMessageFormats = {};
     _destroy$ = new Subject();
-    constructor(_config, _dialog) {
-        this._config = _config;
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         this.emailMessageFormats = indexNameValue(EmailMessageFormats);
         this.config = {
@@ -374,112 +331,17 @@ class MessagesComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MessagesComponent, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column\n      title=\"Name\"\n      name=\"name\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email format\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ emailMessageFormats[row.emailMessage.format] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email message template\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.emailMessage.messageTemplate?.name || 'None' }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Channels\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"fs-delimit\">\n        @if (row.emailMessage) {\n          <span>\n            Email\n          </span>\n        }\n        @if (row.smsMessage) {\n          <span>\n            SMS\n          </span>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized message\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessage?.customize || row.smsMessage?.customize; else noCustomize\">\n        <ng-container *ngIf=\"row.emailMessage?.customize\">\n          {{ row.emailMessage.customize ? 'Email' : '' }}\n        </ng-container>\n        <ng-container *ngIf=\"row.smsMessage?.customize\">\n          {{ row.smsMessage.customize ? 'SMS' : '' }}\n        </ng-container>\n      </ng-container>\n      <ng-template #noCustomize>\n        None\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MessagesComponent, isStandalone: true, selector: "fs-app-messages", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column\n    title=\"Name\"\n    name=\"name\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email format\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ emailMessageFormats[row.emailMessage.format] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email message template\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.emailMessage.messageTemplate?.name || 'None' }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Channels\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"fs-delimit\">\n        @if (row.emailMessage) {\n          <span>\n            Email\n          </span>\n        }\n        @if (row.smsMessage) {\n          <span>\n            SMS\n          </span>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessage?.customize || row.smsMessage?.customize) {\n        @if (row.emailMessage?.customize) {\n          {{ row.emailMessage.customize ? 'Email' : '' }}\n        }\n        @if (row.smsMessage?.customize) {\n          {{ row.smsMessage.customize ? 'SMS' : '' }}\n        }\n      } @else {\n        None\n      }\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-app-messages', template: "<fs-list [config]=\"config\">\n  <fs-list-column\n      title=\"Name\"\n      name=\"name\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email format\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ emailMessageFormats[row.emailMessage.format] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email message template\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.emailMessage.messageTemplate?.name || 'None' }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Channels\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"fs-delimit\">\n        @if (row.emailMessage) {\n          <span>\n            Email\n          </span>\n        }\n        @if (row.smsMessage) {\n          <span>\n            SMS\n          </span>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized message\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessage?.customize || row.smsMessage?.customize; else noCustomize\">\n        <ng-container *ngIf=\"row.emailMessage?.customize\">\n          {{ row.emailMessage.customize ? 'Email' : '' }}\n        </ng-container>\n        <ng-container *ngIf=\"row.smsMessage?.customize\">\n          {{ row.smsMessage.customize ? 'SMS' : '' }}\n        </ng-container>\n      </ng-container>\n      <ng-template #noCustomize>\n        None\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialog }], propDecorators: { list: [{
+            args: [{ selector: 'fs-app-messages', standalone: true, imports: [FsListModule], template: "<fs-list [config]=\"config\">\n  <fs-list-column\n    title=\"Name\"\n    name=\"name\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email format\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ emailMessageFormats[row.emailMessage.format] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Email message template\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.emailMessage.messageTemplate?.name || 'None' }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Channels\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"fs-delimit\">\n        @if (row.emailMessage) {\n          <span>\n            Email\n          </span>\n        }\n        @if (row.smsMessage) {\n          <span>\n            SMS\n          </span>\n        }\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Customized message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessage?.customize || row.smsMessage?.customize) {\n        @if (row.emailMessage?.customize) {\n          {{ row.emailMessage.customize ? 'Email' : '' }}\n        }\n        @if (row.smsMessage?.customize) {\n          {{ row.smsMessage.customize ? 'SMS' : '' }}\n        }\n      } @else {\n        None\n      }\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }] } });
 
-class FsAppMessagesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagesModule, declarations: [MessagesComponent,
-            MessageComponent,
-            AttachmentsComponent], imports: [RouterModule,
-            CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule,
-            MatCheckboxModule,
-            FsDialogModule,
-            FsListModule,
-            FsLabelModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsHtmlEditorModule,
-            FsHtmlRendererModule,
-            FsCommonModule,
-            FsTabsModule,
-            FsAppMessagePreviewModule], exports: [MessagesComponent,
-            MessageComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagesModule, imports: [RouterModule,
-            CommonModule,
-            FormsModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatOptionModule,
-            MatSelectModule,
-            MatTooltipModule,
-            MatCheckboxModule,
-            FsDialogModule,
-            FsListModule,
-            FsLabelModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsHtmlEditorModule,
-            FsHtmlRendererModule,
-            FsCommonModule,
-            FsTabsModule,
-            FsAppMessagePreviewModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessagesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatOptionModule,
-                        MatSelectModule,
-                        MatTooltipModule,
-                        MatCheckboxModule,
-                        FsDialogModule,
-                        FsListModule,
-                        FsLabelModule,
-                        FsSkeletonModule,
-                        FsFormModule,
-                        FsTextEditorModule,
-                        FsHtmlEditorModule,
-                        FsHtmlRendererModule,
-                        FsCommonModule,
-                        FsTabsModule,
-                        FsAppMessagePreviewModule,
-                    ],
-                    declarations: [
-                        MessagesComponent,
-                        MessageComponent,
-                        AttachmentsComponent,
-                    ],
-                    exports: [
-                        MessagesComponent,
-                        MessageComponent,
-                    ],
-                }]
-        }] });
-
 var MessageQueueState;
 (function (MessageQueueState) {
     MessageQueueState["Sent"] = "S";
@@ -538,11 +400,11 @@ class RecipientComponent {
         this.icon = icons[this.state];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RecipientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: RecipientComponent, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0, template: "<span class=\"recipient\">\n  <span class=\"name\">{{name}}</span>\n  <mat-icon *ngIf=\"icon\" [class]=\"'state-' + state\" [matTooltip]=\"icon.tooltip\">{{icon.name}}</mat-icon>\n</span>", styles: ["mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: RecipientComponent, isStandalone: true, selector: "app-recipient", inputs: { name: "name", state: "state" }, ngImport: i0, template: "<span class=\"recipient\">\n  <span class=\"name\">{{name}}</span>\n  @if (icon) {\n    <mat-icon [class]=\"'state-' + state\" [matTooltip]=\"icon.tooltip\">{{icon.name}}</mat-icon>\n  }\n</span>", styles: ["mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: RecipientComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-recipient', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"recipient\">\n  <span class=\"name\">{{name}}</span>\n  <mat-icon *ngIf=\"icon\" [class]=\"'state-' + state\" [matTooltip]=\"icon.tooltip\">{{icon.name}}</mat-icon>\n</span>", styles: ["mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}\n"] }]
+            args: [{ selector: 'app-recipient', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatTooltip], template: "<span class=\"recipient\">\n  <span class=\"name\">{{name}}</span>\n  @if (icon) {\n    <mat-icon [class]=\"'state-' + state\" [matTooltip]=\"icon.tooltip\">{{icon.name}}</mat-icon>\n  }\n</span>", styles: ["mat-icon{font-size:14px;width:14px;height:14px;line-height:14px;margin-left:2px}mat-icon.state-S{color:#5fa099}mat-icon.state-E{color:#fbbc04}mat-icon.state-F{color:#d8524e}.recipient{display:inline-flex;align-items:center}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], state: [{
@@ -550,12 +412,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class QueueComponent {
-    _config;
-    _data;
-    _message;
-    _prompt;
-    _dialog;
-    _cdRef;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _data = inject(MAT_DIALOG_DATA);
+    _message = inject(FsMessage);
+    _prompt = inject(FsPrompt);
+    _dialog = inject(MatDialog);
+    _cdRef = inject(ChangeDetectorRef);
     logList;
     messageQueue;
     loadMessage;
@@ -570,14 +432,6 @@ class QueueComponent {
     MessageQueueEventTypes = indexNameValue(MessageQueueEventTypes);
     MessageQueueEventType = MessageQueueEventType;
     _destroy$ = new Subject();
-    constructor(_config, _data, _message, _prompt, _dialog, _cdRef) {
-        this._config = _config;
-        this._data = _data;
-        this._message = _message;
-        this._prompt = _prompt;
-        this._dialog = _dialog;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         this.messageQueueStates = indexNameValue(MessageQueueStates);
         this.resendMessageQueue = this._config.resendMessageQueue;
@@ -728,28 +582,36 @@ class QueueComponent {
         const e = Math.floor(Math.log(bytes) / Math.log(1024));
         return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueueComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1$1.FsMessage }, { token: i1$2.FsPrompt }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: QueueComponent, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0, template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <div mat-dialog-title>\n    Message Queue\n  </div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div class=\"fs-row.gap-lg.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              <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              <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              <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                <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              <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            <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              <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            <fs-label-field>\n              <fs-label>\n                Date\n              </fs-label>\n              {{ messageQueue.scheduledDate | fsDateFormat: 'full-date-time' }}\n            </fs-label-field>\n            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{ messageQueueStates[messageQueue.state] }}\n            </fs-label-field>\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          <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            <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          <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        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list\n              [config]=\"logConfig\"\n              #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.message }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                  fs-list-cell\n                  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\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.filename }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template\n                  fs-list-cell\n                  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\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.messageQueueRecipient.recipient }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ MessageQueueEventTypes[row.type] }}\n                <div\n                    class=\"small\"\n                    *ngIf=\"row.type === MessageQueueEventType.Click\">\n                  <a\n                      [href]=\"row.meta?.url\"\n                      target=\"_blank\">\n                    {{ row.meta?.url }}\n                  </a>\n                </div>\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                  fs-list-cell\n                  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>", styles: [".subject,.body{display:block;margin-top:15px}.format-text{white-space:pre-wrap}app-recipient{display:block}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i13.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i13.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i10$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i11$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "directive", type: i12.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i4.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"], outputs: ["loaded"] }, { kind: "component", type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { kind: "pipe", type: i10$1.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: QueueComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "logList", first: true, predicate: ["logList"], descendants: true }], ngImport: i0, template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <fs-dialog-title>\n    Message queue\n    <ng-template fsDialogSubtitle>\n      ID: {{ messageQueue.id }}\n    </ng-template>\n  </fs-dialog-title>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div class=\"fs-row.gap-lg.wrap\">\n            @if (messageQueue.emailMessageQueue) {\n              <fs-label-field>\n                <fs-label>\n                  To Recipients\n                </fs-label>\n                @for (recipient of messageQueue.emailMessageQueue.toRecipients; track recipient) {\n                  <app-recipient\n                    [state]=\"messageQueueRecipients[recipient]\"\n                    [name]=\"recipient\">\n                  </app-recipient>\n                }\n              </fs-label-field>\n              @if (messageQueue.emailMessageQueue.ccRecipients.length) {\n                <fs-label-field>\n                  <fs-label>\n                    CC\n                  </fs-label>\n                  @for (recipient of messageQueue.emailMessageQueue.ccRecipients; track recipient) {\n                    <app-recipient\n                      [state]=\"messageQueueRecipients[recipient]\"\n                      [name]=\"recipient\">\n                    </app-recipient>\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.bccRecipients.length) {\n                <fs-label-field>\n                  <fs-label>\n                    BCC\n                  </fs-label>\n                  @for (recipient of messageQueue.emailMessageQueue.bccRecipients; track recipient) {\n                    <app-recipient\n                      [state]=\"messageQueueRecipients[recipient]\"\n                      [name]=\"recipient\">\n                    </app-recipient>\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.fromName || messageQueue.emailMessageQueue.fromEmail) {\n                <fs-label-field>\n                  <fs-label>\n                    From\n                  </fs-label>\n                  @if (messageQueue.emailMessageQueue.fromName === messageQueue.emailMessageQueue.fromEmail) {\n                    {{ messageQueue.emailMessageQueue.fromName }}\n                  } @else {\n                    {{ messageQueue.emailMessageQueue.fromName }}\n                    @if (messageQueue.emailMessageQueue.fromEmail) {\n                      ({{ messageQueue.emailMessageQueue.fromEmail }})\n                    }\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.replyEmail && messageQueue.emailMessageQueue.replyEmail.length) {\n                <fs-label-field>\n                  <fs-label>\n                    Reply To\n                  </fs-label>\n                  {{ messageQueue.emailMessageQueue.replyEmail.join(', ') }}\n                </fs-label-field>\n              }\n            }\n            @if (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              @if (messageQueue.smsMessageQueue.fromNumber) {\n                <fs-label-field>\n                  <fs-label>\n                    From Number\n                  </fs-label>\n                  {{ messageQueue.smsMessageQueue.fromNumber }}\n                </fs-label-field>\n              }\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            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{ messageQueueStates[messageQueue.state] }}\n            </fs-label-field>\n            @if (messageQueue.message) {\n              <fs-label-field>\n                <fs-label>\n                  Message Type\n                </fs-label>\n                @if (loadMessage) {\n                  <a\n                    (click)=\"openMessage(messageQueue.message)\"\n                    >\n                    {{ messageQueue.message.name }}\n                  </a>\n                } @else {\n                  {{ messageQueue.message.name }}\n                }\n              </fs-label-field>\n            }\n          </div>\n          @if (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            <fs-label-field class=\"body\">\n              <fs-label>\n                Body\n              </fs-label>\n              @if (messageQueue.emailMessageQueue.format===emailMessageQueueFormat.Text) {\n                <div\n                  class=\"format-text\"\n                  [innerHTML]=\"messageQueue.emailMessageQueue.body\">\n                </div>\n              }\n              @if (messageQueue.emailMessageQueue.format===emailMessageQueueFormat.HTML || messageQueue.emailMessageQueue.format===emailMessageQueueFormat.RichText) {\n                <fs-iframe\n                  [html]=\"messageQueue.emailMessageQueue.body\"\n                  [width]=\"'100%'\">\n                </fs-iframe>\n              }\n            </fs-label-field>\n          }\n          @if (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          }\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list\n            [config]=\"logConfig\"\n            #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.message }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                fs-list-cell\n                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\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.filename }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template\n                fs-list-cell\n                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\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.messageQueueRecipient.recipient }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template\n                fs-list-cell\n                let-row=\"row\">\n                {{ MessageQueueEventTypes[row.type] }}\n                @if (row.type === MessageQueueEventType.Click) {\n                  <div\n                    class=\"small\"\n                    >\n                    <a\n                      [href]=\"row.meta?.url\"\n                      target=\"_blank\">\n                      {{ row.meta?.url }}\n                    </a>\n                  </div>\n                }\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                fs-list-cell\n                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    @if (resendMessageQueue) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"resend()\"\n        type=\"button\">\n        Resend\n      </button>\n    }\n    @if (forwardMessageQueue) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"forward()\"\n        type=\"button\">\n        Forward\n      </button>\n    }\n  </mat-dialog-actions>\n</fs-dialog>", styles: [".subject,.body{display:block;margin-top:15px}.format-text{white-space:pre-wrap}app-recipient{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i2.FsDialogTitleComponent, selector: "fs-dialog-title", inputs: ["close", "dockToggle", "back"] }, { kind: "directive", type: i2.FsDialogSubtitleDirective, selector: "[fsDialogSubtitle]" }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i6.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { kind: "ngmodule", type: FsIFrameModule }, { kind: "component", type: i2$1.FsIFrameComponent, selector: "fs-iframe", inputs: ["html", "src", "styles", "width", "height"], outputs: ["loaded"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i6$1.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "component", type: i6$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueueComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <div mat-dialog-title>\n    Message Queue\n  </div>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div class=\"fs-row.gap-lg.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              <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              <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              <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                <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              <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            <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              <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            <fs-label-field>\n              <fs-label>\n                Date\n              </fs-label>\n              {{ messageQueue.scheduledDate | fsDateFormat: 'full-date-time' }}\n            </fs-label-field>\n            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{ messageQueueStates[messageQueue.state] }}\n            </fs-label-field>\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          <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            <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          <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        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list\n              [config]=\"logConfig\"\n              #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.message }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                  fs-list-cell\n                  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\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.filename }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template\n                  fs-list-cell\n                  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\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ row.messageQueueRecipient.recipient }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template\n                  fs-list-cell\n                  let-row=\"row\">\n                {{ MessageQueueEventTypes[row.type] }}\n                <div\n                    class=\"small\"\n                    *ngIf=\"row.type === MessageQueueEventType.Click\">\n                  <a\n                      [href]=\"row.meta?.url\"\n                      target=\"_blank\">\n                    {{ row.meta?.url }}\n                  </a>\n                </div>\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                  fs-list-cell\n                  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>", styles: [".subject,.body{display:block;margin-top:15px}.format-text{white-space:pre-wrap}app-recipient{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$1.FsMessage }, { type: i1$2.FsPrompt }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { logList: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FsDialogModule,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatTabGroup,
+                        MatTab,
+                        MatTabContent,
+                        FsLabelModule,
+                        RecipientComponent,
+                        FsIFrameModule,
+                        FsListModule,
+                        FsDateModule,
+                        MatDialogActions,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogClose,
+                    ], template: "<fs-dialog *fsSkeleton=\"messageQueue\">\n  <fs-dialog-title>\n    Message queue\n    <ng-template fsDialogSubtitle>\n      ID: {{ messageQueue.id }}\n    </ng-template>\n  </fs-dialog-title>\n  <mat-dialog-content>\n    <mat-tab-group>\n      <mat-tab label=\"Overview\">\n        <ng-template matTabContent>\n          <div class=\"fs-row.gap-lg.wrap\">\n            @if (messageQueue.emailMessageQueue) {\n              <fs-label-field>\n                <fs-label>\n                  To Recipients\n                </fs-label>\n                @for (recipient of messageQueue.emailMessageQueue.toRecipients; track recipient) {\n                  <app-recipient\n                    [state]=\"messageQueueRecipients[recipient]\"\n                    [name]=\"recipient\">\n                  </app-recipient>\n                }\n              </fs-label-field>\n              @if (messageQueue.emailMessageQueue.ccRecipients.length) {\n                <fs-label-field>\n                  <fs-label>\n                    CC\n                  </fs-label>\n                  @for (recipient of messageQueue.emailMessageQueue.ccRecipients; track recipient) {\n                    <app-recipient\n                      [state]=\"messageQueueRecipients[recipient]\"\n                      [name]=\"recipient\">\n                    </app-recipient>\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.bccRecipients.length) {\n                <fs-label-field>\n                  <fs-label>\n                    BCC\n                  </fs-label>\n                  @for (recipient of messageQueue.emailMessageQueue.bccRecipients; track recipient) {\n                    <app-recipient\n                      [state]=\"messageQueueRecipients[recipient]\"\n                      [name]=\"recipient\">\n                    </app-recipient>\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.fromName || messageQueue.emailMessageQueue.fromEmail) {\n                <fs-label-field>\n                  <fs-label>\n                    From\n                  </fs-label>\n                  @if (messageQueue.emailMessageQueue.fromName === messageQueue.emailMessageQueue.fromEmail) {\n                    {{ messageQueue.emailMessageQueue.fromName }}\n                  } @else {\n                    {{ messageQueue.emailMessageQueue.fromName }}\n                    @if (messageQueue.emailMessageQueue.fromEmail) {\n                      ({{ messageQueue.emailMessageQueue.fromEmail }})\n                    }\n                  }\n                </fs-label-field>\n              }\n              @if (messageQueue.emailMessageQueue.replyEmail && messageQueue.emailMessageQueue.replyEmail.length) {\n                <fs-label-field>\n                  <fs-label>\n                    Reply To\n                  </fs-label>\n                  {{ messageQueue.emailMessageQueue.replyEmail.join(', ') }}\n                </fs-label-field>\n              }\n            }\n            @if (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              @if (messageQueue.smsMessageQueue.fromNumber) {\n                <fs-label-field>\n                  <fs-label>\n                    From Number\n                  </fs-label>\n                  {{ messageQueue.smsMessageQueue.fromNumber }}\n                </fs-label-field>\n              }\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            <fs-label-field>\n              <fs-label>\n                Status\n              </fs-label>\n              {{ messageQueueStates[messageQueue.state] }}\n            </fs-label-field>\n            @if (messageQueue.message) {\n              <fs-label-field>\n                <fs-label>\n                  Message Type\n                </fs-label>\n                @if (loadMessage) {\n                  <a\n                    (click)=\"openMessage(messageQueue.message)\"\n                    >\n                    {{ messageQueue.message.name }}\n                  </a>\n                } @else {\n                  {{ messageQueue.message.name }}\n                }\n              </fs-label-field>\n            }\n          </div>\n          @if (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            <fs-label-field class=\"body\">\n              <fs-label>\n                Body\n              </fs-label>\n              @if (messageQueue.emailMessageQueue.format===emailMessageQueueFormat.Text) {\n                <div\n                  class=\"format-text\"\n                  [innerHTML]=\"messageQueue.emailMessageQueue.body\">\n                </div>\n              }\n              @if (messageQueue.emailMessageQueue.format===emailMessageQueueFormat.HTML || messageQueue.emailMessageQueue.format===emailMessageQueueFormat.RichText) {\n                <fs-iframe\n                  [html]=\"messageQueue.emailMessageQueue.body\"\n                  [width]=\"'100%'\">\n                </fs-iframe>\n              }\n            </fs-label-field>\n          }\n          @if (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          }\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <fs-list\n            [config]=\"logConfig\"\n            #logList>\n            <fs-list-column title=\"Message\">\n              <ng-template\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.message }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                fs-list-cell\n                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\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.filename }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"File Size\">\n              <ng-template\n                fs-list-cell\n                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\n                fs-list-cell\n                let-row=\"row\">\n                {{ row.messageQueueRecipient.recipient }}\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Event\">\n              <ng-template\n                fs-list-cell\n                let-row=\"row\">\n                {{ MessageQueueEventTypes[row.type] }}\n                @if (row.type === MessageQueueEventType.Click) {\n                  <div\n                    class=\"small\"\n                    >\n                    <a\n                      [href]=\"row.meta?.url\"\n                      target=\"_blank\">\n                      {{ row.meta?.url }}\n                    </a>\n                  </div>\n                }\n              </ng-template>\n            </fs-list-column>\n            <fs-list-column title=\"Date\">\n              <ng-template\n                fs-list-cell\n                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    @if (resendMessageQueue) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"resend()\"\n        type=\"button\">\n        Resend\n      </button>\n    }\n    @if (forwardMessageQueue) {\n      <button\n        mat-button\n        type=\"button\"\n        (click)=\"forward()\"\n        type=\"button\">\n        Forward\n      </button>\n    }\n  </mat-dialog-actions>\n</fs-dialog>", styles: [".subject,.body{display:block;margin-top:15px}.format-text{white-space:pre-wrap}app-recipient{display:block}\n"] }]
+        }], propDecorators: { logList: [{
                 type: ViewChild,
                 args: ['logList']
             }] } });
 
 class FsMessageQueueService {
-    _dialog;
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
+    _dialog = inject(MatDialog);
     openMessageQueue(messageQueueId, options = {}) {
         return this._dialog.open(QueueComponent, {
             ...options,
@@ -760,7 +622,7 @@ class FsMessageQueueService {
         })
             .afterClosed();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsMessageQueueService, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsMessageQueueService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsMessageQueueService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsMessageQueueService, decorators: [{
@@ -768,7 +630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }] });
+        }] });
 
 class TruncatePipe {
     transform(value, limit = 25, completeWords = false, ellipsis = '...') {
@@ -782,20 +644,21 @@ class TruncatePipe {
         return `${value.substr(0, limit)}${ellipsis}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: TruncatePipe, name: "truncate" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'truncate',
+                    standalone: true,
                 }]
         }] });
 
 class QueuesComponent {
-    _config;
-    _messageQueueService;
-    _cdRef;
-    _store;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _messageQueueService = inject(FsMessageQueueService);
+    _cdRef = inject(ChangeDetectorRef);
+    _store = inject(FsStore);
     list = null;
     query = {};
     type;
@@ -805,12 +668,6 @@ class QueuesComponent {
     MessageQueueState = MessageQueueState;
     webHookEnabled;
     _destroy$ = new Subject();
-    constructor(_config, _messageQueueService, _cdRef, _store) {
-        this._config = _config;
-        this._messageQueueService = _messageQueueService;
-        this._cdRef = _cdRef;
-        this._store = _store;
-    }
     ngOnInit() {
         this.messageQueueStates = indexNameValue(MessageQueueStates);
         this._initConfig();
@@ -998,16 +855,23 @@ class QueuesComponent {
             ...this.config,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueuesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: FsMessageQueueService }, { token: i0.ChangeDetectorRef }, { token: i2$2.FsStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: QueuesComponent, selector: "fs-app-message-queues", inputs: { query: "query", type: "type", config: "config" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<ng-container *ngIf=\"webHookEnabled === false\">\n  <fs-message-info>\n    <div class=\"fs-row\">\n      <span class=\"fs-flex\">\n        The webhook which provides email delivery confirmations is not enabled.\n      </span>\n      <a\n          (click)=\"enableWebhook()\"\n          mat-raised-button>\n        Enable\n      </a>\n    </div>\n  </fs-message-info>\n</ng-container>\n<fs-list\n    [config]=\"listConfig\"\n    #list>\n  <fs-list-column\n      title=\"Message\"\n      name=\"subject\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <a (click)=\"open(row)\">\n          {{ row.emailMessageQueue.subject|truncate:100 }}\n        </a>\n        <ng-container *ngIf=\"row.messageQueueAttachmentCount\">\n          <mat-icon\n              class=\"attachment-icon\"\n              [matTooltip]=\"row.messageQueueAttachmentCount + ' Attachment(s)'\">\n            attach_file\n          </mat-icon>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"row.smsMessageQueue\">\n        <a (click)=\"open(row)\">\n          {{ row.smsMessageQueue.body|truncate:100 }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Recipients\"\n      class=\"col-recipients\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <ng-container *ngIf=\"row.emailMessageQueue.toRecipients.length; else unspecified\">\n          <div\n              class=\"small\"\n              *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\n            class=\"small\"\n            *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\n            class=\"small\"\n            *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\n      title=\"Status\"\n      class=\"col-state\">\n    <ng-template\n        fs-list-cell\n        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\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Date\"\n      name=\"created_date\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\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}.attachment-icon{vertical-align:bottom}fs-message-info{margin-bottom:10px;display:block}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i12.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i1$1.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "component", type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { kind: "pipe", type: i10$1.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: QueuesComponent, isStandalone: true, selector: "fs-app-message-queues", inputs: { query: "query", type: "type", config: "config" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "@if (webHookEnabled === false) {\n  <fs-message-info>\n    <div class=\"fs-row\">\n      <span class=\"fs-flex\">\n        The webhook which provides email delivery confirmations is not enabled.\n      </span>\n      <a\n        (click)=\"enableWebhook()\"\n        mat-raised-button>\n        Enable\n      </a>\n    </div>\n  </fs-message-info>\n}\n<fs-list\n  [config]=\"listConfig\"\n  #list>\n  <fs-list-column\n    title=\"Message\"\n    name=\"subject\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessageQueue) {\n        <a (click)=\"open(row)\">\n          {{ row.emailMessageQueue.subject|truncate:100 }}\n        </a>\n        @if (row.messageQueueAttachmentCount) {\n          <mat-icon\n            class=\"attachment-icon\"\n            [matTooltip]=\"row.messageQueueAttachmentCount + ' Attachment(s)'\">\n            attach_file\n          </mat-icon>\n        }\n      }\n      @if (row.smsMessageQueue) {\n        <a (click)=\"open(row)\">\n          {{ row.smsMessageQueue.body|truncate:100 }}\n        </a>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Recipients\"\n    class=\"col-recipients\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessageQueue) {\n        @if (row.emailMessageQueue.toRecipients.length) {\n          @for (recipient of row.emailMessageQueue.toRecipients; track recipient) {\n            <div\n              class=\"small\"\n              >\n              <app-recipient\n                [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n                [name]=\"recipient\">\n              </app-recipient>\n            </div>\n          }\n        } @else {\n          <app-recipient\n            class=\"small\"\n            [state]=\"MessageQueueState.Failed\"\n            name=\"Unspecified\">\n          </app-recipient>\n        }\n        @for (recipient of row.emailMessageQueue.ccRecipients; track recipient) {\n          <div\n            class=\"small\"\n            >\n            <app-recipient\n              [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n              [name]=\"recipient\">\n            </app-recipient>\n          </div>\n        }\n        @for (recipient of row.emailMessageQueue.bccRecipients; track recipient) {\n          <div\n            class=\"small\"\n            >\n            <app-recipient\n              [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n              [name]=\"recipient\">\n            </app-recipient>\n          </div>\n        }\n      }\n      @if (row.smsMessageQueue) {\n        @if (row.smsMessageQueue.toNumber) {\n          <app-recipient\n            class=\"small\"\n            [state]=\"row.state\"\n            [name]=\"row.smsMessageQueue.toNumber\">\n          </app-recipient>\n        } @else {\n          <app-recipient\n            class=\"small\"\n            [state]=\"MessageQueueState.Failed\"\n            name=\"Unspecified\">\n          </app-recipient>\n        }\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Status\"\n    class=\"col-state\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.scheduled) {\n        Scheduled\n        <div class=\"small\">\n          {{ row.scheduledDate | fsDateFormat: 'date-time' }}\n        </div>\n      } @else {\n        <span [class]=\"'state-' + row.state\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      }\n      <ng-template #state>\n        <span [class]=\"'state-' + row.state\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Date\"\n    name=\"created_date\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", 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}.attachment-icon{vertical-align:bottom}fs-message-info{margin-bottom:10px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: FsMessageModule }, { kind: "component", type: i1$2.FsMessageInfoComponent, selector: "fs-message-info" }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: RecipientComponent, selector: "app-recipient", inputs: ["name", "state"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i6$1.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueuesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-app-message-queues', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"webHookEnabled === false\">\n  <fs-message-info>\n    <div class=\"fs-row\">\n      <span class=\"fs-flex\">\n        The webhook which provides email delivery confirmations is not enabled.\n      </span>\n      <a\n          (click)=\"enableWebhook()\"\n          mat-raised-button>\n        Enable\n      </a>\n    </div>\n  </fs-message-info>\n</ng-container>\n<fs-list\n    [config]=\"listConfig\"\n    #list>\n  <fs-list-column\n      title=\"Message\"\n      name=\"subject\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <a (click)=\"open(row)\">\n          {{ row.emailMessageQueue.subject|truncate:100 }}\n        </a>\n        <ng-container *ngIf=\"row.messageQueueAttachmentCount\">\n          <mat-icon\n              class=\"attachment-icon\"\n              [matTooltip]=\"row.messageQueueAttachmentCount + ' Attachment(s)'\">\n            attach_file\n          </mat-icon>\n        </ng-container>\n      </ng-container>\n      <ng-container *ngIf=\"row.smsMessageQueue\">\n        <a (click)=\"open(row)\">\n          {{ row.smsMessageQueue.body|truncate:100 }}\n        </a>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Recipients\"\n      class=\"col-recipients\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <ng-container *ngIf=\"row.emailMessageQueue\">\n        <ng-container *ngIf=\"row.emailMessageQueue.toRecipients.length; else unspecified\">\n          <div\n              class=\"small\"\n              *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\n            class=\"small\"\n            *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\n            class=\"small\"\n            *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\n      title=\"Status\"\n      class=\"col-state\">\n    <ng-template\n        fs-list-cell\n        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\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Date\"\n      name=\"created_date\"\n      [sortable]=\"true\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\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}.attachment-icon{vertical-align:bottom}fs-message-info{margin-bottom:10px;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: FsMessageQueueService }, { type: i0.ChangeDetectorRef }, { type: i2$2.FsStore }], propDecorators: { list: [{
+            args: [{ selector: 'fs-app-message-queues', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsMessageModule,
+                        MatAnchor,
+                        FsFormModule,
+                        FsListModule,
+                        MatIcon,
+                        MatTooltip,
+                        RecipientComponent,
+                        FsDateModule,
+                        TruncatePipe,
+                    ], template: "@if (webHookEnabled === false) {\n  <fs-message-info>\n    <div class=\"fs-row\">\n      <span class=\"fs-flex\">\n        The webhook which provides email delivery confirmations is not enabled.\n      </span>\n      <a\n        (click)=\"enableWebhook()\"\n        mat-raised-button>\n        Enable\n      </a>\n    </div>\n  </fs-message-info>\n}\n<fs-list\n  [config]=\"listConfig\"\n  #list>\n  <fs-list-column\n    title=\"Message\"\n    name=\"subject\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessageQueue) {\n        <a (click)=\"open(row)\">\n          {{ row.emailMessageQueue.subject|truncate:100 }}\n        </a>\n        @if (row.messageQueueAttachmentCount) {\n          <mat-icon\n            class=\"attachment-icon\"\n            [matTooltip]=\"row.messageQueueAttachmentCount + ' Attachment(s)'\">\n            attach_file\n          </mat-icon>\n        }\n      }\n      @if (row.smsMessageQueue) {\n        <a (click)=\"open(row)\">\n          {{ row.smsMessageQueue.body|truncate:100 }}\n        </a>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Recipients\"\n    class=\"col-recipients\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.emailMessageQueue) {\n        @if (row.emailMessageQueue.toRecipients.length) {\n          @for (recipient of row.emailMessageQueue.toRecipients; track recipient) {\n            <div\n              class=\"small\"\n              >\n              <app-recipient\n                [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n                [name]=\"recipient\">\n              </app-recipient>\n            </div>\n          }\n        } @else {\n          <app-recipient\n            class=\"small\"\n            [state]=\"MessageQueueState.Failed\"\n            name=\"Unspecified\">\n          </app-recipient>\n        }\n        @for (recipient of row.emailMessageQueue.ccRecipients; track recipient) {\n          <div\n            class=\"small\"\n            >\n            <app-recipient\n              [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n              [name]=\"recipient\">\n            </app-recipient>\n          </div>\n        }\n        @for (recipient of row.emailMessageQueue.bccRecipients; track recipient) {\n          <div\n            class=\"small\"\n            >\n            <app-recipient\n              [state]=\"row.messageQueueRecipients[recipient] || row.state\"\n              [name]=\"recipient\">\n            </app-recipient>\n          </div>\n        }\n      }\n      @if (row.smsMessageQueue) {\n        @if (row.smsMessageQueue.toNumber) {\n          <app-recipient\n            class=\"small\"\n            [state]=\"row.state\"\n            [name]=\"row.smsMessageQueue.toNumber\">\n          </app-recipient>\n        } @else {\n          <app-recipient\n            class=\"small\"\n            [state]=\"MessageQueueState.Failed\"\n            name=\"Unspecified\">\n          </app-recipient>\n        }\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Status\"\n    class=\"col-state\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.scheduled) {\n        Scheduled\n        <div class=\"small\">\n          {{ row.scheduledDate | fsDateFormat: 'date-time' }}\n        </div>\n      } @else {\n        <span [class]=\"'state-' + row.state\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      }\n      <ng-template #state>\n        <span [class]=\"'state-' + row.state\">\n          {{ messageQueueStates[row.state] }}\n        </span>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Date\"\n    name=\"created_date\"\n    [sortable]=\"true\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.createdDate | fsDateFormat: 'date-time-yeardiff' }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", 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}.attachment-icon{vertical-align:bottom}fs-message-info{margin-bottom:10px;display:block}\n"] }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }], query: [{
@@ -1030,20 +894,19 @@ class LinkifyPipe {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, name: "linkify" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, isStandalone: true, name: "linkify" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'linkify' }]
+            args: [{
+                    name: 'linkify',
+                    standalone: true
+                }]
         }] });
 
 class FsAppMessageQueuesModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageQueuesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageQueuesModule, declarations: [QueuesComponent,
-            QueueComponent,
-            LinkifyPipe,
-            TruncatePipe,
-            RecipientComponent], imports: [RouterModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageQueuesModule, imports: [RouterModule,
             FormsModule,
             CommonModule,
             MatTooltipModule,
@@ -1056,11 +919,14 @@ class FsAppMessageQueuesModule {
             FsLabelModule,
             FsDateModule,
             FsSkeletonModule,
-            FsAppMessagesModule,
             FsFormModule,
-            FsPromptInputModule,
             FsIFrameModule,
-            FsMessageModule], exports: [QueuesComponent,
+            FsMessageModule,
+            QueuesComponent,
+            QueueComponent,
+            LinkifyPipe,
+            TruncatePipe,
+            RecipientComponent], exports: [QueuesComponent,
             QueueComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageQueuesModule, providers: [
             FsMessageQueueService,
@@ -1077,11 +943,12 @@ class FsAppMessageQueuesModule {
             FsLabelModule,
             FsDateModule,
             FsSkeletonModule,
-            FsAppMessagesModule,
             FsFormModule,
-            FsPromptInputModule,
             FsIFrameModule,
-            FsMessageModule] });
+            FsMessageModule,
+            QueuesComponent,
+            QueueComponent,
+            RecipientComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageQueuesModule, decorators: [{
             type: NgModule,
@@ -1100,13 +967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsLabelModule,
                         FsDateModule,
                         FsSkeletonModule,
-                        FsAppMessagesModule,
                         FsFormModule,
-                        FsPromptInputModule,
                         FsIFrameModule,
                         FsMessageModule,
-                    ],
-                    declarations: [
                         QueuesComponent,
                         QueueComponent,
                         LinkifyPipe,
@@ -1124,11 +987,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class TemplateComponent {
-    _data;
-    _config;
-    _dialogRef;
-    _message;
-    _dialog;
     messageTemplate;
     htmlEditorconfig = {
         language: 'html',
@@ -1140,17 +998,15 @@ class TemplateComponent {
         insertSpaces: true,
         tabSize: 2,
     };
-    constructor(_data, _config, _dialogRef, _message, _dialog) {
-        this._data = _data;
-        this._config = _config;
-        this._dialogRef = _dialogRef;
-        this._message = _message;
-        this._dialog = _dialog;
-    }
+    _data = inject(MAT_DIALOG_DATA);
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
+    _dialog = inject(MatDialog);
     ngOnInit() {
         if (this._data.messageTemplate.id) {
             this._config.loadMessageTemplate(this._data.messageTemplate)
-                .subscribe(messageTemplate => {
+                .subscribe((messageTemplate) => {
                 this.messageTemplate = messageTemplate;
             });
         }
@@ -1176,31 +1032,21 @@ class TemplateComponent {
             }
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplateComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialogRef }, { token: i1$1.FsMessage }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TemplateComponent, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"false\">\n  <fs-dialog *ngIf=\"messageTemplate\">\n    <div mat-dialog-title>Message Template</div>\n    <mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field class=\"name\">\n          <mat-label>Name</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"messageTemplate.name\"\n            required\n            name=\"name\">\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      </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"], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i6.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i6.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i13.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i13.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "directive", type: i11$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "directive", type: i12.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"], exportAs: ["fsForm"] }, { kind: "directive", type: i12.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i12.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i12.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i16.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: TemplateComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"false\">\n  @if (messageTemplate) {\n    <fs-dialog>\n      <div mat-dialog-title>\n        Message Template\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-column\">\n          <mat-form-field class=\"name\">\n            <mat-label>\n              Name\n            </mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"messageTemplate.name\"\n              required\n              name=\"name\">\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        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            mat-button\n            type=\"submit\"\n            color=\"primary\"\n            name=\"close\">\n          Save\n        </button>\n        <button\n            mat-button\n            type=\"submit\"\n            name=\"save-close\">\n          Save & Close\n        </button>\n        <button\n            mat-button\n            (click)=\"openPreview()\"\n            type=\"button\">\n          Preview\n        </button>\n        <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n          Cancel\n        </button>\n      </mat-dialog-actions>\n    </fs-dialog>\n  }\n</form>", styles: [".name{width:100%}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"], exportAs: ["fsForm"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i6.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i6.FsLabelMessageComponent, selector: "fs-label-message" }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i7.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplateComponent, decorators: [{
             type: Component,
-            args: [{ 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      <div class=\"fs-column\">\n        <mat-form-field class=\"name\">\n          <mat-label>Name</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"messageTemplate.name\"\n            required\n            name=\"name\">\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      </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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialogRef }, { type: i1$1.FsMessage }, { type: i1.MatDialog }] });
+            args: [{ standalone: true, imports: [FsSkeletonModule, FormsModule, FsFormModule, FsDialogModule, MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, MatTabGroup, MatTab, MatTabContent, FsLabelModule, FsTextEditorModule, MatDialogActions, MatButton, MatDialogClose], template: "<form\n    fsForm\n    [submit]=\"save\"\n    #form=\"ngForm\"\n    *fsSkeleton=\"messageTemplate\"\n    [confirmTabs]=\"false\">\n  @if (messageTemplate) {\n    <fs-dialog>\n      <div mat-dialog-title>\n        Message Template\n      </div>\n      <mat-dialog-content>\n        <div class=\"fs-column\">\n          <mat-form-field class=\"name\">\n            <mat-label>\n              Name\n            </mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"messageTemplate.name\"\n              required\n              name=\"name\">\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        </div>\n      </mat-dialog-content>\n      <mat-dialog-actions>\n        <button\n            mat-button\n            type=\"submit\"\n            color=\"primary\"\n            name=\"close\">\n          Save\n        </button>\n        <button\n            mat-button\n            type=\"submit\"\n            name=\"save-close\">\n          Save & Close\n        </button>\n        <button\n            mat-button\n            (click)=\"openPreview()\"\n            type=\"button\">\n          Preview\n        </button>\n        <button\n            mat-button\n            [mat-dialog-close]=\"null\"\n            type=\"button\">\n          Cancel\n        </button>\n      </mat-dialog-actions>\n    </fs-dialog>\n  }\n</form>", styles: [".name{width:100%}:host ::ng-deep .mat-tab-body-content,:host ::ng-deep .mat-tab-body{overflow:visible}\n"] }]
+        }] });
 
 class TemplatesComponent {
-    _config;
-    _dialog;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _dialog = inject(MatDialog);
     list = null;
     config = null;
     messageQueueStates = [];
     _destroy$ = new Subject();
-    constructor(_config, _dialog) {
-        this._config = _config;
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         this.config = {
             actions: [
@@ -1249,101 +1095,22 @@ class TemplatesComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplatesComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TemplatesComponent, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplatesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TemplatesComponent, isStandalone: true, selector: "fs-app-message-templates", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TemplatesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-app-message-templates', template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1.MatDialog }], propDecorators: { list: [{
+            args: [{ selector: 'fs-app-message-templates', standalone: true, imports: [FsListModule], template: "<fs-list [config]=\"config\">\n  <fs-list-column title=\"Name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }] } });
 
-class FsAppMessageTemplatesModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageTemplatesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageTemplatesModule, declarations: [TemplatesComponent,
-            TemplateComponent], imports: [RouterModule,
-            CommonModule,
-            FormsModule,
-            MatTooltipModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FsListModule,
-            FsDialogModule,
-            FsLabelModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsAppMessagePreviewModule], exports: [TemplatesComponent,
-            TemplateComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageTemplatesModule, imports: [RouterModule,
-            CommonModule,
-            FormsModule,
-            MatTooltipModule,
-            MatDialogModule,
-            MatButtonModule,
-            MatTabsModule,
-            MatFormFieldModule,
-            MatFormFieldModule,
-            MatInputModule,
-            FsListModule,
-            FsDialogModule,
-            FsLabelModule,
-            FsSkeletonModule,
-            FsFormModule,
-            FsTextEditorModule,
-            FsAppMessagePreviewModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageTemplatesModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
-                        MatTooltipModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        MatFormFieldModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        FsListModule,
-                        FsDialogModule,
-                        FsLabelModule,
-                        FsSkeletonModule,
-                        FsFormModule,
-                        FsTextEditorModule,
-                        FsAppMessagePreviewModule,
-                    ],
-                    declarations: [
-                        TemplatesComponent,
-                        TemplateComponent,
-                    ],
-                    exports: [
-                        TemplatesComponent,
-                        TemplateComponent,
-                    ],
-                }]
-        }] });
-
 class WebhooksComponent {
-    _config;
-    _message;
+    _config = inject(FS_APP_MESSAGE_CONFIG);
+    _message = inject(FsMessage);
     list;
     listConfig;
-    constructor(_config, _message) {
-        this._config = _config;
-        this._message = _message;
-    }
     ngOnInit() {
         this.listConfig = {
             paging: false,
@@ -1379,46 +1146,20 @@ class WebhooksComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WebhooksComponent, deps: [{ token: FS_APP_MESSAGE_CONFIG }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WebhooksComponent, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\r\n  <fs-list-column title=\"URL\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title=\"Created\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>", dependencies: [{ kind: "component", type: i2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i10$1.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WebhooksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WebhooksComponent, isStandalone: true, selector: "fs-app-message-webhooks", viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\r\n  <fs-list-column title=\"URL\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title=\"Created\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>", dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i6$1.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WebhooksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-app-message-webhooks', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"listConfig\">\r\n  <fs-list-column title=\"URL\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title=\"Created\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_APP_MESSAGE_CONFIG]
-                }] }, { type: i1$1.FsMessage }], propDecorators: { list: [{
+            args: [{ selector: 'fs-app-message-webhooks', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsListModule, FsDateModule], template: "<fs-list [config]=\"listConfig\">\r\n  <fs-list-column title=\"URL\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.url}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column title=\"Created\">\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.createDate | fsDate}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>" }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }] } });
 
-class FsAppMessageWebhooksModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageWebhooksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageWebhooksModule, declarations: [WebhooksComponent], imports: [FsListModule,
-            FsDateModule], exports: [WebhooksComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageWebhooksModule, imports: [FsListModule,
-            FsDateModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsAppMessageWebhooksModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        FsListModule,
-                        FsDateModule,
-                    ],
-                    declarations: [
-                        WebhooksComponent,
-                    ],
-                    exports: [
-                        WebhooksComponent,
-                    ],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FS_APP_MESSAGE_CONFIG, FsAppMessageModule, FsAppMessageQueuesModule, FsAppMessageTemplatesModule, FsAppMessageWebhooksModule, FsAppMessagesModule, FsMessageQueueService, MessageComponent, MessageQueueType, MessagesComponent, QueueComponent, QueuesComponent, TemplateComponent, TemplatesComponent, WebhooksComponent };
+export { FS_APP_MESSAGE_CONFIG, FsAppMessageModule, FsAppMessageQueuesModule, FsMessageQueueService, MessageComponent, MessageQueueType, MessagesComponent, QueueComponent, QueuesComponent, TemplateComponent, TemplatesComponent, WebhooksComponent };
 //# sourceMappingURL=firestitch-app-message.mjs.map