@firestitch/content 18.0.7 → 18.0.9
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.
- package/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.d.ts +6 -6
- package/app/modules/editor/components/editor-actions/editor-actions.component.d.ts +12 -0
- package/app/modules/editor/components/editor-actions/index.d.ts +1 -0
- package/app/modules/editor/components/editor-toggles/editor-toggles.component.d.ts +12 -0
- package/app/modules/editor/components/editor-toggles/index.d.ts +1 -0
- package/esm2022/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.mjs +20 -26
- package/esm2022/app/modules/content-pages/components/content-page-editor/content-page-editor.component.mjs +7 -15
- package/esm2022/app/modules/editor/components/editor-actions/editor-actions.component.mjs +32 -0
- package/esm2022/app/modules/editor/components/editor-actions/index.mjs +2 -0
- package/esm2022/app/modules/editor/components/editor-toggles/editor-toggles.component.mjs +26 -0
- package/esm2022/app/modules/editor/components/editor-toggles/index.mjs +2 -0
- package/fesm2022/firestitch-content.mjs +77 -36
- package/fesm2022/firestitch-content.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,37 +1,34 @@
|
|
|
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
|
|
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
|
|
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
|
|
25
|
-
import {
|
|
26
|
-
import * as i5$1 from '@firestitch/dialog';
|
|
27
|
-
import { FsDialogModule } from '@firestitch/dialog';
|
|
28
|
-
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
28
|
+
import { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';
|
|
29
|
+
import { MatIcon } from '@angular/material/icon';
|
|
29
30
|
import { MatFormField, MatLabel } from '@angular/material/form-field';
|
|
30
31
|
import { MatInput } from '@angular/material/input';
|
|
31
|
-
import * as i6 from '@angular/material/button';
|
|
32
|
-
import { MatButtonModule } from '@angular/material/button';
|
|
33
|
-
import { MatIcon } from '@angular/material/icon';
|
|
34
|
-
import { MatTooltip } from '@angular/material/tooltip';
|
|
35
32
|
import { ItemType } from '@firestitch/filter';
|
|
36
33
|
import * as i1$2 from '@firestitch/list';
|
|
37
34
|
import { FsListComponent, FsListModule } from '@firestitch/list';
|
|
@@ -373,6 +370,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
373
370
|
type: Output
|
|
374
371
|
}] } });
|
|
375
372
|
|
|
373
|
+
class EditorTogglesComponent {
|
|
374
|
+
editors;
|
|
375
|
+
showJs = false;
|
|
376
|
+
toggleChange = new EventEmitter();
|
|
377
|
+
EditorType = EditorType;
|
|
378
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
379
|
+
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 });
|
|
380
|
+
}
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorTogglesComponent, decorators: [{
|
|
382
|
+
type: Component,
|
|
383
|
+
args: [{ selector: 'app-editor-toggles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
384
|
+
MatButtonToggleGroup,
|
|
385
|
+
MatButtonToggle,
|
|
386
|
+
], 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" }]
|
|
387
|
+
}], propDecorators: { editors: [{
|
|
388
|
+
type: Input
|
|
389
|
+
}], showJs: [{
|
|
390
|
+
type: Input
|
|
391
|
+
}], toggleChange: [{
|
|
392
|
+
type: Output
|
|
393
|
+
}] } });
|
|
394
|
+
|
|
395
|
+
class EditorActionsComponent {
|
|
396
|
+
saveDisabled = false;
|
|
397
|
+
isMac = false;
|
|
398
|
+
previewPath = null;
|
|
399
|
+
settings = new EventEmitter();
|
|
400
|
+
save = new EventEmitter();
|
|
401
|
+
done = new EventEmitter();
|
|
402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: EditorActionsComponent, isStandalone: true, selector: "app-editor-actions", inputs: { saveDisabled: "saveDisabled", isMac: "isMac", previewPath: "previewPath" }, outputs: { settings: "settings", save: "save", done: "done" }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"icon-button\"\n (click)=\"settings.emit()\">\n <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n <button\n type=\"button\"\n class=\"action-button\"\n [disabled]=\"saveDisabled\"\n [title]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n (click)=\"save.emit()\">\n Save\n </button>\n\n @if (previewPath !== null) {\n <a\n class=\"action-button\"\n target=\"_blank\"\n [href]=\"previewPath\">\n Preview\n </a>\n }\n\n <button\n type=\"button\"\n class=\"action-button\"\n (click)=\"done.emit()\">\n Done\n </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit}.icon-button:hover{background:#0000000a}.actions{display:flex;gap:5px;margin-left:30px}.action-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background:transparent;font:inherit;font-weight:500;color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}.action-button:hover:not([disabled]){background:#0000000a}.action-button[disabled]{opacity:.38;cursor:default}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
404
|
+
}
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: EditorActionsComponent, decorators: [{
|
|
406
|
+
type: Component,
|
|
407
|
+
args: [{ selector: 'app-editor-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
408
|
+
MatIcon,
|
|
409
|
+
], template: "<button\n type=\"button\"\n class=\"icon-button\"\n (click)=\"settings.emit()\">\n <mat-icon>settings</mat-icon>\n</button>\n\n<div class=\"actions\">\n <button\n type=\"button\"\n class=\"action-button\"\n [disabled]=\"saveDisabled\"\n [title]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n (click)=\"save.emit()\">\n Save\n </button>\n\n @if (previewPath !== null) {\n <a\n class=\"action-button\"\n target=\"_blank\"\n [href]=\"previewPath\">\n Preview\n </a>\n }\n\n <button\n type=\"button\"\n class=\"action-button\"\n (click)=\"done.emit()\">\n Done\n </button>\n</div>\n", styles: [":host{display:flex;align-items:center}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer;color:inherit}.icon-button:hover{background:#0000000a}.actions{display:flex;gap:5px;margin-left:30px}.action-button{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background:transparent;font:inherit;font-weight:500;color:inherit;text-decoration:none;cursor:pointer;white-space:nowrap}.action-button:hover:not([disabled]){background:#0000000a}.action-button[disabled]{opacity:.38;cursor:default}\n"] }]
|
|
410
|
+
}], propDecorators: { saveDisabled: [{
|
|
411
|
+
type: Input
|
|
412
|
+
}], isMac: [{
|
|
413
|
+
type: Input
|
|
414
|
+
}], previewPath: [{
|
|
415
|
+
type: Input
|
|
416
|
+
}], settings: [{
|
|
417
|
+
type: Output
|
|
418
|
+
}], save: [{
|
|
419
|
+
type: Output
|
|
420
|
+
}], done: [{
|
|
421
|
+
type: Output
|
|
422
|
+
}] } });
|
|
423
|
+
|
|
376
424
|
class ContentLayoutComponent {
|
|
377
425
|
_config = inject(FS_CONTENT_CONFIG);
|
|
378
426
|
_data = inject(MAT_DIALOG_DATA);
|
|
@@ -431,12 +479,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
431
479
|
}] } });
|
|
432
480
|
|
|
433
481
|
class ContentLayoutEditorComponent {
|
|
434
|
-
_data = inject(MAT_DIALOG_DATA);
|
|
435
|
-
_dialogRef = inject(MatDialogRef);
|
|
436
|
-
_message = inject(FsMessage);
|
|
437
|
-
_dialog = inject(MatDialog);
|
|
438
|
-
_cdRef = inject(ChangeDetectorRef);
|
|
439
|
-
_prompt = inject(FsPrompt);
|
|
440
482
|
editor;
|
|
441
483
|
contentLayout;
|
|
442
484
|
get isMac() {
|
|
@@ -453,6 +495,12 @@ class ContentLayoutEditorComponent {
|
|
|
453
495
|
[EditorType.GlobalScss]: false,
|
|
454
496
|
};
|
|
455
497
|
_destroy$ = new Subject();
|
|
498
|
+
_data = inject(MAT_DIALOG_DATA);
|
|
499
|
+
_dialogRef = inject(MatDialogRef);
|
|
500
|
+
_message = inject(FsMessage);
|
|
501
|
+
_dialog = inject(MatDialog);
|
|
502
|
+
_cdRef = inject(ChangeDetectorRef);
|
|
503
|
+
_prompt = inject(FsPrompt);
|
|
456
504
|
ngOnInit() {
|
|
457
505
|
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
458
506
|
this._dialogRef.disableClose = true;
|
|
@@ -572,7 +620,7 @@ class ContentLayoutEditorComponent {
|
|
|
572
620
|
});
|
|
573
621
|
}
|
|
574
622
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
575
|
-
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
|
|
623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentLayoutEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form\n fsForm\n [submit]=\"submitted\"\n [dirtySubmitButton]=\"false\"\n [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentLayout\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Layout Editor\n <div class=\"small\">\n {{ contentLayout.name }}\n </div>\n </div>\n <div class=\"toggles\">\n <app-editor-toggles\n [editors]=\"editors\"\n (toggleChange)=\"editorToggleChange($event)\">\n </app-editor-toggles>\n </div>\n <app-editor-actions\n [saveDisabled]=\"!editor?.hasChanges || submitting\"\n [isMac]=\"isMac\"\n (settings)=\"openSettings()\"\n (save)=\"save()\"\n (done)=\"close()\">\n </app-editor-actions>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentLayout.content\"\n [scss]=\"contentLayout.styles\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n <!-- <div mat-dialog-actions>\n <button \n mat-button\n color=\"primary\"\n (click)=\"close()\"\n type=\"button\"> \n Done \n </button>\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n </div> -->\n </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
576
624
|
}
|
|
577
625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
|
|
578
626
|
type: Component,
|
|
@@ -582,15 +630,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
582
630
|
FsSkeletonModule,
|
|
583
631
|
FsDialogModule,
|
|
584
632
|
MatDialogTitle,
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
MatButtonToggleGroup,
|
|
588
|
-
MatButtonToggle,
|
|
589
|
-
MatTooltip,
|
|
633
|
+
EditorTogglesComponent,
|
|
634
|
+
EditorActionsComponent,
|
|
590
635
|
CdkScrollable,
|
|
591
636
|
MatDialogContent,
|
|
592
637
|
EditorComponent,
|
|
593
|
-
], template: "<form
|
|
638
|
+
], 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"] }]
|
|
594
639
|
}], propDecorators: { editor: [{
|
|
595
640
|
type: ViewChild,
|
|
596
641
|
args: [EditorComponent]
|
|
@@ -948,7 +993,7 @@ class ContentPageEditorComponent {
|
|
|
948
993
|
});
|
|
949
994
|
}
|
|
950
995
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
951
|
-
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
|
|
996
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ContentPageEditorComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentPage\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Page Editor\n <div class=\"small\">{{contentPage.name}}</div>\n </div>\n\n <div class=\"toggles\">\n <app-editor-toggles\n [editors]=\"editors\"\n [showJs]=\"true\"\n (toggleChange)=\"editorToggleChange($event)\">\n </app-editor-toggles>\n </div>\n\n <app-editor-actions\n [saveDisabled]=\"!editor?.hasChanges || submitting\"\n [isMac]=\"isMac\"\n [previewPath]=\"contentPage.path\"\n (settings)=\"openSettings()\"\n (save)=\"save()\"\n (done)=\"close()\">\n </app-editor-actions>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showJs]=\"editors.js\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentPage.content\"\n [scss]=\"contentPage.styles\"\n [js]=\"contentPage.js\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i3.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1$1.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: EditorTogglesComponent, selector: "app-editor-toggles", inputs: ["editors", "showJs"], outputs: ["toggleChange"] }, { kind: "component", type: EditorActionsComponent, selector: "app-editor-actions", inputs: ["saveDisabled", "isMac", "previewPath"], outputs: ["settings", "save", "done"] }, { kind: "component", type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
952
997
|
}
|
|
953
998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
|
|
954
999
|
type: Component,
|
|
@@ -958,16 +1003,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
958
1003
|
FsSkeletonModule,
|
|
959
1004
|
FsDialogModule,
|
|
960
1005
|
MatDialogTitle,
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
MatButtonToggleGroup,
|
|
964
|
-
MatButtonToggle,
|
|
965
|
-
MatTooltip,
|
|
966
|
-
RouterLink,
|
|
1006
|
+
EditorTogglesComponent,
|
|
1007
|
+
EditorActionsComponent,
|
|
967
1008
|
CdkScrollable,
|
|
968
1009
|
MatDialogContent,
|
|
969
1010
|
EditorComponent,
|
|
970
|
-
], 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
|
|
1011
|
+
], template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentPage\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Page Editor\n <div class=\"small\">{{contentPage.name}}</div>\n </div>\n\n <div class=\"toggles\">\n <app-editor-toggles\n [editors]=\"editors\"\n [showJs]=\"true\"\n (toggleChange)=\"editorToggleChange($event)\">\n </app-editor-toggles>\n </div>\n\n <app-editor-actions\n [saveDisabled]=\"!editor?.hasChanges || submitting\"\n [isMac]=\"isMac\"\n [previewPath]=\"contentPage.path\"\n (settings)=\"openSettings()\"\n (save)=\"save()\"\n (done)=\"close()\">\n </app-editor-actions>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showJs]=\"editors.js\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentPage.content\"\n [scss]=\"contentPage.styles\"\n [js]=\"contentPage.js\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-container{border-radius:0;height:100%}::ng-deep .fs-content-editor-overlay-pane .mdc-dialog__container,::ng-deep .fs-content-editor-overlay-pane .mat-mdc-dialog-surface{height:100%}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content,fs-dialog ::ng-deep .mat-mdc-dialog-content{max-height:none;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mdc-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
|
|
971
1012
|
}], propDecorators: { editor: [{
|
|
972
1013
|
type: ViewChild,
|
|
973
1014
|
args: [EditorComponent]
|