@firestitch/content 13.0.6 → 13.0.7
Sign up to get free protection for your applications and to get access to all the features.
- package/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.d.ts +4 -1
- package/app/modules/content-layouts/fs-content-layouts.module.d.ts +11 -10
- package/app/modules/content-pages/components/content-page-editor/content-page-editor.component.d.ts +1 -1
- package/esm2020/app/modules/content-layouts/components/content-layout-editor/content-layout-editor.component.mjs +19 -7
- package/esm2020/app/modules/content-layouts/fs-content-layouts.module.mjs +5 -1
- package/esm2020/app/modules/content-pages/components/content-page-editor/content-page-editor.component.mjs +5 -5
- package/fesm2015/firestitch-content.mjs +25 -11
- package/fesm2015/firestitch-content.mjs.map +1 -1
- package/fesm2020/firestitch-content.mjs +25 -11
- package/fesm2020/firestitch-content.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import * as i9 from '@angular/forms';
|
|
|
6
6
|
import { FormsModule } from '@angular/forms';
|
|
7
7
|
import * as i5$1 from '@angular/material/button';
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i7$1 from '@angular/material/button-toggle';
|
|
10
10
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
11
11
|
import * as i1$1 from '@angular/material/dialog';
|
|
12
12
|
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
@@ -19,6 +19,8 @@ import { MatInputModule } from '@angular/material/input';
|
|
|
19
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 i12 from '@angular/material/tooltip';
|
|
23
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
22
24
|
import * as i3$2 from '@firestitch/date';
|
|
23
25
|
import { FsDateModule } from '@firestitch/date';
|
|
24
26
|
import * as i3 from '@firestitch/dialog';
|
|
@@ -39,13 +41,11 @@ import * as i2$1 from 'angular-split';
|
|
|
39
41
|
import { AngularSplitModule } from 'angular-split';
|
|
40
42
|
import * as i2 from '@firestitch/message';
|
|
41
43
|
import { Subject, of, throwError, fromEvent } from 'rxjs';
|
|
42
|
-
import { tap, switchMap, takeUntil, filter,
|
|
44
|
+
import { tap, switchMap, takeUntil, filter, finalize, map } from 'rxjs/operators';
|
|
43
45
|
import * as i3$1 from '@firestitch/prompt';
|
|
44
46
|
import { ItemType } from '@firestitch/filter';
|
|
45
47
|
import * as i2$3 from '@angular/router';
|
|
46
48
|
import { RouterModule, NavigationEnd } from '@angular/router';
|
|
47
|
-
import * as i12 from '@angular/material/tooltip';
|
|
48
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
49
49
|
import * as i6$1 from '@angular/material/core';
|
|
50
50
|
import * as i1$2 from '@angular/platform-browser';
|
|
51
51
|
import * as i3$3 from '@firestitch/html';
|
|
@@ -348,7 +348,8 @@ class ContentLayoutEditorComponent {
|
|
|
348
348
|
[EditorType.GlobalScss]: false,
|
|
349
349
|
};
|
|
350
350
|
this._destroy$ = new Subject();
|
|
351
|
-
this.
|
|
351
|
+
this.submitted = () => {
|
|
352
|
+
this.submitting = true;
|
|
352
353
|
return of(null)
|
|
353
354
|
.pipe(filter(() => this.focused), switchMap(() => {
|
|
354
355
|
switch (this.focused) {
|
|
@@ -362,9 +363,15 @@ class ContentLayoutEditorComponent {
|
|
|
362
363
|
}), tap(() => {
|
|
363
364
|
this.editor.clearChange(this.focused);
|
|
364
365
|
this._cdRef.markForCheck();
|
|
366
|
+
}), finalize(() => {
|
|
367
|
+
this.submitting = false;
|
|
368
|
+
this._cdRef.markForCheck();
|
|
365
369
|
}));
|
|
366
370
|
};
|
|
367
371
|
}
|
|
372
|
+
get isMac() {
|
|
373
|
+
return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
|
374
|
+
}
|
|
368
375
|
ngOnInit() {
|
|
369
376
|
this._dialogRef.addPanelClass('fs-content-editor-overlay-pane');
|
|
370
377
|
this._dialogRef.disableClose = true;
|
|
@@ -389,6 +396,10 @@ class ContentLayoutEditorComponent {
|
|
|
389
396
|
editorFocused(type) {
|
|
390
397
|
this.focused = type;
|
|
391
398
|
}
|
|
399
|
+
save() {
|
|
400
|
+
this.submitted()
|
|
401
|
+
.subscribe();
|
|
402
|
+
}
|
|
392
403
|
saveContentPage() {
|
|
393
404
|
const names = {
|
|
394
405
|
[EditorType.Scss]: 'styles',
|
|
@@ -461,10 +472,10 @@ class ContentLayoutEditorComponent {
|
|
|
461
472
|
}
|
|
462
473
|
}
|
|
463
474
|
ContentLayoutEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContentLayoutEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FsMessage }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
|
|
464
|
-
ContentLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContentLayoutEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"
|
|
475
|
+
ContentLayoutEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContentLayoutEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentLayout\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Layout Editor\n <div class=\"small\">{{contentLayout.name}}</div> \n </div>\n <a\n (click)=\"openSettings()\"\n mat-icon-button>\n <mat-icon>settings</mat-icon>\n </a>\n\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n\n <div class=\"actions\">\n <button\n #submit\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"!editor?.hasChanges || submitting\"\n [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n type=\"button\"\n (click)=\"save()\"> \n Save\n </button>\n\n <button \n mat-stroked-button\n (click)=\"close()\"\n type=\"button\"> \n Done\n </button>\n </div>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentLayout.content\"\n [scss]=\"contentLayout.styles\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n\n <!-- <div mat-dialog-actions>\n <button \n mat-button\n color=\"primary\"\n (click)=\"close()\"\n type=\"button\"> \n Done \n </button>\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n </div> -->\n </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mat-stroked-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { 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: i7$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], 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$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
465
476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContentLayoutEditorComponent, decorators: [{
|
|
466
477
|
type: Component,
|
|
467
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"
|
|
478
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentLayout\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Layout Editor\n <div class=\"small\">{{contentLayout.name}}</div> \n </div>\n <a\n (click)=\"openSettings()\"\n mat-icon-button>\n <mat-icon>settings</mat-icon>\n </a>\n\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <!-- <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle> -->\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n\n <div class=\"actions\">\n <button\n #submit\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"!editor?.hasChanges || submitting\"\n [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n type=\"button\"\n (click)=\"save()\"> \n Save\n </button>\n\n <button \n mat-stroked-button\n (click)=\"close()\"\n type=\"button\"> \n Done\n </button>\n </div>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentLayout.content\"\n [scss]=\"contentLayout.styles\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n\n <!-- <div mat-dialog-actions>\n <button \n mat-button\n color=\"primary\"\n (click)=\"close()\"\n type=\"button\"> \n Done \n </button>\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n </div> -->\n </fs-dialog>\n</form>", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mat-stroked-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
|
|
468
479
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
469
480
|
type: Inject,
|
|
470
481
|
args: [MAT_DIALOG_DATA]
|
|
@@ -591,6 +602,7 @@ FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
|
|
|
591
602
|
MatIconModule,
|
|
592
603
|
MatSelectModule,
|
|
593
604
|
MatButtonToggleModule,
|
|
605
|
+
MatTooltipModule,
|
|
594
606
|
FsListModule,
|
|
595
607
|
FsDateModule,
|
|
596
608
|
FsFormModule,
|
|
@@ -611,6 +623,7 @@ FsContentLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
|
|
|
611
623
|
MatIconModule,
|
|
612
624
|
MatSelectModule,
|
|
613
625
|
MatButtonToggleModule,
|
|
626
|
+
MatTooltipModule,
|
|
614
627
|
FsListModule,
|
|
615
628
|
FsDateModule,
|
|
616
629
|
FsFormModule,
|
|
@@ -635,6 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
635
648
|
MatIconModule,
|
|
636
649
|
MatSelectModule,
|
|
637
650
|
MatButtonToggleModule,
|
|
651
|
+
MatTooltipModule,
|
|
638
652
|
FsListModule,
|
|
639
653
|
FsDateModule,
|
|
640
654
|
FsFormModule,
|
|
@@ -740,7 +754,7 @@ class ContentPageEditorComponent {
|
|
|
740
754
|
[EditorType.GlobalScss]: false,
|
|
741
755
|
};
|
|
742
756
|
this._destroy$ = new Subject();
|
|
743
|
-
this.
|
|
757
|
+
this.submitted = () => {
|
|
744
758
|
this.submitting = true;
|
|
745
759
|
return of(null)
|
|
746
760
|
.pipe(filter(() => this.focused), switchMap(() => {
|
|
@@ -791,7 +805,7 @@ class ContentPageEditorComponent {
|
|
|
791
805
|
this.focused = type;
|
|
792
806
|
}
|
|
793
807
|
save() {
|
|
794
|
-
this.
|
|
808
|
+
this.submitted()
|
|
795
809
|
.subscribe();
|
|
796
810
|
}
|
|
797
811
|
saveContentPage() {
|
|
@@ -867,10 +881,10 @@ class ContentPageEditorComponent {
|
|
|
867
881
|
}
|
|
868
882
|
}
|
|
869
883
|
ContentPageEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContentPageEditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i2.FsMessage }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i3$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
|
|
870
|
-
ContentPageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContentPageEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"
|
|
884
|
+
ContentPageEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ContentPageEditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentPage\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Page Editor\n <div class=\"small\">{{contentPage.name}}</div> \n </div>\n <a\n (click)=\"openSettings()\"\n mat-icon-button>\n <mat-icon>settings</mat-icon>\n </a>\n\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n\n <div class=\"actions\">\n <button\n #submit\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"!editor?.hasChanges || submitting\"\n [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n type=\"button\"\n (click)=\"save()\"> \n Save\n </button>\n\n <a \n mat-stroked-button\n target=\"_blank\"\n [routerLink]=\"contentPage.path\"\n type=\"button\"> \n Preview\n </a>\n\n <button \n mat-stroked-button\n (click)=\"close()\"\n type=\"button\"> \n Done\n </button>\n </div>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showJs]=\"editors.js\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentPage.content\"\n [scss]=\"contentPage.styles\"\n [js]=\"contentPage.js\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mat-stroked-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { 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: i7$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: EditorComponent, selector: "app-editor", inputs: ["showHtml", "showScss", "showJs", "showGlobalScss", "html", "scss", "js", "contentConfig"], outputs: ["changed", "focused", "blured"] }], 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$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i5.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$3.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
871
885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ContentPageEditorComponent, decorators: [{
|
|
872
886
|
type: Component,
|
|
873
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"
|
|
887
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submitted\" [dirtySubmitButton]=\"false\" [confirm]=\"false\">\n <fs-dialog *fsSkeletonForm=\"contentPage\">\n <h1 mat-dialog-title>\n <div class=\"title-container\">\n <div class=\"title\">\n Page Editor\n <div class=\"small\">{{contentPage.name}}</div> \n </div>\n <a\n (click)=\"openSettings()\"\n mat-icon-button>\n <mat-icon>settings</mat-icon>\n </a>\n\n <div class=\"toggles\">\n <mat-button-toggle-group multiple>\n <mat-button-toggle value=\"html\" [checked]=\"editors.html\" (change)=\"editorToggleChange($event)\">HTML</mat-button-toggle>\n <mat-button-toggle value=\"scss\" [checked]=\"editors.scss\" (change)=\"editorToggleChange($event)\">SCSS</mat-button-toggle>\n <mat-button-toggle value=\"js\" [checked]=\"editors.js\" (change)=\"editorToggleChange($event)\">JS</mat-button-toggle>\n <mat-button-toggle value=\"globalScss\" [checked]=\"editors.globalScss\" (change)=\"editorToggleChange($event)\">Global SCSS</mat-button-toggle>\n </mat-button-toggle-group> \n </div>\n\n <div class=\"actions\">\n <button\n #submit\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"!editor?.hasChanges || submitting\"\n [matTooltip]=\"isMac ? 'cmd+s' : 'ctrl+s'\"\n type=\"button\"\n (click)=\"save()\"> \n Save\n </button>\n\n <a \n mat-stroked-button\n target=\"_blank\"\n [routerLink]=\"contentPage.path\"\n type=\"button\"> \n Preview\n </a>\n\n <button \n mat-stroked-button\n (click)=\"close()\"\n type=\"button\"> \n Done\n </button>\n </div>\n </div>\n </h1>\n <div mat-dialog-content>\n <app-editor\n [contentConfig]=\"config\"\n [showHtml]=\"editors.html\"\n [showJs]=\"editors.js\"\n [showScss]=\"editors.scss\"\n [showGlobalScss]=\"editors.globalScss\"\n [html]=\"contentPage.content\"\n [scss]=\"contentPage.styles\"\n [js]=\"contentPage.js\"\n (focused)=\"editorFocused($event)\">\n </app-editor>\n </div>\n </fs-dialog>\n</form>\n", styles: ["::ng-deep .fs-content-editor-overlay-pane .mat-dialog-container{border-radius:0}form{height:100%}fs-dialog{display:flex;height:100%;flex-direction:column}fs-dialog ::ng-deep .mat-dialog-content{max-height:none;flex:1;overflow:hidden}fs-dialog ::ng-deep .mat-button-toggle-label-content{line-height:36px}h1 .toggles{display:flex;justify-content:flex-end;justify-self:baseline;font-size:13px}h1 .actions{margin-left:30px}h1 .actions .mat-stroked-button{margin-left:5px}.title-container{display:flex;align-items:center}.title-container .title{flex:1}.title-container .title .small{line-height:normal}\n"] }]
|
|
874
888
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
875
889
|
type: Inject,
|
|
876
890
|
args: [MAT_DIALOG_DATA]
|