@firestitch/content 12.2.1 → 12.2.3

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/button-toggle'), require('@angular/material/dialog'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/html-editor'), require('@firestitch/label'), require('@firestitch/list'), require('@firestitch/skeleton'), require('@firestitch/text-editor'), require('rxjs'), require('rxjs/operators'), require('@firestitch/message'), require('@angular/material/core'), require('@firestitch/common'), require('@firestitch/filter'), require('@angular/router'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/content', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/dialog', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/html-editor', '@firestitch/label', '@firestitch/list', '@firestitch/skeleton', '@firestitch/text-editor', 'rxjs', 'rxjs/operators', '@firestitch/message', '@angular/material/core', '@firestitch/common', '@firestitch/filter', '@angular/router', '@angular/platform-browser'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.content = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.dialog, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.i3$1, global.i3, global.i7$1, global.htmlEditor, global.i6$1, global.i2$1, global.i8, global.i7, global.rxjs, global.rxjs.operators, global.i2, global.ng.material.core, global.common, global.filter, global.ng.router, global.ng.platformBrowser));
-})(this, (function (exports, i10, i0, i9, i4$1, i9$1, i1, i4, i5$1, i11, i5, tabs, i3$1, i3, i7$1, htmlEditor, i6$1, i2$1, i8, i7, rxjs, operators, i2, i6, common, filter, i2$2, i1$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/button'), require('@angular/material/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';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -22,98 +22,261 @@
         return Object.freeze(n);
     }
 
-    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i10__namespace$1 = /*#__PURE__*/_interopNamespace(i10$1);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
-    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i9__namespace$1 = /*#__PURE__*/_interopNamespace(i9$1);
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7$1);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
-    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
     var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7$1);
-    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i7__namespace$1 = /*#__PURE__*/_interopNamespace(i7);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    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 i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
 
-    var PageType;
-    (function (PageType) {
-        PageType["StandardPage"] = "standardPage";
-        PageType["BlogPost"] = "blogPost";
-        PageType["HomePage"] = "homePage";
-        PageType["NotFoundPage"] = "notFoundPage";
-    })(PageType || (PageType = {}));
+    var EditorComponent = /** @class */ (function () {
+        function EditorComponent(_data, _dialogRef, _message, _cdRef) {
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._cdRef = _cdRef;
+            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)
+                .subscribe(function (contentStyle) {
+                _this.contentStyle = contentStyle;
+                _this._message.success('Saved Changes');
+                _this._cdRef.markForCheck();
+            });
+        };
+        EditorComponent.prototype.initTextEditors = function () {
+            this.scssConfig = {
+                tabSize: 2,
+                language: 'scss',
+                height: '100%',
+            };
+            this.jsConfig = {
+                tabSize: 2,
+                language: 'js',
+                height: '100%',
+            };
+            this.htmlConfig = {
+                tabSize: 2,
+                language: 'html',
+                height: '100%',
+            };
+            this.globalScssConfig = {
+                tabSize: 2,
+                language: 'scss',
+                height: '100%',
+            };
+        };
+        EditorComponent.prototype.initGlobalContentStyle = function () {
+            var _this = this;
+            this._config.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._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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './editor.component.html',
+                        styleUrls: ['./editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        } });
 
-    var PageTypes = [
-        { name: 'Standard Page', value: PageType.StandardPage },
-        { name: 'Home Page', value: PageType.HomePage },
-        { name: 'Not Found Page', value: PageType.NotFoundPage },
-        { name: 'Blog Post', value: PageType.BlogPost },
-    ];
+    var FsContentEditorModule = /** @class */ (function () {
+        function FsContentEditorModule() {
+        }
+        return FsContentEditorModule;
+    }());
+    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10$1.CommonModule,
+            i7$1.FormsModule,
+            i1.MatDialogModule,
+            i4.MatButtonModule,
+            tabs.MatTabsModule,
+            i5.MatIconModule,
+            i10.MatButtonToggleModule,
+            i2$1.FsListModule,
+            i5$1.FsFormModule,
+            i13.FsSkeletonModule,
+            i7.FsLabelModule,
+            htmlEditor.FsHtmlEditorModule,
+            i12.FsCommonModule,
+            i3.FsDialogModule,
+            i8.FsTextEditorModule,
+            i6.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,
+                i1.MatDialogModule,
+                i4.MatButtonModule,
+                tabs.MatTabsModule,
+                i5.MatIconModule,
+                i10.MatButtonToggleModule,
+                i2$1.FsListModule,
+                i5$1.FsFormModule,
+                i13.FsSkeletonModule,
+                i7.FsLabelModule,
+                htmlEditor.FsHtmlEditorModule,
+                i12.FsCommonModule,
+                i3.FsDialogModule,
+                i8.FsTextEditorModule,
+                i6.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,
+                            i1.MatDialogModule,
+                            i4.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i5.MatIconModule,
+                            i10.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i5$1.FsFormModule,
+                            i13.FsSkeletonModule,
+                            i7.FsLabelModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i12.FsCommonModule,
+                            i3.FsDialogModule,
+                            i8.FsTextEditorModule,
+                            i6.AngularSplitModule,
+                        ],
+                        exports: [
+                            EditorComponent,
+                        ],
+                        declarations: [
+                            EditorComponent,
+                        ],
+                    }]
+            }] });
 
     var FS_CONTENT_CONFIG = new i0.InjectionToken('fs-content-config');
 
-    var ContentPageComponent = /** @class */ (function () {
-        function ContentPageComponent(_config, _data, _dialogRef, _message, _cdRef) {
+    var ContentLayoutComponent = /** @class */ (function () {
+        function ContentLayoutComponent(_config, _data, _dialogRef, _message, _cdRef) {
             var _this = this;
             this._config = _config;
             this._data = _data;
             this._dialogRef = _dialogRef;
             this._message = _message;
             this._cdRef = _cdRef;
-            this.contentPage = null;
-            this.PageTypes = PageTypes;
+            this.contentLayout = null;
             this.editors = { content: true, styles: true };
             this._destroy$ = new rxjs.Subject();
             this.save = function () {
-                return _this._config.saveContentPage(_this.contentPage)
-                    .pipe(operators.tap(function (contentPage) {
+                return _this._config.saveContentLayout(_this.contentLayout)
+                    .pipe(operators.tap(function (contentLayout) {
                     _this._message.success('Saved Changes');
-                    _this._dialogRef.close(contentPage);
+                    _this._dialogRef.close(contentLayout);
                 }));
             };
         }
-        ContentPageComponent.prototype.ngOnInit = function () {
-            this._dialogRef.updateSize('600px');
+        ContentLayoutComponent.prototype.ngOnInit = function () {
             this._fetchData();
         };
-        ContentPageComponent.prototype.ngOnDestroy = function () {
+        ContentLayoutComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
         };
-        ContentPageComponent.prototype._fetchData = function () {
+        ContentLayoutComponent.prototype._fetchData = function () {
             var _this = this;
-            this._config.loadContentLayouts()
-                .subscribe(function (contentLayouts) {
-                _this.contentLayouts = contentLayouts;
-                _this._cdRef.markForCheck();
-            });
-            rxjs.of(this._data.contentPage)
-                .pipe(operators.switchMap(function (contentPage) {
-                return rxjs.of(contentPage);
+            rxjs.of(this._data.contentLayout)
+                .pipe(operators.switchMap(function (contentLayout) {
+                return rxjs.of(contentLayout);
             }), operators.takeUntil(this._destroy$))
-                .subscribe(function (contentPage) {
-                _this.contentPage = Object.assign({}, contentPage);
+                .subscribe(function (contentLayout) {
+                _this.contentLayout = Object.assign({}, contentLayout);
                 _this._cdRef.markForCheck();
             });
         };
-        return ContentPageComponent;
+        return ContentLayoutComponent;
     }());
-    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: i7.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.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], 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: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: 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: [{
+    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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        templateUrl: './content-page.component.html',
-                        styleUrls: ['./content-page.component.scss'],
+                        templateUrl: './content-layout.component.html',
+                        styleUrls: ['./content-layout.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
@@ -126,216 +289,298 @@
                         }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
         }, propDecorators: { textEditors: [{
                     type: i0.ViewChildren,
-                    args: [i7.FsTextEditorComponent]
+                    args: [i8.FsTextEditorComponent]
                 }] } });
 
-    var EditorComponent = /** @class */ (function () {
-        function EditorComponent(_data, _dialogRef, _dialog, _message, _cdRef) {
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
+    var FsContentLayoutsComponent = /** @class */ (function () {
+        function FsContentLayoutsComponent(_config, _dialog) {
+            this._config = _config;
             this._dialog = _dialog;
-            this._message = _message;
-            this._cdRef = _cdRef;
-            this.resizing = false;
-            this.editors = { content: true, styles: true };
             this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return _this._config.saveContentPage({
-                    id: _this.contentPage.id,
-                    styles: _this.contentPage.styles,
-                    content: _this.contentPage.content,
-                })
-                    .pipe(operators.tap(function (contentPage) {
-                    _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
-                    _this._cdRef.markForCheck();
-                    _this._message.success('Saved Changes');
-                }));
-            };
         }
-        EditorComponent.prototype.ngOnInit = function () {
-            this.contentPage = this._data.contentPage;
-            this._config = this._data.config;
-            this._initSeparator();
-        };
-        EditorComponent.prototype.editorToggleChange = function (event) {
-            this.editors[event.value] = !this.editors[event.value];
-            this.updateEditorLayouts();
-        };
-        EditorComponent.prototype.updateEditorLayouts = function () {
-            var _this = this;
-            setTimeout(function () {
-                if (_this.editors.content) {
-                    _this.contentEditor.updateLayout();
-                }
-                if (_this.editors.styles) {
-                    _this.styleEditor.updateLayout();
-                }
-            });
-        };
-        EditorComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        EditorComponent.prototype.stylesChanged = function () {
-            this.form.triggerSubmit();
-        };
-        EditorComponent.prototype.contentChanged = function () {
-            this.form.triggerSubmit();
+        FsContentLayoutsComponent.prototype.ngOnInit = function () {
+            this._initListConfig();
         };
-        EditorComponent.prototype.openSettings = function () {
+        FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
             var _this = this;
-            this._dialog.open(ContentPageComponent, {
+            this._dialog.open(EditorComponent, {
+                maxWidth: '100vw',
+                width: '100%',
+                height: '100%',
                 data: {
-                    contentPage: this.contentPage,
+                    contentPage: contentLayout,
+                    title: 'Layout',
+                    contentConfig: this._config,
+                    save: function (data) {
+                        return _this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
+                    },
+                    openSettings: function (data) {
+                        return _this.openLayout(data);
+                    },
                 },
             })
                 .afterClosed()
                 .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (contentPage) {
-                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
-                _this._cdRef.markForCheck();
+                .subscribe(function () {
+                _this.listComponent.reload();
             });
         };
-        EditorComponent.prototype._initSeparator = function () {
-            var _this = this;
-            rxjs.fromEvent(this.separator.nativeElement, 'mousedown')
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (e) {
-                _this._moveSeparator(e);
-            });
+        FsContentLayoutsComponent.prototype.openLayout = function (contentLayout) {
+            return this._dialog.open(ContentLayoutComponent, {
+                data: {
+                    contentLayout: contentLayout,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.filter(function (_contentLayout) { return !!_contentLayout; }), operators.takeUntil(this._destroy$));
         };
-        EditorComponent.prototype._moveSeparator = function (separatorEvent) {
+        FsContentLayoutsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsContentLayoutsComponent.prototype._initListConfig = function () {
             var _this = this;
-            var mouseDown = {
-                clientX: separatorEvent.clientX,
-                clientY: separatorEvent.clientY,
-                offsetLeft: Number(this.separator.nativeElement.offsetLeft),
-                offsetTop: Number(this.separator.nativeElement.offsetTop),
-                firstWidth: Number(this.contentContainer.nativeElement.offsetWidth),
-                secondWidth: Number(this.styleContainer.nativeElement.offsetWidth),
+            this.listConfig = {
+                paging: false,
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                ],
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.openLayout({})
+                                .subscribe(function () {
+                                _this.listComponent.reload();
+                            });
+                        },
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (data) {
+                            return _this._config.deleteContentLayout(data);
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this record?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                    },
+                ],
+                fetch: function (query) {
+                    return _this._config.loadContentLayouts(query)
+                        .pipe(operators.map(function (contentLayouts) {
+                        return { data: contentLayouts };
+                    }));
+                },
+                restore: {
+                    query: { state: 'deleted' },
+                    filterLabel: 'Show Deleted',
+                    menuLabel: 'Restore',
+                    reload: true,
+                    click: function (row) {
+                        return _this._config.saveContentLayout({ id: row.id, state: 'active' });
+                    },
+                },
             };
-            this.resizing = true;
-            this._cdRef.markForCheck();
-            rxjs.fromEvent(document, 'mousemove')
-                .pipe(operators.finalize(function () {
-                mouseDown = null;
-                _this.resizing = false;
-                _this._cdRef.markForCheck();
-                _this.updateEditorLayouts();
-            }), operators.takeUntil(rxjs.fromEvent(this.separator.nativeElement, 'mouseup')
-                .pipe(operators.take(1), operators.takeUntil(this._destroy$))), operators.takeUntil(this._destroy$))
-                .subscribe(function (e) {
-                var delta = { x: e.clientX - mouseDown.clientX,
-                    y: e.clientY - mouseDown.clientY };
-                delta.x = Math.min(Math.max(delta.x, -mouseDown.firstWidth), mouseDown.secondWidth);
-                _this.separator.nativeElement.style.left = mouseDown.offsetLeft + delta.x + "px";
-                _this.contentContainer.nativeElement.style.width = mouseDown.firstWidth + delta.x + "px";
-                _this.styleContainer.nativeElement.style.width = mouseDown.secondWidth - delta.x + "px";
-            });
         };
-        return EditorComponent;
+        return FsContentLayoutsComponent;
     }());
-    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: i1__namespace.MatDialog }, { 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", viewQueries: [{ propertyName: "form", first: true, predicate: i7$1.FsFormDirective, descendants: true }, { propertyName: "styleEditor", first: true, predicate: ["styleEditor"], descendants: true }, { propertyName: "contentEditor", first: true, predicate: ["contentEditor"], descendants: true }, { propertyName: "separator", first: true, predicate: ["separator"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: i0.ElementRef, static: true }, { propertyName: "styleContainer", first: true, predicate: ["styleContainer"], descendants: true, read: i0.ElementRef, static: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page\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        <div class=\"editors\" [ngClass]=\"{ resizing: resizing, 'separator-enabled': editors.styles && editors.content }\">\n          <div #contentContainer class=\"editor editor-content\" [ngClass]=\"{ 'content-enabled': editors.content }\">\n            <fs-label>Content</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                #contentEditor\n                [(ngModel)]=\"contentPage.content\" \n                (blur)=\"contentChanged()\"\n                name=\"content\"\n                [config]=\"{ tabSize: 2, language: 'html' }\">\n              </fs-text-editor>              \n            </div>\n          </div>\n          <div  \n            #separator\n            class=\"separator\">\n            <mat-icon>drag_indicator</mat-icon>\n          </div>\n          <div \n              #styleContainer \n              class=\"editor editor-styles\" \n              [ngClass]=\"{ 'styles-enabled': editors.styles }\"\n              [style.width]=\"'600px'\">\n            <fs-label>Styles</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                #styleEditor\n                [(ngModel)]=\"contentPage.styles\" \n                (blur)=\"stylesChanged()\"\n                name=\"styles\"\n                [config]=\"{  tabSize: 2, language: 'scss' }\">\n              </fs-text-editor>    \n            </div>\n          </div>    \n        </div>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions\n        [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=\"content\" [checked]=\"editors.content\" (change)=\"editorToggleChange($event)\">Content</mat-button-toggle>\n          <mat-button-toggle value=\"styles\" [checked]=\"editors.styles\" (change)=\"editorToggleChange($event)\">Styles</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div>\n  </fs-dialog>\n</form>\n\n", styles: ["form{display:block;height:100%}form fs-dialog{display:flex;flex-direction:column;height:100%}form ::ng-deep .mat-dialog-content{max-height:none;flex:1}.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}.editors{width:5000px;max-width:100%;height:100%;display:flex;min-height:0}.editors:not(.separator-enabled) .separator{display:none}.editors:not(.separator-enabled) .editor{width:100%!important}.editors .separator{display:flex;align-items:center;justify-content:center;cursor:col-resize;background-color:#fff;width:40px;height:100%;-webkit-user-select:none;user-select:none;flex-shrink:0}.editors .editor{height:100%;display:flex;min-width:0;width:100%;flex-direction:column}.editors .editor.editor-styles:not(.styles-enabled),.editors .editor.editor-content:not(.content-enabled){display:none}.editors .editor .editor-container{height:100%;overflow:hidden;background:#1E1E1E;border-radius:5px}.editors .editor .editor-container fs-text-editor{display:block}.editors .editor+.editor{margin-left:20px}.editors .editor fs-label{background-color:#fff;padding-bottom:5px}.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$1.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i7__namespace$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i9__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], 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: i10__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9__namespace$1.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: EditorComponent, decorators: [{
+    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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        templateUrl: './editor.component.html',
-                        styleUrls: ['./editor.component.scss'],
+                        selector: 'fs-content-layouts',
+                        templateUrl: './content-layouts.component.html',
+                        styleUrls: ['./content-layouts.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: i1__namespace.MatDialog }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { form: [{
-                    type: i0.ViewChild,
-                    args: [i7$1.FsFormDirective]
-                }], styleEditor: [{
-                    type: i0.ViewChild,
-                    args: ['styleEditor']
-                }], contentEditor: [{
-                    type: i0.ViewChild,
-                    args: ['contentEditor']
-                }], separator: [{
-                    type: i0.ViewChild,
-                    args: ['separator', { static: true, read: i0.ElementRef }]
-                }], contentContainer: [{
-                    type: i0.ViewChild,
-                    args: ['contentContainer', { static: true, read: i0.ElementRef }]
-                }], styleContainer: [{
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { listComponent: [{
                     type: i0.ViewChild,
-                    args: ['styleContainer', { static: true, read: i0.ElementRef }]
+                    args: [i2$1.FsListComponent]
                 }] } });
 
-    var FsContentEditorModule = /** @class */ (function () {
-        function FsContentEditorModule() {
+    var FsContentLayoutsModule = /** @class */ (function () {
+        function FsContentLayoutsModule() {
         }
-        return FsContentEditorModule;
+        return FsContentLayoutsModule;
     }());
-    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
-            i9.FormsModule,
+    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,
             i1.MatDialogModule,
-            i4$1.MatButtonModule,
+            i8$1.MatInputModule,
+            i4$1.MatFormFieldModule,
+            i4.MatButtonModule,
             tabs.MatTabsModule,
-            i5$1.MatIconModule,
-            i9$1.MatButtonToggleModule,
+            i5.MatIconModule,
+            i5$2.MatSelectModule,
+            i10.MatButtonToggleModule,
             i2$1.FsListModule,
-            i7$1.FsFormModule,
-            i6$1.FsLabelModule,
+            i3$1.FsDateModule,
+            i5$1.FsFormModule,
+            i7.FsLabelModule,
+            i13.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
             i3.FsDialogModule,
-            i7.FsTextEditorModule], exports: [EditorComponent] });
-    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
+            i8.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,
                 i1.MatDialogModule,
-                i4$1.MatButtonModule,
+                i8$1.MatInputModule,
+                i4$1.MatFormFieldModule,
+                i4.MatButtonModule,
                 tabs.MatTabsModule,
-                i5$1.MatIconModule,
-                i9$1.MatButtonToggleModule,
+                i5.MatIconModule,
+                i5$2.MatSelectModule,
+                i10.MatButtonToggleModule,
                 i2$1.FsListModule,
-                i7$1.FsFormModule,
-                i6$1.FsLabelModule,
+                i3$1.FsDateModule,
+                i5$1.FsFormModule,
+                i7.FsLabelModule,
+                i13.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
                 i3.FsDialogModule,
-                i7.FsTextEditorModule,
+                i8.FsTextEditorModule,
+                FsContentEditorModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            i4$1.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i5$1.MatIconModule,
-                            i9$1.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i7$1.FsFormModule,
-                            i6$1.FsLabelModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i3.FsDialogModule,
-                            i7.FsTextEditorModule,
-                        ],
-                        exports: [
-                            EditorComponent,
-                        ],
-                        declarations: [
-                            EditorComponent,
-                        ],
+                        imports: [
+                            i10$1.CommonModule,
+                            i7$1.FormsModule,
+                            i1.MatDialogModule,
+                            i8$1.MatInputModule,
+                            i4$1.MatFormFieldModule,
+                            i4.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i5.MatIconModule,
+                            i5$2.MatSelectModule,
+                            i10.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i3$1.FsDateModule,
+                            i5$1.FsFormModule,
+                            i7.FsLabelModule,
+                            i13.FsSkeletonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3.FsDialogModule,
+                            i8.FsTextEditorModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            FsContentLayoutsComponent,
+                        ],
+                        declarations: [
+                            ContentLayoutComponent,
+                            FsContentLayoutsComponent,
+                        ],
+                    }]
+            }] });
+
+    var PageType;
+    (function (PageType) {
+        PageType["StandardPage"] = "standardPage";
+        PageType["BlogPost"] = "blogPost";
+        PageType["HomePage"] = "homePage";
+        PageType["NotFoundPage"] = "notFoundPage";
+    })(PageType || (PageType = {}));
+
+    var PageTypes = [
+        { name: 'Standard Page', value: PageType.StandardPage },
+        { name: 'Home Page', value: PageType.HomePage },
+        { name: 'Not Found Page', value: PageType.NotFoundPage },
+        { name: 'Blog Post', value: PageType.BlogPost },
+    ];
+
+    var ContentPageComponent = /** @class */ (function () {
+        function ContentPageComponent(_config, _data, _dialogRef, _message, _cdRef) {
+            var _this = this;
+            this._config = _config;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._cdRef = _cdRef;
+            this.contentPage = null;
+            this.PageTypes = PageTypes;
+            this.editors = { content: true, styles: true };
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return _this._config.saveContentPage(_this.contentPage)
+                    .pipe(operators.tap(function (contentPage) {
+                    _this._message.success('Saved Changes');
+                    _this._dialogRef.close(contentPage);
+                }));
+            };
+        }
+        ContentPageComponent.prototype.ngOnInit = function () {
+            this._dialogRef.updateSize('600px');
+            this._fetchData();
+        };
+        ContentPageComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentPageComponent.prototype._fetchData = function () {
+            var _this = this;
+            this._config.loadContentLayouts()
+                .subscribe(function (contentLayouts) {
+                _this.contentLayouts = contentLayouts;
+                _this._cdRef.markForCheck();
+            });
+            rxjs.of(this._data.contentPage)
+                .pipe(operators.switchMap(function (contentPage) {
+                return rxjs.of(contentPage);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function (contentPage) {
+                _this.contentPage = Object.assign({}, contentPage);
+                _this._cdRef.markForCheck();
+            });
+        };
+        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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-page.component.html',
+                        styleUrls: ['./content-page.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }] });
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i8.FsTextEditorComponent]
+                }] } });
 
     var FsContentPagesComponent = /** @class */ (function () {
         function FsContentPagesComponent(_config, _dialog) {
             this._config = _config;
             this._dialog = _dialog;
-            this.pageTypes = common.index(PageTypes, 'value', 'name');
+            this.pageTypes = i12.index(PageTypes, 'value', 'name');
             this._destroy$ = new rxjs.Subject();
         }
         FsContentPagesComponent.prototype.ngOnInit = function () {
@@ -347,9 +592,16 @@
                 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',
-                maxHeight: '100vw',
                 width: '100%',
                 height: '100%',
                 autoFocus: false,
@@ -364,6 +616,13 @@
             this._destroy$.next();
             this._destroy$.complete();
         };
+        FsContentPagesComponent.prototype.openContentPage = function (contentPage) {
+            return this._dialog.open(ContentPageComponent, {
+                data: { contentPage: contentPage },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$));
+        };
         FsContentPagesComponent.prototype._initListConfig = function () {
             var _this = this;
             this.listConfig = {
@@ -378,15 +637,10 @@
                     {
                         label: 'Create',
                         click: function () {
-                            _this._dialog.open(ContentPageComponent, {
-                                data: {
-                                    contentPage: {
-                                        type: PageType.StandardPage,
-                                    },
-                                },
+                            _this.openContentPage({
+                                type: PageType.StandardPage,
                             })
-                                .afterClosed()
-                                .pipe(operators.filter(function (contentPage) { return !!contentPage; }), operators.takeUntil(_this._destroy$))
+                                .pipe(operators.filter(function (contentPage) { return !!contentPage; }))
                                 .subscribe(function (contentPage) {
                                 _this.openEditor(contentPage);
                                 _this.listComponent.reload();
@@ -460,68 +714,68 @@
     }());
     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.CommonModule,
-            i9.FormsModule,
+            ContentPageComponent], imports: [i10$1.CommonModule,
+            i7$1.FormsModule,
             i1.MatDialogModule,
-            i11.MatInputModule,
-            i4.MatFormFieldModule,
-            i4$1.MatButtonModule,
+            i8$1.MatInputModule,
+            i4$1.MatFormFieldModule,
+            i4.MatButtonModule,
             tabs.MatTabsModule,
-            i5$1.MatIconModule,
-            i5.MatSelectModule,
-            i9$1.MatButtonToggleModule,
+            i5.MatIconModule,
+            i5$2.MatSelectModule,
+            i10.MatButtonToggleModule,
             i2$1.FsListModule,
             i3$1.FsDateModule,
-            i7$1.FsFormModule,
-            i6$1.FsLabelModule,
-            i8.FsSkeletonModule,
+            i5$1.FsFormModule,
+            i7.FsLabelModule,
+            i13.FsSkeletonModule,
             htmlEditor.FsHtmlEditorModule,
             i3.FsDialogModule,
-            i7.FsTextEditorModule,
+            i8.FsTextEditorModule,
             FsContentEditorModule], exports: [FsContentPagesComponent] });
     FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
+                i10$1.CommonModule,
+                i7$1.FormsModule,
                 i1.MatDialogModule,
-                i11.MatInputModule,
-                i4.MatFormFieldModule,
-                i4$1.MatButtonModule,
+                i8$1.MatInputModule,
+                i4$1.MatFormFieldModule,
+                i4.MatButtonModule,
                 tabs.MatTabsModule,
-                i5$1.MatIconModule,
-                i5.MatSelectModule,
-                i9$1.MatButtonToggleModule,
+                i5.MatIconModule,
+                i5$2.MatSelectModule,
+                i10.MatButtonToggleModule,
                 i2$1.FsListModule,
                 i3$1.FsDateModule,
-                i7$1.FsFormModule,
-                i6$1.FsLabelModule,
-                i8.FsSkeletonModule,
+                i5$1.FsFormModule,
+                i7.FsLabelModule,
+                i13.FsSkeletonModule,
                 htmlEditor.FsHtmlEditorModule,
                 i3.FsDialogModule,
-                i7.FsTextEditorModule,
+                i8.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.CommonModule,
-                            i9.FormsModule,
+                            i10$1.CommonModule,
+                            i7$1.FormsModule,
                             i1.MatDialogModule,
-                            i11.MatInputModule,
-                            i4.MatFormFieldModule,
-                            i4$1.MatButtonModule,
+                            i8$1.MatInputModule,
+                            i4$1.MatFormFieldModule,
+                            i4.MatButtonModule,
                             tabs.MatTabsModule,
-                            i5$1.MatIconModule,
-                            i5.MatSelectModule,
-                            i9$1.MatButtonToggleModule,
+                            i5.MatIconModule,
+                            i5$2.MatSelectModule,
+                            i10.MatButtonToggleModule,
                             i2$1.FsListModule,
                             i3$1.FsDateModule,
-                            i7$1.FsFormModule,
-                            i6$1.FsLabelModule,
-                            i8.FsSkeletonModule,
+                            i5$1.FsFormModule,
+                            i7.FsLabelModule,
+                            i13.FsSkeletonModule,
                             htmlEditor.FsHtmlEditorModule,
                             i3.FsDialogModule,
-                            i7.FsTextEditorModule,
+                            i8.FsTextEditorModule,
                             FsContentEditorModule,
                         ],
                         exports: [
@@ -534,290 +788,131 @@
                     }]
             }] });
 
-    var ContentLayoutComponent = /** @class */ (function () {
-        function ContentLayoutComponent(_config, _data, _dialogRef, _message, _cdRef) {
-            var _this = this;
+    var ContentStyleComponent = /** @class */ (function () {
+        function ContentStyleComponent(_config, _message, _cdRef) {
             this._config = _config;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
             this._message = _message;
             this._cdRef = _cdRef;
-            this.contentLayout = null;
-            this.editors = { content: true, styles: true };
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return _this._config.saveContentLayout(_this.contentLayout)
-                    .pipe(operators.tap(function (contentLayout) {
-                    _this._message.success('Saved Changes');
-                    _this._dialogRef.close(contentLayout);
-                }));
+            this.height = '100%';
+            this.contentStyle = null;
+            this.styleConfig = {
+                tabSize: 2,
+                language: 'scss',
+                height: '100%',
             };
-        }
-        ContentLayoutComponent.prototype.ngOnInit = function () {
-            this._fetchData();
-        };
-        ContentLayoutComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentLayoutComponent.prototype._fetchData = function () {
-            var _this = this;
-            rxjs.of(this._data.contentLayout)
-                .pipe(operators.switchMap(function (contentLayout) {
-                return rxjs.of(contentLayout);
-            }), operators.takeUntil(this._destroy$))
-                .subscribe(function (contentLayout) {
-                _this.contentLayout = Object.assign({}, contentLayout);
-                _this._cdRef.markForCheck();
-            });
-        };
-        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: i7.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.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], 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: i11__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i7__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './content-layout.component.html',
-                        styleUrls: ['./content-layout.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { textEditors: [{
-                    type: i0.ViewChildren,
-                    args: [i7.FsTextEditorComponent]
-                }] } });
-
-    var FsContentLayoutsComponent = /** @class */ (function () {
-        function FsContentLayoutsComponent(_config, _dialog) {
-            this._config = _config;
-            this._dialog = _dialog;
             this._destroy$ = new rxjs.Subject();
         }
-        FsContentLayoutsComponent.prototype.ngOnInit = function () {
-            this._initListConfig();
-        };
-        FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
-            var _this = this;
-            this._dialog.open(EditorComponent, {
-                maxWidth: null,
-                maxHeight: null,
-                data: {
-                    styles: contentLayout.styles,
-                    content: contentLayout.content,
-                    save: function (data) {
-                        return _this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
-                    },
-                },
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.listComponent.reload();
-            });
-        };
-        FsContentLayoutsComponent.prototype.openLayout = function (contentLayout) {
+        ContentStyleComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this._dialog.open(ContentLayoutComponent, {
-                data: {
-                    contentLayout: contentLayout,
-                },
-            })
-                .afterClosed()
-                .pipe(operators.filter(function (_contentLayout) { return !!_contentLayout; }), operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.listComponent.reload();
+            this.styleConfig.height = this.height;
+            this._config.loadContentStyle()
+                .subscribe(function (contentStyle) {
+                _this.contentStyle = contentStyle;
+                _this._cdRef.markForCheck();
             });
         };
-        FsContentLayoutsComponent.prototype.ngOnDestroy = function () {
+        ContentStyleComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
         };
-        FsContentLayoutsComponent.prototype._initListConfig = function () {
+        ContentStyleComponent.prototype.save = function () {
             var _this = this;
-            this.listConfig = {
-                paging: false,
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search',
-                    },
-                ],
-                actions: [
-                    {
-                        label: 'Create',
-                        click: function () {
-                            _this.openLayout({});
-                        },
-                    },
-                ],
-                rowActions: [
-                    {
-                        click: function (data) {
-                            return _this._config.deleteContentLayout(data);
-                        },
-                        remove: {
-                            title: 'Confirm',
-                            template: 'Are you sure you would like to delete this record?',
-                        },
-                        menu: true,
-                        label: 'Delete',
-                    },
-                ],
-                fetch: function (query) {
-                    return _this._config.loadContentLayouts(query)
-                        .pipe(operators.map(function (contentLayouts) {
-                        return { data: contentLayouts };
-                    }));
-                },
-                restore: {
-                    query: { state: 'deleted' },
-                    filterLabel: 'Show Deleted',
-                    menuLabel: 'Restore',
-                    reload: true,
-                    click: function (row) {
-                        return _this._config.saveContentLayout({ id: row.id, state: 'active' });
-                    },
-                },
-            };
+            this._config.saveContentStyle(this.contentStyle)
+                .pipe(operators.tap(function (contentStyle) {
+                _this.contentStyle = Object.assign(Object.assign({}, _this.contentStyle), contentStyle);
+                _this._cdRef.markForCheck();
+                _this._message.success('Saved Changes');
+            })).subscribe();
         };
-        return FsContentLayoutsComponent;
+        return ContentStyleComponent;
     }());
-    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=\"design\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\"><mat-icon>design_services</mat-icon></a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openLayout(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"] }, { type: i5__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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 });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
+    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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'fs-content-layouts',
-                        templateUrl: './content-layouts.component.html',
-                        styleUrls: ['./content-layouts.component.scss'],
+                        selector: 'fs-content-style',
+                        templateUrl: './content-style.component.html',
+                        styleUrls: ['./content-style.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
             return [{ type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }];
-        }, propDecorators: { listComponent: [{
+                        }] }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
                     type: i0.ViewChild,
-                    args: [i2$1.FsListComponent]
+                    args: [i8.FsTextEditorComponent]
+                }], form: [{
+                    type: i0.ViewChild,
+                    args: [i5$1.FsFormDirective]
+                }], height: [{
+                    type: i0.Input
                 }] } });
 
-    var FsContentLayoutsModule = /** @class */ (function () {
-        function FsContentLayoutsModule() {
+    var FsContentStyleModule = /** @class */ (function () {
+        function FsContentStyleModule() {
         }
-        return FsContentLayoutsModule;
+        return FsContentStyleModule;
     }());
-    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.CommonModule,
-            i9.FormsModule,
-            i1.MatDialogModule,
-            i11.MatInputModule,
-            i4.MatFormFieldModule,
-            i4$1.MatButtonModule,
-            tabs.MatTabsModule,
-            i5$1.MatIconModule,
-            i5.MatSelectModule,
-            i9$1.MatButtonToggleModule,
-            i2$1.FsListModule,
-            i3$1.FsDateModule,
-            i7$1.FsFormModule,
-            i6$1.FsLabelModule,
-            i8.FsSkeletonModule,
-            htmlEditor.FsHtmlEditorModule,
-            i3.FsDialogModule,
-            i7.FsTextEditorModule,
-            FsContentEditorModule], exports: [FsContentLayoutsComponent] });
-    FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
-                i1.MatDialogModule,
-                i11.MatInputModule,
-                i4.MatFormFieldModule,
-                i4$1.MatButtonModule,
-                tabs.MatTabsModule,
-                i5$1.MatIconModule,
-                i5.MatSelectModule,
-                i9$1.MatButtonToggleModule,
-                i2$1.FsListModule,
-                i3$1.FsDateModule,
-                i7$1.FsFormModule,
-                i6$1.FsLabelModule,
-                i8.FsSkeletonModule,
-                htmlEditor.FsHtmlEditorModule,
-                i3.FsDialogModule,
-                i7.FsTextEditorModule,
+    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,
+            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,
                 FsContentEditorModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            i11.MatInputModule,
-                            i4.MatFormFieldModule,
-                            i4$1.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i5$1.MatIconModule,
-                            i5.MatSelectModule,
-                            i9$1.MatButtonToggleModule,
-                            i2$1.FsListModule,
-                            i3$1.FsDateModule,
-                            i7$1.FsFormModule,
-                            i6$1.FsLabelModule,
-                            i8.FsSkeletonModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i3.FsDialogModule,
-                            i7.FsTextEditorModule,
+                            i10$1.CommonModule,
+                            i7$1.FormsModule,
+                            i4.MatButtonModule,
+                            i8.FsTextEditorModule,
+                            i13.FsSkeletonModule,
+                            i12.FsCommonModule,
                             FsContentEditorModule,
                         ],
                         exports: [
-                            FsContentLayoutsComponent,
+                            ContentStyleComponent,
                         ],
                         declarations: [
-                            ContentLayoutComponent,
-                            FsContentLayoutsComponent,
+                            ContentStyleComponent,
                         ],
                     }]
             }] });
 
     var ContentRendererComponent = /** @class */ (function () {
-        function ContentRendererComponent(_sanitizer, _router, _el) {
+        function ContentRendererComponent(_sanitizer, _router, _el, _htmlRenderer) {
             this._sanitizer = _sanitizer;
             this._router = _router;
             this._el = _el;
+            this._htmlRenderer = _htmlRenderer;
             this._destroy$ = new rxjs.Subject();
         }
-        Object.defineProperty(ContentRendererComponent.prototype, "contentPage", {
-            set: function (contentPage) {
-                if (contentPage) {
-                    this.content = this._sanitizer.bypassSecurityTrustHtml(contentPage.content);
-                    this.styles = contentPage.styles;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
+        ContentRendererComponent.prototype.ngOnInit = function () {
+            this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
+            this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
+        };
         ContentRendererComponent.prototype.ngAfterViewChecked = function () {
-            var el = document.querySelector('#contentPageStyles');
-            if (!el) {
-                el = document.createElement('style');
-                el.setAttribute('id', 'contentPageStyles');
-                document.getElementsByTagName('head')[0].appendChild(el);
-            }
-            el.innerHTML = this.styles;
             this.registerHrefs();
+            if (this.contentPage.js) {
+                var script = document.createElement('script');
+                script.text = this.contentPage.js;
+                this.script.nativeElement.after(script);
+            }
         };
         ContentRendererComponent.prototype.registerHrefs = function () {
             var _this = this;
@@ -855,8 +950,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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i10__namespace.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$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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -865,29 +960,58 @@
                         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 }]; }, propDecorators: { contentPage: [{
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$2.HtmlRenderer }]; }, propDecorators: { script: [{
+                    type: i0.ViewChild,
+                    args: ['script', { read: i0.ElementRef }]
+                }], contentPage: [{
                     type: i0.Input
                 }] } });
 
     var FsContentComponent = /** @class */ (function () {
-        function FsContentComponent(_config, _title, _cdRef, _router, _el) {
+        function FsContentComponent(_config, _title, _cdRef, _router, _el, _htmlRenderer) {
             this._config = _config;
             this._title = _title;
             this._cdRef = _cdRef;
             this._router = _router;
             this._el = _el;
+            this._htmlRenderer = _htmlRenderer;
             this._destroy$ = new rxjs.Subject();
         }
         FsContentComponent.prototype.ngOnInit = function () {
+            this._initContent();
+            this._initStyles();
+        };
+        Object.defineProperty(FsContentComponent.prototype, "el", {
+            get: function () {
+                return this._el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FsContentComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+            this._title.setTitle('');
+        };
+        FsContentComponent.prototype._initStyles = function () {
+            var _this = this;
+            if (this._config.loadContentStyleCss) {
+                this._config.loadContentStyleCss()
+                    .subscribe(function (styles) {
+                    _this._htmlRenderer.addStyle(styles, { id: 'content-sytle' });
+                });
+            }
+        };
+        FsContentComponent.prototype._initContent = function () {
             var _this = this;
-            this.load();
+            this._loadContent();
             this._router.events
                 .pipe(operators.filter(function (e) { return e instanceof i2$2.NavigationEnd; }), operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.load();
+                .subscribe(function (e) {
+                _this._loadContent();
             });
         };
-        FsContentComponent.prototype.load = function () {
+        FsContentComponent.prototype._loadContent = function () {
             var _this = this;
             var path = window.location.pathname;
             this._config.loadContent(path)
@@ -906,22 +1030,10 @@
                 _this._cdRef.markForCheck();
             });
         };
-        Object.defineProperty(FsContentComponent.prototype, "el", {
-            get: function () {
-                return this._el.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FsContentComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-            this._title.setTitle('');
-        };
         return FsContentComponent;
     }());
-    FsContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace$1.Title }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$2.Router }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace.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$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 });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -934,7 +1046,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: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$2.HtmlRenderer }];
         } });
 
     var FsContentModule = /** @class */ (function () {
@@ -944,17 +1056,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.CommonModule,
+            ContentRendererComponent], imports: [i10$1.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.CommonModule,
+                i10$1.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.CommonModule,
+                            i10$1.CommonModule,
                             htmlEditor.FsHtmlEditorModule,
                         ],
                         exports: [
@@ -971,6 +1083,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.ContentStyleComponent = ContentStyleComponent;
     exports.FS_CONTENT_CONFIG = FS_CONTENT_CONFIG;
     exports.FsContentComponent = FsContentComponent;
     exports.FsContentLayoutsComponent = FsContentLayoutsComponent;
@@ -978,6 +1091,7 @@
     exports.FsContentModule = FsContentModule;
     exports.FsContentPagesComponent = FsContentPagesComponent;
     exports.FsContentPagesModule = FsContentPagesModule;
+    exports.FsContentStyleModule = FsContentStyleModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });