@firestitch/content 12.0.3 → 12.1.0

package/bundles/firestitch-content.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/tabs'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/select'), require('@angular/flex-layout'), require('@angular/material/button-toggle'), require('@firestitch/list'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/html-editor'), require('@firestitch/text-editor'), require('@firestitch/label'), require('@firestitch/skeleton'), require('rxjs'), require('rxjs/operators'), require('@firestitch/message'), require('@angular/material/core'), require('@angular/flex-layout/flex'), require('@firestitch/filter'), require('@firestitch/common'), require('@angular/router'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/content', ['exports', '@angular/core', '@angular/common', '@angular/material/button', '@angular/material/tabs', '@angular/material/dialog', '@angular/forms', '@angular/material/input', '@angular/material/form-field', '@angular/material/icon', '@angular/material/select', '@angular/flex-layout', '@angular/material/button-toggle', '@firestitch/list', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/html-editor', '@firestitch/text-editor', '@firestitch/label', '@firestitch/skeleton', 'rxjs', 'rxjs/operators', '@firestitch/message', '@angular/material/core', '@angular/flex-layout/flex', '@firestitch/filter', '@firestitch/common', '@angular/router', '@angular/platform-browser'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.content = {}), global.ng.core, global.ng.common, global.ng.material.button, global.ng.material.tabs, global.ng.material.dialog, global.ng.forms, global.ng.material.input, global.ng.material.formField, global.ng.material.icon, global.ng.material.select, global.ng.flexLayout, global.ng.material.buttonToggle, global.i2$1, global.i4$2, global.i3, global.i7, global.htmlEditor, global.i6, global.i5$1, global.i8, global.rxjs, global.rxjs.operators, global.i2, global.ng.material.core, global.ng.flexLayout.flex, global.filter, global.common, global.ng.router, global.ng.platformBrowser));
-})(this, (function (exports, i0, i11, button, tabs, i1, i9, i12, i4, i3$1, i5, flexLayout, i4$1, i2$1, i4$2, i3, i7, htmlEditor, i6, i5$1, i8, rxjs, operators, i2, i6$1, i10, filter, common, i2$2, i1$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/dialog'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/html-editor'), require('@firestitch/label'), require('@firestitch/list'), require('@firestitch/skeleton'), require('@firestitch/text-editor'), require('rxjs'), require('rxjs/operators'), require('@firestitch/message'), require('@angular/material/core'), require('@firestitch/filter'), require('@firestitch/common'), require('@angular/router'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/content', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/dialog', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/html-editor', '@firestitch/label', '@firestitch/list', '@firestitch/skeleton', '@firestitch/text-editor', 'rxjs', 'rxjs/operators', '@firestitch/message', '@angular/material/core', '@firestitch/filter', '@firestitch/common', '@angular/router', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.content = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.dialog, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.i4$2, global.i3, global.i7, global.htmlEditor, global.i5, global.i2$1, global.i8, global.i6, global.rxjs, global.rxjs.operators, global.i2, global.ng.material.core, global.filter, global.common, global.ng.router, global.ng.platformBrowser));
+})(this, (function (exports, i10, i0, i9, button, i4, i1, i4$1, i3$1, i11, i5$1, tabs, i4$2, i3, i7, htmlEditor, i5, i2$1, i8, i6, rxjs, operators, i2, i6$1, filter, common, i2$2, i1$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,28 +22,144 @@
         return Object.freeze(n);
     }
 
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
-    var i12__namespace = /*#__PURE__*/_interopNamespace(i12);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6$1);
-    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
 
+    var EditorComponent = /** @class */ (function () {
+        function EditorComponent(_data, _dialogRef, _message) {
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this.styles = null;
+            this.content = null;
+            this.editors = { content: true, styles: true };
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return _this._data.save({ content: _this.content, styles: _this.styles })
+                    .pipe(operators.tap(function () {
+                    _this._message.success('Saved Changes');
+                }));
+            };
+        }
+        EditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.updateSize('100%', '100%');
+            this.content = this._data.content;
+            this.styles = this._data.styles;
+        };
+        EditorComponent.prototype.editorToggleChange = function (event) {
+            var _this = this;
+            this.editors[event.value] = !this.editors[event.value];
+            setTimeout(function () {
+                _this.textEditors.forEach(function (textEditor) {
+                    textEditor.updateLayout();
+                });
+            }, 100);
+        };
+        EditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return EditorComponent;
+    }());
+    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>Design</h1>\n    <div mat-dialog-content>\n      <div class=\"container\">\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"content\" [checked]=\"editors.content\" (change)=\"editorToggleChange($event)\">Content</mat-button-toggle>\n            <mat-button-toggle value=\"styles\" [checked]=\"editors.styles\" (change)=\"editorToggleChange($event)\">Styles</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n        <div class=\"editors\">\n          <div class=\"editor\" *ngIf=\"editors.content\">\n            <fs-label>Content</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"content\" \n                name=\"content\"\n                [config]=\"{ tabSize: 2, language: 'html' }\">\n              </fs-text-editor>              \n            </div>\n          </div>\n          <div class=\"editor\" *ngIf=\"editors.styles\">\n            <fs-label>Styles</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"styles\" \n                name=\"styles\"\n                [config]=\"{  tabSize: 2, language: 'scss' }\">\n              </fs-text-editor>    \n            </div>\n          </div>    \n        </div>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["form{display:block;height:100%}form fs-dialog{display:flex;flex-direction:column;height:100%}form ::ng-deep .mat-dialog-content{max-height:none;flex:1}.toggles{display:flex;align-self:end;z-index:1;position:relative;margin-bottom:-12px}.container{height:100%;display:flex;flex-direction:column}.editors{width:5000px;max-width:100%;height:100%;display:flex;min-height:0}.editors .editor{height:100%;display:flex;min-width:0;width:100%;flex-direction:column}.editors .editor .editor-container{height:100%;overflow:auto;background:#1E1E1E}.editors .editor .editor-container fs-text-editor{display:block}.editors .editor+.editor{margin-left:20px}.editors .editor fs-label{background-color:#fff;padding-bottom:5px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5__namespace.FsLabelComponent, selector: "fs-label" }, { type: i6__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './editor.component.html',
+                        styleUrls: ['./editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i6.FsTextEditorComponent]
+                }] } });
+
+    var FsContentEditorModule = /** @class */ (function () {
+        function FsContentEditorModule() {
+        }
+        return FsContentEditorModule;
+    }());
+    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            button.MatButtonModule,
+            tabs.MatTabsModule,
+            i3$1.MatIconModule,
+            i4.MatButtonToggleModule,
+            i2$1.FsListModule,
+            i7.FsFormModule,
+            i5.FsLabelModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3.FsDialogModule,
+            i6.FsTextEditorModule], exports: [EditorComponent] });
+    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                button.MatButtonModule,
+                tabs.MatTabsModule,
+                i3$1.MatIconModule,
+                i4.MatButtonToggleModule,
+                i2$1.FsListModule,
+                i7.FsFormModule,
+                i5.FsLabelModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3.FsDialogModule,
+                i6.FsTextEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            button.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i3$1.MatIconModule,
+                            i4.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i7.FsFormModule,
+                            i5.FsLabelModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3.FsDialogModule,
+                            i6.FsTextEditorModule,
+                        ],
+                        exports: [
+                            EditorComponent,
+                        ],
+                        declarations: [
+                            EditorComponent,
+                        ],
+                    }]
+            }] });
+
     var PageType;
     (function (PageType) {
         PageType["StandardPage"] = "standardPage";
@@ -107,7 +223,7 @@
         return ContentPageComponent;
     }());
     ContentPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <mat-select\n            [(ngModel)]=\"contentPage.type\"\n            name=\"type\"\n            required\n            placeholder=\"Type\">\n              <mat-option\n                *ngFor=\"let item of PageTypes\"\n                [value]=\"item.value\">\n                  {{ item.name }}\n              </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.path\"\n            name=\"path\"\n            placeholder=\"Path\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.title\"\n            name=\"title\"\n            placeholder=\"Title\">\n        </mat-form-field>\n        <mat-form-field *ngIf=\"contentLayouts\">\n          <mat-select\n            [(ngModel)]=\"contentPage.contentLayoutId\"\n            required\n            name=\"contentLayoutId\"\n            placeholder=\"Layout\">\n              <mat-option\n                *ngFor=\"let item of contentLayouts\"\n                [value]=\"item.id\">\n                  {{ item.name }}\n              </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i10__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i11__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i11__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-select\n            [(ngModel)]=\"contentPage.type\"\n            name=\"type\"\n            required\n            placeholder=\"Type\">\n              <mat-option\n                *ngFor=\"let item of PageTypes\"\n                [value]=\"item.value\">\n                  {{ item.name }}\n              </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.path\"\n            name=\"path\"\n            placeholder=\"Path\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.title\"\n            name=\"title\"\n            placeholder=\"Title\">\n        </mat-form-field>\n        <mat-form-field *ngIf=\"contentLayouts\">\n          <mat-select\n            [(ngModel)]=\"contentPage.contentLayoutId\"\n            required\n            name=\"contentLayoutId\"\n            placeholder=\"Layout\">\n              <mat-option\n                *ngFor=\"let item of contentLayouts\"\n                [value]=\"item.id\">\n                  {{ item.name }}\n              </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -128,62 +244,6 @@
                     args: [i6.FsTextEditorComponent]
                 }] } });
 
-    var EditorComponent = /** @class */ (function () {
-        function EditorComponent(_data, _dialogRef, _message) {
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this.styles = null;
-            this.content = null;
-            this.editors = { content: true, styles: true };
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return _this._data.save({ content: _this.content, styles: _this.styles })
-                    .pipe(operators.tap(function () {
-                    _this._message.success('Saved Changes');
-                }));
-            };
-        }
-        EditorComponent.prototype.ngOnInit = function () {
-            this._dialogRef.updateSize('100%', '100%');
-            this.content = this._data.content;
-            this.styles = this._data.styles;
-        };
-        EditorComponent.prototype.editorToggleChange = function (event) {
-            var _this = this;
-            this.editors[event.value] = !this.editors[event.value];
-            setTimeout(function () {
-                _this.textEditors.forEach(function (textEditor) {
-                    textEditor.updateLayout();
-                });
-            }, 100);
-        };
-        EditorComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        return EditorComponent;
-    }());
-    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>Design</h1>\n    <div mat-dialog-content>\n      <div class=\"container\">\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"content\" [checked]=\"editors.content\" (change)=\"editorToggleChange($event)\">Content</mat-button-toggle>\n            <mat-button-toggle value=\"styles\" [checked]=\"editors.styles\" (change)=\"editorToggleChange($event)\">Styles</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n        <div class=\"editors\">\n          <div class=\"editor\" *ngIf=\"editors.content\">\n            <fs-label>Content</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"content\" \n                name=\"content\"\n                [config]=\"{ tabSize: 2, language: 'html' }\">\n              </fs-text-editor>              \n            </div>\n          </div>\n          <div class=\"editor\" *ngIf=\"editors.styles\">\n            <fs-label>Styles</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"styles\" \n                name=\"styles\"\n                [config]=\"{  tabSize: 2, language: 'scss' }\">\n              </fs-text-editor>    \n            </div>\n          </div>    \n        </div>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["form{display:block;height:100%}form fs-dialog{display:flex;flex-direction:column;height:100%}form ::ng-deep .mat-dialog-content{max-height:none;flex:1}.toggles{display:flex;align-self:end;z-index:1;position:relative;margin-bottom:-12px}.container{height:100%;display:flex;flex-direction:column}.editors{width:5000px;max-width:100%;height:100%;display:flex;min-height:0}.editors .editor{height:100%;display:flex;min-width:0;width:100%;flex-direction:column}.editors .editor .editor-container{height:100%;overflow:auto;background:#1E1E1E}.editors .editor .editor-container fs-text-editor{display:block}.editors .editor+.editor{margin-left:20px}.editors .editor fs-label{background-color:#fff;padding-bottom:5px}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i6__namespace$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i11__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './editor.component.html',
-                        styleUrls: ['./editor.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
-        }, propDecorators: { textEditors: [{
-                    type: i0.ViewChildren,
-                    args: [i6.FsTextEditorComponent]
-                }] } });
-
     var FsContentPagesComponent = /** @class */ (function () {
         function FsContentPagesComponent(_config, _dialog) {
             this._config = _config;
@@ -302,67 +362,6 @@
                     args: [i2$1.FsListComponent]
                 }] } });
 
-    var FsContentEditorModule = /** @class */ (function () {
-        function FsContentEditorModule() {
-        }
-        return FsContentEditorModule;
-    }());
-    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i11.CommonModule,
-            i9.FormsModule,
-            i1.MatDialogModule,
-            button.MatButtonModule,
-            tabs.MatTabsModule,
-            i3$1.MatIconModule,
-            i4$1.MatButtonToggleModule,
-            i2$1.FsListModule,
-            i7.FsFormModule,
-            i5$1.FsLabelModule,
-            htmlEditor.FsHtmlEditorModule,
-            i3.FsDialogModule,
-            i6.FsTextEditorModule], exports: [EditorComponent] });
-    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
-                i11.CommonModule,
-                i9.FormsModule,
-                i1.MatDialogModule,
-                button.MatButtonModule,
-                tabs.MatTabsModule,
-                i3$1.MatIconModule,
-                i4$1.MatButtonToggleModule,
-                i2$1.FsListModule,
-                i7.FsFormModule,
-                i5$1.FsLabelModule,
-                htmlEditor.FsHtmlEditorModule,
-                i3.FsDialogModule,
-                i6.FsTextEditorModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i11.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            button.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i3$1.MatIconModule,
-                            i4$1.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i7.FsFormModule,
-                            i5$1.FsLabelModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i3.FsDialogModule,
-                            i6.FsTextEditorModule,
-                        ],
-                        exports: [
-                            EditorComponent,
-                        ],
-                        declarations: [
-                            EditorComponent,
-                        ],
-                    }]
-            }] });
-
     var FsContentPagesModule = /** @class */ (function () {
         function FsContentPagesModule() {
         }
@@ -375,42 +374,40 @@
     }());
     FsContentPagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     FsContentPagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
-            ContentPageComponent], imports: [i11.CommonModule,
+            ContentPageComponent], imports: [i10.CommonModule,
             i9.FormsModule,
-            flexLayout.FlexLayoutModule,
             i1.MatDialogModule,
-            i12.MatInputModule,
-            i4.MatFormFieldModule,
+            i11.MatInputModule,
+            i4$1.MatFormFieldModule,
             button.MatButtonModule,
             tabs.MatTabsModule,
             i3$1.MatIconModule,
-            i5.MatSelectModule,
-            i4$1.MatButtonToggleModule,
+            i5$1.MatSelectModule,
+            i4.MatButtonToggleModule,
             i2$1.FsListModule,
             i4$2.FsDateModule,
             i7.FsFormModule,
-            i5$1.FsLabelModule,
+            i5.FsLabelModule,
             i8.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
             i3.FsDialogModule,
             i6.FsTextEditorModule,
             FsContentEditorModule], exports: [FsContentPagesComponent] });
     FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
-                i11.CommonModule,
+                i10.CommonModule,
                 i9.FormsModule,
-                flexLayout.FlexLayoutModule,
                 i1.MatDialogModule,
-                i12.MatInputModule,
-                i4.MatFormFieldModule,
+                i11.MatInputModule,
+                i4$1.MatFormFieldModule,
                 button.MatButtonModule,
                 tabs.MatTabsModule,
                 i3$1.MatIconModule,
-                i5.MatSelectModule,
-                i4$1.MatButtonToggleModule,
+                i5$1.MatSelectModule,
+                i4.MatButtonToggleModule,
                 i2$1.FsListModule,
                 i4$2.FsDateModule,
                 i7.FsFormModule,
-                i5$1.FsLabelModule,
+                i5.FsLabelModule,
                 i8.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
                 i3.FsDialogModule,
@@ -421,21 +418,20 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i11.CommonModule,
+                            i10.CommonModule,
                             i9.FormsModule,
-                            flexLayout.FlexLayoutModule,
                             i1.MatDialogModule,
-                            i12.MatInputModule,
-                            i4.MatFormFieldModule,
+                            i11.MatInputModule,
+                            i4$1.MatFormFieldModule,
                             button.MatButtonModule,
                             tabs.MatTabsModule,
                             i3$1.MatIconModule,
-                            i5.MatSelectModule,
-                            i4$1.MatButtonToggleModule,
+                            i5$1.MatSelectModule,
+                            i4.MatButtonToggleModule,
                             i2$1.FsListModule,
                             i4$2.FsDateModule,
                             i7.FsFormModule,
-                            i5$1.FsLabelModule,
+                            i5.FsLabelModule,
                             i8.FsSkeletonModule,
                             htmlEditor.FsHtmlEditorModule,
                             i3.FsDialogModule,
@@ -492,7 +488,7 @@
         return ContentLayoutComponent;
     }());
     ContentLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div fxLayout=\"column\">\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.tag\"\n            name=\"tag\"\n            placeholder=\"Tag\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i10__namespace.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i12__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.tag\"\n            name=\"tag\"\n            placeholder=\"Tag\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i11__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -636,42 +632,40 @@
     }());
     FsContentLayoutsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     FsContentLayoutsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
-            FsContentLayoutsComponent], imports: [i11.CommonModule,
+            FsContentLayoutsComponent], imports: [i10.CommonModule,
             i9.FormsModule,
-            flexLayout.FlexLayoutModule,
             i1.MatDialogModule,
-            i12.MatInputModule,
-            i4.MatFormFieldModule,
+            i11.MatInputModule,
+            i4$1.MatFormFieldModule,
             button.MatButtonModule,
             tabs.MatTabsModule,
             i3$1.MatIconModule,
-            i5.MatSelectModule,
-            i4$1.MatButtonToggleModule,
+            i5$1.MatSelectModule,
+            i4.MatButtonToggleModule,
             i2$1.FsListModule,
             i4$2.FsDateModule,
             i7.FsFormModule,
-            i5$1.FsLabelModule,
+            i5.FsLabelModule,
             i8.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
             i3.FsDialogModule,
             i6.FsTextEditorModule,
             FsContentEditorModule], exports: [FsContentLayoutsComponent] });
     FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
-                i11.CommonModule,
+                i10.CommonModule,
                 i9.FormsModule,
-                flexLayout.FlexLayoutModule,
                 i1.MatDialogModule,
-                i12.MatInputModule,
-                i4.MatFormFieldModule,
+                i11.MatInputModule,
+                i4$1.MatFormFieldModule,
                 button.MatButtonModule,
                 tabs.MatTabsModule,
                 i3$1.MatIconModule,
-                i5.MatSelectModule,
-                i4$1.MatButtonToggleModule,
+                i5$1.MatSelectModule,
+                i4.MatButtonToggleModule,
                 i2$1.FsListModule,
                 i4$2.FsDateModule,
                 i7.FsFormModule,
-                i5$1.FsLabelModule,
+                i5.FsLabelModule,
                 i8.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
                 i3.FsDialogModule,
@@ -682,21 +676,20 @@
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i11.CommonModule,
+                            i10.CommonModule,
                             i9.FormsModule,
-                            flexLayout.FlexLayoutModule,
                             i1.MatDialogModule,
-                            i12.MatInputModule,
-                            i4.MatFormFieldModule,
+                            i11.MatInputModule,
+                            i4$1.MatFormFieldModule,
                             button.MatButtonModule,
                             tabs.MatTabsModule,
                             i3$1.MatIconModule,
-                            i5.MatSelectModule,
-                            i4$1.MatButtonToggleModule,
+                            i5$1.MatSelectModule,
+                            i4.MatButtonToggleModule,
                             i2$1.FsListModule,
                             i4$2.FsDateModule,
                             i7.FsFormModule,
-                            i5$1.FsLabelModule,
+                            i5.FsLabelModule,
                             i8.FsSkeletonModule,
                             htmlEditor.FsHtmlEditorModule,
                             i3.FsDialogModule,
@@ -777,7 +770,7 @@
         return ContentRendererComponent;
     }());
     ContentRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: i2__namespace$2.Router }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i11__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -842,7 +835,7 @@
         return FsContentComponent;
     }());
     FsContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace$1.Title }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$2.Router }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i11__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -865,17 +858,17 @@
     }());
     FsContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     FsContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, declarations: [FsContentComponent,
-            ContentRendererComponent], imports: [i11.CommonModule,
+            ContentRendererComponent], imports: [i10.CommonModule,
             htmlEditor.FsHtmlEditorModule], exports: [FsContentComponent] });
     FsContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, imports: [[
-                i11.CommonModule,
+                i10.CommonModule,
                 htmlEditor.FsHtmlEditorModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i11.CommonModule,
+                            i10.CommonModule,
                             htmlEditor.FsHtmlEditorModule,
                         ],
                         exports: [