@firestitch/content 18.0.8 → 18.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,26 @@
1
+ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
2
+ import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
3
+ import { EditorType } from '../../../../enums';
4
+ import * as i0 from "@angular/core";
5
+ export class EditorTogglesComponent {
6
+ editors;
7
+ showJs = false;
8
+ toggleChange = new EventEmitter();
9
+ EditorType = EditorType;
10
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditorTogglesComponent, isStandalone: true, selector: "app-editor-toggles", inputs: { editors: "editors", showJs: "showJs" }, outputs: { toggleChange: "toggleChange" }, ngImport: i0, template: "<mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors[EditorType.Html]\" (change)=\"toggleChange.emit($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors[EditorType.Scss]\" (change)=\"toggleChange.emit($event)\">SCSS</mat-button-toggle>\n @if (showJs) {\n <mat-button-toggle value=\"js\" [checked]=\"editors[EditorType.Js]\" (change)=\"toggleChange.emit($event)\">JS</mat-button-toggle>\n }\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors[EditorType.GlobalScss]\" (change)=\"toggleChange.emit($event)\">Global SCSS</mat-button-toggle>\n</mat-button-toggle-group>\n", dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
12
+ }
13
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, decorators: [{
14
+ type: Component,
15
+ args: [{ selector: 'app-editor-toggles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
16
+ MatButtonToggleGroup,
17
+ MatButtonToggle,
18
+ ], template: "<mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors[EditorType.Html]\" (change)=\"toggleChange.emit($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors[EditorType.Scss]\" (change)=\"toggleChange.emit($event)\">SCSS</mat-button-toggle>\n @if (showJs) {\n <mat-button-toggle value=\"js\" [checked]=\"editors[EditorType.Js]\" (change)=\"toggleChange.emit($event)\">JS</mat-button-toggle>\n }\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors[EditorType.GlobalScss]\" (change)=\"toggleChange.emit($event)\">Global SCSS</mat-button-toggle>\n</mat-button-toggle-group>\n" }]
19
+ }], propDecorators: { editors: [{
20
+ type: Input
21
+ }], showJs: [{
22
+ type: Input
23
+ }], toggleChange: [{
24
+ type: Output
25
+ }] } });
26
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLXRvZ2dsZXMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2FwcC9tb2R1bGVzL2VkaXRvci9jb21wb25lbnRzL2VkaXRvci10b2dnbGVzL2VkaXRvci10b2dnbGVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvbW9kdWxlcy9lZGl0b3IvY29tcG9uZW50cy9lZGl0b3ItdG9nZ2xlcy9lZGl0b3ItdG9nZ2xlcy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsZUFBZSxFQUF5QixvQkFBb0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRS9HLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFhL0MsTUFBTSxPQUFPLHNCQUFzQjtJQUcxQixPQUFPLENBQTBCO0lBR2pDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFHZixZQUFZLEdBQUcsSUFBSSxZQUFZLEVBQXlCLENBQUM7SUFFekQsVUFBVSxHQUFHLFVBQVUsQ0FBQzt1R0FYcEIsc0JBQXNCOzJGQUF0QixzQkFBc0IsMktDdkJuQyx3cEJBUUEsNENEV0ksb0JBQW9CLGtUQUNwQixlQUFlOzsyRkFHTixzQkFBc0I7a0JBVmxDLFNBQVM7K0JBQ0Usb0JBQW9CLG1CQUViLHVCQUF1QixDQUFDLE1BQU0sY0FDbkMsSUFBSSxXQUNQO3dCQUNQLG9CQUFvQjt3QkFDcEIsZUFBZTtxQkFDaEI7OEJBS00sT0FBTztzQkFEYixLQUFLO2dCQUlDLE1BQU07c0JBRFosS0FBSztnQkFJQyxZQUFZO3NCQURsQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTWF0QnV0dG9uVG9nZ2xlLCBNYXRCdXR0b25Ub2dnbGVDaGFuZ2UsIE1hdEJ1dHRvblRvZ2dsZUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uLXRvZ2dsZSc7XG5cbmltcG9ydCB7IEVkaXRvclR5cGUgfSBmcm9tICcuLi8uLi8uLi8uLi9lbnVtcyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWVkaXRvci10b2dnbGVzJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2VkaXRvci10b2dnbGVzLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtcbiAgICBNYXRCdXR0b25Ub2dnbGVHcm91cCxcbiAgICBNYXRCdXR0b25Ub2dnbGUsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEVkaXRvclRvZ2dsZXNDb21wb25lbnQge1xuXG4gIEBJbnB1dCgpXG4gIHB1YmxpYyBlZGl0b3JzOiBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcblxuICBASW5wdXQoKVxuICBwdWJsaWMgc2hvd0pzID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpXG4gIHB1YmxpYyB0b2dnbGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPE1hdEJ1dHRvblRvZ2dsZUNoYW5nZT4oKTtcblxuICBwdWJsaWMgRWRpdG9yVHlwZSA9IEVkaXRvclR5cGU7XG5cbn1cbiIsIjxtYXQtYnV0dG9uLXRvZ2dsZS1ncm91cCBtdWx0aXBsZT5cbiAgPG1hdC1idXR0b24tdG9nZ2xlIHZhbHVlPVwiaHRtbFwiIFtjaGVja2VkXT1cImVkaXRvcnNbRWRpdG9yVHlwZS5IdG1sXVwiIChjaGFuZ2UpPVwidG9nZ2xlQ2hhbmdlLmVtaXQoJGV2ZW50KVwiPkhUTUw8L21hdC1idXR0b24tdG9nZ2xlPlxuICA8bWF0LWJ1dHRvbi10b2dnbGUgdmFsdWU9XCJzY3NzXCIgW2NoZWNrZWRdPVwiZWRpdG9yc1tFZGl0b3JUeXBlLlNjc3NdXCIgKGNoYW5nZSk9XCJ0b2dnbGVDaGFuZ2UuZW1pdCgkZXZlbnQpXCI+U0NTUzwvbWF0LWJ1dHRvbi10b2dnbGU+XG4gIEBpZiAoc2hvd0pzKSB7XG4gICAgPG1hdC1idXR0b24tdG9nZ2xlIHZhbHVlPVwianNcIiBbY2hlY2tlZF09XCJlZGl0b3JzW0VkaXRvclR5cGUuSnNdXCIgKGNoYW5nZSk9XCJ0b2dnbGVDaGFuZ2UuZW1pdCgkZXZlbnQpXCI+SlM8L21hdC1idXR0b24tdG9nZ2xlPlxuICB9XG4gIDxtYXQtYnV0dG9uLXRvZ2dsZSB2YWx1ZT1cImdsb2JhbFNjc3NcIiBbY2hlY2tlZF09XCJlZGl0b3JzW0VkaXRvclR5cGUuR2xvYmFsU2Nzc11cIiAoY2hhbmdlKT1cInRvZ2dsZUNoYW5nZS5lbWl0KCRldmVudClcIj5HbG9iYWwgU0NTUzwvbWF0LWJ1dHRvbi10b2dnbGU+XG48L21hdC1idXR0b24tdG9nZ2xlLWdyb3VwPlxuIl19
@@ -0,0 +1,2 @@
1
+ export * from './editor-toggles.component';
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvYXBwL21vZHVsZXMvZWRpdG9yL2NvbXBvbmVudHMvZWRpdG9yLXRvZ2dsZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyw0QkFBNEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZWRpdG9yLXRvZ2dsZXMuY29tcG9uZW50JztcbiJdfQ==
@@ -1,36 +1,36 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { inject, ElementRef, Component, ChangeDetectionStrategy, ViewChild, Input, InjectionToken, ChangeDetectorRef, NgModule, EventEmitter, Output, ViewChildren } from '@angular/core';
3
3
  import { DomSanitizer, Title } from '@angular/platform-browser';
4
- import { Router, NavigationEnd, RouterLink } from '@angular/router';
4
+ import { Router, NavigationEnd } from '@angular/router';
5
5
  import { HtmlRenderer } from '@firestitch/html';
6
6
  import { Subject, of, throwError, fromEvent } from 'rxjs';
7
7
  import { filter, takeUntil, tap, switchMap, finalize, map } from 'rxjs/operators';
8
- import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
8
+ import * as i2$1 from '@angular/forms';
9
+ import { FormsModule } from '@angular/forms';
10
+ import { CdkScrollable } from '@angular/cdk/scrolling';
9
11
  import * as i4 from '@angular/material/dialog';
10
12
  import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
13
+ import * as i5$1 from '@firestitch/dialog';
14
+ import { FsDialogModule } from '@firestitch/dialog';
15
+ import * as i3 from '@firestitch/form';
16
+ import { FsFormModule, FsFormDirective } from '@firestitch/form';
11
17
  import { FsMessage } from '@firestitch/message';
12
18
  import { FsPrompt } from '@firestitch/prompt';
19
+ import * as i1$1 from '@firestitch/skeleton';
20
+ import { FsSkeletonModule } from '@firestitch/skeleton';
13
21
  import * as i2 from '@firestitch/text-editor';
14
22
  import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
15
23
  import * as i1 from 'angular-split';
16
24
  import { AngularSplitModule } from 'angular-split';
17
25
  import { NgClass, NgTemplateOutlet } from '@angular/common';
18
- import * as i2$1 from '@angular/forms';
19
- import { FormsModule } from '@angular/forms';
20
- import * as i3 from '@firestitch/form';
21
- import { FsFormModule, FsFormDirective } from '@firestitch/form';
22
26
  import * as i5 from '@firestitch/common';
23
27
  import { FsCommonModule, index } from '@firestitch/common';
24
- import * as i1$1 from '@firestitch/skeleton';
25
- import { FsSkeletonModule } from '@firestitch/skeleton';
26
- import * as i5$1 from '@firestitch/dialog';
27
- import { FsDialogModule } from '@firestitch/dialog';
28
- import { CdkScrollable } from '@angular/cdk/scrolling';
29
- import { MatFormField, MatLabel } from '@angular/material/form-field';
30
- import { MatInput } from '@angular/material/input';
31
- import { MatButton, MatIconAnchor, MatAnchor, MatIconButton } from '@angular/material/button';
28
+ import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
29
+ import { MatButton, MatIconButton } from '@angular/material/button';
32
30
  import { MatIcon } from '@angular/material/icon';
33
31
  import { MatTooltip } from '@angular/material/tooltip';
32
+ import { MatFormField, MatLabel } from '@angular/material/form-field';
33
+ import { MatInput } from '@angular/material/input';
34
34
  import { ItemType } from '@firestitch/filter';
35
35
  import * as i1$2 from '@firestitch/list';
36
36
  import { FsListComponent, FsListModule } from '@firestitch/list';
@@ -372,6 +372,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
372
372
  type: Output
373
373
  }] } });
374
374
 
375
+ class EditorTogglesComponent {
376
+ editors;
377
+ showJs = false;
378
+ toggleChange = new EventEmitter();
379
+ EditorType = EditorType;
380
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
381
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditorTogglesComponent, isStandalone: true, selector: "app-editor-toggles", inputs: { editors: "editors", showJs: "showJs" }, outputs: { toggleChange: "toggleChange" }, ngImport: i0, template: "<mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors[EditorType.Html]\" (change)=\"toggleChange.emit($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors[EditorType.Scss]\" (change)=\"toggleChange.emit($event)\">SCSS</mat-button-toggle>\n @if (showJs) {\n <mat-button-toggle value=\"js\" [checked]=\"editors[EditorType.Js]\" (change)=\"toggleChange.emit($event)\">JS</mat-button-toggle>\n }\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors[EditorType.GlobalScss]\" (change)=\"toggleChange.emit($event)\">Global SCSS</mat-button-toggle>\n</mat-button-toggle-group>\n", dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
382
+ }
383
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, decorators: [{
384
+ type: Component,
385
+ args: [{ selector: 'app-editor-toggles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
386
+ MatButtonToggleGroup,
387
+ MatButtonToggle,
388
+ ], template: "<mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors[EditorType.Html]\" (change)=\"toggleChange.emit($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors[EditorType.Scss]\" (change)=\"toggleChange.emit($event)\">SCSS</mat-button-toggle>\n @if (showJs) {\n <mat-button-toggle value=\"js\" [checked]=\"editors[EditorType.Js]\" (change)=\"toggleChange.emit($event)\">JS</mat-button-toggle>\n }\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors[EditorType.GlobalScss]\" (change)=\"toggleChange.emit($event)\">Global SCSS</mat-button-toggle>\n</mat-button-toggle-group>\n" }]
389
+ }], propDecorators: { editors: [{
390
+ type: Input
391
+ }], showJs: [{
392
+ type: Input
393
+ }], toggleChange: [{
394
+ type: Output
395
+ }] } });
396
+
397
+ class EditorActionsComponent {
398
+ saveDisabled = false;
399
+ isMac = false;
400
+ previewPath = null;
401
+ settings = new EventEmitter();
402
+ save = new EventEmitter();
403
+ done = new EventEmitter();
404
+ preview = new EventEmitter();
405
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
406
+ 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 });
407
+ }
408
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, decorators: [{
409
+ type: Component,
410
+ args: [{ selector: 'app-editor-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
411
+ MatButton,
412
+ MatIconButton,
413
+ MatIcon,
414
+ MatTooltip,
415
+ ], 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"] }]
416
+ }], propDecorators: { saveDisabled: [{
417
+ type: Input
418
+ }], isMac: [{
419
+ type: Input
420
+ }], previewPath: [{
421
+ type: Input
422
+ }], settings: [{
423
+ type: Output
424
+ }], save: [{
425
+ type: Output
426
+ }], done: [{
427
+ type: Output
428
+ }], preview: [{
429
+ type: Output
430
+ }] } });
431
+
375
432
  class ContentLayoutComponent {
376
433
  _config = inject(FS_CONTENT_CONFIG);
377
434
  _data = inject(MAT_DIALOG_DATA);
@@ -430,12 +487,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
430
487
  }] } });
431
488
 
432
489
  class ContentLayoutEditorComponent {
433
- _data = inject(MAT_DIALOG_DATA);
434
- _dialogRef = inject(MatDialogRef);
435
- _message = inject(FsMessage);
436
- _dialog = inject(MatDialog);
437
- _cdRef = inject(ChangeDetectorRef);
438
- _prompt = inject(FsPrompt);
439
490
  editor;
440
491
  contentLayout;
441
492
  get isMac() {
@@ -452,6 +503,12 @@ class ContentLayoutEditorComponent {
452
503
  [EditorType.GlobalScss]: false,
453
504
  };
454
505
  _destroy$ = new Subject();
506
+ _data = inject(MAT_DIALOG_DATA);
507
+ _dialogRef = inject(MatDialogRef);
508
+ _message = inject(FsMessage);
509
+ _dialog = inject(MatDialog);
510
+ _cdRef = inject(ChangeDetectorRef);
511
+ _prompt = inject(FsPrompt);
455
512
  ngOnInit() {
456
513
  this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
457
514
  this._dialogRef.disableClose = true;
@@ -571,7 +628,7 @@ class ContentLayoutEditorComponent {
571
628
  });
572
629
  }
573
630
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
574
- 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: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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: "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 });
631
+ 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", "preview"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
575
632
  }
576
633
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
577
634
  type: Component,
@@ -581,18 +638,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
581
638
  FsSkeletonModule,
582
639
  FsDialogModule,
583
640
  MatDialogTitle,
584
- MatButton,
585
- MatAnchor,
586
- MatIconAnchor,
587
- MatIconButton,
588
- MatIcon,
589
- MatButtonToggleGroup,
590
- MatButtonToggle,
591
- MatTooltip,
641
+ EditorTogglesComponent,
642
+ EditorActionsComponent,
592
643
  CdkScrollable,
593
644
  MatDialogContent,
594
645
  EditorComponent,
595
- ], 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"] }]
646
+ ], 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"] }]
596
647
  }], propDecorators: { editor: [{
597
648
  type: ViewChild,
598
649
  args: [EditorComponent]
@@ -924,6 +975,9 @@ class ContentPageEditorComponent {
924
975
  }
925
976
  });
926
977
  }
978
+ openPreview() {
979
+ window.open(this.contentPage.path, '_blank');
980
+ }
927
981
  openSettings() {
928
982
  this._dialog.open(ContentPageComponent, {
929
983
  data: {
@@ -950,7 +1004,7 @@ class ContentPageEditorComponent {
950
1004
  });
951
1005
  }
952
1006
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
953
- 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: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { 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: "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 });
1007
+ 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 (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 (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", "preview"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
954
1008
  }
955
1009
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
956
1010
  type: Component,
@@ -960,19 +1014,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
960
1014
  FsSkeletonModule,
961
1015
  FsDialogModule,
962
1016
  MatDialogTitle,
963
- MatButton,
964
- MatAnchor,
965
- MatIconAnchor,
966
- MatIconButton,
967
- MatIcon,
968
- MatButtonToggleGroup,
969
- MatButtonToggle,
970
- MatTooltip,
971
- RouterLink,
1017
+ EditorTogglesComponent,
1018
+ EditorActionsComponent,
972
1019
  CdkScrollable,
973
1020
  MatDialogContent,
974
1021
  EditorComponent,
975
- ], 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"] }]
1022
+ ], 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 (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 (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"] }]
976
1023
  }], propDecorators: { editor: [{
977
1024
  type: ViewChild,
978
1025
  args: [EditorComponent]