@firestitch/content-widget 18.0.0 → 18.0.1

package/fesm2022/firestitch-content-widget.mjs

@@ -1,47 +1,39 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, Input, ViewChild, NgModule, Directive, InjectionToken, TemplateRef, ContentChild, ChangeDetectionStrategy, Injectable } from '@angular/core';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i7 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
+import { inject, Component, Input, ViewChild, NgModule, Directive, InjectionToken, ChangeDetectorRef, TemplateRef, ContentChild, ChangeDetectionStrategy, Injectable } from '@angular/core';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { MatButton, MatButtonModule } from '@angular/material/button';
+import { MatTabGroup, MatTab, MatTabContent, MatTabsModule } from '@angular/material/tabs';
 import * as i3 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i2 from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2$1 from '@firestitch/list';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatFormField, MatFormFieldModule } from '@angular/material/form-field';
+import * as i1$1 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
-import * as i3$1 from '@firestitch/date';
+import * as i2$1 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
-import * as i10 from '@firestitch/dialog';
+import * as i4 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i8 from '@firestitch/form';
+import * as i2 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i9 from '@firestitch/html-editor';
-import { FsHtmlEditorModule, FsHtmlRendererModule } from '@firestitch/html-editor';
-import * as i11 from '@firestitch/text-editor';
+import * as i6 from '@firestitch/html-editor';
+import { FsHtmlEditorModule } from '@firestitch/html-editor';
+import * as i5 from '@firestitch/text-editor';
 import { FsTextEditorModule } from '@firestitch/text-editor';
-import * as i1 from '@firestitch/message';
+import { FsMessage } from '@firestitch/message';
 import { tap, map, takeUntil } from 'rxjs/operators';
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { ItemType } from '@firestitch/filter';
 import { Subject } from 'rxjs';
-import * as i1$1 from '@angular/router';
+import { Router } from '@angular/router';
 
 let FsContentWidgetComponent$1 = class FsContentWidgetComponent {
-    _message;
-    _data;
+    _message = inject(FsMessage);
+    _data = inject(MAT_DIALOG_DATA);
     contentWidget;
     htmlEditorConfig;
     _saveContentWidget;
-    constructor(_message, _data) {
-        this._message = _message;
-        this._data = _data;
-    }
     ngOnInit() {
         this._saveContentWidget = this._data.saveContentWidget;
         this.htmlEditorConfig = {
@@ -56,28 +48,39 @@ let FsContentWidgetComponent$1 = class FsContentWidgetComponent {
             this._message.success('Saved Changes');
         }));
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetComponent, deps: [{ token: i1.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetComponent, selector: "ng-component", ngImport: i0, template: "\n<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>\n      Content Widget\n      <div class=\"subtitle\">{{contentWidget.name}}</div>\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group>\n        <mat-tab label=\"HTML\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"{ language: 'html', tabSize: 2 }\"\n              name=\"html\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Rich Text\">\n          <ng-template matTabContent>\n            <fs-html-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"htmlEditorConfig\"\n              name=\"content\">\n            </fs-html-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Styles\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.styles\"\n              [config]=\"{ language: 'scss', tabSize: 2 }\"\n              name=\"styles\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Settings\">\n          <mat-form-field>\n            <input\n              matInput\n              placeholder=\"Name\"\n              [(ngModel)]=\"contentWidget.name\"\n              name=\"name\"\n              [required]=\"true\">\n          </mat-form-field>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\">\n        Save\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</form>\n", styles: ["mat-form-field{width:100%}fs-html-editor{min-height:400px;display:block;overflow:hidden}.subtitle{font-size:60%;line-height:normal}:host ::ng-deep .mat-tab-body-content{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i7.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i7.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: "directive", type: i8.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: i8.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i8.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: i8.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: i9.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "component", type: i10.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: i11.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: FsContentWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "\n<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>\n      Content Widget\n      <div class=\"subtitle\">{{contentWidget.name}}</div>\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group>\n        <mat-tab label=\"HTML\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"{ language: 'html', tabSize: 2 }\"\n              name=\"html\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Rich Text\">\n          <ng-template matTabContent>\n            <fs-html-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"htmlEditorConfig\"\n              name=\"content\">\n            </fs-html-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Styles\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.styles\"\n              [config]=\"{ language: 'scss', tabSize: 2 }\"\n              name=\"styles\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Settings\">\n          <mat-form-field>\n            <input\n              matInput\n              placeholder=\"Name\"\n              [(ngModel)]=\"contentWidget.name\"\n              name=\"name\"\n              [required]=\"true\">\n          </mat-form-field>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\">\n        Save\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</form>\n", styles: ["mat-form-field{width:100%}fs-html-editor{min-height:400px;display:block;overflow:hidden}.subtitle{font-size:60%;line-height:normal}:host ::ng-deep .mat-tab-body-content{overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2.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: i2.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "directive", type: i2.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: i2.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: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { 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: FsTextEditorModule }, { kind: "component", type: i5.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FsHtmlEditorModule }, { kind: "component", type: i6.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "disabled"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetComponent$1, decorators: [{
             type: Component,
-            args: [{ template: "\n<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>\n      Content Widget\n      <div class=\"subtitle\">{{contentWidget.name}}</div>\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group>\n        <mat-tab label=\"HTML\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"{ language: 'html', tabSize: 2 }\"\n              name=\"html\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Rich Text\">\n          <ng-template matTabContent>\n            <fs-html-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"htmlEditorConfig\"\n              name=\"content\">\n            </fs-html-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Styles\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.styles\"\n              [config]=\"{ language: 'scss', tabSize: 2 }\"\n              name=\"styles\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Settings\">\n          <mat-form-field>\n            <input\n              matInput\n              placeholder=\"Name\"\n              [(ngModel)]=\"contentWidget.name\"\n              name=\"name\"\n              [required]=\"true\">\n          </mat-form-field>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\">\n        Save\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</form>\n", styles: ["mat-form-field{width:100%}fs-html-editor{min-height:400px;display:block;overflow:hidden}.subtitle{font-size:60%;line-height:normal}:host ::ng-deep .mat-tab-body-content{overflow:visible}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FsMessage }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ standalone: true, imports: [
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatTabGroup,
+                        MatTab,
+                        MatTabContent,
+                        FsTextEditorModule,
+                        FsHtmlEditorModule,
+                        MatFormField,
+                        MatInput,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "\n<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <div mat-dialog-title>\n      Content Widget\n      <div class=\"subtitle\">{{contentWidget.name}}</div>\n    </div>\n    <mat-dialog-content>\n      <mat-tab-group>\n        <mat-tab label=\"HTML\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"{ language: 'html', tabSize: 2 }\"\n              name=\"html\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Rich Text\">\n          <ng-template matTabContent>\n            <fs-html-editor\n              [(ngModel)]=\"contentWidget.content\"\n              [config]=\"htmlEditorConfig\"\n              name=\"content\">\n            </fs-html-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Styles\">\n          <ng-template matTabContent>\n            <fs-text-editor\n              [(ngModel)]=\"contentWidget.styles\"\n              [config]=\"{ language: 'scss', tabSize: 2 }\"\n              name=\"styles\">\n            </fs-text-editor>\n          </ng-template>\n        </mat-tab>\n        <mat-tab label=\"Settings\">\n          <mat-form-field>\n            <input\n              matInput\n              placeholder=\"Name\"\n              [(ngModel)]=\"contentWidget.name\"\n              name=\"name\"\n              [required]=\"true\">\n          </mat-form-field>\n        </mat-tab>\n      </mat-tab-group>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\">\n        Save\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</form>\n", styles: ["mat-form-field{width:100%}fs-html-editor{min-height:400px;display:block;overflow:hidden}.subtitle{font-size:60%;line-height:normal}:host ::ng-deep .mat-tab-body-content{overflow:visible}\n"] }]
+        }] });
 
 class FsContentWidgetsComponent {
-    _dialog;
+    _dialog = inject(MatDialog);
     fetchContentWidgets;
     saveContentWidget;
     htmlEditorConfig;
     list;
     config;
     _destroy$ = new Subject();
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         this.config = {
             paging: false,
@@ -113,13 +116,13 @@ class FsContentWidgetsComponent {
             this.list.reload();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsComponent, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetsComponent, selector: "fs-content-widgets", inputs: { fetchContentWidgets: "fetchContentWidgets", saveContentWidget: "saveContentWidget", htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column class=\"name\">\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Preview</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"preview-container\">\n        <div class=\"preview-content\">\n          <div [innerHTML]=\"row.content\"></div>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"modified\">\n    <ng-template fs-list-header>Modified</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.modifiedDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"], dependencies: [{ kind: "component", type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i2$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetsComponent, isStandalone: true, selector: "fs-content-widgets", inputs: { fetchContentWidgets: "fetchContentWidgets", saveContentWidget: "saveContentWidget", htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column class=\"name\">\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Preview</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"preview-container\">\n        <div class=\"preview-content\">\n          <div [innerHTML]=\"row.content\"></div>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"modified\">\n    <ng-template fs-list-header>Modified</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.modifiedDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i2$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-content-widgets', template: "<fs-list [config]=\"config\">\n  <fs-list-column class=\"name\">\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Preview</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"preview-container\">\n        <div class=\"preview-content\">\n          <div [innerHTML]=\"row.content\"></div>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"modified\">\n    <ng-template fs-list-header>Modified</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.modifiedDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"] }]
-        }], ctorParameters: () => [{ type: i3.MatDialog }], propDecorators: { fetchContentWidgets: [{
+            args: [{ selector: 'fs-content-widgets', standalone: true, imports: [FsListModule, FsDateModule], template: "<fs-list [config]=\"config\">\n  <fs-list-column class=\"name\">\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Preview</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"preview-container\">\n        <div class=\"preview-content\">\n          <div [innerHTML]=\"row.content\"></div>\n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"modified\">\n    <ng-template fs-list-header>Modified</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.modifiedDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"] }]
+        }], propDecorators: { fetchContentWidgets: [{
                 type: Input
             }], saveContentWidget: [{
                 type: Input
@@ -137,8 +140,7 @@ class FsContentWidgetsModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsModule, declarations: [FsContentWidgetsComponent,
-            FsContentWidgetComponent$1], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsModule, imports: [CommonModule,
             FormsModule,
             MatDialogModule,
             MatInputModule,
@@ -150,7 +152,9 @@ class FsContentWidgetsModule {
             FsFormModule,
             FsHtmlEditorModule,
             FsDialogModule,
-            FsTextEditorModule], exports: [FsContentWidgetsComponent] });
+            FsTextEditorModule,
+            FsContentWidgetsComponent,
+            FsContentWidgetComponent$1], exports: [FsContentWidgetsComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsModule, imports: [CommonModule,
             FormsModule,
             MatDialogModule,
@@ -163,7 +167,9 @@ class FsContentWidgetsModule {
             FsFormModule,
             FsHtmlEditorModule,
             FsDialogModule,
-            FsTextEditorModule] });
+            FsTextEditorModule,
+            FsContentWidgetsComponent,
+            FsContentWidgetComponent$1] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetsModule, decorators: [{
             type: NgModule,
@@ -182,47 +188,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsHtmlEditorModule,
                         FsDialogModule,
                         FsTextEditorModule,
-                    ],
-                    exports: [
                         FsContentWidgetsComponent,
+                        FsContentWidgetComponent$1,
                     ],
-                    declarations: [
+                    exports: [
                         FsContentWidgetsComponent,
-                        FsContentWidgetComponent$1,
                     ],
                 }]
         }] });
 
 class FsContentWidgetContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetContentDirective, selector: "[fsContentWidgetContent]", ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetContentDirective, isStandalone: true, selector: "[fsContentWidgetContent]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fsContentWidgetContent]',
+                    standalone: true,
                 }]
         }] });
 
 const FS_CONTENT_WIDGET_CONFIG = new InjectionToken('fs-content-widget-config');
 
 class FsContentWidgetRendererComponent {
-    _router;
-    _el;
     content;
-    destroy$ = new Subject();
-    constructor(_router, _el) {
-        this._router = _router;
-        this._el = _el;
+    containerRef;
+    _router = inject(Router);
+    _addedScripts = [];
+    ngOnChanges(changes) {
+        if (changes.content) {
+            this._renderContent();
+        }
     }
-    ngAfterViewChecked() {
-        this.registerHrefs();
+    ngOnDestroy() {
+        this._cleanup();
     }
-    get el() {
-        return this._el.nativeElement;
+    _renderContent() {
+        this._cleanup();
+        const container = this.containerRef.nativeElement;
+        if (!this.content) {
+            container.innerHTML = '';
+            return;
+        }
+        const temp = document.createElement('div');
+        temp.innerHTML = this.content;
+        const scripts = Array.from(temp.querySelectorAll('script'));
+        scripts.forEach((script) => script.remove());
+        container.innerHTML = temp.innerHTML;
+        scripts.forEach((original) => {
+            const script = document.createElement('script');
+            Array.from(original.attributes).forEach((attr) => {
+                script.setAttribute(attr.name, attr.value);
+            });
+            if (original.textContent) {
+                script.textContent = original.textContent;
+            }
+            container.appendChild(script);
+            this._addedScripts.push(script);
+        });
+        this._registerHrefs(container);
     }
-    registerHrefs() {
-        Array.from(this.el.querySelectorAll('a[href]'))
+    _registerHrefs(container) {
+        Array.from(container.querySelectorAll('a[href]'))
             .filter((el) => {
             return el.getAttribute('href').match(/^\//);
         })
@@ -236,31 +264,30 @@ class FsContentWidgetRendererComponent {
             });
         });
     }
-    ngOnDestroy() {
-        this.destroy$.next(null);
-        this.destroy$.complete();
+    _cleanup() {
+        this._addedScripts.forEach((script) => script.remove());
+        this._addedScripts = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetRendererComponent, deps: [{ token: i1$1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetRendererComponent, selector: "fs-content-widget-renderer", inputs: { content: "content" }, ngImport: i0, template: "<fs-html-renderer *ngIf=\"content\" [html]=\"content\"></fs-html-renderer>", styles: [":host ::ng-deep img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.FsHtmlRendererComponent, selector: "fs-html-renderer", inputs: ["html"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetRendererComponent, isStandalone: true, selector: "fs-content-widget-renderer", inputs: { content: "content" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #container></div>\n", styles: [":host ::ng-deep img{max-width:100%}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-content-widget-renderer', template: "<fs-html-renderer *ngIf=\"content\" [html]=\"content\"></fs-html-renderer>", styles: [":host ::ng-deep img{max-width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i0.ElementRef }], propDecorators: { content: [{
+            args: [{ selector: 'fs-content-widget-renderer', standalone: true, template: "<div #container></div>\n", styles: [":host ::ng-deep img{max-width:100%}\n"] }]
+        }], propDecorators: { content: [{
                 type: Input
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { static: true }]
             }] } });
 
 class FsContentWidgetComponent {
-    config;
-    _cdRef;
+    config = inject(FS_CONTENT_WIDGET_CONFIG);
+    _cdRef = inject(ChangeDetectorRef);
     contentWidgetContent;
     content;
     destroy$ = new Subject();
     tag;
-    constructor(config, _cdRef) {
-        this.config = config;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         this.config.fetchContentWidget(this.tag)
             .pipe(takeUntil(this.destroy$))
@@ -273,16 +300,13 @@ class FsContentWidgetComponent {
         this.destroy$.next(null);
         this.destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetComponent, deps: [{ token: FS_CONTENT_WIDGET_CONFIG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetComponent, selector: "fs-content-widget", inputs: { tag: "tag" }, queries: [{ propertyName: "contentWidgetContent", first: true, predicate: FsContentWidgetContentDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"contentWidgetContent; else renderer\">\n    <ng-container \n      [ngTemplateOutlet]=\"contentWidgetContent\" \n      [ngTemplateOutletContext]=\"{ content: renderer }\">\n    </ng-container>\n  </ng-container>\n  <ng-template #renderer>\n    <fs-content-widget-renderer     \n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  </ng-template>\n</ng-container>", styles: [":host ::ng-deep img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsContentWidgetRendererComponent, selector: "fs-content-widget-renderer", inputs: ["content"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentWidgetComponent, isStandalone: true, selector: "fs-content-widget", inputs: { tag: "tag" }, queries: [{ propertyName: "contentWidgetContent", first: true, predicate: FsContentWidgetContentDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "@if (content) {\n  @if (contentWidgetContent) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentWidgetContent\"\n      [ngTemplateOutletContext]=\"{ content: renderer }\">\n    </ng-container>\n  } @else {\n    <fs-content-widget-renderer\n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  }\n  <ng-template #renderer>\n    <fs-content-widget-renderer\n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  </ng-template>\n}", styles: [":host ::ng-deep img{max-width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FsContentWidgetRendererComponent, selector: "fs-content-widget-renderer", inputs: ["content"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-content-widget', template: "<ng-container *ngIf=\"content\">\n  <ng-container *ngIf=\"contentWidgetContent; else renderer\">\n    <ng-container \n      [ngTemplateOutlet]=\"contentWidgetContent\" \n      [ngTemplateOutletContext]=\"{ content: renderer }\">\n    </ng-container>\n  </ng-container>\n  <ng-template #renderer>\n    <fs-content-widget-renderer     \n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  </ng-template>\n</ng-container>", styles: [":host ::ng-deep img{max-width:100%}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_CONTENT_WIDGET_CONFIG]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { contentWidgetContent: [{
+            args: [{ selector: 'fs-content-widget', standalone: true, imports: [NgTemplateOutlet, FsContentWidgetRendererComponent], template: "@if (content) {\n  @if (contentWidgetContent) {\n    <ng-container\n      [ngTemplateOutlet]=\"contentWidgetContent\"\n      [ngTemplateOutletContext]=\"{ content: renderer }\">\n    </ng-container>\n  } @else {\n    <fs-content-widget-renderer\n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  }\n  <ng-template #renderer>\n    <fs-content-widget-renderer\n      [content]=\"content\">\n    </fs-content-widget-renderer>\n  </ng-template>\n}", styles: [":host ::ng-deep img{max-width:100%}\n"] }]
+        }], propDecorators: { contentWidgetContent: [{
                 type: ContentChild,
                 args: [FsContentWidgetContentDirective, { read: TemplateRef }]
             }], tag: [{
@@ -290,24 +314,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsContentWidgetDialogComponent {
-    _data;
+    _data = inject(MAT_DIALOG_DATA);
     title;
     tag;
-    constructor(_data) {
-        this._data = _data;
+    constructor() {
+        const _data = this._data;
         this.title = _data.title;
         this.tag = _data.tag;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsContentWidgetDialogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <ng-container *ngIf=\"title\">\n    <div mat-dialog-title>{{title}}</div>\n  </ng-container>\n  <mat-dialog-content>\n    <fs-content-widget [tag]=\"tag\"></fs-content-widget>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button \n        mat-button \n        color=\"primary\" \n        type=\"button\" \n        [mat-dialog-close]=\"null\">\n      Close \n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i10.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: FsContentWidgetComponent, selector: "fs-content-widget", inputs: ["tag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentWidgetDialogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  @if (title) {\n    <div mat-dialog-title>{{title}}</div>\n  }\n  <mat-dialog-content>\n    <fs-content-widget [tag]=\"tag\"></fs-content-widget>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i4.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: FsContentWidgetComponent, selector: "fs-content-widget", inputs: ["tag"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetDialogComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <ng-container *ngIf=\"title\">\n    <div mat-dialog-title>{{title}}</div>\n  </ng-container>\n  <mat-dialog-content>\n    <fs-content-widget [tag]=\"tag\"></fs-content-widget>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button \n        mat-button \n        color=\"primary\" \n        type=\"button\" \n        [mat-dialog-close]=\"null\">\n      Close \n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsContentWidgetComponent,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<fs-dialog>\n  @if (title) {\n    <div mat-dialog-title>{{title}}</div>\n  }\n  <mat-dialog-content>\n    <fs-content-widget [tag]=\"tag\"></fs-content-widget>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n      mat-button\n      color=\"primary\"\n      type=\"button\"\n      [mat-dialog-close]=\"null\">\n      Close\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n" }]
+        }], ctorParameters: () => [] });
 
 class FsContentWidgetModule {
     static forRoot() {
@@ -316,22 +346,22 @@ class FsContentWidgetModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetModule, declarations: [FsContentWidgetRendererComponent,
-            FsContentWidgetComponent,
-            FsContentWidgetDialogComponent,
-            FsContentWidgetContentDirective], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetModule, imports: [CommonModule,
             MatDialogModule,
             MatButtonModule,
             FsHtmlEditorModule,
             FsDialogModule,
-            FsHtmlRendererModule], exports: [FsContentWidgetComponent,
+            FsContentWidgetRendererComponent,
+            FsContentWidgetComponent,
+            FsContentWidgetDialogComponent,
+            FsContentWidgetContentDirective], exports: [FsContentWidgetComponent,
             FsContentWidgetContentDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetModule, imports: [CommonModule,
             MatDialogModule,
             MatButtonModule,
             FsHtmlEditorModule,
             FsDialogModule,
-            FsHtmlRendererModule] });
+            FsContentWidgetDialogComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidgetModule, decorators: [{
             type: NgModule,
@@ -342,26 +372,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatButtonModule,
                         FsHtmlEditorModule,
                         FsDialogModule,
-                        FsHtmlRendererModule,
-                    ],
-                    exports: [
+                        FsContentWidgetRendererComponent,
                         FsContentWidgetComponent,
+                        FsContentWidgetDialogComponent,
                         FsContentWidgetContentDirective,
                     ],
-                    declarations: [
-                        FsContentWidgetRendererComponent,
+                    exports: [
                         FsContentWidgetComponent,
-                        FsContentWidgetDialogComponent,
                         FsContentWidgetContentDirective,
                     ],
                 }]
         }] });
 
 class FsContentWidget {
-    _dialog;
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
+    _dialog = inject(MatDialog);
     open(tag, title) {
         this._dialog.open(FsContentWidgetDialogComponent, {
             data: {
@@ -370,7 +394,7 @@ class FsContentWidget {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidget, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidget, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidget, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentWidget, decorators: [{
@@ -378,7 +402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i3.MatDialog }] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.