@firestitch/system 12.0.0 → 12.1.2

package/fesm2015/firestitch-system.js

@@ -1,1299 +1,1262 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, Input, ViewChild, Pipe, EventEmitter, Output, NgModule } from '@angular/core';
-import * as _snakecaseKeys from 'snakecase-keys';
-import * as _camelcaseKeys from 'camelcase-keys';
-import { isArray, groupBy, reduce } from 'lodash-es';
-import * as i7$1 from '@angular/common';
+import { InjectionToken, Component, ChangeDetectionStrategy, Input, Inject, ViewChild, Pipe, Injectable, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i9 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i16 from '@angular/forms';
+import * as i17 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i8 from '@angular/material/form-field';
+import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$3 from '@angular/material/expansion';
+import * as i4$3 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i15 from '@angular/material/input';
+import * as i16 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i9 from '@angular/material/select';
+import * as i8 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i12 from '@angular/material/tooltip';
+import * as i11 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i7 from '@angular/material/icon';
+import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5$2 from '@firestitch/date';
+import * as i4$2 from '@firestitch/date';
 import { parse, FsDateModule } from '@firestitch/date';
-import * as i11$1 from '@firestitch/datepicker';
+import * as i10$1 from '@firestitch/datepicker';
 import { FsDatePickerModule } from '@firestitch/datepicker';
-import * as i5$1 from '@firestitch/skeleton';
+import * as i5 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i4$1 from '@firestitch/list';
+import * as i3$1 from '@firestitch/list';
 import { FsListComponent, FsListModule } from '@firestitch/list';
 import * as i1$2 from '@firestitch/file-manager';
 import { FsFileManagerModule } from '@firestitch/file-manager';
-import * as i2$1 from '@firestitch/dialog';
+import * as i2$2 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
-import * as i2 from '@firestitch/label';
+import * as i2$1 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i12$1 from '@firestitch/file';
+import * as i12 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
-import * as i5 from '@firestitch/menu';
+import * as i4$1 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
+import * as i11$1 from '@firestitch/colorpicker';
+import { FsColorPickerModule } from '@firestitch/colorpicker';
 import * as i1 from '@firestitch/message';
-import * as i3 from '@firestitch/build';
+import * as i2 from '@firestitch/build';
 import { takeUntil, map, tap } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { differenceInMinutes } from 'date-fns';
-import * as i6 from '@angular/flex-layout/flex';
-import * as i11 from '@angular/flex-layout/extended';
+import * as i6$1 from '@angular/flex-layout/flex';
+import * as i10 from '@angular/flex-layout/extended';
 import { ItemType } from '@firestitch/filter';
-import * as i3$1 from '@angular/material/tabs';
+import * as i3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { SelectionActionType } from '@firestitch/selection';
-import * as i4$2 from '@firestitch/prompt';
-import * as i3$2 from 'ngx-clipboard';
+import * as i3$2 from '@firestitch/prompt';
+import { groupBy, reduce } from 'lodash-es';
+import * as i2$3 from 'ngx-clipboard';
 import { ClipboardModule } from 'ngx-clipboard';
-import * as i10 from '@angular/material/core';
+import * as i9$1 from '@angular/material/core';
 
 const FS_SYSTEM_CONFIG = new InjectionToken('fs-system-config');
 
-const snakecaseKeys = _snakecaseKeys;
-const camelcaseKeys = _camelcaseKeys;
-class SystemService {
-    constructor(_config) {
-        this._config = _config;
-    }
-    input(data) {
-        if (isArray(data)) {
-            return data.map(item => {
-                return this._config.case === 'snake' ? camelcaseKeys(item, { deep: true }) : item;
-            });
-        }
-        else {
-            return this._config.case === 'snake' ? camelcaseKeys(data, { deep: true }) : data;
-        }
-    }
-    output(data) {
-        if (isArray(data)) {
-            return data.map(item => {
-                return this._config.case === 'snake' ? snakecaseKeys(item, { deep: true }) : item;
-            });
-        }
-        else {
-            return this._config.case === 'snake' ? snakecaseKeys(data, { deep: true }) : data;
-        }
-    }
-}
-SystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SystemService, deps: [{ token: FS_SYSTEM_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-SystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SystemService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SystemService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_SYSTEM_CONFIG]
-                }] }]; } });
-
-class DashboardComponent {
-    constructor(_message, _cdRef, _systemService, _buildService) {
-        this._message = _message;
-        this._cdRef = _cdRef;
-        this._systemService = _systemService;
-        this._buildService = _buildService;
-        this.buttonActions = [];
-        this.menuActions = [];
-        this._destroy$ = new Subject();
-        this.actions = [];
-    }
-    ngOnInit() {
-        this._load();
-        this.buttonActions = this.actions.filter(item => { return !item.menu; });
-        this.menuActions = this.actions.filter(item => { return item.menu; });
-        this.build = this._buildService.build;
-        this._buildService.buildChange$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe((build) => {
-            this.build = build;
-            this._cdRef.markForCheck();
-        });
-    }
-    _load() {
-        this.load()
-            .subscribe((dashboard) => {
-            this.dashboard = this._systemService.input(dashboard);
-            this.dashboard.cronRanAttention = !dashboard.cronRan ||
-                differenceInMinutes(new Date(), new Date(dashboard.cronRan)) > 15;
-            this._cdRef.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    actionClick(action) {
-        action.click();
-    }
-    initClick() {
-        this.init()
-            .subscribe(() => {
-            this._message.success('Successfully initialized the system');
-        });
-    }
-    upgradeClick() {
-        this.upgrade()
-            .subscribe(() => {
-            this._load();
-            this._message.success('Successfully upgraded the system');
-        });
-    }
-}
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: SystemService }, { token: i3.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\n\n  <div class=\"h2-container\">\n\n    <div class=\"actions\">\n        <h2>Actions</h2>\n        <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxLayout.xs=\"column\">\n          <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\n          <button mat-raised-button (click)=\"initClick()\">Init System</button>\n\n          <button\n            *ngFor=\"let action of buttonActions\"\n            mat-raised-button\n            (click)=\"actionClick(action)\">\n            {{action.label}}\n          </button>\n\n          <ng-container *ngIf=\"menuActions.length\">\n\n            <fs-menu buttonClass=\"mat-raised-button menu-button\">\n              <ng-template\n                *ngFor=\"let action of menuActions\"\n                fs-menu-item\n                (click)=\"actionClick(action)\">\n                {{action.label}}\n              </ng-template>\n            </fs-menu>\n\n\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n\n    <div\n      fxLayout=\"row wrap\"\n      fxLayout.xs=\"column\"\n      fxLayoutGap.xs=\"0px\"\n      fxLayoutAlign=\"start start\"\n      fxLayoutGap=\"50px\">\n\n      <div>\n        <h2>Server</h2>\n\n        <fs-label-field>\n          <fs-label>Date/Time</fs-label>\n          {{dashboard.serverTime | fsDateFormat: 'date-time'}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Timezone</fs-label>\n          {{dashboard.serverTimezone}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Hostname</fs-label>\n          {{dashboard.serverHostname}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Directory</fs-label>\n          {{dashboard.appDirectory}}\n        </fs-label-field>\n      </div>\n\n      <div>\n        <h2>System</h2>\n        <fs-label-field>\n          <fs-label>Mode</fs-label>\n          {{dashboard.appMode}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Notification Recipients</fs-label>\n          {{dashboard.notifyRecipients.join(', ')}}\n        </fs-label-field>\n      </div>\n\n      <div>\n        <h2>Database</h2>\n\n        <fs-label-field>\n          <fs-label>Name</fs-label>\n          {{dashboard.databaseName}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Date/Time</fs-label>\n          {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Timezone</fs-label>\n          {{dashboard.databaseTimezone}}\n        </fs-label-field>\n      </div>\n\n      <div *ngIf=\"build || dashboard.upgrades.length\">\n        <h2>Build</h2>\n\n        <ng-container *ngIf=\"build\">\n          <fs-label-field>\n            <fs-label>Version</fs-label>\n            {{build.version}}\n          </fs-label-field>\n\n          <fs-label-field>\n            <fs-label>Date</fs-label>\n            {{ build.date | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        </ng-container>\n\n        <fs-label-field *ngIf=\"dashboard.upgrades.length\">\n          <fs-label>Pending Upgrades</fs-label>\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\n            {{dashboard.upgrades.length}}\n            <mat-icon\n                [matTooltip]=\"dashboard.upgrades.join('\\n')\"\n                matTooltipClass=\"tooltip-pending-upgrades\"\n                >\n              warning\n            </mat-icon>\n          </span>\n        </fs-label-field>\n      </div>\n\n      <div>\n        <h2>Cron</h2>\n\n        <fs-label-field>\n          <fs-label>Last Ran</fs-label>\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\n            <span *ngIf=\"!dashboard.cronRan\">Never</span>\n            <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\n            <mat-icon>warning</mat-icon>\n          </span>\n        </fs-label-field>\n      </div>\n  </div>\n</div>\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i6.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: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i6.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i11.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "fsDateFormat": i5$2.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-dashboard',
-                    templateUrl: 'dashboard.component.html',
-                    styleUrls: ['dashboard.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: SystemService }, { type: i3.FsBuildService }]; }, propDecorators: { init: [{
-                type: Input
-            }], upgrade: [{
-                type: Input
-            }], load: [{
-                type: Input
-            }], actions: [{
-                type: Input
+class DashboardComponent {
+    constructor(_message, _cdRef, _buildService) {
+        this._message = _message;
+        this._cdRef = _cdRef;
+        this._buildService = _buildService;
+        this.buttonActions = [];
+        this.menuActions = [];
+        this._destroy$ = new Subject();
+        this.actions = [];
+    }
+    ngOnInit() {
+        this._load();
+        this.buttonActions = this.actions.filter(item => { return !item.menu; });
+        this.menuActions = this.actions.filter(item => { return item.menu; });
+        this.build = this._buildService.build;
+        this._buildService.buildChange$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe((build) => {
+            this.build = build;
+            this._cdRef.markForCheck();
+        });
+    }
+    _load() {
+        this.load()
+            .subscribe((dashboard) => {
+            this.dashboard = dashboard;
+            this.dashboard.cronRanAttention = !dashboard.cronRan ||
+                differenceInMinutes(new Date(), new Date(dashboard.cronRan)) > 15;
+            this._cdRef.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    actionClick(action) {
+        action.click();
+    }
+    initClick() {
+        this.init()
+            .subscribe(() => {
+            this._message.success('Successfully initialized the system');
+        });
+    }
+    upgradeClick() {
+        this.upgrade()
+            .subscribe(() => {
+            this._load();
+            this._message.success('Successfully upgraded the system');
+        });
+    }
+}
+DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, deps: [{ token: i1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\r\n\r\n  <div class=\"h2-container\">\r\n\r\n    <div class=\"actions\">\r\n        <h2>Actions</h2>\r\n        <div fxLayout=\"row\" fxLayoutGap=\"5px\" fxLayout.xs=\"column\">\r\n          <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n          <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n\r\n          <button\r\n            *ngFor=\"let action of buttonActions\"\r\n            mat-raised-button\r\n            (click)=\"actionClick(action)\">\r\n            {{action.label}}\r\n          </button>\r\n\r\n          <ng-container *ngIf=\"menuActions.length\">\r\n\r\n            <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n              <ng-template\r\n                *ngFor=\"let action of menuActions\"\r\n                fs-menu-item\r\n                (click)=\"actionClick(action)\">\r\n                {{action.label}}\r\n              </ng-template>\r\n            </fs-menu>\r\n\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      fxLayout=\"row wrap\"\r\n      fxLayout.xs=\"column\"\r\n      fxLayoutGap.xs=\"0px\"\r\n      fxLayoutAlign=\"start start\"\r\n      fxLayoutGap=\"50px\">\r\n\r\n      <div>\r\n        <h2>Server</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.serverTimezone}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Hostname</fs-label>\r\n          {{dashboard.serverHostname}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Directory</fs-label>\r\n          {{dashboard.appDirectory}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>System</h2>\r\n        <fs-label-field>\r\n          <fs-label>Mode</fs-label>\r\n          {{dashboard.appMode}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Notification Recipients</fs-label>\r\n          {{dashboard.notifyRecipients.join(', ')}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Database</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Name</fs-label>\r\n          {{dashboard.databaseName}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Date/Time</fs-label>\r\n          {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Timezone</fs-label>\r\n          {{dashboard.databaseTimezone}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div *ngIf=\"build || dashboard.upgrades.length\">\r\n        <h2>Build</h2>\r\n\r\n        <ng-container *ngIf=\"build\">\r\n          <fs-label-field>\r\n            <fs-label>Version</fs-label>\r\n            {{build.version}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>Date</fs-label>\r\n            {{ build.date | fsDateFormat: 'date-time' }}\r\n          </fs-label-field>\r\n        </ng-container>\r\n\r\n        <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n          <fs-label>Pending Upgrades</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n            {{dashboard.upgrades.length}}\r\n            <mat-icon\r\n                [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n                matTooltipClass=\"tooltip-pending-upgrades\"\r\n                >\r\n              warning\r\n            </mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div>\r\n        <h2>Cron</h2>\r\n\r\n        <fs-label-field>\r\n          <fs-label>Last Ran</fs-label>\r\n          <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n            <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n            <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n            <mat-icon>warning</mat-icon>\r\n          </span>\r\n        </fs-label-field>\r\n      </div>\r\n  </div>\r\n</div>\r\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass"], outputs: ["opened", "closed"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i6$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: i6$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]", inputs: ["fsClass", "class", "id", "label", "hidden", "groupHidden", "dismissAfterClick", "link", "target", "queryParams"], outputs: ["click"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-dashboard',
+                    templateUrl: 'dashboard.component.html',
+                    styleUrls: ['dashboard.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2.FsBuildService }]; }, propDecorators: { init: [{
+                type: Input
+            }], upgrade: [{
+                type: Input
+            }], load: [{
+                type: Input
+            }], actions: [{
+                type: Input
             }] } });
 
-function indexNameValue(arry) {
-    const obj = {};
-    arry.forEach(item => {
-        obj[item.value] = item.name;
-    });
-    return obj;
+function indexNameValue(arry) {
+    const obj = {};
+    arry.forEach(item => {
+        obj[item.value] = item.name;
+    });
+    return obj;
 }
 
-var CronState;
-(function (CronState) {
-    CronState["Running"] = "running";
-    CronState["Idle"] = "idle";
-    CronState["Failed"] = "failed";
-    CronState["Queued"] = "queued";
-    CronState["Disabled"] = "disabled";
+var CronState;
+(function (CronState) {
+    CronState["Running"] = "running";
+    CronState["Idle"] = "idle";
+    CronState["Failed"] = "failed";
+    CronState["Queued"] = "queued";
+    CronState["Disabled"] = "disabled";
 })(CronState || (CronState = {}));
 
-var SettingInterfaceType;
-(function (SettingInterfaceType) {
-    SettingInterfaceType["RadioButton"] = "R";
-    SettingInterfaceType["InputBox"] = "I";
-    SettingInterfaceType["Textarea"] = "T";
-    SettingInterfaceType["DropDown"] = "D";
-    SettingInterfaceType["Date"] = "A";
-    SettingInterfaceType["File"] = "F";
-    SettingInterfaceType["Static"] = "S";
-    SettingInterfaceType["Password"] = "P";
-    SettingInterfaceType["Time"] = "M";
+var SettingInterfaceType;
+(function (SettingInterfaceType) {
+    SettingInterfaceType["RadioButton"] = "R";
+    SettingInterfaceType["InputBox"] = "I";
+    SettingInterfaceType["Textarea"] = "T";
+    SettingInterfaceType["Select"] = "D";
+    SettingInterfaceType["SelectMultiple"] = "W";
+    SettingInterfaceType["Date"] = "A";
+    SettingInterfaceType["File"] = "F";
+    SettingInterfaceType["Static"] = "S";
+    SettingInterfaceType["Password"] = "P";
+    SettingInterfaceType["Time"] = "M";
+    SettingInterfaceType["None"] = "N";
+    SettingInterfaceType["Color"] = "C";
 })(SettingInterfaceType || (SettingInterfaceType = {}));
 
-var ApiLogState;
-(function (ApiLogState) {
-    ApiLogState["Success"] = "success";
-    ApiLogState["Failed"] = "failed";
-    ApiLogState["Deleted"] = "deleted";
+var ApiLogState;
+(function (ApiLogState) {
+    ApiLogState["Success"] = "success";
+    ApiLogState["Failed"] = "failed";
+    ApiLogState["Deleted"] = "deleted";
 })(ApiLogState || (ApiLogState = {}));
 
-var ProcessState;
-(function (ProcessState) {
-    ProcessState["Queued"] = "Q";
-    ProcessState["Running"] = "R";
-    ProcessState["Completed"] = "C";
-    ProcessState["Killed"] = "K";
-    ProcessState["Deleted"] = "D";
-    ProcessState["Failed"] = "F";
+var ProcessState;
+(function (ProcessState) {
+    ProcessState["Queued"] = "Q";
+    ProcessState["Running"] = "R";
+    ProcessState["Completed"] = "C";
+    ProcessState["Killed"] = "K";
+    ProcessState["Deleted"] = "D";
+    ProcessState["Failed"] = "F";
 })(ProcessState || (ProcessState = {}));
 
-var CronLogState;
-(function (CronLogState) {
-    CronLogState["Message"] = "message";
-    CronLogState["Disabled"] = "disabled";
-    CronLogState["Started"] = "started";
-    CronLogState["Running"] = "running";
-    CronLogState["Completed"] = "completed";
-    CronLogState["Failed"] = "failed";
-    CronLogState["Killed"] = "killed";
-    CronLogState["Queued"] = "queued";
-    CronLogState["Reset"] = "reset";
-    CronLogState["Stagnant"] = "stagnant";
-    CronLogState["LongRunning"] = "long_running";
+var CronLogState;
+(function (CronLogState) {
+    CronLogState["Message"] = "message";
+    CronLogState["Disabled"] = "disabled";
+    CronLogState["Started"] = "started";
+    CronLogState["Running"] = "running";
+    CronLogState["Completed"] = "completed";
+    CronLogState["Failed"] = "failed";
+    CronLogState["Killed"] = "killed";
+    CronLogState["Queued"] = "queued";
+    CronLogState["Reset"] = "reset";
+    CronLogState["Stagnant"] = "stagnant";
+    CronLogState["LongRunning"] = "long_running";
 })(CronLogState || (CronLogState = {}));
 
-const CronLogStates = [
-    { name: 'Message', value: CronLogState.Message, color: '#29B7FF' },
-    { name: 'Disabled', value: CronLogState.Disabled, color: '#29B7FF' },
-    { name: 'Started', value: CronLogState.Started, color: '#34BD43' },
-    { name: 'Running', value: CronLogState.Running, color: '#34BD43' },
-    { name: 'Completed', value: CronLogState.Completed, color: '#34BD43' },
-    { name: 'Failed', value: CronLogState.Failed, color: '#FA7567' },
-    { name: 'Killed', value: CronLogState.Killed, color: '#29B7FF' },
-    { name: 'Queued', value: CronLogState.Queued, color: '#29B7FF' },
-    { name: 'Reset', value: CronLogState.Reset, color: '#29B7FF' },
-    { name: 'Stagnant', value: CronLogState.Stagnant, color: '#FA7567' },
-    { name: 'Long Running', value: CronLogState.LongRunning, color: '#FA7567' },
+const CronLogStates = [
+    { name: 'Message', value: CronLogState.Message, color: '#29B7FF' },
+    { name: 'Disabled', value: CronLogState.Disabled, color: '#29B7FF' },
+    { name: 'Started', value: CronLogState.Started, color: '#34BD43' },
+    { name: 'Running', value: CronLogState.Running, color: '#34BD43' },
+    { name: 'Completed', value: CronLogState.Completed, color: '#34BD43' },
+    { name: 'Failed', value: CronLogState.Failed, color: '#FA7567' },
+    { name: 'Killed', value: CronLogState.Killed, color: '#29B7FF' },
+    { name: 'Queued', value: CronLogState.Queued, color: '#29B7FF' },
+    { name: 'Reset', value: CronLogState.Reset, color: '#29B7FF' },
+    { name: 'Stagnant', value: CronLogState.Stagnant, color: '#FA7567' },
+    { name: 'Long Running', value: CronLogState.LongRunning, color: '#FA7567' },
 ];
 
-const CronStates = [
-    { name: 'Running', value: CronState.Running },
-    { name: 'Idle', value: CronState.Idle },
-    { name: 'Failed', value: CronState.Failed },
-    { name: 'Queued', value: CronState.Queued },
-    { name: 'Disabled', value: CronState.Disabled }
+const CronStates = [
+    { name: 'Running', value: CronState.Running },
+    { name: 'Idle', value: CronState.Idle },
+    { name: 'Failed', value: CronState.Failed },
+    { name: 'Queued', value: CronState.Queued },
+    { name: 'Disabled', value: CronState.Disabled }
 ];
 
-const ApiLogStates = [
-    { name: 'Success', value: ApiLogState.Success },
-    { name: 'Failed', value: ApiLogState.Failed },
-    { name: 'Deleted', value: ApiLogState.Deleted }
+const ApiLogStates = [
+    { name: 'Success', value: ApiLogState.Success },
+    { name: 'Failed', value: ApiLogState.Failed },
+    { name: 'Deleted', value: ApiLogState.Deleted }
 ];
 
-const ProcessStates = [
-    { name: 'Queued', value: ProcessState.Queued },
-    { name: 'Running', value: ProcessState.Running },
-    { name: 'Completed', value: ProcessState.Completed },
-    { name: 'Killed', value: ProcessState.Killed },
-    { name: 'Failed', value: ProcessState.Failed },
-    { name: 'Deleted', value: ProcessState.Deleted }
+const ProcessStates = [
+    { name: 'Queued', value: ProcessState.Queued },
+    { name: 'Running', value: ProcessState.Running },
+    { name: 'Completed', value: ProcessState.Completed },
+    { name: 'Killed', value: ProcessState.Killed },
+    { name: 'Failed', value: ProcessState.Failed },
+    { name: 'Deleted', value: ProcessState.Deleted }
 ];
 
-class CronLogComponent {
-    constructor(_data) {
-        this._data = _data;
-        this.CronLogStates = indexNameValue(CronLogStates);
-        this.CronLogStateColors = {};
-    }
-    ngOnInit() {
-        this.cronLog = this._data.cronLog;
-        this.CronLogStateColors = CronLogStates
-            .reduce((accum, cronLogState) => {
-            accum[cronLogState.value] = cronLogState.color;
-            return accum;
-        }, {});
-    }
-}
-CronLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CronLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\n  <div mat-dialog-title>Cron Log</div>\n  <mat-dialog-content>\n    <div class=\"row\">\n      <fs-label-field>\n        <fs-label>\n          Status\n        </fs-label>\n        <div [ngStyle]=\"{ color: CronLogStateColors[cronLog.state]}\">\n          {{CronLogStates[cronLog.state] || cronLog.state}}\n        </div>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        <fs-date-ago [date]=\"cronLog.createDate\"></fs-date-ago>\n      </fs-label-field>\n    </div>\n  \n    <fs-label-field *ngIf=\"cronLog.message\">\n      <fs-label>\n        Message\n      </fs-label>\n      <div class=\"message\">\n        {{cronLog.message}}\n      </div>\n    </fs-label-field>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"], components: [{ type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i11.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './cron-log.component.html',
-                    styleUrls: ['./cron-log.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class CronLogComponent {
+    constructor(_data) {
+        this._data = _data;
+        this.CronLogStates = indexNameValue(CronLogStates);
+        this.CronLogStateColors = {};
+    }
+    ngOnInit() {
+        this.cronLog = this._data.cronLog;
+        this.CronLogStateColors = CronLogStates
+            .reduce((accum, cronLogState) => {
+            accum[cronLogState.value] = cronLogState.color;
+            return accum;
+        }, {});
+    }
+}
+CronLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+CronLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\r\n  <div mat-dialog-title>Cron Log</div>\r\n  <mat-dialog-content>\r\n    <div class=\"row\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Status\r\n        </fs-label>\r\n        <div [ngStyle]=\"{ color: CronLogStateColors[cronLog.state]}\">\r\n          {{CronLogStates[cronLog.state] || cronLog.state}}\r\n        </div>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        <fs-date-ago [date]=\"cronLog.createDate\"></fs-date-ago>\r\n      </fs-label-field>\r\n    </div>\r\n  \r\n    <fs-label-field *ngIf=\"cronLog.message\">\r\n      <fs-label>\r\n        Message\r\n      </fs-label>\r\n      <div class=\"message\">\r\n        {{cronLog.message}}\r\n      </div>\r\n    </fs-label-field>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"], components: [{ type: i2$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronLogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './cron-log.component.html',
+                    styleUrls: ['./cron-log.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class CronComponent {
-    constructor(_data, _dialog, _cdRef) {
-        this._data = _data;
-        this._dialog = _dialog;
-        this._cdRef = _cdRef;
-        this.tabIndex = 0;
-        this.CronStates = indexNameValue(CronStates);
-        this.CronLogStates = indexNameValue(CronLogStates);
-        this.CronLogStateColors = {};
-    }
-    ngOnInit() {
-        this.load();
-        this.CronLogStateColors = CronLogStates
-            .reduce((accum, cronLogState) => {
-            accum[cronLogState.value] = cronLogState.color;
-            return accum;
-        }, {});
-    }
-    cronLogOpen(cronLog) {
-        this._dialog.open(CronLogComponent, {
-            data: {
-                cronLog,
-            },
-            width: '85%'
-        });
-    }
-    cronActionClick(cronAction) {
-        cronAction.action(this.cron)
-            .subscribe(() => {
-            this.load();
-        });
-    }
-    selectedIndexChange(index) {
-        this.tabIndex = index;
-    }
-    load() {
-        this._data.loadCron(this._data.cron)
-            .subscribe((cron) => {
-            this.cron = Object.assign(Object.assign({}, this._data.cron), cron);
-            if (this._data.loadCronLogs) {
-                this.config = {
-                    filters: [
-                        {
-                            type: ItemType.Select,
-                            name: 'state',
-                            label: 'Status',
-                            values: [
-                                { name: 'All', value: null },
-                                ...CronLogStates,
-                            ],
-                        },
-                        {
-                            type: ItemType.DateRange,
-                            name: 'date',
-                            label: ['From Date', 'To Date'],
-                        },
-                    ],
-                    fetch: (query) => {
-                        query = Object.assign(Object.assign({}, query), { cronId: this.cron.id });
-                        return this._data.loadCronLogs(query);
-                    },
-                };
-            }
-            this.cronActions = this._data.cronActions
-                .filter((cronLogAction) => {
-                return cronLogAction.show(this.cron);
-            });
-            this._cdRef.markForCheck();
-        });
-    }
-}
-CronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\n  <h1 mat-dialog-title>\n    Cron\n    <div class=\"small\">{{cron.name}}</div>\n  </h1>\n  <mat-dialog-content>\n    <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\n      <mat-tab label=\"Overview\">\n        <div class=\"row\">\n          <fs-label-field>\n            <fs-label>\n              Status\n            </fs-label>\n            {{CronStates[cron.state]}}\n          </fs-label-field>\n\n          <fs-label-field *ngIf=\"cron.cronSetting\">\n            <fs-label>\n              Run Frequency\n            </fs-label>\n            {{cron.cronSetting.summary}}\n          </fs-label-field>\n\n          <fs-label-field>\n            <fs-label>\n              Last Ran\n            </fs-label>\n            <ng-container *ngIf=\"cron.duration===null; else lastRan\">\n              Never\n            </ng-container>\n            <ng-template #lastRan>\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\n              <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\n            </ng-template>\n          </fs-label-field>\n        </div>\n\n        <fs-label-field *ngIf=\"cron.message\">\n          <fs-label>\n            Last Message\n          </fs-label>\n          <div class=\"message\">{{cron.message}}</div>\n        </fs-label-field>\n      </mat-tab>\n      <mat-tab label=\"Logs\" *ngIf=\"config\">\n        <ng-template matTabContent>\n          <fs-list [config]=\"config\">\n            <fs-list-column name=\"state\" title=\"Status\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <a \n                    (click)=\"cronLogOpen(row)\"\n                    [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\n                  {{CronLogStates[row.state] || row.state}}\n                </a>\n              </ng-template>\n            </fs-list-column>\n            \n            <fs-list-column title=\"Message\" class=\"col-message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <div class=\"message\">{{row.message}}</div>\n              </ng-template>\n            </fs-list-column>\n\n            <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n              </ng-template>\n            </fs-list-column>\n          </fs-list> \n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n\n  </mat-dialog-content>\n  <mat-dialog-actions>   \n    <button \n        mat-button \n        [mat-dialog-close]=\"true\" \n        color=\"primary\">\n      Done\n    </button>\n    <ng-container *ngIf=\"tabIndex === 0\">\n      <button   \n          *ngFor=\"let cronAction of cronActions\"\n          mat-button \n          (click)=\"cronActionClick(cronAction)\">\n        {{cronAction.label}}\n      </button>  \n    </ng-container>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTabContent, selector: "[matTabContent]" }, { type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i11.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i5$2.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './cron.component.html',
-                    styleUrls: ['./cron.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class CronComponent {
+    constructor(_data, _dialog, _cdRef) {
+        this._data = _data;
+        this._dialog = _dialog;
+        this._cdRef = _cdRef;
+        this.tabIndex = 0;
+        this.CronStates = indexNameValue(CronStates);
+        this.CronLogStates = indexNameValue(CronLogStates);
+        this.CronLogStateColors = {};
+    }
+    ngOnInit() {
+        this.load();
+        this.CronLogStateColors = CronLogStates
+            .reduce((accum, cronLogState) => {
+            accum[cronLogState.value] = cronLogState.color;
+            return accum;
+        }, {});
+    }
+    cronLogOpen(cronLog) {
+        this._dialog.open(CronLogComponent, {
+            data: {
+                cronLog,
+            },
+            width: '85%'
+        });
+    }
+    cronActionClick(cronAction) {
+        cronAction.action(this.cron)
+            .subscribe(() => {
+            this.load();
+        });
+    }
+    selectedIndexChange(index) {
+        this.tabIndex = index;
+    }
+    load() {
+        this._data.loadCron(this._data.cron)
+            .subscribe((cron) => {
+            this.cron = Object.assign(Object.assign({}, this._data.cron), cron);
+            if (this._data.loadCronLogs) {
+                this.config = {
+                    filters: [
+                        {
+                            type: ItemType.Select,
+                            name: 'state',
+                            label: 'Status',
+                            values: [
+                                { name: 'All', value: null },
+                                ...CronLogStates,
+                            ],
+                        },
+                        {
+                            type: ItemType.DateRange,
+                            name: 'date',
+                            label: ['From Date', 'To Date'],
+                        },
+                    ],
+                    fetch: (query) => {
+                        query = Object.assign(Object.assign({}, query), { cronId: this.cron.id });
+                        return this._data.loadCronLogs(query);
+                    },
+                };
+            }
+            this.cronActions = this._data.cronActions
+                .filter((cronLogAction) => {
+                return cronLogAction.show(this.cron);
+            });
+            this._cdRef.markForCheck();
+        });
+    }
+}
+CronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n  <h1 mat-dialog-title>\r\n    Cron\r\n    <div class=\"small\">{{cron.name}}</div>\r\n  </h1>\r\n  <mat-dialog-content>\r\n    <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n      <mat-tab label=\"Overview\">\r\n        <div class=\"row\">\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Status\r\n            </fs-label>\r\n            {{CronStates[cron.state]}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field *ngIf=\"cron.cronSetting\">\r\n            <fs-label>\r\n              Run Frequency\r\n            </fs-label>\r\n            {{cron.cronSetting.summary}}\r\n          </fs-label-field>\r\n\r\n          <fs-label-field>\r\n            <fs-label>\r\n              Last Ran\r\n            </fs-label>\r\n            <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n              Never\r\n            </ng-container>\r\n            <ng-template #lastRan>\r\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n              <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n            </ng-template>\r\n          </fs-label-field>\r\n        </div>\r\n\r\n        <fs-label-field *ngIf=\"cron.message\">\r\n          <fs-label>\r\n            Last Message\r\n          </fs-label>\r\n          <div class=\"message\">{{cron.message}}</div>\r\n        </fs-label-field>\r\n      </mat-tab>\r\n      <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n        <ng-template matTabContent>\r\n          <fs-list [config]=\"config\">\r\n            <fs-list-column name=\"state\" title=\"Status\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <a \r\n                    (click)=\"cronLogOpen(row)\"\r\n                    [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n                  {{CronLogStates[row.state] || row.state}}\r\n                </a>\r\n              </ng-template>\r\n            </fs-list-column>\r\n            \r\n            <fs-list-column title=\"Message\" class=\"col-message\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <div class=\"message\">{{row.message}}</div>\r\n              </ng-template>\r\n            </fs-list-column>\r\n\r\n            <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n              <ng-template fs-list-cell let-row=\"row\">\r\n                <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n              </ng-template>\r\n            </fs-list-column>\r\n          </fs-list> \r\n        </ng-template>\r\n      </mat-tab>\r\n    </mat-tab-group>\r\n\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>   \r\n    <button \r\n        mat-button \r\n        [mat-dialog-close]=\"true\" \r\n        color=\"primary\">\r\n      Done\r\n    </button>\r\n    <ng-container *ngIf=\"tabIndex === 0\">\r\n      <button   \r\n          *ngFor=\"let cronAction of cronActions\"\r\n          mat-button \r\n          (click)=\"cronActionClick(cronAction)\">\r\n        {{cronAction.label}}\r\n      </button>  \r\n    </ng-container>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby"], exportAs: ["matTab"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatTabContent, selector: "[matTabContent]" }, { type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './cron.component.html',
+                    styleUrls: ['./cron.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }, { type: i1$1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
 
-class CronsComponent {
-    constructor(_message, _systemService, _dialog) {
-        this._message = _message;
-        this._systemService = _systemService;
-        this._dialog = _dialog;
-        this.config = null;
-        this.cronStates = indexNameValue(CronStates);
-    }
-    ngOnInit() {
-        this._configList();
-    }
-    _configList() {
-        this.config = {
-            paging: false,
-            filters: [
-                {
-                    type: ItemType.Keyword,
-                    name: 'keyword',
-                    label: 'Search'
-                }
-            ],
-            rowActions: this.getCronActions()
-                .map((rowAction) => {
-                return Object.assign(Object.assign({}, rowAction), { click: (cron) => {
-                        rowAction.action(cron)
-                            .subscribe();
-                    } });
-            }),
-            fetch: query => {
-                query.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-                return this.loadCrons(query)
-                    .pipe(map((response) => ({ data: this._systemService.input(response) })));
-            },
-        };
-        if (this.bulk) {
-            this.config.selection = {
-                selectAll: false,
-                actions: [
-                    {
-                        type: SelectionActionType.Action,
-                        name: 'disable',
-                        label: 'Disable'
-                    },
-                    {
-                        type: SelectionActionType.Action,
-                        name: 'enable',
-                        label: 'Enable'
-                    },
-                ],
-                actionSelected: (action) => {
-                    return this.bulk(action.action.name, action.selected)
-                        .pipe(tap(() => {
-                        this.list.reload();
-                        this._message.success('Applied Changes');
-                    }));
-                },
-            };
-        }
-    }
-    open(cron) {
-        this._dialog.open(CronComponent, {
-            data: {
-                cron,
-                loadCronLogs: this.loadCronLogs,
-                loadCron: this.loadCron,
-                cronActions: this.getCronActions(),
-            },
-            width: '85%'
-        });
-    }
-    getCronActions() {
-        return [
-            {
-                action: (data) => {
-                    return this.queue(this._systemService.output(data))
-                        .pipe(tap(() => {
-                        this._message.success('Queued cron');
-                        this.list.reload();
-                    }));
-                },
-                label: 'Queue',
-                show: (cron) => {
-                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
-                },
-            },
-            {
-                action: (data) => {
-                    return this.run(this._systemService.output(data))
-                        .pipe(tap(() => {
-                        this._message.success('Cron ran');
-                        this.list.reload();
-                    }));
-                },
-                label: 'Run',
-                show: (cron) => {
-                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
-                },
-            },
-            {
-                action: (data) => {
-                    return this.enable(this._systemService.output(data))
-                        .pipe(tap(() => {
-                        this._message.success('Enabled cron');
-                        this.list.reload();
-                    }));
-                },
-                label: 'Enable',
-                show: (cron) => {
-                    return cron.state === CronState.Disabled;
-                },
-            },
-            {
-                action: (data) => {
-                    return this.disable(this._systemService.output(data))
-                        .pipe(tap(() => {
-                        this._message.success('Disabled cron');
-                        this.list.reload();
-                    }));
-                },
-                label: 'Disable',
-                show: (cron) => {
-                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
-                },
-            },
-            {
-                action: (data) => {
-                    return this.kill(this._systemService.output(data))
-                        .pipe(tap(() => {
-                        this._message.success('Killed cron');
-                        this.list.reload();
-                    }));
-                },
-                label: 'Kill',
-                show: (cron) => {
-                    return cron.state === CronState.Running;
-                },
-            },
-        ];
-    }
-}
-CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, deps: [{ token: i1.FsMessage }, { token: SystemService }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.name}}</a>\n      <div *ngIf=\"row.cronSetting\">\n        <small>{{row.cronSetting.summary}}</small>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Status</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{cronStates[row.state]}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Last Ran</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.duration===null; else lastRan\">\n        Never\n      </ng-container>\n      <ng-template #lastRan>\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        <div><small *ngIf=\"row.duration\">Duration: {{ row.duration | fsDateDuration }}</small></div>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i5$2.FsDateDurationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-crons',
-                    templateUrl: './crons.component.html',
-                    styleUrls: ['./crons.component.scss'],
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: SystemService }, { type: i1$1.MatDialog }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
-            }], enable: [{
-                type: Input
-            }], disable: [{
-                type: Input
-            }], kill: [{
-                type: Input
-            }], queue: [{
-                type: Input
-            }], run: [{
-                type: Input
-            }], loadCrons: [{
-                type: Input
-            }], loadCron: [{
-                type: Input
-            }], loadCronLogs: [{
-                type: Input
-            }], bulk: [{
-                type: Input
+class CronsComponent {
+    constructor(_message, _dialog) {
+        this._message = _message;
+        this._dialog = _dialog;
+        this.config = null;
+        this.cronStates = indexNameValue(CronStates);
+    }
+    ngOnInit() {
+        this._configList();
+    }
+    _configList() {
+        this.config = {
+            paging: false,
+            filters: [
+                {
+                    type: ItemType.Keyword,
+                    name: 'keyword',
+                    label: 'Search'
+                }
+            ],
+            rowActions: this.getCronActions()
+                .map((rowAction) => {
+                return Object.assign(Object.assign({}, rowAction), { click: (cron) => {
+                        rowAction.action(cron)
+                            .subscribe();
+                    } });
+            }),
+            fetch: query => {
+                query.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+                return this.loadCrons(query)
+                    .pipe(map((response) => ({ data: response })));
+            },
+        };
+        if (this.bulk) {
+            this.config.selection = {
+                selectAll: false,
+                actions: [
+                    {
+                        type: SelectionActionType.Action,
+                        name: 'disable',
+                        label: 'Disable'
+                    },
+                    {
+                        type: SelectionActionType.Action,
+                        name: 'enable',
+                        label: 'Enable'
+                    },
+                ],
+                actionSelected: (action) => {
+                    return this.bulk(action.action.name, action.selected)
+                        .pipe(tap(() => {
+                        this.list.reload();
+                        this._message.success('Applied Changes');
+                    }));
+                },
+            };
+        }
+    }
+    open(cron) {
+        this._dialog.open(CronComponent, {
+            data: {
+                cron,
+                loadCronLogs: this.loadCronLogs,
+                loadCron: this.loadCron,
+                cronActions: this.getCronActions(),
+            },
+            width: '85%'
+        });
+    }
+    getCronActions() {
+        return [
+            {
+                action: (data) => {
+                    return this.queue(data)
+                        .pipe(tap(() => {
+                        this._message.success('Queued cron');
+                        this.list.reload();
+                    }));
+                },
+                label: 'Queue',
+                show: (cron) => {
+                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
+                },
+            },
+            {
+                action: (data) => {
+                    return this.run(data)
+                        .pipe(tap(() => {
+                        this._message.success('Cron ran');
+                        this.list.reload();
+                    }));
+                },
+                label: 'Run',
+                show: (cron) => {
+                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
+                },
+            },
+            {
+                action: (data) => {
+                    return this.enable(data)
+                        .pipe(tap(() => {
+                        this._message.success('Enabled cron');
+                        this.list.reload();
+                    }));
+                },
+                label: 'Enable',
+                show: (cron) => {
+                    return cron.state === CronState.Disabled;
+                },
+            },
+            {
+                action: (data) => {
+                    return this.disable(data)
+                        .pipe(tap(() => {
+                        this._message.success('Disabled cron');
+                        this.list.reload();
+                    }));
+                },
+                label: 'Disable',
+                show: (cron) => {
+                    return cron.state === CronState.Idle || cron.state === CronState.Failed;
+                },
+            },
+            {
+                action: (data) => {
+                    return this.kill(data)
+                        .pipe(tap(() => {
+                        this._message.success('Killed cron');
+                        this.list.reload();
+                    }));
+                },
+                label: 'Kill',
+                show: (cron) => {
+                    return cron.state === CronState.Running;
+                },
+            },
+        ];
+    }
+}
+CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, deps: [{ token: i1.FsMessage }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.name}}</a>\r\n      <div *ngIf=\"row.cronSetting\">\r\n        <small>{{row.cronSetting.summary}}</small>\r\n      </div>\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{cronStates[row.state]}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Last Ran</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n        Never\r\n      </ng-container>\r\n      <ng-template #lastRan>\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n        <div><small *ngIf=\"row.duration\">Duration: {{ row.duration | fsDateDuration }}</small></div>\r\n      </ng-template>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CronsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-crons',
+                    templateUrl: './crons.component.html',
+                    styleUrls: ['./crons.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: i1$1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
+            }], enable: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], kill: [{
+                type: Input
+            }], queue: [{
+                type: Input
+            }], run: [{
+                type: Input
+            }], loadCrons: [{
+                type: Input
+            }], loadCron: [{
+                type: Input
+            }], loadCronLogs: [{
+                type: Input
+            }], bulk: [{
+                type: Input
             }] } });
 
-class KeyNameValuePipe {
-    transform(values) {
-        return Object.keys(values).map(key => {
-            return { value: key, name: values[key] };
-        });
-    }
-}
-KeyNameValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-KeyNameValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, name: "keyNameValue" });
-KeyNameValuePipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'keyNameValue'
-                }]
-        }, {
-            type: Injectable
+class KeyNameValuePipe {
+    transform(values) {
+        return Object.keys(values).map((key) => {
+            return { value: key, name: values[key] };
+        });
+    }
+}
+KeyNameValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+KeyNameValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, name: "keyNameValue" });
+KeyNameValuePipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KeyNameValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'keyNameValue'
+                }]
+        }, {
+            type: Injectable
         }] });
 
-class SettingsComponent {
-    constructor(_message, _systemService, _clipboardService, _prompt, _cdRef) {
-        this._message = _message;
-        this._systemService = _systemService;
-        this._clipboardService = _clipboardService;
-        this._prompt = _prompt;
-        this._cdRef = _cdRef;
-        this.fileRemove = new EventEmitter();
-        this.fileSelect = new EventEmitter();
-        this.groupedSettings = [];
-        this.groups = [];
-        this.SettingInterfaceType = SettingInterfaceType;
-    }
-    ngOnInit() {
-        this.loadSettings()
-            .subscribe((settings) => {
-            settings = this._systemService.input(settings);
-            settings = settings.map((setting) => {
-                switch (setting.interfaceType) {
-                    case SettingInterfaceType.Date:
-                    case SettingInterfaceType.Time:
-                        setting.value = parse(setting.value);
-                        break;
-                }
-                return setting;
-            });
-            this.groupedSettings = groupBy(settings, (item) => {
-                return item.group;
-            });
-            this.groups = Object.keys(this.groupedSettings);
-            this._cdRef.markForCheck();
-        });
-    }
-    export(event, settings) {
-        event.stopPropagation();
-        const data = settings.map((setting) => {
-            return {
-                name: setting.name,
-                value: setting.value,
-                group: setting.group,
-            };
-        });
-        this._clipboardService.copy(JSON.stringify(data));
-        this._message.success('Copied to clipboard');
-    }
-    import(event, group) {
-        event.stopPropagation();
-        this._prompt.input({
-            label: 'JSON Import',
-            title: 'Import Settings',
-            commitLabel: 'Import',
-            required: true,
-        }).subscribe((value) => {
-            if (value) {
-                try {
-                    const settings = this.groupedSettings[group];
-                    const data = JSON.parse(value);
-                    data.forEach((item) => {
-                        const setting = settings.find((s) => {
-                            return item.name === s.name;
-                        });
-                        if (setting) {
-                            Object.assign(setting, item);
-                        }
-                    });
-                    this._cdRef.markForCheck();
-                }
-                catch (e) {
-                    this._message.error(e);
-                }
-            }
-        });
-    }
-    saveGroup(group) {
-        const settings = this.groupedSettings[group];
-        const values = reduce(settings, (result, value, key) => {
-            return (result[value.name] = value.value, result);
-        }, {});
-        this.save(group, values)
-            .subscribe(() => {
-            this._message.success('Changes Saved');
-        });
-    }
-}
-SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.FsMessage }, { token: SystemService }, { token: i3$2.ClipboardService }, { token: i4$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\n<mat-accordion>\n  <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <div class=\"title-row\">\n          <div class=\"title\">{{group || 'General'}}</div>\n          <div class=\"actions\">\n            <button\n              type=\"button\"\n              [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\n              mat-icon-button\n              (click)=\"export($event, groupedSettings[group])\">\n              <mat-icon>cloud_download</mat-icon>\n            </button>\n            <button\n              type=\"button\"\n              [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\n              mat-icon-button\n              (click)=\"import($event, group)\">\n              <mat-icon>cloud_upload</mat-icon>\n            </button>\n          </div>\n        </div>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div hideToggle *ngFor=\"let setting of groupedSettings[group]\">\n      <mat-form-field class=\"full-width\" *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\n        <input\n          matInput\n          [placeholder]=\"setting.label\"\n          [(ngModel)]=\"setting.value\"\n          [name]=\"'setting_' + setting.id\">\n          <mat-hint>{{setting.instruction}}</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field class=\"full-width\" *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\n        <textarea\n          matInput\n          [placeholder]=\"setting.label\"\n          [(ngModel)]=\"setting.value\"\n          [name]=\"'setting_' + setting.id\">\n        </textarea>\n        <mat-hint>{{setting.instruction}}</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field class=\"full-width\" *ngIf=\"setting.interfaceType===SettingInterfaceType.DropDown\">\n        <mat-select\n           [placeholder]=\"setting.label\"\n          [(ngModel)]=\"setting.value\"\n          [name]=\"'setting_' + setting.id\">\n          <mat-option *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\n            {{item.name}}\n          </mat-option>\n        </mat-select>\n        <mat-hint>{{setting.instruction}}</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field class=\"full-width\" *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\n        <input\n          matInput\n          fsDatePicker\n          [placeholder]=\"setting.label\"\n          [(ngModel)]=\"setting.value\"\n          [name]=\"'setting_' + setting.id\">\n          <mat-hint>{{setting.instruction}}</mat-hint>\n      </mat-form-field>\n\n      <mat-form-field class=\"full-width\" *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\n        <input\n          matInput\n          fsTimePicker\n          [placeholder]=\"setting.label\"\n          [(ngModel)]=\"setting.value\"\n          [name]=\"'setting_' + setting.id\">\n          <mat-hint>{{setting.instruction}}</mat-hint>\n      </mat-form-field>\n\n      <fs-file-picker\n        *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\n        [allowRemove]=\"true\"\n        [allowDownload]=\"true\"\n        (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\n        (remove)=\"fileRemove.emit(setting)\"\n        [url]=\"setting.value\">\n        <div fsFileLabel>{{setting.label}}</div>\n      </fs-file-picker>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\n\n  </mat-expansion-panel>\n\n</mat-accordion>\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}\n"], components: [{ type: i5$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i5$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i8.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i9.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i10.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i11$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i11$1.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12$1.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["imageWidth", "imageHeight", "imageQuality", "showFilename", "url", "file", "accept", "disabled", "width", "height", "previewWidth", "previewHeight", "allowDownload", "allowReupload", "allowRemove"], outputs: ["select", "remove"] }], directives: [{ type: i5$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.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: i16.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: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-settings',
-                    templateUrl: './settings.component.html',
-                    styleUrls: ['./settings.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: SystemService }, { type: i3$2.ClipboardService }, { type: i4$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
-                type: Input
-            }], save: [{
-                type: Input
-            }], fileRemove: [{
-                type: Output
-            }], fileSelect: [{
-                type: Output
+class SettingsComponent {
+    constructor(_message, _clipboardService, _prompt, _cdRef) {
+        this._message = _message;
+        this._clipboardService = _clipboardService;
+        this._prompt = _prompt;
+        this._cdRef = _cdRef;
+        this.fileRemove = new EventEmitter();
+        this.fileSelect = new EventEmitter();
+        this.groupedSettings = [];
+        this.groups = [];
+        this.SettingInterfaceType = SettingInterfaceType;
+    }
+    ngOnInit() {
+        this.loadSettings()
+            .subscribe((settings) => {
+            settings = settings
+                .filter((setting) => {
+                return setting.interfaceType !== SettingInterfaceType.None;
+            })
+                .map((setting) => {
+                switch (setting.interfaceType) {
+                    case SettingInterfaceType.Date:
+                    case SettingInterfaceType.Time:
+                        setting.value = parse(setting.value);
+                    case SettingInterfaceType.SelectMultiple:
+                        setting.value = Array.isArray(setting.value) ? setting.value : [];
+                        break;
+                }
+                return setting;
+            });
+            this.groupedSettings = groupBy(settings, (item) => {
+                return item.group;
+            });
+            this.groups = Object.keys(this.groupedSettings);
+            this._cdRef.markForCheck();
+        });
+    }
+    export(event, settings) {
+        event.stopPropagation();
+        const data = settings.map((setting) => {
+            return {
+                name: setting.name,
+                value: setting.value,
+                group: setting.group,
+            };
+        });
+        this._clipboardService.copy(JSON.stringify(data));
+        this._message.success('Copied to clipboard');
+    }
+    import(event, group) {
+        event.stopPropagation();
+        this._prompt.input({
+            label: 'JSON Import',
+            title: 'Import Settings',
+            commitLabel: 'Import',
+            required: true,
+        }).subscribe((value) => {
+            if (value) {
+                try {
+                    const settings = this.groupedSettings[group];
+                    const data = JSON.parse(value);
+                    data.forEach((item) => {
+                        const setting = settings.find((s) => {
+                            return item.name === s.name;
+                        });
+                        if (setting) {
+                            Object.assign(setting, item);
+                        }
+                    });
+                    this._cdRef.markForCheck();
+                }
+                catch (e) {
+                    this._message.error(e);
+                }
+            }
+        });
+    }
+    saveGroup(group) {
+        const settings = this.groupedSettings[group];
+        const values = reduce(settings, (result, value, key) => {
+            return (result[value.name] = value.value, result);
+        }, {});
+        this.save(group, values)
+            .subscribe(() => {
+            this._message.success('Changes Saved');
+        });
+    }
+}
+SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, deps: [{ token: i1.FsMessage }, { token: i2$3.ClipboardService }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\r\n<mat-accordion>\r\n  <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <div class=\"title-row\">\r\n          <div class=\"title\">{{group || 'General'}}</div>\r\n          <div class=\"actions\">\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"export($event, groupedSettings[group])\">\r\n              <mat-icon>cloud_download</mat-icon>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n              mat-icon-button\r\n              (click)=\"import($event, group)\">\r\n              <mat-icon>cloud_upload</mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div \r\n        hideToggle \r\n        *ngFor=\"let setting of groupedSettings[group]\" \r\n        class=\"setting\"\r\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n        <input\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n        <textarea\r\n          matInput\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        </textarea>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n        <mat-select\r\n            [placeholder]=\"setting.label\"\r\n            [(ngModel)]=\"setting.value\"\r\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\r\n            [name]=\"'setting' + setting.id\">\r\n          <mat-option *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n            {{item.name}}\r\n          </mat-option>\r\n        </mat-select>\r\n        <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n        <input\r\n          matInput\r\n          fsDatePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n        <input\r\n          matInput\r\n          fsColorPicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <mat-form-field \r\n          class=\"full-width form-field-multiline-subscript\" \r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n        <input\r\n          matInput\r\n          fsTimePicker\r\n          [placeholder]=\"setting.label\"\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n          <mat-hint>{{setting.instruction}}</mat-hint>\r\n      </mat-form-field>\r\n\r\n      <fs-file-picker\r\n        *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n        [allowRemove]=\"true\"\r\n        [allowDownload]=\"true\"\r\n        (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n        (remove)=\"fileRemove.emit(setting)\"\r\n        [url]=\"setting.value\">\r\n        <div fsFileLabel>{{setting.label}}</div>\r\n        <div fsFileLabelMessage>{{setting.instruction}}</div>\r\n      </fs-file-picker>\r\n    </div>\r\n\r\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n  </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], components: [{ type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i8.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { type: i11$1.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { type: i10$1.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["imageWidth", "imageHeight", "imageQuality", "showFilename", "url", "file", "accept", "disabled", "width", "height", "previewWidth", "previewHeight", "allowDownload", "allowReupload", "allowRemove"], outputs: ["select", "remove"] }], directives: [{ type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i10.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.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: i17.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: i17.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i17.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i12.FsFileLabelMessage, selector: "[fsFileLabelMessage]" }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SettingsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-settings',
+                    templateUrl: './settings.component.html',
+                    styleUrls: ['./settings.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FsMessage }, { type: i2$3.ClipboardService }, { type: i3$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
+                type: Input
+            }], save: [{
+                type: Input
+            }], fileRemove: [{
+                type: Output
+            }], fileSelect: [{
+                type: Output
             }] } });
 
-class FileManagerComponent {
-    constructor() { }
-    ngOnInit() {
-        this._configFileManager();
-    }
-    _configFileManager() {
-        this.config = {
-            fetch: (path) => {
-                return this.fetch(path);
-            },
-            deleteFile: (path) => {
-                return this.deleteFile(path);
-            },
-            deleteDirectory: (path) => {
-                return this.deleteDirectory(path);
-            },
-            createDirectory: (path) => {
-                return this.createDirectory(path);
-            },
-            download: (path) => {
-                return this.download(path);
-            },
-            upload: (path, file) => {
-                return this.upload(path, file);
-            }
-        };
-    }
-}
-FileManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileManagerComponent, selector: "fs-system-file-manager", inputs: { fetch: "fetch", deleteFile: "deleteFile", deleteDirectory: "deleteDirectory", createDirectory: "createDirectory", download: "download", upload: "upload" }, ngImport: i0, template: "<fs-file-manager [config]=\"config\"></fs-file-manager>", styles: [""], components: [{ type: i1$2.ɵa, selector: "fs-file-manager", inputs: ["config"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileManagerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-file-manager',
-                    templateUrl: './file-manager.component.html',
-                    styleUrls: ['./file-manager.component.scss']
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { fetch: [{
-                type: Input
-            }], deleteFile: [{
-                type: Input
-            }], deleteDirectory: [{
-                type: Input
-            }], createDirectory: [{
-                type: Input
-            }], download: [{
-                type: Input
-            }], upload: [{
-                type: Input
+class FileManagerComponent {
+    constructor() { }
+    ngOnInit() {
+        this._configFileManager();
+    }
+    _configFileManager() {
+        this.config = {
+            fetch: (path) => {
+                return this.fetch(path);
+            },
+            deleteFile: (path) => {
+                return this.deleteFile(path);
+            },
+            deleteDirectory: (path) => {
+                return this.deleteDirectory(path);
+            },
+            createDirectory: (path) => {
+                return this.createDirectory(path);
+            },
+            download: (path) => {
+                return this.download(path);
+            },
+            upload: (path, file) => {
+                return this.upload(path, file);
+            }
+        };
+    }
+}
+FileManagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FileManagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FileManagerComponent, selector: "fs-system-file-manager", inputs: { fetch: "fetch", deleteFile: "deleteFile", deleteDirectory: "deleteDirectory", createDirectory: "createDirectory", download: "download", upload: "upload" }, ngImport: i0, template: "<fs-file-manager [config]=\"config\"></fs-file-manager>", styles: [""], components: [{ type: i1$2.FsFileManagerComponent, selector: "fs-file-manager", inputs: ["config"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FileManagerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-file-manager',
+                    templateUrl: './file-manager.component.html',
+                    styleUrls: ['./file-manager.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { fetch: [{
+                type: Input
+            }], deleteFile: [{
+                type: Input
+            }], deleteDirectory: [{
+                type: Input
+            }], createDirectory: [{
+                type: Input
+            }], download: [{
+                type: Input
+            }], upload: [{
+                type: Input
             }] } });
 
-class ProcessComponent {
-    constructor(_dialogRef, data) {
-        this._dialogRef = _dialogRef;
-        this.data = data;
-        this.ProcessState = ProcessState;
-    }
-    ngOnInit() {
-        this.ProcessStates = indexNameValue(ProcessStates);
-        if (this.data.loadProcess) {
-            this.load();
-        }
-        else {
-            this.process = this.data.process;
-        }
-    }
-    load() {
-        this.data.loadProcess(this.data.process)
-            .subscribe((process) => {
-            this.process = process;
-        });
-    }
-}
-ProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>Process</div>\n  <mat-dialog-content>\n    <div fxLayout=\"column\">\n      <fs-label-field>\n        <fs-label>\n          Name\n        </fs-label>\n        {{process.prettyName}}\n      </fs-label-field>\n\n      <div fxLayout=\"row\" fxLayoutGap=\"20px\">\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          {{ProcessStates[process.state]}}\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.notify\">\n          <fs-label>\n            Notification Email\n          </fs-label>\n          {{process.notify}}\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.pid\">\n          <fs-label>\n            PID\n          </fs-label>\n          {{process.pid}}\n        </fs-label-field>\n      </div>\n\n      <div fxLayout=\"row\" fxLayoutGap=\"20px\">\n        <fs-label-field>\n          <fs-label>\n            Create Date\n          </fs-label>\n          {{ process.createDate | fsDateFormat: 'date-time' }}\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.startDate\">\n          <fs-label>\n            Start Date\n          </fs-label>\n          {{ process.startDate | fsDateFormat: 'date-time' }}\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.endDate\">\n          <fs-label>\n            Complete Date\n          </fs-label>\n          {{ process.endDate | fsDateFormat: 'date-time' }}\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.duration\">\n          <fs-label>\n            Duration\n          </fs-label>\n          {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n        </fs-label-field>\n      </div>\n\n      <fs-label-field *ngIf=\"process.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{process.message}}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"process.log\" class=\"log\">\n        <fs-label>\n          Log\n        </fs-label>{{process.log}}\n      </fs-label-field>\n\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n    <button\n      *ngIf=\"process.state===ProcessState.Running && data.loadProcess\"\n      mat-button\n      (click)=\"load()\">\n      Reload\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [":host ::ng-deep .log .field-content{white-space:pre-wrap;font-family:monospace;font-size:14px}\n"], components: [{ type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.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: i6.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i5$2.FsDateFormatPipe, "fsDateDuration": i5$2.FsDateDurationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './process.component.html',
-                    styleUrls: ['./process.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class ProcessComponent {
+    constructor(_dialogRef, data) {
+        this._dialogRef = _dialogRef;
+        this.data = data;
+        this.ProcessState = ProcessState;
+    }
+    ngOnInit() {
+        this.ProcessStates = indexNameValue(ProcessStates);
+        if (this.data.loadProcess) {
+            this.load();
+        }
+        else {
+            this.process = this.data.process;
+        }
+    }
+    load() {
+        this.data.loadProcess(this.data.process)
+            .subscribe((process) => {
+            this.process = process;
+        });
+    }
+}
+ProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\r\n  <div mat-dialog-title>Process</div>\r\n  <mat-dialog-content>\r\n    <div fxLayout=\"column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Name\r\n        </fs-label>\r\n        {{process.prettyName}}\r\n      </fs-label-field>\r\n\r\n      <div fxLayout=\"row\" fxLayoutGap=\"20px\">\r\n\r\n        <fs-label-field>\r\n          <fs-label>\r\n            Status\r\n          </fs-label>\r\n          {{ProcessStates[process.state]}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.notify\">\r\n          <fs-label>\r\n            Notification Email\r\n          </fs-label>\r\n          {{process.notify}}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.pid\">\r\n          <fs-label>\r\n            PID\r\n          </fs-label>\r\n          {{process.pid}}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <div fxLayout=\"row\" fxLayoutGap=\"20px\">\r\n        <fs-label-field>\r\n          <fs-label>\r\n            Create Date\r\n          </fs-label>\r\n          {{ process.createDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.startDate\">\r\n          <fs-label>\r\n            Start Date\r\n          </fs-label>\r\n          {{ process.startDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.endDate\">\r\n          <fs-label>\r\n            Complete Date\r\n          </fs-label>\r\n          {{ process.endDate | fsDateFormat: 'date-time' }}\r\n        </fs-label-field>\r\n\r\n        <fs-label-field *ngIf=\"process.duration\">\r\n          <fs-label>\r\n            Duration\r\n          </fs-label>\r\n          {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n        </fs-label-field>\r\n      </div>\r\n\r\n      <fs-label-field *ngIf=\"process.message\">\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{process.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"process.log\" class=\"log\">\r\n        <fs-label>\r\n          Log\r\n        </fs-label>{{process.log}}\r\n      </fs-label-field>\r\n\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n    <button\r\n      *ngIf=\"process.state===ProcessState.Running && data.loadProcess\"\r\n      mat-button\r\n      (click)=\"load()\">\r\n      Reload\r\n    </button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .log .field-content{white-space:pre-wrap;font-family:monospace;font-size:14px}\n"], components: [{ type: i2$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6$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: i6$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe, "fsDateDuration": i4$2.FsDateDurationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './process.component.html',
+                    styleUrls: ['./process.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class ProcessesComponent {
-    constructor(_systemService, _dialog, _message) {
-        this._systemService = _systemService;
-        this._dialog = _dialog;
-        this._message = _message;
-        this.actions = [];
-        this.config = null;
-        this.ProcessStates = indexNameValue(ProcessStates);
-        this.ProcessState = ProcessState;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this._configList();
-    }
-    _configList() {
-        this.config = {
-            actions: [],
-            rowActions: [],
-            filters: [
-                {
-                    type: ItemType.Keyword,
-                    name: 'keyword',
-                    label: 'Search'
-                },
-                {
-                    type: ItemType.Select,
-                    name: 'state',
-                    label: 'Status',
-                    values: ProcessStates
-                },
-            ],
-            fetch: query => {
-                return this.loadProcesses(query)
-                    .pipe(map((response) => ({ data: this._systemService.input(response.data), paging: response.paging })));
-            }
-        };
-        if (this.run) {
-            this.config.rowActions.push({
-                label: 'Run',
-                click: (data) => {
-                    this._message.info('Running process...');
-                    this.run(data)
-                        .subscribe(() => {
-                        this.list.reload();
-                        this._message.success('Succesfully ran process');
-                    });
-                    setTimeout(() => {
-                        this.list.reload();
-                    }, 500);
-                }
-            });
-        }
-        if (this.kill) {
-            this.config.rowActions.push({
-                label: 'Kill',
-                show: (data) => {
-                    return !!data.pid;
-                },
-                click: (data) => {
-                    this._message.info('Killing process...');
-                    this.kill(data)
-                        .subscribe(() => {
-                        this.list.reload();
-                        this._message.success('Succesfully killed process');
-                    });
-                    setTimeout(() => {
-                        this.list.reload();
-                    }, 500);
-                }
-            });
-        }
-        if (this.delete) {
-            this.config.rowActions.push({
-                label: 'Delete',
-                click: (data) => {
-                    this.delete(data)
-                        .subscribe(() => {
-                        this.list.reload();
-                        this._message.success('Deleted process');
-                    });
-                }
-            });
-        }
-        this.actions.forEach(action => {
-            this.config.actions.push({
-                primary: false,
-                label: action.label,
-                menu: action.menu,
-                click: () => {
-                    if (action.click) {
-                        action.click();
-                    }
-                    if (action.component) {
-                        const dialogRef = this._dialog.open(action.component, {
-                            width: '800px'
-                        });
-                        dialogRef.afterClosed()
-                            .pipe(takeUntil(this._destroy$))
-                            .subscribe(result => {
-                            this.list.reload();
-                        });
-                    }
-                },
-            });
-        });
-    }
-    open(process) {
-        this._dialog.open(ProcessComponent, {
-            data: {
-                process,
-                loadProcess: this.loadProcess,
-            },
-            width: '85%'
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-}
-ProcessesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, deps: [{ token: SystemService }, { token: i1$1.MatDialog }, { token: i1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-ProcessesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", actions: "actions" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"open(row)\">{{row.prettyName}}</a>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Status</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ProcessStates[row.state]}}\n      <small>\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">Complete: {{ row.percent }}%</div>\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">Download: <a href=\"javascript:;\" (click)=\"download(row)\">{{ row.filename }}</a></div>\n        <div *ngIf=\"row.pid\">PID: {{ row.pid }}</div>\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">Notify: {{ row.notify }}</div>\n      </small>\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Duration</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n    </ng-template>\n  </fs-list-column>\n\n\n  <fs-list-column>\n    <ng-template fs-list-header>Message</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.message}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Completed</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i5$2.FsDateDurationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-processes',
-                    templateUrl: './processes.component.html',
-                    styleUrls: ['./processes.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: SystemService }, { type: i1$1.MatDialog }, { type: i1.FsMessage }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }], loadProcesses: [{
-                type: Input
-            }], loadProcess: [{
-                type: Input
-            }], run: [{
-                type: Input
-            }], kill: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }], download: [{
-                type: Input
-            }], actions: [{
-                type: Input
+class ProcessesComponent {
+    constructor(_dialog, _message) {
+        this._dialog = _dialog;
+        this._message = _message;
+        this.actions = [];
+        this.config = null;
+        this.ProcessStates = indexNameValue(ProcessStates);
+        this.ProcessState = ProcessState;
+        this._destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this._configList();
+    }
+    _configList() {
+        this.config = {
+            actions: [],
+            rowActions: [],
+            filters: [
+                {
+                    type: ItemType.Keyword,
+                    name: 'keyword',
+                    label: 'Search'
+                },
+                {
+                    type: ItemType.Select,
+                    name: 'state',
+                    label: 'Status',
+                    values: ProcessStates
+                },
+            ],
+            fetch: query => {
+                return this.loadProcesses(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            }
+        };
+        if (this.run) {
+            this.config.rowActions.push({
+                label: 'Run',
+                click: (data) => {
+                    this._message.info('Running process...');
+                    this.run(data)
+                        .subscribe(() => {
+                        this.list.reload();
+                        this._message.success('Succesfully ran process');
+                    });
+                    setTimeout(() => {
+                        this.list.reload();
+                    }, 500);
+                }
+            });
+        }
+        if (this.kill) {
+            this.config.rowActions.push({
+                label: 'Kill',
+                show: (data) => {
+                    return !!data.pid;
+                },
+                click: (data) => {
+                    this._message.info('Killing process...');
+                    this.kill(data)
+                        .subscribe(() => {
+                        this.list.reload();
+                        this._message.success('Succesfully killed process');
+                    });
+                    setTimeout(() => {
+                        this.list.reload();
+                    }, 500);
+                }
+            });
+        }
+        if (this.delete) {
+            this.config.rowActions.push({
+                label: 'Delete',
+                click: (data) => {
+                    this.delete(data)
+                        .subscribe(() => {
+                        this.list.reload();
+                        this._message.success('Deleted process');
+                    });
+                }
+            });
+        }
+        this.actions.forEach(action => {
+            this.config.actions.push({
+                primary: false,
+                label: action.label,
+                menu: action.menu,
+                click: () => {
+                    if (action.click) {
+                        action.click();
+                    }
+                    if (action.component) {
+                        const dialogRef = this._dialog.open(action.component, {
+                            width: '800px'
+                        });
+                        dialogRef.afterClosed()
+                            .pipe(takeUntil(this._destroy$))
+                            .subscribe(result => {
+                            this.list.reload();
+                        });
+                    }
+                },
+            });
+        });
+    }
+    open(process) {
+        this._dialog.open(ProcessComponent, {
+            data: {
+                process,
+                loadProcess: this.loadProcess,
+            },
+            width: '85%'
+        });
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+}
+ProcessesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, deps: [{ token: i1$1.MatDialog }, { token: i1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
+ProcessesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", actions: "actions" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <a (click)=\"open(row)\">{{row.prettyName}}</a>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Status</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ProcessStates[row.state]}}\r\n      <small>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">Complete: {{ row.percent }}%</div>\r\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">Download: <a href=\"javascript:;\" (click)=\"download(row)\">{{ row.filename }}</a></div>\r\n        <div *ngIf=\"row.pid\">PID: {{ row.pid }}</div>\r\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">Notify: {{ row.notify }}</div>\r\n      </small>\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Duration</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Message</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.message}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Completed</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ProcessesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-processes',
+                    templateUrl: './processes.component.html',
+                    styleUrls: ['./processes.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: i1.FsMessage }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }], loadProcesses: [{
+                type: Input
+            }], loadProcess: [{
+                type: Input
+            }], run: [{
+                type: Input
+            }], kill: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], download: [{
+                type: Input
+            }], actions: [{
+                type: Input
             }] } });
 
-class ServerLogComponent {
-    constructor(data) {
-        this.data = data;
-    }
-    ngOnInit() {
-        if (this.data.log) {
-            this.log = this.data.log;
-            try {
-                this.log.backtrace = JSON.parse(this.log.backtrace);
-            }
-            catch (e) { }
-            try {
-                this.log.server = JSON.parse(this.log.server);
-            }
-            catch (e) { }
-        }
-    }
-}
-ServerLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>Log</div>\n  <mat-dialog-content>\n    <div fxLayout=\"column\">\n      <fs-label-field>\n        <fs-label>\n          Error Type\n        </fs-label>\n        {{log.type}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{log.message}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          URL\n        </fs-label>\n        {{log.url}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{log.createDate|fsDateFormat: 'full-date-time'}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{log.file}} @ {{log.line}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Backtrace\n        </fs-label>\n        <pre>{{log.backtrace|json}}</pre>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          $_SERVER\n        </fs-label>\n        <pre>{{log.server|json}}</pre>\n      </fs-label-field>\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.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: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i5$2.FsDateFormatPipe, "json": i7$1.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './server-log.component.html',
-                    styleUrls: ['./server-log.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class ServerLogComponent {
+    constructor(data) {
+        this.data = data;
+    }
+    ngOnInit() {
+        if (this.data.log) {
+            this.log = this.data.log;
+            try {
+                this.log.backtrace = JSON.parse(this.log.backtrace);
+            }
+            catch (e) { }
+            try {
+                this.log.server = JSON.parse(this.log.server);
+            }
+            catch (e) { }
+        }
+    }
+}
+ServerLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ServerLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\r\n  <div mat-dialog-title>Log</div>\r\n  <mat-dialog-content>\r\n    <div fxLayout=\"column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Error Type\r\n        </fs-label>\r\n        {{log.type}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{log.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          URL\r\n        </fs-label>\r\n        {{log.url}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        {{log.createDate|fsDateFormat: 'full-date-time'}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          File\r\n        </fs-label>\r\n        {{log.file}} @ {{log.line}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Backtrace\r\n        </fs-label>\r\n        <pre>{{log.backtrace|json}}</pre>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          $_SERVER\r\n        </fs-label>\r\n        <pre>{{log.server|json}}</pre>\r\n      </fs-label-field>\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [""], components: [{ type: i2$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6$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: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe, "json": i9.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './server-log.component.html',
+                    styleUrls: ['./server-log.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class ServerLogsComponent {
-    constructor(_dialog, _systemService) {
-        this._dialog = _dialog;
-        this._systemService = _systemService;
-        this.config = null;
-        this.logTypes = [];
-    }
-    ngOnInit() {
-        this._configList();
-    }
-    _configList() {
-        this.config = {
-            filters: [
-                {
-                    type: ItemType.Keyword,
-                    name: 'keyword',
-                    label: 'Search'
-                }
-            ],
-            fetch: query => {
-                return this.loadLogs(query)
-                    .pipe(map((response) => ({ data: this._systemService.input(response.data), paging: response.paging })));
-            }
-        };
-    }
-    open(log) {
-        const dialogRef = this._dialog.open(ServerLogComponent, {
-            data: { log: log },
-            width: '85%'
-        });
-    }
-}
-ServerLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1$1.MatDialog }, { token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogsComponent, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n    <fs-list-column>\n      <ng-template fs-list-header>Message</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.message}}</a>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Type</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        {{row.type}}\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Date</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n", styles: [""], components: [{ type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-server-logs',
-                    templateUrl: './server-logs.component.html',
-                    styleUrls: ['./server-logs.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: SystemService }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: ['list', { static: true }]
-            }], loadLogs: [{
-                type: Input
+class ServerLogsComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this.config = null;
+        this.logTypes = [];
+    }
+    ngOnInit() {
+        this._configList();
+    }
+    _configList() {
+        this.config = {
+            filters: [
+                {
+                    type: ItemType.Keyword,
+                    name: 'keyword',
+                    label: 'Search'
+                }
+            ],
+            fetch: query => {
+                return this.loadLogs(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            }
+        };
+    }
+    open(log) {
+        this._dialog.open(ServerLogComponent, {
+            data: { log: log },
+            width: '85%'
+        });
+    }
+}
+ServerLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ServerLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ServerLogsComponent, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Message</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.message}}</a>\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Type</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{row.type}}\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Date</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n", styles: [""], components: [{ type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ServerLogsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-server-logs',
+                    templateUrl: './server-logs.component.html',
+                    styleUrls: ['./server-logs.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: ['list', { static: true }]
+            }], loadLogs: [{
+                type: Input
             }] } });
 
-class UpgradeLogsComponent {
-    constructor(_systemService) {
-        this._systemService = _systemService;
-        this.config = null;
-        this.logTypes = [];
-    }
-    ngOnInit() {
-        this._configList();
-    }
-    _configList() {
-        this.config = {
-            paging: false,
-            filters: [
-                {
-                    type: ItemType.Keyword,
-                    name: 'keyword',
-                    label: 'Search'
-                }
-            ],
-            fetch: query => {
-                return this.loadUpgradeLogs(query)
-                    .pipe(map((response) => ({ data: this._systemService.input(response.data), paging: response.paging })));
-            }
-        };
-    }
-}
-UpgradeLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, deps: [{ token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
-UpgradeLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UpgradeLogsComponent, selector: "fs-system-upgrade-logs", inputs: { loadUpgradeLogs: "loadUpgradeLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>Name</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.name}}\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Function</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.function}}()\n    </ng-template>\n  </fs-list-column>\n\n  <fs-list-column>\n    <ng-template fs-list-header>Date</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], components: [{ type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-upgrade-logs',
-                    templateUrl: './upgrade-logs.component.html',
-                    styleUrls: ['./upgrade-logs.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: SystemService }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
-            }], loadUpgradeLogs: [{
-                type: Input
+class UpgradeLogsComponent {
+    constructor() {
+        this.config = null;
+        this.logTypes = [];
+    }
+    ngOnInit() {
+        this._configList();
+    }
+    _configList() {
+        this.config = {
+            paging: false,
+            filters: [
+                {
+                    type: ItemType.Keyword,
+                    name: 'keyword',
+                    label: 'Search'
+                }
+            ],
+            fetch: query => {
+                return this.loadUpgradeLogs(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            }
+        };
+    }
+}
+UpgradeLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UpgradeLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: UpgradeLogsComponent, selector: "fs-system-upgrade-logs", inputs: { loadUpgradeLogs: "loadUpgradeLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.name}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Function</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.function}}()\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Date</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-upgrade-logs',
+                    templateUrl: './upgrade-logs.component.html',
+                    styleUrls: ['./upgrade-logs.component.scss']
+                }]
+        }], propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
+            }], loadUpgradeLogs: [{
+                type: Input
             }] } });
 
-class ApiLogComponent {
-    constructor(_dialogRef, data) {
-        this._dialogRef = _dialogRef;
-        this.data = data;
-    }
-    ngOnInit() {
-        this.apiLogStates = indexNameValue(ApiLogStates);
-        if (this.data.apiLog) {
-            this.apiLog = this.data.apiLog;
-        }
-    }
-}
-ApiLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\n  <div mat-dialog-title>API Log</div>\n  <mat-dialog-content>\n    <div fxLayout=\"column\">\n      <fs-label-field>\n        <fs-label>\n          Type\n        </fs-label>\n        {{apiLog.type}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Status\n        </fs-label>\n        {{apiLogStates[apiLog.state]}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{apiLog.createDate|fsDateFormat: 'full-date-time'}}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.length\">\n        <fs-label>\n          Duration\n        </fs-label>\n        {{ apiLog.length | fsDateDuration }}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.code\">\n        <fs-label>\n          Code\n        </fs-label>\n        {{apiLog.code}}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{apiLog.message}}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{apiLog.url}}\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.request\">\n        <fs-label>\n          Request\n        </fs-label>\n        <pre>{{apiLog.request|json}}</pre>\n      </fs-label-field>\n\n      <fs-label-field *ngIf=\"apiLog.response\">\n        <fs-label>\n          Response\n        </fs-label>\n        <pre>{{apiLog.response|json}}</pre>\n      </fs-label-field>\n\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i2$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6.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: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i5$2.FsDateFormatPipe, "fsDateDuration": i5$2.FsDateDurationPipe, "json": i7$1.JsonPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    templateUrl: './api-log.component.html',
-                    styleUrls: ['./api-log.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
+class ApiLogComponent {
+    constructor(_dialogRef, data) {
+        this._dialogRef = _dialogRef;
+        this.data = data;
+    }
+    ngOnInit() {
+        this.apiLogStates = indexNameValue(ApiLogStates);
+        if (this.data.apiLog) {
+            this.apiLog = this.data.apiLog;
+        }
+    }
+}
+ApiLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, deps: [{ token: i1$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+ApiLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\r\n  <div mat-dialog-title>API Log</div>\r\n  <mat-dialog-content>\r\n    <div fxLayout=\"column\">\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Type\r\n        </fs-label>\r\n        {{apiLog.type}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Status\r\n        </fs-label>\r\n        {{apiLogStates[apiLog.state]}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field>\r\n        <fs-label>\r\n          Date\r\n        </fs-label>\r\n        {{apiLog.createDate|fsDateFormat: 'full-date-time'}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.length\">\r\n        <fs-label>\r\n          Duration\r\n        </fs-label>\r\n        {{ apiLog.length | fsDateDuration }}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.code\">\r\n        <fs-label>\r\n          Code\r\n        </fs-label>\r\n        {{apiLog.code}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.message\">\r\n        <fs-label>\r\n          Message\r\n        </fs-label>\r\n        {{apiLog.message}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.url\">\r\n        <fs-label>\r\n          URL\r\n        </fs-label>\r\n        {{apiLog.url}}\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.request\">\r\n        <fs-label>\r\n          Request\r\n        </fs-label>\r\n        <pre>{{apiLog.request|json}}</pre>\r\n      </fs-label-field>\r\n\r\n      <fs-label-field *ngIf=\"apiLog.response\">\r\n        <fs-label>\r\n          Response\r\n        </fs-label>\r\n        <pre>{{apiLog.response|json}}</pre>\r\n      </fs-label-field>\r\n\r\n    </div>\r\n  </mat-dialog-content>\r\n  <mat-dialog-actions>\r\n    <button mat-button [mat-dialog-close]=\"true\" color=\"primary\">Done</button>\r\n  </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [""], components: [{ type: i2$2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i2$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i2$1.FsLabelComponent, selector: "fs-label" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i6$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: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe, "fsDateDuration": i4$2.FsDateDurationPipe, "json": i9.JsonPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './api-log.component.html',
+                    styleUrls: ['./api-log.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
                 }] }]; } });
 
-class ApiLogsComponent {
-    constructor(_dialog, _systemService) {
-        this._dialog = _dialog;
-        this._systemService = _systemService;
-        this.config = null;
-        this.apiLogStates = indexNameValue(ApiLogStates);
-    }
-    ngOnInit() {
-        this._configList();
-    }
-    _configList() {
-        this.config = {
-            filters: [
-                {
-                    type: ItemType.Keyword,
-                    name: 'keyword',
-                    label: 'Search'
-                },
-                {
-                    type: ItemType.Select,
-                    name: 'state',
-                    label: 'Status',
-                    values: ApiLogStates
-                },
-                {
-                    name: 'createDate',
-                    type: ItemType.DateRange,
-                    label: ['From Date', 'To Date'],
-                }
-            ],
-            fetch: query => {
-                Object.assign(query, {});
-                return this.loadApiLogs(query)
-                    .pipe(map((response) => ({ data: this._systemService.input(response.data), paging: response.paging })));
-            }
-        };
-    }
-    open(apiLog) {
-        this._dialog.open(ApiLogComponent, {
-            data: { apiLog: apiLog },
-            width: '85%'
-        });
-    }
-}
-ApiLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1$1.MatDialog }, { token: SystemService }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n    <fs-list-column>\n      <ng-template fs-list-header>Name</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.type || 'Unknown'}}</a>\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n        <ng-template fs-list-header>Message</ng-template>\n        <ng-template fs-list-cell let-row=\"row\">\n          {{row.message}}\n        </ng-template>\n      </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Status</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        {{apiLogStates[row.state]}}\n      </ng-template>\n    </fs-list-column>\n    <fs-list-column>\n      <ng-template fs-list-header>Date</ng-template>\n      <ng-template fs-list-cell let-row=\"row\">\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n      </ng-template>\n    </fs-list-column>\n  </fs-list>\n", styles: [""], components: [{ type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i5$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i7$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i5$2.FsDateDurationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-api-logs',
-                    templateUrl: './api-logs.component.html',
-                    styleUrls: ['./api-logs.component.scss']
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }, { type: SystemService }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent, { static: true }]
-            }], loadApiLogs: [{
-                type: Input
+class ApiLogsComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this.config = null;
+        this.apiLogStates = indexNameValue(ApiLogStates);
+    }
+    ngOnInit() {
+        this._configList();
+    }
+    _configList() {
+        this.config = {
+            filters: [
+                {
+                    type: ItemType.Keyword,
+                    name: 'keyword',
+                    label: 'Search'
+                },
+                {
+                    type: ItemType.Select,
+                    name: 'state',
+                    label: 'Status',
+                    values: ApiLogStates
+                },
+                {
+                    name: 'createDate',
+                    type: ItemType.DateRange,
+                    label: ['From Date', 'To Date'],
+                }
+            ],
+            fetch: query => {
+                Object.assign(query, {});
+                return this.loadApiLogs(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            }
+        };
+    }
+    open(apiLog) {
+        this._dialog.open(ApiLogComponent, {
+            data: { apiLog: apiLog },
+            width: '85%'
+        });
+    }
+}
+ApiLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Name</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <a href=\"javascript:;\" (click)=\"open(row)\">{{row.type || 'Unknown'}}</a>\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n        <ng-template fs-list-header>Message</ng-template>\r\n        <ng-template fs-list-cell let-row=\"row\">\r\n          {{row.message}}\r\n        </ng-template>\r\n      </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Status</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        {{apiLogStates[row.state]}}\r\n      </ng-template>\r\n    </fs-list-column>\r\n    <fs-list-column>\r\n      <ng-template fs-list-header>Date</ng-template>\r\n      <ng-template fs-list-cell let-row=\"row\">\r\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n        <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\r\n      </ng-template>\r\n    </fs-list-column>\r\n  </fs-list>\r\n", styles: [""], components: [{ type: i3$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i3$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["title", "name", "show", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i3$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i3$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ApiLogsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-api-logs',
+                    templateUrl: './api-logs.component.html',
+                    styleUrls: ['./api-logs.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.MatDialog }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent, { static: true }]
+            }], loadApiLogs: [{
+                type: Input
             }] } });
 
-class InfoComponent {
-    ngAfterViewInit() {
-        this._load();
-    }
-    _load() {
-        this.load()
-            .subscribe((info) => {
-            info += '<style>body { background: transparent; }</style>';
-            const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
-            doc.open();
-            doc.write(info);
-            doc.close();
-            const scrollHeight = (this.iframe.nativeElement.contentWindow.document.documentElement.scrollHeight + 100);
-            this.iframe.nativeElement.style.height = `${scrollHeight}px`;
-        });
-    }
-}
-InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: InfoComponent, selector: "fs-system-info", inputs: { load: "load" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<iframe #iframe></iframe>\n", styles: ["iframe{width:100%;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InfoComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-system-info',
-                    templateUrl: 'info.component.html',
-                    styleUrls: ['info.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { iframe: [{
-                type: ViewChild,
-                args: ['iframe']
-            }], load: [{
-                type: Input
+class InfoComponent {
+    ngAfterViewInit() {
+        this._load();
+    }
+    _load() {
+        this.load()
+            .subscribe((info) => {
+            info += '<style>body { background: transparent; }</style>';
+            const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
+            doc.open();
+            doc.write(info);
+            doc.close();
+            const scrollHeight = (this.iframe.nativeElement.contentWindow.document.documentElement.scrollHeight + 100);
+            this.iframe.nativeElement.style.height = `${scrollHeight}px`;
+        });
+    }
+}
+InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: InfoComponent, selector: "fs-system-info", inputs: { load: "load" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<iframe #iframe></iframe>\r\n", styles: ["iframe{width:100%;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: InfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-system-info',
+                    templateUrl: 'info.component.html',
+                    styleUrls: ['info.component.scss'],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { iframe: [{
+                type: ViewChild,
+                args: ['iframe']
+            }], load: [{
+                type: Input
             }] } });
 
-class FsSystemModule {
-    static forRoot(config) {
-        return {
-            ngModule: FsSystemModule,
-            providers: [
-                { provide: FS_SYSTEM_CONFIG, useValue: config || {} },
-            ]
-        };
-    }
-}
-FsSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, declarations: [DashboardComponent,
-        CronsComponent,
-        SettingsComponent,
-        KeyNameValuePipe,
-        FileManagerComponent,
-        ProcessesComponent,
-        ServerLogComponent,
-        ServerLogsComponent,
-        UpgradeLogsComponent,
-        ApiLogsComponent,
-        ApiLogComponent,
-        InfoComponent,
-        ProcessComponent,
-        CronComponent,
-        CronLogComponent], imports: [CommonModule,
-        FlexLayoutModule,
-        FormsModule,
-        MatButtonModule,
-        MatExpansionModule,
-        MatTooltipModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatDialogModule,
-        MatTabsModule,
-        FsDateModule,
-        FsSkeletonModule,
-        FsListModule,
-        FsFileModule,
-        FsFileManagerModule,
-        FsLabelModule,
-        FsDialogModule,
-        FsDatePickerModule,
-        FsMenuModule,
-        ClipboardModule], exports: [DashboardComponent,
-        CronsComponent,
-        SettingsComponent,
-        FileManagerComponent,
-        ProcessesComponent,
-        ServerLogsComponent,
-        UpgradeLogsComponent,
-        ApiLogsComponent,
-        InfoComponent] });
-FsSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, providers: [
-        SystemService
-    ], imports: [[
-            CommonModule,
-            FlexLayoutModule,
-            FormsModule,
-            MatButtonModule,
-            MatExpansionModule,
-            MatTooltipModule,
-            MatIconModule,
-            MatFormFieldModule,
-            MatInputModule,
-            MatSelectModule,
-            MatDialogModule,
-            MatTabsModule,
-            FsDateModule,
-            FsSkeletonModule,
-            FsListModule,
-            FsFileModule,
-            FsFileManagerModule,
-            FsLabelModule,
-            FsDialogModule,
-            FsDatePickerModule,
-            FsMenuModule,
-            ClipboardModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FlexLayoutModule,
-                        FormsModule,
-                        MatButtonModule,
-                        MatExpansionModule,
-                        MatTooltipModule,
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatDialogModule,
-                        MatTabsModule,
-                        FsDateModule,
-                        FsSkeletonModule,
-                        FsListModule,
-                        FsFileModule,
-                        FsFileManagerModule,
-                        FsLabelModule,
-                        FsDialogModule,
-                        FsDatePickerModule,
-                        FsMenuModule,
-                        ClipboardModule,
-                    ],
-                    exports: [
-                        DashboardComponent,
-                        CronsComponent,
-                        SettingsComponent,
-                        FileManagerComponent,
-                        ProcessesComponent,
-                        ServerLogsComponent,
-                        UpgradeLogsComponent,
-                        ApiLogsComponent,
-                        InfoComponent,
-                    ],
-                    declarations: [
-                        DashboardComponent,
-                        CronsComponent,
-                        SettingsComponent,
-                        KeyNameValuePipe,
-                        FileManagerComponent,
-                        ProcessesComponent,
-                        ServerLogComponent,
-                        ServerLogsComponent,
-                        UpgradeLogsComponent,
-                        ApiLogsComponent,
-                        ApiLogComponent,
-                        InfoComponent,
-                        ProcessComponent,
-                        CronComponent,
-                        CronLogComponent,
-                    ],
-                    providers: [
-                        SystemService
-                    ],
-                }]
+class FsSystemModule {
+    static forRoot(config) {
+        return {
+            ngModule: FsSystemModule,
+            providers: [
+                { provide: FS_SYSTEM_CONFIG, useValue: config || {} },
+            ]
+        };
+    }
+}
+FsSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, declarations: [DashboardComponent,
+        CronsComponent,
+        SettingsComponent,
+        KeyNameValuePipe,
+        FileManagerComponent,
+        ProcessesComponent,
+        ServerLogComponent,
+        ServerLogsComponent,
+        UpgradeLogsComponent,
+        ApiLogsComponent,
+        ApiLogComponent,
+        InfoComponent,
+        ProcessComponent,
+        CronComponent,
+        CronLogComponent], imports: [CommonModule,
+        FlexLayoutModule,
+        FormsModule,
+        MatButtonModule,
+        MatExpansionModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatTabsModule,
+        FsDateModule,
+        FsSkeletonModule,
+        FsListModule,
+        FsFileModule,
+        FsFileManagerModule,
+        FsLabelModule,
+        FsDialogModule,
+        FsDatePickerModule,
+        FsMenuModule,
+        FsColorPickerModule,
+        ClipboardModule], exports: [DashboardComponent,
+        CronsComponent,
+        SettingsComponent,
+        FileManagerComponent,
+        ProcessesComponent,
+        ServerLogsComponent,
+        UpgradeLogsComponent,
+        ApiLogsComponent,
+        InfoComponent] });
+FsSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, imports: [[
+            CommonModule,
+            FlexLayoutModule,
+            FormsModule,
+            MatButtonModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSelectModule,
+            MatDialogModule,
+            MatTabsModule,
+            FsDateModule,
+            FsSkeletonModule,
+            FsListModule,
+            FsFileModule,
+            FsFileManagerModule,
+            FsLabelModule,
+            FsDialogModule,
+            FsDatePickerModule,
+            FsMenuModule,
+            FsColorPickerModule,
+            ClipboardModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsSystemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FlexLayoutModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatExpansionModule,
+                        MatTooltipModule,
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatDialogModule,
+                        MatTabsModule,
+                        FsDateModule,
+                        FsSkeletonModule,
+                        FsListModule,
+                        FsFileModule,
+                        FsFileManagerModule,
+                        FsLabelModule,
+                        FsDialogModule,
+                        FsDatePickerModule,
+                        FsMenuModule,
+                        FsColorPickerModule,
+                        ClipboardModule,
+                    ],
+                    exports: [
+                        DashboardComponent,
+                        CronsComponent,
+                        SettingsComponent,
+                        FileManagerComponent,
+                        ProcessesComponent,
+                        ServerLogsComponent,
+                        UpgradeLogsComponent,
+                        ApiLogsComponent,
+                        InfoComponent,
+                    ],
+                    declarations: [
+                        DashboardComponent,
+                        CronsComponent,
+                        SettingsComponent,
+                        KeyNameValuePipe,
+                        FileManagerComponent,
+                        ProcessesComponent,
+                        ServerLogComponent,
+                        ServerLogsComponent,
+                        UpgradeLogsComponent,
+                        ApiLogsComponent,
+                        ApiLogComponent,
+                        InfoComponent,
+                        ProcessComponent,
+                        CronComponent,
+                        CronLogComponent,
+                    ],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FileManagerComponent, FsSystemModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, ServerLogComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };