@firestitch/content 12.2.5 → 12.2.7
Sign up to get free protection for your applications and to get access to all the features.
- package/app/enums/editor-type.d.ts +6 -0
- package/app/enums/index.d.ts +1 -0
- package/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.d.ts +12 -4
- package/app/modules/content-pages/components/content-page-editor/content-page-editor.component.d.ts +10 -3
- package/app/modules/editor/components/editor/editor.component.d.ts +12 -4
- package/bundles/firestitch-content.umd.js +336 -173
- package/bundles/firestitch-content.umd.js.map +1 -1
- package/esm2015/app/enums/editor-type.js +8 -0
- package/esm2015/app/enums/index.js +2 -1
- package/esm2015/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.js +87 -34
- package/esm2015/app/modules/content-pages/components/content-page-editor/content-page-editor.component.js +89 -37
- package/esm2015/app/modules/content-pages/components/content-pages/content-pages.component.js +2 -2
- package/esm2015/app/modules/editor/components/editor/editor.component.js +58 -13
- package/fesm2015/firestitch-content.js +238 -91
- package/fesm2015/firestitch-content.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,9 +2,9 @@ import * as i10 from '@angular/common';
|
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, InjectionToken, Inject, ViewChildren, ViewChild, ElementRef } from '@angular/core';
|
|
5
|
-
import * as
|
|
5
|
+
import * as i9 from '@angular/forms';
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i5$1 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
9
|
import * as i8$2 from '@angular/material/button-toggle';
|
|
10
10
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
@@ -12,18 +12,18 @@ import * as i1 from '@angular/material/dialog';
|
|
|
12
12
|
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
13
13
|
import * as i4$1 from '@angular/material/form-field';
|
|
14
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i6 from '@angular/material/icon';
|
|
16
16
|
import { MatIconModule } from '@angular/material/icon';
|
|
17
17
|
import * as i8$1 from '@angular/material/input';
|
|
18
18
|
import { MatInputModule } from '@angular/material/input';
|
|
19
|
-
import * as i5$
|
|
19
|
+
import * as i5$2 from '@angular/material/select';
|
|
20
20
|
import { MatSelectModule } from '@angular/material/select';
|
|
21
21
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
22
|
-
import * as i3$
|
|
22
|
+
import * as i3$3 from '@firestitch/date';
|
|
23
23
|
import { FsDateModule } from '@firestitch/date';
|
|
24
24
|
import * as i3$1 from '@firestitch/dialog';
|
|
25
25
|
import { FsDialogModule } from '@firestitch/dialog';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i5 from '@firestitch/form';
|
|
27
27
|
import { FsFormModule, FsFormDirective } from '@firestitch/form';
|
|
28
28
|
import { FsHtmlEditorModule } from '@firestitch/html-editor';
|
|
29
29
|
import * as i3 from '@firestitch/label';
|
|
@@ -34,29 +34,50 @@ import * as i8 from '@firestitch/skeleton';
|
|
|
34
34
|
import { FsSkeletonModule } from '@firestitch/skeleton';
|
|
35
35
|
import * as i4 from '@firestitch/text-editor';
|
|
36
36
|
import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
|
|
37
|
-
import * as i7
|
|
37
|
+
import * as i7 from '@firestitch/common';
|
|
38
38
|
import { FsCommonModule, index } from '@firestitch/common';
|
|
39
39
|
import * as i2$1 from 'angular-split';
|
|
40
40
|
import { AngularSplitModule } from 'angular-split';
|
|
41
41
|
import * as i2 from '@firestitch/message';
|
|
42
|
-
import { Subject, of } from 'rxjs';
|
|
42
|
+
import { Subject, of, throwError } from 'rxjs';
|
|
43
43
|
import { tap, switchMap, takeUntil, filter, map } from 'rxjs/operators';
|
|
44
|
+
import * as i3$2 from '@firestitch/prompt';
|
|
44
45
|
import { ItemType } from '@firestitch/filter';
|
|
45
|
-
import * as i6 from '@angular/material/core';
|
|
46
|
+
import * as i6$1 from '@angular/material/core';
|
|
46
47
|
import * as i1$1 from '@angular/platform-browser';
|
|
47
48
|
import * as i2$3 from '@angular/router';
|
|
48
49
|
import { NavigationEnd } from '@angular/router';
|
|
49
|
-
import * as i3$
|
|
50
|
+
import * as i3$4 from '@firestitch/body';
|
|
51
|
+
|
|
52
|
+
var EditorType;
|
|
53
|
+
(function (EditorType) {
|
|
54
|
+
EditorType["Js"] = "js";
|
|
55
|
+
EditorType["Html"] = "html";
|
|
56
|
+
EditorType["Scss"] = "scss";
|
|
57
|
+
EditorType["GlobalScss"] = "globalScss";
|
|
58
|
+
})(EditorType || (EditorType = {}));
|
|
59
|
+
|
|
60
|
+
var PageType;
|
|
61
|
+
(function (PageType) {
|
|
62
|
+
PageType["StandardPage"] = "standardPage";
|
|
63
|
+
PageType["BlogPost"] = "blogPost";
|
|
64
|
+
PageType["HomePage"] = "homePage";
|
|
65
|
+
PageType["NotFoundPage"] = "notFoundPage";
|
|
66
|
+
})(PageType || (PageType = {}));
|
|
50
67
|
|
|
51
68
|
class EditorComponent {
|
|
52
|
-
constructor(
|
|
53
|
-
this._message = _message;
|
|
69
|
+
constructor(_cdRef, _message) {
|
|
54
70
|
this._cdRef = _cdRef;
|
|
71
|
+
this._message = _message;
|
|
55
72
|
this.showHtml = false;
|
|
56
73
|
this.showScss = false;
|
|
57
74
|
this.showJs = false;
|
|
58
75
|
this.showGlobalScss = false;
|
|
59
76
|
this.changed = new EventEmitter();
|
|
77
|
+
this.focused = new EventEmitter();
|
|
78
|
+
this.blured = new EventEmitter();
|
|
79
|
+
this.changes = {};
|
|
80
|
+
this.EditorType = EditorType;
|
|
60
81
|
this.resizing = false;
|
|
61
82
|
this._destroy$ = new Subject();
|
|
62
83
|
}
|
|
@@ -68,34 +89,63 @@ class EditorComponent {
|
|
|
68
89
|
this._destroy$.next();
|
|
69
90
|
this._destroy$.complete();
|
|
70
91
|
}
|
|
71
|
-
|
|
72
|
-
this.
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
92
|
+
change(type, value) {
|
|
93
|
+
this.changed.emit({ type, value });
|
|
94
|
+
this.changes[type] = value;
|
|
95
|
+
}
|
|
96
|
+
get hasChanges() {
|
|
97
|
+
return Object.keys(this.changes)
|
|
98
|
+
.filter((name) => !!this.changes[name])
|
|
99
|
+
.length !== 0;
|
|
100
|
+
}
|
|
101
|
+
clearChange(type) {
|
|
102
|
+
this.changes[type] = null;
|
|
103
|
+
this._cdRef.markForCheck();
|
|
78
104
|
}
|
|
79
105
|
initTextEditors() {
|
|
80
106
|
this.scssConfig = {
|
|
81
107
|
tabSize: 2,
|
|
82
108
|
language: 'scss',
|
|
83
109
|
height: '100%',
|
|
110
|
+
focus: () => {
|
|
111
|
+
this.focused.emit(EditorType.Scss);
|
|
112
|
+
},
|
|
113
|
+
blur: () => {
|
|
114
|
+
this.blured.emit(EditorType.Scss);
|
|
115
|
+
},
|
|
84
116
|
};
|
|
85
117
|
this.jsConfig = {
|
|
86
118
|
tabSize: 2,
|
|
87
119
|
language: 'js',
|
|
88
120
|
height: '100%',
|
|
121
|
+
focus: () => {
|
|
122
|
+
this.focused.emit(EditorType.Js);
|
|
123
|
+
},
|
|
124
|
+
blur: () => {
|
|
125
|
+
this.blured.emit(EditorType.Js);
|
|
126
|
+
},
|
|
89
127
|
};
|
|
90
128
|
this.htmlConfig = {
|
|
91
129
|
tabSize: 2,
|
|
92
130
|
language: 'html',
|
|
93
131
|
height: '100%',
|
|
132
|
+
focus: () => {
|
|
133
|
+
this.focused.emit(EditorType.Html);
|
|
134
|
+
},
|
|
135
|
+
blur: () => {
|
|
136
|
+
this.blured.emit(EditorType.Html);
|
|
137
|
+
},
|
|
94
138
|
};
|
|
95
139
|
this.globalScssConfig = {
|
|
96
140
|
tabSize: 2,
|
|
97
141
|
language: 'scss',
|
|
98
142
|
height: '100%',
|
|
143
|
+
focus: () => {
|
|
144
|
+
this.focused.emit(EditorType.GlobalScss);
|
|
145
|
+
},
|
|
146
|
+
blur: () => {
|
|
147
|
+
this.blured.emit(EditorType.GlobalScss);
|
|
148
|
+
},
|
|
99
149
|
};
|
|
100
150
|
}
|
|
101
151
|
initGlobalContentStyle() {
|
|
@@ -105,9 +155,15 @@ class EditorComponent {
|
|
|
105
155
|
this._cdRef.markForCheck();
|
|
106
156
|
});
|
|
107
157
|
}
|
|
158
|
+
saveGlobalScss() {
|
|
159
|
+
return this.contentConfig.saveContentStyle(this.contentStyle)
|
|
160
|
+
.pipe(tap(() => {
|
|
161
|
+
this._message.success('Saved Changes');
|
|
162
|
+
}));
|
|
163
|
+
}
|
|
108
164
|
}
|
|
109
|
-
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token:
|
|
110
|
-
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "app-editor", inputs: { showHtml: "showHtml", showScss: "showScss", showJs: "showJs", showGlobalScss: "showGlobalScss", html: "html", scss: "scss", js: "js", contentConfig: "contentConfig" }, outputs: { changed: "changed" }, 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 <fs-label>HTML</fs-label>\n <fs-text-editor \n [(ngModel)]=\"html\" \n name=\"html\"\n [fsModelChangeOptions]=\"{ debounce:
|
|
165
|
+
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
|
|
166
|
+
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, 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 <fs-label>HTML {{changes.html ? '*' : ''}}</fs-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 <fs-label>SCSS {{changes.scss ? '*' : ''}}</fs-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 <fs-label>JS {{changes.js ? '*' : ''}}</fs-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 <fs-label>Global SCSS {{changes.globalScss ? '*' : ''}}</fs-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"], components: [{ type: i2$1.SplitComponent, selector: "as-split", inputs: ["direction", "unit", "gutterSize", "gutterStep", "restrictMove", "useTransition", "disabled", "dir", "gutterDblClickDuration", "gutterClickDeltaPx", "gutterAriaLabel"], outputs: ["transitionEnd", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"], exportAs: ["asSplit"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i2$1.SplitAreaDirective, selector: "as-split-area, [as-split-area]", inputs: ["order", "size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i7.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i8.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
111
167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, decorators: [{
|
|
112
168
|
type: Component,
|
|
113
169
|
args: [{
|
|
@@ -116,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
116
172
|
styleUrls: ['./editor.component.scss'],
|
|
117
173
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
118
174
|
}]
|
|
119
|
-
}], ctorParameters: function () { return [{ type:
|
|
175
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.FsMessage }]; }, propDecorators: { showHtml: [{
|
|
120
176
|
type: Input
|
|
121
177
|
}], showScss: [{
|
|
122
178
|
type: Input
|
|
@@ -134,6 +190,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
134
190
|
type: Input
|
|
135
191
|
}], changed: [{
|
|
136
192
|
type: Output
|
|
193
|
+
}], focused: [{
|
|
194
|
+
type: Output
|
|
195
|
+
}], blured: [{
|
|
196
|
+
type: Output
|
|
137
197
|
}] } });
|
|
138
198
|
|
|
139
199
|
class FsContentEditorModule {
|
|
@@ -242,7 +302,7 @@ class ContentLayoutComponent {
|
|
|
242
302
|
}
|
|
243
303
|
}
|
|
244
304
|
ContentLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
245
|
-
ContentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n <fs-dialog>\n <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n <div mat-dialog-content>\n <div class=\"fs-column\">\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentLayout.name\"\n name=\"name\"\n required\n placeholder=\"Name\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentLayout.tag\"\n name=\"tag\"\n placeholder=\"Tag\">\n </mat-form-field>\n </div>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions>\n </fs-form-dialog-actions>\n </div>\n </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type:
|
|
305
|
+
ContentLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentLayout\">\n <fs-dialog>\n <h1 mat-dialog-title>{{contentLayout.id ? 'Layout' : 'Layout Page'}}</h1>\n <div mat-dialog-content>\n <div class=\"fs-column\">\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentLayout.name\"\n name=\"name\"\n required\n placeholder=\"Name\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentLayout.tag\"\n name=\"tag\"\n placeholder=\"Tag\">\n </mat-form-field>\n </div>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions>\n </fs-form-dialog-actions>\n </div>\n </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i5.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
246
306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, decorators: [{
|
|
247
307
|
type: Component,
|
|
248
308
|
args: [{
|
|
@@ -262,22 +322,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
262
322
|
}] } });
|
|
263
323
|
|
|
264
324
|
class ContentLayoutEditorComponent {
|
|
265
|
-
constructor(_data, _dialogRef, _message, _dialog, _cdRef) {
|
|
325
|
+
constructor(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
|
|
266
326
|
this._data = _data;
|
|
267
327
|
this._dialogRef = _dialogRef;
|
|
268
328
|
this._message = _message;
|
|
269
329
|
this._dialog = _dialog;
|
|
270
330
|
this._cdRef = _cdRef;
|
|
271
|
-
this.
|
|
331
|
+
this._prompt = _prompt;
|
|
332
|
+
this.EditorType = EditorType;
|
|
333
|
+
this.focused = null;
|
|
272
334
|
this.editors = {
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
335
|
+
[EditorType.Html]: true,
|
|
336
|
+
[EditorType.Scss]: true,
|
|
337
|
+
[EditorType.GlobalScss]: false,
|
|
276
338
|
};
|
|
277
339
|
this._destroy$ = new Subject();
|
|
340
|
+
this.save = () => {
|
|
341
|
+
return of(null)
|
|
342
|
+
.pipe(filter(() => this.focused), switchMap(() => {
|
|
343
|
+
switch (this.focused) {
|
|
344
|
+
case EditorType.Html:
|
|
345
|
+
case EditorType.Scss:
|
|
346
|
+
return this.saveContentPage();
|
|
347
|
+
case EditorType.GlobalScss:
|
|
348
|
+
return this.editor.saveGlobalScss();
|
|
349
|
+
}
|
|
350
|
+
return throwError('Invalid focus');
|
|
351
|
+
}), tap(() => {
|
|
352
|
+
this.editor.clearChange(this.focused);
|
|
353
|
+
this._cdRef.markForCheck();
|
|
354
|
+
}));
|
|
355
|
+
};
|
|
278
356
|
}
|
|
279
357
|
ngOnInit() {
|
|
280
358
|
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
359
|
+
this._dialogRef.disableClose = true;
|
|
281
360
|
this.config = this._data.contentConfig;
|
|
282
361
|
this._initContentLayout(this._data.contentLayout);
|
|
283
362
|
}
|
|
@@ -295,24 +374,50 @@ class ContentLayoutEditorComponent {
|
|
|
295
374
|
this._cdRef.markForCheck();
|
|
296
375
|
});
|
|
297
376
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
if (event.type === 'html') {
|
|
301
|
-
data.content = event.value;
|
|
302
|
-
}
|
|
303
|
-
if (event.type === 'scss') {
|
|
304
|
-
data.styles = event.value;
|
|
305
|
-
}
|
|
306
|
-
this.saveContentLayout(data);
|
|
377
|
+
editorFocused(type) {
|
|
378
|
+
this.focused = type;
|
|
307
379
|
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
.
|
|
311
|
-
|
|
312
|
-
|
|
380
|
+
saveContentPage() {
|
|
381
|
+
const names = {
|
|
382
|
+
[EditorType.Scss]: 'styles',
|
|
383
|
+
[EditorType.Html]: 'content',
|
|
384
|
+
};
|
|
385
|
+
const data = {
|
|
386
|
+
id: this.contentLayout.id,
|
|
387
|
+
[names[this.focused]]: this.editor.changes[this.focused],
|
|
388
|
+
};
|
|
389
|
+
return this.config.saveContentLayout(Object.assign({ id: this.contentLayout.id }, data))
|
|
390
|
+
.pipe(tap(() => {
|
|
313
391
|
this._message.success('Saved Changes');
|
|
314
|
-
}))
|
|
315
|
-
|
|
392
|
+
}));
|
|
393
|
+
}
|
|
394
|
+
cancel() {
|
|
395
|
+
if (!this.editor.hasChanges) {
|
|
396
|
+
return this._dialogRef.close();
|
|
397
|
+
}
|
|
398
|
+
this._prompt.confirm({
|
|
399
|
+
dialogConfig: {
|
|
400
|
+
width: null,
|
|
401
|
+
},
|
|
402
|
+
title: 'You have unsaved changes',
|
|
403
|
+
template: 'What would you like to do with your changes?',
|
|
404
|
+
buttons: [
|
|
405
|
+
{
|
|
406
|
+
label: 'Review Changes',
|
|
407
|
+
value: 'review',
|
|
408
|
+
},
|
|
409
|
+
{
|
|
410
|
+
label: 'Discard Changes',
|
|
411
|
+
value: 'discard',
|
|
412
|
+
},
|
|
413
|
+
],
|
|
414
|
+
})
|
|
415
|
+
.pipe(takeUntil(this._destroy$))
|
|
416
|
+
.subscribe((value) => {
|
|
417
|
+
if (value === 'discard') {
|
|
418
|
+
this._dialogRef.close();
|
|
419
|
+
}
|
|
420
|
+
});
|
|
316
421
|
}
|
|
317
422
|
openSettings() {
|
|
318
423
|
this._dialog.open(ContentLayoutComponent, {
|
|
@@ -328,8 +433,8 @@ class ContentLayoutEditorComponent {
|
|
|
328
433
|
});
|
|
329
434
|
}
|
|
330
435
|
}
|
|
331
|
-
ContentLayoutEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
332
|
-
ContentLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutEditorComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeletonForm=\"contentLayout\">\n
|
|
436
|
+
ContentLayoutEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
+
ContentLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" [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 </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)=\"cancel()\"\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}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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"] }, { type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
333
438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
|
|
334
439
|
type: Component,
|
|
335
440
|
args: [{
|
|
@@ -340,7 +445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
340
445
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
341
446
|
type: Inject,
|
|
342
447
|
args: [MAT_DIALOG_DATA]
|
|
343
|
-
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; }
|
|
448
|
+
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }, { type: i3$2.FsPrompt }]; }, propDecorators: { editor: [{
|
|
449
|
+
type: ViewChild,
|
|
450
|
+
args: [EditorComponent]
|
|
451
|
+
}] } });
|
|
344
452
|
|
|
345
453
|
class FsContentLayoutsComponent {
|
|
346
454
|
constructor(_config, _dialog) {
|
|
@@ -433,7 +541,7 @@ class FsContentLayoutsComponent {
|
|
|
433
541
|
}
|
|
434
542
|
}
|
|
435
543
|
FsContentLayoutsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
-
FsContentLayoutsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a (click)=\"openEditor(row)\">{{row.name}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{row.modifyDate | fsDate: 'date-time-yearless'}}\n </ng-template>\n </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$
|
|
544
|
+
FsContentLayoutsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a (click)=\"openEditor(row)\">{{row.name}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{row.modifyDate | fsDate: 'date-time-yearless'}}\n </ng-template>\n </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$3.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
437
545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
|
|
438
546
|
type: Component,
|
|
439
547
|
args: [{
|
|
@@ -530,14 +638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
530
638
|
}]
|
|
531
639
|
}] });
|
|
532
640
|
|
|
533
|
-
var PageType;
|
|
534
|
-
(function (PageType) {
|
|
535
|
-
PageType["StandardPage"] = "standardPage";
|
|
536
|
-
PageType["BlogPost"] = "blogPost";
|
|
537
|
-
PageType["HomePage"] = "homePage";
|
|
538
|
-
PageType["NotFoundPage"] = "notFoundPage";
|
|
539
|
-
})(PageType || (PageType = {}));
|
|
540
|
-
|
|
541
641
|
const PageTypes = [
|
|
542
642
|
{ name: 'Standard Page', value: PageType.StandardPage },
|
|
543
643
|
{ name: 'Home Page', value: PageType.HomePage },
|
|
@@ -589,7 +689,7 @@ class ContentPageComponent {
|
|
|
589
689
|
}
|
|
590
690
|
}
|
|
591
691
|
ContentPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
-
ContentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n <fs-dialog>\n <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n <div mat-dialog-content>\n <div class=\"fs-column\">\n <mat-form-field>\n <mat-select\n [(ngModel)]=\"contentPage.type\"\n name=\"type\"\n required\n placeholder=\"Type\">\n <mat-option\n *ngFor=\"let item of PageTypes\"\n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field *ngIf=\"contentLayouts\">\n <mat-select\n [(ngModel)]=\"contentPage.contentLayoutId\"\n required\n name=\"contentLayoutId\"\n placeholder=\"Layout\">\n <mat-option\n *ngFor=\"let item of contentLayouts\"\n [value]=\"item.id\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.name\"\n name=\"name\"\n required\n placeholder=\"Name\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.path\"\n name=\"path\"\n required\n placeholder=\"Path\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.title\"\n name=\"title\"\n placeholder=\"Title\">\n </mat-form-field>\n </div>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions>\n </fs-form-dialog-actions>\n </div>\n </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5$
|
|
692
|
+
ContentPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" *fsSkeletonForm=\"contentPage\">\n <fs-dialog>\n <h1 mat-dialog-title>{{contentPage.id ? 'Page' : 'Create Page'}}</h1>\n <div mat-dialog-content>\n <div class=\"fs-column\">\n <mat-form-field>\n <mat-select\n [(ngModel)]=\"contentPage.type\"\n name=\"type\"\n required\n placeholder=\"Type\">\n <mat-option\n *ngFor=\"let item of PageTypes\"\n [value]=\"item.value\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field *ngIf=\"contentLayouts\">\n <mat-select\n [(ngModel)]=\"contentPage.contentLayoutId\"\n required\n name=\"contentLayoutId\"\n placeholder=\"Layout\">\n <mat-option\n *ngFor=\"let item of contentLayouts\"\n [value]=\"item.id\">\n {{ item.name }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.name\"\n name=\"name\"\n required\n placeholder=\"Name\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.path\"\n name=\"path\"\n required\n placeholder=\"Path\">\n </mat-form-field>\n <mat-form-field>\n <input\n matInput\n [(ngModel)]=\"contentPage.title\"\n name=\"title\"\n placeholder=\"Title\">\n </mat-form-field>\n </div>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions>\n </fs-form-dialog-actions>\n </div>\n </fs-dialog>\n</form>\n", styles: [""], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
593
693
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, decorators: [{
|
|
594
694
|
type: Component,
|
|
595
695
|
args: [{
|
|
@@ -609,23 +709,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
609
709
|
}] } });
|
|
610
710
|
|
|
611
711
|
class ContentPageEditorComponent {
|
|
612
|
-
constructor(_data, _dialogRef, _message, _dialog, _cdRef) {
|
|
712
|
+
constructor(_data, _dialogRef, _message, _dialog, _cdRef, _prompt) {
|
|
613
713
|
this._data = _data;
|
|
614
714
|
this._dialogRef = _dialogRef;
|
|
615
715
|
this._message = _message;
|
|
616
716
|
this._dialog = _dialog;
|
|
617
717
|
this._cdRef = _cdRef;
|
|
718
|
+
this._prompt = _prompt;
|
|
719
|
+
this.focused = null;
|
|
618
720
|
this.resizing = false;
|
|
619
721
|
this.editors = {
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
722
|
+
[EditorType.Html]: true,
|
|
723
|
+
[EditorType.Scss]: true,
|
|
724
|
+
[EditorType.Js]: false,
|
|
725
|
+
[EditorType.GlobalScss]: false,
|
|
624
726
|
};
|
|
625
727
|
this._destroy$ = new Subject();
|
|
728
|
+
this.save = () => {
|
|
729
|
+
return of(null)
|
|
730
|
+
.pipe(filter(() => this.focused), switchMap(() => {
|
|
731
|
+
switch (this.focused) {
|
|
732
|
+
case EditorType.Js:
|
|
733
|
+
case EditorType.Html:
|
|
734
|
+
case EditorType.Scss:
|
|
735
|
+
return this.saveContentPage();
|
|
736
|
+
case EditorType.GlobalScss:
|
|
737
|
+
return this.editor.saveGlobalScss();
|
|
738
|
+
}
|
|
739
|
+
return throwError('Invalid focus');
|
|
740
|
+
}), tap(() => {
|
|
741
|
+
this.editor.clearChange(this.focused);
|
|
742
|
+
this._cdRef.markForCheck();
|
|
743
|
+
}));
|
|
744
|
+
};
|
|
626
745
|
}
|
|
627
746
|
ngOnInit() {
|
|
628
747
|
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
748
|
+
this._dialogRef.disableClose = true;
|
|
629
749
|
this.config = this._data.contentConfig;
|
|
630
750
|
this._initContentPage(this._data.contentPage);
|
|
631
751
|
}
|
|
@@ -643,27 +763,51 @@ class ContentPageEditorComponent {
|
|
|
643
763
|
this._cdRef.markForCheck();
|
|
644
764
|
});
|
|
645
765
|
}
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
if (event.type === 'js') {
|
|
649
|
-
data.js = event.value;
|
|
650
|
-
}
|
|
651
|
-
if (event.type === 'html') {
|
|
652
|
-
data.content = event.value;
|
|
653
|
-
}
|
|
654
|
-
if (event.type === 'scss') {
|
|
655
|
-
data.styles = event.value;
|
|
656
|
-
}
|
|
657
|
-
this.saveContentPage(data);
|
|
766
|
+
editorFocused(type) {
|
|
767
|
+
this.focused = type;
|
|
658
768
|
}
|
|
659
|
-
saveContentPage(
|
|
660
|
-
|
|
661
|
-
.
|
|
662
|
-
|
|
663
|
-
|
|
769
|
+
saveContentPage() {
|
|
770
|
+
const names = {
|
|
771
|
+
[EditorType.Js]: 'js',
|
|
772
|
+
[EditorType.Scss]: 'styles',
|
|
773
|
+
[EditorType.Html]: 'content',
|
|
774
|
+
};
|
|
775
|
+
const data = {
|
|
776
|
+
id: this.contentPage.id,
|
|
777
|
+
[names[this.focused]]: this.editor.changes[this.focused],
|
|
778
|
+
};
|
|
779
|
+
return this.config.saveContentPage(Object.assign({ id: this.contentPage.id }, data))
|
|
780
|
+
.pipe(tap(() => {
|
|
664
781
|
this._message.success('Saved Changes');
|
|
665
|
-
}))
|
|
666
|
-
|
|
782
|
+
}));
|
|
783
|
+
}
|
|
784
|
+
cancel() {
|
|
785
|
+
if (!this.editor.hasChanges) {
|
|
786
|
+
return this._dialogRef.close();
|
|
787
|
+
}
|
|
788
|
+
this._prompt.confirm({
|
|
789
|
+
dialogConfig: {
|
|
790
|
+
width: null,
|
|
791
|
+
},
|
|
792
|
+
title: 'You have unsaved changes',
|
|
793
|
+
template: 'What would you like to do with your changes?',
|
|
794
|
+
buttons: [
|
|
795
|
+
{
|
|
796
|
+
label: 'Review Changes',
|
|
797
|
+
value: 'review',
|
|
798
|
+
},
|
|
799
|
+
{
|
|
800
|
+
label: 'Discard Changes',
|
|
801
|
+
value: 'discard',
|
|
802
|
+
},
|
|
803
|
+
],
|
|
804
|
+
})
|
|
805
|
+
.pipe(takeUntil(this._destroy$))
|
|
806
|
+
.subscribe((value) => {
|
|
807
|
+
if (value === 'discard') {
|
|
808
|
+
this._dialogRef.close();
|
|
809
|
+
}
|
|
810
|
+
});
|
|
667
811
|
}
|
|
668
812
|
openSettings() {
|
|
669
813
|
this._dialog.open(ContentPageComponent, {
|
|
@@ -679,8 +823,8 @@ class ContentPageEditorComponent {
|
|
|
679
823
|
});
|
|
680
824
|
}
|
|
681
825
|
}
|
|
682
|
-
ContentPageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
683
|
-
ContentPageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageEditorComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeletonForm=\"contentPage\">\n
|
|
826
|
+
ContentPageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
|
|
827
|
+
ContentPageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\" [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 </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\n <div mat-dialog-actions>\n <button \n mat-button\n color=\"primary\"\n (click)=\"cancel()\"\n type=\"button\"> \n Done \n </button>\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 </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}.mat-dialog-actions fs-form-dialog-actions{width:auto}.mat-dialog-actions .toggles{display:flex;justify-content:flex-end;justify-self:baseline;flex:1}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileActionPlacement", "mobileWidth", "mode"] }, { type: i5$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }, { type: i5$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }], directives: [{ type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.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"] }, { type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i5.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i8$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
684
828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
|
|
685
829
|
type: Component,
|
|
686
830
|
args: [{
|
|
@@ -691,7 +835,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
691
835
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
692
836
|
type: Inject,
|
|
693
837
|
args: [MAT_DIALOG_DATA]
|
|
694
|
-
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; }
|
|
838
|
+
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }, { type: i3$2.FsPrompt }]; }, propDecorators: { editor: [{
|
|
839
|
+
type: ViewChild,
|
|
840
|
+
args: [EditorComponent]
|
|
841
|
+
}] } });
|
|
695
842
|
|
|
696
843
|
class FsContentPagesComponent {
|
|
697
844
|
constructor(_config, _dialog) {
|
|
@@ -716,7 +863,7 @@ class FsContentPagesComponent {
|
|
|
716
863
|
autoFocus: false,
|
|
717
864
|
})
|
|
718
865
|
.afterClosed()
|
|
719
|
-
.pipe(
|
|
866
|
+
.pipe(takeUntil(this._destroy$))
|
|
720
867
|
.subscribe(() => {
|
|
721
868
|
this.listComponent.reload();
|
|
722
869
|
});
|
|
@@ -788,7 +935,7 @@ class FsContentPagesComponent {
|
|
|
788
935
|
}
|
|
789
936
|
}
|
|
790
937
|
FsContentPagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
|
|
791
|
-
FsContentPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a (click)=\"openEditor(row)\">{{row.name}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{pageTypes[row.type]}}\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{row.modifyDate | fsDate: 'date-time-yearless'}}\n </ng-template>\n </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$
|
|
938
|
+
FsContentPagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a (click)=\"openEditor(row)\">{{row.name}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"path\" title=\"Path\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n <a [href]=\"'/' + row.path\" target=\"_black\">/{{row.path}}</a>\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"type\" title=\"Type\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{pageTypes[row.type]}}\n </ng-template>\n </fs-list-column>\n <fs-list-column name=\"modify_date\" title=\"Modified\" [sortable]=\"true\">\n <ng-template fs-list-cell let-row=\"row\">\n {{row.modifyDate | fsDate: 'date-time-yearless'}}\n </ng-template>\n </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .modified,:host ::ng-deep .name{width:1%;white-space:nowrap}:host ::ng-deep .preview-content img{display:none}.preview-content{position:relative;max-height:100px;max-width:100%;overflow:hidden;-webkit-mask-image:-webkit-gradient(linear,left 60%,left bottom,from(black),to(rgba(0,0,0,0)))}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i3$3.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
792
939
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, decorators: [{
|
|
793
940
|
type: Component,
|
|
794
941
|
args: [{
|
|
@@ -931,7 +1078,7 @@ class ContentStyleComponent {
|
|
|
931
1078
|
}
|
|
932
1079
|
}
|
|
933
1080
|
ContentStyleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentStyleComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
-
ContentStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n <fs-text-editor \n [(ngModel)]=\"contentStyle.scss\" \n name=\"contentStyle\"\n [fsModelChangeOptions]=\"{ debounce: 300 }\"\n (fsModelChange)=\"save()\"\n [config]=\"styleConfig\">\n </fs-text-editor> \n</ng-container>\n", styles: [""], components: [{ type: i4.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type:
|
|
1081
|
+
ContentStyleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentStyleComponent, selector: "fs-content-style", inputs: { height: "height" }, viewQueries: [{ propertyName: "textEditors", first: true, predicate: FsTextEditorComponent, descendants: true }, { propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<ng-container *fsSkeletonForm=\"contentStyle\">\n <fs-text-editor \n [(ngModel)]=\"contentStyle.scss\" \n name=\"contentStyle\"\n [fsModelChangeOptions]=\"{ debounce: 300 }\"\n (fsModelChange)=\"save()\"\n [config]=\"styleConfig\">\n </fs-text-editor> \n</ng-container>\n", styles: [""], components: [{ type: i4.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["ready", "blur"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
935
1082
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentStyleComponent, decorators: [{
|
|
936
1083
|
type: Component,
|
|
937
1084
|
args: [{
|
|
@@ -1043,7 +1190,7 @@ class ContentRendererComponent {
|
|
|
1043
1190
|
}
|
|
1044
1191
|
}
|
|
1045
1192
|
}
|
|
1046
|
-
ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$3.Router }, { token: i0.ElementRef }, { token: i3$
|
|
1193
|
+
ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$3.Router }, { token: i0.ElementRef }, { token: i3$4.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1047
1194
|
ContentRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, viewQueries: [{ propertyName: "script", first: true, predicate: ["script"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n<span #script></span>", styles: [""], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1048
1195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, decorators: [{
|
|
1049
1196
|
type: Component,
|
|
@@ -1053,7 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1053
1200
|
styleUrls: ['./content-renderer.component.scss'],
|
|
1054
1201
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1055
1202
|
}]
|
|
1056
|
-
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$
|
|
1203
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$4.HtmlRenderer }]; }, propDecorators: { script: [{
|
|
1057
1204
|
type: ViewChild,
|
|
1058
1205
|
args: ['script', { read: ElementRef }]
|
|
1059
1206
|
}], contentPage: [{
|
|
@@ -1117,7 +1264,7 @@ class FsContentComponent {
|
|
|
1117
1264
|
});
|
|
1118
1265
|
}
|
|
1119
1266
|
}
|
|
1120
|
-
FsContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1$1.Title }, { token: i0.ChangeDetectorRef }, { token: i2$3.Router }, { token: i0.ElementRef }, { token: i3$
|
|
1267
|
+
FsContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1$1.Title }, { token: i0.ChangeDetectorRef }, { token: i2$3.Router }, { token: i0.ElementRef }, { token: i3$4.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1121
1268
|
FsContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0, template: "<ng-container *ngIf=\"contentPage\">\n <fs-content-renderer [contentPage]=\"contentPage\"></fs-content-renderer>\n</ng-container>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1122
1269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, decorators: [{
|
|
1123
1270
|
type: Component,
|
|
@@ -1130,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
1130
1277
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1131
1278
|
type: Inject,
|
|
1132
1279
|
args: [FS_CONTENT_CONFIG]
|
|
1133
|
-
}] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$
|
|
1280
|
+
}] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$4.HtmlRenderer }]; } });
|
|
1134
1281
|
|
|
1135
1282
|
class FsContentModule {
|
|
1136
1283
|
}
|