@firestitch/content 12.2.4 → 12.2.6
Sign up to get free protection for your applications and to get access to all the features.
- package/app/interfaces/content-config.d.ts +2 -0
- package/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.d.ts +41 -0
- package/app/modules/content-layouts/components/content-layout-editor/index.d.ts +1 -0
- package/app/modules/content-layouts/components/index.d.ts +3 -0
- package/app/modules/content-layouts/fs-content-layouts.module.d.ts +21 -20
- package/app/modules/content-pages/components/content-page-editor/content-page-editor.component.d.ts +43 -0
- package/app/modules/content-pages/components/content-page-editor/index.d.ts +1 -0
- package/app/modules/content-pages/components/index.d.ts +3 -0
- package/app/modules/content-pages/fs-content-pages.module.d.ts +22 -20
- package/app/modules/editor/components/editor/editor.component.d.ts +15 -32
- package/bundles/firestitch-content.umd.js +397 -251
- package/bundles/firestitch-content.umd.js.map +1 -1
- package/esm2015/app/interfaces/content-config.js +1 -1
- package/esm2015/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.js +95 -0
- package/esm2015/app/modules/content-layouts/components/content-layout-editor/index.js +2 -0
- package/esm2015/app/modules/content-layouts/components/content-layouts/content-layouts.component.js +4 -11
- package/esm2015/app/modules/content-layouts/components/index.js +4 -0
- package/esm2015/app/modules/content-layouts/fs-content-layouts.module.js +10 -7
- package/esm2015/app/modules/content-pages/components/content-page-editor/content-page-editor.component.js +99 -0
- package/esm2015/app/modules/content-pages/components/content-page-editor/index.js +2 -0
- package/esm2015/app/modules/content-pages/components/content-pages/content-pages.component.js +4 -11
- package/esm2015/app/modules/content-pages/components/index.js +4 -0
- package/esm2015/app/modules/content-pages/fs-content-pages.module.js +9 -2
- package/esm2015/app/modules/editor/components/editor/editor.component.js +41 -65
- package/fesm2015/firestitch-content.js +243 -105
- package/fesm2015/firestitch-content.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,86 +1,75 @@
|
|
|
1
|
-
import * as i10
|
|
1
|
+
import * as i10 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, ChangeDetectionStrategy,
|
|
5
|
-
import * as i7
|
|
4
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, InjectionToken, Inject, ViewChildren, ViewChild, ElementRef } from '@angular/core';
|
|
5
|
+
import * as i7 from '@angular/forms';
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
|
-
import * as i4 from '@angular/material/button';
|
|
7
|
+
import * as i4$2 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
+
import * as i8$2 from '@angular/material/button-toggle';
|
|
10
|
+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
9
11
|
import * as i1 from '@angular/material/dialog';
|
|
10
|
-
import {
|
|
12
|
+
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
11
13
|
import * as i4$1 from '@angular/material/form-field';
|
|
12
14
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
15
|
+
import * as i5 from '@angular/material/icon';
|
|
16
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
13
17
|
import * as i8$1 from '@angular/material/input';
|
|
14
18
|
import { MatInputModule } from '@angular/material/input';
|
|
19
|
+
import * as i5$1 from '@angular/material/select';
|
|
20
|
+
import { MatSelectModule } from '@angular/material/select';
|
|
15
21
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
16
|
-
import * as i3$
|
|
22
|
+
import * as i3$2 from '@firestitch/date';
|
|
17
23
|
import { FsDateModule } from '@firestitch/date';
|
|
18
|
-
import * as i3 from '@firestitch/dialog';
|
|
24
|
+
import * as i3$1 from '@firestitch/dialog';
|
|
19
25
|
import { FsDialogModule } from '@firestitch/dialog';
|
|
20
|
-
import * as
|
|
26
|
+
import * as i7$1 from '@firestitch/form';
|
|
21
27
|
import { FsFormModule, FsFormDirective } from '@firestitch/form';
|
|
22
28
|
import { FsHtmlEditorModule } from '@firestitch/html-editor';
|
|
23
|
-
import * as
|
|
24
|
-
import { FsListModule, FsListComponent } from '@firestitch/list';
|
|
25
|
-
import * as i8 from '@firestitch/text-editor';
|
|
26
|
-
import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
|
|
27
|
-
import * as i10 from '@angular/material/button-toggle';
|
|
28
|
-
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
29
|
-
import * as i5 from '@angular/material/icon';
|
|
30
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
31
|
-
import * as i5$2 from '@angular/material/select';
|
|
32
|
-
import { MatSelectModule } from '@angular/material/select';
|
|
33
|
-
import * as i7 from '@firestitch/label';
|
|
29
|
+
import * as i3 from '@firestitch/label';
|
|
34
30
|
import { FsLabelModule } from '@firestitch/label';
|
|
35
|
-
import * as
|
|
31
|
+
import * as i2$2 from '@firestitch/list';
|
|
32
|
+
import { FsListModule, FsListComponent } from '@firestitch/list';
|
|
33
|
+
import * as i8 from '@firestitch/skeleton';
|
|
36
34
|
import { FsSkeletonModule } from '@firestitch/skeleton';
|
|
37
|
-
import * as
|
|
35
|
+
import * as i4 from '@firestitch/text-editor';
|
|
36
|
+
import { FsTextEditorModule, FsTextEditorComponent } from '@firestitch/text-editor';
|
|
37
|
+
import * as i7$2 from '@firestitch/common';
|
|
38
38
|
import { FsCommonModule, index } from '@firestitch/common';
|
|
39
|
-
import * as
|
|
39
|
+
import * as i2$1 from 'angular-split';
|
|
40
40
|
import { AngularSplitModule } from 'angular-split';
|
|
41
41
|
import * as i2 from '@firestitch/message';
|
|
42
42
|
import { Subject, of } from 'rxjs';
|
|
43
|
-
import { tap,
|
|
43
|
+
import { tap, switchMap, takeUntil, filter, map } from 'rxjs/operators';
|
|
44
44
|
import { ItemType } from '@firestitch/filter';
|
|
45
|
-
import * as i6
|
|
45
|
+
import * as i6 from '@angular/material/core';
|
|
46
46
|
import * as i1$1 from '@angular/platform-browser';
|
|
47
|
-
import * as i2$
|
|
47
|
+
import * as i2$3 from '@angular/router';
|
|
48
48
|
import { NavigationEnd } from '@angular/router';
|
|
49
|
-
import * as i3$
|
|
49
|
+
import * as i3$3 from '@firestitch/body';
|
|
50
50
|
|
|
51
51
|
class EditorComponent {
|
|
52
|
-
constructor(
|
|
53
|
-
this._data = _data;
|
|
54
|
-
this._dialogRef = _dialogRef;
|
|
52
|
+
constructor(_message, _cdRef) {
|
|
55
53
|
this._message = _message;
|
|
56
54
|
this._cdRef = _cdRef;
|
|
55
|
+
this.showHtml = false;
|
|
56
|
+
this.showScss = false;
|
|
57
|
+
this.showJs = false;
|
|
58
|
+
this.showGlobalScss = false;
|
|
59
|
+
this.changed = new EventEmitter();
|
|
57
60
|
this.resizing = false;
|
|
58
|
-
this.editors = {
|
|
59
|
-
html: true,
|
|
60
|
-
scss: true,
|
|
61
|
-
js: false,
|
|
62
|
-
globalScss: false,
|
|
63
|
-
};
|
|
64
61
|
this._destroy$ = new Subject();
|
|
65
62
|
}
|
|
66
63
|
ngOnInit() {
|
|
67
|
-
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
68
|
-
this.title = this._data.title;
|
|
69
|
-
this.contentPage = this._data.contentPage;
|
|
70
|
-
this._config = this._data.contentConfig;
|
|
71
|
-
this._save = this._data.save;
|
|
72
64
|
this.initTextEditors();
|
|
73
65
|
this.initGlobalContentStyle();
|
|
74
66
|
}
|
|
75
|
-
editorToggleChange(event) {
|
|
76
|
-
this.editors[event.value] = !this.editors[event.value];
|
|
77
|
-
}
|
|
78
67
|
ngOnDestroy() {
|
|
79
68
|
this._destroy$.next();
|
|
80
69
|
this._destroy$.complete();
|
|
81
70
|
}
|
|
82
71
|
globalScssChange() {
|
|
83
|
-
this.
|
|
72
|
+
this.contentConfig.saveContentStyle(this.contentStyle)
|
|
84
73
|
.subscribe((contentStyle) => {
|
|
85
74
|
this.contentStyle = contentStyle;
|
|
86
75
|
this._message.success('Saved Changes');
|
|
@@ -110,48 +99,42 @@ class EditorComponent {
|
|
|
110
99
|
};
|
|
111
100
|
}
|
|
112
101
|
initGlobalContentStyle() {
|
|
113
|
-
this.
|
|
102
|
+
this.contentConfig.loadContentStyle()
|
|
114
103
|
.subscribe((contentStyle) => {
|
|
115
|
-
this.contentStyle = contentStyle;
|
|
116
|
-
this._cdRef.markForCheck();
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
saveContentPage() {
|
|
120
|
-
this._save({
|
|
121
|
-
id: this.contentPage.id,
|
|
122
|
-
styles: this.contentPage.styles,
|
|
123
|
-
content: this.contentPage.content,
|
|
124
|
-
js: this.contentPage.js,
|
|
125
|
-
})
|
|
126
|
-
.pipe(tap((contentPage) => {
|
|
127
|
-
this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
|
|
128
|
-
this._cdRef.markForCheck();
|
|
129
|
-
this._message.success('Saved Changes');
|
|
130
|
-
}))
|
|
131
|
-
.subscribe();
|
|
132
|
-
}
|
|
133
|
-
openSettings() {
|
|
134
|
-
this._data.openSettings(this.contentPage)
|
|
135
|
-
.pipe(takeUntil(this._destroy$))
|
|
136
|
-
.subscribe((contentPage) => {
|
|
137
|
-
this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
|
|
104
|
+
this.contentStyle = contentStyle || {};
|
|
138
105
|
this._cdRef.markForCheck();
|
|
139
106
|
});
|
|
140
107
|
}
|
|
141
108
|
}
|
|
142
|
-
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token:
|
|
143
|
-
EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "
|
|
109
|
+
EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token: i2.FsMessage }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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: 300 }\"\n (fsModelChange)=\"changed.emit({ type: 'html', value: $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</fs-label>\n <fs-text-editor \n [(ngModel)]=\"scss\" \n name=\"scss\"\n [fsModelChangeOptions]=\"{ debounce: 300 }\"\n (fsModelChange)=\"changed.emit({ type: 'scss', value: $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</fs-label>\n <fs-text-editor \n [(ngModel)]=\"js\" \n name=\"js\"\n [fsModelChangeOptions]=\"{ debounce: 300 }\"\n (fsModelChange)=\"changed.emit({ type: 'js', value: $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</fs-label>\n <ng-container *fsSkeleton=\"contentStyle\">\n <fs-text-editor \n [(ngModel)]=\"contentStyle.scss\" \n name=\"globalScss\"\n [fsModelChangeOptions]=\"{ debounce: 300 }\"\n (fsModelChange)=\"globalScssChange()\"\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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.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$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }, { type: i8.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
144
111
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, decorators: [{
|
|
145
112
|
type: Component,
|
|
146
113
|
args: [{
|
|
114
|
+
selector: 'app-editor',
|
|
147
115
|
templateUrl: './editor.component.html',
|
|
148
116
|
styleUrls: ['./editor.component.scss'],
|
|
149
117
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
150
118
|
}]
|
|
151
|
-
}], ctorParameters: function () { return [{ type:
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
119
|
+
}], ctorParameters: function () { return [{ type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showHtml: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], showScss: [{
|
|
122
|
+
type: Input
|
|
123
|
+
}], showJs: [{
|
|
124
|
+
type: Input
|
|
125
|
+
}], showGlobalScss: [{
|
|
126
|
+
type: Input
|
|
127
|
+
}], html: [{
|
|
128
|
+
type: Input
|
|
129
|
+
}], scss: [{
|
|
130
|
+
type: Input
|
|
131
|
+
}], js: [{
|
|
132
|
+
type: Input
|
|
133
|
+
}], contentConfig: [{
|
|
134
|
+
type: Input
|
|
135
|
+
}], changed: [{
|
|
136
|
+
type: Output
|
|
137
|
+
}] } });
|
|
155
138
|
|
|
156
139
|
class FsContentEditorModule {
|
|
157
140
|
}
|
|
@@ -259,7 +242,7 @@ class ContentLayoutComponent {
|
|
|
259
242
|
}
|
|
260
243
|
}
|
|
261
244
|
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 });
|
|
262
|
-
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.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:
|
|
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: i7$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7$1.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: i7.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: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i7$1.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 });
|
|
263
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, decorators: [{
|
|
264
247
|
type: Component,
|
|
265
248
|
args: [{
|
|
@@ -278,6 +261,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
278
261
|
args: [FsTextEditorComponent]
|
|
279
262
|
}] } });
|
|
280
263
|
|
|
264
|
+
class ContentLayoutEditorComponent {
|
|
265
|
+
constructor(_data, _dialogRef, _message, _dialog, _cdRef) {
|
|
266
|
+
this._data = _data;
|
|
267
|
+
this._dialogRef = _dialogRef;
|
|
268
|
+
this._message = _message;
|
|
269
|
+
this._dialog = _dialog;
|
|
270
|
+
this._cdRef = _cdRef;
|
|
271
|
+
this.resizing = false;
|
|
272
|
+
this.editors = {
|
|
273
|
+
html: true,
|
|
274
|
+
scss: true,
|
|
275
|
+
globalScss: false,
|
|
276
|
+
};
|
|
277
|
+
this._destroy$ = new Subject();
|
|
278
|
+
}
|
|
279
|
+
ngOnInit() {
|
|
280
|
+
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
281
|
+
this.config = this._data.contentConfig;
|
|
282
|
+
this._initContentLayout(this._data.contentLayout);
|
|
283
|
+
}
|
|
284
|
+
editorToggleChange(event) {
|
|
285
|
+
this.editors[event.value] = !this.editors[event.value];
|
|
286
|
+
}
|
|
287
|
+
ngOnDestroy() {
|
|
288
|
+
this._destroy$.next();
|
|
289
|
+
this._destroy$.complete();
|
|
290
|
+
}
|
|
291
|
+
_initContentLayout(contentLayout) {
|
|
292
|
+
this.config.loadContentLayout(contentLayout.id)
|
|
293
|
+
.subscribe((data) => {
|
|
294
|
+
this.contentLayout = data;
|
|
295
|
+
this._cdRef.markForCheck();
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
editorChanged(event) {
|
|
299
|
+
const data = {};
|
|
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);
|
|
307
|
+
}
|
|
308
|
+
saveContentLayout(data) {
|
|
309
|
+
this.config.saveContentLayout(Object.assign({ id: this.contentLayout.id }, data))
|
|
310
|
+
.pipe(tap(() => {
|
|
311
|
+
this._message.success('Saved Changes');
|
|
312
|
+
}))
|
|
313
|
+
.subscribe();
|
|
314
|
+
}
|
|
315
|
+
openSettings() {
|
|
316
|
+
this._dialog.open(ContentLayoutComponent, {
|
|
317
|
+
data: {
|
|
318
|
+
contentLayout: this.contentLayout,
|
|
319
|
+
},
|
|
320
|
+
})
|
|
321
|
+
.afterClosed()
|
|
322
|
+
.pipe(takeUntil(this._destroy$))
|
|
323
|
+
.subscribe((contentLayout) => {
|
|
324
|
+
this.contentLayout = Object.assign(Object.assign({}, this.contentLayout), contentLayout);
|
|
325
|
+
this._cdRef.markForCheck();
|
|
326
|
+
});
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
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 });
|
|
330
|
+
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 <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 (changed)=\"editorChanged($event)\">\n </app-editor>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions\n [save]=\"false\"\n [done]=\"true\">\n </fs-form-dialog-actions>\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\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}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: i4$2.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: i5.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"] }, { type: i7$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { 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: 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: i8$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
|
|
332
|
+
type: Component,
|
|
333
|
+
args: [{
|
|
334
|
+
templateUrl: './content-layout-editor.component.html',
|
|
335
|
+
styleUrls: ['./content-layout-editor.component.scss'],
|
|
336
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
337
|
+
}]
|
|
338
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
339
|
+
type: Inject,
|
|
340
|
+
args: [MAT_DIALOG_DATA]
|
|
341
|
+
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
|
|
342
|
+
|
|
281
343
|
class FsContentLayoutsComponent {
|
|
282
344
|
constructor(_config, _dialog) {
|
|
283
345
|
this._config = _config;
|
|
@@ -288,20 +350,13 @@ class FsContentLayoutsComponent {
|
|
|
288
350
|
this._initListConfig();
|
|
289
351
|
}
|
|
290
352
|
openEditor(contentLayout) {
|
|
291
|
-
this._dialog.open(
|
|
353
|
+
this._dialog.open(ContentLayoutEditorComponent, {
|
|
292
354
|
maxWidth: '100vw',
|
|
293
355
|
width: '100%',
|
|
294
356
|
height: '100%',
|
|
295
357
|
data: {
|
|
296
|
-
|
|
297
|
-
title: 'Layout',
|
|
358
|
+
contentLayout,
|
|
298
359
|
contentConfig: this._config,
|
|
299
|
-
save: (data) => {
|
|
300
|
-
return this._config.saveContentLayout(Object.assign({ id: contentLayout.id }, data));
|
|
301
|
-
},
|
|
302
|
-
openSettings: (data) => {
|
|
303
|
-
return this.openLayout(data);
|
|
304
|
-
},
|
|
305
360
|
},
|
|
306
361
|
})
|
|
307
362
|
.afterClosed()
|
|
@@ -376,7 +431,7 @@ class FsContentLayoutsComponent {
|
|
|
376
431
|
}
|
|
377
432
|
}
|
|
378
433
|
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 });
|
|
379
|
-
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$
|
|
434
|
+
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$2.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
380
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
|
|
381
436
|
type: Component,
|
|
382
437
|
args: [{
|
|
@@ -397,7 +452,8 @@ class FsContentLayoutsModule {
|
|
|
397
452
|
}
|
|
398
453
|
FsContentLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
399
454
|
FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
|
|
400
|
-
FsContentLayoutsComponent
|
|
455
|
+
FsContentLayoutsComponent,
|
|
456
|
+
ContentLayoutEditorComponent], imports: [CommonModule,
|
|
401
457
|
FormsModule,
|
|
402
458
|
MatDialogModule,
|
|
403
459
|
MatInputModule,
|
|
@@ -467,6 +523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
467
523
|
declarations: [
|
|
468
524
|
ContentLayoutComponent,
|
|
469
525
|
FsContentLayoutsComponent,
|
|
526
|
+
ContentLayoutEditorComponent,
|
|
470
527
|
],
|
|
471
528
|
}]
|
|
472
529
|
}] });
|
|
@@ -530,7 +587,7 @@ class ContentPageComponent {
|
|
|
530
587
|
}
|
|
531
588
|
}
|
|
532
589
|
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 });
|
|
533
|
-
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.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$
|
|
590
|
+
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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }], directives: [{ type: i8.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7$1.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: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.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: i7.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: i7$1.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 });
|
|
534
591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, decorators: [{
|
|
535
592
|
type: Component,
|
|
536
593
|
args: [{
|
|
@@ -549,6 +606,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
549
606
|
args: [FsTextEditorComponent]
|
|
550
607
|
}] } });
|
|
551
608
|
|
|
609
|
+
class ContentPageEditorComponent {
|
|
610
|
+
constructor(_data, _dialogRef, _message, _dialog, _cdRef) {
|
|
611
|
+
this._data = _data;
|
|
612
|
+
this._dialogRef = _dialogRef;
|
|
613
|
+
this._message = _message;
|
|
614
|
+
this._dialog = _dialog;
|
|
615
|
+
this._cdRef = _cdRef;
|
|
616
|
+
this.resizing = false;
|
|
617
|
+
this.editors = {
|
|
618
|
+
html: true,
|
|
619
|
+
scss: true,
|
|
620
|
+
js: false,
|
|
621
|
+
globalScss: false,
|
|
622
|
+
};
|
|
623
|
+
this._destroy$ = new Subject();
|
|
624
|
+
}
|
|
625
|
+
ngOnInit() {
|
|
626
|
+
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
627
|
+
this.config = this._data.contentConfig;
|
|
628
|
+
this._initContentPage(this._data.contentPage);
|
|
629
|
+
}
|
|
630
|
+
editorToggleChange(event) {
|
|
631
|
+
this.editors[event.value] = !this.editors[event.value];
|
|
632
|
+
}
|
|
633
|
+
ngOnDestroy() {
|
|
634
|
+
this._destroy$.next();
|
|
635
|
+
this._destroy$.complete();
|
|
636
|
+
}
|
|
637
|
+
_initContentPage(contentPage) {
|
|
638
|
+
this.config.loadContentPage(contentPage.id)
|
|
639
|
+
.subscribe((data) => {
|
|
640
|
+
this.contentPage = data;
|
|
641
|
+
this._cdRef.markForCheck();
|
|
642
|
+
});
|
|
643
|
+
}
|
|
644
|
+
editorChanged(event) {
|
|
645
|
+
const data = {};
|
|
646
|
+
if (event.type === 'js') {
|
|
647
|
+
data.js = event.value;
|
|
648
|
+
}
|
|
649
|
+
if (event.type === 'html') {
|
|
650
|
+
data.content = event.value;
|
|
651
|
+
}
|
|
652
|
+
if (event.type === 'scss') {
|
|
653
|
+
data.styles = event.value;
|
|
654
|
+
}
|
|
655
|
+
this.saveContentPage(data);
|
|
656
|
+
}
|
|
657
|
+
saveContentPage(data) {
|
|
658
|
+
this.config.saveContentPage(Object.assign({ id: this.contentPage.id }, data))
|
|
659
|
+
.pipe(tap(() => {
|
|
660
|
+
this._message.success('Saved Changes');
|
|
661
|
+
}))
|
|
662
|
+
.subscribe();
|
|
663
|
+
}
|
|
664
|
+
openSettings() {
|
|
665
|
+
this._dialog.open(ContentPageComponent, {
|
|
666
|
+
data: {
|
|
667
|
+
contentPage: this.contentPage,
|
|
668
|
+
},
|
|
669
|
+
})
|
|
670
|
+
.afterClosed()
|
|
671
|
+
.pipe(takeUntil(this._destroy$))
|
|
672
|
+
.subscribe((contentPage) => {
|
|
673
|
+
this.contentPage = Object.assign(Object.assign({}, this.contentPage), contentPage);
|
|
674
|
+
this._cdRef.markForCheck();
|
|
675
|
+
});
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
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 });
|
|
679
|
+
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 <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 (changed)=\"editorChanged($event)\">\n </app-editor>\n </div>\n\n <div mat-dialog-actions>\n <fs-form-dialog-actions\n [save]=\"false\"\n [done]=\"true\">\n </fs-form-dialog-actions>\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\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}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: i4$2.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: i5.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"] }, { type: i7$1.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "done", "closeData", "name"] }, { 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: 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: i8$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
|
|
681
|
+
type: Component,
|
|
682
|
+
args: [{
|
|
683
|
+
templateUrl: './content-page-editor.component.html',
|
|
684
|
+
styleUrls: ['./content-page-editor.component.scss'],
|
|
685
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
686
|
+
}]
|
|
687
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
688
|
+
type: Inject,
|
|
689
|
+
args: [MAT_DIALOG_DATA]
|
|
690
|
+
}] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
|
|
691
|
+
|
|
552
692
|
class FsContentPagesComponent {
|
|
553
693
|
constructor(_config, _dialog) {
|
|
554
694
|
this._config = _config;
|
|
@@ -560,18 +700,11 @@ class FsContentPagesComponent {
|
|
|
560
700
|
this._initListConfig();
|
|
561
701
|
}
|
|
562
702
|
openEditor(contentPage) {
|
|
563
|
-
this._dialog.open(
|
|
703
|
+
this._dialog.open(ContentPageEditorComponent, {
|
|
564
704
|
data: {
|
|
565
705
|
contentPage,
|
|
566
706
|
config: this._config,
|
|
567
|
-
title: 'Page',
|
|
568
707
|
contentConfig: this._config,
|
|
569
|
-
save: (data) => {
|
|
570
|
-
return this._config.saveContentPage(data);
|
|
571
|
-
},
|
|
572
|
-
openSettings: (data) => {
|
|
573
|
-
return this.openContentPage(data);
|
|
574
|
-
},
|
|
575
708
|
},
|
|
576
709
|
maxWidth: '100vw',
|
|
577
710
|
width: '100%',
|
|
@@ -579,7 +712,7 @@ class FsContentPagesComponent {
|
|
|
579
712
|
autoFocus: false,
|
|
580
713
|
})
|
|
581
714
|
.afterClosed()
|
|
582
|
-
.pipe(
|
|
715
|
+
.pipe(takeUntil(this._destroy$))
|
|
583
716
|
.subscribe(() => {
|
|
584
717
|
this.listComponent.reload();
|
|
585
718
|
});
|
|
@@ -651,7 +784,7 @@ class FsContentPagesComponent {
|
|
|
651
784
|
}
|
|
652
785
|
}
|
|
653
786
|
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 });
|
|
654
|
-
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$
|
|
787
|
+
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$2.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
655
788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, decorators: [{
|
|
656
789
|
type: Component,
|
|
657
790
|
args: [{
|
|
@@ -679,7 +812,8 @@ class FsContentPagesModule {
|
|
|
679
812
|
}
|
|
680
813
|
FsContentPagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
681
814
|
FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
|
|
682
|
-
ContentPageComponent
|
|
815
|
+
ContentPageComponent,
|
|
816
|
+
ContentPageEditorComponent], imports: [CommonModule,
|
|
683
817
|
FormsModule,
|
|
684
818
|
MatDialogModule,
|
|
685
819
|
MatInputModule,
|
|
@@ -691,6 +825,7 @@ FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
|
691
825
|
MatButtonToggleModule,
|
|
692
826
|
FsListModule,
|
|
693
827
|
FsDateModule,
|
|
828
|
+
FsCommonModule,
|
|
694
829
|
FsFormModule,
|
|
695
830
|
FsLabelModule,
|
|
696
831
|
FsSkeletonModule,
|
|
@@ -711,6 +846,7 @@ FsContentPagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
|
|
|
711
846
|
MatButtonToggleModule,
|
|
712
847
|
FsListModule,
|
|
713
848
|
FsDateModule,
|
|
849
|
+
FsCommonModule,
|
|
714
850
|
FsFormModule,
|
|
715
851
|
FsLabelModule,
|
|
716
852
|
FsSkeletonModule,
|
|
@@ -735,6 +871,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
735
871
|
MatButtonToggleModule,
|
|
736
872
|
FsListModule,
|
|
737
873
|
FsDateModule,
|
|
874
|
+
FsCommonModule,
|
|
738
875
|
FsFormModule,
|
|
739
876
|
FsLabelModule,
|
|
740
877
|
FsSkeletonModule,
|
|
@@ -749,6 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
749
886
|
declarations: [
|
|
750
887
|
FsContentPagesComponent,
|
|
751
888
|
ContentPageComponent,
|
|
889
|
+
ContentPageEditorComponent,
|
|
752
890
|
],
|
|
753
891
|
}]
|
|
754
892
|
}] });
|
|
@@ -789,7 +927,7 @@ class ContentStyleComponent {
|
|
|
789
927
|
}
|
|
790
928
|
}
|
|
791
929
|
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 });
|
|
792
|
-
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:
|
|
930
|
+
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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$2.FsModelChangeDirective, selector: "[fsModelChange]", inputs: ["fsModelChangeOptions"], outputs: ["fsModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
793
931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentStyleComponent, decorators: [{
|
|
794
932
|
type: Component,
|
|
795
933
|
args: [{
|
|
@@ -901,8 +1039,8 @@ class ContentRendererComponent {
|
|
|
901
1039
|
}
|
|
902
1040
|
}
|
|
903
1041
|
}
|
|
904
|
-
ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$
|
|
905
|
-
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
|
|
1042
|
+
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$3.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1043
|
+
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 });
|
|
906
1044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, decorators: [{
|
|
907
1045
|
type: Component,
|
|
908
1046
|
args: [{
|
|
@@ -911,7 +1049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
911
1049
|
styleUrls: ['./content-renderer.component.scss'],
|
|
912
1050
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
913
1051
|
}]
|
|
914
|
-
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$
|
|
1052
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$3.HtmlRenderer }]; }, propDecorators: { script: [{
|
|
915
1053
|
type: ViewChild,
|
|
916
1054
|
args: ['script', { read: ElementRef }]
|
|
917
1055
|
}], contentPage: [{
|
|
@@ -975,8 +1113,8 @@ class FsContentComponent {
|
|
|
975
1113
|
});
|
|
976
1114
|
}
|
|
977
1115
|
}
|
|
978
|
-
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$
|
|
979
|
-
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
|
|
1116
|
+
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$3.HtmlRenderer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1117
|
+
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 });
|
|
980
1118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, decorators: [{
|
|
981
1119
|
type: Component,
|
|
982
1120
|
args: [{
|
|
@@ -988,7 +1126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
|
|
|
988
1126
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
989
1127
|
type: Inject,
|
|
990
1128
|
args: [FS_CONTENT_CONFIG]
|
|
991
|
-
}] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$
|
|
1129
|
+
}] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$3.Router }, { type: i0.ElementRef }, { type: i3$3.HtmlRenderer }]; } });
|
|
992
1130
|
|
|
993
1131
|
class FsContentModule {
|
|
994
1132
|
}
|