@firestitch/system 14.0.0 → 16.0.0

package/{fesm2020 → fesm2022}/firestitch-system.mjs

@@ -63,14 +63,16 @@ import * as i2$2 from '@firestitch/build';
 import * as i13 from '@angular/material/core';
 
 class ExplainComponent {
+    _data;
+    explain;
     constructor(_data) {
         this._data = _data;
         this.explain = _data.explain;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExplainComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExplainComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Explain</h1>\n  <mat-dialog-content>\n    <div class=\"explain-popover\">{{explain | json}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".explain-popover{white-space:pre}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ExplainComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExplainComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ExplainComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ExplainComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Explain</h1>\n  <mat-dialog-content>\n    <div class=\"explain-popover\">{{explain | json}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".explain-popover{white-space:pre}\n"], dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ExplainComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExplainComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>Explain</h1>\n  <mat-dialog-content>\n    <div class=\"explain-popover\">{{explain | json}}</div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".explain-popover{white-space:pre}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -79,22 +81,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }]; } });
 
 class QueryLogComponent {
+    _data;
+    _dialog;
+    queryLog;
+    accessTypes = {
+        NULL: 'This access method means MySQL can resolve the query during the optimization phase and will not even access the table or index during the execution stage.',
+        system: 'The table is empty or has one row.',
+        const: 'The value of the column can be treated as a constant (there is one row matching the query). Note: Primary Key Lookup, Unique Index Lookup',
+        eq_ref: 'The index is clustered and is being used by the operation (either the index is a PRIMARY KEY or UNIQUE INDEX with all key columns defined as NOT NULL)',
+        ref: 'The indexed column was accessed using an equality operator Note: The ref_or_null access type is a variation on ref. It means MySQL must do a second lookup to find NULL entries after doing the initial lookup.',
+        fulltext: 'Operation (JOIN) is using the table’s fulltext index',
+        index: 'The entire index is scanned to find a match for the query. Note: The main advantage is that this avoids sorting. The biggest disadvantage is the cost of reading an entire table in index order. This usually means accessing the rows in random order, which is very expensive.',
+        index_merge: 'This join type indicates that the Index Merge optimization is used. In this case, the key column in the output row contains a list of indexes used. It indicates a query can make limited use of multiple indexes on a single table.',
+        range: 'This type replaces eq_ref for some IN subqueries of the following form: value IN (SELECT primary_key FROM single_table WHERE some_expr)',
+        unique_subquery: '',
+        ALL: 'MySQL scans the entire table to satisfy the query',
+    };
     constructor(_data, _dialog) {
         this._data = _data;
         this._dialog = _dialog;
-        this.accessTypes = {
-            NULL: 'This access method means MySQL can resolve the query during the optimization phase and will not even access the table or index during the execution stage.',
-            system: 'The table is empty or has one row.',
-            const: 'The value of the column can be treated as a constant (there is one row matching the query). Note: Primary Key Lookup, Unique Index Lookup',
-            eq_ref: 'The index is clustered and is being used by the operation (either the index is a PRIMARY KEY or UNIQUE INDEX with all key columns defined as NOT NULL)',
-            ref: 'The indexed column was accessed using an equality operator Note: The ref_or_null access type is a variation on ref. It means MySQL must do a second lookup to find NULL entries after doing the initial lookup.',
-            fulltext: 'Operation (JOIN) is using the table’s fulltext index',
-            index: 'The entire index is scanned to find a match for the query. Note: The main advantage is that this avoids sorting. The biggest disadvantage is the cost of reading an entire table in index order. This usually means accessing the rows in random order, which is very expensive.',
-            index_merge: 'This join type indicates that the Index Merge optimization is used. In this case, the key column in the output row contains a list of indexes used. It indicates a query can make limited use of multiple indexes on a single table.',
-            range: 'This type replaces eq_ref for some IN subqueries of the following form: value IN (SELECT primary_key FROM single_table WHERE some_expr)',
-            unique_subquery: '',
-            ALL: 'MySQL scans the entire table to satisfy the query',
-        };
         this.queryLog = _data.queryLog;
     }
     openExplain() {
@@ -111,10 +116,10 @@ class QueryLogComponent {
     get orderingOperation() {
         return this.queryBlock?.orderingOperation;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueryLogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QueryLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Query Log</h1>\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>Duration</fs-label>\n        {{queryLog.duration}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Optimized</fs-label>\n        {{queryLog.optimized ? 'Yes' : 'No'}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{queryLog.queryCost}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Raw Explain</fs-label>\n        <a (click)=\"openExplain()\">View</a>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>URL</fs-label>\n        {{queryLog.path | fsFormatTruncate: 50}}\n      </fs-label-field>\n    </div>\n\n    <mat-tab-group>\n      <mat-tab label=\"Query\">\n        <fs-clipboard-button\n          [content]=\"queryLog.prettyQuery\">\n        </fs-clipboard-button>\n        <div [innerHTML]=\"queryLog.prettyQuery\" class=\"query\"></div>\n      </mat-tab>\n      \n      <mat-tab label=\"Explain\">\n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock, selectId: queryBlock.selectId, costInfo: queryBlock.costInfo }\"></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n\n<ng-template #nestedLoop let-queryBlock=\"queryBlock\" let-selectId=\"selectId\" let-costInfo=\"costInfo\">\n  <ng-container *ngIf=\"selectId\">\n    <h1>Select {{selectId}}</h1>\n  </ng-container>\n  \n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    <ng-container *ngIf=\"costInfo?.queryCost\">\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{costInfo.queryCost}}\n      </fs-label-field>\n    </ng-container>\n    <ng-container *ngIf=\"queryBlock.orderingOperation\">\n      <fs-label-field>\n        <fs-label>Ordering Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.groupingOperation\">\n      <fs-label-field>\n        <fs-label>Grouping Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n      <fs-label-field>\n        <fs-label>Duplicates Removal</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"queryBlock.orderingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.groupingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.table\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: { nestedLoop: [ queryBlock ]} }\"></ng-container>\n  \n    <ng-container *ngIf=\"queryBlock.table.attachedSubqueries\">  \n      <fs-label>Attached Subqueries</fs-label>\n      <ng-container *ngFor=\"let subquery of queryBlock.table.attachedSubqueries\">\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n      </ng-container>\n    </ng-container>    \n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.nestedLoop\">\n    <table class=\"fs-list-table style-line\">\n       <thead>\n         <tr>\n           <th>Table</th>\n           <th>Type</th>\n           <th>Keys</th>\n           <th>Ref</th>\n           <th>Rows</th>\n           <th>Filtered</th>\n           <th>Extra</th>\n           <th>Cost</th>\n         </tr>\n       </thead>\n       <tbody>\n         <ng-container *ngFor=\"let item of queryBlock.nestedLoop; let index = index\">\n           <tr>\n             <td>\n               {{item.table.tableName}}\n             </td>\n             <td>\n               <fs-popover [template]=\"accessTypePopover\" [data]=\"item.table.accessType\">\n                 <span class=\"access-type\" [ngClass]=\"item.table.accessType\">{{item.table.accessType}}</span>\n               </fs-popover>            \n             </td>\n             <td>\n               <fs-popover          \n                   [template]=\"keysPopover\"\n                   [maxWidth]=\"null\"\n                   [data]=\"{ possibleKeys: item.table.possibleKeys, key: item.table.key }\">\n                 {{item.table.key}}\n               </fs-popover>\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngFor=\"let ref of item.table.ref\">\n                   <span>{{ref}}</span>\n                 </ng-container>\n               </div>\n             </td>\n             <td>\n               {{item.table.rowsExaminedPerScan}}\n             </td>\n             <td>\n               {{item.table.filtered}}\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngIf=\"item.table.indexCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingIndexCondition\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.indexCondition\">\n                       Using Index Condition\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.table.attachedCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingWhere\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.attachedCondition\">\n                       Using Where\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.usingIndex\">\n                   <span>Using Index</span>\n                 </ng-container>    \n                <ng-container *ngIf=\"item.usingFilesort\">\n                  <span class=\"critical\">Using File Sort</span>\n                </ng-container>\n                \n                <ng-container *ngIf=\"item.usingTemporaryTable\">\n                  <span class=\"critical\">Temporary Table</span>\n                </ng-container>\n               </div>\n             </td>\n             <td>     \n              <fs-popover [template]=\"tableCostPopover\" [data]=\"item.table?.costInfo\">\n                {{item.table?.costInfo.prefixCost}}\n              </fs-popover>\n              <ng-template #tableCostPopover let-data=\"data\">\n                <div>Eval Cost: {{data.evalCost}}</div>\n                <div>Read Cost: {{data.readCost}}</div>\n                <div>Prefix Cost: {{data.prefixCost}}</div>\n                <div>Data Read Per Join: {{data.dataReadPerJoin}}</div>\n              </ng-template>\n             </td>\n           </tr>\n         </ng-container>\n       </tbody>\n     </table>\n     <br>\n   </ng-container>  \n  \n  <ng-container *ngIf=\"queryBlock.selectListSubqueries\">\n    <br>\n    <fs-label>Select List Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.selectListSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n    </ng-container>\n  </ng-container>\n<!-- \n  <ng-container *ngIf=\"queryBlock.queryBlockattachedSubqueries\">\n    <br>\n    <fs-label>Attached Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.attachedSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n    </ng-container>\n  </ng-container> -->\n</ng-template>\n\n<ng-template #keysPopover let-data=\"data\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngFor=\"let possibleKey of data.possibleKeys\">\n      <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #usingWhere let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #usingIndexCondition let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #accessTypePopover let-data=\"data\">\n  {{accessTypes[data]}}\n</ng-template>\n\n\n<ng-template #queryBlockCritical let-queryBlock=\"queryBlock\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngIf=\"queryBlock.usingFilesort\">\n      <span class=\"critical\">Using File Sort</span>\n    </ng-container>\n    \n    <ng-container *ngIf=\"queryBlock.usingTemporaryTable\">\n      <span class=\"critical\">Temporary Table</span>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["::ng-deep .query-log-used-key{font-weight:700}::ng-deep .explain-popover{white-space:pre}.critical{color:red}fs-clipboard-button{float:right}.query{white-space:break-spaces}.access-type{color:green}.access-type.fulltext,.access-type.index,.access-type.range{color:orange}.access-type.ALL{color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button]:not([fsFormButtonStandalone]),[mat-button]:not([fsFormButtonStandalone]),[mat-flat-button]:not([fsFormButtonStandalone]),[mat-stroked-button]:not([fsFormButtonStandalone])", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i7.FsPopoverComponent, selector: "fs-popover" }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "component", type: i2$1.FsClipboardButtonComponent, selector: "fs-clipboard-button", inputs: ["content", "tooltip"] }, { kind: "pipe", type: i10.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-QueryLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QueryLogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-QueryLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QueryLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>Query Log</h1>\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>Duration</fs-label>\n        {{queryLog.duration}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Optimized</fs-label>\n        {{queryLog.optimized ? 'Yes' : 'No'}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{queryLog.queryCost}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Raw Explain</fs-label>\n        <a (click)=\"openExplain()\">View</a>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>URL</fs-label>\n        {{queryLog.path | fsFormatTruncate: 50}}\n      </fs-label-field>\n    </div>\n\n    <mat-tab-group>\n      <mat-tab label=\"Query\">\n        <fs-clipboard-button\n          [content]=\"queryLog.prettyQuery\">\n        </fs-clipboard-button>\n        <div [innerHTML]=\"queryLog.prettyQuery\" class=\"query\"></div>\n      </mat-tab>\n      \n      <mat-tab label=\"Explain\">\n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock, selectId: queryBlock.selectId, costInfo: queryBlock.costInfo }\"></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n\n<ng-template #nestedLoop let-queryBlock=\"queryBlock\" let-selectId=\"selectId\" let-costInfo=\"costInfo\">\n  <ng-container *ngIf=\"selectId\">\n    <h1>Select {{selectId}}</h1>\n  </ng-container>\n  \n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    <ng-container *ngIf=\"costInfo?.queryCost\">\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{costInfo.queryCost}}\n      </fs-label-field>\n    </ng-container>\n    <ng-container *ngIf=\"queryBlock.orderingOperation\">\n      <fs-label-field>\n        <fs-label>Ordering Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.groupingOperation\">\n      <fs-label-field>\n        <fs-label>Grouping Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n      <fs-label-field>\n        <fs-label>Duplicates Removal</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"queryBlock.orderingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.groupingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.table\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: { nestedLoop: [ queryBlock ]} }\"></ng-container>\n  \n    <ng-container *ngIf=\"queryBlock.table.attachedSubqueries\">  \n      <fs-label>Attached Subqueries</fs-label>\n      <ng-container *ngFor=\"let subquery of queryBlock.table.attachedSubqueries\">\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n      </ng-container>\n    </ng-container>    \n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.nestedLoop\">\n    <table class=\"fs-list-table style-line\">\n       <thead>\n         <tr>\n           <th>Table</th>\n           <th>Type</th>\n           <th>Keys</th>\n           <th>Ref</th>\n           <th>Rows</th>\n           <th>Filtered</th>\n           <th>Extra</th>\n           <th>Cost</th>\n         </tr>\n       </thead>\n       <tbody>\n         <ng-container *ngFor=\"let item of queryBlock.nestedLoop; let index = index\">\n           <tr>\n             <td>\n               {{item.table.tableName}}\n             </td>\n             <td>\n               <fs-popover [template]=\"accessTypePopover\" [data]=\"item.table.accessType\">\n                 <span class=\"access-type\" [ngClass]=\"item.table.accessType\">{{item.table.accessType}}</span>\n               </fs-popover>            \n             </td>\n             <td>\n               <fs-popover          \n                   [template]=\"keysPopover\"\n                   [maxWidth]=\"null\"\n                   [data]=\"{ possibleKeys: item.table.possibleKeys, key: item.table.key }\">\n                 {{item.table.key}}\n               </fs-popover>\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngFor=\"let ref of item.table.ref\">\n                   <span>{{ref}}</span>\n                 </ng-container>\n               </div>\n             </td>\n             <td>\n               {{item.table.rowsExaminedPerScan}}\n             </td>\n             <td>\n               {{item.table.filtered}}\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngIf=\"item.table.indexCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingIndexCondition\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.indexCondition\">\n                       Using Index Condition\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.table.attachedCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingWhere\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.attachedCondition\">\n                       Using Where\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.usingIndex\">\n                   <span>Using Index</span>\n                 </ng-container>    \n                <ng-container *ngIf=\"item.usingFilesort\">\n                  <span class=\"critical\">Using File Sort</span>\n                </ng-container>\n                \n                <ng-container *ngIf=\"item.usingTemporaryTable\">\n                  <span class=\"critical\">Temporary Table</span>\n                </ng-container>\n               </div>\n             </td>\n             <td>     \n              <fs-popover [template]=\"tableCostPopover\" [data]=\"item.table?.costInfo\">\n                {{item.table?.costInfo.prefixCost}}\n              </fs-popover>\n              <ng-template #tableCostPopover let-data=\"data\">\n                <div>Eval Cost: {{data.evalCost}}</div>\n                <div>Read Cost: {{data.readCost}}</div>\n                <div>Prefix Cost: {{data.prefixCost}}</div>\n                <div>Data Read Per Join: {{data.dataReadPerJoin}}</div>\n              </ng-template>\n             </td>\n           </tr>\n         </ng-container>\n       </tbody>\n     </table>\n     <br>\n   </ng-container>  \n  \n  <ng-container *ngIf=\"queryBlock.selectListSubqueries\">\n    <br>\n    <fs-label>Select List Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.selectListSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n    </ng-container>\n  </ng-container>\n<!-- \n  <ng-container *ngIf=\"queryBlock.queryBlockattachedSubqueries\">\n    <br>\n    <fs-label>Attached Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.attachedSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n    </ng-container>\n  </ng-container> -->\n</ng-template>\n\n<ng-template #keysPopover let-data=\"data\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngFor=\"let possibleKey of data.possibleKeys\">\n      <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #usingWhere let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #usingIndexCondition let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #accessTypePopover let-data=\"data\">\n  {{accessTypes[data]}}\n</ng-template>\n\n\n<ng-template #queryBlockCritical let-queryBlock=\"queryBlock\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngIf=\"queryBlock.usingFilesort\">\n      <span class=\"critical\">Using File Sort</span>\n    </ng-container>\n    \n    <ng-container *ngIf=\"queryBlock.usingTemporaryTable\">\n      <span class=\"critical\">Temporary Table</span>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["::ng-deep .query-log-used-key{font-weight:700}::ng-deep .explain-popover{white-space:pre}.critical{color:red}fs-clipboard-button{float:right}.query{white-space:break-spaces}.access-type{color:green}.access-type.fulltext,.access-type.index,.access-type.range{color:orange}.access-type.ALL{color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i7.FsPopoverComponent, selector: "fs-popover" }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i2$1.FsClipboardButtonComponent, selector: "fs-clipboard-button", inputs: ["content", "tooltip"] }, { kind: "pipe", type: i10.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QueryLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueryLogComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog>\n  <h1 mat-dialog-title>Query Log</h1>\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>Duration</fs-label>\n        {{queryLog.duration}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Optimized</fs-label>\n        {{queryLog.optimized ? 'Yes' : 'No'}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{queryLog.queryCost}}\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>Raw Explain</fs-label>\n        <a (click)=\"openExplain()\">View</a>\n      </fs-label-field>\n\n      <fs-label-field>\n        <fs-label>URL</fs-label>\n        {{queryLog.path | fsFormatTruncate: 50}}\n      </fs-label-field>\n    </div>\n\n    <mat-tab-group>\n      <mat-tab label=\"Query\">\n        <fs-clipboard-button\n          [content]=\"queryLog.prettyQuery\">\n        </fs-clipboard-button>\n        <div [innerHTML]=\"queryLog.prettyQuery\" class=\"query\"></div>\n      </mat-tab>\n      \n      <mat-tab label=\"Explain\">\n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock, selectId: queryBlock.selectId, costInfo: queryBlock.costInfo }\"></ng-container>\n      </mat-tab>\n    </mat-tab-group>\n\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n\n<ng-template #nestedLoop let-queryBlock=\"queryBlock\" let-selectId=\"selectId\" let-costInfo=\"costInfo\">\n  <ng-container *ngIf=\"selectId\">\n    <h1>Select {{selectId}}</h1>\n  </ng-container>\n  \n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    <ng-container *ngIf=\"costInfo?.queryCost\">\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{costInfo.queryCost}}\n      </fs-label-field>\n    </ng-container>\n    <ng-container *ngIf=\"queryBlock.orderingOperation\">\n      <fs-label-field>\n        <fs-label>Ordering Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.groupingOperation\">\n      <fs-label-field>\n        <fs-label>Grouping Operation</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n\n    <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n      <fs-label-field>\n        <fs-label>Duplicates Removal</fs-label>\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n      </fs-label-field>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"queryBlock.orderingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.groupingOperation\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.duplicatesRemoval\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.table\">\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: { nestedLoop: [ queryBlock ]} }\"></ng-container>\n  \n    <ng-container *ngIf=\"queryBlock.table.attachedSubqueries\">  \n      <fs-label>Attached Subqueries</fs-label>\n      <ng-container *ngFor=\"let subquery of queryBlock.table.attachedSubqueries\">\n        <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n        <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n      </ng-container>\n    </ng-container>    \n  </ng-container>\n\n  <ng-container *ngIf=\"queryBlock.nestedLoop\">\n    <table class=\"fs-list-table style-line\">\n       <thead>\n         <tr>\n           <th>Table</th>\n           <th>Type</th>\n           <th>Keys</th>\n           <th>Ref</th>\n           <th>Rows</th>\n           <th>Filtered</th>\n           <th>Extra</th>\n           <th>Cost</th>\n         </tr>\n       </thead>\n       <tbody>\n         <ng-container *ngFor=\"let item of queryBlock.nestedLoop; let index = index\">\n           <tr>\n             <td>\n               {{item.table.tableName}}\n             </td>\n             <td>\n               <fs-popover [template]=\"accessTypePopover\" [data]=\"item.table.accessType\">\n                 <span class=\"access-type\" [ngClass]=\"item.table.accessType\">{{item.table.accessType}}</span>\n               </fs-popover>            \n             </td>\n             <td>\n               <fs-popover          \n                   [template]=\"keysPopover\"\n                   [maxWidth]=\"null\"\n                   [data]=\"{ possibleKeys: item.table.possibleKeys, key: item.table.key }\">\n                 {{item.table.key}}\n               </fs-popover>\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngFor=\"let ref of item.table.ref\">\n                   <span>{{ref}}</span>\n                 </ng-container>\n               </div>\n             </td>\n             <td>\n               {{item.table.rowsExaminedPerScan}}\n             </td>\n             <td>\n               {{item.table.filtered}}\n             </td>\n             <td>\n               <div class=\"fs-delimit\">\n                 <ng-container *ngIf=\"item.table.indexCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingIndexCondition\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.indexCondition\">\n                       Using Index Condition\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.table.attachedCondition\">\n                   <span>\n                     <fs-popover \n                         [template]=\"usingWhere\" \n                         [maxWidth]=\"null\"\n                         [data]=\"item.table.attachedCondition\">\n                       Using Where\n                     </fs-popover>\n                   </span>\n                 </ng-container>\n                 <ng-container *ngIf=\"item.usingIndex\">\n                   <span>Using Index</span>\n                 </ng-container>    \n                <ng-container *ngIf=\"item.usingFilesort\">\n                  <span class=\"critical\">Using File Sort</span>\n                </ng-container>\n                \n                <ng-container *ngIf=\"item.usingTemporaryTable\">\n                  <span class=\"critical\">Temporary Table</span>\n                </ng-container>\n               </div>\n             </td>\n             <td>     \n              <fs-popover [template]=\"tableCostPopover\" [data]=\"item.table?.costInfo\">\n                {{item.table?.costInfo.prefixCost}}\n              </fs-popover>\n              <ng-template #tableCostPopover let-data=\"data\">\n                <div>Eval Cost: {{data.evalCost}}</div>\n                <div>Read Cost: {{data.readCost}}</div>\n                <div>Prefix Cost: {{data.prefixCost}}</div>\n                <div>Data Read Per Join: {{data.dataReadPerJoin}}</div>\n              </ng-template>\n             </td>\n           </tr>\n         </ng-container>\n       </tbody>\n     </table>\n     <br>\n   </ng-container>  \n  \n  <ng-container *ngIf=\"queryBlock.selectListSubqueries\">\n    <br>\n    <fs-label>Select List Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.selectListSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container> \n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock, selectId: subquery.queryBlock.selectId, costInfo: subquery.queryBlock.costInfo }\"></ng-container>\n    </ng-container>\n  </ng-container>\n<!-- \n  <ng-container *ngIf=\"queryBlock.queryBlockattachedSubqueries\">\n    <br>\n    <fs-label>Attached Subqueries</fs-label>\n    <ng-container *ngFor=\"let subquery of queryBlock.attachedSubqueries\">\n      <ng-container [ngTemplateOutlet]=\"queryBlockCritical\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: subquery.queryBlock }\"></ng-container>\n    </ng-container>\n  </ng-container> -->\n</ng-template>\n\n<ng-template #keysPopover let-data=\"data\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngFor=\"let possibleKey of data.possibleKeys\">\n      <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #usingWhere let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #usingIndexCondition let-data=\"data\">\n  {{data}}\n</ng-template>\n\n<ng-template #accessTypePopover let-data=\"data\">\n  {{accessTypes[data]}}\n</ng-template>\n\n\n<ng-template #queryBlockCritical let-queryBlock=\"queryBlock\">\n  <div class=\"fs-delimit\">\n    <ng-container *ngIf=\"queryBlock.usingFilesort\">\n      <span class=\"critical\">Using File Sort</span>\n    </ng-container>\n    \n    <ng-container *ngIf=\"queryBlock.usingTemporaryTable\">\n      <span class=\"critical\">Temporary Table</span>\n    </ng-container>\n  </div>\n</ng-template>", styles: ["::ng-deep .query-log-used-key{font-weight:700}::ng-deep .explain-popover{white-space:pre}.critical{color:red}fs-clipboard-button{float:right}.query{white-space:break-spaces}.access-type{color:green}.access-type.fulltext,.access-type.index,.access-type.range{color:orange}.access-type.ALL{color:red}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -123,6 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }, { type: i1.MatDialog }]; } });
 
 class QueryLogsComponent {
+    _dialog;
+    list;
+    loadQueryLogs;
+    purgeQueryLogs;
+    listConfig;
     constructor(_dialog) {
         this._dialog = _dialog;
     }
@@ -179,10 +189,10 @@ class QueryLogsComponent {
             },
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueryLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QueryLogsComponent, selector: "fs-system-query-logs", inputs: { loadQueryLogs: "loadQueryLogs", purgeQueryLogs: "purgeQueryLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column title=\"Optimized\" name=\"optimized\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <span [ngClass]=\"{ optimized: row.optimized, 'not-optimized': !row.optimized }\">\n        {{row.optimized ? 'Yes' : 'No'}}\n      </span>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Duration\" name=\"duration\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.duration}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Cost\" name=\"query_cost\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.queryCost}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Query\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openQueryLog(row)\">{{ row.query | fsFormatTruncate: 500 }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Created\" name=\"query_log_id\" [sortable]=\"true\" [direction]=\"'desc'\" [sortableDefault]=\"true\">\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>", styles: [":host ::ng-deep .optimized{color:green}:host ::ng-deep .not-optimized{color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i10.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-QueryLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QueryLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-QueryLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: QueryLogsComponent, selector: "fs-system-query-logs", inputs: { loadQueryLogs: "loadQueryLogs", purgeQueryLogs: "purgeQueryLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column title=\"Optimized\" name=\"optimized\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <span [ngClass]=\"{ optimized: row.optimized, 'not-optimized': !row.optimized }\">\n        {{row.optimized ? 'Yes' : 'No'}}\n      </span>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Duration\" name=\"duration\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.duration}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Cost\" name=\"query_cost\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.queryCost}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Query\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openQueryLog(row)\">{{ row.query | fsFormatTruncate: 500 }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Created\" name=\"query_log_id\" [sortable]=\"true\" [direction]=\"'desc'\" [sortableDefault]=\"true\">\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>", styles: [":host ::ng-deep .optimized{color:green}:host ::ng-deep .not-optimized{color:red}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i10.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: QueryLogsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QueryLogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-query-logs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column title=\"Optimized\" name=\"optimized\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <span [ngClass]=\"{ optimized: row.optimized, 'not-optimized': !row.optimized }\">\n        {{row.optimized ? 'Yes' : 'No'}}\n      </span>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Duration\" name=\"duration\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.duration}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Cost\" name=\"query_cost\" [sortable]=\"true\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.queryCost}}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Query\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <a (click)=\"openQueryLog(row)\">{{ row.query | fsFormatTruncate: 500 }}</a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Created\" name=\"query_log_id\" [sortable]=\"true\" [direction]=\"'desc'\" [sortableDefault]=\"true\">\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>", styles: [":host ::ng-deep .optimized{color:green}:host ::ng-deep .not-optimized{color:red}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { list: [{
@@ -195,41 +205,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class FsSystemQueryLogsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemQueryLogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsSystemQueryLogsModule, declarations: [QueryLogsComponent,
+            QueryLogComponent,
+            ExplainComponent], imports: [CommonModule,
+            RouterModule,
+            CommonModule,
+            FormsModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatDialogModule,
+            FsFormModule,
+            FsLabelModule,
+            FsPopoverModule,
+            FsCommonModule,
+            FsDateModule,
+            FsDialogModule,
+            FsListModule,
+            FsClipboardModule], exports: [QueryLogsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemQueryLogsModule, imports: [CommonModule,
+            RouterModule,
+            CommonModule,
+            FormsModule,
+            MatTabsModule,
+            MatButtonModule,
+            MatDialogModule,
+            FsFormModule,
+            FsLabelModule,
+            FsPopoverModule,
+            FsCommonModule,
+            FsDateModule,
+            FsDialogModule,
+            FsListModule,
+            FsClipboardModule] });
 }
-FsSystemQueryLogsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemQueryLogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsSystemQueryLogsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsSystemQueryLogsModule, declarations: [QueryLogsComponent,
-        QueryLogComponent,
-        ExplainComponent], imports: [CommonModule,
-        RouterModule,
-        CommonModule,
-        FormsModule,
-        MatTabsModule,
-        MatButtonModule,
-        MatDialogModule,
-        FsFormModule,
-        FsLabelModule,
-        FsPopoverModule,
-        FsCommonModule,
-        FsDateModule,
-        FsDialogModule,
-        FsListModule,
-        FsClipboardModule], exports: [QueryLogsComponent] });
-FsSystemQueryLogsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemQueryLogsModule, imports: [CommonModule,
-        RouterModule,
-        CommonModule,
-        FormsModule,
-        MatTabsModule,
-        MatButtonModule,
-        MatDialogModule,
-        FsFormModule,
-        FsLabelModule,
-        FsPopoverModule,
-        FsCommonModule,
-        FsDateModule,
-        FsDialogModule,
-        FsListModule,
-        FsClipboardModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemQueryLogsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemQueryLogsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -391,6 +401,10 @@ function indexNameValue(arry) {
 }
 
 class ApiLogComponent {
+    _dialogRef;
+    data;
+    apiLog;
+    apiLogStates;
     constructor(_dialogRef, data) {
         this._dialogRef = _dialogRef;
         this.data = data;
@@ -401,10 +415,10 @@ class ApiLogComponent {
             this.apiLog = this.data.apiLog;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiLogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\n\n  <div mat-dialog-title>API Log</div>\n\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"apiLog.code\">\n        <fs-label>\n          Code\n        </fs-label>\n        {{apiLog.code}}\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.direction\">\n        <fs-label>\n          Direction\n        </fs-label>\n        {{apiLog.direction}}\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      <ng-container *ngIf=\"apiLog.method\">\n        <fs-label-field *ngIf=\"apiLog.method\">\n          <fs-label>\n            Method\n          </fs-label>\n          {{apiLog.method}}\n        </fs-label-field>\n      </ng-container>\n    \n      <fs-label-field *ngIf=\"apiLog.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{apiLog.url}}\n      </fs-label-field>\n    </div>\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    <div>\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    </div>\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  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }] });
 }
-ApiLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApiLogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApiLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"apiLog\">\n\n  <div mat-dialog-title>API Log</div>\n\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"apiLog.code\">\n        <fs-label>\n          Code\n        </fs-label>\n        {{apiLog.code}}\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.direction\">\n        <fs-label>\n          Direction\n        </fs-label>\n        {{apiLog.direction}}\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      <ng-container *ngIf=\"apiLog.method\">\n        <fs-label-field *ngIf=\"apiLog.method\">\n          <fs-label>\n            Method\n          </fs-label>\n          {{apiLog.method}}\n        </fs-label-field>\n      </ng-container>\n    \n      <fs-label-field *ngIf=\"apiLog.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{apiLog.url}}\n      </fs-label-field>\n    </div>\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    <div>\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    </div>\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  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApiLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiLogComponent, decorators: [{
             type: Component,
             args: [{ template: "<fs-dialog *fsSkeleton=\"apiLog\">\n\n  <div mat-dialog-title>API Log</div>\n\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"apiLog.code\">\n        <fs-label>\n          Code\n        </fs-label>\n        {{apiLog.code}}\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.direction\">\n        <fs-label>\n          Direction\n        </fs-label>\n        {{apiLog.direction}}\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      <ng-container *ngIf=\"apiLog.method\">\n        <fs-label-field *ngIf=\"apiLog.method\">\n          <fs-label>\n            Method\n          </fs-label>\n          {{apiLog.method}}\n        </fs-label-field>\n      </ng-container>\n    \n      <fs-label-field *ngIf=\"apiLog.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{apiLog.url}}\n      </fs-label-field>\n    </div>\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    <div>\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    </div>\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  </mat-dialog-actions>\n</fs-dialog>\n" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
@@ -413,10 +427,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }]; } });
 
 class ApiLogsComponent {
+    _dialog;
+    list;
+    loadApiLogs;
+    config = null;
+    apiLogStates = indexNameValue(ApiLogStates);
     constructor(_dialog) {
         this._dialog = _dialog;
-        this.config = null;
-        this.apiLogStates = indexNameValue(ApiLogStates);
     }
     ngOnInit() {
         this._configList();
@@ -454,10 +471,10 @@ class ApiLogsComponent {
             width: '85%',
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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)\">\n          {{row.type || 'Unknown'}}\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n        </a>\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        <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\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>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: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }] });
 }
-ApiLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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)\">\n          {{row.type || 'Unknown'}}\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n        </a>\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        <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\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>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: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApiLogsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiLogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-api-logs', 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)\">\n          {{row.type || 'Unknown'}}\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n          <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n        </a>\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        <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\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>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: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { list: [{
@@ -468,10 +485,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class CronLogComponent {
+    _data;
+    cronLog;
+    CronLogStates = indexNameValue(CronLogStates);
+    CronLogStateColors = {};
     constructor(_data) {
         this._data = _data;
-        this.CronLogStates = indexNameValue(CronLogStates);
-        this.CronLogStateColors = {};
     }
     ngOnInit() {
         this.cronLog = this._data.cronLog;
@@ -481,10 +500,10 @@ class CronLogComponent {
             return accum;
         }, {});
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }] });
 }
-CronLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CronLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronLogComponent, decorators: [{
             type: Component,
             args: [{ 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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -493,15 +512,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }]; } });
 
 class CronComponent {
+    _data;
+    _dialog;
+    _cdRef;
+    cron;
+    tabIndex = 0;
+    CronStates = indexNameValue(CronStates);
+    CronProcessStates = indexNameValue(CronProcessStates);
+    CronLogStates = indexNameValue(CronLogStates);
+    CronLogStateColors = {};
+    config;
+    cronActions;
     constructor(_data, _dialog, _cdRef) {
         this._data = _data;
         this._dialog = _dialog;
         this._cdRef = _cdRef;
-        this.tabIndex = 0;
-        this.CronStates = indexNameValue(CronStates);
-        this.CronProcessStates = indexNameValue(CronProcessStates);
-        this.CronLogStates = indexNameValue(CronLogStates);
-        this.CronLogStateColors = {};
     }
     ngOnInit() {
         this.load();
@@ -569,10 +594,10 @@ class CronComponent {
             this._cdRef.markForCheck();
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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=\"fs-row.gap-lg.wrap.align-start\">\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              Process ID\n            </fs-label>\n            {{cron.processId || 'None'}}\n            <ng-container *ngIf=\"cron.processId\">\n              <div class=\"small\">\n                {{CronProcessStates[cron.processState] || 'Unknown'}}\n              </div>\n            </ng-container>\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\n          <fs-label-field>\n            <fs-label>\n              Timeout hours\n            </fs-label>\n            {{cron.cronSetting?.timeout || 'N/A'}}\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 title=\"Duration\" class=\"col-message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <ng-container *ngIf=\"row.duration\">\n                  {{row.duration | fsDateDuration: 'hour-minute-second'}}\n                </ng-container>\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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-CronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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=\"fs-row.gap-lg.wrap.align-start\">\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              Process ID\n            </fs-label>\n            {{cron.processId || 'None'}}\n            <ng-container *ngIf=\"cron.processId\">\n              <div class=\"small\">\n                {{CronProcessStates[cron.processState] || 'Unknown'}}\n              </div>\n            </ng-container>\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\n          <fs-label-field>\n            <fs-label>\n              Timeout hours\n            </fs-label>\n            {{cron.cronSetting?.timeout || 'N/A'}}\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 title=\"Duration\" class=\"col-message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <ng-container *ngIf=\"row.duration\">\n                  {{row.duration | fsDateDuration: 'hour-minute-second'}}\n                </ng-container>\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"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i4$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i4$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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=\"fs-row.gap-lg.wrap.align-start\">\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              Process ID\n            </fs-label>\n            {{cron.processId || 'None'}}\n            <ng-container *ngIf=\"cron.processId\">\n              <div class=\"small\">\n                {{CronProcessStates[cron.processState] || 'Unknown'}}\n              </div>\n            </ng-container>\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\n          <fs-label-field>\n            <fs-label>\n              Timeout hours\n            </fs-label>\n            {{cron.cronSetting?.timeout || 'N/A'}}\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 title=\"Duration\" class=\"col-message\">\n              <ng-template fs-list-cell let-row=\"row\">\n                <ng-container *ngIf=\"row.duration\">\n                  {{row.duration | fsDateDuration: 'hour-minute-second'}}\n                </ng-container>\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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -581,9 +606,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }, { type: i1.MatDialog }, { type: i0.ChangeDetectorRef }]; } });
 
 class CronNextRunComponent {
+    _cdRef;
+    cron;
+    duration;
+    _destroy$ = new Subject();
     constructor(_cdRef) {
         this._cdRef = _cdRef;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         this.update();
@@ -662,10 +690,10 @@ class CronNextRunComponent {
         }
         return 0;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronNextRunComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CronNextRunComponent, selector: "app-next-run", inputs: { cron: "cron" }, ngImport: i0, template: "<ng-container *ngIf=\"duration > 60; else seconds\">\n  {{duration | fsDateDuration: { hours: true, seconds: true, minutes: true, days: true} }}\n</ng-container>\n\n<ng-template #seconds>\n  {{duration}}s\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-CronNextRunComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronNextRunComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CronNextRunComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CronNextRunComponent, selector: "app-next-run", inputs: { cron: "cron" }, ngImport: i0, template: "<ng-container *ngIf=\"duration > 60; else seconds\">\n  {{duration | fsDateDuration: { hours: true, seconds: true, minutes: true, days: true} }}\n</ng-container>\n\n<ng-template #seconds>\n  {{duration}}s\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronNextRunComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronNextRunComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-next-run', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"duration > 60; else seconds\">\n  {{duration | fsDateDuration: { hours: true, seconds: true, minutes: true, days: true} }}\n</ng-container>\n\n<ng-template #seconds>\n  {{duration}}s\n</ng-template>\n\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { cron: [{
@@ -673,15 +701,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class CronsComponent {
+    _message;
+    _dialog;
+    _prompt;
+    list;
+    enable;
+    disable;
+    kill;
+    queue;
+    run;
+    loadCrons;
+    loadCron;
+    loadCronLogs;
+    bulk;
+    config = null;
+    CronStates = indexNameValue(CronStates);
+    CronProcessStates = indexNameValue(CronProcessStates);
+    CronState = CronState;
+    _destroy$ = new Subject();
     constructor(_message, _dialog, _prompt) {
         this._message = _message;
         this._dialog = _dialog;
         this._prompt = _prompt;
-        this.config = null;
-        this.CronStates = indexNameValue(CronStates);
-        this.CronProcessStates = indexNameValue(CronProcessStates);
-        this.CronState = CronState;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         this._configList();
@@ -855,10 +896,10 @@ class CronsComponent {
             };
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronsComponent, deps: [{ token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 align=\"center\">\n    <ng-template fs-list-header>Status</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.host || row.processId; else status\">\n        <fs-popover \n            [maxWidth]=\"null\"\n            [template]=\"statusPopover\" \n            [indication]=\"true\"\n            size=\"small\">\n          <ng-container *ngTemplateOutlet=\"status\"></ng-container>\n        </fs-popover>\n        <ng-template #statusPopover>\n          <div *ngIf=\"row.host\">Host: {{row.host}}</div>\n          <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\n          <div *ngIf=\"row.processState\">Process State: {{CronProcessStates[row.processState]}}</div>\n        </ng-template>\n      </ng-container>\n      <ng-template #status>\n        {{CronStates[row.state]}}\n      </ng-template>\n      <ng-container *ngIf=\"row.state === CronState.Running\">\n        <div class=\"small\">\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-container>      \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 class=\"small\" *ngIf=\"row.duration\">\n          Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Next Run</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== CronState.Disabled\">\n        <app-next-run [cron]=\"row\"></app-next-run>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Timeout Hours</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.cronSetting.timeout}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i7.FsPopoverComponent, selector: "fs-popover" }, { kind: "component", type: CronNextRunComponent, selector: "app-next-run", inputs: ["cron"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }] });
 }
-CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronsComponent, deps: [{ token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 align=\"center\">\n    <ng-template fs-list-header>Status</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.host || row.processId; else status\">\n        <fs-popover \n            [maxWidth]=\"null\"\n            [template]=\"statusPopover\" \n            [indication]=\"true\"\n            size=\"small\">\n          <ng-container *ngTemplateOutlet=\"status\"></ng-container>\n        </fs-popover>\n        <ng-template #statusPopover>\n          <div *ngIf=\"row.host\">Host: {{row.host}}</div>\n          <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\n          <div *ngIf=\"row.processState\">Process State: {{CronProcessStates[row.processState]}}</div>\n        </ng-template>\n      </ng-container>\n      <ng-template #status>\n        {{CronStates[row.state]}}\n      </ng-template>\n      <ng-container *ngIf=\"row.state === CronState.Running\">\n        <div class=\"small\">\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-container>      \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 class=\"small\" *ngIf=\"row.duration\">\n          Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Next Run</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== CronState.Disabled\">\n        <app-next-run [cron]=\"row\"></app-next-run>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Timeout Hours</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.cronSetting.timeout}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i7.FsPopoverComponent, selector: "fs-popover" }, { kind: "component", type: CronNextRunComponent, selector: "app-next-run", inputs: ["cron"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CronsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CronsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-crons', 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 align=\"center\">\n    <ng-template fs-list-header>Status</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.host || row.processId; else status\">\n        <fs-popover \n            [maxWidth]=\"null\"\n            [template]=\"statusPopover\" \n            [indication]=\"true\"\n            size=\"small\">\n          <ng-container *ngTemplateOutlet=\"status\"></ng-container>\n        </fs-popover>\n        <ng-template #statusPopover>\n          <div *ngIf=\"row.host\">Host: {{row.host}}</div>\n          <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\n          <div *ngIf=\"row.processState\">Process State: {{CronProcessStates[row.processState]}}</div>\n        </ng-template>\n      </ng-container>\n      <ng-template #status>\n        {{CronStates[row.state]}}\n      </ng-template>\n      <ng-container *ngIf=\"row.state === CronState.Running\">\n        <div class=\"small\">\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-container>      \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 class=\"small\" *ngIf=\"row.duration\">\n          Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      </ng-template>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Next Run</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.state !== CronState.Disabled\">\n        <app-next-run [cron]=\"row\"></app-next-run>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>Timeout Hours</ng-template>\n    <ng-template fs-list-cell let-row=\"row\">\n      {{row.cronSetting.timeout}}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i1.MatDialog }, { type: i3$2.FsPrompt }]; }, propDecorators: { list: [{
@@ -885,14 +926,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class DashboardComponent {
+    _message;
+    _cdRef;
+    _buildService;
+    dashboard;
+    buttonActions = [];
+    build;
+    menuActions = [];
+    _destroy$ = new Subject();
+    init;
+    upgrade;
+    load;
+    actions = [];
     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();
@@ -935,10 +984,10 @@ class DashboardComponent {
             this._message.success('Successfully upgraded the system');
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$2.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\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      <ng-container *ngIf=\"build\">\n        <h2>Build</h2>\n        <fs-label-field>\n          <fs-label>Version</fs-label>\n          {{build.version || 'Unknown'}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Date</fs-label>\n          {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\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  \n\n  <div>\n    <div class=\"actions\">\n      <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\n      <button mat-raised-button (click)=\"initClick()\">Init System</button>\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        <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      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .menu-button{box-shadow:none}h2{margin-top:0}.actions{display:flex;align-items:center;flex-wrap:wrap}.actions button,.actions fs-menu{margin-bottom:10px;margin-right:5px}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: 1000px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i9$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$2.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\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      <ng-container *ngIf=\"build\">\n        <h2>Build</h2>\n        <fs-label-field>\n          <fs-label>Version</fs-label>\n          {{build.version || 'Unknown'}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Date</fs-label>\n          {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\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  \n\n  <div>\n    <div class=\"actions\">\n      <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\n      <button mat-raised-button (click)=\"initClick()\">Init System</button>\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        <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      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .menu-button{box-shadow:none}h2{margin-top:0}.actions{display:flex;align-items:center;flex-wrap:wrap}.actions button,.actions fs-menu{margin-bottom:10px;margin-right:5px}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: 1000px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i9$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *fsSkeleton=\"dashboard\">\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\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      <ng-container *ngIf=\"build\">\n        <h2>Build</h2>\n        <fs-label-field>\n          <fs-label>Version</fs-label>\n          {{build.version || 'Unknown'}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>Date</fs-label>\n          {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\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  \n\n  <div>\n    <div class=\"actions\">\n      <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\n      <button mat-raised-button (click)=\"initClick()\">Init System</button>\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        <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      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep .menu-button{box-shadow:none}h2{margin-top:0}.actions{display:flex;align-items:center;flex-wrap:wrap}.actions button,.actions fs-menu{margin-bottom:10px;margin-right:5px}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: 1000px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$2.FsBuildService }]; }, propDecorators: { init: [{
@@ -952,6 +1001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class InfoComponent {
+    iframe;
+    load;
     ngAfterViewInit() {
         this._load();
     }
@@ -967,10 +1018,10 @@ class InfoComponent {
             this.iframe.nativeElement.style.height = `${scrollHeight}px`;
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", ngImport: i0, type: InfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<iframe #iframe></iframe>\n", styles: ["iframe{width:100%;border:0}\n"] }]
         }], propDecorators: { iframe: [{
@@ -981,15 +1032,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class ProcessComponent {
+    data;
+    _message;
+    _cdRef;
+    _prompt;
+    process;
+    ProcessStates = indexNameValue(ProcessStates);
+    ProcessProcessStates = indexNameValue(ProcessProcessStates);
+    ProcessState = ProcessState;
+    _destroy$ = new Subject();
     constructor(data, _message, _cdRef, _prompt) {
         this.data = data;
         this._message = _message;
         this._cdRef = _cdRef;
         this._prompt = _prompt;
-        this.ProcessStates = indexNameValue(ProcessStates);
-        this.ProcessProcessStates = indexNameValue(ProcessProcessStates);
-        this.ProcessState = ProcessState;
-        this._destroy$ = new Subject();
     }
     ngOnInit() {
         if (this.data.loadProcess) {
@@ -1046,10 +1102,10 @@ class ProcessComponent {
         this._destroy$.next();
         this._destroy$.complete();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 class=\"column\">\n      <div class=\"fs-row.gap-lg.wrap.align-start\">\n        <fs-label-field>\n          <fs-label>\n            Name\n          </fs-label>\n          {{process.prettyName}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div class=\"status\" [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ProcessStates[process.state]}} \n            <ng-container *ngIf=\"process.state === ProcessState.Running\">\n              <mat-progress-spinner [diameter]=\"20\" [mode]=\"'indeterminate'\"></mat-progress-spinner>\n            </ng-container>\n          </div>\n          \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>\n          <fs-label>\n            Process ID\n          </fs-label>\n          {{process.pid || 'None'}}\n          <ng-container *ngIf=\"process.pid\">\n            <div class=\"small\">\n              {{ProcessProcessStates[process.processState] || 'Unknown'}}\n            </div>\n          </ng-container>\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.createDate\">\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\">\n        <fs-label>\n          Log\n        </fs-label>\n        <div class=\"log\">\n          {{process.log}}\n        </div>\n      </fs-label-field>\n\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button \n        mat-button \n        [mat-dialog-close]=\"true\" \n        color=\"primary\">\n      Close\n    </button>\n    <button\n        *ngIf=\"process.state === ProcessState.Running && data.kill\"\n        mat-button\n        (click)=\"kill()\">\n      Kill\n    </button>\n    <button \n        *ngIf=\"process.state !== ProcessState.Running && data.run\" \n        mat-button \n        (click)=\"run()\">\n      Run\n    </button>\n    <button \n        *ngIf=\"(\n          process.state !== ProcessState.Running && \n          process.state !== ProcessState.Queued\n        ) && data.queue\" \n        mat-button \n        (click)=\"queue()\">\n      Queue\n    </button>\n    <button\n        *ngIf=\"process.filename\"\n        mat-button\n        (click)=\"download()\">\n      Download\n    </button>    \n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".log{white-space:pre-line;font-family:monospace;font-size:95%;line-height:130%}.status{display:flex}.status.running{margin-right:28px}.status.running mat-progress-spinner{position:absolute;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ProcessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProcessComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-ProcessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 class=\"column\">\n      <div class=\"fs-row.gap-lg.wrap.align-start\">\n        <fs-label-field>\n          <fs-label>\n            Name\n          </fs-label>\n          {{process.prettyName}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div class=\"status\" [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ProcessStates[process.state]}} \n            <ng-container *ngIf=\"process.state === ProcessState.Running\">\n              <mat-progress-spinner [diameter]=\"20\" [mode]=\"'indeterminate'\"></mat-progress-spinner>\n            </ng-container>\n          </div>\n          \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>\n          <fs-label>\n            Process ID\n          </fs-label>\n          {{process.pid || 'None'}}\n          <ng-container *ngIf=\"process.pid\">\n            <div class=\"small\">\n              {{ProcessProcessStates[process.processState] || 'Unknown'}}\n            </div>\n          </ng-container>\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.createDate\">\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\">\n        <fs-label>\n          Log\n        </fs-label>\n        <div class=\"log\">\n          {{process.log}}\n        </div>\n      </fs-label-field>\n\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button \n        mat-button \n        [mat-dialog-close]=\"true\" \n        color=\"primary\">\n      Close\n    </button>\n    <button\n        *ngIf=\"process.state === ProcessState.Running && data.kill\"\n        mat-button\n        (click)=\"kill()\">\n      Kill\n    </button>\n    <button \n        *ngIf=\"process.state !== ProcessState.Running && data.run\" \n        mat-button \n        (click)=\"run()\">\n      Run\n    </button>\n    <button \n        *ngIf=\"(\n          process.state !== ProcessState.Running && \n          process.state !== ProcessState.Queued\n        ) && data.queue\" \n        mat-button \n        (click)=\"queue()\">\n      Queue\n    </button>\n    <button\n        *ngIf=\"process.filename\"\n        mat-button\n        (click)=\"download()\">\n      Download\n    </button>    \n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".log{white-space:pre-line;font-family:monospace;font-size:95%;line-height:130%}.status{display:flex}.status.running{margin-right:28px}.status.running mat-progress-spinner{position:absolute;right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProcessComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>Process</div>\n  <mat-dialog-content>\n    <div class=\"column\">\n      <div class=\"fs-row.gap-lg.wrap.align-start\">\n        <fs-label-field>\n          <fs-label>\n            Name\n          </fs-label>\n          {{process.prettyName}}\n        </fs-label-field>\n\n        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div class=\"status\" [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ProcessStates[process.state]}} \n            <ng-container *ngIf=\"process.state === ProcessState.Running\">\n              <mat-progress-spinner [diameter]=\"20\" [mode]=\"'indeterminate'\"></mat-progress-spinner>\n            </ng-container>\n          </div>\n          \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>\n          <fs-label>\n            Process ID\n          </fs-label>\n          {{process.pid || 'None'}}\n          <ng-container *ngIf=\"process.pid\">\n            <div class=\"small\">\n              {{ProcessProcessStates[process.processState] || 'Unknown'}}\n            </div>\n          </ng-container>\n        </fs-label-field>\n\n        <fs-label-field *ngIf=\"process.createDate\">\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\">\n        <fs-label>\n          Log\n        </fs-label>\n        <div class=\"log\">\n          {{process.log}}\n        </div>\n      </fs-label-field>\n\n    </div>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button \n        mat-button \n        [mat-dialog-close]=\"true\" \n        color=\"primary\">\n      Close\n    </button>\n    <button\n        *ngIf=\"process.state === ProcessState.Running && data.kill\"\n        mat-button\n        (click)=\"kill()\">\n      Kill\n    </button>\n    <button \n        *ngIf=\"process.state !== ProcessState.Running && data.run\" \n        mat-button \n        (click)=\"run()\">\n      Run\n    </button>\n    <button \n        *ngIf=\"(\n          process.state !== ProcessState.Running && \n          process.state !== ProcessState.Queued\n        ) && data.queue\" \n        mat-button \n        (click)=\"queue()\">\n      Queue\n    </button>\n    <button\n        *ngIf=\"process.filename\"\n        mat-button\n        (click)=\"download()\">\n      Download\n    </button>    \n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [".log{white-space:pre-line;font-family:monospace;font-size:95%;line-height:130%}.status{display:flex}.status.running{margin-right:28px}.status.running mat-progress-spinner{position:absolute;right:0}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1058,14 +1114,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }, { type: i1$1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i3$2.FsPrompt }]; } });
 
 class ProcessesComponent {
+    _dialog;
+    _message;
+    list;
+    loadProcesses;
+    loadProcess;
+    run;
+    kill;
+    delete;
+    download;
+    queue;
+    actions = [];
+    config = null;
+    ProcessStates = indexNameValue(ProcessStates);
+    ProcessState = ProcessState;
+    _destroy$ = new Subject();
     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();
@@ -1191,10 +1257,10 @@ class ProcessesComponent {
             });
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessesComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", queue: "queue", 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  <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: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ProcessesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProcessesComponent, deps: [{ token: i1.MatDialog }, { token: i1$1.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-ProcessesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProcessesComponent, selector: "fs-system-processes", inputs: { loadProcesses: "loadProcesses", loadProcess: "loadProcess", run: "run", kill: "kill", delete: "delete", download: "download", queue: "queue", 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  <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: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i4$2.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProcessesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProcessesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-processes', changeDetection: ChangeDetectionStrategy.OnPush, 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  <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" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i1$1.FsMessage }]; }, propDecorators: { list: [{
@@ -1219,6 +1285,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class ServerLogComponent {
+    data;
+    log;
     constructor(data) {
         this.data = data;
     }
@@ -1235,10 +1303,10 @@ class ServerLogComponent {
             catch (e) { }
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"log.url\">\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    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>{{log.server|json}}</pre>\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\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: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout", "dock", "dockable", "fullscreenPercent"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }] });
 }
-ServerLogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"log.url\">\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    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>{{log.server|json}}</pre>\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\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: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i7$1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i8.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i8.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { kind: "component", type: i9.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i4$2.FsDateFormatPipe, name: "fsDateFormat" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServerLogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServerLogComponent, decorators: [{
             type: Component,
             args: [{ template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>Log</div>\n  <mat-dialog-content>\n    <div class=\"fs-row.gap-lg.wrap.align-start\">\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 *ngIf=\"log.url\">\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    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>{{log.server|json}}</pre>\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\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" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1247,10 +1315,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }] }]; } });
 
 class ServerLogsComponent {
+    _dialog;
+    list;
+    loadLogs;
+    config = null;
+    logTypes = [];
     constructor(_dialog) {
         this._dialog = _dialog;
-        this.config = null;
-        this.logTypes = [];
     }
     ngOnInit() {
         this._configList();
@@ -1276,10 +1347,10 @@ class ServerLogsComponent {
             width: '85%'
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [""], dependencies: [{ kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }] });
 }
-ServerLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ServerLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: [""], dependencies: [{ kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ServerLogsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ServerLogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-server-logs', 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" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { list: [{
@@ -1295,11 +1366,11 @@ class KeyNameValuePipe {
             return { value: key, name: values[key] };
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyNameValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: KeyNameValuePipe, name: "keyNameValue" });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyNameValuePipe });
 }
-KeyNameValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KeyNameValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-KeyNameValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: KeyNameValuePipe, name: "keyNameValue" });
-KeyNameValuePipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KeyNameValuePipe });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KeyNameValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KeyNameValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keyNameValue',
@@ -1309,16 +1380,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         }] });
 
 class SettingsComponent {
+    _message;
+    _clipboard;
+    _prompt;
+    _cdRef;
+    loadSettings;
+    save;
+    fileRemove = new EventEmitter();
+    fileSelect = new EventEmitter();
+    groupedSettings = [];
+    groups = [];
+    SettingInterfaceType = SettingInterfaceType;
     constructor(_message, _clipboard, _prompt, _cdRef) {
         this._message = _message;
         this._clipboard = _clipboard;
         this._prompt = _prompt;
         this._cdRef = _cdRef;
-        this.fileRemove = new EventEmitter();
-        this.fileSelect = new EventEmitter();
-        this.groupedSettings = [];
-        this.groups = [];
-        this.SettingInterfaceType = SettingInterfaceType;
     }
     ngOnInit() {
         this.loadSettings({
@@ -1406,10 +1483,10 @@ class SettingsComponent {
             this._message.success('Changes Saved');
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$1.FsClipboard }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 \n        hideToggle \n        *ngFor=\"let setting of groupedSettings[group]\" \n        class=\"setting\"\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n      <mat-form-field \n          class=\"full-width form-field-multiline-subscript\"\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\n        <mat-label>{{setting.label}}</mat-label>\n        <textarea\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\n        <mat-label>{{setting.label}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"setting.value\"\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsDatePicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsColorPicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsTimePicker\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        <div fsFileHint>{{setting.instruction}}</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}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i7$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["minWidth", "minHeight", "imageWidth", "imageHeight", "imageQuality", "label", "showFilename", "allowDownload", "allowReupload", "multiple", "allowRemove", "url", "file", "accept", "disabled", "previewWidth", "previewHeight"], outputs: ["select", "remove", "download"] }, { kind: "directive", type: i14.FsFileLabelDirective, selector: "[fsFileLabel]" }, { kind: "component", type: i15.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i15.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { kind: "component", type: i16.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { kind: "pipe", type: KeyNameValuePipe, name: "keyNameValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$1.FsClipboard }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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 \n        hideToggle \n        *ngFor=\"let setting of groupedSettings[group]\" \n        class=\"setting\"\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n      <mat-form-field \n          class=\"full-width form-field-multiline-subscript\"\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\n        <mat-label>{{setting.label}}</mat-label>\n        <textarea\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\n        <mat-label>{{setting.label}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"setting.value\"\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsDatePicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsColorPicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsTimePicker\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        <div fsFileHint>{{setting.instruction}}</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}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", 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"] }, { kind: "directive", type: i7$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i7$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i10$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i14.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["minWidth", "minHeight", "imageWidth", "imageHeight", "imageQuality", "label", "showFilename", "allowDownload", "allowReupload", "multiple", "allowRemove", "url", "file", "accept", "disabled", "previewWidth", "previewHeight"], outputs: ["select", "remove", "download"] }, { kind: "directive", type: i14.FsFileLabelDirective, selector: "[fsFileLabel]" }, { kind: "component", type: i15.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { kind: "component", type: i15.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { kind: "component", type: i16.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { kind: "pipe", type: KeyNameValuePipe, name: "keyNameValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-settings', changeDetection: ChangeDetectionStrategy.OnPush, 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 \n        hideToggle \n        *ngFor=\"let setting of groupedSettings[group]\" \n        class=\"setting\"\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n      <mat-form-field \n          class=\"full-width form-field-multiline-subscript\"\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\n        <mat-label>{{setting.label}}</mat-label>\n        <textarea\n          matInput\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\n        <mat-label>{{setting.label}}</mat-label>\n        <mat-select\n            [(ngModel)]=\"setting.value\"\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsDatePicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsColorPicker\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 \n          class=\"full-width form-field-multiline-subscript\" \n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\n        <mat-label>{{setting.label}}</mat-label>\n        <input\n          matInput\n          fsTimePicker\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        <div fsFileHint>{{setting.instruction}}</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}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i2$1.FsClipboard }, { type: i3$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
@@ -1423,10 +1500,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class UpgradeLogsComponent {
-    constructor() {
-        this.config = null;
-        this.logTypes = [];
-    }
+    list;
+    loadUpgradeLogs;
+    config = null;
+    logTypes = [];
     ngOnInit() {
         this._configList();
     }
@@ -1446,10 +1523,10 @@ class UpgradeLogsComponent {
             }
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UpgradeLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [""], dependencies: [{ kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }] });
 }
-UpgradeLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UpgradeLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UpgradeLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: [""], dependencies: [{ kind: "component", type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i5.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i5.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { kind: "directive", type: i5.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i5.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fs-system-upgrade-logs', 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" }]
         }], propDecorators: { list: [{
@@ -1470,76 +1547,76 @@ class FsSystemModule {
             ],
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FsSystemModule, declarations: [DashboardComponent,
+            CronNextRunComponent,
+            CronsComponent,
+            SettingsComponent,
+            KeyNameValuePipe,
+            ProcessesComponent,
+            ServerLogComponent,
+            ServerLogsComponent,
+            UpgradeLogsComponent,
+            ApiLogsComponent,
+            ApiLogComponent,
+            InfoComponent,
+            ProcessComponent,
+            CronComponent,
+            CronLogComponent], imports: [CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSelectModule,
+            MatDialogModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            FsDateModule,
+            FsSkeletonModule,
+            FsListModule,
+            FsFileModule,
+            FsFileManagerModule,
+            FsLabelModule,
+            FsDialogModule,
+            FsDatePickerModule,
+            FsMenuModule,
+            FsPopoverModule,
+            FsColorPickerModule], exports: [DashboardComponent,
+            CronsComponent,
+            SettingsComponent,
+            ProcessesComponent,
+            ServerLogsComponent,
+            UpgradeLogsComponent,
+            ApiLogsComponent,
+            InfoComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemModule, imports: [CommonModule,
+            FormsModule,
+            MatButtonModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MatIconModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSelectModule,
+            MatDialogModule,
+            MatProgressSpinnerModule,
+            MatTabsModule,
+            FsDateModule,
+            FsSkeletonModule,
+            FsListModule,
+            FsFileModule,
+            FsFileManagerModule,
+            FsLabelModule,
+            FsDialogModule,
+            FsDatePickerModule,
+            FsMenuModule,
+            FsPopoverModule,
+            FsColorPickerModule] });
 }
-FsSystemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsSystemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: FsSystemModule, declarations: [DashboardComponent,
-        CronNextRunComponent,
-        CronsComponent,
-        SettingsComponent,
-        KeyNameValuePipe,
-        ProcessesComponent,
-        ServerLogComponent,
-        ServerLogsComponent,
-        UpgradeLogsComponent,
-        ApiLogsComponent,
-        ApiLogComponent,
-        InfoComponent,
-        ProcessComponent,
-        CronComponent,
-        CronLogComponent], imports: [CommonModule,
-        FormsModule,
-        MatButtonModule,
-        MatExpansionModule,
-        MatTooltipModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatDialogModule,
-        MatProgressSpinnerModule,
-        MatTabsModule,
-        FsDateModule,
-        FsSkeletonModule,
-        FsListModule,
-        FsFileModule,
-        FsFileManagerModule,
-        FsLabelModule,
-        FsDialogModule,
-        FsDatePickerModule,
-        FsMenuModule,
-        FsPopoverModule,
-        FsColorPickerModule], exports: [DashboardComponent,
-        CronsComponent,
-        SettingsComponent,
-        ProcessesComponent,
-        ServerLogsComponent,
-        UpgradeLogsComponent,
-        ApiLogsComponent,
-        InfoComponent] });
-FsSystemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemModule, imports: [CommonModule,
-        FormsModule,
-        MatButtonModule,
-        MatExpansionModule,
-        MatTooltipModule,
-        MatIconModule,
-        MatFormFieldModule,
-        MatInputModule,
-        MatSelectModule,
-        MatDialogModule,
-        MatProgressSpinnerModule,
-        MatTabsModule,
-        FsDateModule,
-        FsSkeletonModule,
-        FsListModule,
-        FsFileModule,
-        FsFileManagerModule,
-        FsLabelModule,
-        FsDialogModule,
-        FsDatePickerModule,
-        FsMenuModule,
-        FsPopoverModule,
-        FsColorPickerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FsSystemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FsSystemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [