@firestitch/system 18.0.30 → 18.0.33

package/fesm2022/firestitch-system.mjs

@@ -1,282 +1,62 @@
-import * as i1$1 from '@angular/common';
-import { CommonModule, JsonPipe } from '@angular/common';
+import * as i1$2 from '@angular/common';
+import { JsonPipe, NgClass, NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Inject, ViewChild, Input, NgModule, Injectable, inject, ChangeDetectorRef, EventEmitter, Output, Pipe, InjectionToken } from '@angular/core';
-import * as i5$2 from '@angular/forms';
+import { inject, Component, ChangeDetectionStrategy, ViewChild, Input, Injectable, ChangeDetectorRef, EventEmitter, Output, Pipe, InjectionToken, NgModule } from '@angular/core';
+import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import * as i6 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i4 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i2 from '@firestitch/clipboard';
-import { FsClipboardModule } from '@firestitch/clipboard';
-import * as i10 from '@firestitch/common';
-import { FsCommonModule, index } from '@firestitch/common';
-import * as i3$1 from '@firestitch/date';
-import { FsDateModule, parse } from '@firestitch/date';
-import * as i8 from '@firestitch/dialog';
-import { FsDialogModule } from '@firestitch/dialog';
-import * as i3 from '@firestitch/form';
-import { FsFormModule } from '@firestitch/form';
-import * as i6$1 from '@firestitch/label';
-import { FsLabelModule } from '@firestitch/label';
-import * as i4$1 from '@firestitch/list';
-import { FsListComponent, FsListModule, PaginationStrategy } from '@firestitch/list';
-import * as i7 from '@firestitch/popover';
-import { FsPopoverModule } from '@firestitch/popover';
-import { ItemType } from '@firestitch/filter';
-import { map, tap, takeUntil, switchMap, filter, take, finalize } from 'rxjs/operators';
-import * as i7$1 from '@angular/material/expansion';
-import { MatExpansionModule } from '@angular/material/expansion';
-import * as i10$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i11 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i8$1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i12 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i5 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5$1 from '@firestitch/badge';
+import * as i3$2 from '@angular/material/button';
+import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button';
+import * as i2$2 from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionModule } from '@angular/material/expansion';
+import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
+import { MatTabGroup, MatTab, MatTabContent, MatTabsModule } from '@angular/material/tabs';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$3 from '@firestitch/badge';
 import { FsBadgeModule } from '@firestitch/badge';
-import * as i16 from '@firestitch/colorpicker';
+import * as i3$3 from '@firestitch/colorpicker';
 import { FsColorPickerModule } from '@firestitch/colorpicker';
-import * as i15 from '@firestitch/datepicker';
+import * as i4 from '@firestitch/date';
+import { FsDateModule, parse } from '@firestitch/date';
+import * as i2$4 from '@firestitch/datepicker';
 import { FsDatePickerModule } from '@firestitch/datepicker';
-import * as i14 from '@firestitch/file';
+import * as i2 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import * as i4$1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import { FsFileManagerModule } from '@firestitch/file-manager';
-import * as i9 from '@firestitch/menu';
+import * as i3 from '@firestitch/label';
+import { FsLabelModule } from '@firestitch/label';
+import * as i1$1 from '@firestitch/list';
+import { PaginationStrategy, FsListComponent, FsListModule } from '@firestitch/list';
+import * as i3$1 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
-import * as i6$2 from '@firestitch/skeleton';
+import * as i2$1 from '@firestitch/popover';
+import { FsPopoverModule } from '@firestitch/popover';
+import * as i1 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i1$2 from '@firestitch/api';
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { ItemType } from '@firestitch/filter';
+import { map, tap, takeUntil, switchMap, filter, take, finalize } from 'rxjs/operators';
 import { FsApi, RequestMethod, StreamEventData, StreamEventType } from '@firestitch/api';
 import { Subject, timer, Observable } from 'rxjs';
 import { addMinutes, addHours, addDays, subSeconds, differenceInSeconds, getDaysInMonth, differenceInMinutes } from 'date-fns';
-import * as i1$3 from '@firestitch/message';
 import { FsMessage } from '@firestitch/message';
-import * as i3$3 from '@firestitch/process';
 import { FsProcess } from '@firestitch/process';
-import * as i2$2 from '@firestitch/prompt';
 import { FsPrompt } from '@firestitch/prompt';
 import { SelectionActionType } from '@firestitch/selection';
-import * as i2$1 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: "18.2.7", ngImport: i0, type: ExplainComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
-
-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.queryLog = _data.queryLog;
-    }
-    openExplain() {
-        this._dialog.open(ExplainComponent, {
-            data: { explain: this.explain },
-        });
-    }
-    get explain() {
-        return this.queryLog.explain;
-    }
-    get queryBlock() {
-        return this.explain?.queryBlock;
-    }
-    get orderingOperation() {
-        return this.queryBlock?.orderingOperation;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i7.FsPopoverComponent, selector: "fs-popover" }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: i2.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: "18.2.7", 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: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialog }] });
-
-class QueryLogsComponent {
-    _dialog;
-    list;
-    loadQueryLogs;
-    purgeQueryLogs;
-    listConfig;
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
-    openQueryLog(queryLog) {
-        this._dialog.open(QueryLogComponent, {
-            data: { queryLog },
-            width: '100%',
-        });
-    }
-    ngOnInit() {
-        this.listConfig = {
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search',
-                },
-                {
-                    name: 'optimized',
-                    type: ItemType.Select,
-                    label: 'Optimization',
-                    values: [
-                        { name: 'Any', value: undefined },
-                        { name: 'Yes', value: 'true' },
-                        { name: 'No', value: 'false' },
-                    ],
-                },
-                {
-                    name: 'createDate',
-                    type: ItemType.DateTimeRange,
-                    label: ['From Date', 'To Date'],
-                },
-                {
-                    name: 'duration',
-                    type: ItemType.Range,
-                    label: ['Min Duration', 'Max Duration'],
-                },
-            ],
-            actions: [
-                {
-                    label: 'Purge',
-                    primary: false,
-                    click: () => {
-                        this.purgeQueryLogs()
-                            .subscribe(() => {
-                            this.list.reload();
-                        });
-                    },
-                },
-            ],
-            fetch: (query) => {
-                return this.loadQueryLogs(query)
-                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
-            },
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueryLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.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: "18.2.7", 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: () => [{ type: i1.MatDialog }], propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }], loadQueryLogs: [{
-                type: Input
-            }], purgeQueryLogs: [{
-                type: Input
-            }] } });
-
-class FsSystemQueryLogsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSystemQueryLogsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", 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: "18.2.7", 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: "18.2.7", ngImport: i0, type: FsSystemQueryLogsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        RouterModule,
-                        CommonModule,
-                        FormsModule,
-                        MatTabsModule,
-                        MatButtonModule,
-                        MatDialogModule,
-                        FsFormModule,
-                        FsLabelModule,
-                        FsPopoverModule,
-                        FsCommonModule,
-                        FsDateModule,
-                        FsDialogModule,
-                        FsListModule,
-                        FsClipboardModule,
-                    ],
-                    declarations: [
-                        QueryLogsComponent,
-                        QueryLogComponent,
-                        ExplainComponent,
-                    ],
-                    exports: [
-                        QueryLogsComponent,
-                    ],
-                }]
-        }] });
+import { FsBuildService } from '@firestitch/build';
+import * as i6 from '@firestitch/common';
+import { index, FsCommonModule } from '@firestitch/common';
+import * as i3$4 from '@firestitch/clipboard';
+import { FsClipboard, FsClipboardModule } from '@firestitch/clipboard';
+import { MatOption } from '@angular/material/core';
+import * as i2$5 from '@firestitch/form';
+import { FsFormModule } from '@firestitch/form';
 
 var CronState;
 (function (CronState) {
@@ -411,40 +191,30 @@ function indexNameValue(arry) {
 }
 
 class ApiLogComponent {
-    _dialogRef;
-    data;
+    _dialogRef = inject(MatDialogRef);
+    data = inject(MAT_DIALOG_DATA);
     apiLog;
     apiLogStates;
-    constructor(_dialogRef, data) {
-        this._dialogRef = _dialogRef;
-        this.data = data;
-    }
     ngOnInit() {
         this.apiLogStates = indexNameValue(ApiLogStates);
         if (this.data.apiLog) {
             this.apiLog = this.data.apiLog;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", 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: "18.2.7", 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i3$1.FsDateFormatPipe, name: "fsDateFormat" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ApiLogComponent, isStandalone: true, 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      @if (apiLog.code) {\n        <fs-label-field>\n          <fs-label>\n            Code\n          </fs-label>\n          {{apiLog.code}}\n        </fs-label-field>\n      }\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      @if (apiLog.direction) {\n        <fs-label-field>\n          <fs-label>\n            Direction\n          </fs-label>\n          {{apiLog.direction}}\n        </fs-label-field>\n      }\n\n      @if (apiLog.length) {\n        <fs-label-field>\n          <fs-label>\n            Duration\n          </fs-label>\n          {{ apiLog.length | fsDateDuration }}\n        </fs-label-field>\n      }\n\n      @if (apiLog.method) {\n        @if (apiLog.method) {\n          <fs-label-field>\n            <fs-label>\n              Method\n            </fs-label>\n            {{apiLog.method}}\n          </fs-label-field>\n        }\n      }\n\n      @if (apiLog.url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{apiLog.url}}\n        </fs-label-field>\n      }\n    </div>\n\n    @if (apiLog.message) {\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{apiLog.message}}\n      </fs-label-field>\n    }\n\n    <div>\n      @if (apiLog.request) {\n        <fs-label-field>\n          <fs-label>\n            Request\n          </fs-label>\n          <pre>{{apiLog.request|json}}</pre>\n        </fs-label-field>\n      }\n\n      @if (apiLog.response) {\n        <fs-label-field>\n          <fs-label>\n            Response\n          </fs-label>\n          <pre>{{apiLog.response|json}}</pre>\n        </fs-label-field>\n      }\n\n      @if (apiLog.headers) {\n        <fs-label-field>\n          <fs-label>\n            Headers\n          </fs-label>\n          <pre>{{apiLog.headers|json}}</pre>\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      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ standalone: true, imports: [FsSkeletonModule, FsDialogModule, MatDialogTitle, CdkScrollable, MatDialogContent, FsLabelModule, MatDialogActions, MatButton, MatDialogClose, JsonPipe, FsDateModule], 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      @if (apiLog.code) {\n        <fs-label-field>\n          <fs-label>\n            Code\n          </fs-label>\n          {{apiLog.code}}\n        </fs-label-field>\n      }\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      @if (apiLog.direction) {\n        <fs-label-field>\n          <fs-label>\n            Direction\n          </fs-label>\n          {{apiLog.direction}}\n        </fs-label-field>\n      }\n\n      @if (apiLog.length) {\n        <fs-label-field>\n          <fs-label>\n            Duration\n          </fs-label>\n          {{ apiLog.length | fsDateDuration }}\n        </fs-label-field>\n      }\n\n      @if (apiLog.method) {\n        @if (apiLog.method) {\n          <fs-label-field>\n            <fs-label>\n              Method\n            </fs-label>\n            {{apiLog.method}}\n          </fs-label-field>\n        }\n      }\n\n      @if (apiLog.url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{apiLog.url}}\n        </fs-label-field>\n      }\n    </div>\n\n    @if (apiLog.message) {\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{apiLog.message}}\n      </fs-label-field>\n    }\n\n    <div>\n      @if (apiLog.request) {\n        <fs-label-field>\n          <fs-label>\n            Request\n          </fs-label>\n          <pre>{{apiLog.request|json}}</pre>\n        </fs-label-field>\n      }\n\n      @if (apiLog.response) {\n        <fs-label-field>\n          <fs-label>\n            Response\n          </fs-label>\n          <pre>{{apiLog.response|json}}</pre>\n        </fs-label-field>\n      }\n\n      @if (apiLog.headers) {\n        <fs-label-field>\n          <fs-label>\n            Headers\n          </fs-label>\n          <pre>{{apiLog.headers|json}}</pre>\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      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n" }]
+        }] });
 
 class ApiLogsComponent {
-    _dialog;
+    _dialog = inject(MatDialog);
     list;
     loadApiLogs;
     config = null;
     apiLogStates = indexNameValue(ApiLogStates);
-    constructor(_dialog) {
-        this._dialog = _dialog;
-    }
     ngOnInit() {
         this._configList();
     }
@@ -484,13 +254,18 @@ class ApiLogsComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ApiLogsComponent, isStandalone: true, 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        @if (row.direction=='outgoing') {\n          <mat-icon class=\"direction\">arrow_upward</mat-icon>\n        }\n        @if (row.direction=='incoming') {\n          <mat-icon class=\"direction\">arrow_downward</mat-icon>\n        }\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      @if (row.code) {\n        <span class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n      }\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>@if (row.length) {\n        <small>Duration: {{ row.length | fsDateDuration }}</small>\n      }</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: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ApiLogsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-api-logs', 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 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: () => [{ type: i1.MatDialog }], propDecorators: { list: [{
+            args: [{ selector: 'fs-system-api-logs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsListModule,
+                        MatIcon,
+                        NgClass,
+                        FsDateModule,
+                    ], 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        @if (row.direction=='outgoing') {\n          <mat-icon class=\"direction\">arrow_upward</mat-icon>\n        }\n        @if (row.direction=='incoming') {\n          <mat-icon class=\"direction\">arrow_downward</mat-icon>\n        }\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      @if (row.code) {\n        <span class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n      }\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>@if (row.length) {\n        <small>Duration: {{ row.length | fsDateDuration }}</small>\n      }</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"] }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }], loadApiLogs: [{
@@ -498,10 +273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class CronData {
-    _fsApi;
-    constructor(_fsApi) {
-        this._fsApi = _fsApi;
-    }
+    _fsApi = inject(FsApi);
     create(data = { id: null }) {
         return data;
     }
@@ -535,7 +307,7 @@ class CronData {
             processes,
         }, { key: 'cron', ...config });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronData, deps: [{ token: i1$2.FsApi }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronData, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronData, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronData, decorators: [{
@@ -543,16 +315,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.FsApi }] });
+        }] });
 
 class CronLogComponent {
-    _data;
+    _data = inject(MAT_DIALOG_DATA);
     cronLog;
     CronLogStates = indexNameValue(CronLogStates);
     CronLogStateColors = {};
-    constructor(_data) {
-        this._data = _data;
-    }
     ngOnInit() {
         this.cronLog = this._data.cronLog;
         this.CronLogStateColors = CronLogStates
@@ -561,16 +330,25 @@ class CronLogComponent {
             return accum;
         }, {});
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CronLogComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\n  <div mat-dialog-title>\n    Cron Log\n  </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      <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    <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\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>", 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: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CronLogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cronLog\">\n  <div mat-dialog-title>\n    Cron Log\n  </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      <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    @if (cronLog.message) {\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        <div class=\"message\">\n          {{ cronLog.message }}\n        </div>\n      </fs-label-field>\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  </mat-dialog-actions>\n</fs-dialog>", 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronLogComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"cronLog\">\n  <div mat-dialog-title>\n    Cron Log\n  </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      <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    <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\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsLabelModule,
+                        NgStyle,
+                        FsDateModule,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<fs-dialog *fsSkeleton=\"cronLog\">\n  <div mat-dialog-title>\n    Cron Log\n  </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      <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    @if (cronLog.message) {\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        <div class=\"message\">\n          {{ cronLog.message }}\n        </div>\n      </fs-label-field>\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  </mat-dialog-actions>\n</fs-dialog>", styles: [".message{white-space:pre-line}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}\n"] }]
+        }] });
 
 class CronLogsComponent {
     cron;
@@ -634,7 +412,7 @@ class CronLogsComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CronLogsComponent, isStandalone: true, selector: "app-cron-logs", inputs: { cron: "cron" }, ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column\n      name=\"state\"\n      title=\"Status\">\n    <ng-template\n        fs-list-cell\n        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  <fs-list-column\n      title=\"Message\"\n      class=\"col-message\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"message\">\n        {{ row.message }}\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Duration\"\n      class=\"col-message\">\n    <ng-template\n        fs-list-cell\n        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  <fs-list-column\n      name=\"create_date\"\n      title=\"Date\"\n      class=\"col-date\">\n    <ng-template\n        fs-list-cell\n        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 .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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CronLogsComponent, isStandalone: true, selector: "app-cron-logs", inputs: { cron: "cron" }, ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column\n    name=\"state\"\n    title=\"Status\">\n    <ng-template\n      fs-list-cell\n      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  <fs-list-column\n    title=\"Message\"\n    class=\"col-message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"message\">\n        {{ row.message }}\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Duration\"\n    class=\"col-message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.duration) {\n        {{ row.duration | fsDateDuration: 'hour-minute-second' }}\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    name=\"create_date\"\n    title=\"Date\"\n    class=\"col-date\">\n    <ng-template\n      fs-list-cell\n      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 .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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronLogsComponent, decorators: [{
             type: Component,
@@ -642,7 +420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         CommonModule,
                         FsListModule,
                         FsDateModule,
-                    ], template: "<fs-list [config]=\"config\">\n  <fs-list-column\n      name=\"state\"\n      title=\"Status\">\n    <ng-template\n        fs-list-cell\n        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  <fs-list-column\n      title=\"Message\"\n      class=\"col-message\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <div class=\"message\">\n        {{ row.message }}\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n      title=\"Duration\"\n      class=\"col-message\">\n    <ng-template\n        fs-list-cell\n        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  <fs-list-column\n      name=\"create_date\"\n      title=\"Date\"\n      class=\"col-date\">\n    <ng-template\n        fs-list-cell\n        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 .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"] }]
+                    ], template: "<fs-list [config]=\"config\">\n  <fs-list-column\n    name=\"state\"\n    title=\"Status\">\n    <ng-template\n      fs-list-cell\n      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  <fs-list-column\n    title=\"Message\"\n    class=\"col-message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <div class=\"message\">\n        {{ row.message }}\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    title=\"Duration\"\n    class=\"col-message\">\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.duration) {\n        {{ row.duration | fsDateDuration: 'hour-minute-second' }}\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column\n    name=\"create_date\"\n    title=\"Date\"\n    class=\"col-date\">\n    <ng-template\n      fs-list-cell\n      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 .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"] }]
         }], propDecorators: { cron: [{
                 type: Input
             }] } });
@@ -687,21 +465,33 @@ class CronComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\n  <h1 mat-dialog-title>\n    Cron\n    <div class=\"small\">\n      {{ cron.name }}\n    </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          <fs-label-field *ngIf=\"cron.cronSetting\">\n            <fs-label>\n              Run Frequency\n            </fs-label>\n            {{ cron.cronSetting.summary }}\n          </fs-label-field>\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          <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>\n                <small *ngIf=\"cron.duration\">\n                  Duration: {{ cron.duration | fsDateDuration }}\n                </small>\n              </div>\n            </ng-template>\n          </fs-label-field>\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        <fs-label-field *ngIf=\"cron.message\">\n          <fs-label>\n            Last Message\n          </fs-label>\n          <div class=\"message\">\n            {{ cron.message }}\n          </div>\n        </fs-label-field>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <app-cron-logs [cron]=\"cron\"></app-cron-logs>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\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>", 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: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "component", type: CronLogsComponent, selector: "app-cron-logs", inputs: ["cron"] }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CronComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\n  <h1 mat-dialog-title>\n    Cron\n    <div class=\"small\">\n      {{ cron.name }}\n    </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          @if (cron.cronSetting) {\n            <fs-label-field>\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            @if (cron.processId) {\n              <div class=\"small\">\n                {{ CronProcessStates[cron.processState] || 'Unknown' }}\n              </div>\n            }\n          </fs-label-field>\n          <fs-label-field>\n            <fs-label>\n              Last Ran\n            </fs-label>\n            @if (cron.duration===null) {\n              Never\n            } @else {\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\n              <div>\n                @if (cron.duration) {\n                  <small>\n                    Duration: {{ cron.duration | fsDateDuration }}\n                  </small>\n                }\n              </div>\n            }\n          </fs-label-field>\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        @if (cron.message) {\n          <fs-label-field>\n            <fs-label>\n              Last Message\n            </fs-label>\n            <div class=\"message\">\n              {{ cron.message }}\n            </div>\n          </fs-label-field>\n        }\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <app-cron-logs [cron]=\"cron\"></app-cron-logs>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\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    @if (tabIndex === 0) {\n      @for (cronAction of cronActions; track cronAction) {\n        <button\n          mat-button\n          (click)=\"cronActionClick(cronAction)\">\n          {{ cronAction.label }}\n        </button>\n      }\n    }\n  </mat-dialog-actions>\n</fs-dialog>", 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: CronLogsComponent, selector: "app-cron-logs", inputs: ["cron"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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\">\n      {{ cron.name }}\n    </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          <fs-label-field *ngIf=\"cron.cronSetting\">\n            <fs-label>\n              Run Frequency\n            </fs-label>\n            {{ cron.cronSetting.summary }}\n          </fs-label-field>\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          <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>\n                <small *ngIf=\"cron.duration\">\n                  Duration: {{ cron.duration | fsDateDuration }}\n                </small>\n              </div>\n            </ng-template>\n          </fs-label-field>\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        <fs-label-field *ngIf=\"cron.message\">\n          <fs-label>\n            Last Message\n          </fs-label>\n          <div class=\"message\">\n            {{ cron.message }}\n          </div>\n        </fs-label-field>\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <app-cron-logs [cron]=\"cron\"></app-cron-logs>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\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>", 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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatTabGroup,
+                        MatTab,
+                        FsLabelModule,
+                        FsDateModule,
+                        MatTabContent,
+                        CronLogsComponent,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                    ], template: "<fs-dialog *fsSkeleton=\"cron\">\n  <h1 mat-dialog-title>\n    Cron\n    <div class=\"small\">\n      {{ cron.name }}\n    </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          @if (cron.cronSetting) {\n            <fs-label-field>\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            @if (cron.processId) {\n              <div class=\"small\">\n                {{ CronProcessStates[cron.processState] || 'Unknown' }}\n              </div>\n            }\n          </fs-label-field>\n          <fs-label-field>\n            <fs-label>\n              Last Ran\n            </fs-label>\n            @if (cron.duration===null) {\n              Never\n            } @else {\n              <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\n              <div>\n                @if (cron.duration) {\n                  <small>\n                    Duration: {{ cron.duration | fsDateDuration }}\n                  </small>\n                }\n              </div>\n            }\n          </fs-label-field>\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        @if (cron.message) {\n          <fs-label-field>\n            <fs-label>\n              Last Message\n            </fs-label>\n            <div class=\"message\">\n              {{ cron.message }}\n            </div>\n          </fs-label-field>\n        }\n      </mat-tab>\n      <mat-tab label=\"Logs\">\n        <ng-template matTabContent>\n          <app-cron-logs [cron]=\"cron\"></app-cron-logs>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\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    @if (tabIndex === 0) {\n      @for (cronAction of cronActions; track cronAction) {\n        <button\n          mat-button\n          (click)=\"cronActionClick(cronAction)\">\n          {{ cronAction.label }}\n        </button>\n      }\n    }\n  </mat-dialog-actions>\n</fs-dialog>", 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"] }]
         }] });
 
 class CronNextRunComponent {
-    _cdRef;
+    _cdRef = inject(ChangeDetectorRef);
     cron;
     duration;
     _destroy$ = new Subject();
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         this.update();
     }
@@ -718,10 +508,10 @@ class CronNextRunComponent {
             next = addHours(next, nextHours);
             next = addDays(next, nextDays);
             next = subSeconds(next, next.getSeconds());
-            this.duration = differenceInSeconds(next, now);
+            this.duration = Math.max(0, differenceInSeconds(next, now));
         }
         else {
-            this.duration = 60 - now.getSeconds();
+            this.duration = Math.max(0, 60 - now.getSeconds());
         }
     }
     update() {
@@ -751,7 +541,7 @@ class CronNextRunComponent {
                     return (minutes[i + 1] ? minutes[i + 1] - now.getUTCMinutes() : (60 - now.getUTCMinutes() + minutes[i]));
                 }
             }
-            return minutes[0] - now.getMinutes();
+            return minutes[0] - now.getUTCMinutes();
         }
         return 0;
     }
@@ -775,17 +565,17 @@ class CronNextRunComponent {
                     return (days[i + 1] ? days[i + 1] : getDaysInMonth(now)) - now.getDate();
                 }
             }
-            return days[0] - getDaysInMonth(now);
+            return days[0] - now.getDate();
         }
         return 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronNextRunComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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, maxOutputs: 2 } }}\n</ng-container>\n<ng-template #seconds>\n  {{ duration }}s\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronNextRunComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CronNextRunComponent, isStandalone: true, selector: "app-next-run", inputs: { cron: "cron" }, ngImport: i0, template: "@if (duration > 60) {\n  {{ duration | fsDateDuration: { hours: true, seconds: true, minutes: true, days: true, maxOutputs: 2 } }}\n} @else {\n  {{ duration }}s\n}\n<ng-template #seconds>\n  {{ duration }}s\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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, maxOutputs: 2 } }}\n</ng-container>\n<ng-template #seconds>\n  {{ duration }}s\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cron: [{
+            args: [{ selector: 'app-next-run', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsDateModule], template: "@if (duration > 60) {\n  {{ duration | fsDateDuration: { hours: true, seconds: true, minutes: true, days: true, maxOutputs: 2 } }}\n} @else {\n  {{ duration }}s\n}\n<ng-template #seconds>\n  {{ duration }}s\n</ng-template>" }]
+        }], propDecorators: { cron: [{
                 type: Input
             }] } });
 
@@ -1035,20 +825,26 @@ class CronsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CronsComponent, selector: "fs-system-crons", 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>\n      Name\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n      <div *ngIf=\"row.cronSetting\">\n        <small>\n          {{ row.cronSetting.description }}\n        </small>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column align=\"center\">\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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\">\n            Host: {{ row.host }}\n          </div>\n          <div *ngIf=\"row.processId\">\n            Process ID: {{ row.processId }}\n          </div>\n          <div *ngIf=\"row.processState\">\n            Process State: {{ CronProcessStates[row.processState] }}\n          </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>\n      Frequency\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.cronSetting?.summary }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Last Ran\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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\n            class=\"small\"\n            *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>\n      Next Run\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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>\n      Timeout\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.cronSetting.timeout }}h\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i4$1.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: i3$1.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: CronsComponent, isStandalone: true, selector: "fs-system-crons", 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>\n      Name\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n      <small>\n        {{ row.cronSetting?.description }}\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column align=\"center\">\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.host || row.processId) {\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          @if (row.host) {\n            <div>\n              Host: {{ row.host }}\n            </div>\n          }\n          @if (row.processId) {\n            <div>\n              Process ID: {{ row.processId }}\n            </div>\n          }\n          @if (row.processState) {\n            <div>\n              Process State: {{ CronProcessStates[row.processState] }}\n            </div>\n          }\n        </ng-template>\n      } @else {\n        {{ CronStates[row.state] }}\n      }\n      <ng-template #status>\n        {{ CronStates[row.state] }}\n      </ng-template>\n      @if (row.state === CronState.Running) {\n        <div class=\"small\">\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Frequency\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.cronSetting?.summary }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Last Ran\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.duration===null) {\n        Never\n      } @else {\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        @if (row.duration) {\n          <div\n            class=\"small\"\n            >\n            Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n          </div>\n        }\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Next Run\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.state !== CronState.Disabled) {\n        <app-next-run [cron]=\"row\"></app-next-run>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Timeout\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.cronSetting.timeout }}h\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsPopoverModule }, { kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: CronNextRunComponent, selector: "app-next-run", inputs: ["cron"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CronsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-crons', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Name\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n      <div *ngIf=\"row.cronSetting\">\n        <small>\n          {{ row.cronSetting.description }}\n        </small>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column align=\"center\">\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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\">\n            Host: {{ row.host }}\n          </div>\n          <div *ngIf=\"row.processId\">\n            Process ID: {{ row.processId }}\n          </div>\n          <div *ngIf=\"row.processState\">\n            Process State: {{ CronProcessStates[row.processState] }}\n          </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>\n      Frequency\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.cronSetting?.summary }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Last Ran\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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\n            class=\"small\"\n            *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>\n      Next Run\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        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>\n      Timeout\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.cronSetting.timeout }}h\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+            args: [{ selector: 'fs-system-crons', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsListModule,
+                        FsPopoverModule,
+                        NgTemplateOutlet,
+                        FsDateModule,
+                        CronNextRunComponent,
+                    ], template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Name\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n      <small>\n        {{ row.cronSetting?.description }}\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column align=\"center\">\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.host || row.processId) {\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          @if (row.host) {\n            <div>\n              Host: {{ row.host }}\n            </div>\n          }\n          @if (row.processId) {\n            <div>\n              Process ID: {{ row.processId }}\n            </div>\n          }\n          @if (row.processState) {\n            <div>\n              Process State: {{ CronProcessStates[row.processState] }}\n            </div>\n          }\n        </ng-template>\n      } @else {\n        {{ CronStates[row.state] }}\n      }\n      <ng-template #status>\n        {{ CronStates[row.state] }}\n      </ng-template>\n      @if (row.state === CronState.Running) {\n        <div class=\"small\">\n          Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n        </div>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Frequency\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.cronSetting?.summary }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Last Ran\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.duration===null) {\n        Never\n      } @else {\n        <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n        @if (row.duration) {\n          <div\n            class=\"small\"\n            >\n            Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\n          </div>\n        }\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Next Run\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      @if (row.state !== CronState.Disabled) {\n        <app-next-run [cron]=\"row\"></app-next-run>\n      }\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Timeout\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.cronSetting.timeout }}h\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
         }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
             }] } });
 
 class DashboardComponent {
-    _message;
-    _cdRef;
-    _buildService;
+    _message = inject(FsMessage);
+    _cdRef = inject(ChangeDetectorRef);
+    _buildService = inject(FsBuildService);
     init;
     upgrade;
     load;
@@ -1058,11 +854,6 @@ class DashboardComponent {
     build;
     menuActions = [];
     _destroy$ = new Subject();
-    constructor(_message, _cdRef, _buildService) {
-        this._message = _message;
-        this._cdRef = _cdRef;
-        this._buildService = _buildService;
-    }
     ngOnInit() {
         this._load();
         this.buttonActions = this.actions.filter((item) => {
@@ -1108,13 +899,22 @@ class DashboardComponent {
             this._cdRef.markForCheck();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$3.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$1.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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>\n        Server\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.serverTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.serverTimezone }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Hostname\n        </fs-label>\n        {{ dashboard.serverHostname }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Directory\n        </fs-label>\n        {{ dashboard.appDirectory }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        System\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Mode\n        </fs-label>\n        {{ dashboard.appMode }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Notification Recipients\n        </fs-label>\n        {{ dashboard.notifyRecipients.join(', ') }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Database\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Name\n        </fs-label>\n        {{ dashboard.databaseName }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.databaseTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.databaseTimezone }}\n      </fs-label-field>\n    </div>\n    <div *ngIf=\"build || dashboard.upgrades.length\">\n      <ng-container *ngIf=\"build\">\n        <h2>\n          Build\n        </h2>\n        <fs-label-field>\n          <fs-label>\n            Version\n          </fs-label>\n          {{ build.version || 'Unknown' }}\n        </fs-label-field>\n        <fs-label-field>\n          <fs-label>\n            Date\n          </fs-label>\n          {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\n        </fs-label-field>\n      </ng-container>\n      <fs-label-field *ngIf=\"dashboard.upgrades.length\">\n        <fs-label>\n          Pending Upgrades\n        </fs-label>\n        <span\n            class=\"attention\"\n            [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            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Cron\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Last Ran\n        </fs-label>\n        <span\n            class=\"attention\"\n            [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\n          <span *ngIf=\"!dashboard.cronRan\">\n            Never\n          </span>\n          <span *ngIf=\"dashboard.cronRan\">\n            {{ dashboard.cronRan | fsDateFormat: 'date-time' }}\n          </span>\n          <mat-icon>\n            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n  </div>\n  <div>\n    <div class=\"actions\">\n      <button\n          mat-stroked-button\n          (click)=\"upgradeClick()\">\n        Run Upgrades\n      </button>\n      <button\n          mat-stroked-button\n          (click)=\"initClick()\">\n        Init System\n      </button>\n      <button\n          *ngFor=\"let action of buttonActions\"\n          mat-stroked-button\n          (click)=\"actionClick(action)\">\n        {{ action.label }}\n      </button>\n      <ng-container *ngIf=\"menuActions.length\">\n        <fs-menu buttonClass=\"mat-stroked-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>", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i9.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i9.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "pipe", type: i3$1.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DashboardComponent, isStandalone: true, 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>\n        Server\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.serverTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.serverTimezone }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Hostname\n        </fs-label>\n        {{ dashboard.serverHostname }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Directory\n        </fs-label>\n        {{ dashboard.appDirectory }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        System\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Mode\n        </fs-label>\n        {{ dashboard.appMode }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Notification Recipients\n        </fs-label>\n        {{ dashboard.notifyRecipients.join(', ') }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Database\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Name\n        </fs-label>\n        {{ dashboard.databaseName }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.databaseTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.databaseTimezone }}\n      </fs-label-field>\n    </div>\n    @if (build || dashboard.upgrades.length) {\n      <div>\n        @if (build) {\n          <h2>\n            Build\n          </h2>\n          <fs-label-field>\n            <fs-label>\n              Version\n            </fs-label>\n            {{ build.version || 'Unknown' }}\n          </fs-label-field>\n          <fs-label-field>\n            <fs-label>\n              Date\n            </fs-label>\n            {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\n          </fs-label-field>\n        }\n        @if (dashboard.upgrades.length) {\n          <fs-label-field>\n            <fs-label>\n              Pending Upgrades\n            </fs-label>\n            <span\n              class=\"attention\"\n              [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                warning\n              </mat-icon>\n            </span>\n          </fs-label-field>\n        }\n      </div>\n    }\n    <div>\n      <h2>\n        Cron\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Last Ran\n        </fs-label>\n        <span\n          class=\"attention\"\n          [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\n          @if (!dashboard.cronRan) {\n            <span>\n              Never\n            </span>\n          }\n          @if (dashboard.cronRan) {\n            <span>\n              {{ dashboard.cronRan | fsDateFormat: 'date-time' }}\n            </span>\n          }\n          <mat-icon>\n            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n  </div>\n  <div>\n    <div class=\"actions\">\n      <button\n        mat-stroked-button\n        (click)=\"upgradeClick()\">\n        Run Upgrades\n      </button>\n      <button\n        mat-stroked-button\n        (click)=\"initClick()\">\n        Init System\n      </button>\n      @for (action of buttonActions; track action) {\n        <button\n          mat-stroked-button\n          (click)=\"actionClick(action)\">\n          {{ action.label }}\n        </button>\n      }\n      @if (menuActions.length) {\n        <fs-menu buttonClass=\"mat-stroked-button menu-button\">\n          @for (action of menuActions; track action) {\n            <ng-template\n              fs-menu-item\n              (click)=\"actionClick(action)\">\n              {{ action.label }}\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n  </div>\n</div>", 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i3$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i3$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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>\n        Server\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.serverTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.serverTimezone }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Hostname\n        </fs-label>\n        {{ dashboard.serverHostname }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Directory\n        </fs-label>\n        {{ dashboard.appDirectory }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        System\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Mode\n        </fs-label>\n        {{ dashboard.appMode }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Notification Recipients\n        </fs-label>\n        {{ dashboard.notifyRecipients.join(', ') }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Database\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Name\n        </fs-label>\n        {{ dashboard.databaseName }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.databaseTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.databaseTimezone }}\n      </fs-label-field>\n    </div>\n    <div *ngIf=\"build || dashboard.upgrades.length\">\n      <ng-container *ngIf=\"build\">\n        <h2>\n          Build\n        </h2>\n        <fs-label-field>\n          <fs-label>\n            Version\n          </fs-label>\n          {{ build.version || 'Unknown' }}\n        </fs-label-field>\n        <fs-label-field>\n          <fs-label>\n            Date\n          </fs-label>\n          {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\n        </fs-label-field>\n      </ng-container>\n      <fs-label-field *ngIf=\"dashboard.upgrades.length\">\n        <fs-label>\n          Pending Upgrades\n        </fs-label>\n        <span\n            class=\"attention\"\n            [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            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Cron\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Last Ran\n        </fs-label>\n        <span\n            class=\"attention\"\n            [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\n          <span *ngIf=\"!dashboard.cronRan\">\n            Never\n          </span>\n          <span *ngIf=\"dashboard.cronRan\">\n            {{ dashboard.cronRan | fsDateFormat: 'date-time' }}\n          </span>\n          <mat-icon>\n            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n  </div>\n  <div>\n    <div class=\"actions\">\n      <button\n          mat-stroked-button\n          (click)=\"upgradeClick()\">\n        Run Upgrades\n      </button>\n      <button\n          mat-stroked-button\n          (click)=\"initClick()\">\n        Init System\n      </button>\n      <button\n          *ngFor=\"let action of buttonActions\"\n          mat-stroked-button\n          (click)=\"actionClick(action)\">\n        {{ action.label }}\n      </button>\n      <ng-container *ngIf=\"menuActions.length\">\n        <fs-menu buttonClass=\"mat-stroked-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>", 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: () => [{ type: i1$3.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$1.FsBuildService }], propDecorators: { init: [{
+            args: [{ selector: 'fs-system-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FsLabelModule,
+                        NgClass,
+                        MatIcon,
+                        MatTooltip,
+                        MatButton,
+                        FsMenuModule,
+                        FsDateModule,
+                    ], template: "<div *fsSkeleton=\"dashboard\">\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    <div>\n      <h2>\n        Server\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.serverTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.serverTimezone }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Hostname\n        </fs-label>\n        {{ dashboard.serverHostname }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Directory\n        </fs-label>\n        {{ dashboard.appDirectory }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        System\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Mode\n        </fs-label>\n        {{ dashboard.appMode }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Notification Recipients\n        </fs-label>\n        {{ dashboard.notifyRecipients.join(', ') }}\n      </fs-label-field>\n    </div>\n    <div>\n      <h2>\n        Database\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Name\n        </fs-label>\n        {{ dashboard.databaseName }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date/Time\n        </fs-label>\n        {{ dashboard.databaseTime | fsDateFormat: 'date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Timezone\n        </fs-label>\n        {{ dashboard.databaseTimezone }}\n      </fs-label-field>\n    </div>\n    @if (build || dashboard.upgrades.length) {\n      <div>\n        @if (build) {\n          <h2>\n            Build\n          </h2>\n          <fs-label-field>\n            <fs-label>\n              Version\n            </fs-label>\n            {{ build.version || 'Unknown' }}\n          </fs-label-field>\n          <fs-label-field>\n            <fs-label>\n              Date\n            </fs-label>\n            {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\n          </fs-label-field>\n        }\n        @if (dashboard.upgrades.length) {\n          <fs-label-field>\n            <fs-label>\n              Pending Upgrades\n            </fs-label>\n            <span\n              class=\"attention\"\n              [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                warning\n              </mat-icon>\n            </span>\n          </fs-label-field>\n        }\n      </div>\n    }\n    <div>\n      <h2>\n        Cron\n      </h2>\n      <fs-label-field>\n        <fs-label>\n          Last Ran\n        </fs-label>\n        <span\n          class=\"attention\"\n          [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\n          @if (!dashboard.cronRan) {\n            <span>\n              Never\n            </span>\n          }\n          @if (dashboard.cronRan) {\n            <span>\n              {{ dashboard.cronRan | fsDateFormat: 'date-time' }}\n            </span>\n          }\n          <mat-icon>\n            warning\n          </mat-icon>\n        </span>\n      </fs-label-field>\n    </div>\n  </div>\n  <div>\n    <div class=\"actions\">\n      <button\n        mat-stroked-button\n        (click)=\"upgradeClick()\">\n        Run Upgrades\n      </button>\n      <button\n        mat-stroked-button\n        (click)=\"initClick()\">\n        Init System\n      </button>\n      @for (action of buttonActions; track action) {\n        <button\n          mat-stroked-button\n          (click)=\"actionClick(action)\">\n          {{ action.label }}\n        </button>\n      }\n      @if (menuActions.length) {\n        <fs-menu buttonClass=\"mat-stroked-button menu-button\">\n          @for (action of menuActions; track action) {\n            <ng-template\n              fs-menu-item\n              (click)=\"actionClick(action)\">\n              {{ action.label }}\n            </ng-template>\n          }\n        </fs-menu>\n      }\n    </div>\n  </div>\n</div>", 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"] }]
+        }], propDecorators: { init: [{
                 type: Input
             }], upgrade: [{
                 type: Input
@@ -1143,11 +943,11 @@ class InfoComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: InfoComponent, selector: "fs-system-info", inputs: { load: "load" }, viewQueries: [{ propertyName: "iframe", first: true, predicate: ["iframe"], descendants: true }], ngImport: i0, template: "<iframe #iframe></iframe>\r\n", styles: ["iframe{width:100%;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: InfoComponent, isStandalone: true, 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: "18.2.7", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<iframe #iframe></iframe>\r\n", styles: ["iframe{width:100%;border:0}\n"] }]
+            args: [{ selector: 'fs-system-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<iframe #iframe></iframe>\n", styles: ["iframe{width:100%;border:0}\n"] }]
         }], propDecorators: { iframe: [{
                 type: ViewChild,
                 args: ['iframe']
@@ -1156,10 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class ProcessData {
-    _api;
-    constructor(_api) {
-        this._api = _api;
-    }
+    _api = inject(FsApi);
     gets(data = {}, config = {}) {
         return this._api.get('processes', data, { key: 'processes', ...config });
     }
@@ -1186,7 +983,7 @@ class ProcessData {
             .createApiFile(`processes/${data.id}/download`)
             .download();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessData, deps: [{ token: i1$2.FsApi }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessData, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessData, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessData, decorators: [{
@@ -1194,29 +991,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.FsApi }] });
+        }] });
 
 class ProcessComponent {
-    data;
-    _message;
-    _cdRef;
-    _prompt;
-    _process;
-    _api;
+    data = inject(MAT_DIALOG_DATA);
+    _message = inject(FsMessage);
+    _cdRef = inject(ChangeDetectorRef);
+    _prompt = inject(FsPrompt);
+    _process = inject(FsProcess);
+    _api = inject(FsApi);
     process;
     ProcessStates = indexNameValue(ProcessStates);
     ProcessProcessStates = indexNameValue(ProcessProcessStates);
     ProcessState = ProcessState;
     _destroy$ = new Subject();
     _processData = inject(ProcessData);
-    constructor(data, _message, _cdRef, _prompt, _process, _api) {
-        this.data = data;
-        this._message = _message;
-        this._cdRef = _cdRef;
-        this._prompt = _prompt;
-        this._process = _process;
-        this._api = _api;
-    }
     ngOnInit() {
         this.load$()
             .subscribe(() => {
@@ -1271,22 +1060,32 @@ class ProcessComponent {
         this._destroy$.next(null);
         this._destroy$.complete();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$3.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$2.FsPrompt }, { token: i3$3.FsProcess }, { token: i1$2.FsApi }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ProcessComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>\n    Process\n  </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        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div\n              class=\"status\"\n              [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ ProcessStates[process.state] }}\n            <ng-container *ngIf=\"process.state === ProcessState.Running\">\n              <mat-progress-spinner\n                [diameter]=\"20\"\n                [mode]=\"'indeterminate'\">\n              </mat-progress-spinner>\n            </ng-container>\n          </div>\n        </fs-label-field>\n        <fs-label-field *ngIf=\"process.notify\">\n          <fs-label>\n            Notification Email\n          </fs-label>\n          {{ process.notify }}\n        </fs-label-field>\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        <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        <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        <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        <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      <fs-label-field *ngIf=\"process.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{ process.message }}\n      </fs-label-field>\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    </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\"\n        mat-button\n        (click)=\"kill()\">\n      Kill\n    </button>\n    <button\n        *ngIf=\"process.state !== ProcessState.Running\"\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        )\"\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>", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i3$1.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProcessComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>\n    Process\n  </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        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div\n            class=\"status\"\n            [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ ProcessStates[process.state] }}\n            @if (process.state === ProcessState.Running) {\n              <mat-progress-spinner\n                [diameter]=\"20\"\n                [mode]=\"'indeterminate'\">\n              </mat-progress-spinner>\n            }\n          </div>\n        </fs-label-field>\n        @if (process.notify) {\n          <fs-label-field>\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          @if (process.pid) {\n            <div class=\"small\">\n              {{ ProcessProcessStates[process.processState] || 'Unknown' }}\n            </div>\n          }\n        </fs-label-field>\n        @if (process.createDate) {\n          <fs-label-field>\n            <fs-label>\n              Create Date\n            </fs-label>\n            {{ process.createDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.startDate) {\n          <fs-label-field>\n            <fs-label>\n              Start Date\n            </fs-label>\n            {{ process.startDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.endDate) {\n          <fs-label-field>\n            <fs-label>\n              Complete Date\n            </fs-label>\n            {{ process.endDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.duration) {\n          <fs-label-field>\n            <fs-label>\n              Duration\n            </fs-label>\n            {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n          </fs-label-field>\n        }\n      </div>\n      @if (process.message) {\n        <fs-label-field>\n          <fs-label>\n            Message\n          </fs-label>\n          {{ process.message }}\n        </fs-label-field>\n      }\n      @if (process.log) {\n        <fs-label-field>\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    @if (process.state === ProcessState.Running) {\n      <button\n        mat-button\n        (click)=\"kill()\">\n        Kill\n      </button>\n    }\n    @if (process.state !== ProcessState.Running) {\n      <button\n        mat-button\n        (click)=\"run()\">\n        Run\n      </button>\n    }\n    @if ((\n      process.state !== ProcessState.Running &&\n      process.state !== ProcessState.Queued\n      )) {\n      <button\n        mat-button\n        (click)=\"queue()\">\n        Queue\n      </button>\n    }\n    @if (process.filename) {\n      <button\n        mat-button\n        (click)=\"download()\">\n        Download\n      </button>\n    }\n  </mat-dialog-actions>\n</fs-dialog>", 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: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>\n    Process\n  </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        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div\n              class=\"status\"\n              [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ ProcessStates[process.state] }}\n            <ng-container *ngIf=\"process.state === ProcessState.Running\">\n              <mat-progress-spinner\n                [diameter]=\"20\"\n                [mode]=\"'indeterminate'\">\n              </mat-progress-spinner>\n            </ng-container>\n          </div>\n        </fs-label-field>\n        <fs-label-field *ngIf=\"process.notify\">\n          <fs-label>\n            Notification Email\n          </fs-label>\n          {{ process.notify }}\n        </fs-label-field>\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        <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        <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        <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        <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      <fs-label-field *ngIf=\"process.message\">\n        <fs-label>\n          Message\n        </fs-label>\n        {{ process.message }}\n      </fs-label-field>\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    </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\"\n        mat-button\n        (click)=\"kill()\">\n      Kill\n    </button>\n    <button\n        *ngIf=\"process.state !== ProcessState.Running\"\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        )\"\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>", 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: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$3.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$2.FsPrompt }, { type: i3$3.FsProcess }, { type: i1$2.FsApi }] });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsSkeletonModule,
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsLabelModule,
+                        NgClass,
+                        MatProgressSpinner,
+                        MatDialogActions,
+                        MatButton,
+                        MatDialogClose,
+                        FsDateModule,
+                    ], template: "<fs-dialog *fsSkeleton=\"process\">\n  <div mat-dialog-title>\n    Process\n  </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        <fs-label-field>\n          <fs-label>\n            Status\n          </fs-label>\n          <div\n            class=\"status\"\n            [ngClass]=\"{ 'running': process.state === ProcessState.Running }\">\n            {{ ProcessStates[process.state] }}\n            @if (process.state === ProcessState.Running) {\n              <mat-progress-spinner\n                [diameter]=\"20\"\n                [mode]=\"'indeterminate'\">\n              </mat-progress-spinner>\n            }\n          </div>\n        </fs-label-field>\n        @if (process.notify) {\n          <fs-label-field>\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          @if (process.pid) {\n            <div class=\"small\">\n              {{ ProcessProcessStates[process.processState] || 'Unknown' }}\n            </div>\n          }\n        </fs-label-field>\n        @if (process.createDate) {\n          <fs-label-field>\n            <fs-label>\n              Create Date\n            </fs-label>\n            {{ process.createDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.startDate) {\n          <fs-label-field>\n            <fs-label>\n              Start Date\n            </fs-label>\n            {{ process.startDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.endDate) {\n          <fs-label-field>\n            <fs-label>\n              Complete Date\n            </fs-label>\n            {{ process.endDate | fsDateFormat: 'date-time' }}\n          </fs-label-field>\n        }\n        @if (process.duration) {\n          <fs-label-field>\n            <fs-label>\n              Duration\n            </fs-label>\n            {{ process.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n          </fs-label-field>\n        }\n      </div>\n      @if (process.message) {\n        <fs-label-field>\n          <fs-label>\n            Message\n          </fs-label>\n          {{ process.message }}\n        </fs-label-field>\n      }\n      @if (process.log) {\n        <fs-label-field>\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    @if (process.state === ProcessState.Running) {\n      <button\n        mat-button\n        (click)=\"kill()\">\n        Kill\n      </button>\n    }\n    @if (process.state !== ProcessState.Running) {\n      <button\n        mat-button\n        (click)=\"run()\">\n        Run\n      </button>\n    }\n    @if ((\n      process.state !== ProcessState.Running &&\n      process.state !== ProcessState.Queued\n      )) {\n      <button\n        mat-button\n        (click)=\"queue()\">\n        Queue\n      </button>\n    }\n    @if (process.filename) {\n      <button\n        mat-button\n        (click)=\"download()\">\n        Download\n      </button>\n    }\n  </mat-dialog-actions>\n</fs-dialog>", 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"] }]
+        }] });
 
 class ProcessesComponent {
-    _dialog;
-    _message;
-    _process;
-    _api;
+    _dialog = inject(MatDialog);
+    _message = inject(FsMessage);
+    _process = inject(FsProcess);
+    _api = inject(FsApi);
     list;
     actions = [];
     config = null;
@@ -1294,12 +1093,6 @@ class ProcessesComponent {
     ProcessState = ProcessState;
     _destroy$ = new Subject();
     _processData = inject(ProcessData);
-    constructor(_dialog, _message, _process, _api) {
-        this._dialog = _dialog;
-        this._message = _message;
-        this._process = _process;
-        this._api = _api;
-    }
     ngOnInit() {
         this._configList();
     }
@@ -1438,13 +1231,13 @@ class ProcessesComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessesComponent, deps: [{ token: i1.MatDialog }, { token: i1$3.FsMessage }, { token: i3$3.FsProcess }, { token: i1$2.FsApi }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ProcessesComponent, selector: "fs-system-processes", inputs: { 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>\n      Name\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ ProcessStates[row.state] }}\n      <small>\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">\n          Complete: {{ row.percent }}%\n        </div>\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">\n          <a\n              href=\"javascript:;\"\n              (click)=\"download(row)\">\n            {{ row.filename }}\n          </a>\n        </div>\n        <div *ngIf=\"row.pid\">\n          PID: {{ row.pid }}\n        </div>\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">\n          Notify: {{ row.notify }}\n        </div>\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Duration\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.message }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Completed\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "pipe", type: i3$1.FsDateDurationPipe, name: "fsDateDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ProcessesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ProcessesComponent, isStandalone: true, selector: "fs-system-processes", inputs: { 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>\n      Name\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ ProcessStates[row.state] }}\n      <small>\n        @if (row.state===ProcessState.Running && row.percent) {\n          <div>\n            Complete: {{ row.percent }}%\n          </div>\n        }\n        @if (row.state===ProcessState.Completed && row.filename) {\n          <div>\n            <a\n              href=\"javascript:;\"\n              (click)=\"download(row)\">\n              {{ row.filename }}\n            </a>\n          </div>\n        }\n        @if (row.pid) {\n          <div>\n            PID: {{ row.pid }}\n          </div>\n        }\n        @if (row.state===ProcessState.Running && row.notify) {\n          <div>\n            Notify: {{ row.notify }}\n          </div>\n        }\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Duration\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.message }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Completed\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [""], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateDurationPipe, name: "fsDateDuration" }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", 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>\n      Name\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ ProcessStates[row.state] }}\n      <small>\n        <div *ngIf=\"row.state===ProcessState.Running && row.percent\">\n          Complete: {{ row.percent }}%\n        </div>\n        <div *ngIf=\"row.state===ProcessState.Completed && row.filename\">\n          <a\n              href=\"javascript:;\"\n              (click)=\"download(row)\">\n            {{ row.filename }}\n          </a>\n        </div>\n        <div *ngIf=\"row.pid\">\n          PID: {{ row.pid }}\n        </div>\n        <div *ngIf=\"row.state===ProcessState.Running && row.notify\">\n          Notify: {{ row.notify }}\n        </div>\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Duration\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ row.message }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Completed\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i1$3.FsMessage }, { type: i3$3.FsProcess }, { type: i1$2.FsApi }], propDecorators: { list: [{
+            args: [{ selector: 'fs-system-processes', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsListModule, FsDateModule], template: "<fs-list [config]=\"config\">\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Name\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <a (click)=\"open(row)\">\n        {{ row.name }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Status\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ ProcessStates[row.state] }}\n      <small>\n        @if (row.state===ProcessState.Running && row.percent) {\n          <div>\n            Complete: {{ row.percent }}%\n          </div>\n        }\n        @if (row.state===ProcessState.Completed && row.filename) {\n          <div>\n            <a\n              href=\"javascript:;\"\n              (click)=\"download(row)\">\n              {{ row.filename }}\n            </a>\n          </div>\n        }\n        @if (row.pid) {\n          <div>\n            PID: {{ row.pid }}\n          </div>\n        }\n        @if (row.state===ProcessState.Running && row.notify) {\n          <div>\n            Notify: {{ row.notify }}\n          </div>\n        }\n      </small>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Duration\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.duration | fsDateDuration: {hours: true, minutes: true, seconds: true} }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      {{ row.message }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Completed\n    </ng-template>\n    <ng-template\n      fs-list-cell\n      let-row=\"row\">\n      <fs-date-ago [date]=\"row.endDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>" }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }], actions: [{
@@ -1471,11 +1264,8 @@ const LogTypes = [
 ];
 
 class ServerLogComponent {
-    data;
+    data = inject(MAT_DIALOG_DATA);
     log;
-    constructor(data) {
-        this.data = data;
-    }
     ngOnInit() {
         if (this.data.log) {
             this.log = this.data.log;
@@ -1493,8 +1283,8 @@ class ServerLogComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ServerLogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>\n    Log\n  </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      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log.message }}\n      </fs-label-field>\n      <fs-label-field *ngIf=\"log.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{ log.url }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log.createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log.file }} &#64; {{ log.line }}\n      </fs-label-field>\n    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>\n        {{ log.server|json }}\n      </pre>\n    </fs-label-field>\n    <fs-label-field>\n      <fs-label>\n        Backtrace\n      </fs-label>\n      <pre>\n        {{ log.backtrace|json }}\n      </pre>\n    </fs-label-field>\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>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "ngmodule", type: MatDialogModule }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i6$1.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i6$1.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsBadgeModule }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i3$1.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i6$2.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i8.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ServerLogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>\n    Log\n  </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      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log.message }}\n      </fs-label-field>\n      @if (log.url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log.url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log.createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log.file }} &#64; {{ log.line }}\n      </fs-label-field>\n    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>\n        {{ log.server|json }}\n      </pre>\n    </fs-label-field>\n    <fs-label-field>\n      <fs-label>\n        Backtrace\n      </fs-label>\n      <pre>\n        {{ log.backtrace|json }}\n      </pre>\n    </fs-label-field>\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>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.JsonPipe, name: "json" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsBadgeModule }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogComponent, decorators: [{
             type: Component,
@@ -1511,25 +1301,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsDateModule,
                         FsSkeletonModule,
                         FsDialogModule,
-                    ], template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>\n    Log\n  </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      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log.message }}\n      </fs-label-field>\n      <fs-label-field *ngIf=\"log.url\">\n        <fs-label>\n          URL\n        </fs-label>\n        {{ log.url }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log.createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log.file }} &#64; {{ log.line }}\n      </fs-label-field>\n    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>\n        {{ log.server|json }}\n      </pre>\n    </fs-label-field>\n    <fs-label-field>\n      <fs-label>\n        Backtrace\n      </fs-label>\n      <pre>\n        {{ log.backtrace|json }}\n      </pre>\n    </fs-label-field>\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>" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
+                    ], template: "<fs-dialog *fsSkeleton=\"log\">\n  <div mat-dialog-title>\n    Log\n  </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      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log.message }}\n      </fs-label-field>\n      @if (log.url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log.url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log.createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log.file }} &#64; {{ log.line }}\n      </fs-label-field>\n    </div>\n    <fs-label-field>\n      <fs-label>\n        $_SERVER\n      </fs-label>\n      <pre>\n        {{ log.server|json }}\n      </pre>\n    </fs-label-field>\n    <fs-label-field>\n      <fs-label>\n        Backtrace\n      </fs-label>\n      <pre>\n        {{ log.backtrace|json }}\n      </pre>\n    </fs-label-field>\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>" }]
+        }] });
 
 class ServerLogsComponent {
-    _dialog;
-    _api;
+    _dialog = inject(MatDialog);
+    _api = inject(FsApi);
     list;
     loadLogs;
     acknowledgedAll = new EventEmitter();
     config = null;
     actions = [];
     LogTypes = index(LogTypes, 'value', 'name');
-    constructor(_dialog, _api) {
-        this._dialog = _dialog;
-        this._api = _api;
-    }
     ngOnInit() {
         this._configList();
     }
@@ -1585,13 +1368,17 @@ class ServerLogsComponent {
             },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogsComponent, deps: [{ token: i1.MatDialog }, { token: i1$2.FsApi }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ServerLogsComponent, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, outputs: { acknowledgedAll: "acknowledgedAll" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column width=\"1%\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"toggleAcknowledged(row)\">\n        <fs-badge\n          [size]=\"10\"\n          [tooltip]=\"row.acknowledged ? 'Acknowledged' : 'Unacknowledged'\"\n          [color]=\"row.acknowledged ? '#E3E3E3' : '#F30000'\">\n        </fs-badge>\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a\n          href=\"javascript:;\"\n          (click)=\"open(row)\">\n        {{ row.message }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Type\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ LogTypes[row.type] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Date\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: ["fs-list ::ng-deep .col-date,fs-list ::ng-deep .col-type{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: i5$1.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconSizePercent", "iconColor", "backgroundSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ServerLogsComponent, isStandalone: true, selector: "fs-system-server-logs", inputs: { loadLogs: "loadLogs" }, outputs: { acknowledgedAll: "acknowledgedAll" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n  <fs-list-column width=\"1%\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"toggleAcknowledged(row)\">\n        <fs-badge\n          [size]=\"10\"\n          [tooltip]=\"row.acknowledged ? 'Acknowledged' : 'Unacknowledged'\"\n          [color]=\"row.acknowledged ? '#E3E3E3' : '#F30000'\">\n        </fs-badge>\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a\n          href=\"javascript:;\"\n          (click)=\"open(row)\">\n        {{ row.message }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Type\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ LogTypes[row.type] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Date\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: ["fs-list ::ng-deep .col-date,fs-list ::ng-deep .col-type{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsBadgeModule }, { kind: "component", type: i2$3.FsBadgeComponent, selector: "fs-badge", inputs: ["color", "text", "tooltip", "size", "shape", "image", "icon", "iconSize", "iconSizePercent", "iconColor", "backgroundSize"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-server-logs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"config\">\n  <fs-list-column width=\"1%\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"toggleAcknowledged(row)\">\n        <fs-badge\n          [size]=\"10\"\n          [tooltip]=\"row.acknowledged ? 'Acknowledged' : 'Unacknowledged'\"\n          [color]=\"row.acknowledged ? '#E3E3E3' : '#F30000'\">\n        </fs-badge>\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a\n          href=\"javascript:;\"\n          (click)=\"open(row)\">\n        {{ row.message }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Type\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ LogTypes[row.type] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Date\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: ["fs-list ::ng-deep .col-date,fs-list ::ng-deep .col-type{white-space:nowrap}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i1$2.FsApi }], propDecorators: { list: [{
+            args: [{ selector: 'fs-system-server-logs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsListModule,
+                        FsBadgeModule,
+                        FsDateModule,
+                    ], template: "<fs-list [config]=\"config\">\n  <fs-list-column width=\"1%\">\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a (click)=\"toggleAcknowledged(row)\">\n        <fs-badge\n          [size]=\"10\"\n          [tooltip]=\"row.acknowledged ? 'Acknowledged' : 'Unacknowledged'\"\n          [color]=\"row.acknowledged ? '#E3E3E3' : '#F30000'\">\n        </fs-badge>\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column>\n    <ng-template fs-list-header>\n      Message\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <a\n          href=\"javascript:;\"\n          (click)=\"open(row)\">\n        {{ row.message }}\n      </a>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Type\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      {{ LogTypes[row.type] }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-date\">\n    <ng-template fs-list-header>\n      Date\n    </ng-template>\n    <ng-template\n        fs-list-cell\n        let-row=\"row\">\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: ["fs-list ::ng-deep .col-date,fs-list ::ng-deep .col-type{white-space:nowrap}\n"] }]
+        }], propDecorators: { list: [{
                 type: ViewChild,
                 args: [FsListComponent]
             }], loadLogs: [{
@@ -1607,23 +1394,24 @@ class KeyNameValuePipe {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: KeyNameValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: KeyNameValuePipe, name: "keyNameValue" });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: KeyNameValuePipe, isStandalone: true, name: "keyNameValue" });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: KeyNameValuePipe });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: KeyNameValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'keyNameValue',
+                    standalone: true,
                 }]
         }, {
             type: Injectable
         }] });
 
 class SettingsComponent {
-    _message;
-    _clipboard;
-    _prompt;
-    _cdRef;
+    _message = inject(FsMessage);
+    _clipboard = inject(FsClipboard);
+    _prompt = inject(FsPrompt);
+    _cdRef = inject(ChangeDetectorRef);
     loadSettings;
     save;
     fileRemove = new EventEmitter();
@@ -1631,12 +1419,6 @@ class SettingsComponent {
     groupedSettings = [];
     groups = [];
     SettingInterfaceType = SettingInterfaceType;
-    constructor(_message, _clipboard, _prompt, _cdRef) {
-        this._message = _message;
-        this._clipboard = _clipboard;
-        this._prompt = _prompt;
-        this._cdRef = _cdRef;
-    }
     ngOnInit() {
         this.loadSettings({
             visible: true,
@@ -1723,13 +1505,34 @@ class SettingsComponent {
             this._message.success('Changes Saved');
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$3.FsMessage }, { token: i2.FsClipboard }, { token: i2$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "<mat-accordion>\r\n  <mat-expansion-panel\r\n      hideToggle\r\n      *ngFor=\"let group of groups\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <div class=\"title-row\">\r\n          <div class=\"title\">\r\n            {{ group || 'General' }}\r\n          </div>\r\n          <div class=\"actions\">\r\n            <button\r\n                type=\"button\"\r\n                [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n                mat-icon-button\r\n                (click)=\"export($event, groupedSettings[group])\">\r\n              <mat-icon>\r\n                cloud_download\r\n              </mat-icon>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n                mat-icon-button\r\n                (click)=\"import($event, group)\">\r\n              <mat-icon>\r\n                cloud_upload\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <div\r\n        hideToggle\r\n        *ngFor=\"let setting of groupedSettings[group]\"\r\n        class=\"setting\"\r\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <textarea\r\n          matInput\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        </textarea>\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <mat-select\r\n            [(ngModel)]=\"setting.value\"\r\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\r\n            [name]=\"'setting' + setting.id\">\r\n          <mat-option\r\n              *ngFor=\"let item of setting.values | keyNameValue\"\r\n              [value]=\"item.value\">\r\n            {{ item.name }}\r\n          </mat-option>\r\n        </mat-select>\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsDatePicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsColorPicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsTimePicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <fs-file-picker\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n          [allowRemove]=\"true\"\r\n          [allowDownload]=\"true\"\r\n          (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n          (remove)=\"fileRemove.emit(setting)\"\r\n          [url]=\"setting.value\">\r\n        <div fsFileLabel>\r\n          {{ setting.label }}\r\n        </div>\r\n        <div fsFileHint>\r\n          {{ setting.instruction }}\r\n        </div>\r\n      </fs-file-picker>\r\n    </div>\r\n    <button\r\n        mat-stroked-button\r\n        color=\"primary\"\r\n        type=\"button\"\r\n        (click)=\"saveGroup(group)\">\r\n      Save\r\n    </button>\r\n  </mat-expansion-panel>\r\n</mat-accordion>", 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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i7$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3$2.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: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SettingsComponent, isStandalone: true, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "<mat-accordion>\n  @for (group of groups; track group) {\n    <mat-expansion-panel\n      hideToggle\n      >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class=\"title-row\">\n            <div class=\"title\">\n              {{ group || 'General' }}\n            </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>\n                  cloud_download\n                </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>\n                  cloud_upload\n                </mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (setting of groupedSettings[group]; track setting) {\n        <div\n          hideToggle\n          class=\"setting\"\n          [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n          @if (setting.interfaceType===SettingInterfaceType.InputBox) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Textarea) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <textarea\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              </textarea>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <mat-select\n                [(ngModel)]=\"setting.value\"\n                [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\n                [name]=\"'setting' + setting.id\">\n                @for (item of setting.values | keyNameValue; track item) {\n                  <mat-option\n                    [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Date) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsDatePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Color) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsColorPicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Time) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsTimePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.File) {\n            <fs-file-picker\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>\n                {{ setting.label }}\n              </div>\n              <div fsFileHint>\n                {{ setting.instruction }}\n              </div>\n            </fs-file-picker>\n          }\n        </div>\n      }\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"saveGroup(group)\">\n        Save\n      </button>\n    </mat-expansion-panel>\n  }\n</mat-accordion>", 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: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$4.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i2$4.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { kind: "ngmodule", type: FsColorPickerModule }, { kind: "component", type: i3$3.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i4$1.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: i4$1.FsFileLabelDirective, selector: "[fsFileLabel]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: KeyNameValuePipe, name: "keyNameValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-accordion>\r\n  <mat-expansion-panel\r\n      hideToggle\r\n      *ngFor=\"let group of groups\">\r\n    <mat-expansion-panel-header>\r\n      <mat-panel-title>\r\n        <div class=\"title-row\">\r\n          <div class=\"title\">\r\n            {{ group || 'General' }}\r\n          </div>\r\n          <div class=\"actions\">\r\n            <button\r\n                type=\"button\"\r\n                [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n                mat-icon-button\r\n                (click)=\"export($event, groupedSettings[group])\">\r\n              <mat-icon>\r\n                cloud_download\r\n              </mat-icon>\r\n            </button>\r\n            <button\r\n                type=\"button\"\r\n                [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n                mat-icon-button\r\n                (click)=\"import($event, group)\">\r\n              <mat-icon>\r\n                cloud_upload\r\n              </mat-icon>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n    <div\r\n        hideToggle\r\n        *ngFor=\"let setting of groupedSettings[group]\"\r\n        class=\"setting\"\r\n        [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <textarea\r\n          matInput\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        </textarea>\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <mat-select\r\n            [(ngModel)]=\"setting.value\"\r\n            [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\r\n            [name]=\"'setting' + setting.id\">\r\n          <mat-option\r\n              *ngFor=\"let item of setting.values | keyNameValue\"\r\n              [value]=\"item.value\">\r\n            {{ item.name }}\r\n          </mat-option>\r\n        </mat-select>\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsDatePicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsColorPicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <mat-form-field\r\n          class=\"full-width form-field-multiline-subscript\"\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n        <mat-label>\r\n          {{ setting.label }}\r\n        </mat-label>\r\n        <input\r\n          matInput\r\n          fsTimePicker\r\n          [(ngModel)]=\"setting.value\"\r\n          [name]=\"'setting' + setting.id\">\r\n        <mat-hint>\r\n          {{ setting.instruction }}\r\n        </mat-hint>\r\n      </mat-form-field>\r\n      <fs-file-picker\r\n          *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n          [allowRemove]=\"true\"\r\n          [allowDownload]=\"true\"\r\n          (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n          (remove)=\"fileRemove.emit(setting)\"\r\n          [url]=\"setting.value\">\r\n        <div fsFileLabel>\r\n          {{ setting.label }}\r\n        </div>\r\n        <div fsFileHint>\r\n          {{ setting.instruction }}\r\n        </div>\r\n      </fs-file-picker>\r\n    </div>\r\n    <button\r\n        mat-stroked-button\r\n        color=\"primary\"\r\n        type=\"button\"\r\n        (click)=\"saveGroup(group)\">\r\n      Save\r\n    </button>\r\n  </mat-expansion-panel>\r\n</mat-accordion>", 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: () => [{ type: i1$3.FsMessage }, { type: i2.FsClipboard }, { type: i2$2.FsPrompt }, { type: i0.ChangeDetectorRef }], propDecorators: { loadSettings: [{
+            args: [{ selector: 'fs-system-settings', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatAccordion,
+                        MatExpansionPanel,
+                        MatExpansionPanelHeader,
+                        MatExpansionPanelTitle,
+                        MatIconButton,
+                        MatTooltip,
+                        MatIcon,
+                        NgClass,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        FormsModule,
+                        MatHint,
+                        MatSelect,
+                        MatOption,
+                        FsDatePickerModule,
+                        FsColorPickerModule,
+                        FsFileModule,
+                        MatButton,
+                        KeyNameValuePipe,
+                    ], template: "<mat-accordion>\n  @for (group of groups; track group) {\n    <mat-expansion-panel\n      hideToggle\n      >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class=\"title-row\">\n            <div class=\"title\">\n              {{ group || 'General' }}\n            </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>\n                  cloud_download\n                </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>\n                  cloud_upload\n                </mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (setting of groupedSettings[group]; track setting) {\n        <div\n          hideToggle\n          class=\"setting\"\n          [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n          @if (setting.interfaceType===SettingInterfaceType.InputBox) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Textarea) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <textarea\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              </textarea>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <mat-select\n                [(ngModel)]=\"setting.value\"\n                [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\n                [name]=\"'setting' + setting.id\">\n                @for (item of setting.values | keyNameValue; track item) {\n                  <mat-option\n                    [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Date) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsDatePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Color) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsColorPicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Time) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsTimePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.File) {\n            <fs-file-picker\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>\n                {{ setting.label }}\n              </div>\n              <div fsFileHint>\n                {{ setting.instruction }}\n              </div>\n            </fs-file-picker>\n          }\n        </div>\n      }\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"saveGroup(group)\">\n        Save\n      </button>\n    </mat-expansion-panel>\n  }\n</mat-accordion>", 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"] }]
+        }], propDecorators: { loadSettings: [{
                 type: Input
             }], save: [{
                 type: Input
@@ -1764,11 +1567,11 @@ class UpgradeLogsComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UpgradeLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: UpgradeLogsComponent, selector: "fs-system-upgrade-logs", inputs: { loadUpgradeLogs: "loadUpgradeLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.name}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Function</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.function}}()\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Date</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "component", type: i4$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i4$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i4$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i4$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: UpgradeLogsComponent, isStandalone: true, 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: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: i1$1.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: UpgradeLogsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-system-upgrade-logs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-list [config]=\"config\">\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Name</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.name}}\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Function</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      {{row.function}}()\r\n    </ng-template>\r\n  </fs-list-column>\r\n\r\n  <fs-list-column>\r\n    <ng-template fs-list-header>Date</ng-template>\r\n    <ng-template fs-list-cell let-row=\"row\">\r\n      <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n    </ng-template>\r\n  </fs-list-column>\r\n</fs-list>\r\n" }]
+            args: [{ selector: 'fs-system-upgrade-logs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FsListModule, FsDateModule], 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: [{
                 type: ViewChild,
                 args: [FsListComponent, { static: true }]
@@ -1788,20 +1591,7 @@ class FsSystemModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsSystemModule, declarations: [DashboardComponent,
-            CronNextRunComponent,
-            CronsComponent,
-            SettingsComponent,
-            KeyNameValuePipe,
-            ProcessesComponent,
-            ServerLogsComponent,
-            UpgradeLogsComponent,
-            ApiLogsComponent,
-            ApiLogComponent,
-            InfoComponent,
-            ProcessComponent,
-            CronComponent,
-            CronLogComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsSystemModule, imports: [CommonModule,
             FormsModule,
             MatButtonModule,
             MatExpansionModule,
@@ -1825,7 +1615,21 @@ class FsSystemModule {
             FsBadgeModule,
             FsPopoverModule,
             FsColorPickerModule,
-            CronLogsComponent], exports: [DashboardComponent,
+            CronLogsComponent,
+            DashboardComponent,
+            CronNextRunComponent,
+            CronsComponent,
+            SettingsComponent,
+            KeyNameValuePipe,
+            ProcessesComponent,
+            ServerLogsComponent,
+            UpgradeLogsComponent,
+            ApiLogsComponent,
+            ApiLogComponent,
+            InfoComponent,
+            ProcessComponent,
+            CronComponent,
+            CronLogComponent], exports: [DashboardComponent,
             CronsComponent,
             SettingsComponent,
             ProcessesComponent,
@@ -1857,7 +1661,19 @@ class FsSystemModule {
             FsBadgeModule,
             FsPopoverModule,
             FsColorPickerModule,
-            CronLogsComponent] });
+            CronLogsComponent,
+            DashboardComponent,
+            CronNextRunComponent,
+            CronsComponent,
+            SettingsComponent,
+            ProcessesComponent,
+            ServerLogsComponent,
+            UpgradeLogsComponent,
+            ApiLogsComponent,
+            ApiLogComponent,
+            ProcessComponent,
+            CronComponent,
+            CronLogComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsSystemModule, decorators: [{
             type: NgModule,
@@ -1888,39 +1704,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsPopoverModule,
                         FsColorPickerModule,
                         CronLogsComponent,
-                    ],
-                    exports: [
                         DashboardComponent,
+                        CronNextRunComponent,
                         CronsComponent,
                         SettingsComponent,
+                        KeyNameValuePipe,
                         ProcessesComponent,
                         ServerLogsComponent,
                         UpgradeLogsComponent,
                         ApiLogsComponent,
+                        ApiLogComponent,
                         InfoComponent,
+                        ProcessComponent,
+                        CronComponent,
+                        CronLogComponent,
                     ],
-                    declarations: [
+                    exports: [
                         DashboardComponent,
-                        CronNextRunComponent,
                         CronsComponent,
                         SettingsComponent,
-                        KeyNameValuePipe,
                         ProcessesComponent,
                         ServerLogsComponent,
                         UpgradeLogsComponent,
                         ApiLogsComponent,
-                        ApiLogComponent,
                         InfoComponent,
-                        ProcessComponent,
-                        CronComponent,
-                        CronLogComponent,
                     ],
                 }]
         }] });
 
+class ExplainComponent {
+    _data = inject(MAT_DIALOG_DATA);
+    explain;
+    constructor() {
+        const _data = this._data;
+        this.explain = _data.explain;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ExplainComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: ExplainComponent, isStandalone: true, 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: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$5.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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ExplainComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogClose,
+                        JsonPipe,
+                    ], 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: () => [] });
+
+class QueryLogComponent {
+    _data = inject(MAT_DIALOG_DATA);
+    _dialog = inject(MatDialog);
+    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() {
+        const _data = this._data;
+        this.queryLog = _data.queryLog;
+    }
+    openExplain() {
+        this._dialog.open(ExplainComponent, {
+            data: { explain: this.explain },
+        });
+    }
+    get explain() {
+        return this.queryLog.explain;
+    }
+    get queryBlock() {
+        return this.explain?.queryBlock;
+    }
+    get orderingOperation() {
+        return this.queryBlock?.orderingOperation;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueryLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: QueryLogComponent, isStandalone: true, 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  @if (selectId) {\n    <h1>Select {{selectId}}</h1>\n  }\n\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    @if (costInfo?.queryCost) {\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{costInfo.queryCost}}\n      </fs-label-field>\n    }\n    @if (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    }\n\n    @if (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    }\n\n    @if (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    }\n  </div>\n\n  @if (queryBlock.orderingOperation) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n  }\n\n  @if (queryBlock.groupingOperation) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n  }\n\n  @if (queryBlock.duplicatesRemoval) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n  }\n\n  @if (queryBlock.table) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: { nestedLoop: [ queryBlock ]} }\"></ng-container>\n    @if (queryBlock.table.attachedSubqueries) {\n      <fs-label>Attached Subqueries</fs-label>\n      @for (subquery of queryBlock.table.attachedSubqueries; track subquery) {\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      }\n    }\n  }\n\n  @if (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        @for (item of queryBlock.nestedLoop; track item; 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                @for (ref of item.table.ref; track ref) {\n                  <span>{{ref}}</span>\n                }\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                @if (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                }\n                @if (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                }\n                @if (item.usingIndex) {\n                  <span>Using Index</span>\n                }\n                @if (item.usingFilesort) {\n                  <span class=\"critical\">Using File Sort</span>\n                }\n                @if (item.usingTemporaryTable) {\n                  <span class=\"critical\">Temporary Table</span>\n                }\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        }\n      </tbody>\n    </table>\n    <br>\n    }\n\n    @if (queryBlock.selectListSubqueries) {\n      <br>\n        <fs-label>Select List Subqueries</fs-label>\n        @for (subquery of queryBlock.selectListSubqueries; track subquery) {\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        }\n      }\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          @for (possibleKey of data.possibleKeys; track possibleKey) {\n            <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n          }\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          @if (queryBlock.usingFilesort) {\n            <span class=\"critical\">Using File Sort</span>\n          }\n\n          @if (queryBlock.usingTemporaryTable) {\n            <span class=\"critical\">Temporary Table</span>\n          }\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: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "ngmodule", type: FsClipboardModule }, { kind: "component", type: i3$4.FsClipboardButtonComponent, selector: "fs-clipboard-button", inputs: ["content", "tooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: FsFormModule }, { kind: "directive", type: i2$5.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: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: FsPopoverModule }, { kind: "component", type: i2$1.FsPopoverComponent, selector: "fs-popover" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "pipe", type: i6.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueryLogComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsDialogModule,
+                        MatDialogTitle,
+                        CdkScrollable,
+                        MatDialogContent,
+                        FsLabelModule,
+                        MatTabGroup,
+                        MatTab,
+                        FsClipboardModule,
+                        NgTemplateOutlet,
+                        MatDialogActions,
+                        MatButton,
+                        FsFormModule,
+                        MatDialogClose,
+                        FsPopoverModule,
+                        NgClass,
+                        FsCommonModule,
+                    ], 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  @if (selectId) {\n    <h1>Select {{selectId}}</h1>\n  }\n\n  <div class=\"fs-row.gap-lg.wrap.align-start\">\n    @if (costInfo?.queryCost) {\n      <fs-label-field>\n        <fs-label>Query Cost</fs-label>\n        {{costInfo.queryCost}}\n      </fs-label-field>\n    }\n    @if (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    }\n\n    @if (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    }\n\n    @if (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    }\n  </div>\n\n  @if (queryBlock.orderingOperation) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.orderingOperation }\"></ng-container>\n  }\n\n  @if (queryBlock.groupingOperation) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.groupingOperation }\"></ng-container>\n  }\n\n  @if (queryBlock.duplicatesRemoval) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: queryBlock.duplicatesRemoval }\"></ng-container>\n  }\n\n  @if (queryBlock.table) {\n    <ng-container [ngTemplateOutlet]=\"nestedLoop\" [ngTemplateOutletContext]=\"{ queryBlock: { nestedLoop: [ queryBlock ]} }\"></ng-container>\n    @if (queryBlock.table.attachedSubqueries) {\n      <fs-label>Attached Subqueries</fs-label>\n      @for (subquery of queryBlock.table.attachedSubqueries; track subquery) {\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      }\n    }\n  }\n\n  @if (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        @for (item of queryBlock.nestedLoop; track item; 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                @for (ref of item.table.ref; track ref) {\n                  <span>{{ref}}</span>\n                }\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                @if (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                }\n                @if (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                }\n                @if (item.usingIndex) {\n                  <span>Using Index</span>\n                }\n                @if (item.usingFilesort) {\n                  <span class=\"critical\">Using File Sort</span>\n                }\n                @if (item.usingTemporaryTable) {\n                  <span class=\"critical\">Temporary Table</span>\n                }\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        }\n      </tbody>\n    </table>\n    <br>\n    }\n\n    @if (queryBlock.selectListSubqueries) {\n      <br>\n        <fs-label>Select List Subqueries</fs-label>\n        @for (subquery of queryBlock.selectListSubqueries; track subquery) {\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        }\n      }\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          @for (possibleKey of data.possibleKeys; track possibleKey) {\n            <span [ngClass]=\"{ 'query-log-used-key': possibleKey === data.key }\">{{possibleKey}}</span>\n          }\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          @if (queryBlock.usingFilesort) {\n            <span class=\"critical\">Using File Sort</span>\n          }\n\n          @if (queryBlock.usingTemporaryTable) {\n            <span class=\"critical\">Temporary Table</span>\n          }\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: () => [] });
+
+class QueryLogsComponent {
+    _dialog = inject(MatDialog);
+    list;
+    loadQueryLogs;
+    purgeQueryLogs;
+    listConfig;
+    openQueryLog(queryLog) {
+        this._dialog.open(QueryLogComponent, {
+            data: { queryLog },
+            width: '100%',
+        });
+    }
+    ngOnInit() {
+        this.listConfig = {
+            filters: [
+                {
+                    name: 'keyword',
+                    type: ItemType.Keyword,
+                    label: 'Search',
+                },
+                {
+                    name: 'optimized',
+                    type: ItemType.Select,
+                    label: 'Optimization',
+                    values: [
+                        { name: 'Any', value: undefined },
+                        { name: 'Yes', value: 'true' },
+                        { name: 'No', value: 'false' },
+                    ],
+                },
+                {
+                    name: 'createDate',
+                    type: ItemType.DateTimeRange,
+                    label: ['From Date', 'To Date'],
+                },
+                {
+                    name: 'duration',
+                    type: ItemType.Range,
+                    label: ['Min Duration', 'Max Duration'],
+                },
+            ],
+            actions: [
+                {
+                    label: 'Purge',
+                    primary: false,
+                    click: () => {
+                        this.purgeQueryLogs()
+                            .subscribe(() => {
+                            this.list.reload();
+                        });
+                    },
+                },
+            ],
+            fetch: (query) => {
+                return this.loadQueryLogs(query)
+                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueryLogsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: QueryLogsComponent, isStandalone: true, 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: "ngmodule", type: FsListModule }, { kind: "component", type: i1$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { kind: "directive", type: i1$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customizable", "sortable", "sortableDefault", "sortableDirection", "direction", "align", "width", "class"] }, { kind: "directive", type: i1$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "component", type: i4.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { kind: "ngmodule", type: FsCommonModule }, { kind: "pipe", type: i6.FsFormatTruncatePipe, name: "fsFormatTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: QueryLogsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-system-query-logs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        FsListModule,
+                        NgClass,
+                        FsDateModule,
+                        FsCommonModule,
+                    ], 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"] }]
+        }], propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
+            }], loadQueryLogs: [{
+                type: Input
+            }], purgeQueryLogs: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, FsSystemQueryLogsModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, QueryLogsComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
+export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, QueryLogsComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
 //# sourceMappingURL=firestitch-system.mjs.map