@firestitch/content 18.0.6 → 18.0.7

package/fesm2022/firestitch-content.mjs

@@ -28,7 +28,8 @@ import { FsDialogModule } from '@firestitch/dialog';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
-import { MatIconAnchor, MatButton, MatAnchor } from '@angular/material/button';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { ItemType } from '@firestitch/filter';
@@ -335,7 +336,7 @@ class EditorComponent {
         this.focused.emit(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: EditorComponent, isStandalone: true, selector: "app-editor", inputs: { showHtml: "showHtml", showScss: "showScss", showJs: "showJs", showGlobalScss: "showGlobalScss", html: "html", scss: "scss", js: "js", contentConfig: "contentConfig" }, outputs: { changed: "changed", focused: "focused", blured: "blured" }, ngImport: i0, template: "<as-split [unit]=\"'percent'\" [gutterSize]=\"25\"> \n  <as-split-area [size]=\"70\" [visible]=\"showHtml\" [order]=\"1\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.html !== undefined\"\n          [focused]=\"focusedArea === 'html'\">\n        HTML\n      </app-editor-label>\n      <fs-text-editor \n        [(ngModel)]=\"html\" \n        name=\"html\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Html, $event)\"\n        [config]=\"htmlConfig\">\n      </fs-text-editor>              \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showScss\" [order]=\"2\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.scss !== undefined\"\n          [focused]=\"focusedArea === 'scss'\">\n        SCSS\n      </app-editor-label>\n      <fs-text-editor \n        [(ngModel)]=\"scss\" \n        name=\"scss\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Scss, $event)\"\n        [config]=\"scssConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\"  [visible]=\"showJs\" [order]=\"3\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.js !== undefined\"\n          [focused]=\"focusedArea === 'js'\">\n        JS\n      </app-editor-label>\n      <fs-text-editor \n        [(ngModel)]=\"js\" \n        name=\"js\"\n        [fsModelChangeOptions]=\"{ debounce: 0 }\"\n        (fsModelChange)=\"change(EditorType.Js, $event)\"\n        [config]=\"jsConfig\">\n      </fs-text-editor>    \n    </div>\n  </as-split-area>\n  <as-split-area [size]=\"30\" [visible]=\"showGlobalScss\" [order]=\"4\">\n    <div class=\"editor-container\">\n      <app-editor-label\n          [changed]=\"changes.globalScss !== undefined\"\n          [focused]=\"focusedArea === 'globalScss'\">\n        Global SCSS\n      </app-editor-label>\n      <ng-container *fsSkeleton=\"contentStyle\">\n        <fs-text-editor \n          [(ngModel)]=\"contentStyle.scss\" \n          name=\"globalScss\"\n          [fsModelChangeOptions]=\"{ debounce: 300 }\"\n          (fsModelChange)=\"change(EditorType.GlobalScss, $event)\"\n          [config]=\"globalScssConfig\">\n        </fs-text-editor> \n      </ng-container>   \n    </div>\n  </as-split-area>\n</as-split>\n", styles: [":host ::ng-deep .as-split-gutter{background-color:unset!important}.editor-container{height:100%;border-radius:5px;display:flex;flex-direction:column}.editor-container fs-text-editor{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i1.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: "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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
@@ -347,7 +348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         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 ::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"] }]
+                    ], 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: [{
@@ -571,7 +572,7 @@ class ContentLayoutEditorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <!-- <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div> -->\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <!-- <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div> -->\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::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: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
             type: Component,
@@ -581,16 +582,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsSkeletonModule,
                         FsDialogModule,
                         MatDialogTitle,
-                        MatIconAnchor,
+                        MatButtonModule,
                         MatIcon,
                         MatButtonToggleGroup,
                         MatButtonToggle,
-                        MatButton,
                         MatTooltip,
                         CdkScrollable,
                         MatDialogContent,
                         EditorComponent,
-                    ], template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <!-- <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div> -->\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
+                    ], template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentLayout\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Layout Editor\n          <div class=\"small\">{{contentLayout.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentLayout.content\"\n        [scss]=\"contentLayout.styles\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n\n    <!-- <div mat-dialog-actions>\n      <button \n        mat-button\n          color=\"primary\"\n          (click)=\"close()\"\n          type=\"button\">  \n        Done      \n      </button>\n      <div class=\"toggles\">\n        <mat-button-toggle-group multiple>\n          <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n          <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n          <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n        </mat-button-toggle-group>      \n      </div>\n    </div> -->\n  </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::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]
@@ -948,7 +948,7 @@ class ContentPageEditorComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::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: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
             type: Component,
@@ -958,18 +958,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsSkeletonModule,
                         FsDialogModule,
                         MatDialogTitle,
-                        MatIconAnchor,
+                        MatButtonModule,
                         MatIcon,
                         MatButtonToggleGroup,
                         MatButtonToggle,
-                        MatButton,
                         MatTooltip,
-                        MatAnchor,
                         RouterLink,
                         CdkScrollable,
                         MatDialogContent,
                         EditorComponent,
-                    ], template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
+                    ], template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n  <fs-dialog *fsSkeletonForm=\"contentPage\">\n    <h1 mat-dialog-title>\n      <div class=\"title-container\">\n        <div class=\"title\">\n          Page Editor\n          <div class=\"small\">{{contentPage.name}}</div>   \n        </div>\n        <a\n            (click)=\"openSettings()\"\n            mat-icon-button>\n          <mat-icon>settings</mat-icon>\n        </a>\n\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n            <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n            <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n            <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n\n        <div class=\"actions\">\n          <button\n              #submit\n              mat-stroked-button\n              color=\"primary\"\n              [disabled]=\"!editor?.hasChanges || submitting\"\n              [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n              type=\"button\"\n              (click)=\"save()\">  \n            Save\n          </button>\n\n          <a \n              mat-stroked-button\n              target=\"_blank\"\n              [routerLink]=\"contentPage.path\"\n              type=\"button\">  \n            Preview\n          </a>\n\n          <button \n              mat-stroked-button\n              (click)=\"close()\"\n              type=\"button\">  \n            Done\n          </button>\n        </div>\n      </div>\n    </h1>\n    <div mat-dialog-content>\n      <app-editor\n        [contentConfig]=\"config\"\n        [showHtml]=\"editors.html\"\n        [showJs]=\"editors.js\"\n        [showScss]=\"editors.scss\"\n        [showGlobalScss]=\"editors.globalScss\"\n        [html]=\"contentPage.content\"\n        [scss]=\"contentPage.styles\"\n        [js]=\"contentPage.js\"\n        (focused)=\"editorFocused($event)\">\n      </app-editor>\n    </div>\n  </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::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]