@firestitch/content-widget 14.0.0 → 15.0.0

package/fesm2015/firestitch-content-widget.mjs

@@ -10,9 +10,9 @@ import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4 from '@angular/material/form-field';
+import * as i5 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$1 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
@@ -32,337 +32,337 @@ import { ItemType } from '@firestitch/filter';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@angular/router';
 
-class FsContentWidgetComponent$1 {
-    constructor(_message, _data) {
-        this._message = _message;
-        this._data = _data;
-        this.save = () => {
-            return this._saveContentWidget(this.contentWidget)
-                .pipe(tap((contentWidget) => {
-                this.contentWidget = Object.assign(Object.assign({}, this.contentWidget), contentWidget);
-                this._message.success('Saved Changes');
-            }));
-        };
-    }
-    ngOnInit() {
-        this._saveContentWidget = this._data.saveContentWidget;
-        this.htmlEditorConfig = Object.assign({}, this._data.htmlEditorConfig);
-        this.contentWidget = Object.assign({}, this._data.contentWidget);
-    }
-}
-FsContentWidgetComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetComponent$1, deps: [{ token: i1.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FsContentWidgetComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FsContentWidgetComponent$1, 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.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: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i7.MatTabContent, selector: "[matTabContent]" }, { 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([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],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i9.FsHtmlEditorComponent, selector: "fs-html-editor", inputs: ["config", "hint", "disabled"] }, { kind: "component", type: i10.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i11.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: function () {
-        return [{ type: i1.FsMessage }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
+let FsContentWidgetComponent$1 = class FsContentWidgetComponent {
+    constructor(_message, _data) {
+        this._message = _message;
+        this._data = _data;
+        this.save = () => {
+            return this._saveContentWidget(this.contentWidget)
+                .pipe(tap((contentWidget) => {
+                this.contentWidget = Object.assign(Object.assign({}, this.contentWidget), contentWidget);
+                this._message.success('Saved Changes');
+            }));
+        };
+    }
+    ngOnInit() {
+        this._saveContentWidget = this._data.saveContentWidget;
+        this.htmlEditorConfig = Object.assign({}, this._data.htmlEditorConfig);
+        this.contentWidget = Object.assign({}, this._data.contentWidget);
+    }
+};
+FsContentWidgetComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetComponent$1, deps: [{ token: i1.FsMessage }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FsContentWidgetComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsContentWidgetComponent$1, 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () {
+        return [{ type: i1.FsMessage }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
     } });
 
-class FsContentWidgetsComponent {
-    constructor(_dialog) {
-        this._dialog = _dialog;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.config = {
-            paging: false,
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search',
-                },
-            ],
-            fetch: (query) => {
-                return this.fetchContentWidgets(query)
-                    .pipe(map((data) => ({ data: data.contentWidgets })));
-            },
-        };
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    open(contentWidget) {
-        this._dialog.open(FsContentWidgetComponent$1, {
-            width: '90%',
-            data: {
-                contentWidget,
-                htmlEditorConfig: this.htmlEditorConfig,
-                saveContentWidget: this.saveContentWidget,
-            },
-        })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.list.reload();
-        });
-    }
-}
-FsContentWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetsComponent, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FsContentWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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", "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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: function () { return [{ type: i3.MatDialog }]; }, propDecorators: { fetchContentWidgets: [{
-                type: Input
-            }], saveContentWidget: [{
-                type: Input
-            }], htmlEditorConfig: [{
-                type: Input
-            }], list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
+class FsContentWidgetsComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.config = {
+            paging: false,
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+            ],
+            fetch: (query) => {
+                return this.fetchContentWidgets(query)
+                    .pipe(map((data) => ({ data: data.contentWidgets })));
+            },
+        };
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    open(contentWidget) {
+        this._dialog.open(FsContentWidgetComponent$1, {
+            width: '90%',
+            data: {
+                contentWidget,
+                htmlEditorConfig: this.htmlEditorConfig,
+                saveContentWidget: this.saveContentWidget,
+            },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.list.reload();
+        });
+    }
+}
+FsContentWidgetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetsComponent, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsContentWidgetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i3.MatDialog }]; }, propDecorators: { fetchContentWidgets: [{
+                type: Input
+            }], saveContentWidget: [{
+                type: Input
+            }], htmlEditorConfig: [{
+                type: Input
+            }], list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
             }] } });
 
-class FsContentWidgetsModule {
-    static forRoot() {
-        return {
-            ngModule: FsContentWidgetsModule,
-        };
-    }
-}
-FsContentWidgetsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsContentWidgetsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetsModule, declarations: [FsContentWidgetsComponent,
-        FsContentWidgetComponent$1], imports: [CommonModule,
-        FormsModule,
-        MatDialogModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatTabsModule,
-        FsListModule,
-        FsDateModule,
-        FsFormModule,
-        FsHtmlEditorModule,
-        FsDialogModule,
-        FsTextEditorModule], exports: [FsContentWidgetsComponent] });
-FsContentWidgetsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetsModule, imports: [CommonModule,
-        FormsModule,
-        MatDialogModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatButtonModule,
-        MatTabsModule,
-        FsListModule,
-        FsDateModule,
-        FsFormModule,
-        FsHtmlEditorModule,
-        FsDialogModule,
-        FsTextEditorModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatDialogModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        MatButtonModule,
-                        MatTabsModule,
-                        FsListModule,
-                        FsDateModule,
-                        FsFormModule,
-                        FsHtmlEditorModule,
-                        FsDialogModule,
-                        FsTextEditorModule,
-                    ],
-                    exports: [
-                        FsContentWidgetsComponent,
-                    ],
-                    declarations: [
-                        FsContentWidgetsComponent,
-                        FsContentWidgetComponent$1,
-                    ],
-                }]
+class FsContentWidgetsModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentWidgetsModule,
+        };
+    }
+}
+FsContentWidgetsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentWidgetsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetsModule, declarations: [FsContentWidgetsComponent,
+        FsContentWidgetComponent$1], imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatTabsModule,
+        FsListModule,
+        FsDateModule,
+        FsFormModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsTextEditorModule], exports: [FsContentWidgetsComponent] });
+FsContentWidgetsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetsModule, imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatTabsModule,
+        FsListModule,
+        FsDateModule,
+        FsFormModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsTextEditorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        FsListModule,
+                        FsDateModule,
+                        FsFormModule,
+                        FsHtmlEditorModule,
+                        FsDialogModule,
+                        FsTextEditorModule,
+                    ],
+                    exports: [
+                        FsContentWidgetsComponent,
+                    ],
+                    declarations: [
+                        FsContentWidgetsComponent,
+                        FsContentWidgetComponent$1,
+                    ],
+                }]
         }] });
 
-class FsContentWidgetContentDirective {
-}
-FsContentWidgetContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsContentWidgetContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FsContentWidgetContentDirective, selector: "[fsContentWidgetContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fsContentWidgetContent]',
-                }]
+class FsContentWidgetContentDirective {
+}
+FsContentWidgetContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FsContentWidgetContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FsContentWidgetContentDirective, selector: "[fsContentWidgetContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fsContentWidgetContent]',
+                }]
         }] });
 
 const FS_CONTENT_WIDGET_CONFIG = new InjectionToken('fs-content-widget-config');
 
-class FsContentWidgetRendererComponent {
-    constructor(_router, _el) {
-        this._router = _router;
-        this._el = _el;
-        this.destroy$ = new Subject();
-    }
-    ngAfterViewChecked() {
-        this.registerHrefs();
-    }
-    get el() {
-        return this._el.nativeElement;
-    }
-    registerHrefs() {
-        Array.from(this.el.querySelectorAll('a[href]'))
-            .filter((el) => {
-            return el.getAttribute('href').match(/^\//);
-        })
-            .forEach((el) => {
-            el.addEventListener('click', (event) => {
-                if (!event.shiftKey && !event.ctrlKey) {
-                    event.preventDefault();
-                    const href = el.getAttribute('href');
-                    this._router.navigateByUrl(href);
-                }
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-FsContentWidgetRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetRendererComponent, deps: [{ token: i1$1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FsContentWidgetRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: function () { return [{ type: i1$1.Router }, { type: i0.ElementRef }]; }, propDecorators: { content: [{
-                type: Input
+class FsContentWidgetRendererComponent {
+    constructor(_router, _el) {
+        this._router = _router;
+        this._el = _el;
+        this.destroy$ = new Subject();
+    }
+    ngAfterViewChecked() {
+        this.registerHrefs();
+    }
+    get el() {
+        return this._el.nativeElement;
+    }
+    registerHrefs() {
+        Array.from(this.el.querySelectorAll('a[href]'))
+            .filter((el) => {
+            return el.getAttribute('href').match(/^\//);
+        })
+            .forEach((el) => {
+            el.addEventListener('click', (event) => {
+                if (!event.shiftKey && !event.ctrlKey) {
+                    event.preventDefault();
+                    const href = el.getAttribute('href');
+                    this._router.navigateByUrl(href);
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+FsContentWidgetRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetRendererComponent, deps: [{ token: i1$1.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+FsContentWidgetRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () { return [{ type: i1$1.Router }, { type: i0.ElementRef }]; }, propDecorators: { content: [{
+                type: Input
             }] } });
 
-class FsContentWidgetComponent {
-    constructor(config, _cdRef) {
-        this.config = config;
-        this._cdRef = _cdRef;
-        this.destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this.config.fetchContentWidget(this.tag)
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((content) => {
-            this.content = content;
-            this._cdRef.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-FsContentWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetComponent, deps: [{ token: FS_CONTENT_WIDGET_CONFIG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsContentWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [FS_CONTENT_WIDGET_CONFIG]
-                    }] }, { type: i0.ChangeDetectorRef }];
-    }, propDecorators: { contentWidgetContent: [{
-                type: ContentChild,
-                args: [FsContentWidgetContentDirective, { read: TemplateRef }]
-            }], tag: [{
-                type: Input
+class FsContentWidgetComponent {
+    constructor(config, _cdRef) {
+        this.config = config;
+        this._cdRef = _cdRef;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.config.fetchContentWidget(this.tag)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((content) => {
+            this.content = content;
+            this._cdRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+FsContentWidgetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetComponent, deps: [{ token: FS_CONTENT_WIDGET_CONFIG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsContentWidgetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [FS_CONTENT_WIDGET_CONFIG]
+                    }] }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { contentWidgetContent: [{
+                type: ContentChild,
+                args: [FsContentWidgetContentDirective, { read: TemplateRef }]
+            }], tag: [{
+                type: Input
             }] } });
 
-class FsContentWidgetDialogComponent {
-    constructor(_data) {
-        this._data = _data;
-        this.title = _data.title;
-        this.tag = _data.tag;
-    }
-}
-FsContentWidgetDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-FsContentWidgetDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: FsContentWidgetComponent, selector: "fs-content-widget", inputs: ["tag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MAT_DIALOG_DATA]
-                    }] }];
+class FsContentWidgetDialogComponent {
+    constructor(_data) {
+        this._data = _data;
+        this.title = _data.title;
+        this.tag = _data.tag;
+    }
+}
+FsContentWidgetDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetDialogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FsContentWidgetDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DIALOG_DATA]
+                    }] }];
     } });
 
-class FsContentWidgetModule {
-    static forRoot() {
-        return {
-            ngModule: FsContentWidgetModule,
-        };
-    }
-}
-FsContentWidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsContentWidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetModule, declarations: [FsContentWidgetRendererComponent,
-        FsContentWidgetComponent,
-        FsContentWidgetDialogComponent,
-        FsContentWidgetContentDirective], imports: [CommonModule,
-        MatDialogModule,
-        MatButtonModule,
-        FsHtmlEditorModule,
-        FsDialogModule,
-        FsHtmlRendererModule], exports: [FsContentWidgetComponent,
-        FsContentWidgetContentDirective] });
-FsContentWidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetModule, imports: [CommonModule,
-        MatDialogModule,
-        MatButtonModule,
-        FsHtmlEditorModule,
-        FsDialogModule,
-        FsHtmlRendererModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidgetModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatDialogModule,
-                        MatButtonModule,
-                        FsHtmlEditorModule,
-                        FsDialogModule,
-                        FsHtmlRendererModule,
-                    ],
-                    exports: [
-                        FsContentWidgetComponent,
-                        FsContentWidgetContentDirective,
-                    ],
-                    declarations: [
-                        FsContentWidgetRendererComponent,
-                        FsContentWidgetComponent,
-                        FsContentWidgetDialogComponent,
-                        FsContentWidgetContentDirective,
-                    ],
-                }]
+class FsContentWidgetModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentWidgetModule,
+        };
+    }
+}
+FsContentWidgetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentWidgetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetModule, declarations: [FsContentWidgetRendererComponent,
+        FsContentWidgetComponent,
+        FsContentWidgetDialogComponent,
+        FsContentWidgetContentDirective], imports: [CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsHtmlRendererModule], exports: [FsContentWidgetComponent,
+        FsContentWidgetContentDirective] });
+FsContentWidgetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetModule, imports: [CommonModule,
+        MatDialogModule,
+        MatButtonModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsHtmlRendererModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidgetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        FsHtmlEditorModule,
+                        FsDialogModule,
+                        FsHtmlRendererModule,
+                    ],
+                    exports: [
+                        FsContentWidgetComponent,
+                        FsContentWidgetContentDirective,
+                    ],
+                    declarations: [
+                        FsContentWidgetRendererComponent,
+                        FsContentWidgetComponent,
+                        FsContentWidgetDialogComponent,
+                        FsContentWidgetContentDirective,
+                    ],
+                }]
         }] });
 
-class FsContentWidget {
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
-    open(tag, title) {
-        this._dialog.open(FsContentWidgetDialogComponent, {
-            data: {
-                tag,
-                title,
-            }
-        });
-    }
-}
-FsContentWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidget, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-FsContentWidget.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidget, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsContentWidget, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class FsContentWidget {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+    }
+    open(tag, title) {
+        this._dialog.open(FsContentWidgetDialogComponent, {
+            data: {
+                tag,
+                title,
+            }
+        });
+    }
+}
+FsContentWidget.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidget, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+FsContentWidget.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidget, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsContentWidget, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: i3.MatDialog }]; } });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FS_CONTENT_WIDGET_CONFIG, FsContentWidget, FsContentWidgetComponent, FsContentWidgetContentDirective, FsContentWidgetModule, FsContentWidgetsComponent, FsContentWidgetsModule };