@firestitch/content 12.2.4 → 12.2.5

package/bundles/firestitch-content.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/button'), require('@angular/material/dialog'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/tabs'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/html-editor'), require('@firestitch/list'), require('@firestitch/text-editor'), require('@angular/material/button-toggle'), require('@angular/material/icon'), require('@angular/material/select'), require('@firestitch/label'), require('@firestitch/skeleton'), require('@firestitch/common'), require('angular-split'), require('rxjs'), require('rxjs/operators'), require('@firestitch/message'), require('@firestitch/filter'), require('@angular/material/core'), require('@angular/router'), require('@angular/platform-browser'), require('@firestitch/body')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/content', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/button', '@angular/material/dialog', '@angular/material/form-field', '@angular/material/input', '@angular/material/tabs', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/html-editor', '@firestitch/list', '@firestitch/text-editor', '@angular/material/button-toggle', '@angular/material/icon', '@angular/material/select', '@firestitch/label', '@firestitch/skeleton', '@firestitch/common', 'angular-split', 'rxjs', 'rxjs/operators', '@firestitch/message', '@firestitch/filter', '@angular/material/core', '@angular/router', '@angular/platform-browser', '@firestitch/body'], 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.dialog, global.ng.material.formField, global.ng.material.input, global.ng.material.tabs, global.i3$1, global.i3, global.i5$1, global.htmlEditor, global.i2$1, global.i8, global.ng.material.buttonToggle, global.ng.material.icon, global.ng.material.select, global.i7, global.i13, global.i12, global.i6, global.rxjs, global.rxjs.operators, global.i2, global.filter, global.ng.material.core, global.ng.router, global.ng.platformBrowser, global.i3$2));
-})(this, (function (exports, i10$1, i0, i7$1, i4, i1, i4$1, i8$1, tabs, i3$1, i3, i5$1, htmlEditor, i2$1, i8, i10, i5, i5$2, i7, i13, i12, i6, rxjs, operators, i2, filter, i6$1, i2$2, i1$1, i3$2) { '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('@firestitch/common'), require('angular-split'), require('rxjs'), require('@firestitch/message'), require('rxjs/operators'), require('@firestitch/filter'), require('@angular/material/core'), require('@angular/router'), require('@angular/platform-browser'), require('@firestitch/body')) :
+    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', '@firestitch/common', 'angular-split', 'rxjs', '@firestitch/message', 'rxjs/operators', '@firestitch/filter', '@angular/material/core', '@angular/router', '@angular/platform-browser', '@firestitch/body'], 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.i3$2, global.i3$1, global.i7$1, global.htmlEditor, global.i3, global.i2$2, global.i8, global.i4, global.i7$2, global.i2$1, global.rxjs, global.i2, global.rxjs.operators, global.filter, global.ng.material.core, global.ng.router, global.ng.platformBrowser, global.i3$3));
+})(this, (function (exports, i10, i0, i7, i4$1, i8$1, i1, i4$2, i5, i8$2, i5$1, tabs, i3$2, i3$1, i7$1, htmlEditor, i3, i2$2, i8, i4, i7$2, i2$1, rxjs, i2, operators, filter, i6, i2$3, i1$1, i3$3) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,65 +22,54 @@
         return Object.freeze(n);
     }
 
-    var i10__namespace$1 = /*#__PURE__*/_interopNamespace(i10$1);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i8__namespace$2 = /*#__PURE__*/_interopNamespace(i8$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$2);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$2);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i13__namespace = /*#__PURE__*/_interopNamespace(i13);
-    var i12__namespace = /*#__PURE__*/_interopNamespace(i12);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i7__namespace$2 = /*#__PURE__*/_interopNamespace(i7$2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
-    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
-    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
 
     var EditorComponent = /** @class */ (function () {
-        function EditorComponent(_data, _dialogRef, _message, _cdRef) {
-            this._data = _data;
-            this._dialogRef = _dialogRef;
+        function EditorComponent(_message, _cdRef) {
             this._message = _message;
             this._cdRef = _cdRef;
+            this.showHtml = false;
+            this.showScss = false;
+            this.showJs = false;
+            this.showGlobalScss = false;
+            this.changed = new i0.EventEmitter();
             this.resizing = false;
-            this.editors = {
-                html: true,
-                scss: true,
-                js: false,
-                globalScss: false,
-            };
             this._destroy$ = new rxjs.Subject();
         }
         EditorComponent.prototype.ngOnInit = function () {
-            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
-            this.title = this._data.title;
-            this.contentPage = this._data.contentPage;
-            this._config = this._data.contentConfig;
-            this._save = this._data.save;
             this.initTextEditors();
             this.initGlobalContentStyle();
         };
-        EditorComponent.prototype.editorToggleChange = function (event) {
-            this.editors[event.value] = !this.editors[event.value];
-        };
         EditorComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
         };
         EditorComponent.prototype.globalScssChange = function () {
             var _this = this;
-            this._config.saveContentStyle(this.contentStyle)
+            this.contentConfig.saveContentStyle(this.contentStyle)
                 .subscribe(function (contentStyle) {
                 _this.contentStyle = contentStyle;
                 _this._message.success('Saved Changes');
@@ -111,53 +100,43 @@
         };
         EditorComponent.prototype.initGlobalContentStyle = function () {
             var _this = this;
-            this._config.loadContentStyle()
+            this.contentConfig.loadContentStyle()
                 .subscribe(function (contentStyle) {
-                _this.contentStyle = contentStyle;
-                _this._cdRef.markForCheck();
-            });
-        };
-        EditorComponent.prototype.saveContentPage = function () {
-            var _this = this;
-            this._save({
-                id: this.contentPage.id,
-                styles: this.contentPage.styles,
-                content: this.contentPage.content,
-                js: this.contentPage.js,
-            })
-                .pipe(operators.tap(function (contentPage) {
-                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
-                _this._cdRef.markForCheck();
-                _this._message.success('Saved Changes');
-            }))
-                .subscribe();
-        };
-        EditorComponent.prototype.openSettings = function () {
-            var _this = this;
-            this._data.openSettings(this.contentPage)
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (contentPage) {
-                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
+                _this.contentStyle = contentStyle || {};
                 _this._cdRef.markForCheck();
             });
         };
         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 }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    <div class=\"title-container\">\n      <div class=\"title\">\n        {{title}}\n        <div class=\"small\">{{contentPage.name}}</div>   \n      </div>\n      <a\n          (click)=\"openSettings()\"\n          mat-icon-button>\n        <mat-icon>settings</mat-icon>\n      </a>   \n    </div>\n  </h1>\n  <div mat-dialog-content>\n    <div class=\"container\">\n      <as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n        <as-split-area [size]=\"70\" [visible]=\"editors.html\" [order]=\"1\">\n          <div class=\"editor-container\">\n            <fs-label>HTML</fs-label>\n            <fs-text-editor \n              [(ngModel)]=\"contentPage.content\" \n              name=\"html\"\n              [fsModelChangeOptions]=\"{ debounce: 300 }\"\n              (fsModelChange)=\"saveContentPage()\"\n              [config]=\"htmlConfig\">\n            </fs-text-editor>              \n          </div>\n        </as-split-area>\n        <as-split-area [size]=\"30\" [visible]=\"editors.scss\" [order]=\"2\">\n          <div class=\"editor-container\">\n            <fs-label>SCSS</fs-label>\n            <fs-text-editor \n              [(ngModel)]=\"contentPage.styles\" \n              name=\"scss\"\n              [fsModelChangeOptions]=\"{ debounce: 300 }\"\n              (fsModelChange)=\"saveContentPage()\"\n              [config]=\"scssConfig\">\n            </fs-text-editor>    \n          </div>\n        </as-split-area>\n        <as-split-area [size]=\"30\"  [visible]=\"editors.js\" [order]=\"3\">\n          <div class=\"editor-container\">\n            <fs-label>JS</fs-label>\n            <fs-text-editor \n              [(ngModel)]=\"contentPage.js\" \n              name=\"js\"\n              [fsModelChangeOptions]=\"{ debounce: 300 }\"\n              (fsModelChange)=\"saveContentPage()\"\n              [config]=\"jsConfig\">\n            </fs-text-editor>    \n          </div>\n        </as-split-area>\n        <as-split-area [size]=\"30\" [visible]=\"editors.globalScss\" [order]=\"4\">\n          <div class=\"editor-container\">\n            <fs-label>Global SCSS</fs-label>\n            <ng-container *fsSkeleton=\"contentStyle\">\n              <fs-text-editor \n                [(ngModel)]=\"contentStyle.scss\" \n                name=\"globalScss\"\n                [fsModelChangeOptions]=\"{ debounce: 300 }\"\n                (fsModelChange)=\"globalScssChange()\"\n                [config]=\"globalScssConfig\">\n              </fs-text-editor> \n            </ng-container>   \n          </div>\n        </as-split-area>\n      </as-split>\n    </div>\n  </div>\n\n  <div mat-dialog-actions>\n    <fs-form-dialog-actions\n      [save]=\"false\"\n      [done]=\"true\">\n    </fs-form-dialog-actions>\n    <div class=\"toggles\">\n      <mat-button-toggle-group multiple>\n        <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n        <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n        <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n        <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n      </mat-button-toggle-group>      \n    </div>\n  </div>\n</fs-dialog>\n\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}:host ::ng-deep .as-split-gutter{background-color:unset!important}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.container{height:100%;display:flex;flex-direction:column}.editor-container{height:100%;border-radius:5px;display:flex;flex-direction:column}.editor-container fs-text-editor{flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { type: i7__namespace.FsLabelComponent, selector: "fs-label" }, { type: i8__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { type: i5__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i10__namespace.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ 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: i6__namespace.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i7__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.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: i12__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i13__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i10__namespace.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "app-editor", inputs: { showHtml: "showHtml", showScss: "showScss", showJs: "showJs", showGlobalScss: "showGlobalScss", html: "html", scss: "scss", js: "js", contentConfig: "contentConfig" }, outputs: { changed: "changed" }, ngImport: i0__namespace, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <fs-label>HTML</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"html\" \n        name=\"html\"\n        [fsModelChangeOptions]=\"{ debounce: 300 }\"\n        (fsModelChange)=\"changed.emit({ type: 'html', value: $event })\"\n        [config]=\"htmlConfig\">\n      </fs-text-editor>              \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showScss\" [order]=\"2\">\n    <div class=\"editor-container\">\n      <fs-label>SCSS</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"scss\" \n        name=\"scss\"\n        [fsModelChangeOptions]=\"{ debounce: 300 }\"\n        (fsModelChange)=\"changed.emit({ type: 'scss', value: $event })\"\n        [config]=\"scssConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\"  [visible]=\"showJs\" [order]=\"3\">\n    <div class=\"editor-container\">\n      <fs-label>JS</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"js\" \n        name=\"js\"\n        [fsModelChangeOptions]=\"{ debounce: 300 }\"\n        (fsModelChange)=\"changed.emit({ type: 'js', value: $event })\"\n        [config]=\"jsConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showGlobalScss\" [order]=\"4\">\n    <div class=\"editor-container\">\n      <fs-label>Global SCSS</fs-label>\n      <ng-container *fsSkeleton=\"contentStyle\">\n        <fs-text-editor \n          [(ngModel)]=\"contentStyle.scss\" \n          name=\"globalScss\"\n          [fsModelChangeOptions]=\"{ debounce: 300 }\"\n          (fsModelChange)=\"globalScssChange()\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor> \n      </ng-container>   \n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host ::ng-deep .as-split-gutter{background-color:unset!important}.editor-container{height:100%;border-radius:5px;display:flex;flex-direction:column}.editor-container fs-text-editor{flex:1}\n"], components: [{ type: i2__namespace$1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { type: i3__namespace.FsLabelComponent, selector: "fs-label" }, { type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i2__namespace$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace$1.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: i7__namespace$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i8__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], 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: [{
+                        selector: 'app-editor',
                         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 }, { type: i0__namespace.ChangeDetectorRef }];
-        } });
+            }], ctorParameters: function () { return [{ type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { showHtml: [{
+                    type: i0.Input
+                }], showScss: [{
+                    type: i0.Input
+                }], showJs: [{
+                    type: i0.Input
+                }], showGlobalScss: [{
+                    type: i0.Input
+                }], html: [{
+                    type: i0.Input
+                }], scss: [{
+                    type: i0.Input
+                }], js: [{
+                    type: i0.Input
+                }], contentConfig: [{
+                    type: i0.Input
+                }], changed: [{
+                    type: i0.Output
+                }] } });
 
     var FsContentEditorModule = /** @class */ (function () {
         function FsContentEditorModule() {
@@ -165,60 +144,60 @@
         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$1.CommonModule,
-            i7$1.FormsModule,
+    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
+            i7.FormsModule,
             i1.MatDialogModule,
-            i4.MatButtonModule,
+            i4$1.MatButtonModule,
             tabs.MatTabsModule,
             i5.MatIconModule,
-            i10.MatButtonToggleModule,
-            i2$1.FsListModule,
-            i5$1.FsFormModule,
-            i13.FsSkeletonModule,
-            i7.FsLabelModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i7$1.FsFormModule,
+            i8.FsSkeletonModule,
+            i3.FsLabelModule,
             htmlEditor.FsHtmlEditorModule,
-            i12.FsCommonModule,
-            i3.FsDialogModule,
-            i8.FsTextEditorModule,
-            i6.AngularSplitModule], exports: [EditorComponent] });
+            i7$2.FsCommonModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
+            i2$1.AngularSplitModule], exports: [EditorComponent] });
     FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
-                i10$1.CommonModule,
-                i7$1.FormsModule,
+                i10.CommonModule,
+                i7.FormsModule,
                 i1.MatDialogModule,
-                i4.MatButtonModule,
+                i4$1.MatButtonModule,
                 tabs.MatTabsModule,
                 i5.MatIconModule,
-                i10.MatButtonToggleModule,
-                i2$1.FsListModule,
-                i5$1.FsFormModule,
-                i13.FsSkeletonModule,
-                i7.FsLabelModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i7$1.FsFormModule,
+                i8.FsSkeletonModule,
+                i3.FsLabelModule,
                 htmlEditor.FsHtmlEditorModule,
-                i12.FsCommonModule,
-                i3.FsDialogModule,
-                i8.FsTextEditorModule,
-                i6.AngularSplitModule,
+                i7$2.FsCommonModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
+                i2$1.AngularSplitModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i10$1.CommonModule,
-                            i7$1.FormsModule,
+                            i10.CommonModule,
+                            i7.FormsModule,
                             i1.MatDialogModule,
-                            i4.MatButtonModule,
+                            i4$1.MatButtonModule,
                             tabs.MatTabsModule,
                             i5.MatIconModule,
-                            i10.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i5$1.FsFormModule,
-                            i13.FsSkeletonModule,
-                            i7.FsLabelModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i7$1.FsFormModule,
+                            i8.FsSkeletonModule,
+                            i3.FsLabelModule,
                             htmlEditor.FsHtmlEditorModule,
-                            i12.FsCommonModule,
-                            i3.FsDialogModule,
-                            i8.FsTextEditorModule,
-                            i6.AngularSplitModule,
+                            i7$2.FsCommonModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
+                            i2$1.AngularSplitModule,
                         ],
                         exports: [
                             EditorComponent,
@@ -271,7 +250,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: i8.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: i5__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i13__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$1.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"] }, { 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: i8__namespace$1.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: i7__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i5__namespace$1.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 });
+    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.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$1.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$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace$1.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"] }, { 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: i8__namespace$1.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: i7__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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i7__namespace$1.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: [{
@@ -289,9 +268,96 @@
                         }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
         }, propDecorators: { textEditors: [{
                     type: i0.ViewChildren,
-                    args: [i8.FsTextEditorComponent]
+                    args: [i4.FsTextEditorComponent]
                 }] } });
 
+    var ContentLayoutEditorComponent = /** @class */ (function () {
+        function ContentLayoutEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef) {
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this.resizing = false;
+            this.editors = {
+                html: true,
+                scss: true,
+                globalScss: false,
+            };
+            this._destroy$ = new rxjs.Subject();
+        }
+        ContentLayoutEditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
+            this.config = this._data.contentConfig;
+            this._initContentLayout(this._data.contentLayout);
+        };
+        ContentLayoutEditorComponent.prototype.editorToggleChange = function (event) {
+            this.editors[event.value] = !this.editors[event.value];
+        };
+        ContentLayoutEditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentLayoutEditorComponent.prototype._initContentLayout = function (contentLayout) {
+            var _this = this;
+            this.config.loadContentLayout(contentLayout.id)
+                .subscribe(function (data) {
+                _this.contentLayout = data;
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentLayoutEditorComponent.prototype.editorChanged = function (event) {
+            var data = {};
+            if (event.type === 'html') {
+                data.content = event.value;
+            }
+            if (event.type === 'scss') {
+                data.styles = event.value;
+            }
+            this.saveContentLayout(data);
+        };
+        ContentLayoutEditorComponent.prototype.saveContentLayout = function (data) {
+            var _this = this;
+            this.config.saveContentLayout(Object.assign({ id: this.contentLayout.id }, data))
+                .pipe(operators.tap(function (contentLayout) {
+                _this.contentLayout = Object.assign(Object.assign({}, _this.contentLayout), contentLayout);
+                _this._cdRef.markForCheck();
+                _this._message.success('Saved Changes');
+            }))
+                .subscribe();
+        };
+        ContentLayoutEditorComponent.prototype.openSettings = function () {
+            var _this = this;
+            this._dialog.open(ContentLayoutComponent, {
+                data: {
+                    contentLayout: this.contentLayout,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (contentLayout) {
+                _this.contentLayout = Object.assign(Object.assign({}, _this.contentLayout), contentLayout);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentLayoutEditorComponent;
+    }());
+    ContentLayoutEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentLayoutEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutEditorComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog *fsSkeletonForm=\"contentLayout\">\n  <h1 mat-dialog-title>\n    <div class=\"title-container\">\n      <div class=\"title\">\n        Layout Editor\n        <div class=\"small\">{{contentLayout.name}}</div>   \n      </div>\n      <a\n          (click)=\"openSettings()\"\n          mat-icon-button>\n        <mat-icon>settings</mat-icon>\n      </a>   \n    </div>\n  </h1>\n  <div mat-dialog-content>\n    <app-editor\n      [contentConfig]=\"config\"\n      [showHtml]=\"editors.html\"\n      [showScss]=\"editors.scss\"\n      [showGlobalScss]=\"editors.globalScss\"\n      [html]=\"contentLayout.content\"\n      [scss]=\"contentLayout.styles\"\n      (changed)=\"editorChanged($event)\">\n    </app-editor>\n  </div>\n\n  <div mat-dialog-actions>\n    <fs-form-dialog-actions\n      [save]=\"false\"\n      [done]=\"true\">\n    </fs-form-dialog-actions>\n    <div class=\"toggles\">\n      <mat-button-toggle-group multiple>\n        <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n        <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n        <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n      </mat-button-toggle-group>      \n    </div>\n  </div>\n</fs-dialog>\n\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed"] }, { type: i7__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { 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: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-layout-editor.component.html',
+                        styleUrls: ['./content-layout-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 }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }];
+        } });
+
     var FsContentLayoutsComponent = /** @class */ (function () {
         function FsContentLayoutsComponent(_config, _dialog) {
             this._config = _config;
@@ -303,20 +369,13 @@
         };
         FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
             var _this = this;
-            this._dialog.open(EditorComponent, {
+            this._dialog.open(ContentLayoutEditorComponent, {
                 maxWidth: '100vw',
                 width: '100%',
                 height: '100%',
                 data: {
-                    contentPage: contentLayout,
-                    title: 'Layout',
+                    contentLayout: contentLayout,
                     contentConfig: this._config,
-                    save: function (data) {
-                        return _this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
-                    },
-                    openSettings: function (data) {
-                        return _this.openLayout(data);
-                    },
                 },
             })
                 .afterClosed()
@@ -393,7 +452,7 @@
         return FsContentLayoutsComponent;
     }());
     FsContentLayoutsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentLayoutsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$1.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsContentLayoutsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$2.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -409,7 +468,7 @@
                         }] }, { type: i1__namespace.MatDialog }];
         }, propDecorators: { listComponent: [{
                     type: i0.ViewChild,
-                    args: [i2$1.FsListComponent]
+                    args: [i2$2.FsListComponent]
                 }] } });
 
     var FsContentLayoutsModule = /** @class */ (function () {
@@ -419,68 +478,69 @@
     }());
     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: [i10$1.CommonModule,
-            i7$1.FormsModule,
+            FsContentLayoutsComponent,
+            ContentLayoutEditorComponent], imports: [i10.CommonModule,
+            i7.FormsModule,
             i1.MatDialogModule,
-            i8$1.MatInputModule,
-            i4$1.MatFormFieldModule,
-            i4.MatButtonModule,
+            i8$2.MatInputModule,
+            i4$2.MatFormFieldModule,
+            i4$1.MatButtonModule,
             tabs.MatTabsModule,
             i5.MatIconModule,
-            i5$2.MatSelectModule,
-            i10.MatButtonToggleModule,
-            i2$1.FsListModule,
-            i3$1.FsDateModule,
-            i5$1.FsFormModule,
-            i7.FsLabelModule,
-            i13.FsSkeletonModule,
+            i5$1.MatSelectModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i3$2.FsDateModule,
+            i7$1.FsFormModule,
+            i3.FsLabelModule,
+            i8.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
-            i3.FsDialogModule,
-            i8.FsTextEditorModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
             FsContentEditorModule], exports: [FsContentLayoutsComponent] });
     FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
-                i10$1.CommonModule,
-                i7$1.FormsModule,
+                i10.CommonModule,
+                i7.FormsModule,
                 i1.MatDialogModule,
-                i8$1.MatInputModule,
-                i4$1.MatFormFieldModule,
-                i4.MatButtonModule,
+                i8$2.MatInputModule,
+                i4$2.MatFormFieldModule,
+                i4$1.MatButtonModule,
                 tabs.MatTabsModule,
                 i5.MatIconModule,
-                i5$2.MatSelectModule,
-                i10.MatButtonToggleModule,
-                i2$1.FsListModule,
-                i3$1.FsDateModule,
-                i5$1.FsFormModule,
-                i7.FsLabelModule,
-                i13.FsSkeletonModule,
+                i5$1.MatSelectModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i3$2.FsDateModule,
+                i7$1.FsFormModule,
+                i3.FsLabelModule,
+                i8.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
-                i3.FsDialogModule,
-                i8.FsTextEditorModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
                 FsContentEditorModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i10$1.CommonModule,
-                            i7$1.FormsModule,
+                            i10.CommonModule,
+                            i7.FormsModule,
                             i1.MatDialogModule,
-                            i8$1.MatInputModule,
-                            i4$1.MatFormFieldModule,
-                            i4.MatButtonModule,
+                            i8$2.MatInputModule,
+                            i4$2.MatFormFieldModule,
+                            i4$1.MatButtonModule,
                             tabs.MatTabsModule,
                             i5.MatIconModule,
-                            i5$2.MatSelectModule,
-                            i10.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i3$1.FsDateModule,
-                            i5$1.FsFormModule,
-                            i7.FsLabelModule,
-                            i13.FsSkeletonModule,
+                            i5$1.MatSelectModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i3$2.FsDateModule,
+                            i7$1.FsFormModule,
+                            i3.FsLabelModule,
+                            i8.FsSkeletonModule,
                             htmlEditor.FsHtmlEditorModule,
-                            i3.FsDialogModule,
-                            i8.FsTextEditorModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
                             FsContentEditorModule,
                         ],
                         exports: [
@@ -489,6 +549,7 @@
                         declarations: [
                             ContentLayoutComponent,
                             FsContentLayoutsComponent,
+                            ContentLayoutEditorComponent,
                         ],
                     }]
             }] });
@@ -555,7 +616,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: i8.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 *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        <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            required\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      </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$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i13__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace$1.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"] }, { 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: i7__namespace$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace$1.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: i7__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace$1.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 });
+    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.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 *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        <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            required\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      </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$1.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.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace$1.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"] }, { 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: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace$1.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: i7__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$1.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: ContentPageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -573,14 +634,105 @@
                         }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
         }, propDecorators: { textEditors: [{
                     type: i0.ViewChildren,
-                    args: [i8.FsTextEditorComponent]
+                    args: [i4.FsTextEditorComponent]
                 }] } });
 
+    var ContentPageEditorComponent = /** @class */ (function () {
+        function ContentPageEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef) {
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this.resizing = false;
+            this.editors = {
+                html: true,
+                scss: true,
+                js: false,
+                globalScss: false,
+            };
+            this._destroy$ = new rxjs.Subject();
+        }
+        ContentPageEditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
+            this.config = this._data.contentConfig;
+            this._initContentPage(this._data.contentPage);
+        };
+        ContentPageEditorComponent.prototype.editorToggleChange = function (event) {
+            this.editors[event.value] = !this.editors[event.value];
+        };
+        ContentPageEditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentPageEditorComponent.prototype._initContentPage = function (contentPage) {
+            var _this = this;
+            this.config.loadContentPage(contentPage.id)
+                .subscribe(function (data) {
+                _this.contentPage = data;
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentPageEditorComponent.prototype.editorChanged = function (event) {
+            var data = {};
+            if (event.type === 'js') {
+                data.js = event.value;
+            }
+            if (event.type === 'html') {
+                data.content = event.value;
+            }
+            if (event.type === 'scss') {
+                data.styles = event.value;
+            }
+            this.saveContentPage(data);
+        };
+        ContentPageEditorComponent.prototype.saveContentPage = function (data) {
+            var _this = this;
+            this.config.saveContentPage(Object.assign({ id: this.contentPage.id }, data))
+                .pipe(operators.tap(function (contentPage) {
+                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
+                _this._cdRef.markForCheck();
+                _this._message.success('Saved Changes');
+            }))
+                .subscribe();
+        };
+        ContentPageEditorComponent.prototype.openSettings = function () {
+            var _this = this;
+            this._dialog.open(ContentPageComponent, {
+                data: {
+                    contentPage: this.contentPage,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (contentPage) {
+                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentPageEditorComponent;
+    }());
+    ContentPageEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentPageEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageEditorComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog *fsSkeletonForm=\"contentPage\">\n  <h1 mat-dialog-title>\n    <div class=\"title-container\">\n      <div class=\"title\">\n        Page Editor\n        <div class=\"small\">{{contentPage.name}}</div>   \n      </div>\n      <a\n          (click)=\"openSettings()\"\n          mat-icon-button>\n        <mat-icon>settings</mat-icon>\n      </a>   \n    </div>\n  </h1>\n  <div mat-dialog-content>\n    <app-editor\n      [contentConfig]=\"config\"\n      [showHtml]=\"editors.html\"\n      [showJs]=\"editors.js\"\n      [showScss]=\"editors.scss\"\n      [showGlobalScss]=\"editors.globalScss\"\n      [html]=\"contentPage.content\"\n      [scss]=\"contentPage.styles\"\n      [js]=\"contentPage.js\"\n      (changed)=\"editorChanged($event)\">\n    </app-editor>\n  </div>\n\n  <div mat-dialog-actions>\n    <fs-form-dialog-actions\n      [save]=\"false\"\n      [done]=\"true\">\n    </fs-form-dialog-actions>\n    <div class=\"toggles\">\n      <mat-button-toggle-group multiple>\n        <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n        <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n        <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n        <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n      </mat-button-toggle-group>      \n    </div>\n  </div>\n</fs-dialog>\n\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$2.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i5__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed"] }, { type: i7__namespace$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { 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: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-page-editor.component.html',
+                        styleUrls: ['./content-page-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 }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }];
+        } });
+
     var FsContentPagesComponent = /** @class */ (function () {
         function FsContentPagesComponent(_config, _dialog) {
             this._config = _config;
             this._dialog = _dialog;
-            this.pageTypes = i12.index(PageTypes, 'value', 'name');
+            this.pageTypes = i7$2.index(PageTypes, 'value', 'name');
             this._destroy$ = new rxjs.Subject();
         }
         FsContentPagesComponent.prototype.ngOnInit = function () {
@@ -588,18 +740,11 @@
         };
         FsContentPagesComponent.prototype.openEditor = function (contentPage) {
             var _this = this;
-            this._dialog.open(EditorComponent, {
+            this._dialog.open(ContentPageEditorComponent, {
                 data: {
                     contentPage: contentPage,
                     config: this._config,
-                    title: 'Page',
                     contentConfig: this._config,
-                    save: function (data) {
-                        return _this._config.saveContentPage(data);
-                    },
-                    openSettings: function (data) {
-                        return _this.openContentPage(data);
-                    },
                 },
                 maxWidth: '100vw',
                 width: '100%',
@@ -681,7 +826,7 @@
         return FsContentPagesComponent;
     }());
     FsContentPagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\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(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$1.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsContentPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\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(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$2.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -699,7 +844,7 @@
                     type: i0.Input
                 }], listComponent: [{
                     type: i0.ViewChild,
-                    args: [i2$1.FsListComponent]
+                    args: [i2$2.FsListComponent]
                 }] } });
 
     var FsContentPagesModule = /** @class */ (function () {
@@ -714,68 +859,72 @@
     }());
     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: [i10$1.CommonModule,
-            i7$1.FormsModule,
+            ContentPageComponent,
+            ContentPageEditorComponent], imports: [i10.CommonModule,
+            i7.FormsModule,
             i1.MatDialogModule,
-            i8$1.MatInputModule,
-            i4$1.MatFormFieldModule,
-            i4.MatButtonModule,
+            i8$2.MatInputModule,
+            i4$2.MatFormFieldModule,
+            i4$1.MatButtonModule,
             tabs.MatTabsModule,
             i5.MatIconModule,
-            i5$2.MatSelectModule,
-            i10.MatButtonToggleModule,
-            i2$1.FsListModule,
-            i3$1.FsDateModule,
-            i5$1.FsFormModule,
-            i7.FsLabelModule,
-            i13.FsSkeletonModule,
+            i5$1.MatSelectModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i3$2.FsDateModule,
+            i7$2.FsCommonModule,
+            i7$1.FsFormModule,
+            i3.FsLabelModule,
+            i8.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
-            i3.FsDialogModule,
-            i8.FsTextEditorModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
             FsContentEditorModule], exports: [FsContentPagesComponent] });
     FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
-                i10$1.CommonModule,
-                i7$1.FormsModule,
+                i10.CommonModule,
+                i7.FormsModule,
                 i1.MatDialogModule,
-                i8$1.MatInputModule,
-                i4$1.MatFormFieldModule,
-                i4.MatButtonModule,
+                i8$2.MatInputModule,
+                i4$2.MatFormFieldModule,
+                i4$1.MatButtonModule,
                 tabs.MatTabsModule,
                 i5.MatIconModule,
-                i5$2.MatSelectModule,
-                i10.MatButtonToggleModule,
-                i2$1.FsListModule,
-                i3$1.FsDateModule,
-                i5$1.FsFormModule,
-                i7.FsLabelModule,
-                i13.FsSkeletonModule,
+                i5$1.MatSelectModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i3$2.FsDateModule,
+                i7$2.FsCommonModule,
+                i7$1.FsFormModule,
+                i3.FsLabelModule,
+                i8.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
-                i3.FsDialogModule,
-                i8.FsTextEditorModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
                 FsContentEditorModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i10$1.CommonModule,
-                            i7$1.FormsModule,
+                            i10.CommonModule,
+                            i7.FormsModule,
                             i1.MatDialogModule,
-                            i8$1.MatInputModule,
-                            i4$1.MatFormFieldModule,
-                            i4.MatButtonModule,
+                            i8$2.MatInputModule,
+                            i4$2.MatFormFieldModule,
+                            i4$1.MatButtonModule,
                             tabs.MatTabsModule,
                             i5.MatIconModule,
-                            i5$2.MatSelectModule,
-                            i10.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i3$1.FsDateModule,
-                            i5$1.FsFormModule,
-                            i7.FsLabelModule,
-                            i13.FsSkeletonModule,
+                            i5$1.MatSelectModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i3$2.FsDateModule,
+                            i7$2.FsCommonModule,
+                            i7$1.FsFormModule,
+                            i3.FsLabelModule,
+                            i8.FsSkeletonModule,
                             htmlEditor.FsHtmlEditorModule,
-                            i3.FsDialogModule,
-                            i8.FsTextEditorModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
                             FsContentEditorModule,
                         ],
                         exports: [
@@ -784,6 +933,7 @@
                         declarations: [
                             FsContentPagesComponent,
                             ContentPageComponent,
+                            ContentPageEditorComponent,
                         ],
                     }]
             }] });
@@ -827,7 +977,7 @@
         return ContentStyleComponent;
     }());
     ContentStyleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentStyleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: i8.FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: i5$1.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], components: [{ type: i8__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i13__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    ContentStyleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: i4.FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: i7$1.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], components: [{ type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -843,10 +993,10 @@
                         }] }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
         }, propDecorators: { textEditors: [{
                     type: i0.ViewChild,
-                    args: [i8.FsTextEditorComponent]
+                    args: [i4.FsTextEditorComponent]
                 }], form: [{
                     type: i0.ViewChild,
-                    args: [i5$1.FsFormDirective]
+                    args: [i7$1.FsFormDirective]
                 }], height: [{
                     type: i0.Input
                 }] } });
@@ -857,32 +1007,32 @@
         return FsContentStyleModule;
     }());
     FsContentStyleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentStyleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, declarations: [ContentStyleComponent], imports: [i10$1.CommonModule,
-            i7$1.FormsModule,
-            i4.MatButtonModule,
-            i8.FsTextEditorModule,
-            i13.FsSkeletonModule,
-            i12.FsCommonModule,
+    FsContentStyleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, declarations: [ContentStyleComponent], imports: [i10.CommonModule,
+            i7.FormsModule,
+            i4$1.MatButtonModule,
+            i4.FsTextEditorModule,
+            i8.FsSkeletonModule,
+            i7$2.FsCommonModule,
             FsContentEditorModule], exports: [ContentStyleComponent] });
     FsContentStyleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, imports: [[
-                i10$1.CommonModule,
-                i7$1.FormsModule,
-                i4.MatButtonModule,
-                i8.FsTextEditorModule,
-                i13.FsSkeletonModule,
-                i12.FsCommonModule,
+                i10.CommonModule,
+                i7.FormsModule,
+                i4$1.MatButtonModule,
+                i4.FsTextEditorModule,
+                i8.FsSkeletonModule,
+                i7$2.FsCommonModule,
                 FsContentEditorModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i10$1.CommonModule,
-                            i7$1.FormsModule,
-                            i4.MatButtonModule,
-                            i8.FsTextEditorModule,
-                            i13.FsSkeletonModule,
-                            i12.FsCommonModule,
+                            i10.CommonModule,
+                            i7.FormsModule,
+                            i4$1.MatButtonModule,
+                            i4.FsTextEditorModule,
+                            i8.FsSkeletonModule,
+                            i7$2.FsCommonModule,
                             FsContentEditorModule,
                         ],
                         exports: [
@@ -950,8 +1100,8 @@
         };
         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 }, { token: i3__namespace$2.HtmlRenderer }], 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" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", styles: [""], directives: [{ type: i10__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$3.HtmlRenderer }], 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" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", 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: [{
@@ -960,7 +1110,7 @@
                         styleUrls: ['./content-renderer.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$2.HtmlRenderer }]; }, propDecorators: { script: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$3.HtmlRenderer }]; }, propDecorators: { script: [{
                     type: i0.ViewChild,
                     args: ['script', { read: i0.ElementRef }]
                 }], contentPage: [{
@@ -1006,7 +1156,7 @@
             var _this = this;
             this._loadContent();
             this._router.events
-                .pipe(operators.filter(function (e) { return e instanceof i2$2.NavigationEnd; }), operators.takeUntil(this._destroy$))
+                .pipe(operators.filter(function (e) { return e instanceof i2$3.NavigationEnd; }), operators.takeUntil(this._destroy$))
                 .subscribe(function (e) {
                 _this._loadContent();
             });
@@ -1032,8 +1182,8 @@
         };
         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 }, { token: i3__namespace$2.HtmlRenderer }], 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: "<ng-container *ngIf=\"contentPage\">\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n</ng-container>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    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$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$3.HtmlRenderer }], 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: "<ng-container *ngIf=\"contentPage\">\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n</ng-container>", 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: [{
@@ -1046,7 +1196,7 @@
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$2.HtmlRenderer }];
+                        }] }, { type: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$3.HtmlRenderer }];
         } });
 
     var FsContentModule = /** @class */ (function () {
@@ -1056,17 +1206,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: [i10$1.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: [[
-                i10$1.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: [
-                            i10$1.CommonModule,
+                            i10.CommonModule,
                             htmlEditor.FsHtmlEditorModule,
                         ],
                         exports: [