@firestitch/content 12.0.0

package/fesm2015/firestitch-content.js

@@ -0,0 +1,827 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, ViewChildren, Input, ViewChild, NgModule } from '@angular/core';
+import * as i10 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i9 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i11 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$1 from '@firestitch/list';
+import { FsListComponent, FsListModule } from '@firestitch/list';
+import * as i4$2 from '@firestitch/date';
+import { FsDateModule } from '@firestitch/date';
+import * as i3 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import * as i7 from '@firestitch/form';
+import { FsFormModule } from '@firestitch/form';
+import { FsHtmlEditorModule } from '@firestitch/html-editor';
+import * as i6$1 from '@firestitch/text-editor';
+import { FsTextEditorComponent, FsTextEditorModule } from '@firestitch/text-editor';
+import * as i5$1 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import * as i8 from '@firestitch/skeleton';
+import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i2 from '@firestitch/message';
+import { Subject, of } from 'rxjs';
+import { tap, switchMap, takeUntil, filter, map } from 'rxjs/operators';
+import * as i6 from '@angular/material/core';
+import { ItemType } from '@firestitch/filter';
+import { index } from '@firestitch/common';
+import * as i4$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i8$1 from '@angular/flex-layout/flex';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import * as i1$1 from '@angular/platform-browser';
+import * as i2$2 from '@angular/router';
+import { NavigationEnd } from '@angular/router';
+
+var PageType;
+(function (PageType) {
+    PageType["StandardPage"] = "standardPage";
+    PageType["BlogPost"] = "blogPost";
+    PageType["HomePage"] = "homePage";
+    PageType["NotFoundPage"] = "notFoundPage";
+})(PageType || (PageType = {}));
+
+const PageTypes = [
+    { name: 'Standard Page', value: PageType.StandardPage },
+    { name: 'Home Page', value: PageType.HomePage },
+    { name: 'Not Found Page', value: PageType.NotFoundPage },
+    { name: 'Blog Post', value: PageType.BlogPost },
+];
+
+const FS_CONTENT_CONFIG = new InjectionToken('fs-content-config');
+
+class ContentPageComponent {
+    constructor(_config, _data, _dialogRef, _message, _cdRef) {
+        this._config = _config;
+        this._data = _data;
+        this._dialogRef = _dialogRef;
+        this._message = _message;
+        this._cdRef = _cdRef;
+        this.contentPage = null;
+        this.PageTypes = PageTypes;
+        this.editors = { content: true, styles: true };
+        this._destroy$ = new Subject();
+        this.save = () => {
+            return this._config.saveContentPage(this.contentPage)
+                .pipe(tap((contentPage) => {
+                this._message.success('Saved Changes');
+                this._dialogRef.close(contentPage);
+            }));
+        };
+    }
+    ngOnInit() {
+        this._fetchData();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _fetchData() {
+        this._config.loadContentLayouts()
+            .subscribe((contentLayouts) => {
+            this.contentLayouts = contentLayouts;
+            this._cdRef.markForCheck();
+        });
+        of(this._data.contentPage)
+            .pipe(switchMap((contentPage) => {
+            return of(contentPage);
+        }), takeUntil(this._destroy$))
+            .subscribe((contentPage) => {
+            this.contentPage = Object.assign({}, contentPage);
+            this._cdRef.markForCheck();
+        });
+    }
+}
+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 });
+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 fxLayout=\"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>\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            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        <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      </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"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "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: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './content-page.component.html',
+                    styleUrls: ['./content-page.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textEditors: [{
+                type: ViewChildren,
+                args: [FsTextEditorComponent]
+            }] } });
+
+class EditorComponent {
+    constructor(_data, _dialogRef, _message) {
+        this._data = _data;
+        this._dialogRef = _dialogRef;
+        this._message = _message;
+        this.styles = null;
+        this.content = null;
+        this.editors = { content: true, styles: true };
+        this._destroy$ = new Subject();
+        this.save = () => {
+            return this._data.save({ content: this.content, styles: this.styles })
+                .pipe(tap(() => {
+                this._message.success('Saved Changes');
+            }));
+        };
+    }
+    ngOnInit() {
+        this._dialogRef.updateSize('100%', '100%');
+        this.content = this._data.content;
+        this.styles = this._data.styles;
+    }
+    editorToggleChange(event) {
+        this.editors[event.value] = !this.editors[event.value];
+        setTimeout(() => {
+            this.textEditors.forEach((textEditor) => {
+                textEditor.updateLayout();
+            });
+        }, 100);
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
+EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: FsTextEditorComponent, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"save\">\n  <fs-dialog>\n    <h1 mat-dialog-title>Design</h1>\n    <div mat-dialog-content>\n      <div class=\"container\">\n        <div class=\"toggles\">\n          <mat-button-toggle-group multiple>\n            <mat-button-toggle value=\"content\" [checked]=\"editors.content\" (change)=\"editorToggleChange($event)\">Content</mat-button-toggle>\n            <mat-button-toggle value=\"styles\" [checked]=\"editors.styles\" (change)=\"editorToggleChange($event)\">Styles</mat-button-toggle>\n          </mat-button-toggle-group>      \n        </div>\n        <div class=\"editors\">\n          <div class=\"editor\" *ngIf=\"editors.content\">\n            <fs-label>Content</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"content\" \n                name=\"content\"\n                [config]=\"{ tabSize: 2, language: 'html' }\">\n              </fs-text-editor>              \n            </div>\n          </div>\n          <div class=\"editor\" *ngIf=\"editors.styles\">\n            <fs-label>Styles</fs-label>\n            <div class=\"editor-container\">\n              <fs-text-editor \n                [(ngModel)]=\"styles\" \n                name=\"styles\"\n                [config]=\"{  tabSize: 2, language: 'scss' }\">\n              </fs-text-editor>    \n            </div>\n          </div>    \n        </div>\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: ["form{display:block;height:100%}form fs-dialog{display:flex;flex-direction:column;height:100%}form ::ng-deep .mat-dialog-content{max-height:none;flex:1}.toggles{display:flex;align-self:end;z-index:1;position:relative;margin-bottom:-12px}.container{height:100%;display:flex;flex-direction:column}.editors{width:5000px;max-width:100%;height:100%;display:flex;min-height:0}.editors .editor{height:100%;display:flex;min-width:0;width:100%;flex-direction:column}.editors .editor .editor-container{height:100%;overflow:auto;background:#1E1E1E}.editors .editor .editor-container fs-text-editor{display:block}.editors .editor+.editor{margin-left:20px}.editors .editor fs-label{background-color:#fff;padding-bottom:5px}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: i5$1.FsLabelComponent, selector: "fs-label" }, { type: i6$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], 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: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './editor.component.html',
+                    styleUrls: ['./editor.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }]; }, propDecorators: { textEditors: [{
+                type: ViewChildren,
+                args: [FsTextEditorComponent]
+            }] } });
+
+class FsContentPagesComponent {
+    constructor(_config, _dialog) {
+        this._config = _config;
+        this._dialog = _dialog;
+        this.pageTypes = index(PageTypes, 'value', 'name');
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this._initListConfig();
+    }
+    openEditor(contentPage) {
+        this._dialog.open(EditorComponent, {
+            maxWidth: null,
+            maxHeight: null,
+            data: {
+                styles: contentPage.styles,
+                content: contentPage.content,
+                save: (data) => {
+                    return this._config.saveContentPage(Object.assign({ id: contentPage.id }, data));
+                },
+            },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.listComponent.reload();
+        });
+    }
+    openPage(contentPage) {
+        this._dialog.open(ContentPageComponent, {
+            data: {
+                contentPage,
+            },
+        })
+            .afterClosed()
+            .pipe(filter((_contentPage) => !!_contentPage), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.listComponent.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _initListConfig() {
+        this.listConfig = {
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+            ],
+            actions: [
+                {
+                    label: 'Create',
+                    click: () => {
+                        this.openPage({});
+                    },
+                },
+            ],
+            rowActions: [
+                {
+                    click: (data) => {
+                        return this._config.deleteContentPage(data);
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this record?',
+                    },
+                    menu: true,
+                    label: 'Delete',
+                },
+            ],
+            fetch: (query) => {
+                return this._config.loadContentPages(query)
+                    .pipe(map((response) => {
+                    return { data: response.contentPages, paging: response.paging };
+                }));
+            },
+            restore: {
+                query: { state: 'deleted' },
+                filterLabel: 'Show Deleted',
+                menuLabel: 'Restore',
+                reload: true,
+                click: (row) => {
+                    return this._config.saveContentPage({ id: row.id, state: 'active' });
+                },
+            },
+        };
+    }
+}
+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 });
+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=\"design\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\"><mat-icon>design_services</mat-icon></a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openPage(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      /{{row.path}}\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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i4$2.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-content-pages',
+                    templateUrl: './content-pages.component.html',
+                    styleUrls: ['./content-pages.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { htmlEditorConfig: [{
+                type: Input
+            }], listComponent: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }] } });
+
+class FsContentEditorModule {
+}
+FsContentEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, declarations: [EditorComponent], imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatTabsModule,
+        MatIconModule,
+        MatButtonToggleModule,
+        FsListModule,
+        FsFormModule,
+        FsLabelModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsTextEditorModule], exports: [EditorComponent] });
+FsContentEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, imports: [[
+            CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatIconModule,
+            MatButtonToggleModule,
+            FsListModule,
+            FsFormModule,
+            FsLabelModule,
+            FsHtmlEditorModule,
+            FsDialogModule,
+            FsTextEditorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentEditorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatIconModule,
+                        MatButtonToggleModule,
+                        FsListModule,
+                        FsFormModule,
+                        FsLabelModule,
+                        FsHtmlEditorModule,
+                        FsDialogModule,
+                        FsTextEditorModule,
+                    ],
+                    exports: [
+                        EditorComponent,
+                    ],
+                    declarations: [
+                        EditorComponent,
+                    ],
+                }]
+        }] });
+
+class FsContentPagesModule {
+    static forRoot() {
+        return {
+            ngModule: FsContentPagesModule,
+        };
+    }
+}
+FsContentPagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentPagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
+        ContentPageComponent], imports: [CommonModule,
+        FormsModule,
+        MatDialogModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatTabsModule,
+        MatIconModule,
+        MatSelectModule,
+        MatButtonToggleModule,
+        FsListModule,
+        FsDateModule,
+        FsFormModule,
+        FsLabelModule,
+        FsSkeletonModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsTextEditorModule,
+        FsContentEditorModule], exports: [FsContentPagesComponent] });
+FsContentPagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, imports: [[
+            CommonModule,
+            FormsModule,
+            MatDialogModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatIconModule,
+            MatSelectModule,
+            MatButtonToggleModule,
+            FsListModule,
+            FsDateModule,
+            FsFormModule,
+            FsLabelModule,
+            FsSkeletonModule,
+            FsHtmlEditorModule,
+            FsDialogModule,
+            FsTextEditorModule,
+            FsContentEditorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentPagesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatDialogModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatButtonToggleModule,
+                        FsListModule,
+                        FsDateModule,
+                        FsFormModule,
+                        FsLabelModule,
+                        FsSkeletonModule,
+                        FsHtmlEditorModule,
+                        FsDialogModule,
+                        FsTextEditorModule,
+                        FsContentEditorModule,
+                    ],
+                    exports: [
+                        FsContentPagesComponent,
+                    ],
+                    declarations: [
+                        FsContentPagesComponent,
+                        ContentPageComponent,
+                    ],
+                }]
+        }] });
+
+class ContentLayoutComponent {
+    constructor(_config, _data, _dialogRef, _message, _cdRef) {
+        this._config = _config;
+        this._data = _data;
+        this._dialogRef = _dialogRef;
+        this._message = _message;
+        this._cdRef = _cdRef;
+        this.contentLayout = null;
+        this.editors = { content: true, styles: true };
+        this._destroy$ = new Subject();
+        this.save = () => {
+            return this._config.saveContentLayout(this.contentLayout)
+                .pipe(tap((contentLayout) => {
+                this._message.success('Saved Changes');
+                this._dialogRef.close(contentLayout);
+            }));
+        };
+    }
+    ngOnInit() {
+        this._fetchData();
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _fetchData() {
+        of(this._data.contentLayout)
+            .pipe(switchMap((contentLayout) => {
+            return of(contentLayout);
+        }), takeUntil(this._destroy$))
+            .subscribe((contentLayout) => {
+            this.contentLayout = Object.assign({}, contentLayout);
+            this._cdRef.markForCheck();
+        });
+    }
+}
+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 });
+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 fxLayout=\"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"] }, { type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "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: i7.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { 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.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i11.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: i7.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './content-layout.component.html',
+                    styleUrls: ['./content-layout.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { textEditors: [{
+                type: ViewChildren,
+                args: [FsTextEditorComponent]
+            }] } });
+
+class FsContentLayoutsComponent {
+    constructor(_config, _dialog) {
+        this._config = _config;
+        this._dialog = _dialog;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this._initListConfig();
+    }
+    openEditor(contentLayout) {
+        this._dialog.open(EditorComponent, {
+            maxWidth: null,
+            maxHeight: null,
+            data: {
+                styles: contentLayout.styles,
+                content: contentLayout.content,
+                save: (data) => {
+                    return this._config.saveContentPage(Object.assign({ id: contentLayout.id }, data));
+                },
+            },
+        })
+            .afterClosed()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.listComponent.reload();
+        });
+    }
+    openLayout(contentLayout) {
+        this._dialog.open(ContentLayoutComponent, {
+            data: {
+                contentLayout,
+            },
+        })
+            .afterClosed()
+            .pipe(filter((_contentLayout) => !!_contentLayout), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.listComponent.reload();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _initListConfig() {
+        this.listConfig = {
+            paging: false,
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+            ],
+            actions: [
+                {
+                    label: 'Create',
+                    click: () => {
+                        this.openLayout({});
+                    },
+                },
+            ],
+            rowActions: [
+                {
+                    click: (data) => {
+                        return this._config.deleteContentLayout(data);
+                    },
+                    remove: {
+                        title: 'Confirm',
+                        template: 'Are you sure you would like to delete this record?',
+                    },
+                    menu: true,
+                    label: 'Delete',
+                },
+            ],
+            fetch: (query) => {
+                return this._config.loadContentLayouts(query)
+                    .pipe(map((contentLayouts) => {
+                    return { data: contentLayouts };
+                }));
+            },
+            restore: {
+                query: { state: 'deleted' },
+                filterLabel: 'Show Deleted',
+                menuLabel: 'Restore',
+                reload: true,
+                click: (row) => {
+                    return this._config.saveContentLayout({ id: row.id, state: 'active' });
+                },
+            },
+        };
+    }
+}
+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 });
+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=\"design\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openEditor(row)\"><mat-icon>design_services</mat-icon></a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column name=\"name\" title=\"Name\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openLayout(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$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i4$2.FsDatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-content-layouts',
+                    templateUrl: './content-layouts.component.html',
+                    styleUrls: ['./content-layouts.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: i1.MatDialog }]; }, propDecorators: { listComponent: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }] } });
+
+class FsContentLayoutsModule {
+}
+FsContentLayoutsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentLayoutsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
+        FsContentLayoutsComponent], imports: [CommonModule,
+        FormsModule,
+        FlexLayoutModule,
+        MatDialogModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatButtonModule,
+        MatTabsModule,
+        MatIconModule,
+        MatSelectModule,
+        MatButtonToggleModule,
+        FsListModule,
+        FsDateModule,
+        FsFormModule,
+        FsLabelModule,
+        FsSkeletonModule,
+        FsHtmlEditorModule,
+        FsDialogModule,
+        FsTextEditorModule,
+        FsContentEditorModule], exports: [FsContentLayoutsComponent] });
+FsContentLayoutsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, imports: [[
+            CommonModule,
+            FormsModule,
+            FlexLayoutModule,
+            MatDialogModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatIconModule,
+            MatSelectModule,
+            MatButtonToggleModule,
+            FsListModule,
+            FsDateModule,
+            FsFormModule,
+            FsLabelModule,
+            FsSkeletonModule,
+            FsHtmlEditorModule,
+            FsDialogModule,
+            FsTextEditorModule,
+            FsContentEditorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentLayoutsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        FlexLayoutModule,
+                        MatDialogModule,
+                        MatInputModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatIconModule,
+                        MatSelectModule,
+                        MatButtonToggleModule,
+                        FsListModule,
+                        FsDateModule,
+                        FsFormModule,
+                        FsLabelModule,
+                        FsSkeletonModule,
+                        FsHtmlEditorModule,
+                        FsDialogModule,
+                        FsTextEditorModule,
+                        FsContentEditorModule,
+                    ],
+                    exports: [
+                        FsContentLayoutsComponent,
+                    ],
+                    declarations: [
+                        ContentLayoutComponent,
+                        FsContentLayoutsComponent,
+                    ],
+                }]
+        }] });
+
+class ContentRendererComponent {
+    constructor(_sanitizer, _router, _el) {
+        this._sanitizer = _sanitizer;
+        this._router = _router;
+        this._el = _el;
+        this._destroy$ = new Subject();
+    }
+    set contentPage(contentPage) {
+        if (contentPage) {
+            this.content = this._sanitizer.bypassSecurityTrustHtml(contentPage.content);
+            this.styles = contentPage.styles;
+        }
+    }
+    ngAfterViewChecked() {
+        let el = document.querySelector('#contentPageStyles');
+        if (!el) {
+            el = document.createElement('style');
+            el.setAttribute('id', 'contentPageStyles');
+            document.getElementsByTagName('head')[0].appendChild(el);
+        }
+        el.innerHTML = this.styles;
+        this.registerHrefs();
+    }
+    registerHrefs() {
+        Array.from(this.el.querySelectorAll('a[href]'))
+            .filter((el) => {
+            return el.getAttribute('href').match(/^\//);
+        })
+            .forEach((el) => {
+            el.addEventListener('click', (event) => {
+                if (!event.shiftKey && !event.ctrlKey) {
+                    event.preventDefault();
+                    const href = el.getAttribute('href');
+                    this._router.navigateByUrl(href);
+                }
+            });
+        });
+    }
+    get el() {
+        return this._el.nativeElement;
+    }
+    ngOnDestroy() {
+        this.removeStyles();
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    removeStyles() {
+        const el = document.querySelector('#contentPageStyles');
+        if (el) {
+            el.remove();
+        }
+    }
+}
+ContentRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, deps: [{ token: i1$1.DomSanitizer }, { token: i2$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ContentRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContentRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-content-renderer',
+                    templateUrl: './content-renderer.component.html',
+                    styleUrls: ['./content-renderer.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: i2$2.Router }, { type: i0.ElementRef }]; }, propDecorators: { contentPage: [{
+                type: Input
+            }] } });
+
+class FsContentComponent {
+    constructor(_config, _title, _cdRef, _router, _el) {
+        this._config = _config;
+        this._title = _title;
+        this._cdRef = _cdRef;
+        this._router = _router;
+        this._el = _el;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.load();
+        this._router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.load();
+        });
+    }
+    load() {
+        const path = window.location.pathname;
+        this._config.loadContent(path)
+            .subscribe((contentPage) => {
+            this._title.setTitle(contentPage.title);
+            this.contentPage = contentPage;
+            this._cdRef.markForCheck();
+        });
+    }
+    get el() {
+        return this._el.nativeElement;
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._title.setTitle('');
+    }
+}
+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$2.Router }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+FsContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-content',
+                    templateUrl: './content.component.html',
+                    styleUrls: ['./content.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_CONTENT_CONFIG]
+                }] }, { type: i1$1.Title }, { type: i0.ChangeDetectorRef }, { type: i2$2.Router }, { type: i0.ElementRef }]; } });
+
+class FsContentModule {
+}
+FsContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentModule, declarations: [FsContentComponent,
+        ContentRendererComponent], imports: [CommonModule,
+        FsHtmlEditorModule], exports: [FsContentComponent] });
+FsContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentModule, imports: [[
+            CommonModule,
+            FsHtmlEditorModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsContentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FsHtmlEditorModule,
+                    ],
+                    exports: [
+                        FsContentComponent,
+                    ],
+                    declarations: [
+                        FsContentComponent,
+                        ContentRendererComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FS_CONTENT_CONFIG, FsContentComponent, FsContentLayoutsComponent, FsContentLayoutsModule, FsContentModule, FsContentPagesComponent, FsContentPagesModule };
+//# sourceMappingURL=firestitch-content.js.map