@firestitch/content 12.2.1 → 12.2.3

package/fesm2015/firestitch-content.js

@@ -1,232 +1,146 @@
-import * as i10 from '@angular/common';
+import * as i10$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Inject, ViewChildren, ElementRef, ViewChild, NgModule, Input } from '@angular/core';
-import * as i9 from '@angular/forms';
+import { Component, ChangeDetectionStrategy, Inject, NgModule, InjectionToken, ViewChildren, ViewChild, Input, ElementRef } from '@angular/core';
+import * as i7$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i4$1 from '@angular/material/button';
+import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i9$1 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i4 from '@angular/material/form-field';
+import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i11 from '@angular/material/input';
+import * as i8$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i3$1 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
 import * as i3 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i7 from '@firestitch/form';
-import { FsFormDirective, FsFormModule } from '@firestitch/form';
+import * as i5$1 from '@firestitch/form';
+import { FsFormModule, FsFormDirective } from '@firestitch/form';
 import { FsHtmlEditorModule } from '@firestitch/html-editor';
-import * as i6$1 from '@firestitch/label';
-import { FsLabelModule } from '@firestitch/label';
 import * as i2$1 from '@firestitch/list';
 import { FsListModule, FsListComponent } from '@firestitch/list';
-import * as i8 from '@firestitch/skeleton';
+import * as i8 from '@firestitch/text-editor';
+import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
+import * as i10 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import * as i13 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i7$1 from '@firestitch/text-editor';
-import { FsTextEditorComponent, FsTextEditorModule } from '@firestitch/text-editor';
+import * as i12 from '@firestitch/common';
+import { FsCommonModule, index } from '@firestitch/common';
+import * as i6 from 'angular-split';
+import { AngularSplitModule } from 'angular-split';
 import * as i2 from '@firestitch/message';
-import { Subject, of, fromEvent } from 'rxjs';
-import { tap, switchMap, takeUntil, finalize, take, filter, map } from 'rxjs/operators';
-import * as i6 from '@angular/material/core';
-import { index } from '@firestitch/common';
+import { Subject, of } from 'rxjs';
+import { tap, takeUntil, switchMap, filter, map } from 'rxjs/operators';
 import { ItemType } from '@firestitch/filter';
+import * as i6$1 from '@angular/material/core';
 import * as i1$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
-
-var PageType;
-(function (PageType) {
-    PageType["StandardPage"] = "standardPage";
-    PageType["BlogPost"] = "blogPost";
-    PageType["HomePage"] = "homePage";
-    PageType["NotFoundPage"] = "notFoundPage";
-})(PageType || (PageType = {}));
-
-const 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 },
-];
-
-const FS_CONTENT_CONFIG = new InjectionToken('fs-content-config');
-
-class ContentPageComponent {
-    constructor(_config, _data, _dialogRef, _message, _cdRef) {
-        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 Subject();
-        this.save = () => {
-            return this._config.saveContentPage(this.contentPage)
-                .pipe(tap((contentPage) => {
-                this._message.success('Saved Changes');
-                this._dialogRef.close(contentPage);
-            }));
-        };
-    }
-    ngOnInit() {
-        this._dialogRef.updateSize('600px');
-        this._fetchData();
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _fetchData() {
-        this._config.loadContentLayouts()
-            .subscribe((contentLayouts) => {
-            this.contentLayouts = contentLayouts;
-            this._cdRef.markForCheck();
-        });
-        of(this._data.contentPage)
-            .pipe(switchMap((contentPage) => {
-            return of(contentPage);
-        }), takeUntil(this._destroy$))
-            .subscribe((contentPage) => {
-            this.contentPage = Object.assign({}, contentPage);
-            this._cdRef.markForCheck();
-        });
-    }
-}
-ContentPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ContentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.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.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.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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './content-page.component.html',
-                    styleUrls: ['./content-page.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_CONTENT_CONFIG]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textEditors: [{
-                type: ViewChildren,
-                args: [FsTextEditorComponent]
-            }] } });
+import * as i3$2 from '@firestitch/body';
 
 class EditorComponent {
-    constructor(_data, _dialogRef, _dialog, _message, _cdRef) {
+    constructor(_data, _dialogRef, _message, _cdRef) {
         this._data = _data;
         this._dialogRef = _dialogRef;
-        this._dialog = _dialog;
         this._message = _message;
         this._cdRef = _cdRef;
         this.resizing = false;
-        this.editors = { content: true, styles: true };
-        this._destroy$ = new Subject();
-        this.save = () => {
-            return this._config.saveContentPage({
-                id: this.contentPage.id,
-                styles: this.contentPage.styles,
-                content: this.contentPage.content,
-            })
-                .pipe(tap((contentPage) => {
-                this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
-                this._cdRef.markForCheck();
-                this._message.success('Saved Changes');
-            }));
+        this.editors = {
+            html: true,
+            scss: true,
+            js: false,
+            globalScss: false,
         };
+        this._destroy$ = new Subject();
     }
     ngOnInit() {
+        this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
+        this.title = this._data.title;
         this.contentPage = this._data.contentPage;
-        this._config = this._data.config;
-        this._initSeparator();
+        this._config = this._data.contentConfig;
+        this._save = this._data.save;
+        this.initTextEditors();
+        this.initGlobalContentStyle();
     }
     editorToggleChange(event) {
         this.editors[event.value] = !this.editors[event.value];
-        this.updateEditorLayouts();
-    }
-    updateEditorLayouts() {
-        setTimeout(() => {
-            if (this.editors.content) {
-                this.contentEditor.updateLayout();
-            }
-            if (this.editors.styles) {
-                this.styleEditor.updateLayout();
-            }
-        });
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    stylesChanged() {
-        this.form.triggerSubmit();
+    globalScssChange() {
+        this._config.saveContentStyle(this.contentStyle)
+            .subscribe((contentStyle) => {
+            this.contentStyle = contentStyle;
+            this._message.success('Saved Changes');
+            this._cdRef.markForCheck();
+        });
     }
-    contentChanged() {
-        this.form.triggerSubmit();
+    initTextEditors() {
+        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%',
+        };
     }
-    openSettings() {
-        this._dialog.open(ContentPageComponent, {
-            data: {
-                contentPage: this.contentPage,
-            },
+    initGlobalContentStyle() {
+        this._config.loadContentStyle()
+            .subscribe((contentStyle) => {
+            this.contentStyle = contentStyle;
+            this._cdRef.markForCheck();
+        });
+    }
+    saveContentPage() {
+        this._save({
+            id: this.contentPage.id,
+            styles: this.contentPage.styles,
+            content: this.contentPage.content,
+            js: this.contentPage.js,
         })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((contentPage) => {
+            .pipe(tap((contentPage) => {
             this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
             this._cdRef.markForCheck();
-        });
+            this._message.success('Saved Changes');
+        }))
+            .subscribe();
     }
-    _initSeparator() {
-        fromEvent(this.separator.nativeElement, 'mousedown')
+    openSettings() {
+        this._data.openSettings(this.contentPage)
             .pipe(takeUntil(this._destroy$))
-            .subscribe((e) => {
-            this._moveSeparator(e);
-        });
-    }
-    _moveSeparator(separatorEvent) {
-        let 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.resizing = true;
-        this._cdRef.markForCheck();
-        fromEvent(document, 'mousemove')
-            .pipe(finalize(() => {
-            mouseDown = null;
-            this.resizing = false;
+            .subscribe((contentPage) => {
+            this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
             this._cdRef.markForCheck();
-            this.updateEditorLayouts();
-        }), takeUntil(fromEvent(this.separator.nativeElement, 'mouseup')
-            .pipe(take(1), takeUntil(this._destroy$))), takeUntil(this._destroy$))
-            .subscribe((e) => {
-            const 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`;
         });
     }
 }
-EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i1.MatDialog }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: 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: ElementRef, static: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "styleContainer", first: true, predicate: ["styleContainer"], descendants: true, read: ElementRef, static: true }], ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6$1.FsLabelComponent, selector: "fs-label" }, { type: i7$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i9$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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.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.FsLabelComponent, selector: "fs-label" }, { type: i8.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { type: i5$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { type: i10.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$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.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i13.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i10.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -237,25 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i1.MatDialog }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
-                type: ViewChild,
-                args: [FsFormDirective]
-            }], styleEditor: [{
-                type: ViewChild,
-                args: ['styleEditor']
-            }], contentEditor: [{
-                type: ViewChild,
-                args: ['contentEditor']
-            }], separator: [{
-                type: ViewChild,
-                args: ['separator', { static: true, read: ElementRef }]
-            }], contentContainer: [{
-                type: ViewChild,
-                args: ['contentContainer', { static: true, read: ElementRef }]
-            }], styleContainer: [{
-                type: ViewChild,
-                args: ['styleContainer', { static: true, read: ElementRef }]
-            }] } });
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; } });
 
 class FsContentEditorModule {
 }
@@ -269,10 +165,13 @@ FsContentEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", v
         MatButtonToggleModule,
         FsListModule,
         FsFormModule,
+        FsSkeletonModule,
         FsLabelModule,
         FsHtmlEditorModule,
+        FsCommonModule,
         FsDialogModule,
-        FsTextEditorModule], exports: [EditorComponent] });
+        FsTextEditorModule,
+        AngularSplitModule], exports: [EditorComponent] });
 FsContentEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, imports: [[
             CommonModule,
             FormsModule,
@@ -283,10 +182,13 @@ FsContentEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
             MatButtonToggleModule,
             FsListModule,
             FsFormModule,
+            FsSkeletonModule,
             FsLabelModule,
             FsHtmlEditorModule,
+            FsCommonModule,
             FsDialogModule,
             FsTextEditorModule,
+            AngularSplitModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, decorators: [{
             type: NgModule,
@@ -301,10 +203,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MatButtonToggleModule,
                         FsListModule,
                         FsFormModule,
+                        FsSkeletonModule,
                         FsLabelModule,
                         FsHtmlEditorModule,
+                        FsCommonModule,
                         FsDialogModule,
                         FsTextEditorModule,
+                        AngularSplitModule,
                     ],
                     exports: [
                         EditorComponent,
@@ -315,40 +220,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-class FsContentPagesComponent {
+const FS_CONTENT_CONFIG = new InjectionToken('fs-content-config');
+
+class ContentLayoutComponent {
+    constructor(_config, _data, _dialogRef, _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 Subject();
+        this.save = () => {
+            return this._config.saveContentLayout(this.contentLayout)
+                .pipe(tap((contentLayout) => {
+                this._message.success('Saved Changes');
+                this._dialogRef.close(contentLayout);
+            }));
+        };
+    }
+    ngOnInit() {
+        this._fetchData();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _fetchData() {
+        of(this._data.contentLayout)
+            .pipe(switchMap((contentLayout) => {
+            return of(contentLayout);
+        }), takeUntil(this._destroy$))
+            .subscribe((contentLayout) => {
+            this.contentLayout = Object.assign({}, contentLayout);
+            this._cdRef.markForCheck();
+        });
+    }
+}
+ContentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ContentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i13.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8$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$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$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i5$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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './content-layout.component.html',
+                    styleUrls: ['./content-layout.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textEditors: [{
+                type: ViewChildren,
+                args: [FsTextEditorComponent]
+            }] } });
+
+class FsContentLayoutsComponent {
     constructor(_config, _dialog) {
         this._config = _config;
         this._dialog = _dialog;
-        this.pageTypes = index(PageTypes, 'value', 'name');
         this._destroy$ = new Subject();
     }
     ngOnInit() {
         this._initListConfig();
     }
-    openEditor(contentPage) {
+    openEditor(contentLayout) {
         this._dialog.open(EditorComponent, {
-            data: {
-                contentPage,
-                config: this._config,
-            },
             maxWidth: '100vw',
-            maxHeight: '100vw',
             width: '100%',
             height: '100%',
-            autoFocus: false,
+            data: {
+                contentPage: contentLayout,
+                title: 'Layout',
+                contentConfig: this._config,
+                save: (data) => {
+                    return this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
+                },
+                openSettings: (data) => {
+                    return this.openLayout(data);
+                },
+            },
         })
             .afterClosed()
-            .pipe(filter((_contentPage) => !!_contentPage), takeUntil(this._destroy$))
+            .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
             this.listComponent.reload();
         });
     }
+    openLayout(contentLayout) {
+        return this._dialog.open(ContentLayoutComponent, {
+            data: {
+                contentLayout,
+            },
+        })
+            .afterClosed()
+            .pipe(filter((_contentLayout) => !!_contentLayout), takeUntil(this._destroy$));
+    }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
     _initListConfig() {
         this.listConfig = {
+            paging: false,
             filters: [
                 {
                     name: 'keyword',
@@ -360,17 +337,8 @@ class FsContentPagesComponent {
                 {
                     label: 'Create',
                     click: () => {
-                        this._dialog.open(ContentPageComponent, {
-                            data: {
-                                contentPage: {
-                                    type: PageType.StandardPage,
-                                },
-                            },
-                        })
-                            .afterClosed()
-                            .pipe(filter((contentPage) => !!contentPage), takeUntil(this._destroy$))
-                            .subscribe((contentPage) => {
-                            this.openEditor(contentPage);
+                        this.openLayout({})
+                            .subscribe(() => {
                             this.listComponent.reload();
                         });
                     },
@@ -379,7 +347,7 @@ class FsContentPagesComponent {
             rowActions: [
                 {
                     click: (data) => {
-                        return this._config.deleteContentPage(data);
+                        return this._config.deleteContentLayout(data);
                     },
                     remove: {
                         title: 'Confirm',
@@ -390,9 +358,9 @@ class FsContentPagesComponent {
                 },
             ],
             fetch: (query) => {
-                return this._config.loadContentPages(query)
-                    .pipe(map((response) => {
-                    return { data: response.contentPages, paging: response.paging };
+                return this._config.loadContentLayouts(query)
+                    .pipe(map((contentLayouts) => {
+                    return { data: contentLayouts };
                 }));
             },
             restore: {
@@ -401,42 +369,35 @@ class FsContentPagesComponent {
                 menuLabel: 'Restore',
                 reload: true,
                 click: (row) => {
-                    return this._config.saveContentPage({ id: row.id, state: 'active' });
+                    return this._config.saveContentLayout({ id: row.id, state: 'active' });
                 },
             },
         };
     }
 }
-FsContentPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FsContentPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$1.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, decorators: [{
+FsContentLayoutsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsContentLayoutsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$1.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'fs-content-pages',
-                    templateUrl: './content-pages.component.html',
-                    styleUrls: ['./content-pages.component.scss'],
+                    selector: 'fs-content-layouts',
+                    templateUrl: './content-layouts.component.html',
+                    styleUrls: ['./content-layouts.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FS_CONTENT_CONFIG]
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { htmlEditorConfig: [{
-                type: Input
-            }], listComponent: [{
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { listComponent: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }] } });
 
-class FsContentPagesModule {
-    static forRoot() {
-        return {
-            ngModule: FsContentPagesModule,
-        };
-    }
+class FsContentLayoutsModule {
 }
-FsContentPagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
-        ContentPageComponent], imports: [CommonModule,
+FsContentLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
+        FsContentLayoutsComponent], imports: [CommonModule,
         FormsModule,
         MatDialogModule,
         MatInputModule,
@@ -454,8 +415,8 @@ FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         FsHtmlEditorModule,
         FsDialogModule,
         FsTextEditorModule,
-        FsContentEditorModule], exports: [FsContentPagesComponent] });
-FsContentPagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, imports: [[
+        FsContentEditorModule], exports: [FsContentLayoutsComponent] });
+FsContentLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, imports: [[
             CommonModule,
             FormsModule,
             MatDialogModule,
@@ -476,7 +437,7 @@ FsContentPagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             FsTextEditorModule,
             FsContentEditorModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -501,34 +462,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsContentEditorModule,
                     ],
                     exports: [
-                        FsContentPagesComponent,
+                        FsContentLayoutsComponent,
                     ],
                     declarations: [
-                        FsContentPagesComponent,
-                        ContentPageComponent,
+                        ContentLayoutComponent,
+                        FsContentLayoutsComponent,
                     ],
                 }]
         }] });
 
-class ContentLayoutComponent {
+var PageType;
+(function (PageType) {
+    PageType["StandardPage"] = "standardPage";
+    PageType["BlogPost"] = "blogPost";
+    PageType["HomePage"] = "homePage";
+    PageType["NotFoundPage"] = "notFoundPage";
+})(PageType || (PageType = {}));
+
+const 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 },
+];
+
+class ContentPageComponent {
     constructor(_config, _data, _dialogRef, _message, _cdRef) {
         this._config = _config;
         this._data = _data;
         this._dialogRef = _dialogRef;
         this._message = _message;
         this._cdRef = _cdRef;
-        this.contentLayout = null;
+        this.contentPage = null;
+        this.PageTypes = PageTypes;
         this.editors = { content: true, styles: true };
         this._destroy$ = new Subject();
         this.save = () => {
-            return this._config.saveContentLayout(this.contentLayout)
-                .pipe(tap((contentLayout) => {
+            return this._config.saveContentPage(this.contentPage)
+                .pipe(tap((contentPage) => {
                 this._message.success('Saved Changes');
-                this._dialogRef.close(contentLayout);
+                this._dialogRef.close(contentPage);
             }));
         };
     }
     ngOnInit() {
+        this._dialogRef.updateSize('600px');
         this._fetchData();
     }
     ngOnDestroy() {
@@ -536,23 +514,28 @@ class ContentLayoutComponent {
         this._destroy$.complete();
     }
     _fetchData() {
-        of(this._data.contentLayout)
-            .pipe(switchMap((contentLayout) => {
-            return of(contentLayout);
+        this._config.loadContentLayouts()
+            .subscribe((contentLayouts) => {
+            this.contentLayouts = contentLayouts;
+            this._cdRef.markForCheck();
+        });
+        of(this._data.contentPage)
+            .pipe(switchMap((contentPage) => {
+            return of(contentPage);
         }), takeUntil(this._destroy$))
-            .subscribe((contentLayout) => {
-            this.contentLayout = Object.assign({}, contentLayout);
+            .subscribe((contentPage) => {
+            this.contentPage = Object.assign({}, contentPage);
             this._cdRef.markForCheck();
         });
     }
 }
-ContentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ContentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i11.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i7.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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, decorators: [{
+ContentPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ContentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i13.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$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$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$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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, decorators: [{
             type: Component,
             args: [{
-                    templateUrl: './content-layout.component.html',
-                    styleUrls: ['./content-layout.component.scss'],
+                    templateUrl: './content-page.component.html',
+                    styleUrls: ['./content-page.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -566,41 +549,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [FsTextEditorComponent]
             }] } });
 
-class FsContentLayoutsComponent {
+class FsContentPagesComponent {
     constructor(_config, _dialog) {
         this._config = _config;
         this._dialog = _dialog;
+        this.pageTypes = index(PageTypes, 'value', 'name');
         this._destroy$ = new Subject();
     }
     ngOnInit() {
         this._initListConfig();
     }
-    openEditor(contentLayout) {
+    openEditor(contentPage) {
         this._dialog.open(EditorComponent, {
-            maxWidth: null,
-            maxHeight: null,
             data: {
-                styles: contentLayout.styles,
-                content: contentLayout.content,
+                contentPage,
+                config: this._config,
+                title: 'Page',
+                contentConfig: this._config,
                 save: (data) => {
-                    return this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
+                    return this._config.saveContentPage(data);
+                },
+                openSettings: (data) => {
+                    return this.openContentPage(data);
                 },
             },
+            maxWidth: '100vw',
+            width: '100%',
+            height: '100%',
+            autoFocus: false,
         })
             .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.listComponent.reload();
-        });
-    }
-    openLayout(contentLayout) {
-        this._dialog.open(ContentLayoutComponent, {
-            data: {
-                contentLayout,
-            },
-        })
-            .afterClosed()
-            .pipe(filter((_contentLayout) => !!_contentLayout), takeUntil(this._destroy$))
+            .pipe(filter((_contentPage) => !!_contentPage), takeUntil(this._destroy$))
             .subscribe(() => {
             this.listComponent.reload();
         });
@@ -609,9 +588,15 @@ class FsContentLayoutsComponent {
         this._destroy$.next();
         this._destroy$.complete();
     }
+    openContentPage(contentPage) {
+        return this._dialog.open(ContentPageComponent, {
+            data: { contentPage },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$));
+    }
     _initListConfig() {
         this.listConfig = {
-            paging: false,
             filters: [
                 {
                     name: 'keyword',
@@ -623,14 +608,21 @@ class FsContentLayoutsComponent {
                 {
                     label: 'Create',
                     click: () => {
-                        this.openLayout({});
+                        this.openContentPage({
+                            type: PageType.StandardPage,
+                        })
+                            .pipe(filter((contentPage) => !!contentPage))
+                            .subscribe((contentPage) => {
+                            this.openEditor(contentPage);
+                            this.listComponent.reload();
+                        });
                     },
                 },
             ],
             rowActions: [
                 {
                     click: (data) => {
-                        return this._config.deleteContentLayout(data);
+                        return this._config.deleteContentPage(data);
                     },
                     remove: {
                         title: 'Confirm',
@@ -641,9 +633,9 @@ class FsContentLayoutsComponent {
                 },
             ],
             fetch: (query) => {
-                return this._config.loadContentLayouts(query)
-                    .pipe(map((contentLayouts) => {
-                    return { data: contentLayouts };
+                return this._config.loadContentPages(query)
+                    .pipe(map((response) => {
+                    return { data: response.contentPages, paging: response.paging };
                 }));
             },
             restore: {
@@ -652,35 +644,42 @@ class FsContentLayoutsComponent {
                 menuLabel: 'Restore',
                 reload: true,
                 click: (row) => {
-                    return this._config.saveContentLayout({ id: row.id, state: 'active' });
+                    return this._config.saveContentPage({ id: row.id, state: 'active' });
                 },
             },
         };
     }
 }
-FsContentLayoutsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FsContentLayoutsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, 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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$1.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
+FsContentPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+FsContentPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$1.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'fs-content-layouts',
-                    templateUrl: './content-layouts.component.html',
-                    styleUrls: ['./content-layouts.component.scss'],
+                    selector: 'fs-content-pages',
+                    templateUrl: './content-pages.component.html',
+                    styleUrls: ['./content-pages.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FS_CONTENT_CONFIG]
-                }] }, { type: i1.MatDialog }]; }, propDecorators: { listComponent: [{
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { htmlEditorConfig: [{
+                type: Input
+            }], listComponent: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }] } });
 
-class FsContentLayoutsModule {
+class FsContentPagesModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentPagesModule,
+        };
+    }
 }
-FsContentLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
-        FsContentLayoutsComponent], imports: [CommonModule,
+FsContentPagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
+        ContentPageComponent], imports: [CommonModule,
         FormsModule,
         MatDialogModule,
         MatInputModule,
@@ -698,8 +697,8 @@ FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         FsHtmlEditorModule,
         FsDialogModule,
         FsTextEditorModule,
-        FsContentEditorModule], exports: [FsContentLayoutsComponent] });
-FsContentLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, imports: [[
+        FsContentEditorModule], exports: [FsContentPagesComponent] });
+FsContentPagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, imports: [[
             CommonModule,
             FormsModule,
             MatDialogModule,
@@ -720,7 +719,7 @@ FsContentLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             FsTextEditorModule,
             FsContentEditorModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -745,37 +744,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsContentEditorModule,
                     ],
                     exports: [
-                        FsContentLayoutsComponent,
+                        FsContentPagesComponent,
                     ],
                     declarations: [
-                        ContentLayoutComponent,
-                        FsContentLayoutsComponent,
+                        FsContentPagesComponent,
+                        ContentPageComponent,
+                    ],
+                }]
+        }] });
+
+class ContentStyleComponent {
+    constructor(_config, _message, _cdRef) {
+        this._config = _config;
+        this._message = _message;
+        this._cdRef = _cdRef;
+        this.height = '100%';
+        this.contentStyle = null;
+        this.styleConfig = {
+            tabSize: 2,
+            language: 'scss',
+            height: '100%',
+        };
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.styleConfig.height = this.height;
+        this._config.loadContentStyle()
+            .subscribe((contentStyle) => {
+            this.contentStyle = contentStyle;
+            this._cdRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    save() {
+        this._config.saveContentStyle(this.contentStyle)
+            .pipe(tap((contentStyle) => {
+            this.contentStyle = Object.assign(Object.assign({}, this.contentStyle), contentStyle);
+            this._cdRef.markForCheck();
+            this._message.success('Saved Changes');
+        })).subscribe();
+    }
+}
+ContentStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentStyleComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ContentStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, 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.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i13.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentStyleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-content-style',
+                    templateUrl: './content-style.component.html',
+                    styleUrls: ['./content-style.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textEditors: [{
+                type: ViewChild,
+                args: [FsTextEditorComponent]
+            }], form: [{
+                type: ViewChild,
+                args: [FsFormDirective]
+            }], height: [{
+                type: Input
+            }] } });
+
+class FsContentStyleModule {
+}
+FsContentStyleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentStyleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentStyleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentStyleModule, declarations: [ContentStyleComponent], imports: [CommonModule,
+        FormsModule,
+        MatButtonModule,
+        FsTextEditorModule,
+        FsSkeletonModule,
+        FsCommonModule,
+        FsContentEditorModule], exports: [ContentStyleComponent] });
+FsContentStyleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentStyleModule, imports: [[
+            CommonModule,
+            FormsModule,
+            MatButtonModule,
+            FsTextEditorModule,
+            FsSkeletonModule,
+            FsCommonModule,
+            FsContentEditorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentStyleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        FsTextEditorModule,
+                        FsSkeletonModule,
+                        FsCommonModule,
+                        FsContentEditorModule,
+                    ],
+                    exports: [
+                        ContentStyleComponent,
+                    ],
+                    declarations: [
+                        ContentStyleComponent,
                     ],
                 }]
         }] });
 
 class ContentRendererComponent {
-    constructor(_sanitizer, _router, _el) {
+    constructor(_sanitizer, _router, _el, _htmlRenderer) {
         this._sanitizer = _sanitizer;
         this._router = _router;
         this._el = _el;
+        this._htmlRenderer = _htmlRenderer;
         this._destroy$ = new Subject();
     }
-    set contentPage(contentPage) {
-        if (contentPage) {
-            this.content = this._sanitizer.bypassSecurityTrustHtml(contentPage.content);
-            this.styles = contentPage.styles;
-        }
+    ngOnInit() {
+        this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
+        this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
     }
     ngAfterViewChecked() {
-        let 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) {
+            const script = document.createElement('script');
+            script.text = this.contentPage.js;
+            this.script.nativeElement.after(script);
+        }
     }
     registerHrefs() {
         Array.from(this.el.querySelectorAll('a[href]'))
@@ -807,8 +901,8 @@ class ContentRendererComponent {
         }
     }
 }
-ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ContentRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$2.Router }, { token: i0.ElementRef }, { token: i3$2.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
+ContentRendererComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", styles: [""], directives: [{ type: i10$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -817,28 +911,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     styleUrls: ['./content-renderer.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$2.Router }, { type: i0.ElementRef }]; }, propDecorators: { contentPage: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$2.Router }, { type: i0.ElementRef }, { type: i3$2.HtmlRenderer }]; }, propDecorators: { script: [{
+                type: ViewChild,
+                args: ['script', { read: ElementRef }]
+            }], contentPage: [{
                 type: Input
             }] } });
 
 class FsContentComponent {
-    constructor(_config, _title, _cdRef, _router, _el) {
+    constructor(_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 Subject();
     }
     ngOnInit() {
-        this.load();
+        this._initContent();
+        this._initStyles();
+    }
+    get el() {
+        return this._el.nativeElement;
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._title.setTitle('');
+    }
+    _initStyles() {
+        if (this._config.loadContentStyleCss) {
+            this._config.loadContentStyleCss()
+                .subscribe((styles) => {
+                this._htmlRenderer.addStyle(styles, { id: 'content-sytle' });
+            });
+        }
+    }
+    _initContent() {
+        this._loadContent();
         this._router.events
             .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.load();
+            .subscribe((e) => {
+            this._loadContent();
         });
     }
-    load() {
+    _loadContent() {
         const path = window.location.pathname;
         this._config.loadContent(path)
             .subscribe((contentPage) => {
@@ -856,17 +974,9 @@ class FsContentComponent {
             this._cdRef.markForCheck();
         });
     }
-    get el() {
-        return this._el.nativeElement;
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-        this._title.setTitle('');
-    }
 }
-FsContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1$1.Title }, { token: i0.ChangeDetectorRef }, { token: i2$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-FsContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1$1.Title }, { token: i0.ChangeDetectorRef }, { token: i2$2.Router }, { token: i0.ElementRef }, { token: i3$2.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
+FsContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0, 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, decorators: [{
             type: Component,
             args: [{
@@ -878,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [FS_CONTENT_CONFIG]
-                }] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$2.Router }, { type: i0.ElementRef }]; } });
+                }] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$2.Router }, { type: i0.ElementRef }, { type: i3$2.HtmlRenderer }]; } });
 
 class FsContentModule {
 }
@@ -911,5 +1021,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FS_CONTENT_CONFIG, FsContentComponent, FsContentLayoutsComponent, FsContentLayoutsModule, FsContentModule, FsContentPagesComponent, FsContentPagesModule };
+export { ContentStyleComponent, FS_CONTENT_CONFIG, FsContentComponent, FsContentLayoutsComponent, FsContentLayoutsModule, FsContentModule, FsContentPagesComponent, FsContentPagesModule, FsContentStyleModule };
 //# sourceMappingURL=firestitch-content.js.map