@firestitch/content 18.0.9 → 18.0.11

package/fesm2022/firestitch-content.mjs

@@ -1,32 +1,33 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, InjectionToken, ChangeDetectorRef, NgModule, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, InjectionToken, ChangeDetectorRef, NgModule, input, model, signal, computed, DestroyRef, EventEmitter, Output, viewChild } from '@angular/core';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { Router, NavigationEnd } 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 { Subject, EMPTY, concat, fromEvent } from 'rxjs';
+import { filter, takeUntil, last, tap, finalize, map } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import * as i4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
-import * as i5$1 from '@firestitch/dialog';
+import * as i5 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
 import * as i3 from '@firestitch/form';
 import { FsFormModule, FsFormDirective } from '@firestitch/form';
-import { FsMessage } from '@firestitch/message';
 import { FsPrompt } from '@firestitch/prompt';
 import * as i1$1 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
+import { FsMessage } from '@firestitch/message';
 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 i5 from '@firestitch/common';
-import { FsCommonModule, index } from '@firestitch/common';
 import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
+import { MatButton, MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { ItemType } from '@firestitch/filter';
@@ -36,6 +37,8 @@ import * as i2$2 from '@firestitch/date';
 import { FsDateModule } from '@firestitch/date';
 import { MatSelect } from '@angular/material/select';
 import { MatOption } from '@angular/material/core';
+import * as i4$1 from '@firestitch/common';
+import { index, FsCommonModule } from '@firestitch/common';
 
 class ContentRendererComponent {
     _sanitizer = inject(DomSanitizer);
@@ -224,116 +227,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class EditorComponent {
-    _cdRef = inject(ChangeDetectorRef);
-    _message = inject(FsMessage);
-    showHtml = false;
-    showScss = false;
-    showJs = false;
-    showGlobalScss = false;
-    html;
-    scss;
-    js;
-    contentConfig;
-    changed = new EventEmitter();
-    focused = new EventEmitter();
-    blured = new EventEmitter();
-    changes = {};
+    showHtml = input(false);
+    showScss = input(false);
+    showJs = input(false);
+    showGlobalScss = input(false);
+    contentConfig = input();
+    // Two-way bound to the text editors, so each holds exactly what is on screen. Nothing sits
+    // between a keystroke and a save: the fsModelChange this replaced debounced every pane by
+    // 300 ms (its `debounce: 0` falls back to 300), so a quick Ctrl+S posted text without its
+    // last keystrokes (IEB-T292).
+    html = model();
+    scss = model();
+    js = model();
+    globalScss = signal(null);
+    contentStyle = signal(null);
+    focusedArea = signal(null);
+    saving = signal(false);
+    // A pane is changed when its text differs from what the server last confirmed. A pane
+    // cleared to '' counts; one typed back to its original text does not (IEB-T292).
+    changedTypes = computed(() => {
+        const saved = this._saved();
+        return Object.values(EditorType)
+            .filter((type) => type in saved && this.value(type) !== saved[type]);
+    });
+    hasChanges = computed(() => this.changedTypes().length !== 0);
     EditorType = EditorType;
-    focusedArea;
-    contentStyle;
-    resizing = false;
-    title;
     scssConfig;
     globalScssConfig;
     htmlConfig;
     jsConfig;
-    _destroy$ = new Subject();
+    _saved = signal({});
+    _message = inject(FsMessage);
+    _destroyRef = inject(DestroyRef);
     ngOnInit() {
-        this.initTextEditors();
-        this.initGlobalContentStyle();
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
+        this._initTextEditors();
+        this._saved.set({
+            [EditorType.Html]: this.html() ?? '',
+            [EditorType.Scss]: this.scss() ?? '',
+            [EditorType.Js]: this.js() ?? '',
+        });
+        this._initGlobalContentStyle();
+    }
+    value(type) {
+        const panes = {
+            [EditorType.Html]: this.html,
+            [EditorType.Scss]: this.scss,
+            [EditorType.Js]: this.js,
+            [EditorType.GlobalScss]: this.globalScss,
+        };
+        return panes[type]() ?? '';
+    }
+    /**
+     * Saves every changed pane, not just the one last focused, and records what was sent as
+     * the new baseline, so anything typed while the request is in flight stays changed. With
+     * nothing changed it sends nothing and shows no toast. Ctrl+S reaches this through fsForm's
+     * [submit], so it shares the Save button's gate (IEB-T292).
+     *
+     * `fields` maps a pane to its property on the record (html → content); `saveRecord` posts
+     * those properties.
+     */
+    save$(fields, saveRecord) {
+        const sent = Object.fromEntries(this.changedTypes().map((type) => [type, this.value(type)]));
+        const saves = [
+            this._saveRecord$(fields, sent, saveRecord),
+            this._saveGlobalScss$(sent),
+        ].filter((save) => !!save);
+        if (!saves.length) {
+            return EMPTY;
+        }
+        this.saving.set(true);
+        return concat(...saves)
+            .pipe(last(), tap(() => this._message.success('Saved Changes')), finalize(() => this.saving.set(false)));
+    }
+    _saveRecord$(fields, sent, saveRecord) {
+        const types = Object.keys(sent)
+            .filter((type) => fields[type]);
+        if (!types.length) {
+            return null;
+        }
+        return saveRecord(Object.fromEntries(types.map((type) => [fields[type], sent[type]])))
+            .pipe(tap(() => this._markSaved(types, sent)));
     }
-    change(type, value) {
-        this.changed.emit({ type, value });
-        this.changes[type] = value;
+    _saveGlobalScss$(sent) {
+        if (!(EditorType.GlobalScss in sent)) {
+            return null;
+        }
+        const contentStyle = { ...this.contentStyle(), scss: sent[EditorType.GlobalScss] };
+        return this.contentConfig().saveContentStyle(contentStyle)
+            .pipe(tap(() => {
+            this.contentStyle.set(contentStyle);
+            this._markSaved([EditorType.GlobalScss], sent);
+        }));
     }
-    get hasChanges() {
-        return Object.keys(this.changes)
-            .filter((name) => !!this.changes[name])
-            .length !== 0;
+    _markSaved(types, sent) {
+        this._saved.update((saved) => ({
+            ...saved,
+            ...Object.fromEntries(types.map((type) => [type, sent[type]])),
+        }));
     }
-    clearChange(type) {
-        this.changes[type] = undefined;
-        this._cdRef.markForCheck();
+    _initTextEditors() {
+        this.scssConfig = this._createTextEditorConfig(EditorType.Scss, 'scss');
+        this.jsConfig = this._createTextEditorConfig(EditorType.Js, 'js');
+        this.htmlConfig = this._createTextEditorConfig(EditorType.Html, 'html');
+        this.globalScssConfig = this._createTextEditorConfig(EditorType.GlobalScss, 'scss');
     }
-    initTextEditors() {
-        this.scssConfig = {
-            tabSize: 2,
-            language: 'scss',
-            height: '100%',
-            focus: () => {
-                this._onFocus(EditorType.Scss);
-            },
-            blur: () => {
-                this.blured.emit(EditorType.Scss);
-            },
-        };
-        this.jsConfig = {
-            tabSize: 2,
-            language: 'js',
-            height: '100%',
-            focus: () => {
-                this._onFocus(EditorType.Js);
-            },
-            blur: () => {
-                this.blured.emit(EditorType.Js);
-            },
-        };
-        this.htmlConfig = {
-            tabSize: 2,
-            language: 'html',
-            height: '100%',
-            focus: () => {
-                this._onFocus(EditorType.Html);
-            },
-            blur: () => {
-                this.blured.emit(EditorType.Html);
-            },
-        };
-        this.globalScssConfig = {
+    _createTextEditorConfig(type, language) {
+        return {
             tabSize: 2,
-            language: 'scss',
+            language,
             height: '100%',
             focus: () => {
-                this._onFocus(EditorType.GlobalScss);
-            },
-            blur: () => {
-                this.blured.emit(EditorType.GlobalScss);
+                this.focusedArea.set(type);
             },
         };
     }
-    initGlobalContentStyle() {
-        this.contentConfig.loadContentStyle()
-            .subscribe((contentStyle) => {
-            this.contentStyle = contentStyle || {};
-            this._cdRef.markForCheck();
-        });
-    }
-    saveGlobalScss() {
-        return this.contentConfig.saveContentStyle(this.contentStyle)
-            .pipe(tap(() => {
-            this._message.success('Saved Changes');
-        }));
-    }
-    _onFocus(type) {
-        this.focusedArea = type;
-        this.focused.emit(type);
+    _initGlobalContentStyle() {
+        this.contentConfig().loadContentStyle()
+            .pipe(tap((contentStyle) => {
+            const scss = contentStyle?.scss ?? '';
+            this.contentStyle.set(contentStyle || {});
+            this.globalScss.set(scss);
+            this._saved.update((saved) => ({ ...saved, [EditorType.GlobalScss]: scss }));
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     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{display:block;flex:1;height:100%;min-height:0}as-split{height:100%}: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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: EditorComponent, isStandalone: true, selector: "app-editor", inputs: { showHtml: { classPropertyName: "showHtml", publicName: "showHtml", isSignal: true, isRequired: false, transformFunction: null }, showScss: { classPropertyName: "showScss", publicName: "showScss", isSignal: true, isRequired: false, transformFunction: null }, showJs: { classPropertyName: "showJs", publicName: "showJs", isSignal: true, isRequired: false, transformFunction: null }, showGlobalScss: { classPropertyName: "showGlobalScss", publicName: "showGlobalScss", isSignal: true, isRequired: false, transformFunction: null }, contentConfig: { classPropertyName: "contentConfig", publicName: "contentConfig", isSignal: true, isRequired: false, transformFunction: null }, html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, scss: { classPropertyName: "scss", publicName: "scss", isSignal: true, isRequired: false, transformFunction: null }, js: { classPropertyName: "js", publicName: "js", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { html: "htmlChange", scss: "scssChange", js: "jsChange" }, 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]=\"changedTypes().includes(EditorType.Html)\"\n          [focused]=\"focusedArea() === EditorType.Html\">\n        HTML\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"html\"\n        name=\"html\"\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]=\"changedTypes().includes(EditorType.Scss)\"\n          [focused]=\"focusedArea() === EditorType.Scss\">\n        SCSS\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"scss\"\n        name=\"scss\"\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]=\"changedTypes().includes(EditorType.Js)\"\n          [focused]=\"focusedArea() === EditorType.Js\">\n        JS\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"js\"\n        name=\"js\"\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]=\"changedTypes().includes(EditorType.GlobalScss)\"\n          [focused]=\"focusedArea() === EditorType.GlobalScss\">\n        Global SCSS\n      </app-editor-label>\n      <ng-container *fsSkeleton=\"contentStyle()\">\n        <fs-text-editor\n          [(ngModel)]=\"globalScss\"\n          name=\"globalScss\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor>\n      </ng-container>\n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host{display:block;flex:1;height:100%;min-height:0}as-split{height:100%}: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: 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,
@@ -343,32 +362,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsTextEditorModule,
                         FormsModule,
                         FsFormModule,
-                        FsCommonModule,
                         FsSkeletonModule,
-                    ], 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{display:block;flex:1;height:100%;min-height:0}as-split{height:100%}: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"] }]
-        }], propDecorators: { showHtml: [{
-                type: Input
-            }], showScss: [{
-                type: Input
-            }], showJs: [{
-                type: Input
-            }], showGlobalScss: [{
-                type: Input
-            }], html: [{
-                type: Input
-            }], scss: [{
-                type: Input
-            }], js: [{
-                type: Input
-            }], contentConfig: [{
-                type: Input
-            }], changed: [{
-                type: Output
-            }], focused: [{
-                type: Output
-            }], blured: [{
-                type: Output
-            }] } });
+                    ], 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]=\"changedTypes().includes(EditorType.Html)\"\n          [focused]=\"focusedArea() === EditorType.Html\">\n        HTML\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"html\"\n        name=\"html\"\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]=\"changedTypes().includes(EditorType.Scss)\"\n          [focused]=\"focusedArea() === EditorType.Scss\">\n        SCSS\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"scss\"\n        name=\"scss\"\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]=\"changedTypes().includes(EditorType.Js)\"\n          [focused]=\"focusedArea() === EditorType.Js\">\n        JS\n      </app-editor-label>\n      <fs-text-editor\n        [(ngModel)]=\"js\"\n        name=\"js\"\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]=\"changedTypes().includes(EditorType.GlobalScss)\"\n          [focused]=\"focusedArea() === EditorType.GlobalScss\">\n        Global SCSS\n      </app-editor-label>\n      <ng-container *fsSkeleton=\"contentStyle()\">\n        <fs-text-editor\n          [(ngModel)]=\"globalScss\"\n          name=\"globalScss\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor>\n      </ng-container>\n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host{display:block;flex:1;height:100%;min-height:0}as-split{height:100%}: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"] }]
+        }] });
 
 class EditorTogglesComponent {
     editors;
@@ -399,14 +395,18 @@ class EditorActionsComponent {
     settings = new EventEmitter();
     save = new EventEmitter();
     done = new EventEmitter();
+    preview = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditorActionsComponent, isStandalone: true, selector: "app-editor-actions", inputs: { saveDisabled: "saveDisabled", isMac: "isMac", previewPath: "previewPath" }, outputs: { settings: "settings", save: "save", done: "done" }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"icon-button\"\n    (click)=\"settings.emit()\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n  <button\n      type=\"button\"\n      class=\"action-button\"\n      [disabled]=\"saveDisabled\"\n      [title]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n      (click)=\"save.emit()\">\n    Save\n  </button>\n\n  @if (previewPath !== null) {\n    <a\n        class=\"action-button\"\n        target=\"_blank\"\n        [href]=\"previewPath\">\n      Preview\n    </a>\n  }\n\n  <button\n      type=\"button\"\n      class=\"action-button\"\n      (click)=\"done.emit()\">\n    Done\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit}.icon-button:hover{background:#0000000a}.actions{display:flex;gap:5px;margin-left:30px}.action-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background:transparent;font:inherit;font-weight:500;color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}.action-button:hover:not([disabled]){background:#0000000a}.action-button[disabled]{opacity:.38;cursor:default}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditorActionsComponent, isStandalone: true, selector: "app-editor-actions", inputs: { saveDisabled: "saveDisabled", isMac: "isMac", previewPath: "previewPath" }, outputs: { settings: "settings", save: "save", done: "done", preview: "preview" }, ngImport: i0, template: "<button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"settings.emit()\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n  <button\n      mat-stroked-button\n      color=\"primary\"\n      type=\"button\"\n      [disabled]=\"saveDisabled\"\n      [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n      (click)=\"save.emit()\">\n    Save\n  </button>\n\n  @if (previewPath !== null) {\n    <button\n        mat-stroked-button\n        type=\"button\"\n        (click)=\"preview.emit()\">\n      Preview\n    </button>\n  }\n\n  <button\n      mat-stroked-button\n      type=\"button\"\n      (click)=\"done.emit()\">\n    Done\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.actions{display:flex;gap:5px;margin-left:30px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-editor-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatButton,
+                        MatIconButton,
                         MatIcon,
-                    ], template: "<button\n    type=\"button\"\n    class=\"icon-button\"\n    (click)=\"settings.emit()\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n  <button\n      type=\"button\"\n      class=\"action-button\"\n      [disabled]=\"saveDisabled\"\n      [title]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n      (click)=\"save.emit()\">\n    Save\n  </button>\n\n  @if (previewPath !== null) {\n    <a\n        class=\"action-button\"\n        target=\"_blank\"\n        [href]=\"previewPath\">\n      Preview\n    </a>\n  }\n\n  <button\n      type=\"button\"\n      class=\"action-button\"\n      (click)=\"done.emit()\">\n    Done\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit}.icon-button:hover{background:#0000000a}.actions{display:flex;gap:5px;margin-left:30px}.action-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background:transparent;font:inherit;font-weight:500;color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}.action-button:hover:not([disabled]){background:#0000000a}.action-button[disabled]{opacity:.38;cursor:default}\n"] }]
+                        MatTooltip,
+                    ], template: "<button\n    type=\"button\"\n    mat-icon-button\n    (click)=\"settings.emit()\">\n  <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n  <button\n      mat-stroked-button\n      color=\"primary\"\n      type=\"button\"\n      [disabled]=\"saveDisabled\"\n      [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n      (click)=\"save.emit()\">\n    Save\n  </button>\n\n  @if (previewPath !== null) {\n    <button\n        mat-stroked-button\n        type=\"button\"\n        (click)=\"preview.emit()\">\n      Preview\n    </button>\n  }\n\n  <button\n      mat-stroked-button\n      type=\"button\"\n      (click)=\"done.emit()\">\n    Done\n  </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.actions{display:flex;gap:5px;margin-left:30px}\n"] }]
         }], propDecorators: { saveDisabled: [{
                 type: Input
             }], isMac: [{
@@ -419,44 +419,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Output
             }], done: [{
                 type: Output
+            }], preview: [{
+                type: Output
             }] } });
 
 class ContentLayoutComponent {
+    contentLayout = signal(null);
     _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();
+    constructor() {
+        this._init();
     }
     save = () => {
-        return this._config.saveContentLayout(this.contentLayout)
+        // Only the fields this dialog edits. Sending the whole layout re-sent the Layout Editor's
+        // copy of content and styles, which the server wrote over edits saved since (IEB-T292).
+        const { id, name, tag } = this.contentLayout();
+        return this._config.saveContentLayout({ id, name, tag })
             .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();
-        });
+    _init() {
+        this.contentLayout.set({ ...this._data.contentLayout });
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutComponent, isStandalone: true, selector: "ng-component", 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.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,
@@ -472,102 +462,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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]
-            }] } });
+                    ], 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" }]
+        }], ctorParameters: () => [] });
 
 class ContentLayoutEditorComponent {
-    editor;
-    contentLayout;
+    editor = viewChild(EditorComponent);
+    contentLayout = signal(null);
     get isMac() {
         return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
     }
-    submitting;
     config;
     EditorType = EditorType;
-    focused = null;
-    title;
-    editors = {
+    editors = signal({
         [EditorType.Html]: true,
         [EditorType.Scss]: true,
         [EditorType.GlobalScss]: false,
-    };
-    _destroy$ = new Subject();
+    });
+    submitted = () => this.editor().save$({
+        [EditorType.Html]: 'content',
+        [EditorType.Scss]: 'styles',
+    }, (values) => this.config.saveContentLayout({ id: this.contentLayout().id, ...values }));
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
-    _message = inject(FsMessage);
     _dialog = inject(MatDialog);
-    _cdRef = inject(ChangeDetectorRef);
     _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
     ngOnInit() {
         this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
         this._dialogRef.disableClose = true;
         this.config = this._data.contentConfig;
-        this._initContentLayout(this._data.contentLayout);
+        this._initContentLayout();
         this._initEscape();
     }
     editorToggleChange(event) {
-        this.editors[event.value] = !this.editors[event.value];
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    _initContentLayout(contentLayout) {
-        this.config.loadContentLayout(contentLayout.id)
-            .subscribe((data) => {
-            this.contentLayout = data;
-            this._cdRef.markForCheck();
-        });
-    }
-    editorFocused(type) {
-        this.focused = type;
+        this.editors.update((editors) => ({ ...editors, [event.value]: !editors[event.value] }));
     }
     save() {
         this.submitted()
             .subscribe();
     }
-    submitted = () => {
-        this.submitting = true;
-        return of(null)
-            .pipe(filter(() => this.focused), switchMap(() => {
-            switch (this.focused) {
-                case EditorType.Html:
-                case EditorType.Scss:
-                    return this.saveContentPage();
-                case EditorType.GlobalScss:
-                    return this.editor.saveGlobalScss();
-            }
-            return throwError('Invalid focus');
-        }), tap(() => {
-            this.editor.clearChange(this.focused);
-            this._cdRef.markForCheck();
-        }), finalize(() => {
-            this.submitting = false;
-            this._cdRef.markForCheck();
-        }));
-    };
-    saveContentPage() {
-        const names = {
-            [EditorType.Scss]: 'styles',
-            [EditorType.Html]: 'content',
-        };
-        const data = {
-            id: this.contentLayout.id,
-            [names[this.focused]]: this.editor.changes[this.focused],
-        };
-        return this.config.saveContentLayout({
-            id: this.contentLayout.id,
-            ...data,
-        })
-            .pipe(tap(() => {
-            this._message.success('Saved Changes');
-        }));
-    }
     close() {
-        if (!this.editor.hasChanges) {
+        if (!this.editor()?.hasChanges()) {
             return this._dialogRef.close();
         }
         this._prompt.confirm({
@@ -587,40 +522,45 @@ class ContentLayoutEditorComponent {
                 },
             ],
         })
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((value) => {
-            if (value === 'discard') {
-                this._dialogRef.close();
-            }
-        });
+            .pipe(filter((value) => value === 'discard'), tap(() => this._dialogRef.close()), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     openSettings() {
         this._dialog.open(ContentLayoutComponent, {
             data: {
-                contentLayout: this.contentLayout,
+                contentLayout: this.contentLayout(),
             },
         })
             .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((contentLayout) => {
-            this.contentLayout = {
-                ...this.contentLayout,
-                ...contentLayout,
-            };
-            this._cdRef.markForCheck();
-        });
+            .pipe(filter((contentLayout) => !!contentLayout), 
+        // Only what the settings dialog edits. Merging content/styles from its response would
+        // push them through [html]/[scss] into the editors and wipe unsaved typing (IEB-T292).
+        tap((contentLayout) => {
+            this.contentLayout.update((current) => ({
+                ...current,
+                name: contentLayout.name,
+                tag: contentLayout.tag,
+            }));
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    _initContentLayout() {
+        this.config.loadContentLayout(this._data.contentLayout.id)
+            .pipe(tap((contentLayout) => this.contentLayout.set(contentLayout)), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     _initEscape() {
         fromEvent(document, 'keydown')
-            .pipe(filter((event) => event.code === 'Escape'), takeUntil(this._destroy$)).subscribe(() => {
+            .pipe(filter((event) => event.code === 'Escape'), tap(() => {
             const dialogRef = this._dialog.openDialogs.reverse()[0];
             if (dialogRef?.componentInstance === this) {
                 this.close();
             }
-        });
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     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\n    fsForm\n    [submit]=\"submitted\"\n    [dirtySubmitButton]=\"false\"\n    [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\">\n            {{ contentLayout.name }}\n          </div>\n        </div>\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n        <app-editor-actions\n          [saveDisabled]=\"!editor?.hasChanges || submitting\"\n          [isMac]=\"isMac\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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    <!-- <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,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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: "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: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n    fsForm\n    [submit]=\"submitted\"\n    [dirtySubmitButton]=\"false\"\n    [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\">\n            {{ contentLayout().name }}\n          </div>\n        </div>\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors()\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n        <app-editor-actions\n          [saveDisabled]=\"!editor()?.hasChanges() || editor()?.saving()\"\n          [isMac]=\"isMac\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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: "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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done", "preview"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "contentConfig", "html", "scss", "js"], outputs: ["htmlChange", "scssChange", "jsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
             type: Component,
@@ -635,11 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         CdkScrollable,
                         MatDialogContent,
                         EditorComponent,
-                    ], template: "<form\n    fsForm\n    [submit]=\"submitted\"\n    [dirtySubmitButton]=\"false\"\n    [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\">\n            {{ contentLayout.name }}\n          </div>\n        </div>\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n        <app-editor-actions\n          [saveDisabled]=\"!editor?.hasChanges || submitting\"\n          [isMac]=\"isMac\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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    <!-- <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,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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]
-            }] } });
+                    ], template: "<form\n    fsForm\n    [submit]=\"submitted\"\n    [dirtySubmitButton]=\"false\"\n    [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\">\n            {{ contentLayout().name }}\n          </div>\n        </div>\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors()\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n        <app-editor-actions\n          [saveDisabled]=\"!editor()?.hasChanges() || editor()?.saving()\"\n          [isMac]=\"isMac\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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"] }]
+        }] });
 
 class FsContentLayoutsComponent {
     _config = inject(FS_CONTENT_CONFIG);
@@ -778,52 +715,45 @@ const PageTypes = [
 ];
 
 class ContentPageComponent {
+    contentPage = signal(null);
+    contentLayouts = signal(null);
+    PageTypes = PageTypes;
     _config = inject(FS_CONTENT_CONFIG);
     _data = inject(MAT_DIALOG_DATA);
     _dialogRef = inject(MatDialogRef);
     _message = inject(FsMessage);
-    _cdRef = inject(ChangeDetectorRef);
-    textEditors;
-    contentPage = null;
-    PageTypes = PageTypes;
-    contentLayouts;
-    editors = { content: true, styles: true };
-    _destroy$ = new Subject();
+    _destroyRef = inject(DestroyRef);
+    constructor() {
+        this._init();
+    }
     ngOnInit() {
         this._dialogRef.updateSize('600px');
-        this._fetchData();
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
     }
     save = () => {
-        return this._config.saveContentPage(this.contentPage)
+        // Only the fields this dialog edits. Sending the whole page re-sent the Page Editor's copy
+        // of content, styles and js, which the server wrote over edits saved since (IEB-T292).
+        const { id, type, contentLayoutId, name, path, title } = this.contentPage();
+        return this._config.saveContentPage({ id, type, contentLayoutId, name, path, title })
             .pipe(tap((contentPage) => {
             this._message.success('Saved Changes');
             this._dialogRef.close(contentPage);
         }));
     };
-    _fetchData() {
-        this._config.loadContentLayouts()
-            .subscribe((contentLayouts) => {
-            this.contentLayouts = contentLayouts;
-            this._cdRef.markForCheck();
-        });
-        of(this._data.contentPage)
-            .pipe(switchMap((contentPage) => {
-            return of(contentPage);
-        }), takeUntil(this._destroy$))
-            .subscribe((contentPage) => {
-            this.contentPage = {
-                ...contentPage,
-                path: contentPage.path || '/',
-            };
-            this._cdRef.markForCheck();
+    _init() {
+        this.contentPage.set({
+            ...this._data.contentPage,
+            path: this._data.contentPage.path || '/',
         });
+        this._config.loadContentLayouts()
+            .pipe(
+        // The config answers with the { contentLayouts, paging } envelope
+        // (FsContentConfig.loadContentLayouts), so the select takes its array, not the
+        // envelope, which rendered no options at all (IEB-T294).
+        tap((response) => this.contentLayouts.set(response.contentLayouts)), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ContentPageComponent, isStandalone: true, selector: "ng-component", 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.id) {\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.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: ContentPageComponent, decorators: [{
             type: Component,
@@ -841,106 +771,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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]
-            }] } });
+                    ], 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.id) {\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" }]
+        }], ctorParameters: () => [] });
 
 class ContentPageEditorComponent {
-    _data = inject(MAT_DIALOG_DATA);
-    _dialogRef = inject(MatDialogRef);
-    _message = inject(FsMessage);
-    _dialog = inject(MatDialog);
-    _cdRef = inject(ChangeDetectorRef);
-    _prompt = inject(FsPrompt);
-    editor;
-    contentPage;
-    focused = null;
+    editor = viewChild(EditorComponent);
+    contentPage = signal(null);
     config;
-    resizing = false;
-    title;
-    editors = {
+    editors = signal({
         [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();
+    submitted = () => this.editor().save$({
+        [EditorType.Html]: 'content',
+        [EditorType.Scss]: 'styles',
+        [EditorType.Js]: 'js',
+    }, (values) => this.config.saveContentPage({ id: this.contentPage().id, ...values }));
+    _data = inject(MAT_DIALOG_DATA);
+    _dialogRef = inject(MatDialogRef);
+    _dialog = inject(MatDialog);
+    _prompt = inject(FsPrompt);
+    _destroyRef = inject(DestroyRef);
     ngOnInit() {
         this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
         this._dialogRef.disableClose = true;
         this.config = this._data.contentConfig;
-        this._initContentPage(this._data.contentPage);
+        this._initContentPage();
         this._initEscape();
     }
     editorToggleChange(event) {
-        this.editors[event.value] = !this.editors[event.value];
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        this._destroy$.complete();
-    }
-    _initContentPage(contentPage) {
-        this.config.loadContentPage(contentPage.id)
-            .subscribe((data) => {
-            this.contentPage = data;
-            this._cdRef.markForCheck();
-        });
-    }
-    editorFocused(type) {
-        this.focused = type;
+        this.editors.update((editors) => ({ ...editors, [event.value]: !editors[event.value] }));
     }
     save() {
         this.submitted()
             .subscribe();
     }
-    submitted = () => {
-        this.submitting = true;
-        return of(null)
-            .pipe(filter(() => this.focused), switchMap(() => {
-            switch (this.focused) {
-                case EditorType.Js:
-                case EditorType.Html:
-                case EditorType.Scss:
-                    return this.saveContentPage();
-                case EditorType.GlobalScss:
-                    return this.editor.saveGlobalScss();
-            }
-            return throwError('Invalid focus');
-        }), tap(() => {
-            this.editor.clearChange(this.focused);
-            this._cdRef.markForCheck();
-        }), 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,
-            [names[this.focused]]: this.editor.changes[this.focused],
-        };
-        return this.config.saveContentPage({
-            id: this.contentPage.id,
-            ...data,
-        })
-            .pipe(tap(() => {
-            this._message.success('Saved Changes');
-        }));
-    }
     close() {
-        if (!this.editor.hasChanges) {
+        if (!this.editor()?.hasChanges()) {
             return this._dialogRef.close();
         }
         this._prompt.confirm({
@@ -960,40 +832,52 @@ class ContentPageEditorComponent {
                 },
             ],
         })
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((value) => {
-            if (value === 'discard') {
-                this._dialogRef.close();
-            }
-        });
+            .pipe(filter((value) => value === 'discard'), tap(() => this._dialogRef.close()), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    openPreview() {
+        window.open(this.contentPage().path, '_blank');
     }
     openSettings() {
         this._dialog.open(ContentPageComponent, {
             data: {
-                contentPage: this.contentPage,
+                contentPage: this.contentPage(),
             },
         })
             .afterClosed()
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((contentPage) => {
-            this.contentPage = {
-                ...this.contentPage,
-                ...contentPage,
-            };
-            this._cdRef.markForCheck();
-        });
+            .pipe(filter((contentPage) => !!contentPage), 
+        // Only what the settings dialog edits. Merging content/styles/js from its response
+        // would push them through [html]/[scss]/[js] into the editors and wipe unsaved typing
+        // (IEB-T292). The path is merged so Preview follows a renamed page.
+        tap((contentPage) => {
+            this.contentPage.update((current) => ({
+                ...current,
+                type: contentPage.type,
+                contentLayoutId: contentPage.contentLayoutId,
+                name: contentPage.name,
+                path: contentPage.path,
+                title: contentPage.title,
+            }));
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
+    }
+    _initContentPage() {
+        this.config.loadContentPage(this._data.contentPage.id)
+            .pipe(tap((contentPage) => this.contentPage.set(contentPage)), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     _initEscape() {
         fromEvent(document, 'keydown')
-            .pipe(filter((event) => event.code === 'Escape'), takeUntil(this._destroy$)).subscribe(() => {
+            .pipe(filter((event) => event.code === 'Escape'), tap(() => {
             const dialogRef = this._dialog.openDialogs.reverse()[0];
             if (dialogRef?.componentInstance === this) {
                 this.close();
             }
-        });
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe();
     }
     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\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors\"\n            [showJs]=\"true\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n\n        <app-editor-actions\n          [saveDisabled]=\"!editor?.hasChanges || submitting\"\n          [isMac]=\"isMac\"\n          [previewPath]=\"contentPage.path\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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: "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: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done"] }, { 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true, isSignal: 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\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors()\"\n            [showJs]=\"true\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n\n        <app-editor-actions\n          [saveDisabled]=\"!editor()?.hasChanges() || editor()?.saving()\"\n          [isMac]=\"isMac\"\n          [previewPath]=\"contentPage().path\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (preview)=\"openPreview()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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: "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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done", "preview"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "contentConfig", "html", "scss", "js"], outputs: ["htmlChange", "scssChange", "jsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
             type: Component,
@@ -1008,11 +892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors\"\n            [showJs]=\"true\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n\n        <app-editor-actions\n          [saveDisabled]=\"!editor?.hasChanges || submitting\"\n          [isMac]=\"isMac\"\n          [previewPath]=\"contentPage.path\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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]
-            }] } });
+                    ], 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\n        <div class=\"toggles\">\n          <app-editor-toggles\n            [editors]=\"editors()\"\n            [showJs]=\"true\"\n            (toggleChange)=\"editorToggleChange($event)\">\n          </app-editor-toggles>\n        </div>\n\n        <app-editor-actions\n          [saveDisabled]=\"!editor()?.hasChanges() || editor()?.saving()\"\n          [isMac]=\"isMac\"\n          [previewPath]=\"contentPage().path\"\n          (settings)=\"openSettings()\"\n          (save)=\"save()\"\n          (preview)=\"openPreview()\"\n          (done)=\"close()\">\n        </app-editor-actions>\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      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}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"] }]
+        }] });
 
 class FsContentPagesComponent {
     _config = inject(FS_CONTENT_CONFIG);
@@ -1113,7 +994,7 @@ class FsContentPagesComponent {
         };
     }
     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 ɵ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=\"_blank\">\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: FsContentPagesComponent, decorators: [{
             type: Component,
@@ -1121,7 +1002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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"] }]
+                    ], 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=\"_blank\">\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: [{
@@ -1195,7 +1076,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$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 });
+    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: i4$1.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,