@firestitch/content 12.0.0

package/bundles/firestitch-content.umd.js

@@ -0,0 +1,894 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/button'), require('@angular/material/tabs'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/select'), require('@firestitch/list'), require('@firestitch/date'), require('@firestitch/dialog'), require('@firestitch/form'), require('@firestitch/html-editor'), require('@firestitch/text-editor'), require('@firestitch/label'), require('@firestitch/skeleton'), require('rxjs'), require('rxjs/operators'), require('@firestitch/message'), require('@angular/material/core'), require('@firestitch/filter'), require('@firestitch/common'), require('@angular/material/button-toggle'), require('@angular/flex-layout/flex'), require('@angular/flex-layout'), require('@angular/router'), require('@angular/platform-browser')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/content', ['exports', '@angular/core', '@angular/common', '@angular/material/button', '@angular/material/tabs', '@angular/material/dialog', '@angular/forms', '@angular/material/input', '@angular/material/form-field', '@angular/material/icon', '@angular/material/select', '@firestitch/list', '@firestitch/date', '@firestitch/dialog', '@firestitch/form', '@firestitch/html-editor', '@firestitch/text-editor', '@firestitch/label', '@firestitch/skeleton', 'rxjs', 'rxjs/operators', '@firestitch/message', '@angular/material/core', '@firestitch/filter', '@firestitch/common', '@angular/material/button-toggle', '@angular/flex-layout/flex', '@angular/flex-layout', '@angular/router', '@angular/platform-browser'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.content = {}), global.ng.core, global.ng.common, global.ng.material.button, global.ng.material.tabs, global.ng.material.dialog, global.ng.forms, global.ng.material.input, global.ng.material.formField, global.ng.material.icon, global.ng.material.select, global.i2$1, global.i4$2, global.i3, global.i7, global.htmlEditor, global.i6, global.i5$1, global.i8, global.rxjs, global.rxjs.operators, global.i2, global.ng.material.core, global.filter, global.common, global.ng.material.buttonToggle, global.ng.flexLayout.flex, global.ng.flexLayout, global.ng.router, global.ng.platformBrowser));
+})(this, (function (exports, i0, i10, button, tabs, i1, i9, i11, i4, i3$1, i5, i2$1, i4$2, i3, i7, htmlEditor, i6, i5$1, i8, rxjs, operators, i2, i6$1, filter, common, i4$1, i8$1, flexLayout, i2$2, i1$1) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n["default"] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
+    var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6$1);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i8__namespace$1 = /*#__PURE__*/_interopNamespace(i8$1);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+
+    var PageType;
+    (function (PageType) {
+        PageType["StandardPage"] = "standardPage";
+        PageType["BlogPost"] = "blogPost";
+        PageType["HomePage"] = "homePage";
+        PageType["NotFoundPage"] = "notFoundPage";
+    })(PageType || (PageType = {}));
+
+    var 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 },
+    ];
+
+    var FS_CONTENT_CONFIG = new i0.InjectionToken('fs-content-config');
+
+    var ContentPageComponent = /** @class */ (function () {
+        function ContentPageComponent(_config, _data, _dialogRef, _message, _cdRef) {
+            var _this = this;
+            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 rxjs.Subject();
+            this.save = function () {
+                return _this._config.saveContentPage(_this.contentPage)
+                    .pipe(operators.tap(function (contentPage) {
+                    _this._message.success('Saved Changes');
+                    _this._dialogRef.close(contentPage);
+                }));
+            };
+        }
+        ContentPageComponent.prototype.ngOnInit = function () {
+            this._fetchData();
+        };
+        ContentPageComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentPageComponent.prototype._fetchData = function () {
+            var _this = this;
+            this._config.loadContentLayouts()
+                .subscribe(function (contentLayouts) {
+                _this.contentLayouts = contentLayouts;
+                _this._cdRef.markForCheck();
+            });
+            rxjs.of(this._data.contentPage)
+                .pipe(operators.switchMap(function (contentPage) {
+                return rxjs.of(contentPage);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function (contentPage) {
+                _this.contentPage = Object.assign({}, contentPage);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentPageComponent;
+    }());
+    ContentPageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentPageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentPageComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5__namespace.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6__namespace.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.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__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11__namespace.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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentPageComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-page.component.html',
+                        styleUrls: ['./content-page.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i6.FsTextEditorComponent]
+                }] } });
+
+    var EditorComponent = /** @class */ (function () {
+        function EditorComponent(_data, _dialogRef, _message) {
+            var _this = this;
+            this._data = _data;
+            this._dialogRef = _dialogRef;
+            this._message = _message;
+            this.styles = null;
+            this.content = null;
+            this.editors = { content: true, styles: true };
+            this._destroy$ = new rxjs.Subject();
+            this.save = function () {
+                return _this._data.save({ content: _this.content, styles: _this.styles })
+                    .pipe(operators.tap(function () {
+                    _this._message.success('Saved Changes');
+                }));
+            };
+        }
+        EditorComponent.prototype.ngOnInit = function () {
+            this._dialogRef.updateSize('100%', '100%');
+            this.content = this._data.content;
+            this.styles = this._data.styles;
+        };
+        EditorComponent.prototype.editorToggleChange = function (event) {
+            var _this = this;
+            this.editors[event.value] = !this.editors[event.value];
+            setTimeout(function () {
+                _this.textEditors.forEach(function (textEditor) {
+                    textEditor.updateLayout();
+                });
+            }, 100);
+        };
+        EditorComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        return EditorComponent;
+    }());
+    EditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    EditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EditorComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace$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__namespace$1.FsLabelComponent, selector: "fs-label" }, { type: i6__namespace$1.FsTextEditorComponent, selector: "fs-text-editor", inputs: ["config", "scrollable"], outputs: ["init", "blur"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.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__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EditorComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './editor.component.html',
+                        styleUrls: ['./editor.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i6.FsTextEditorComponent]
+                }] } });
+
+    var FsContentPagesComponent = /** @class */ (function () {
+        function FsContentPagesComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this.pageTypes = common.index(PageTypes, 'value', 'name');
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentPagesComponent.prototype.ngOnInit = function () {
+            this._initListConfig();
+        };
+        FsContentPagesComponent.prototype.openEditor = function (contentPage) {
+            var _this = this;
+            this._dialog.open(EditorComponent, {
+                maxWidth: null,
+                maxHeight: null,
+                data: {
+                    styles: contentPage.styles,
+                    content: contentPage.content,
+                    save: function (data) {
+                        return _this._config.saveContentPage(Object.assign({ id: contentPage.id }, data));
+                    },
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentPagesComponent.prototype.openPage = function (contentPage) {
+            var _this = this;
+            this._dialog.open(ContentPageComponent, {
+                data: {
+                    contentPage: contentPage,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.filter(function (_contentPage) { return !!_contentPage; }), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentPagesComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsContentPagesComponent.prototype._initListConfig = function () {
+            var _this = this;
+            this.listConfig = {
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                ],
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.openPage({});
+                        },
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (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: function (query) {
+                    return _this._config.loadContentPages(query)
+                        .pipe(operators.map(function (response) {
+                        return { data: response.contentPages, paging: response.paging };
+                    }));
+                },
+                restore: {
+                    query: { state: 'deleted' },
+                    filterLabel: 'Show Deleted',
+                    menuLabel: 'Restore',
+                    reload: true,
+                    click: function (row) {
+                        return _this._config.saveContentPage({ id: row.id, state: 'active' });
+                    },
+                },
+            };
+        };
+        return FsContentPagesComponent;
+    }());
+    FsContentPagesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentPagesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentPagesComponent, selector: "fs-content-pages", inputs: { htmlEditorConfig: "htmlEditorConfig" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, 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__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i4__namespace$2.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-pages',
+                        templateUrl: './content-pages.component.html',
+                        styleUrls: ['./content-pages.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { htmlEditorConfig: [{
+                    type: i0.Input
+                }], listComponent: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent]
+                }] } });
+
+    var FsContentEditorModule = /** @class */ (function () {
+        function FsContentEditorModule() {
+        }
+        return FsContentEditorModule;
+    }());
+    FsContentEditorModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentEditorModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, declarations: [EditorComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            button.MatButtonModule,
+            tabs.MatTabsModule,
+            i3$1.MatIconModule,
+            i4$1.MatButtonToggleModule,
+            i2$1.FsListModule,
+            i7.FsFormModule,
+            i5$1.FsLabelModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3.FsDialogModule,
+            i6.FsTextEditorModule], exports: [EditorComponent] });
+    FsContentEditorModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                button.MatButtonModule,
+                tabs.MatTabsModule,
+                i3$1.MatIconModule,
+                i4$1.MatButtonToggleModule,
+                i2$1.FsListModule,
+                i7.FsFormModule,
+                i5$1.FsLabelModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3.FsDialogModule,
+                i6.FsTextEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentEditorModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            button.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i3$1.MatIconModule,
+                            i4$1.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i7.FsFormModule,
+                            i5$1.FsLabelModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3.FsDialogModule,
+                            i6.FsTextEditorModule,
+                        ],
+                        exports: [
+                            EditorComponent,
+                        ],
+                        declarations: [
+                            EditorComponent,
+                        ],
+                    }]
+            }] });
+
+    var FsContentPagesModule = /** @class */ (function () {
+        function FsContentPagesModule() {
+        }
+        FsContentPagesModule.forRoot = function () {
+            return {
+                ngModule: FsContentPagesModule,
+            };
+        };
+        return FsContentPagesModule;
+    }());
+    FsContentPagesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentPagesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, declarations: [FsContentPagesComponent,
+            ContentPageComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            i1.MatDialogModule,
+            i11.MatInputModule,
+            i4.MatFormFieldModule,
+            button.MatButtonModule,
+            tabs.MatTabsModule,
+            i3$1.MatIconModule,
+            i5.MatSelectModule,
+            i4$1.MatButtonToggleModule,
+            i2$1.FsListModule,
+            i4$2.FsDateModule,
+            i7.FsFormModule,
+            i5$1.FsLabelModule,
+            i8.FsSkeletonModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3.FsDialogModule,
+            i6.FsTextEditorModule,
+            FsContentEditorModule], exports: [FsContentPagesComponent] });
+    FsContentPagesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                i1.MatDialogModule,
+                i11.MatInputModule,
+                i4.MatFormFieldModule,
+                button.MatButtonModule,
+                tabs.MatTabsModule,
+                i3$1.MatIconModule,
+                i5.MatSelectModule,
+                i4$1.MatButtonToggleModule,
+                i2$1.FsListModule,
+                i4$2.FsDateModule,
+                i7.FsFormModule,
+                i5$1.FsLabelModule,
+                i8.FsSkeletonModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3.FsDialogModule,
+                i6.FsTextEditorModule,
+                FsContentEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentPagesModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            i1.MatDialogModule,
+                            i11.MatInputModule,
+                            i4.MatFormFieldModule,
+                            button.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i3$1.MatIconModule,
+                            i5.MatSelectModule,
+                            i4$1.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i4$2.FsDateModule,
+                            i7.FsFormModule,
+                            i5$1.FsLabelModule,
+                            i8.FsSkeletonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3.FsDialogModule,
+                            i6.FsTextEditorModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            FsContentPagesComponent,
+                        ],
+                        declarations: [
+                            FsContentPagesComponent,
+                            ContentPageComponent,
+                        ],
+                    }]
+            }] });
+
+    var ContentLayoutComponent = /** @class */ (function () {
+        function ContentLayoutComponent(_config, _data, _dialogRef, _message, _cdRef) {
+            var _this = this;
+            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 rxjs.Subject();
+            this.save = function () {
+                return _this._config.saveContentLayout(_this.contentLayout)
+                    .pipe(operators.tap(function (contentLayout) {
+                    _this._message.success('Saved Changes');
+                    _this._dialogRef.close(contentLayout);
+                }));
+            };
+        }
+        ContentLayoutComponent.prototype.ngOnInit = function () {
+            this._fetchData();
+        };
+        ContentLayoutComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentLayoutComponent.prototype._fetchData = function () {
+            var _this = this;
+            rxjs.of(this._data.contentLayout)
+                .pipe(operators.switchMap(function (contentLayout) {
+                return rxjs.of(contentLayout);
+            }), operators.takeUntil(this._destroy$))
+                .subscribe(function (contentLayout) {
+                _this.contentLayout = Object.assign({}, contentLayout);
+                _this._cdRef.markForCheck();
+            });
+        };
+        return ContentLayoutComponent;
+    }());
+    ContentLayoutComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentLayoutComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentLayoutComponent, selector: "ng-component", viewQueries: [{ propertyName: "textEditors", predicate: i6.FsTextEditorComponent, descendants: true }], ngImport: i0__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i7__namespace.FsFormDialogActionsComponent, selector: "fs-form-dialog-actions", inputs: ["save", "create", "close", "closeData", "name"] }], directives: [{ type: i8__namespace.FsSkeletonFormDirective, selector: "[fsSkeletonForm]", inputs: ["fsSkeletonForm", "fsSkeletonFormLines"] }, { type: i9__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i9__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i9__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7__namespace.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__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8__namespace$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__namespace.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__namespace.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__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7__namespace.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentLayoutComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './content-layout.component.html',
+                        styleUrls: ['./content-layout.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }, { type: i0__namespace.ChangeDetectorRef }];
+        }, propDecorators: { textEditors: [{
+                    type: i0.ViewChildren,
+                    args: [i6.FsTextEditorComponent]
+                }] } });
+
+    var FsContentLayoutsComponent = /** @class */ (function () {
+        function FsContentLayoutsComponent(_config, _dialog) {
+            this._config = _config;
+            this._dialog = _dialog;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentLayoutsComponent.prototype.ngOnInit = function () {
+            this._initListConfig();
+        };
+        FsContentLayoutsComponent.prototype.openEditor = function (contentLayout) {
+            var _this = this;
+            this._dialog.open(EditorComponent, {
+                maxWidth: null,
+                maxHeight: null,
+                data: {
+                    styles: contentLayout.styles,
+                    content: contentLayout.content,
+                    save: function (data) {
+                        return _this._config.saveContentPage(Object.assign({ id: contentLayout.id }, data));
+                    },
+                },
+            })
+                .afterClosed()
+                .pipe(operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentLayoutsComponent.prototype.openLayout = function (contentLayout) {
+            var _this = this;
+            this._dialog.open(ContentLayoutComponent, {
+                data: {
+                    contentLayout: contentLayout,
+                },
+            })
+                .afterClosed()
+                .pipe(operators.filter(function (_contentLayout) { return !!_contentLayout; }), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.listComponent.reload();
+            });
+        };
+        FsContentLayoutsComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        FsContentLayoutsComponent.prototype._initListConfig = function () {
+            var _this = this;
+            this.listConfig = {
+                paging: false,
+                filters: [
+                    {
+                        name: 'keyword',
+                        type: filter.ItemType.Keyword,
+                        label: 'Search',
+                    },
+                ],
+                actions: [
+                    {
+                        label: 'Create',
+                        click: function () {
+                            _this.openLayout({});
+                        },
+                    },
+                ],
+                rowActions: [
+                    {
+                        click: function (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: function (query) {
+                    return _this._config.loadContentLayouts(query)
+                        .pipe(operators.map(function (contentLayouts) {
+                        return { data: contentLayouts };
+                    }));
+                },
+                restore: {
+                    query: { state: 'deleted' },
+                    filterLabel: 'Show Deleted',
+                    menuLabel: 'Restore',
+                    reload: true,
+                    click: function (row) {
+                        return _this._config.saveContentLayout({ id: row.id, state: 'active' });
+                    },
+                },
+            };
+        };
+        return FsContentLayoutsComponent;
+    }());
+    FsContentLayoutsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentLayoutsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentLayoutsComponent, selector: "fs-content-layouts", viewQueries: [{ propertyName: "listComponent", first: true, predicate: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, 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__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }], pipes: { "fsDate": i4__namespace$2.FsDatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-layouts',
+                        templateUrl: './content-layouts.component.html',
+                        styleUrls: ['./content-layouts.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace.MatDialog }];
+        }, propDecorators: { listComponent: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent]
+                }] } });
+
+    var FsContentLayoutsModule = /** @class */ (function () {
+        function FsContentLayoutsModule() {
+        }
+        return FsContentLayoutsModule;
+    }());
+    FsContentLayoutsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentLayoutsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, declarations: [ContentLayoutComponent,
+            FsContentLayoutsComponent], imports: [i10.CommonModule,
+            i9.FormsModule,
+            flexLayout.FlexLayoutModule,
+            i1.MatDialogModule,
+            i11.MatInputModule,
+            i4.MatFormFieldModule,
+            button.MatButtonModule,
+            tabs.MatTabsModule,
+            i3$1.MatIconModule,
+            i5.MatSelectModule,
+            i4$1.MatButtonToggleModule,
+            i2$1.FsListModule,
+            i4$2.FsDateModule,
+            i7.FsFormModule,
+            i5$1.FsLabelModule,
+            i8.FsSkeletonModule,
+            htmlEditor.FsHtmlEditorModule,
+            i3.FsDialogModule,
+            i6.FsTextEditorModule,
+            FsContentEditorModule], exports: [FsContentLayoutsComponent] });
+    FsContentLayoutsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, imports: [[
+                i10.CommonModule,
+                i9.FormsModule,
+                flexLayout.FlexLayoutModule,
+                i1.MatDialogModule,
+                i11.MatInputModule,
+                i4.MatFormFieldModule,
+                button.MatButtonModule,
+                tabs.MatTabsModule,
+                i3$1.MatIconModule,
+                i5.MatSelectModule,
+                i4$1.MatButtonToggleModule,
+                i2$1.FsListModule,
+                i4$2.FsDateModule,
+                i7.FsFormModule,
+                i5$1.FsLabelModule,
+                i8.FsSkeletonModule,
+                htmlEditor.FsHtmlEditorModule,
+                i3.FsDialogModule,
+                i6.FsTextEditorModule,
+                FsContentEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentLayoutsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            i9.FormsModule,
+                            flexLayout.FlexLayoutModule,
+                            i1.MatDialogModule,
+                            i11.MatInputModule,
+                            i4.MatFormFieldModule,
+                            button.MatButtonModule,
+                            tabs.MatTabsModule,
+                            i3$1.MatIconModule,
+                            i5.MatSelectModule,
+                            i4$1.MatButtonToggleModule,
+                            i2$1.FsListModule,
+                            i4$2.FsDateModule,
+                            i7.FsFormModule,
+                            i5$1.FsLabelModule,
+                            i8.FsSkeletonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                            i3.FsDialogModule,
+                            i6.FsTextEditorModule,
+                            FsContentEditorModule,
+                        ],
+                        exports: [
+                            FsContentLayoutsComponent,
+                        ],
+                        declarations: [
+                            ContentLayoutComponent,
+                            FsContentLayoutsComponent,
+                        ],
+                    }]
+            }] });
+
+    var ContentRendererComponent = /** @class */ (function () {
+        function ContentRendererComponent(_sanitizer, _router, _el) {
+            this._sanitizer = _sanitizer;
+            this._router = _router;
+            this._el = _el;
+            this._destroy$ = new rxjs.Subject();
+        }
+        Object.defineProperty(ContentRendererComponent.prototype, "contentPage", {
+            set: function (contentPage) {
+                if (contentPage) {
+                    this.content = this._sanitizer.bypassSecurityTrustHtml(contentPage.content);
+                    this.styles = contentPage.styles;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ContentRendererComponent.prototype.ngAfterViewChecked = function () {
+            var 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();
+        };
+        ContentRendererComponent.prototype.registerHrefs = function () {
+            var _this = this;
+            Array.from(this.el.querySelectorAll('a[href]'))
+                .filter(function (el) {
+                return el.getAttribute('href').match(/^\//);
+            })
+                .forEach(function (el) {
+                el.addEventListener('click', function (event) {
+                    if (!event.shiftKey && !event.ctrlKey) {
+                        event.preventDefault();
+                        var href = el.getAttribute('href');
+                        _this._router.navigateByUrl(href);
+                    }
+                });
+            });
+        };
+        Object.defineProperty(ContentRendererComponent.prototype, "el", {
+            get: function () {
+                return this._el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ContentRendererComponent.prototype.ngOnDestroy = function () {
+            this.removeStyles();
+            this._destroy$.next();
+            this._destroy$.complete();
+        };
+        ContentRendererComponent.prototype.removeStyles = function () {
+            var el = document.querySelector('#contentPageStyles');
+            if (el) {
+                el.remove();
+            }
+        };
+        return ContentRendererComponent;
+    }());
+    ContentRendererComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, deps: [{ token: i1__namespace$1.DomSanitizer }, { token: i2__namespace$2.Router }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ContentRendererComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContentRendererComponent, selector: "fs-content-renderer", inputs: { contentPage: "contentPage" }, ngImport: i0__namespace, template: "<div *ngIf=\"content\" [innerHTML]=\"content\"></div>\n", styles: [""], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: ContentRendererComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content-renderer',
+                        templateUrl: './content-renderer.component.html',
+                        styleUrls: ['./content-renderer.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.DomSanitizer }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }]; }, propDecorators: { contentPage: [{
+                    type: i0.Input
+                }] } });
+
+    var FsContentComponent = /** @class */ (function () {
+        function FsContentComponent(_config, _title, _cdRef, _router, _el) {
+            this._config = _config;
+            this._title = _title;
+            this._cdRef = _cdRef;
+            this._router = _router;
+            this._el = _el;
+            this._destroy$ = new rxjs.Subject();
+        }
+        FsContentComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.load();
+            this._router.events
+                .pipe(operators.filter(function (e) { return e instanceof i2$2.NavigationEnd; }), operators.takeUntil(this._destroy$))
+                .subscribe(function () {
+                _this.load();
+            });
+        };
+        FsContentComponent.prototype.load = function () {
+            var _this = this;
+            var path = window.location.pathname;
+            this._config.loadContent(path)
+                .subscribe(function (contentPage) {
+                _this._title.setTitle(contentPage.title);
+                _this.contentPage = contentPage;
+                _this._cdRef.markForCheck();
+            });
+        };
+        Object.defineProperty(FsContentComponent.prototype, "el", {
+            get: function () {
+                return this._el.nativeElement;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FsContentComponent.prototype.ngOnDestroy = function () {
+            this._destroy$.next();
+            this._destroy$.complete();
+            this._title.setTitle('');
+        };
+        return FsContentComponent;
+    }());
+    FsContentComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, deps: [{ token: FS_CONTENT_CONFIG }, { token: i1__namespace$1.Title }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace$2.Router }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FsContentComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsContentComponent, selector: "fs-content", ngImport: i0__namespace, template: "<fs-content-renderer *ngIf=\"contentPage\" [contentPage]=\"contentPage\"></fs-content-renderer>", styles: [""], components: [{ type: ContentRendererComponent, selector: "fs-content-renderer", inputs: ["contentPage"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'fs-content',
+                        templateUrl: './content.component.html',
+                        styleUrls: ['./content.component.scss'],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_CONTENT_CONFIG]
+                        }] }, { type: i1__namespace$1.Title }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace$2.Router }, { type: i0__namespace.ElementRef }];
+        } });
+
+    var FsContentModule = /** @class */ (function () {
+        function FsContentModule() {
+        }
+        return FsContentModule;
+    }());
+    FsContentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FsContentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, declarations: [FsContentComponent,
+            ContentRendererComponent], imports: [i10.CommonModule,
+            htmlEditor.FsHtmlEditorModule], exports: [FsContentComponent] });
+    FsContentModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, imports: [[
+                i10.CommonModule,
+                htmlEditor.FsHtmlEditorModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsContentModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i10.CommonModule,
+                            htmlEditor.FsHtmlEditorModule,
+                        ],
+                        exports: [
+                            FsContentComponent,
+                        ],
+                        declarations: [
+                            FsContentComponent,
+                            ContentRendererComponent,
+                        ],
+                    }]
+            }] });
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.FS_CONTENT_CONFIG = FS_CONTENT_CONFIG;
+    exports.FsContentComponent = FsContentComponent;
+    exports.FsContentLayoutsComponent = FsContentLayoutsComponent;
+    exports.FsContentLayoutsModule = FsContentLayoutsModule;
+    exports.FsContentModule = FsContentModule;
+    exports.FsContentPagesComponent = FsContentPagesComponent;
+    exports.FsContentPagesModule = FsContentPagesModule;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=firestitch-content.umd.js.map