@firestitch/content 18.0.4 → 18.0.6

package/fesm2022/firestitch-content.mjs

@@ -1,136 +1,214 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, Component, ChangeDetectionStrategy, ViewChildren, Input, EventEmitter, Output, ViewChild, NgModule, ElementRef } from '@angular/core';
+import { inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, InjectionToken, ChangeDetectorRef, NgModule, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { DomSanitizer, Title } from '@angular/platform-browser';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
+import { HtmlRenderer } from '@firestitch/html';
+import { Subject, of, throwError, fromEvent } from 'rxjs';
+import { filter, takeUntil, tap, switchMap, finalize, map } from 'rxjs/operators';
+import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
 import * as i4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
 import { FsMessage } from '@firestitch/message';
-import * as i2$1 from '@firestitch/text-editor';
-import { FsTextEditorComponent, FsTextEditorModule } from '@firestitch/text-editor';
-import { Subject, of, throwError, fromEvent } from 'rxjs';
-import { tap, switchMap, takeUntil, filter, finalize, map } from 'rxjs/operators';
-import * as i1 from '@firestitch/skeleton';
-import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i2 from '@angular/forms';
+import { FsPrompt } from '@firestitch/prompt';
+import * as i2 from '@firestitch/text-editor';
+import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
+import * as i1 from 'angular-split';
+import { AngularSplitModule } from 'angular-split';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i3 from '@firestitch/form';
 import { FsFormModule, FsFormDirective } from '@firestitch/form';
-import * as i5 from '@firestitch/dialog';
+import * as i5 from '@firestitch/common';
+import { FsCommonModule, index } from '@firestitch/common';
+import * as i1$1 from '@firestitch/skeleton';
+import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i5$1 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatSelect } from '@angular/material/select';
-import { MatOption } from '@angular/material/core';
 import { MatInput } from '@angular/material/input';
-import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
-import { FsPrompt } from '@firestitch/prompt';
-import * as i1$1 from 'angular-split';
-import { AngularSplitModule } from 'angular-split';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import * as i5$1 from '@firestitch/common';
-import { FsCommonModule, index } from '@firestitch/common';
 import { MatIconAnchor, MatButton, MatAnchor } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
-import { RouterLink, Router, NavigationEnd } from '@angular/router';
 import { ItemType } from '@firestitch/filter';
 import * as i1$2 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
 import * as i2$2 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
-import { DomSanitizer, Title } from '@angular/platform-browser';
-import { HtmlRenderer } from '@firestitch/html';
-
-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";
-})(PageType || (PageType = {}));
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/core';
 
-const PageTypes = [
-    { name: 'Page', value: PageType.StandardPage },
-    { name: 'Page (Not Found)', value: PageType.NotFoundPage },
-];
+class ContentRendererComponent {
+    _sanitizer = inject(DomSanitizer);
+    _router = inject(Router);
+    _el = inject(ElementRef);
+    _htmlRenderer = inject(HtmlRenderer);
+    script;
+    contentPage;
+    content;
+    _destroy$ = new Subject();
+    ngOnChanges(changes) {
+        if (changes.contentPage.currentValue) {
+            this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
+            this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
+        }
+    }
+    ngAfterViewChecked() {
+        this.registerHrefs();
+        if (this.contentPage.js) {
+            const script = document.createElement('script');
+            script.text = this.contentPage.js;
+            this.script.nativeElement.after(script);
+        }
+    }
+    registerHrefs() {
+        Array.from(this.el.querySelectorAll('a[href]'))
+            .filter((el) => {
+            return el.getAttribute('href').match(/^\//);
+        })
+            .forEach((el) => {
+            el.addEventListener('click', (event) => {
+                if (!event.shiftKey && !event.ctrlKey) {
+                    event.preventDefault();
+                    const href = el.getAttribute('href');
+                    this._router.navigateByUrl(href);
+                }
+            });
+        });
+    }
+    get el() {
+        return this._el.nativeElement;
+    }
+    ngOnDestroy() {
+        this.removeStyles();
+        this._destroy$.next(null);
+        this._destroy$.complete();
+    }
+    removeStyles() {
+        const el = document.querySelector('#contentPageStyles');
+        if (el) {
+            el.remove();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContentRendererComponent, isStandalone: true, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@if (content) {\n  <div [innerHTML]=\"content\"></div>\n}\n<span #script></span>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-content-renderer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (content) {\n  <div [innerHTML]=\"content\"></div>\n}\n<span #script></span>" }]
+        }], propDecorators: { script: [{
+                type: ViewChild,
+                args: ['script', { read: ElementRef }]
+            }], contentPage: [{
+                type: Input
+            }] } });
 
 const FS_CONTENT_CONFIG = new InjectionToken('fs-content-config');
 
-class ContentPageComponent {
+class FsContentComponent {
     _config = inject(FS_CONTENT_CONFIG);
-    _data = inject(MAT_DIALOG_DATA);
-    _dialogRef = inject(MatDialogRef);
-    _message = inject(FsMessage);
+    _title = inject(Title);
     _cdRef = inject(ChangeDetectorRef);
-    textEditors;
-    contentPage = null;
-    PageTypes = PageTypes;
-    contentLayouts;
-    editors = { content: true, styles: true };
+    _router = inject(Router);
+    _el = inject(ElementRef);
+    _htmlRenderer = inject(HtmlRenderer);
+    contentPage;
     _destroy$ = new Subject();
     ngOnInit() {
-        this._dialogRef.updateSize('600px');
-        this._fetchData();
+        this._initContent();
+        this._initStyles();
+    }
+    get el() {
+        return this._el.nativeElement;
     }
     ngOnDestroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
+        this._title.setTitle('');
+        document.querySelector('#content-style')?.remove();
     }
-    save = () => {
-        return this._config.saveContentPage(this.contentPage)
-            .pipe(tap((contentPage) => {
-            this._message.success('Saved Changes');
-            this._dialogRef.close(contentPage);
-        }));
-    };
-    _fetchData() {
-        this._config.loadContentLayouts()
-            .subscribe((contentLayouts) => {
-            this.contentLayouts = contentLayouts;
-            this._cdRef.markForCheck();
+    _initStyles() {
+        if (this._config.loadContentStyleCss) {
+            this._config.loadContentStyleCss()
+                .subscribe((styles) => {
+                this._htmlRenderer.addStyle(styles, { id: 'content-style' });
+            });
+        }
+    }
+    _initContent() {
+        this._loadContent();
+        this._router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this._destroy$))
+            .subscribe((e) => {
+            this._loadContent();
         });
-        of(this._data.contentPage)
-            .pipe(switchMap((contentPage) => {
-            return of(contentPage);
-        }), takeUntil(this._destroy$))
+    }
+    _loadContent() {
+        const path = window.location.pathname;
+        this._config.loadContent(path)
             .subscribe((contentPage) => {
-            this.contentPage = {
-                ...contentPage,
-                path: contentPage.path || '/',
-            };
+            if (contentPage.title) {
+                this._title.setTitle(contentPage.title);
+                let 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();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContentPageComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <mat-select\n            [(ngModel)]=\"contentPage.type\"\n            name=\"type\"\n            required>\n            @for (item of PageTypes; track item) {\n              <mat-option\n                [value]=\"item.value\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (contentLayouts) {\n          <mat-form-field>\n            <mat-label>Layout</mat-label>\n            <mat-select\n              [(ngModel)]=\"contentPage.contentLayoutId\"\n              required\n              name=\"contentLayoutId\">\n              @for (item of contentLayouts; track item) {\n                <mat-option\n                  [value]=\"item.id\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\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: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: i3.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentComponent, isStandalone: true, selector: "fs-content", ngImport: i0, template: "@if (contentPage) {\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n}", styles: [""], dependencies: [{ kind: "component", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        FsSkeletonModule,
-                        FormsModule,
-                        FsFormModule,
-                        FsDialogModule,
-                        MatDialogTitle,
-                        CdkScrollable,
-                        MatDialogContent,
-                        MatFormField,
-                        MatLabel,
-                        MatSelect,
-                        MatOption,
-                        MatInput,
-                        MatDialogActions,
-                    ], 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            @for (item of PageTypes; track item) {\n              <mat-option\n                [value]=\"item.value\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (contentLayouts) {\n          <mat-form-field>\n            <mat-label>Layout</mat-label>\n            <mat-select\n              [(ngModel)]=\"contentPage.contentLayoutId\"\n              required\n              name=\"contentLayoutId\">\n              @for (item of contentLayouts; track item) {\n                <mat-option\n                  [value]=\"item.id\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\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" }]
-        }], propDecorators: { textEditors: [{
-                type: ViewChildren,
-                args: [FsTextEditorComponent]
-            }] } });
+            args: [{ selector: 'fs-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ContentRendererComponent], template: "@if (contentPage) {\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n}" }]
+        }] });
+
+class FsContentModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentModule,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentModule, imports: [FsContentComponent,
+            ContentRendererComponent], exports: [FsContentComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FsContentComponent,
+                        ContentRendererComponent,
+                    ],
+                    exports: [
+                        FsContentComponent,
+                    ],
+                }]
+        }] });
+
+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";
+})(PageType || (PageType = {}));
 
 class EditorLabelComponent {
     changed;
@@ -257,7 +335,7 @@ class EditorComponent {
         this.focused.emit(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EditorComponent, isStandalone: true, 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, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.html !== undefined\"\n          [focused]=\"focusedArea === 'html'\">\n        HTML\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.scss !== undefined\"\n          [focused]=\"focusedArea === 'scss'\">\n        SCSS\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.js !== undefined\"\n          [focused]=\"focusedArea === 'js'\">\n        JS\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.globalScss !== undefined\"\n          [focused]=\"focusedArea === 'globalScss'\">\n        Global SCSS\n      </app-editor-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"], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i1$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"] }, { kind: "directive", type: i1$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: EditorLabelComponent, selector: "app-editor-label", inputs: ["changed", "focused"] }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i2$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i5$1.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EditorComponent, isStandalone: true, 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, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.html !== undefined\"\n          [focused]=\"focusedArea === 'html'\">\n        HTML\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.scss !== undefined\"\n          [focused]=\"focusedArea === 'scss'\">\n        SCSS\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.js !== undefined\"\n          [focused]=\"focusedArea === 'js'\">\n        JS\n      </app-editor-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      <app-editor-label\n          [changed]=\"changes.globalScss !== undefined\"\n          [focused]=\"focusedArea === 'globalScss'\">\n        Global SCSS\n      </app-editor-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"], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { kind: "directive", type: i1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "component", type: EditorLabelComponent, selector: "app-editor-label", inputs: ["changed", "focused"] }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i2.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i5.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
@@ -294,7 +372,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Output
             }] } });
 
-class ContentPageEditorComponent {
+class ContentLayoutComponent {
+    _config = inject(FS_CONTENT_CONFIG);
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _message = inject(FsMessage);
+    _cdRef = inject(ChangeDetectorRef);
+    textEditors;
+    contentLayout = null;
+    editors = { content: true, styles: true };
+    _destroy$ = new Subject();
+    ngOnInit() {
+        this._fetchData();
+    }
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        this._destroy$.complete();
+    }
+    save = () => {
+        return this._config.saveContentLayout(this.contentLayout)
+            .pipe(tap((contentLayout) => {
+            this._message.success('Saved Changes');
+            this._dialogRef.close(contentLayout);
+        }));
+    };
+    _fetchData() {
+        of(this._data.contentLayout)
+            .pipe(switchMap((contentLayout) => {
+            return of(contentLayout);
+        }), takeUntil(this._destroy$))
+            .subscribe((contentLayout) => {
+            this.contentLayout = { ...contentLayout };
+            this._cdRef.markForCheck();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <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: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: i3.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FormsModule,
+                        FsFormModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        MatDialogActions,
+                    ], 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" }]
+        }], propDecorators: { textEditors: [{
+                type: ViewChildren,
+                args: [FsTextEditorComponent]
+            }] } });
+
+class ContentLayoutEditorComponent {
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _message = inject(FsMessage);
@@ -302,27 +437,26 @@ class ContentPageEditorComponent {
     _cdRef = inject(ChangeDetectorRef);
     _prompt = inject(FsPrompt);
     editor;
-    contentPage;
-    focused = null;
+    contentLayout;
+    get isMac() {
+        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    }
+    submitting;
     config;
-    resizing = false;
+    EditorType = EditorType;
+    focused = null;
     title;
     editors = {
         [EditorType.Html]: true,
         [EditorType.Scss]: true,
-        [EditorType.Js]: false,
         [EditorType.GlobalScss]: false,
     };
-    get isMac() {
-        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-    }
-    submitting;
     _destroy$ = new Subject();
     ngOnInit() {
         this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
         this._dialogRef.disableClose = true;
         this.config = this._data.contentConfig;
-        this._initContentPage(this._data.contentPage);
+        this._initContentLayout(this._data.contentLayout);
         this._initEscape();
     }
     editorToggleChange(event) {
@@ -332,10 +466,10 @@ class ContentPageEditorComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    _initContentPage(contentPage) {
-        this.config.loadContentPage(contentPage.id)
+    _initContentLayout(contentLayout) {
+        this.config.loadContentLayout(contentLayout.id)
             .subscribe((data) => {
-            this.contentPage = data;
+            this.contentLayout = data;
             this._cdRef.markForCheck();
         });
     }
@@ -351,7 +485,6 @@ class ContentPageEditorComponent {
         return of(null)
             .pipe(filter(() => this.focused), switchMap(() => {
             switch (this.focused) {
-                case EditorType.Js:
                 case EditorType.Html:
                 case EditorType.Scss:
                     return this.saveContentPage();
@@ -365,21 +498,19 @@ class ContentPageEditorComponent {
         }), finalize(() => {
             this.submitting = false;
             this._cdRef.markForCheck();
-        }))
-            .pipe(takeUntil(this._destroy$));
+        }));
     };
     saveContentPage() {
         const names = {
-            [EditorType.Js]: 'js',
             [EditorType.Scss]: 'styles',
             [EditorType.Html]: 'content',
         };
         const data = {
-            id: this.contentPage.id,
+            id: this.contentLayout.id,
             [names[this.focused]]: this.editor.changes[this.focused],
         };
-        return this.config.saveContentPage({
-            id: this.contentPage.id,
+        return this.config.saveContentLayout({
+            id: this.contentLayout.id,
             ...data,
         })
             .pipe(tap(() => {
@@ -415,17 +546,17 @@ class ContentPageEditorComponent {
         });
     }
     openSettings() {
-        this._dialog.open(ContentPageComponent, {
+        this._dialog.open(ContentLayoutComponent, {
             data: {
-                contentPage: this.contentPage,
+                contentLayout: this.contentLayout,
             },
         })
             .afterClosed()
             .pipe(takeUntil(this._destroy$))
-            .subscribe((contentPage) => {
-            this.contentPage = {
-                ...this.contentPage,
-                ...contentPage,
+            .subscribe((contentLayout) => {
+            this.contentLayout = {
+                ...this.contentLayout,
+                ...contentLayout,
             };
             this._cdRef.markForCheck();
         });
@@ -439,10 +570,10 @@ class ContentPageEditorComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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  </fs-dialog>\n</form>\n", 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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FormsModule,
@@ -456,39 +587,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatButtonToggle,
                         MatButton,
                         MatTooltip,
-                        MatAnchor,
-                        RouterLink,
                         CdkScrollable,
                         MatDialogContent,
                         EditorComponent,
-                    ], template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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  </fs-dialog>\n</form>\n", 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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
+                    ], template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
         }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [EditorComponent]
             }] } });
 
-class FsContentPagesComponent {
+class FsContentLayoutsComponent {
     _config = inject(FS_CONTENT_CONFIG);
     _dialog = inject(MatDialog);
-    htmlEditorConfig;
     listComponent;
     listConfig;
-    pageTypes = index(PageTypes, 'value', 'name');
     _destroy$ = new Subject();
     ngOnInit() {
         this._initListConfig();
     }
-    openEditor(contentPage) {
-        this._dialog.open(ContentPageEditorComponent, {
-            data: {
-                contentPage,
-                config: this._config,
-                contentConfig: this._config,
-            },
+    openEditor(contentLayout) {
+        this._dialog.open(ContentLayoutEditorComponent, {
             maxWidth: '100vw',
             width: '100%',
             height: '100%',
-            autoFocus: false,
+            data: {
+                contentLayout,
+                contentConfig: this._config,
+            },
         })
             .afterClosed()
             .pipe(takeUntil(this._destroy$))
@@ -496,17 +621,19 @@ class FsContentPagesComponent {
             this.listComponent.reload();
         });
     }
+    openLayout(contentLayout) {
+        return this._dialog.open(ContentLayoutComponent, {
+            data: {
+                contentLayout,
+            },
+        })
+            .afterClosed()
+            .pipe(filter((_contentLayout) => !!_contentLayout), takeUntil(this._destroy$));
+    }
     ngOnDestroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    openContentPage(contentPage) {
-        return this._dialog.open(ContentPageComponent, {
-            data: { contentPage },
-        })
-            .afterClosed()
-            .pipe(takeUntil(this._destroy$));
-    }
     _initListConfig() {
         this.listConfig = {
             filters: [
@@ -520,12 +647,8 @@ class FsContentPagesComponent {
                 {
                     label: 'Create',
                     click: () => {
-                        this.openContentPage({
-                            type: PageType.StandardPage,
-                        })
-                            .pipe(filter((contentPage) => !!contentPage))
-                            .subscribe((contentPage) => {
-                            this.openEditor(contentPage);
+                        this.openLayout({})
+                            .subscribe(() => {
                             this.listComponent.reload();
                         });
                     },
@@ -534,7 +657,7 @@ class FsContentPagesComponent {
             rowActions: [
                 {
                     click: (data) => {
-                        return this._config.deleteContentPage(data);
+                        return this._config.deleteContentLayout(data);
                     },
                     remove: {
                         title: 'Confirm',
@@ -545,13 +668,9 @@ class FsContentPagesComponent {
                 },
             ],
             fetch: (query) => {
-                query = {
-                    contentLayouts: true,
-                    ...query,
-                };
-                return this._config.loadContentPages(query)
+                return this._config.loadContentLayouts(query)
                     .pipe(map((response) => {
-                    return { data: response.contentPages, paging: response.paging };
+                    return { data: response.contentLayouts, paging: response.paging };
                 }));
             },
             restore: {
@@ -560,67 +679,73 @@ class FsContentPagesComponent {
                 menuLabel: 'Restore',
                 reload: true,
                 click: (row) => {
-                    return this._config.saveContentPage({ id: row.id, state: 'active' });
+                    return this._config.saveContentLayout({ id: row.id, state: 'active' });
                 },
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentPagesComponent, isStandalone: true, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n      <ng-template #name>{{row.name}}</ng-template>\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      @if (row.state !== 'deleted') {\n        <a  [href]=\"'/' + row.path\" target=\"_black\">\n          <ng-container [ngTemplateOutlet]=\"path\"></ng-container>\n        </a>\n      } @else {\n        /{{row.path}}\n      }\n      <ng-template #path>/{{row.path}}</ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"layout\" title=\"Layout\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.contentLayout?.name}}\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(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i2$2.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentLayoutsComponent, isStandalone: true, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n\n      <ng-template #name>{{row.name}}</ng-template>\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: [""], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i2$2.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-content-pages', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'fs-content-layouts', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FsListModule,
                         NgTemplateOutlet,
                         FsDateModule,
-                    ], 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      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n      <ng-template #name>{{row.name}}</ng-template>\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      @if (row.state !== 'deleted') {\n        <a  [href]=\"'/' + row.path\" target=\"_black\">\n          <ng-container [ngTemplateOutlet]=\"path\"></ng-container>\n        </a>\n      } @else {\n        /{{row.path}}\n      }\n      <ng-template #path>/{{row.path}}</ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"layout\" title=\"Layout\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.contentLayout?.name}}\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(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"] }]
-        }], propDecorators: { htmlEditorConfig: [{
-                type: Input
-            }], listComponent: [{
+                    ], 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      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n\n      <ng-template #name>{{row.name}}</ng-template>\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" }]
+        }], propDecorators: { listComponent: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }] } });
 
-class FsContentPagesModule {
+class FsContentLayoutsModule {
     static forRoot() {
         return {
-            ngModule: FsContentPagesModule,
+            ngModule: FsContentLayoutsModule,
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, imports: [FsContentPagesComponent,
-            ContentPageComponent,
-            ContentPageEditorComponent], exports: [FsContentPagesComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, imports: [FsContentPagesComponent,
-            ContentPageComponent,
-            ContentPageEditorComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsModule, imports: [FsContentLayoutsComponent,
+            ContentLayoutComponent,
+            ContentLayoutEditorComponent], exports: [FsContentLayoutsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsModule, imports: [FsContentLayoutsComponent,
+            ContentLayoutComponent,
+            ContentLayoutEditorComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        FsContentPagesComponent,
-                        ContentPageComponent,
-                        ContentPageEditorComponent,
+                        FsContentLayoutsComponent,
+                        ContentLayoutComponent,
+                        ContentLayoutEditorComponent,
                     ],
                     exports: [
-                        FsContentPagesComponent,
+                        FsContentLayoutsComponent,
                     ],
                 }]
         }] });
 
-class ContentLayoutComponent {
+const PageTypes = [
+    { name: 'Page', value: PageType.StandardPage },
+    { name: 'Page (Not Found)', value: PageType.NotFoundPage },
+];
+
+class ContentPageComponent {
     _config = inject(FS_CONTENT_CONFIG);
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _message = inject(FsMessage);
     _cdRef = inject(ChangeDetectorRef);
     textEditors;
-    contentLayout = null;
+    contentPage = null;
+    PageTypes = PageTypes;
+    contentLayouts;
     editors = { content: true, styles: true };
     _destroy$ = new Subject();
     ngOnInit() {
+        this._dialogRef.updateSize('600px');
         this._fetchData();
     }
     ngOnDestroy() {
@@ -628,26 +753,34 @@ class ContentLayoutComponent {
         this._destroy$.complete();
     }
     save = () => {
-        return this._config.saveContentLayout(this.contentLayout)
-            .pipe(tap((contentLayout) => {
+        return this._config.saveContentPage(this.contentPage)
+            .pipe(tap((contentPage) => {
             this._message.success('Saved Changes');
-            this._dialogRef.close(contentLayout);
+            this._dialogRef.close(contentPage);
         }));
     };
     _fetchData() {
-        of(this._data.contentLayout)
-            .pipe(switchMap((contentLayout) => {
-            return of(contentLayout);
+        this._config.loadContentLayouts()
+            .subscribe((contentLayouts) => {
+            this.contentLayouts = contentLayouts;
+            this._cdRef.markForCheck();
+        });
+        of(this._data.contentPage)
+            .pipe(switchMap((contentPage) => {
+            return of(contentPage);
         }), takeUntil(this._destroy$))
-            .subscribe((contentLayout) => {
-            this.contentLayout = { ...contentLayout };
+            .subscribe((contentPage) => {
+            this.contentPage = {
+                ...contentPage,
+                path: contentPage.path || '/',
+            };
             this._cdRef.markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <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: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: i3.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContentPageComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n  <fs-dialog>\n    <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n    <div mat-dialog-content>\n      <div class=\"fs-column\">\n        <mat-form-field>\n          <mat-label>Type</mat-label>\n          <mat-select\n            [(ngModel)]=\"contentPage.type\"\n            name=\"type\"\n            required>\n            @for (item of PageTypes; track item) {\n              <mat-option\n                [value]=\"item.value\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (contentLayouts) {\n          <mat-form-field>\n            <mat-label>Layout</mat-label>\n            <mat-select\n              [(ngModel)]=\"contentPage.contentLayoutId\"\n              required\n              name=\"contentLayoutId\">\n              @for (item of contentLayouts; track item) {\n                <mat-option\n                  [value]=\"item.id\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\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: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { kind: "component", type: i3.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { kind: "directive", type: i3.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormGreaterEqual]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FsSkeletonModule,
@@ -659,15 +792,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatDialogContent,
                         MatFormField,
                         MatLabel,
+                        MatSelect,
+                        MatOption,
                         MatInput,
                         MatDialogActions,
-                    ], 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" }]
+                    ], 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            @for (item of PageTypes; track item) {\n              <mat-option\n                [value]=\"item.value\">\n                {{ item.name }}\n              </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        @if (contentLayouts) {\n          <mat-form-field>\n            <mat-label>Layout</mat-label>\n            <mat-select\n              [(ngModel)]=\"contentPage.contentLayoutId\"\n              required\n              name=\"contentLayoutId\">\n              @for (item of contentLayouts; track item) {\n                <mat-option\n                  [value]=\"item.id\">\n                  {{ item.name }}\n                </mat-option>\n              }\n            </mat-select>\n          </mat-form-field>\n        }\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" }]
         }], propDecorators: { textEditors: [{
                 type: ViewChildren,
                 args: [FsTextEditorComponent]
             }] } });
 
-class ContentLayoutEditorComponent {
+class ContentPageEditorComponent {
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _message = inject(FsMessage);
@@ -675,26 +810,27 @@ class ContentLayoutEditorComponent {
     _cdRef = inject(ChangeDetectorRef);
     _prompt = inject(FsPrompt);
     editor;
-    contentLayout;
-    get isMac() {
-        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-    }
-    submitting;
-    config;
-    EditorType = EditorType;
+    contentPage;
     focused = null;
+    config;
+    resizing = false;
     title;
     editors = {
         [EditorType.Html]: true,
         [EditorType.Scss]: true,
+        [EditorType.Js]: false,
         [EditorType.GlobalScss]: false,
     };
+    get isMac() {
+        return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    }
+    submitting;
     _destroy$ = new Subject();
     ngOnInit() {
         this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
         this._dialogRef.disableClose = true;
         this.config = this._data.contentConfig;
-        this._initContentLayout(this._data.contentLayout);
+        this._initContentPage(this._data.contentPage);
         this._initEscape();
     }
     editorToggleChange(event) {
@@ -704,10 +840,10 @@ class ContentLayoutEditorComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    _initContentLayout(contentLayout) {
-        this.config.loadContentLayout(contentLayout.id)
+    _initContentPage(contentPage) {
+        this.config.loadContentPage(contentPage.id)
             .subscribe((data) => {
-            this.contentLayout = data;
+            this.contentPage = data;
             this._cdRef.markForCheck();
         });
     }
@@ -723,6 +859,7 @@ class ContentLayoutEditorComponent {
         return of(null)
             .pipe(filter(() => this.focused), switchMap(() => {
             switch (this.focused) {
+                case EditorType.Js:
                 case EditorType.Html:
                 case EditorType.Scss:
                     return this.saveContentPage();
@@ -736,19 +873,21 @@ class ContentLayoutEditorComponent {
         }), finalize(() => {
             this.submitting = false;
             this._cdRef.markForCheck();
-        }));
+        }))
+            .pipe(takeUntil(this._destroy$));
     };
     saveContentPage() {
         const names = {
+            [EditorType.Js]: 'js',
             [EditorType.Scss]: 'styles',
             [EditorType.Html]: 'content',
         };
         const data = {
-            id: this.contentLayout.id,
+            id: this.contentPage.id,
             [names[this.focused]]: this.editor.changes[this.focused],
         };
-        return this.config.saveContentLayout({
-            id: this.contentLayout.id,
+        return this.config.saveContentPage({
+            id: this.contentPage.id,
             ...data,
         })
             .pipe(tap(() => {
@@ -784,17 +923,17 @@ class ContentLayoutEditorComponent {
         });
     }
     openSettings() {
-        this._dialog.open(ContentLayoutComponent, {
+        this._dialog.open(ContentPageComponent, {
             data: {
-                contentLayout: this.contentLayout,
+                contentPage: this.contentPage,
             },
         })
             .afterClosed()
             .pipe(takeUntil(this._destroy$))
-            .subscribe((contentLayout) => {
-            this.contentLayout = {
-                ...this.contentLayout,
-                ...contentLayout,
+            .subscribe((contentPage) => {
+            this.contentPage = {
+                ...this.contentPage,
+                ...contentPage,
             };
             this._cdRef.markForCheck();
         });
@@ -808,10 +947,10 @@ class ContentLayoutEditorComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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  </fs-dialog>\n</form>\n", 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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.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"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FormsModule,
@@ -825,33 +964,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatButtonToggle,
                         MatButton,
                         MatTooltip,
+                        MatAnchor,
+                        RouterLink,
                         CdkScrollable,
                         MatDialogContent,
                         EditorComponent,
-                    ], template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
+                    ], template: "<form fsForm [submit]=\"submitted\" [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\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\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\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  </fs-dialog>\n</form>\n", 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}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
         }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: [EditorComponent]
             }] } });
 
-class FsContentLayoutsComponent {
+class FsContentPagesComponent {
     _config = inject(FS_CONTENT_CONFIG);
     _dialog = inject(MatDialog);
+    htmlEditorConfig;
     listComponent;
     listConfig;
+    pageTypes = index(PageTypes, 'value', 'name');
     _destroy$ = new Subject();
     ngOnInit() {
         this._initListConfig();
     }
-    openEditor(contentLayout) {
-        this._dialog.open(ContentLayoutEditorComponent, {
-            maxWidth: '100vw',
-            width: '100%',
-            height: '100%',
+    openEditor(contentPage) {
+        this._dialog.open(ContentPageEditorComponent, {
             data: {
-                contentLayout,
+                contentPage,
+                config: this._config,
                 contentConfig: this._config,
             },
+            maxWidth: '100vw',
+            width: '100%',
+            height: '100%',
+            autoFocus: false,
         })
             .afterClosed()
             .pipe(takeUntil(this._destroy$))
@@ -859,19 +1004,17 @@ class FsContentLayoutsComponent {
             this.listComponent.reload();
         });
     }
-    openLayout(contentLayout) {
-        return this._dialog.open(ContentLayoutComponent, {
-            data: {
-                contentLayout,
-            },
-        })
-            .afterClosed()
-            .pipe(filter((_contentLayout) => !!_contentLayout), takeUntil(this._destroy$));
-    }
     ngOnDestroy() {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
+    openContentPage(contentPage) {
+        return this._dialog.open(ContentPageComponent, {
+            data: { contentPage },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$));
+    }
     _initListConfig() {
         this.listConfig = {
             filters: [
@@ -885,8 +1028,12 @@ class FsContentLayoutsComponent {
                 {
                     label: 'Create',
                     click: () => {
-                        this.openLayout({})
-                            .subscribe(() => {
+                        this.openContentPage({
+                            type: PageType.StandardPage,
+                        })
+                            .pipe(filter((contentPage) => !!contentPage))
+                            .subscribe((contentPage) => {
+                            this.openEditor(contentPage);
                             this.listComponent.reload();
                         });
                     },
@@ -895,7 +1042,7 @@ class FsContentLayoutsComponent {
             rowActions: [
                 {
                     click: (data) => {
-                        return this._config.deleteContentLayout(data);
+                        return this._config.deleteContentPage(data);
                     },
                     remove: {
                         title: 'Confirm',
@@ -906,9 +1053,13 @@ class FsContentLayoutsComponent {
                 },
             ],
             fetch: (query) => {
-                return this._config.loadContentLayouts(query)
+                query = {
+                    contentLayouts: true,
+                    ...query,
+                };
+                return this._config.loadContentPages(query)
                     .pipe(map((response) => {
-                    return { data: response.contentLayouts, paging: response.paging };
+                    return { data: response.contentPages, paging: response.paging };
                 }));
             },
             restore: {
@@ -917,26 +1068,56 @@ class FsContentLayoutsComponent {
                 menuLabel: 'Restore',
                 reload: true,
                 click: (row) => {
-                    return this._config.saveContentLayout({ id: row.id, state: 'active' });
+                    return this._config.saveContentPage({ id: row.id, state: 'active' });
                 },
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentLayoutsComponent, isStandalone: true, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n\n      <ng-template #name>{{row.name}}</ng-template>\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: [""], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i2$2.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentPagesComponent, isStandalone: true, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n      <ng-template #name>{{row.name}}</ng-template>\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      @if (row.state !== 'deleted') {\n        <a  [href]=\"'/' + row.path\" target=\"_black\">\n          <ng-container [ngTemplateOutlet]=\"path\"></ng-container>\n        </a>\n      } @else {\n        /{{row.path}}\n      }\n      <ng-template #path>/{{row.path}}</ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"layout\" title=\"Layout\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.contentLayout?.name}}\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(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i2$2.FsDatePipe, name: "fsDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-content-layouts', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'fs-content-pages', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         FsListModule,
                         NgTemplateOutlet,
                         FsDateModule,
-                    ], 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      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n\n      <ng-template #name>{{row.name}}</ng-template>\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" }]
-        }], propDecorators: { listComponent: [{
+                    ], 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      @if (row.state !== 'deleted') {\n        <a (click)=\"openEditor(row)\">\n          <ng-container [ngTemplateOutlet]=\"name\"></ng-container>\n        </a>\n      } @else {\n        {{row.name}}\n      }\n      <ng-template #name>{{row.name}}</ng-template>\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      @if (row.state !== 'deleted') {\n        <a  [href]=\"'/' + row.path\" target=\"_black\">\n          <ng-container [ngTemplateOutlet]=\"path\"></ng-container>\n        </a>\n      } @else {\n        /{{row.path}}\n      }\n      <ng-template #path>/{{row.path}}</ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"layout\" title=\"Layout\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.contentLayout?.name}}\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(rgb(0,0,0)),to(rgba(0,0,0,0)))}\n"] }]
+        }], propDecorators: { htmlEditorConfig: [{
+                type: Input
+            }], listComponent: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }] } });
 
+class FsContentPagesModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentPagesModule,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, imports: [FsContentPagesComponent,
+            ContentPageComponent,
+            ContentPageEditorComponent], exports: [FsContentPagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, imports: [FsContentPagesComponent,
+            ContentPageComponent,
+            ContentPageEditorComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentPagesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FsContentPagesComponent,
+                        ContentPageComponent,
+                        ContentPageEditorComponent,
+                    ],
+                    exports: [
+                        FsContentPagesComponent,
+                    ],
+                }]
+        }] });
+
 class ContentStyleComponent {
     _config = inject(FS_CONTENT_CONFIG);
     _message = inject(FsMessage);
@@ -975,7 +1156,7 @@ class ContentStyleComponent {
         })).subscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentStyleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentStyleComponent, isStandalone: true, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i2$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i5$1.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentStyleComponent, isStandalone: true, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n  <fs-text-editor \n    [(ngModel)]=\"contentStyle.scss\" \n    name=\"contentStyle\"\n    [fsModelChangeOptions]=\"{ debounce: 300 }\"\n    (fsModelChange)=\"save()\"\n    [config]=\"styleConfig\">\n  </fs-text-editor>              \n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsTextEditorModule }, { kind: "component", type: i2.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "directive", type: i5.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentStyleComponent, decorators: [{
             type: Component,
@@ -995,138 +1176,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }] } });
 
-class ContentRendererComponent {
-    _sanitizer = inject(DomSanitizer);
-    _router = inject(Router);
-    _el = inject(ElementRef);
-    _htmlRenderer = inject(HtmlRenderer);
-    script;
-    contentPage;
-    content;
-    _destroy$ = new Subject();
-    ngOnChanges(changes) {
-        if (changes.contentPage.currentValue) {
-            this._htmlRenderer.addStyle(this.contentPage.styles, { id: 'contentPageStyles' });
-            this.content = this._sanitizer.bypassSecurityTrustHtml(this.contentPage.content);
-        }
-    }
-    ngAfterViewChecked() {
-        this.registerHrefs();
-        if (this.contentPage.js) {
-            const script = document.createElement('script');
-            script.text = this.contentPage.js;
-            this.script.nativeElement.after(script);
-        }
-    }
-    registerHrefs() {
-        Array.from(this.el.querySelectorAll('a[href]'))
-            .filter((el) => {
-            return el.getAttribute('href').match(/^\//);
-        })
-            .forEach((el) => {
-            el.addEventListener('click', (event) => {
-                if (!event.shiftKey && !event.ctrlKey) {
-                    event.preventDefault();
-                    const href = el.getAttribute('href');
-                    this._router.navigateByUrl(href);
-                }
-            });
-        });
-    }
-    get el() {
-        return this._el.nativeElement;
-    }
-    ngOnDestroy() {
-        this.removeStyles();
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    removeStyles() {
-        const el = document.querySelector('#contentPageStyles');
-        if (el) {
-            el.remove();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContentRendererComponent, isStandalone: true, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "@if (content) {\n  <div [innerHTML]=\"content\"></div>\n}\n<span #script></span>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-content-renderer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "@if (content) {\n  <div [innerHTML]=\"content\"></div>\n}\n<span #script></span>" }]
-        }], propDecorators: { script: [{
-                type: ViewChild,
-                args: ['script', { read: ElementRef }]
-            }], contentPage: [{
-                type: Input
-            }] } });
-
-class FsContentComponent {
-    _config = inject(FS_CONTENT_CONFIG);
-    _title = inject(Title);
-    _cdRef = inject(ChangeDetectorRef);
-    _router = inject(Router);
-    _el = inject(ElementRef);
-    _htmlRenderer = inject(HtmlRenderer);
-    contentPage;
-    _destroy$ = new Subject();
-    ngOnInit() {
-        this._initContent();
-        this._initStyles();
-    }
-    get el() {
-        return this._el.nativeElement;
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-        this._title.setTitle('');
-        document.querySelector('#content-style')?.remove();
-    }
-    _initStyles() {
-        if (this._config.loadContentStyleCss) {
-            this._config.loadContentStyleCss()
-                .subscribe((styles) => {
-                this._htmlRenderer.addStyle(styles, { id: 'content-style' });
-            });
-        }
-    }
-    _initContent() {
-        this._loadContent();
-        this._router.events
-            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this._destroy$))
-            .subscribe((e) => {
-            this._loadContent();
-        });
-    }
-    _loadContent() {
-        const path = window.location.pathname;
-        this._config.loadContent(path)
-            .subscribe((contentPage) => {
-            if (contentPage.title) {
-                this._title.setTitle(contentPage.title);
-                let 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();
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsContentComponent, isStandalone: true, selector: "fs-content", ngImport: i0, template: "@if (contentPage) {\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n}", styles: [""], dependencies: [{ kind: "component", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-content', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ContentRendererComponent], template: "@if (contentPage) {\n  <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n}" }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ContentStyleComponent, FS_CONTENT_CONFIG, FsContentComponent, FsContentLayoutsComponent, FsContentPagesComponent, FsContentPagesModule };
+export { ContentStyleComponent, FS_CONTENT_CONFIG, FsContentComponent, FsContentLayoutsComponent, FsContentLayoutsModule, FsContentModule, FsContentPagesComponent, FsContentPagesModule };
 //# sourceMappingURL=firestitch-content.mjs.map