@firestitch/content 12.2.8 → 12.2.9

package/bundles/firestitch-content.umd.js

@@ -48,1374 +48,1374 @@
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i3__namespace$4 = /*#__PURE__*/_interopNamespace(i3$4);
 
-    var EditorType;
-    (function (EditorType) {
-        EditorType["Js"] = "js";
-        EditorType["Html"] = "html";
-        EditorType["Scss"] = "scss";
-        EditorType["GlobalScss"] = "globalScss";
+    var EditorType;
+    (function (EditorType) {
+        EditorType["Js"] = "js";
+        EditorType["Html"] = "html";
+        EditorType["Scss"] = "scss";
+        EditorType["GlobalScss"] = "globalScss";
     })(EditorType || (EditorType = {}));
 
-    var PageType;
-    (function (PageType) {
-        PageType["StandardPage"] = "standardPage";
-        PageType["BlogPost"] = "blogPost";
-        PageType["HomePage"] = "homePage";
-        PageType["NotFoundPage"] = "notFoundPage";
+    var PageType;
+    (function (PageType) {
+        PageType["StandardPage"] = "standardPage";
+        PageType["BlogPost"] = "blogPost";
+        PageType["HomePage"] = "homePage";
+        PageType["NotFoundPage"] = "notFoundPage";
     })(PageType || (PageType = {}));
 
-    var EditorComponent = /** @class */ (function () {
-        function EditorComponent(_cdRef, _message) {
-            this._cdRef = _cdRef;
-            this._message = _message;
-            this.showHtml = false;
-            this.showScss = false;
-            this.showJs = false;
-            this.showGlobalScss = false;
-            this.changed = new i0.EventEmitter();
-            this.focused = new i0.EventEmitter();
-            this.blured = new i0.EventEmitter();
-            this.changes = {};
-            this.EditorType = EditorType;
-            this.resizing = false;
-            this._destroy$ = new rxjs.Subject();
-        }
-        EditorComponent.prototype.ngOnInit = function () {
-            this.initTextEditors();
-            this.initGlobalContentStyle();
-        };
-        EditorComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        EditorComponent.prototype.change = function (type, value) {
-            this.changed.emit({ type: type, value: value });
-            this.changes[type] = value;
-        };
-        Object.defineProperty(EditorComponent.prototype, "hasChanges", {
-            get: function () {
-                var _this = this;
-                return Object.keys(this.changes)
-                    .filter(function (name) { return !!_this.changes[name]; })
-                    .length !== 0;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        EditorComponent.prototype.clearChange = function (type) {
-            this.changes[type] = null;
-            this._cdRef.markForCheck();
-        };
-        EditorComponent.prototype.initTextEditors = function () {
-            var _this = this;
-            this.scssConfig = {
-                tabSize: 2,
-                language: 'scss',
-                height: '100%',
-                focus: function () {
-                    _this.focused.emit(EditorType.Scss);
-                },
-                blur: function () {
-                    _this.blured.emit(EditorType.Scss);
-                },
-            };
-            this.jsConfig = {
-                tabSize: 2,
-                language: 'js',
-                height: '100%',
-                focus: function () {
-                    _this.focused.emit(EditorType.Js);
-                },
-                blur: function () {
-                    _this.blured.emit(EditorType.Js);
-                },
-            };
-            this.htmlConfig = {
-                tabSize: 2,
-                language: 'html',
-                height: '100%',
-                focus: function () {
-                    _this.focused.emit(EditorType.Html);
-                },
-                blur: function () {
-                    _this.blured.emit(EditorType.Html);
-                },
-            };
-            this.globalScssConfig = {
-                tabSize: 2,
-                language: 'scss',
-                height: '100%',
-                focus: function () {
-                    _this.focused.emit(EditorType.GlobalScss);
-                },
-                blur: function () {
-                    _this.blured.emit(EditorType.GlobalScss);
-                },
-            };
-        };
-        EditorComponent.prototype.initGlobalContentStyle = function () {
-            var _this = this;
-            this.contentConfig.loadContentStyle()
-                .subscribe(function (contentStyle) {
-                _this.contentStyle = contentStyle || {};
-                _this._cdRef.markForCheck();
-            });
-        };
-        EditorComponent.prototype.saveGlobalScss = function () {
-            var _this = this;
-            return this.contentConfig.saveContentStyle(this.contentStyle)
-                .pipe(operators.tap(function () {
-                _this._message.success('Saved Changes');
-            }));
-        };
-        return EditorComponent;
-    }());
-    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "app-editor", inputs: { showHtml: "showHtml", showScss: "showScss", showJs: "showJs", showGlobalScss: "showGlobalScss", html: "html", scss: "scss", js: "js", contentConfig: "contentConfig" }, outputs: { changed: "changed", focused: "focused", blured: "blured" }, ngImport: i0__namespace, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <fs-label>HTML {{changes.html ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"html\" \n        name=\"html\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Html, $event)\"\n        [config]=\"htmlConfig\">\n      </fs-text-editor>              \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showScss\" [order]=\"2\">\n    <div class=\"editor-container\">\n      <fs-label>SCSS {{changes.scss ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"scss\" \n        name=\"scss\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Scss, $event)\"\n        [config]=\"scssConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\"  [visible]=\"showJs\" [order]=\"3\">\n    <div class=\"editor-container\">\n      <fs-label>JS {{changes.js ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"js\" \n        name=\"js\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Js, $event)\"\n        [config]=\"jsConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showGlobalScss\" [order]=\"4\">\n    <div class=\"editor-container\">\n      <fs-label>Global SCSS {{changes.globalScss ? '*' : ''}}</fs-label>\n      <ng-container *fsSkeleton=\"contentStyle\">\n        <fs-text-editor \n          [(ngModel)]=\"contentStyle.scss\" \n          name=\"globalScss\"\n          [fsModelChangeOptions]=\"{ debounce: 300 }\"\n          (fsModelChange)=\"change(EditorType.GlobalScss, $event)\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor> \n      </ng-container>   \n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host ::ng-deep .as-split-gutter{background-color:unset!important}.editor-container{height:100%;border-radius:5px;display:flex;flex-direction:column}.editor-container fs-text-editor{flex:1}\n"], components: [{ type: i2__namespace$1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { type: i3__namespace.FsLabelComponent, selector: "fs-label" }, { type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i2__namespace$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i8__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'app-editor',
-                        templateUrl: './editor.component.html',
-                        styleUrls: ['./editor.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }]; }, propDecorators: { showHtml: [{
-                    type: i0.Input
-                }], showScss: [{
-                    type: i0.Input
-                }], showJs: [{
-                    type: i0.Input
-                }], showGlobalScss: [{
-                    type: i0.Input
-                }], html: [{
-                    type: i0.Input
-                }], scss: [{
-                    type: i0.Input
-                }], js: [{
-                    type: i0.Input
-                }], contentConfig: [{
-                    type: i0.Input
-                }], changed: [{
-                    type: i0.Output
-                }], focused: [{
-                    type: i0.Output
-                }], blured: [{
-                    type: i0.Output
+    var EditorComponent = /** @class */ (function () {
+        function EditorComponent(_cdRef, _message) {
+            this._cdRef = _cdRef;
+            this._message = _message;
+            this.showHtml = false;
+            this.showScss = false;
+            this.showJs = false;
+            this.showGlobalScss = false;
+            this.changed = new i0.EventEmitter();
+            this.focused = new i0.EventEmitter();
+            this.blured = new i0.EventEmitter();
+            this.changes = {};
+            this.EditorType = EditorType;
+            this.resizing = false;
+            this._destroy$ = new rxjs.Subject();
+        }
+        EditorComponent.prototype.ngOnInit = function () {
+            this.initTextEditors();
+            this.initGlobalContentStyle();
+        };
+        EditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        EditorComponent.prototype.change = function (type, value) {
+            this.changed.emit({ type: type, value: value });
+            this.changes[type] = value;
+        };
+        Object.defineProperty(EditorComponent.prototype, "hasChanges", {
+            get: function () {
+                var _this = this;
+                return Object.keys(this.changes)
+                    .filter(function (name) { return !!_this.changes[name]; })
+                    .length !== 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        EditorComponent.prototype.clearChange = function (type) {
+            this.changes[type] = null;
+            this._cdRef.markForCheck();
+        };
+        EditorComponent.prototype.initTextEditors = function () {
+            var _this = this;
+            this.scssConfig = {
+                tabSize: 2,
+                language: 'scss',
+                height: '100%',
+                focus: function () {
+                    _this.focused.emit(EditorType.Scss);
+                },
+                blur: function () {
+                    _this.blured.emit(EditorType.Scss);
+                },
+            };
+            this.jsConfig = {
+                tabSize: 2,
+                language: 'js',
+                height: '100%',
+                focus: function () {
+                    _this.focused.emit(EditorType.Js);
+                },
+                blur: function () {
+                    _this.blured.emit(EditorType.Js);
+                },
+            };
+            this.htmlConfig = {
+                tabSize: 2,
+                language: 'html',
+                height: '100%',
+                focus: function () {
+                    _this.focused.emit(EditorType.Html);
+                },
+                blur: function () {
+                    _this.blured.emit(EditorType.Html);
+                },
+            };
+            this.globalScssConfig = {
+                tabSize: 2,
+                language: 'scss',
+                height: '100%',
+                focus: function () {
+                    _this.focused.emit(EditorType.GlobalScss);
+                },
+                blur: function () {
+                    _this.blured.emit(EditorType.GlobalScss);
+                },
+            };
+        };
+        EditorComponent.prototype.initGlobalContentStyle = function () {
+            var _this = this;
+            this.contentConfig.loadContentStyle()
+                .subscribe(function (contentStyle) {
+                _this.contentStyle = contentStyle || {};
+                _this._cdRef.markForCheck();
+            });
+        };
+        EditorComponent.prototype.saveGlobalScss = function () {
+            var _this = this;
+            return this.contentConfig.saveContentStyle(this.contentStyle)
+                .pipe(operators.tap(function () {
+                _this._message.success('Saved Changes');
+            }));
+        };
+        return EditorComponent;
+    }());
+    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "app-editor", inputs: { showHtml: "showHtml", showScss: "showScss", showJs: "showJs", showGlobalScss: "showGlobalScss", html: "html", scss: "scss", js: "js", contentConfig: "contentConfig" }, outputs: { changed: "changed", focused: "focused", blured: "blured" }, ngImport: i0__namespace, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <fs-label>HTML {{changes.html ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"html\" \n        name=\"html\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Html, $event)\"\n        [config]=\"htmlConfig\">\n      </fs-text-editor>              \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showScss\" [order]=\"2\">\n    <div class=\"editor-container\">\n      <fs-label>SCSS {{changes.scss ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"scss\" \n        name=\"scss\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Scss, $event)\"\n        [config]=\"scssConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\"  [visible]=\"showJs\" [order]=\"3\">\n    <div class=\"editor-container\">\n      <fs-label>JS {{changes.js ? '*' : ''}}</fs-label>\n      <fs-text-editor \n        [(ngModel)]=\"js\" \n        name=\"js\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Js, $event)\"\n        [config]=\"jsConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showGlobalScss\" [order]=\"4\">\n    <div class=\"editor-container\">\n      <fs-label>Global SCSS {{changes.globalScss ? '*' : ''}}</fs-label>\n      <ng-container *fsSkeleton=\"contentStyle\">\n        <fs-text-editor \n          [(ngModel)]=\"contentStyle.scss\" \n          name=\"globalScss\"\n          [fsModelChangeOptions]=\"{ debounce: 300 }\"\n          (fsModelChange)=\"change(EditorType.GlobalScss, $event)\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor> \n      </ng-container>   \n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host ::ng-deep .as-split-gutter{background-color:unset!important}.editor-container{height:100%;border-radius:5px;display:flex;flex-direction:column}.editor-container fs-text-editor{flex:1}\n"], components: [{ type: i2__namespace$1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { type: i3__namespace.FsLabelComponent, selector: "fs-label" }, { type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i2__namespace$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i8__namespace.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'app-editor',
+                        templateUrl: './editor.component.html',
+                        styleUrls: ['./editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.FsMessage }]; }, propDecorators: { showHtml: [{
+                    type: i0.Input
+                }], showScss: [{
+                    type: i0.Input
+                }], showJs: [{
+                    type: i0.Input
+                }], showGlobalScss: [{
+                    type: i0.Input
+                }], html: [{
+                    type: i0.Input
+                }], scss: [{
+                    type: i0.Input
+                }], js: [{
+                    type: i0.Input
+                }], contentConfig: [{
+                    type: i0.Input
+                }], changed: [{
+                    type: i0.Output
+                }], focused: [{
+                    type: i0.Output
+                }], blured: [{
+                    type: i0.Output
                 }] } });
 
-    var FsContentEditorModule = /** @class */ (function () {
-        function FsContentEditorModule() {
-        }
-        return FsContentEditorModule;
-    }());
-    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
-            i9.FormsModule,
-            i1.MatDialogModule,
-            i5$1.MatButtonModule,
-            tabs.MatTabsModule,
-            i6.MatIconModule,
-            i8$1.MatButtonToggleModule,
-            i2$2.FsListModule,
-            i5.FsFormModule,
-            i8.FsSkeletonModule,
-            i3.FsLabelModule,
-            htmlEditor.FsHtmlEditorModule,
-            i7.FsCommonModule,
-            i3$1.FsDialogModule,
-            i4.FsTextEditorModule,
-            i2$1.AngularSplitModule], exports: [EditorComponent] });
-    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
-                i1.MatDialogModule,
-                i5$1.MatButtonModule,
-                tabs.MatTabsModule,
-                i6.MatIconModule,
-                i8$1.MatButtonToggleModule,
-                i2$2.FsListModule,
-                i5.FsFormModule,
-                i8.FsSkeletonModule,
-                i3.FsLabelModule,
-                htmlEditor.FsHtmlEditorModule,
-                i7.FsCommonModule,
-                i3$1.FsDialogModule,
-                i4.FsTextEditorModule,
-                i2$1.AngularSplitModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            i5$1.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i6.MatIconModule,
-                            i8$1.MatButtonToggleModule,
-                            i2$2.FsListModule,
-                            i5.FsFormModule,
-                            i8.FsSkeletonModule,
-                            i3.FsLabelModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i7.FsCommonModule,
-                            i3$1.FsDialogModule,
-                            i4.FsTextEditorModule,
-                            i2$1.AngularSplitModule,
-                        ],
-                        exports: [
-                            EditorComponent,
-                        ],
-                        declarations: [
-                            EditorComponent,
-                        ],
-                    }]
+    var FsContentEditorModule = /** @class */ (function () {
+        function FsContentEditorModule() {
+        }
+        return FsContentEditorModule;
+    }());
+    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            i5$1.MatButtonModule,
+            tabs.MatTabsModule,
+            i6.MatIconModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i5.FsFormModule,
+            i8.FsSkeletonModule,
+            i3.FsLabelModule,
+            htmlEditor.FsHtmlEditorModule,
+            i7.FsCommonModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
+            i2$1.AngularSplitModule], exports: [EditorComponent] });
+    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                i5$1.MatButtonModule,
+                tabs.MatTabsModule,
+                i6.MatIconModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i5.FsFormModule,
+                i8.FsSkeletonModule,
+                i3.FsLabelModule,
+                htmlEditor.FsHtmlEditorModule,
+                i7.FsCommonModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
+                i2$1.AngularSplitModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            i5$1.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i6.MatIconModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i5.FsFormModule,
+                            i8.FsSkeletonModule,
+                            i3.FsLabelModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i7.FsCommonModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
+                            i2$1.AngularSplitModule,
+                        ],
+                        exports: [
+                            EditorComponent,
+                        ],
+                        declarations: [
+                            EditorComponent,
+                        ],
+                    }]
             }] });
 
     var FS_CONTENT_CONFIG = new i0.InjectionToken('fs-content-config');
 
-    var ContentLayoutComponent = /** @class */ (function () {
-        function ContentLayoutComponent(_config, _data, _dialogRef, _message, _cdRef) {
-            var _this = this;
-            this._config = _config;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._cdRef = _cdRef;
-            this.contentLayout = null;
-            this.editors = { content: true, styles: true };
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return _this._config.saveContentLayout(_this.contentLayout)
-                    .pipe(operators.tap(function (contentLayout) {
-                    _this._message.success('Saved Changes');
-                    _this._dialogRef.close(contentLayout);
-                }));
-            };
-        }
-        ContentLayoutComponent.prototype.ngOnInit = function () {
-            this._fetchData();
-        };
-        ContentLayoutComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentLayoutComponent.prototype._fetchData = function () {
-            var _this = this;
-            rxjs.of(this._data.contentLayout)
-                .pipe(operators.switchMap(function (contentLayout) {
-                return rxjs.of(contentLayout);
-            }), operators.takeUntil(this._destroy$))
-                .subscribe(function (contentLayout) {
-                _this.contentLayout = Object.assign({}, contentLayout);
-                _this._cdRef.markForCheck();
-            });
-        };
-        return ContentLayoutComponent;
-    }());
-    ContentLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.tag\"\n            name=\"tag\"\n            placeholder=\"Tag\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './content-layout.component.html',
-                        styleUrls: ['./content-layout.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { textEditors: [{
-                    type: i0.ViewChildren,
-                    args: [i4.FsTextEditorComponent]
+    var ContentLayoutComponent = /** @class */ (function () {
+        function ContentLayoutComponent(_config, _data, _dialogRef, _message, _cdRef) {
+            var _this = this;
+            this._config = _config;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._cdRef = _cdRef;
+            this.contentLayout = null;
+            this.editors = { content: true, styles: true };
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return _this._config.saveContentLayout(_this.contentLayout)
+                    .pipe(operators.tap(function (contentLayout) {
+                    _this._message.success('Saved Changes');
+                    _this._dialogRef.close(contentLayout);
+                }));
+            };
+        }
+        ContentLayoutComponent.prototype.ngOnInit = function () {
+            this._fetchData();
+        };
+        ContentLayoutComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentLayoutComponent.prototype._fetchData = function () {
+            var _this = this;
+            rxjs.of(this._data.contentLayout)
+                .pipe(operators.switchMap(function (contentLayout) {
+                return rxjs.of(contentLayout);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function (contentLayout) {
+                _this.contentLayout = Object.assign({}, contentLayout);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentLayoutComponent;
+    }());
+    ContentLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-label>Name</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.name\"\n            name=\"name\"\n            required>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Tag</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"contentLayout.tag\"\n            name=\"tag\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace$1.MatLabel, selector: "mat-label" }, { type: i8__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-layout.component.html',
+                        styleUrls: ['./content-layout.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i4.FsTextEditorComponent]
                 }] } });
 
-    var ContentLayoutEditorComponent = /** @class */ (function () {
-        function ContentLayoutEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
-            var _a;
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._dialog = _dialog;
-            this._cdRef = _cdRef;
-            this._prompt = _prompt;
-            this.EditorType = EditorType;
-            this.focused = null;
-            this.editors = (_a = {},
-                _a[EditorType.Html] = true,
-                _a[EditorType.Scss] = true,
-                _a[EditorType.GlobalScss] = false,
-                _a);
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return rxjs.of(null)
-                    .pipe(operators.filter(function () { return _this.focused; }), operators.switchMap(function () {
-                    switch (_this.focused) {
-                        case EditorType.Html:
-                        case EditorType.Scss:
-                            return _this.saveContentPage();
-                        case EditorType.GlobalScss:
-                            return _this.editor.saveGlobalScss();
-                    }
-                    return rxjs.throwError('Invalid focus');
-                }), operators.tap(function () {
-                    _this.editor.clearChange(_this.focused);
-                    _this._cdRef.markForCheck();
-                }));
-            };
-        }
-        ContentLayoutEditorComponent.prototype.ngOnInit = function () {
-            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
-            this._dialogRef.disableClose = true;
-            this.config = this._data.contentConfig;
-            this._initContentLayout(this._data.contentLayout);
-            this._initEscape();
-        };
-        ContentLayoutEditorComponent.prototype.editorToggleChange = function (event) {
-            this.editors[event.value] = !this.editors[event.value];
-        };
-        ContentLayoutEditorComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentLayoutEditorComponent.prototype._initContentLayout = function (contentLayout) {
-            var _this = this;
-            this.config.loadContentLayout(contentLayout.id)
-                .subscribe(function (data) {
-                _this.contentLayout = data;
-                _this._cdRef.markForCheck();
-            });
-        };
-        ContentLayoutEditorComponent.prototype.editorFocused = function (type) {
-            this.focused = type;
-        };
-        ContentLayoutEditorComponent.prototype.saveContentPage = function () {
-            var _a, _b;
-            var _this = this;
-            var names = (_a = {},
-                _a[EditorType.Scss] = 'styles',
-                _a[EditorType.Html] = 'content',
-                _a);
-            var data = (_b = {
-                    id: this.contentLayout.id
-                },
-                _b[names[this.focused]] = this.editor.changes[this.focused],
-                _b);
-            return this.config.saveContentLayout(Object.assign({ id: this.contentLayout.id }, data))
-                .pipe(operators.tap(function () {
-                _this._message.success('Saved Changes');
-            }));
-        };
-        ContentLayoutEditorComponent.prototype.close = function () {
-            var _this = this;
-            if (!this.editor.hasChanges) {
-                return this._dialogRef.close();
-            }
-            this._prompt.confirm({
-                dialogConfig: {
-                    width: null,
-                },
-                title: 'You have unsaved changes',
-                template: 'What would you like to do with your changes?',
-                buttons: [
-                    {
-                        label: 'Review Changes',
-                        value: 'review',
-                    },
-                    {
-                        label: 'Discard Changes',
-                        value: 'discard',
-                    },
-                ],
-            })
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (value) {
-                if (value === 'discard') {
-                    _this._dialogRef.close();
-                }
-            });
-        };
-        ContentLayoutEditorComponent.prototype.openSettings = function () {
-            var _this = this;
-            this._dialog.open(ContentLayoutComponent, {
-                data: {
-                    contentLayout: this.contentLayout,
-                },
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (contentLayout) {
-                _this.contentLayout = Object.assign(Object.assign({}, _this.contentLayout), contentLayout);
-                _this._cdRef.markForCheck();
-            });
-        };
-        ContentLayoutEditorComponent.prototype._initEscape = function () {
-            var _this = this;
-            rxjs.fromEvent(document, 'keydown')
-                .pipe(operators.filter(function (event) { return event.code === 'Escape'; }), operators.takeUntil(this._destroy$)).subscribe(function () {
-                var dialogRef = _this._dialog.openDialogs.reverse()[0];
-                if ((dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.componentInstance) === _this) {
-                    _this.close();
-                }
-            });
-        };
-        return ContentLayoutEditorComponent;
-    }());
-    ContentLayoutEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentLayoutEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>   \n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div>\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}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 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './content-layout-editor.component.html',
-                        styleUrls: ['./content-layout-editor.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace$2.FsPrompt }];
-        }, propDecorators: { editor: [{
-                    type: i0.ViewChild,
-                    args: [EditorComponent]
+    var ContentLayoutEditorComponent = /** @class */ (function () {
+        function ContentLayoutEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
+            var _a;
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this._prompt = _prompt;
+            this.EditorType = EditorType;
+            this.focused = null;
+            this.editors = (_a = {},
+                _a[EditorType.Html] = true,
+                _a[EditorType.Scss] = true,
+                _a[EditorType.GlobalScss] = false,
+                _a);
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return rxjs.of(null)
+                    .pipe(operators.filter(function () { return _this.focused; }), operators.switchMap(function () {
+                    switch (_this.focused) {
+                        case EditorType.Html:
+                        case EditorType.Scss:
+                            return _this.saveContentPage();
+                        case EditorType.GlobalScss:
+                            return _this.editor.saveGlobalScss();
+                    }
+                    return rxjs.throwError('Invalid focus');
+                }), operators.tap(function () {
+                    _this.editor.clearChange(_this.focused);
+                    _this._cdRef.markForCheck();
+                }));
+            };
+        }
+        ContentLayoutEditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
+            this._dialogRef.disableClose = true;
+            this.config = this._data.contentConfig;
+            this._initContentLayout(this._data.contentLayout);
+            this._initEscape();
+        };
+        ContentLayoutEditorComponent.prototype.editorToggleChange = function (event) {
+            this.editors[event.value] = !this.editors[event.value];
+        };
+        ContentLayoutEditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentLayoutEditorComponent.prototype._initContentLayout = function (contentLayout) {
+            var _this = this;
+            this.config.loadContentLayout(contentLayout.id)
+                .subscribe(function (data) {
+                _this.contentLayout = data;
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentLayoutEditorComponent.prototype.editorFocused = function (type) {
+            this.focused = type;
+        };
+        ContentLayoutEditorComponent.prototype.saveContentPage = function () {
+            var _a, _b;
+            var _this = this;
+            var names = (_a = {},
+                _a[EditorType.Scss] = 'styles',
+                _a[EditorType.Html] = 'content',
+                _a);
+            var data = (_b = {
+                    id: this.contentLayout.id
+                },
+                _b[names[this.focused]] = this.editor.changes[this.focused],
+                _b);
+            return this.config.saveContentLayout(Object.assign({ id: this.contentLayout.id }, data))
+                .pipe(operators.tap(function () {
+                _this._message.success('Saved Changes');
+            }));
+        };
+        ContentLayoutEditorComponent.prototype.close = function () {
+            var _this = this;
+            if (!this.editor.hasChanges) {
+                return this._dialogRef.close();
+            }
+            this._prompt.confirm({
+                dialogConfig: {
+                    width: null,
+                },
+                title: 'You have unsaved changes',
+                template: 'What would you like to do with your changes?',
+                buttons: [
+                    {
+                        label: 'Review Changes',
+                        value: 'review',
+                    },
+                    {
+                        label: 'Discard Changes',
+                        value: 'discard',
+                    },
+                ],
+            })
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (value) {
+                if (value === 'discard') {
+                    _this._dialogRef.close();
+                }
+            });
+        };
+        ContentLayoutEditorComponent.prototype.openSettings = function () {
+            var _this = this;
+            this._dialog.open(ContentLayoutComponent, {
+                data: {
+                    contentLayout: this.contentLayout,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (contentLayout) {
+                _this.contentLayout = Object.assign(Object.assign({}, _this.contentLayout), contentLayout);
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentLayoutEditorComponent.prototype._initEscape = function () {
+            var _this = this;
+            rxjs.fromEvent(document, 'keydown')
+                .pipe(operators.filter(function (event) { return event.code === 'Escape'; }), operators.takeUntil(this._destroy$)).subscribe(function () {
+                var dialogRef = _this._dialog.openDialogs.reverse()[0];
+                if ((dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.componentInstance) === _this) {
+                    _this.close();
+                }
+            });
+        };
+        return ContentLayoutEditorComponent;
+    }());
+    ContentLayoutEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentLayoutEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>   \n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div>\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}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 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-layout-editor.component.html',
+                        styleUrls: ['./content-layout-editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace$2.FsPrompt }];
+        }, propDecorators: { editor: [{
+                    type: i0.ViewChild,
+                    args: [EditorComponent]
                 }] } });
 
-    var FsContentLayoutsComponent = /** @class */ (function () {
-        function FsContentLayoutsComponent(_config, _dialog) {
-            this._config = _config;
-            this._dialog = _dialog;
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsContentLayoutsComponent.prototype.ngOnInit = function () {
-            this._initListConfig();
-        };
-        FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
-            var _this = this;
-            this._dialog.open(ContentLayoutEditorComponent, {
-                maxWidth: '100vw',
-                width: '100%',
-                height: '100%',
-                data: {
-                    contentLayout: contentLayout,
-                    contentConfig: this._config,
-                },
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.listComponent.reload();
-            });
-        };
-        FsContentLayoutsComponent.prototype.openLayout = function (contentLayout) {
-            return this._dialog.open(ContentLayoutComponent, {
-                data: {
-                    contentLayout: contentLayout,
-                },
-            })
-                .afterClosed()
-                .pipe(operators.filter(function (_contentLayout) { return !!_contentLayout; }), operators.takeUntil(this._destroy$));
-        };
-        FsContentLayoutsComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsContentLayoutsComponent.prototype._initListConfig = function () {
-            var _this = this;
-            this.listConfig = {
-                paging: false,
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search',
-                    },
-                ],
-                actions: [
-                    {
-                        label: 'Create',
-                        click: function () {
-                            _this.openLayout({})
-                                .subscribe(function () {
-                                _this.listComponent.reload();
-                            });
-                        },
-                    },
-                ],
-                rowActions: [
-                    {
-                        click: function (data) {
-                            return _this._config.deleteContentLayout(data);
-                        },
-                        remove: {
-                            title: 'Confirm',
-                            template: 'Are you sure you would like to delete this record?',
-                        },
-                        menu: true,
-                        label: 'Delete',
-                    },
-                ],
-                fetch: function (query) {
-                    return _this._config.loadContentLayouts(query)
-                        .pipe(operators.map(function (contentLayouts) {
-                        return { data: contentLayouts };
-                    }));
-                },
-                restore: {
-                    query: { state: 'deleted' },
-                    filterLabel: 'Show Deleted',
-                    menuLabel: 'Restore',
-                    reload: true,
-                    click: function (row) {
-                        return _this._config.saveContentLayout({ id: row.id, state: 'active' });
-                    },
-                },
-            };
-        };
-        return FsContentLayoutsComponent;
-    }());
-    FsContentLayoutsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentLayoutsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$3.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-content-layouts',
-                        templateUrl: './content-layouts.component.html',
-                        styleUrls: ['./content-layouts.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }];
-        }, propDecorators: { listComponent: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent]
+    var FsContentLayoutsComponent = /** @class */ (function () {
+        function FsContentLayoutsComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentLayoutsComponent.prototype.ngOnInit = function () {
+            this._initListConfig();
+        };
+        FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
+            var _this = this;
+            this._dialog.open(ContentLayoutEditorComponent, {
+                maxWidth: '100vw',
+                width: '100%',
+                height: '100%',
+                data: {
+                    contentLayout: contentLayout,
+                    contentConfig: this._config,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentLayoutsComponent.prototype.openLayout = function (contentLayout) {
+            return this._dialog.open(ContentLayoutComponent, {
+                data: {
+                    contentLayout: contentLayout,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.filter(function (_contentLayout) { return !!_contentLayout; }), operators.takeUntil(this._destroy$));
+        };
+        FsContentLayoutsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsContentLayoutsComponent.prototype._initListConfig = function () {
+            var _this = this;
+            this.listConfig = {
+                paging: false,
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                ],
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.openLayout({})
+                                .subscribe(function () {
+                                _this.listComponent.reload();
+                            });
+                        },
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (data) {
+                            return _this._config.deleteContentLayout(data);
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this record?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                    },
+                ],
+                fetch: function (query) {
+                    return _this._config.loadContentLayouts(query)
+                        .pipe(operators.map(function (contentLayouts) {
+                        return { data: contentLayouts };
+                    }));
+                },
+                restore: {
+                    query: { state: 'deleted' },
+                    filterLabel: 'Show Deleted',
+                    menuLabel: 'Restore',
+                    reload: true,
+                    click: function (row) {
+                        return _this._config.saveContentLayout({ id: row.id, state: 'active' });
+                    },
+                },
+            };
+        };
+        return FsContentLayoutsComponent;
+    }());
+    FsContentLayoutsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentLayoutsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$3.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-layouts',
+                        templateUrl: './content-layouts.component.html',
+                        styleUrls: ['./content-layouts.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { listComponent: [{
+                    type: i0.ViewChild,
+                    args: [i2$2.FsListComponent]
                 }] } });
 
-    var FsContentLayoutsModule = /** @class */ (function () {
-        function FsContentLayoutsModule() {
-        }
-        return FsContentLayoutsModule;
-    }());
-    FsContentLayoutsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentLayoutsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
-            FsContentLayoutsComponent,
-            ContentLayoutEditorComponent], imports: [i10.CommonModule,
-            i9.FormsModule,
-            i1.MatDialogModule,
-            i8$2.MatInputModule,
-            i4$1.MatFormFieldModule,
-            i5$1.MatButtonModule,
-            tabs.MatTabsModule,
-            i6.MatIconModule,
-            i5$2.MatSelectModule,
-            i8$1.MatButtonToggleModule,
-            i2$2.FsListModule,
-            i3$3.FsDateModule,
-            i5.FsFormModule,
-            i3.FsLabelModule,
-            i8.FsSkeletonModule,
-            htmlEditor.FsHtmlEditorModule,
-            i3$1.FsDialogModule,
-            i4.FsTextEditorModule,
-            FsContentEditorModule], exports: [FsContentLayoutsComponent] });
-    FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
-                i1.MatDialogModule,
-                i8$2.MatInputModule,
-                i4$1.MatFormFieldModule,
-                i5$1.MatButtonModule,
-                tabs.MatTabsModule,
-                i6.MatIconModule,
-                i5$2.MatSelectModule,
-                i8$1.MatButtonToggleModule,
-                i2$2.FsListModule,
-                i3$3.FsDateModule,
-                i5.FsFormModule,
-                i3.FsLabelModule,
-                i8.FsSkeletonModule,
-                htmlEditor.FsHtmlEditorModule,
-                i3$1.FsDialogModule,
-                i4.FsTextEditorModule,
-                FsContentEditorModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            i8$2.MatInputModule,
-                            i4$1.MatFormFieldModule,
-                            i5$1.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i6.MatIconModule,
-                            i5$2.MatSelectModule,
-                            i8$1.MatButtonToggleModule,
-                            i2$2.FsListModule,
-                            i3$3.FsDateModule,
-                            i5.FsFormModule,
-                            i3.FsLabelModule,
-                            i8.FsSkeletonModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i3$1.FsDialogModule,
-                            i4.FsTextEditorModule,
-                            FsContentEditorModule,
-                        ],
-                        exports: [
-                            FsContentLayoutsComponent,
-                        ],
-                        declarations: [
-                            ContentLayoutComponent,
-                            FsContentLayoutsComponent,
-                            ContentLayoutEditorComponent,
-                        ],
-                    }]
+    var FsContentLayoutsModule = /** @class */ (function () {
+        function FsContentLayoutsModule() {
+        }
+        return FsContentLayoutsModule;
+    }());
+    FsContentLayoutsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentLayoutsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
+            FsContentLayoutsComponent,
+            ContentLayoutEditorComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            i8$2.MatInputModule,
+            i4$1.MatFormFieldModule,
+            i5$1.MatButtonModule,
+            tabs.MatTabsModule,
+            i6.MatIconModule,
+            i5$2.MatSelectModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i3$3.FsDateModule,
+            i5.FsFormModule,
+            i3.FsLabelModule,
+            i8.FsSkeletonModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
+            FsContentEditorModule], exports: [FsContentLayoutsComponent] });
+    FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                i8$2.MatInputModule,
+                i4$1.MatFormFieldModule,
+                i5$1.MatButtonModule,
+                tabs.MatTabsModule,
+                i6.MatIconModule,
+                i5$2.MatSelectModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i3$3.FsDateModule,
+                i5.FsFormModule,
+                i3.FsLabelModule,
+                i8.FsSkeletonModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
+                FsContentEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            i8$2.MatInputModule,
+                            i4$1.MatFormFieldModule,
+                            i5$1.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i6.MatIconModule,
+                            i5$2.MatSelectModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i3$3.FsDateModule,
+                            i5.FsFormModule,
+                            i3.FsLabelModule,
+                            i8.FsSkeletonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            FsContentLayoutsComponent,
+                        ],
+                        declarations: [
+                            ContentLayoutComponent,
+                            FsContentLayoutsComponent,
+                            ContentLayoutEditorComponent,
+                        ],
+                    }]
             }] });
 
-    var PageTypes = [
-        { name: 'Standard Page', value: PageType.StandardPage },
-        { name: 'Home Page', value: PageType.HomePage },
-        { name: 'Not Found Page', value: PageType.NotFoundPage },
-        { name: 'Blog Post', value: PageType.BlogPost },
+    var PageTypes = [
+        { name: 'Standard Page', value: PageType.StandardPage },
+        { name: 'Home Page', value: PageType.HomePage },
+        { name: 'Not Found Page', value: PageType.NotFoundPage },
+        { name: 'Blog Post', value: PageType.BlogPost },
     ];
 
-    var ContentPageComponent = /** @class */ (function () {
-        function ContentPageComponent(_config, _data, _dialogRef, _message, _cdRef) {
-            var _this = this;
-            this._config = _config;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._cdRef = _cdRef;
-            this.contentPage = null;
-            this.PageTypes = PageTypes;
-            this.editors = { content: true, styles: true };
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return _this._config.saveContentPage(_this.contentPage)
-                    .pipe(operators.tap(function (contentPage) {
-                    _this._message.success('Saved Changes');
-                    _this._dialogRef.close(contentPage);
-                }));
-            };
-        }
-        ContentPageComponent.prototype.ngOnInit = function () {
-            this._dialogRef.updateSize('600px');
-            this._fetchData();
-        };
-        ContentPageComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentPageComponent.prototype._fetchData = function () {
-            var _this = this;
-            this._config.loadContentLayouts()
-                .subscribe(function (contentLayouts) {
-                _this.contentLayouts = contentLayouts;
-                _this._cdRef.markForCheck();
-            });
-            rxjs.of(this._data.contentPage)
-                .pipe(operators.switchMap(function (contentPage) {
-                return rxjs.of(contentPage);
-            }), operators.takeUntil(this._destroy$))
-                .subscribe(function (contentPage) {
-                _this.contentPage = Object.assign({}, contentPage);
-                _this._cdRef.markForCheck();
-            });
-        };
-        return ContentPageComponent;
-    }());
-    ContentPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-select\n              [(ngModel)]=\"contentPage.type\"\n              name=\"type\"\n              required\n              placeholder=\"Type\">\n            <mat-option\n                *ngFor=\"let item of PageTypes\"\n                [value]=\"item.value\">\n              {{ item.name }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"contentLayouts\">\n          <mat-select\n            [(ngModel)]=\"contentPage.contentLayoutId\"\n            required\n            name=\"contentLayoutId\"\n            placeholder=\"Layout\">\n              <mat-option\n                *ngFor=\"let item of contentLayouts\"\n                [value]=\"item.id\">\n                  {{ item.name }}\n              </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.name\"\n            name=\"name\"\n            required\n            placeholder=\"Name\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.path\"\n            name=\"path\"\n            required\n            placeholder=\"Path\">\n        </mat-form-field>\n        <mat-form-field>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.title\"\n            name=\"title\"\n            placeholder=\"Title\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './content-page.component.html',
-                        styleUrls: ['./content-page.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { textEditors: [{
-                    type: i0.ViewChildren,
-                    args: [i4.FsTextEditorComponent]
+    var ContentPageComponent = /** @class */ (function () {
+        function ContentPageComponent(_config, _data, _dialogRef, _message, _cdRef) {
+            var _this = this;
+            this._config = _config;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._cdRef = _cdRef;
+            this.contentPage = null;
+            this.PageTypes = PageTypes;
+            this.editors = { content: true, styles: true };
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return _this._config.saveContentPage(_this.contentPage)
+                    .pipe(operators.tap(function (contentPage) {
+                    _this._message.success('Saved Changes');
+                    _this._dialogRef.close(contentPage);
+                }));
+            };
+        }
+        ContentPageComponent.prototype.ngOnInit = function () {
+            this._dialogRef.updateSize('600px');
+            this._fetchData();
+        };
+        ContentPageComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentPageComponent.prototype._fetchData = function () {
+            var _this = this;
+            this._config.loadContentLayouts()
+                .subscribe(function (contentLayouts) {
+                _this.contentLayouts = contentLayouts;
+                _this._cdRef.markForCheck();
+            });
+            rxjs.of(this._data.contentPage)
+                .pipe(operators.switchMap(function (contentPage) {
+                return rxjs.of(contentPage);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function (contentPage) {
+                _this.contentPage = Object.assign({}, contentPage);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentPageComponent;
+    }());
+    ContentPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i4.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <mat-select\n              [(ngModel)]=\"contentPage.type\"\n              name=\"type\"\n              required>\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-label>Layout</mat-label>\n          <mat-select\n            [(ngModel)]=\"contentPage.contentLayoutId\"\n            required\n            name=\"contentLayoutId\">\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          <mat-label>Name</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.name\"\n            name=\"name\"\n            required>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Path</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.path\"\n            name=\"path\"\n            required>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Title</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"contentPage.title\"\n            name=\"title\">\n        </mat-form-field>\n      </div>\n    </div>\n\n    <div mat-dialog-actions>\n      <fs-form-dialog-actions>\n      </fs-form-dialog-actions>\n    </div>\n  </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace$1.MatLabel, selector: "mat-label" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9__namespace.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-page.component.html',
+                        styleUrls: ['./content-page.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i4.FsTextEditorComponent]
                 }] } });
 
-    var ContentPageEditorComponent = /** @class */ (function () {
-        function ContentPageEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
-            var _a;
-            var _this = this;
-            this._data = _data;
-            this._dialogRef = _dialogRef;
-            this._message = _message;
-            this._dialog = _dialog;
-            this._cdRef = _cdRef;
-            this._prompt = _prompt;
-            this.focused = null;
-            this.resizing = false;
-            this.editors = (_a = {},
-                _a[EditorType.Html] = true,
-                _a[EditorType.Scss] = true,
-                _a[EditorType.Js] = false,
-                _a[EditorType.GlobalScss] = false,
-                _a);
-            this._destroy$ = new rxjs.Subject();
-            this.save = function () {
-                return rxjs.of(null)
-                    .pipe(operators.filter(function () { return _this.focused; }), operators.switchMap(function () {
-                    switch (_this.focused) {
-                        case EditorType.Js:
-                        case EditorType.Html:
-                        case EditorType.Scss:
-                            return _this.saveContentPage();
-                        case EditorType.GlobalScss:
-                            return _this.editor.saveGlobalScss();
-                    }
-                    return rxjs.throwError('Invalid focus');
-                }), operators.tap(function () {
-                    _this.editor.clearChange(_this.focused);
-                    _this._cdRef.markForCheck();
-                }));
-            };
-        }
-        ContentPageEditorComponent.prototype.ngOnInit = function () {
-            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
-            this._dialogRef.disableClose = true;
-            this.config = this._data.contentConfig;
-            this._initContentPage(this._data.contentPage);
-            this._initEscape();
-        };
-        ContentPageEditorComponent.prototype.editorToggleChange = function (event) {
-            this.editors[event.value] = !this.editors[event.value];
-        };
-        ContentPageEditorComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentPageEditorComponent.prototype._initContentPage = function (contentPage) {
-            var _this = this;
-            this.config.loadContentPage(contentPage.id)
-                .subscribe(function (data) {
-                _this.contentPage = data;
-                _this._cdRef.markForCheck();
-            });
-        };
-        ContentPageEditorComponent.prototype.editorFocused = function (type) {
-            this.focused = type;
-        };
-        ContentPageEditorComponent.prototype.saveContentPage = function () {
-            var _a, _b;
-            var _this = this;
-            var names = (_a = {},
-                _a[EditorType.Js] = 'js',
-                _a[EditorType.Scss] = 'styles',
-                _a[EditorType.Html] = 'content',
-                _a);
-            var data = (_b = {
-                    id: this.contentPage.id
-                },
-                _b[names[this.focused]] = this.editor.changes[this.focused],
-                _b);
-            return this.config.saveContentPage(Object.assign({ id: this.contentPage.id }, data))
-                .pipe(operators.tap(function () {
-                _this._message.success('Saved Changes');
-            }));
-        };
-        ContentPageEditorComponent.prototype.close = function () {
-            var _this = this;
-            if (!this.editor.hasChanges) {
-                return this._dialogRef.close();
-            }
-            this._prompt.confirm({
-                dialogConfig: {
-                    width: null,
-                },
-                title: 'You have unsaved changes',
-                template: 'What would you like to do with your changes?',
-                buttons: [
-                    {
-                        label: 'Review Changes',
-                        value: 'review',
-                    },
-                    {
-                        label: 'Discard Changes',
-                        value: 'discard',
-                    },
-                ],
-            })
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (value) {
-                if (value === 'discard') {
-                    _this._dialogRef.close();
-                }
-            });
-        };
-        ContentPageEditorComponent.prototype.openSettings = function () {
-            var _this = this;
-            this._dialog.open(ContentPageComponent, {
-                data: {
-                    contentPage: this.contentPage,
-                },
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function (contentPage) {
-                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
-                _this._cdRef.markForCheck();
-            });
-        };
-        ContentPageEditorComponent.prototype._initEscape = function () {
-            var _this = this;
-            rxjs.fromEvent(document, 'keydown')
-                .pipe(operators.filter(function (event) { return event.code === 'Escape'; }), operators.takeUntil(this._destroy$)).subscribe(function () {
-                var dialogRef = _this._dialog.openDialogs.reverse()[0];
-                if ((dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.componentInstance) === _this) {
-                    _this.close();
-                }
-            });
-        };
-        return ContentPageEditorComponent;
-    }());
-    ContentPageEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentPageEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>   \n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <div mat-dialog-actions>\n      <button \n          mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      \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</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        templateUrl: './content-page-editor.component.html',
-                        styleUrls: ['./content-page-editor.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [i1.MAT_DIALOG_DATA]
-                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace$2.FsPrompt }];
-        }, propDecorators: { editor: [{
-                    type: i0.ViewChild,
-                    args: [EditorComponent]
+    var ContentPageEditorComponent = /** @class */ (function () {
+        function ContentPageEditorComponent(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
+            var _a;
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this._dialog = _dialog;
+            this._cdRef = _cdRef;
+            this._prompt = _prompt;
+            this.focused = null;
+            this.resizing = false;
+            this.editors = (_a = {},
+                _a[EditorType.Html] = true,
+                _a[EditorType.Scss] = true,
+                _a[EditorType.Js] = false,
+                _a[EditorType.GlobalScss] = false,
+                _a);
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return rxjs.of(null)
+                    .pipe(operators.filter(function () { return _this.focused; }), operators.switchMap(function () {
+                    switch (_this.focused) {
+                        case EditorType.Js:
+                        case EditorType.Html:
+                        case EditorType.Scss:
+                            return _this.saveContentPage();
+                        case EditorType.GlobalScss:
+                            return _this.editor.saveGlobalScss();
+                    }
+                    return rxjs.throwError('Invalid focus');
+                }), operators.tap(function () {
+                    _this.editor.clearChange(_this.focused);
+                    _this._cdRef.markForCheck();
+                }));
+            };
+        }
+        ContentPageEditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
+            this._dialogRef.disableClose = true;
+            this.config = this._data.contentConfig;
+            this._initContentPage(this._data.contentPage);
+            this._initEscape();
+        };
+        ContentPageEditorComponent.prototype.editorToggleChange = function (event) {
+            this.editors[event.value] = !this.editors[event.value];
+        };
+        ContentPageEditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentPageEditorComponent.prototype._initContentPage = function (contentPage) {
+            var _this = this;
+            this.config.loadContentPage(contentPage.id)
+                .subscribe(function (data) {
+                _this.contentPage = data;
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentPageEditorComponent.prototype.editorFocused = function (type) {
+            this.focused = type;
+        };
+        ContentPageEditorComponent.prototype.saveContentPage = function () {
+            var _a, _b;
+            var _this = this;
+            var names = (_a = {},
+                _a[EditorType.Js] = 'js',
+                _a[EditorType.Scss] = 'styles',
+                _a[EditorType.Html] = 'content',
+                _a);
+            var data = (_b = {
+                    id: this.contentPage.id
+                },
+                _b[names[this.focused]] = this.editor.changes[this.focused],
+                _b);
+            return this.config.saveContentPage(Object.assign({ id: this.contentPage.id }, data))
+                .pipe(operators.tap(function () {
+                _this._message.success('Saved Changes');
+            }));
+        };
+        ContentPageEditorComponent.prototype.close = function () {
+            var _this = this;
+            if (!this.editor.hasChanges) {
+                return this._dialogRef.close();
+            }
+            this._prompt.confirm({
+                dialogConfig: {
+                    width: null,
+                },
+                title: 'You have unsaved changes',
+                template: 'What would you like to do with your changes?',
+                buttons: [
+                    {
+                        label: 'Review Changes',
+                        value: 'review',
+                    },
+                    {
+                        label: 'Discard Changes',
+                        value: 'discard',
+                    },
+                ],
+            })
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (value) {
+                if (value === 'discard') {
+                    _this._dialogRef.close();
+                }
+            });
+        };
+        ContentPageEditorComponent.prototype.openSettings = function () {
+            var _this = this;
+            this._dialog.open(ContentPageComponent, {
+                data: {
+                    contentPage: this.contentPage,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function (contentPage) {
+                _this.contentPage = Object.assign(Object.assign({}, _this.contentPage), contentPage);
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentPageEditorComponent.prototype._initEscape = function () {
+            var _this = this;
+            rxjs.fromEvent(document, 'keydown')
+                .pipe(operators.filter(function (event) { return event.code === 'Escape'; }), operators.takeUntil(this._destroy$)).subscribe(function () {
+                var dialogRef = _this._dialog.openDialogs.reverse()[0];
+                if ((dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.componentInstance) === _this) {
+                    _this.close();
+                }
+            });
+        };
+        return ContentPageEditorComponent;
+    }());
+    ContentPageEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i1__namespace.MatDialog }, { token: i0__namespace.ChangeDetectorRef }, { token: i3__namespace$2.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentPageEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0__namespace, template: "<form fsForm [submit]=\"save\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>   \n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <div mat-dialog-actions>\n      <button \n          mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      \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</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5__namespace$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5__namespace$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8__namespace$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5__namespace.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8__namespace$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageEditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-page-editor.component.html',
+                        styleUrls: ['./content-page-editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i1__namespace.MatDialog }, { type: i0__namespace.ChangeDetectorRef }, { type: i3__namespace$2.FsPrompt }];
+        }, propDecorators: { editor: [{
+                    type: i0.ViewChild,
+                    args: [EditorComponent]
                 }] } });
 
-    var FsContentPagesComponent = /** @class */ (function () {
-        function FsContentPagesComponent(_config, _dialog) {
-            this._config = _config;
-            this._dialog = _dialog;
-            this.pageTypes = i7.index(PageTypes, 'value', 'name');
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsContentPagesComponent.prototype.ngOnInit = function () {
-            this._initListConfig();
-        };
-        FsContentPagesComponent.prototype.openEditor = function (contentPage) {
-            var _this = this;
-            this._dialog.open(ContentPageEditorComponent, {
-                data: {
-                    contentPage: contentPage,
-                    config: this._config,
-                    contentConfig: this._config,
-                },
-                maxWidth: '100vw',
-                width: '100%',
-                height: '100%',
-                autoFocus: false,
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$))
-                .subscribe(function () {
-                _this.listComponent.reload();
-            });
-        };
-        FsContentPagesComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        FsContentPagesComponent.prototype.openContentPage = function (contentPage) {
-            return this._dialog.open(ContentPageComponent, {
-                data: { contentPage: contentPage },
-            })
-                .afterClosed()
-                .pipe(operators.takeUntil(this._destroy$));
-        };
-        FsContentPagesComponent.prototype._initListConfig = function () {
-            var _this = this;
-            this.listConfig = {
-                filters: [
-                    {
-                        name: 'keyword',
-                        type: filter.ItemType.Keyword,
-                        label: 'Search',
-                    },
-                ],
-                actions: [
-                    {
-                        label: 'Create',
-                        click: function () {
-                            _this.openContentPage({
-                                type: PageType.StandardPage,
-                            })
-                                .pipe(operators.filter(function (contentPage) { return !!contentPage; }))
-                                .subscribe(function (contentPage) {
-                                _this.openEditor(contentPage);
-                                _this.listComponent.reload();
-                            });
-                        },
-                    },
-                ],
-                rowActions: [
-                    {
-                        click: function (data) {
-                            return _this._config.deleteContentPage(data);
-                        },
-                        remove: {
-                            title: 'Confirm',
-                            template: 'Are you sure you would like to delete this record?',
-                        },
-                        menu: true,
-                        label: 'Delete',
-                    },
-                ],
-                fetch: function (query) {
-                    return _this._config.loadContentPages(query)
-                        .pipe(operators.map(function (response) {
-                        return { data: response.contentPages, paging: response.paging };
-                    }));
-                },
-                restore: {
-                    query: { state: 'deleted' },
-                    filterLabel: 'Show Deleted',
-                    menuLabel: 'Restore',
-                    reload: true,
-                    click: function (row) {
-                        return _this._config.saveContentPage({ id: row.id, state: 'active' });
-                    },
-                },
-            };
-        };
-        return FsContentPagesComponent;
-    }());
-    FsContentPagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$3.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-content-pages',
-                        templateUrl: './content-pages.component.html',
-                        styleUrls: ['./content-pages.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i1__namespace.MatDialog }];
-        }, propDecorators: { htmlEditorConfig: [{
-                    type: i0.Input
-                }], listComponent: [{
-                    type: i0.ViewChild,
-                    args: [i2$2.FsListComponent]
+    var FsContentPagesComponent = /** @class */ (function () {
+        function FsContentPagesComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this.pageTypes = i7.index(PageTypes, 'value', 'name');
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentPagesComponent.prototype.ngOnInit = function () {
+            this._initListConfig();
+        };
+        FsContentPagesComponent.prototype.openEditor = function (contentPage) {
+            var _this = this;
+            this._dialog.open(ContentPageEditorComponent, {
+                data: {
+                    contentPage: contentPage,
+                    config: this._config,
+                    contentConfig: this._config,
+                },
+                maxWidth: '100vw',
+                width: '100%',
+                height: '100%',
+                autoFocus: false,
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentPagesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsContentPagesComponent.prototype.openContentPage = function (contentPage) {
+            return this._dialog.open(ContentPageComponent, {
+                data: { contentPage: contentPage },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$));
+        };
+        FsContentPagesComponent.prototype._initListConfig = function () {
+            var _this = this;
+            this.listConfig = {
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                ],
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.openContentPage({
+                                type: PageType.StandardPage,
+                            })
+                                .pipe(operators.filter(function (contentPage) { return !!contentPage; }))
+                                .subscribe(function (contentPage) {
+                                _this.openEditor(contentPage);
+                                _this.listComponent.reload();
+                            });
+                        },
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (data) {
+                            return _this._config.deleteContentPage(data);
+                        },
+                        remove: {
+                            title: 'Confirm',
+                            template: 'Are you sure you would like to delete this record?',
+                        },
+                        menu: true,
+                        label: 'Delete',
+                    },
+                ],
+                fetch: function (query) {
+                    return _this._config.loadContentPages(query)
+                        .pipe(operators.map(function (response) {
+                        return { data: response.contentPages, paging: response.paging };
+                    }));
+                },
+                restore: {
+                    query: { state: 'deleted' },
+                    filterLabel: 'Show Deleted',
+                    menuLabel: 'Restore',
+                    reload: true,
+                    click: function (row) {
+                        return _this._config.saveContentPage({ id: row.id, state: 'active' });
+                    },
+                },
+            };
+        };
+        return FsContentPagesComponent;
+    }());
+    FsContentPagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$2.FsListComponent, descendants: true }], ngImport: i0__namespace, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\">{{row.name}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{pageTypes[row.type]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.modifyDate | fsDate: 'date-time-yearless'}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2__namespace$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2__namespace$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3__namespace$3.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-pages',
+                        templateUrl: './content-pages.component.html',
+                        styleUrls: ['./content-pages.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { htmlEditorConfig: [{
+                    type: i0.Input
+                }], listComponent: [{
+                    type: i0.ViewChild,
+                    args: [i2$2.FsListComponent]
                 }] } });
 
-    var FsContentPagesModule = /** @class */ (function () {
-        function FsContentPagesModule() {
-        }
-        FsContentPagesModule.forRoot = function () {
-            return {
-                ngModule: FsContentPagesModule,
-            };
-        };
-        return FsContentPagesModule;
-    }());
-    FsContentPagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentPagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
-            ContentPageComponent,
-            ContentPageEditorComponent], imports: [i10.CommonModule,
-            i9.FormsModule,
-            i1.MatDialogModule,
-            i8$2.MatInputModule,
-            i4$1.MatFormFieldModule,
-            i5$1.MatButtonModule,
-            tabs.MatTabsModule,
-            i6.MatIconModule,
-            i5$2.MatSelectModule,
-            i8$1.MatButtonToggleModule,
-            i2$2.FsListModule,
-            i3$3.FsDateModule,
-            i7.FsCommonModule,
-            i5.FsFormModule,
-            i3.FsLabelModule,
-            i8.FsSkeletonModule,
-            htmlEditor.FsHtmlEditorModule,
-            i3$1.FsDialogModule,
-            i4.FsTextEditorModule,
-            FsContentEditorModule], exports: [FsContentPagesComponent] });
-    FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
-                i1.MatDialogModule,
-                i8$2.MatInputModule,
-                i4$1.MatFormFieldModule,
-                i5$1.MatButtonModule,
-                tabs.MatTabsModule,
-                i6.MatIconModule,
-                i5$2.MatSelectModule,
-                i8$1.MatButtonToggleModule,
-                i2$2.FsListModule,
-                i3$3.FsDateModule,
-                i7.FsCommonModule,
-                i5.FsFormModule,
-                i3.FsLabelModule,
-                i8.FsSkeletonModule,
-                htmlEditor.FsHtmlEditorModule,
-                i3$1.FsDialogModule,
-                i4.FsTextEditorModule,
-                FsContentEditorModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i1.MatDialogModule,
-                            i8$2.MatInputModule,
-                            i4$1.MatFormFieldModule,
-                            i5$1.MatButtonModule,
-                            tabs.MatTabsModule,
-                            i6.MatIconModule,
-                            i5$2.MatSelectModule,
-                            i8$1.MatButtonToggleModule,
-                            i2$2.FsListModule,
-                            i3$3.FsDateModule,
-                            i7.FsCommonModule,
-                            i5.FsFormModule,
-                            i3.FsLabelModule,
-                            i8.FsSkeletonModule,
-                            htmlEditor.FsHtmlEditorModule,
-                            i3$1.FsDialogModule,
-                            i4.FsTextEditorModule,
-                            FsContentEditorModule,
-                        ],
-                        exports: [
-                            FsContentPagesComponent,
-                        ],
-                        declarations: [
-                            FsContentPagesComponent,
-                            ContentPageComponent,
-                            ContentPageEditorComponent,
-                        ],
-                    }]
+    var FsContentPagesModule = /** @class */ (function () {
+        function FsContentPagesModule() {
+        }
+        FsContentPagesModule.forRoot = function () {
+            return {
+                ngModule: FsContentPagesModule,
+            };
+        };
+        return FsContentPagesModule;
+    }());
+    FsContentPagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentPagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
+            ContentPageComponent,
+            ContentPageEditorComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            i8$2.MatInputModule,
+            i4$1.MatFormFieldModule,
+            i5$1.MatButtonModule,
+            tabs.MatTabsModule,
+            i6.MatIconModule,
+            i5$2.MatSelectModule,
+            i8$1.MatButtonToggleModule,
+            i2$2.FsListModule,
+            i3$3.FsDateModule,
+            i7.FsCommonModule,
+            i5.FsFormModule,
+            i3.FsLabelModule,
+            i8.FsSkeletonModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3$1.FsDialogModule,
+            i4.FsTextEditorModule,
+            FsContentEditorModule], exports: [FsContentPagesComponent] });
+    FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                i8$2.MatInputModule,
+                i4$1.MatFormFieldModule,
+                i5$1.MatButtonModule,
+                tabs.MatTabsModule,
+                i6.MatIconModule,
+                i5$2.MatSelectModule,
+                i8$1.MatButtonToggleModule,
+                i2$2.FsListModule,
+                i3$3.FsDateModule,
+                i7.FsCommonModule,
+                i5.FsFormModule,
+                i3.FsLabelModule,
+                i8.FsSkeletonModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3$1.FsDialogModule,
+                i4.FsTextEditorModule,
+                FsContentEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            i8$2.MatInputModule,
+                            i4$1.MatFormFieldModule,
+                            i5$1.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i6.MatIconModule,
+                            i5$2.MatSelectModule,
+                            i8$1.MatButtonToggleModule,
+                            i2$2.FsListModule,
+                            i3$3.FsDateModule,
+                            i7.FsCommonModule,
+                            i5.FsFormModule,
+                            i3.FsLabelModule,
+                            i8.FsSkeletonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3$1.FsDialogModule,
+                            i4.FsTextEditorModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            FsContentPagesComponent,
+                        ],
+                        declarations: [
+                            FsContentPagesComponent,
+                            ContentPageComponent,
+                            ContentPageEditorComponent,
+                        ],
+                    }]
             }] });
 
-    var ContentStyleComponent = /** @class */ (function () {
-        function ContentStyleComponent(_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 rxjs.Subject();
-        }
-        ContentStyleComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.styleConfig.height = this.height;
-            this._config.loadContentStyle()
-                .subscribe(function (contentStyle) {
-                _this.contentStyle = contentStyle;
-                _this._cdRef.markForCheck();
-            });
-        };
-        ContentStyleComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentStyleComponent.prototype.save = function () {
-            var _this = this;
-            this._config.saveContentStyle(this.contentStyle)
-                .pipe(operators.tap(function (contentStyle) {
-                _this.contentStyle = Object.assign(Object.assign({}, _this.contentStyle), contentStyle);
-                _this._cdRef.markForCheck();
-                _this._message.success('Saved Changes');
-            })).subscribe();
-        };
-        return ContentStyleComponent;
-    }());
-    ContentStyleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentStyleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: i4.FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: i5.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], components: [{ type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-content-style',
-                        templateUrl: './content-style.component.html',
-                        styleUrls: ['./content-style.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { textEditors: [{
-                    type: i0.ViewChild,
-                    args: [i4.FsTextEditorComponent]
-                }], form: [{
-                    type: i0.ViewChild,
-                    args: [i5.FsFormDirective]
-                }], height: [{
-                    type: i0.Input
+    var ContentStyleComponent = /** @class */ (function () {
+        function ContentStyleComponent(_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 rxjs.Subject();
+        }
+        ContentStyleComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.styleConfig.height = this.height;
+            this._config.loadContentStyle()
+                .subscribe(function (contentStyle) {
+                _this.contentStyle = contentStyle;
+                _this._cdRef.markForCheck();
+            });
+        };
+        ContentStyleComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentStyleComponent.prototype.save = function () {
+            var _this = this;
+            this._config.saveContentStyle(this.contentStyle)
+                .pipe(operators.tap(function (contentStyle) {
+                _this.contentStyle = Object.assign(Object.assign({}, _this.contentStyle), contentStyle);
+                _this._cdRef.markForCheck();
+                _this._message.success('Saved Changes');
+            })).subscribe();
+        };
+        return ContentStyleComponent;
+    }());
+    ContentStyleComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentStyleComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: i4.FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: i5.FsFormDirective, descendants: true }], ngImport: i0__namespace, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], components: [{ type: i4__namespace.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentStyleComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-style',
+                        templateUrl: './content-style.component.html',
+                        styleUrls: ['./content-style.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChild,
+                    args: [i4.FsTextEditorComponent]
+                }], form: [{
+                    type: i0.ViewChild,
+                    args: [i5.FsFormDirective]
+                }], height: [{
+                    type: i0.Input
                 }] } });
 
-    var FsContentStyleModule = /** @class */ (function () {
-        function FsContentStyleModule() {
-        }
-        return FsContentStyleModule;
-    }());
-    FsContentStyleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentStyleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, declarations: [ContentStyleComponent], imports: [i10.CommonModule,
-            i9.FormsModule,
-            i5$1.MatButtonModule,
-            i4.FsTextEditorModule,
-            i8.FsSkeletonModule,
-            i7.FsCommonModule,
-            FsContentEditorModule], exports: [ContentStyleComponent] });
-    FsContentStyleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, imports: [[
-                i10.CommonModule,
-                i9.FormsModule,
-                i5$1.MatButtonModule,
-                i4.FsTextEditorModule,
-                i8.FsSkeletonModule,
-                i7.FsCommonModule,
-                FsContentEditorModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i10.CommonModule,
-                            i9.FormsModule,
-                            i5$1.MatButtonModule,
-                            i4.FsTextEditorModule,
-                            i8.FsSkeletonModule,
-                            i7.FsCommonModule,
-                            FsContentEditorModule,
-                        ],
-                        exports: [
-                            ContentStyleComponent,
-                        ],
-                        declarations: [
-                            ContentStyleComponent,
-                        ],
-                    }]
+    var FsContentStyleModule = /** @class */ (function () {
+        function FsContentStyleModule() {
+        }
+        return FsContentStyleModule;
+    }());
+    FsContentStyleModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentStyleModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, declarations: [ContentStyleComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i5$1.MatButtonModule,
+            i4.FsTextEditorModule,
+            i8.FsSkeletonModule,
+            i7.FsCommonModule,
+            FsContentEditorModule], exports: [ContentStyleComponent] });
+    FsContentStyleModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i5$1.MatButtonModule,
+                i4.FsTextEditorModule,
+                i8.FsSkeletonModule,
+                i7.FsCommonModule,
+                FsContentEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentStyleModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i5$1.MatButtonModule,
+                            i4.FsTextEditorModule,
+                            i8.FsSkeletonModule,
+                            i7.FsCommonModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            ContentStyleComponent,
+                        ],
+                        declarations: [
+                            ContentStyleComponent,
+                        ],
+                    }]
             }] });
 
-    var ContentRendererComponent = /** @class */ (function () {
-        function ContentRendererComponent(_sanitizer, _router, _el, _htmlRenderer) {
-            this._sanitizer = _sanitizer;
-            this._router = _router;
-            this._el = _el;
-            this._htmlRenderer = _htmlRenderer;
-            this._destroy$ = new rxjs.Subject();
-        }
-        ContentRendererComponent.prototype.ngOnInit = function () {
-            this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
-            this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
-        };
-        ContentRendererComponent.prototype.ngAfterViewChecked = function () {
-            this.registerHrefs();
-            if (this.contentPage.js) {
-                var script = document.createElement('script');
-                script.text = this.contentPage.js;
-                this.script.nativeElement.after(script);
-            }
-        };
-        ContentRendererComponent.prototype.registerHrefs = function () {
-            var _this = this;
-            Array.from(this.el.querySelectorAll('a[href]'))
-                .filter(function (el) {
-                return el.getAttribute('href').match(/^\//);
-            })
-                .forEach(function (el) {
-                el.addEventListener('click', function (event) {
-                    if (!event.shiftKey && !event.ctrlKey) {
-                        event.preventDefault();
-                        var href = el.getAttribute('href');
-                        _this._router.navigateByUrl(href);
-                    }
-                });
-            });
-        };
-        Object.defineProperty(ContentRendererComponent.prototype, "el", {
-            get: function () {
-                return this._el.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ContentRendererComponent.prototype.ngOnDestroy = function () {
-            this.removeStyles();
-            this._destroy$.next();
-            this._destroy$.complete();
-        };
-        ContentRendererComponent.prototype.removeStyles = function () {
-            var el = document.querySelector('#contentPageStyles');
-            if (el) {
-                el.remove();
-            }
-        };
-        return ContentRendererComponent;
-    }());
-    ContentRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: i2__namespace$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$4.HtmlRenderer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", styles: [""], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-content-renderer',
-                        templateUrl: './content-renderer.component.html',
-                        styleUrls: ['./content-renderer.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$4.HtmlRenderer }]; }, propDecorators: { script: [{
-                    type: i0.ViewChild,
-                    args: ['script', { read: i0.ElementRef }]
-                }], contentPage: [{
-                    type: i0.Input
+    var ContentRendererComponent = /** @class */ (function () {
+        function ContentRendererComponent(_sanitizer, _router, _el, _htmlRenderer) {
+            this._sanitizer = _sanitizer;
+            this._router = _router;
+            this._el = _el;
+            this._htmlRenderer = _htmlRenderer;
+            this._destroy$ = new rxjs.Subject();
+        }
+        ContentRendererComponent.prototype.ngOnInit = function () {
+            this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
+            this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
+        };
+        ContentRendererComponent.prototype.ngAfterViewChecked = function () {
+            this.registerHrefs();
+            if (this.contentPage.js) {
+                var script = document.createElement('script');
+                script.text = this.contentPage.js;
+                this.script.nativeElement.after(script);
+            }
+        };
+        ContentRendererComponent.prototype.registerHrefs = function () {
+            var _this = this;
+            Array.from(this.el.querySelectorAll('a[href]'))
+                .filter(function (el) {
+                return el.getAttribute('href').match(/^\//);
+            })
+                .forEach(function (el) {
+                el.addEventListener('click', function (event) {
+                    if (!event.shiftKey && !event.ctrlKey) {
+                        event.preventDefault();
+                        var href = el.getAttribute('href');
+                        _this._router.navigateByUrl(href);
+                    }
+                });
+            });
+        };
+        Object.defineProperty(ContentRendererComponent.prototype, "el", {
+            get: function () {
+                return this._el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ContentRendererComponent.prototype.ngOnDestroy = function () {
+            this.removeStyles();
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentRendererComponent.prototype.removeStyles = function () {
+            var el = document.querySelector('#contentPageStyles');
+            if (el) {
+                el.remove();
+            }
+        };
+        return ContentRendererComponent;
+    }());
+    ContentRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: i2__namespace$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$4.HtmlRenderer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", styles: [""], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-renderer',
+                        templateUrl: './content-renderer.component.html',
+                        styleUrls: ['./content-renderer.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$4.HtmlRenderer }]; }, propDecorators: { script: [{
+                    type: i0.ViewChild,
+                    args: ['script', { read: i0.ElementRef }]
+                }], contentPage: [{
+                    type: i0.Input
                 }] } });
 
-    var FsContentComponent = /** @class */ (function () {
-        function FsContentComponent(_config, _title, _cdRef, _router, _el, _htmlRenderer) {
-            this._config = _config;
-            this._title = _title;
-            this._cdRef = _cdRef;
-            this._router = _router;
-            this._el = _el;
-            this._htmlRenderer = _htmlRenderer;
-            this._destroy$ = new rxjs.Subject();
-        }
-        FsContentComponent.prototype.ngOnInit = function () {
-            this._initContent();
-            this._initStyles();
-        };
-        Object.defineProperty(FsContentComponent.prototype, "el", {
-            get: function () {
-                return this._el.nativeElement;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        FsContentComponent.prototype.ngOnDestroy = function () {
-            this._destroy$.next();
-            this._destroy$.complete();
-            this._title.setTitle('');
-        };
-        FsContentComponent.prototype._initStyles = function () {
-            var _this = this;
-            if (this._config.loadContentStyleCss) {
-                this._config.loadContentStyleCss()
-                    .subscribe(function (styles) {
-                    _this._htmlRenderer.addStyle(styles, { id: 'content-sytle' });
-                });
-            }
-        };
-        FsContentComponent.prototype._initContent = function () {
-            var _this = this;
-            this._loadContent();
-            this._router.events
-                .pipe(operators.filter(function (e) { return e instanceof i2$3.NavigationEnd; }), operators.takeUntil(this._destroy$))
-                .subscribe(function (e) {
-                _this._loadContent();
-            });
-        };
-        FsContentComponent.prototype._loadContent = function () {
-            var _this = this;
-            var path = window.location.pathname;
-            this._config.loadContent(path)
-                .subscribe(function (contentPage) {
-                if (contentPage.title) {
-                    _this._title.setTitle(contentPage.title);
-                    var ogTitleEl = document.querySelector('head meta[property="og:title"]');
-                    if (!ogTitleEl) {
-                        ogTitleEl = document.createElement('meta');
-                        ogTitleEl.setAttribute('property', 'og:title');
-                        document.getElementsByTagName('head')[0].appendChild(ogTitleEl);
-                    }
-                    ogTitleEl.setAttribute('content', contentPage.title);
-                }
-                _this.contentPage = contentPage;
-                _this._cdRef.markForCheck();
-            });
-        };
-        return FsContentComponent;
-    }());
-    FsContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace$1.Title }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$4.HtmlRenderer }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<ng-container *ngIf=\"contentPage\">\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n</ng-container>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-content',
-                        templateUrl: './content.component.html',
-                        styleUrls: ['./content.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_CONTENT_CONFIG]
-                        }] }, { type: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$4.HtmlRenderer }];
+    var FsContentComponent = /** @class */ (function () {
+        function FsContentComponent(_config, _title, _cdRef, _router, _el, _htmlRenderer) {
+            this._config = _config;
+            this._title = _title;
+            this._cdRef = _cdRef;
+            this._router = _router;
+            this._el = _el;
+            this._htmlRenderer = _htmlRenderer;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentComponent.prototype.ngOnInit = function () {
+            this._initContent();
+            this._initStyles();
+        };
+        Object.defineProperty(FsContentComponent.prototype, "el", {
+            get: function () {
+                return this._el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FsContentComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+            this._title.setTitle('');
+        };
+        FsContentComponent.prototype._initStyles = function () {
+            var _this = this;
+            if (this._config.loadContentStyleCss) {
+                this._config.loadContentStyleCss()
+                    .subscribe(function (styles) {
+                    _this._htmlRenderer.addStyle(styles, { id: 'content-sytle' });
+                });
+            }
+        };
+        FsContentComponent.prototype._initContent = function () {
+            var _this = this;
+            this._loadContent();
+            this._router.events
+                .pipe(operators.filter(function (e) { return e instanceof i2$3.NavigationEnd; }), operators.takeUntil(this._destroy$))
+                .subscribe(function (e) {
+                _this._loadContent();
+            });
+        };
+        FsContentComponent.prototype._loadContent = function () {
+            var _this = this;
+            var path = window.location.pathname;
+            this._config.loadContent(path)
+                .subscribe(function (contentPage) {
+                if (contentPage.title) {
+                    _this._title.setTitle(contentPage.title);
+                    var ogTitleEl = document.querySelector('head meta[property="og:title"]');
+                    if (!ogTitleEl) {
+                        ogTitleEl = document.createElement('meta');
+                        ogTitleEl.setAttribute('property', 'og:title');
+                        document.getElementsByTagName('head')[0].appendChild(ogTitleEl);
+                    }
+                    ogTitleEl.setAttribute('content', contentPage.title);
+                }
+                _this.contentPage = contentPage;
+                _this._cdRef.markForCheck();
+            });
+        };
+        return FsContentComponent;
+    }());
+    FsContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace$1.Title }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$3.Router }, { token: i0__namespace.ElementRef }, { token: i3__namespace$4.HtmlRenderer }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<ng-container *ngIf=\"contentPage\">\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n</ng-container>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content',
+                        templateUrl: './content.component.html',
+                        styleUrls: ['./content.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$3.Router }, { type: i0__namespace.ElementRef }, { type: i3__namespace$4.HtmlRenderer }];
         } });
 
-    var FsContentModule = /** @class */ (function () {
-        function FsContentModule() {
-        }
-        return FsContentModule;
-    }());
-    FsContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    FsContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, declarations: [FsContentComponent,
-            ContentRendererComponent], imports: [i10.CommonModule,
-            htmlEditor.FsHtmlEditorModule], exports: [FsContentComponent] });
-    FsContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, imports: [[
-                i10.CommonModule,
-                htmlEditor.FsHtmlEditorModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i10.CommonModule,
-                            htmlEditor.FsHtmlEditorModule,
-                        ],
-                        exports: [
-                            FsContentComponent,
-                        ],
-                        declarations: [
-                            FsContentComponent,
-                            ContentRendererComponent,
-                        ],
-                    }]
+    var FsContentModule = /** @class */ (function () {
+        function FsContentModule() {
+        }
+        return FsContentModule;
+    }());
+    FsContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, declarations: [FsContentComponent,
+            ContentRendererComponent], imports: [i10.CommonModule,
+            htmlEditor.FsHtmlEditorModule], exports: [FsContentComponent] });
+    FsContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, imports: [[
+                i10.CommonModule,
+                htmlEditor.FsHtmlEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                        ],
+                        exports: [
+                            FsContentComponent,
+                        ],
+                        declarations: [
+                            FsContentComponent,
+                            ContentRendererComponent,
+                        ],
+                    }]
             }] });
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.ContentStyleComponent = ContentStyleComponent;