@firestitch/system 13.0.1 → 13.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -29,11 +29,11 @@ import * as i7 from '@firestitch/popover';
29
29
  import { FsPopoverModule } from '@firestitch/popover';
30
30
  import { ItemType } from '@firestitch/filter';
31
31
  import { map, tap, switchMap, takeUntil } from 'rxjs/operators';
32
- import * as i4$4 from '@angular/material/expansion';
32
+ import * as i4$3 from '@angular/material/expansion';
33
33
  import { MatExpansionModule } from '@angular/material/expansion';
34
34
  import * as i7$1 from '@angular/material/form-field';
35
35
  import { MatFormFieldModule } from '@angular/material/form-field';
36
- import * as i6 from '@angular/material/icon';
36
+ import * as i3$2 from '@angular/material/icon';
37
37
  import { MatIconModule } from '@angular/material/icon';
38
38
  import * as i15 from '@angular/material/input';
39
39
  import { MatInputModule } from '@angular/material/input';
@@ -48,12 +48,12 @@ import { FsDatePickerModule } from '@firestitch/datepicker';
48
48
  import * as i12 from '@firestitch/file';
49
49
  import { FsFileModule } from '@firestitch/file';
50
50
  import { FsFileManagerModule } from '@firestitch/file-manager';
51
- import * as i4$3 from '@firestitch/menu';
51
+ import * as i6 from '@firestitch/menu';
52
52
  import { FsMenuModule } from '@firestitch/menu';
53
53
  import * as i5 from '@firestitch/skeleton';
54
54
  import { FsSkeletonModule } from '@firestitch/skeleton';
55
55
  import * as i1$1 from '@firestitch/message';
56
- import * as i3$2 from '@firestitch/prompt';
56
+ import * as i3$3 from '@firestitch/prompt';
57
57
  import { SelectionActionType } from '@firestitch/selection';
58
58
  import { Subject } from 'rxjs';
59
59
  import { differenceInSeconds, differenceInMinutes } from 'date-fns';
@@ -320,6 +320,32 @@ var CronLogState;
320
320
  CronLogState["LongRunning"] = "long_running";
321
321
  })(CronLogState || (CronLogState = {}));
322
322
 
323
+ const ApiLogStates = [
324
+ { name: 'Success', value: ApiLogState.Success },
325
+ { name: 'Failed', value: ApiLogState.Failed },
326
+ { name: 'Deleted', value: ApiLogState.Deleted }
327
+ ];
328
+
329
+ const CronLogStates = [
330
+ { name: 'Message', value: CronLogState.Message, color: '#29B7FF' },
331
+ { name: 'Disabled', value: CronLogState.Disabled, color: '#29B7FF' },
332
+ { name: 'Reset', value: CronLogState.Reset, color: '#29B7FF' },
333
+ { name: 'Enabled', value: CronLogState.Enabled, color: '#29B7FF' },
334
+ { name: 'Queued', value: CronLogState.Queued, color: '#29B7FF' },
335
+ { name: 'Started', value: CronLogState.Started, color: '#D17333' },
336
+ { name: 'Running', value: CronLogState.Running, color: '#34BD43' },
337
+ { name: 'Completed', value: CronLogState.Completed, color: '#34BD43' },
338
+ { name: 'Failed', value: CronLogState.Failed, color: '#FA7567' },
339
+ { name: 'Killed', value: CronLogState.Killed, color: '#FA7567' },
340
+ { name: 'Stagnant', value: CronLogState.Stagnant, color: '#FA7567' },
341
+ { name: 'Long Running', value: CronLogState.LongRunning, color: '#FA7567' },
342
+ ];
343
+
344
+ const CronProcessStates = [
345
+ { name: 'Running', value: 'running' },
346
+ { name: 'Stopped', value: 'stopped' },
347
+ ];
348
+
323
349
  const CronStates = [
324
350
  { name: 'Running', value: CronState.Running },
325
351
  { name: 'Idle', value: CronState.Idle },
@@ -330,12 +356,6 @@ const CronStates = [
330
356
  { name: 'Enabled', value: CronState.Enabled },
331
357
  ];
332
358
 
333
- const ApiLogStates = [
334
- { name: 'Success', value: ApiLogState.Success },
335
- { name: 'Failed', value: ApiLogState.Failed },
336
- { name: 'Deleted', value: ApiLogState.Deleted }
337
- ];
338
-
339
359
  const ProcessStates = [
340
360
  { name: 'Queued', value: ProcessState.Queued },
341
361
  { name: 'Running', value: ProcessState.Running },
@@ -345,6 +365,17 @@ const ProcessStates = [
345
365
  { name: 'Deleted', value: ProcessState.Deleted }
346
366
  ];
347
367
 
368
+ const SettingInterfaceTypes = [
369
+ { name: 'RadioButton', value: SettingInterfaceType.RadioButton },
370
+ { name: 'InputBox', value: SettingInterfaceType.InputBox },
371
+ { name: 'Textarea', value: SettingInterfaceType.Textarea },
372
+ { name: 'DropDown', value: SettingInterfaceType.Select },
373
+ { name: 'File', value: SettingInterfaceType.File },
374
+ { name: 'Static', value: SettingInterfaceType.Static },
375
+ { name: 'Password', value: SettingInterfaceType.Password },
376
+ { name: 'Color', value: SettingInterfaceType.Color }
377
+ ];
378
+
348
379
  function indexNameValue(arry) {
349
380
  const obj = {};
350
381
  arry.forEach(item => {
@@ -419,7 +450,7 @@ class ApiLogsComponent {
419
450
  }
420
451
  }
421
452
  ApiLogsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiLogsComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
422
- ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n <fs-list-column>\n <ng-template fs-list-header>Name</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <a href=\"javascript:;\" (click)=\"open(row)\">\n {{row.type || 'Unknown'}}\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n </a>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Status</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{apiLogStates[row.state]}}\n <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Message</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{row.message}}\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Date</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n </ng-template>\n </fs-list-column>\n </fs-list>\n", styles: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
453
+ ApiLogsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiLogsComponent, selector: "fs-system-api-logs", inputs: { loadApiLogs: "loadApiLogs" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\n <fs-list-column>\n <ng-template fs-list-header>Name</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <a href=\"javascript:;\" (click)=\"open(row)\">\n {{row.type || 'Unknown'}}\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n </a>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Status</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{apiLogStates[row.state]}}\n <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Message</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{row.message}}\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Date</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n </ng-template>\n </fs-list-column>\n </fs-list>\n", styles: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
423
454
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiLogsComponent, decorators: [{
424
455
  type: Component,
425
456
  args: [{ selector: 'fs-system-api-logs', template: "<fs-list [config]=\"config\">\n <fs-list-column>\n <ng-template fs-list-header>Name</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <a href=\"javascript:;\" (click)=\"open(row)\">\n {{row.type || 'Unknown'}}\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='outgoing'\">arrow_upward</mat-icon>\n <mat-icon class=\"direction\" *ngIf=\"row.direction=='incoming'\">arrow_downward</mat-icon>\n </a>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Status</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{apiLogStates[row.state]}}\n <span *ngIf=\"row.code\" class=\"code\" [ngClass]=\"{'success': row.code==200,'error': row.code!=200 }\">[{{row.code}}]</span>\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Message</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n {{row.message}}\n </ng-template>\n </fs-list-column>\n <fs-list-column>\n <ng-template fs-list-header>Date</ng-template>\n <ng-template fs-list-cell let-row=\"row\">\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\n <div><small *ngIf=\"row.length\">Duration: {{ row.length | fsDateDuration }}</small></div>\n </ng-template>\n </fs-list-column>\n </fs-list>\n", styles: [".code.success{color:green}.code.error{color:red}.direction{font-size:14px;height:14px;line-height:14px;width:14px}\n"] }]
@@ -430,21 +461,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
430
461
  type: Input
431
462
  }] } });
432
463
 
433
- const CronLogStates = [
434
- { name: 'Message', value: CronLogState.Message, color: '#29B7FF' },
435
- { name: 'Disabled', value: CronLogState.Disabled, color: '#29B7FF' },
436
- { name: 'Reset', value: CronLogState.Reset, color: '#29B7FF' },
437
- { name: 'Enabled', value: CronLogState.Enabled, color: '#29B7FF' },
438
- { name: 'Queued', value: CronLogState.Queued, color: '#29B7FF' },
439
- { name: 'Started', value: CronLogState.Started, color: '#D17333' },
440
- { name: 'Running', value: CronLogState.Running, color: '#34BD43' },
441
- { name: 'Completed', value: CronLogState.Completed, color: '#34BD43' },
442
- { name: 'Failed', value: CronLogState.Failed, color: '#FA7567' },
443
- { name: 'Killed', value: CronLogState.Killed, color: '#FA7567' },
444
- { name: 'Stagnant', value: CronLogState.Stagnant, color: '#FA7567' },
445
- { name: 'Long Running', value: CronLogState.LongRunning, color: '#FA7567' },
446
- ];
447
-
448
464
  class CronLogComponent {
449
465
  constructor(_data) {
450
466
  this._data = _data;
@@ -477,6 +493,7 @@ class CronComponent {
477
493
  this._cdRef = _cdRef;
478
494
  this.tabIndex = 0;
479
495
  this.CronStates = indexNameValue(CronStates);
496
+ this.CronProcessStates = indexNameValue(CronProcessStates);
480
497
  this.CronLogStates = indexNameValue(CronLogStates);
481
498
  this.CronLogStateColors = {};
482
499
  }
@@ -493,7 +510,7 @@ class CronComponent {
493
510
  data: {
494
511
  cronLog,
495
512
  },
496
- width: '85%'
513
+ width: '85%',
497
514
  });
498
515
  }
499
516
  cronActionClick(cronAction) {
@@ -548,10 +565,10 @@ class CronComponent {
548
565
  }
549
566
  }
550
567
  CronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CronComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
551
- CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n <h1 mat-dialog-title>\r\n Cron\r\n <div class=\"small\">{{cron.name}}</div>\r\n </h1>\r\n <mat-dialog-content>\r\n <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n <mat-tab label=\"Overview\">\r\n <div class=\"row\">\r\n <fs-label-field>\r\n <fs-label>\r\n Status\r\n </fs-label>\r\n {{CronStates[cron.state]}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.cronSetting\">\r\n <fs-label>\r\n Run Frequency\r\n </fs-label>\r\n {{cron.cronSetting.summary}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>\r\n Last Ran\r\n </fs-label>\r\n <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n </ng-template>\r\n </fs-label-field>\r\n </div>\r\n\r\n <fs-label-field *ngIf=\"cron.message\">\r\n <fs-label>\r\n Last Message\r\n </fs-label>\r\n <div class=\"message\">{{cron.message}}</div>\r\n </fs-label-field>\r\n </mat-tab>\r\n <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n <ng-template matTabContent>\r\n <fs-list [config]=\"config\">\r\n <fs-list-column name=\"state\" title=\"Status\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a \r\n (click)=\"cronLogOpen(row)\"\r\n [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n {{CronLogStates[row.state] || row.state}}\r\n </a>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Message\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <div class=\"message\">{{row.message}}</div>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Duration\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration\">\r\n {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n </ng-container>\r\n </ng-template>\r\n </fs-list-column>\r\n\r\n <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n </ng-template>\r\n </fs-list-column>\r\n </fs-list> \r\n </ng-template>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n </mat-dialog-content>\r\n <mat-dialog-actions> \r\n <button \r\n mat-button \r\n [mat-dialog-close]=\"true\" \r\n color=\"primary\">\r\n Done\r\n </button>\r\n <ng-container *ngIf=\"tabIndex === 0\">\r\n <button \r\n *ngFor=\"let cronAction of cronActions\"\r\n mat-button \r\n (click)=\"cronActionClick(cronAction)\">\r\n {{cronAction.label}}\r\n </button> \r\n </ng-container>\r\n </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTabContent, selector: "[matTabContent]" }, { type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
568
+ CronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CronComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n <h1 mat-dialog-title>\r\n Cron\r\n <div class=\"small\">{{cron.name}}</div>\r\n </h1>\r\n <mat-dialog-content>\r\n <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n <mat-tab label=\"Overview\">\r\n <div class=\"row\">\r\n <fs-label-field>\r\n <fs-label>\r\n Status\r\n </fs-label>\r\n {{CronStates[cron.state]}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.cronSetting\">\r\n <fs-label>\r\n Run Frequency\r\n </fs-label>\r\n {{cron.cronSetting.summary}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.processId\">\r\n <fs-label>\r\n Process\r\n </fs-label>\r\n {{cron.processId}}\r\n <ng-container *ngIf=\"cron.processState\">\r\n {{CronProcessStates[cron.processState]}}\r\n </ng-container>\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>\r\n Last Ran\r\n </fs-label>\r\n <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n </ng-template>\r\n </fs-label-field>\r\n </div>\r\n\r\n <fs-label-field *ngIf=\"cron.message\">\r\n <fs-label>\r\n Last Message\r\n </fs-label>\r\n <div class=\"message\">{{cron.message}}</div>\r\n </fs-label-field>\r\n </mat-tab>\r\n <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n <ng-template matTabContent>\r\n <fs-list [config]=\"config\">\r\n <fs-list-column name=\"state\" title=\"Status\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a \r\n (click)=\"cronLogOpen(row)\"\r\n [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n {{CronLogStates[row.state] || row.state}}\r\n </a>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Message\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <div class=\"message\">{{row.message}}</div>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Duration\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration\">\r\n {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n </ng-container>\r\n </ng-template>\r\n </fs-list-column>\r\n\r\n <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n </ng-template>\r\n </fs-list-column>\r\n </fs-list> \r\n </ng-template>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n </mat-dialog-content>\r\n <mat-dialog-actions> \r\n <button \r\n mat-button \r\n [mat-dialog-close]=\"true\" \r\n color=\"primary\">\r\n Done\r\n </button>\r\n <ng-container *ngIf=\"tabIndex === 0\">\r\n <button \r\n *ngFor=\"let cronAction of cronActions\"\r\n mat-button \r\n (click)=\"cronActionClick(cronAction)\">\r\n {{cronAction.label}}\r\n </button> \r\n </ng-container>\r\n </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"], components: [{ type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }, { type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.MatTabContent, selector: "[matTabContent]" }, { type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
552
569
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CronComponent, decorators: [{
553
570
  type: Component,
554
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n <h1 mat-dialog-title>\r\n Cron\r\n <div class=\"small\">{{cron.name}}</div>\r\n </h1>\r\n <mat-dialog-content>\r\n <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n <mat-tab label=\"Overview\">\r\n <div class=\"row\">\r\n <fs-label-field>\r\n <fs-label>\r\n Status\r\n </fs-label>\r\n {{CronStates[cron.state]}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.cronSetting\">\r\n <fs-label>\r\n Run Frequency\r\n </fs-label>\r\n {{cron.cronSetting.summary}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>\r\n Last Ran\r\n </fs-label>\r\n <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n </ng-template>\r\n </fs-label-field>\r\n </div>\r\n\r\n <fs-label-field *ngIf=\"cron.message\">\r\n <fs-label>\r\n Last Message\r\n </fs-label>\r\n <div class=\"message\">{{cron.message}}</div>\r\n </fs-label-field>\r\n </mat-tab>\r\n <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n <ng-template matTabContent>\r\n <fs-list [config]=\"config\">\r\n <fs-list-column name=\"state\" title=\"Status\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a \r\n (click)=\"cronLogOpen(row)\"\r\n [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n {{CronLogStates[row.state] || row.state}}\r\n </a>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Message\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <div class=\"message\">{{row.message}}</div>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Duration\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration\">\r\n {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n </ng-container>\r\n </ng-template>\r\n </fs-list-column>\r\n\r\n <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n </ng-template>\r\n </fs-list-column>\r\n </fs-list> \r\n </ng-template>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n </mat-dialog-content>\r\n <mat-dialog-actions> \r\n <button \r\n mat-button \r\n [mat-dialog-close]=\"true\" \r\n color=\"primary\">\r\n Done\r\n </button>\r\n <ng-container *ngIf=\"tabIndex === 0\">\r\n <button \r\n *ngFor=\"let cronAction of cronActions\"\r\n mat-button \r\n (click)=\"cronActionClick(cronAction)\">\r\n {{cronAction.label}}\r\n </button> \r\n </ng-container>\r\n </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"] }]
571
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-dialog *fsSkeleton=\"cron\">\r\n <h1 mat-dialog-title>\r\n Cron\r\n <div class=\"small\">{{cron.name}}</div>\r\n </h1>\r\n <mat-dialog-content>\r\n <mat-tab-group (selectedIndexChange)=\"selectedIndexChange($event)\">\r\n <mat-tab label=\"Overview\">\r\n <div class=\"row\">\r\n <fs-label-field>\r\n <fs-label>\r\n Status\r\n </fs-label>\r\n {{CronStates[cron.state]}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.cronSetting\">\r\n <fs-label>\r\n Run Frequency\r\n </fs-label>\r\n {{cron.cronSetting.summary}}\r\n </fs-label-field>\r\n\r\n <fs-label-field *ngIf=\"cron.processId\">\r\n <fs-label>\r\n Process\r\n </fs-label>\r\n {{cron.processId}}\r\n <ng-container *ngIf=\"cron.processState\">\r\n {{CronProcessStates[cron.processState]}}\r\n </ng-container>\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>\r\n Last Ran\r\n </fs-label>\r\n <ng-container *ngIf=\"cron.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"cron.createDate\"></fs-date-ago>\r\n <div><small *ngIf=\"cron.duration\">Duration: {{ cron.duration | fsDateDuration }}</small></div>\r\n </ng-template>\r\n </fs-label-field>\r\n </div>\r\n\r\n <fs-label-field *ngIf=\"cron.message\">\r\n <fs-label>\r\n Last Message\r\n </fs-label>\r\n <div class=\"message\">{{cron.message}}</div>\r\n </fs-label-field>\r\n </mat-tab>\r\n <mat-tab label=\"Logs\" *ngIf=\"config\">\r\n <ng-template matTabContent>\r\n <fs-list [config]=\"config\">\r\n <fs-list-column name=\"state\" title=\"Status\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a \r\n (click)=\"cronLogOpen(row)\"\r\n [ngStyle]=\"{ color: CronLogStateColors[row.state] }\">\r\n {{CronLogStates[row.state] || row.state}}\r\n </a>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Message\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <div class=\"message\">{{row.message}}</div>\r\n </ng-template>\r\n </fs-list-column>\r\n \r\n <fs-list-column title=\"Duration\" class=\"col-message\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration\">\r\n {{row.duration | fsDateDuration: 'hour-minute-second'}}\r\n </ng-container>\r\n </ng-template>\r\n </fs-list-column>\r\n\r\n <fs-list-column name=\"create_date\" title=\"Date\" class=\"col-date\">\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n </ng-template>\r\n </fs-list-column>\r\n </fs-list> \r\n </ng-template>\r\n </mat-tab>\r\n </mat-tab-group>\r\n\r\n </mat-dialog-content>\r\n <mat-dialog-actions> \r\n <button \r\n mat-button \r\n [mat-dialog-close]=\"true\" \r\n color=\"primary\">\r\n Done\r\n </button>\r\n <ng-container *ngIf=\"tabIndex === 0\">\r\n <button \r\n *ngFor=\"let cronAction of cronActions\"\r\n mat-button \r\n (click)=\"cronActionClick(cronAction)\">\r\n {{cronAction.label}}\r\n </button> \r\n </ng-container>\r\n </mat-dialog-actions>\r\n</fs-dialog>\r\n", styles: [":host ::ng-deep .col-message .message{white-space:break-spaces;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}:host ::ng-deep .col-date{white-space:nowrap}h1 .small{line-height:normal}.row{display:flex;flex-wrap:wrap}.row fs-label-field:not(:last-child){margin-right:40px}.message{white-space:pre-line}\n"] }]
555
572
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
556
573
  type: Inject,
557
574
  args: [MAT_DIALOG_DATA]
@@ -563,72 +580,14 @@ class CronsComponent {
563
580
  this._dialog = _dialog;
564
581
  this._prompt = _prompt;
565
582
  this.config = null;
566
- this.cronStates = indexNameValue(CronStates);
583
+ this.CronStates = indexNameValue(CronStates);
584
+ this.CronProcessStates = indexNameValue(CronProcessStates);
567
585
  this.CronState = CronState;
568
586
  this._destroy$ = new Subject();
569
587
  }
570
588
  ngOnInit() {
571
589
  this._configList();
572
590
  }
573
- _configList() {
574
- this.config = {
575
- paging: false,
576
- filters: [
577
- {
578
- type: ItemType.Keyword,
579
- name: 'keyword',
580
- label: 'Search',
581
- },
582
- ],
583
- rowActions: this.getCronActions()
584
- .map((rowAction) => {
585
- return {
586
- ...rowAction,
587
- click: (cron) => {
588
- rowAction.action(cron)
589
- .subscribe();
590
- },
591
- };
592
- }),
593
- fetch: (query) => {
594
- query.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
595
- return this.loadCrons(query)
596
- .pipe(map((crons) => ({
597
- data: crons
598
- .map((cron) => {
599
- return {
600
- ...cron,
601
- runningDuration: differenceInSeconds(parse(cron.createDate), new Date()),
602
- };
603
- }),
604
- })));
605
- },
606
- };
607
- if (this.bulk) {
608
- this.config.selection = {
609
- selectAll: false,
610
- actions: [
611
- {
612
- type: SelectionActionType.Action,
613
- name: 'disable',
614
- label: 'Disable',
615
- },
616
- {
617
- type: SelectionActionType.Action,
618
- name: 'enable',
619
- label: 'Enable',
620
- },
621
- ],
622
- actionSelected: (action) => {
623
- return this.bulk(action.action.name, action.selected)
624
- .pipe(tap(() => {
625
- this.list.reload();
626
- this._message.success('Applied Changes');
627
- }));
628
- },
629
- };
630
- }
631
- }
632
591
  open(cron) {
633
592
  this._dialog.open(CronComponent, {
634
593
  data: {
@@ -736,13 +695,76 @@ class CronsComponent {
736
695
  this._destroy$.next();
737
696
  this._destroy$.complete();
738
697
  }
698
+ _configList() {
699
+ this.config = {
700
+ paging: false,
701
+ filters: [
702
+ {
703
+ type: ItemType.Keyword,
704
+ name: 'keyword',
705
+ label: 'Search',
706
+ },
707
+ ],
708
+ rowActions: this.getCronActions()
709
+ .map((rowAction) => {
710
+ return {
711
+ ...rowAction,
712
+ click: (cron) => {
713
+ rowAction.action(cron)
714
+ .subscribe();
715
+ },
716
+ };
717
+ }),
718
+ fetch: (query) => {
719
+ query = {
720
+ ...query,
721
+ processStates: true,
722
+ timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
723
+ };
724
+ return this.loadCrons(query)
725
+ .pipe(map((crons) => ({
726
+ data: crons
727
+ .map((cron) => {
728
+ return {
729
+ ...cron,
730
+ runningDuration: differenceInSeconds(parse(cron.createDate), new Date()),
731
+ };
732
+ }),
733
+ })));
734
+ },
735
+ };
736
+ if (this.bulk) {
737
+ this.config.selection = {
738
+ selectAll: false,
739
+ actions: [
740
+ {
741
+ type: SelectionActionType.Action,
742
+ name: 'disable',
743
+ label: 'Disable',
744
+ },
745
+ {
746
+ type: SelectionActionType.Action,
747
+ name: 'enable',
748
+ label: 'Enable',
749
+ },
750
+ ],
751
+ actionSelected: (action) => {
752
+ return this.bulk(action.action.name, action.selected)
753
+ .pipe(tap(() => {
754
+ this.list.reload();
755
+ this._message.success('Applied Changes');
756
+ }));
757
+ },
758
+ };
759
+ }
760
+ }
739
761
  }
740
- CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CronsComponent, deps: [{ token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i3$2.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
741
- CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n <fs-list-column>\r\n <ng-template fs-list-header>Name</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a (click)=\"open(row)\">{{row.name}}</a>\r\n <div *ngIf=\"row.cronSetting\">\r\n <small>{{row.cronSetting.summary}}</small>\r\n </div>\r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column align=\"center\">\r\n <ng-template fs-list-header>Status</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n <fs-popover \r\n [maxWidth]=\"null\"\r\n [template]=\"statusPopover\" \r\n size=\"small\">\r\n <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n </fs-popover>\r\n <ng-template #statusPopover>\r\n <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #status>\r\n {{cronStates[row.state]}}\r\n </ng-template>\r\n <ng-container *ngIf=\"row.state === CronState.Running\">\r\n <div class=\"small\">\r\n Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-container> \r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column>\r\n <ng-template fs-list-header>Last Ran</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n <div class=\"small\" *ngIf=\"row.duration\">\r\n Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i7.FsPopoverComponent, selector: "fs-popover" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
762
+ CronsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CronsComponent, deps: [{ token: i1$1.FsMessage }, { token: i1.MatDialog }, { token: i3$3.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
763
+ CronsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CronsComponent, selector: "fs-system-crons", inputs: { enable: "enable", disable: "disable", kill: "kill", queue: "queue", run: "run", loadCrons: "loadCrons", loadCron: "loadCron", loadCronLogs: "loadCronLogs", bulk: "bulk" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true, static: true }], ngImport: i0, template: "<fs-list [config]=\"config\">\r\n <fs-list-column>\r\n <ng-template fs-list-header>Name</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a (click)=\"open(row)\">{{row.name}}</a>\r\n <div *ngIf=\"row.cronSetting\">\r\n <small>{{row.cronSetting.summary}}</small>\r\n </div>\r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column align=\"center\">\r\n <ng-template fs-list-header>Status</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n <fs-popover \r\n [maxWidth]=\"null\"\r\n [template]=\"statusPopover\" \r\n size=\"small\">\r\n <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n </fs-popover>\r\n <ng-template #statusPopover>\r\n <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n <div *ngIf=\"row.processState\">Process State: {{CronProcessStates[row.processState]}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #status>\r\n {{CronStates[row.state]}}\r\n </ng-template>\r\n <ng-container *ngIf=\"row.state === CronState.Running\">\r\n <div class=\"small\">\r\n Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-container> \r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column>\r\n <ng-template fs-list-header>Last Ran</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n <div class=\"small\" *ngIf=\"row.duration\">\r\n Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </fs-list-column>\r\n</fs-list>\r\n", styles: [""], components: [{ type: i2$2.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i7.FsPopoverComponent, selector: "fs-popover" }, { type: i4$2.FsDateAgoComponent, selector: "fs-date-ago", inputs: ["date", "showTime", "format", "showTooltip", "tooltipDateFormat"] }], directives: [{ type: i2$2.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$2.FsListHeaderDirective, selector: "[fs-list-header]", inputs: ["colspan", "align", "class"] }, { type: i2$2.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "fsDateDuration": i4$2.FsDateDurationPipe } });
742
764
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CronsComponent, decorators: [{
743
765
  type: Component,
744
- args: [{ selector: 'fs-system-crons', template: "<fs-list [config]=\"config\">\r\n <fs-list-column>\r\n <ng-template fs-list-header>Name</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a (click)=\"open(row)\">{{row.name}}</a>\r\n <div *ngIf=\"row.cronSetting\">\r\n <small>{{row.cronSetting.summary}}</small>\r\n </div>\r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column align=\"center\">\r\n <ng-template fs-list-header>Status</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n <fs-popover \r\n [maxWidth]=\"null\"\r\n [template]=\"statusPopover\" \r\n size=\"small\">\r\n <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n </fs-popover>\r\n <ng-template #statusPopover>\r\n <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #status>\r\n {{cronStates[row.state]}}\r\n </ng-template>\r\n <ng-container *ngIf=\"row.state === CronState.Running\">\r\n <div class=\"small\">\r\n Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-container> \r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column>\r\n <ng-template fs-list-header>Last Ran</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n <div class=\"small\" *ngIf=\"row.duration\">\r\n Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </fs-list-column>\r\n</fs-list>\r\n", styles: [""] }]
745
- }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i1.MatDialog }, { type: i3$2.FsPrompt }]; }, propDecorators: { list: [{
766
+ args: [{ selector: 'fs-system-crons', template: "<fs-list [config]=\"config\">\r\n <fs-list-column>\r\n <ng-template fs-list-header>Name</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <a (click)=\"open(row)\">{{row.name}}</a>\r\n <div *ngIf=\"row.cronSetting\">\r\n <small>{{row.cronSetting.summary}}</small>\r\n </div>\r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column align=\"center\">\r\n <ng-template fs-list-header>Status</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.host || row.processId; else status\">\r\n <fs-popover \r\n [maxWidth]=\"null\"\r\n [template]=\"statusPopover\" \r\n size=\"small\">\r\n <ng-container *ngTemplateOutlet=\"status\"></ng-container>\r\n </fs-popover>\r\n <ng-template #statusPopover>\r\n <div *ngIf=\"row.host\">Host: {{row.host}}</div>\r\n <div *ngIf=\"row.processId\">Process ID: {{row.processId}}</div>\r\n <div *ngIf=\"row.processState\">Process State: {{CronProcessStates[row.processState]}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #status>\r\n {{CronStates[row.state]}}\r\n </ng-template>\r\n <ng-container *ngIf=\"row.state === CronState.Running\">\r\n <div class=\"small\">\r\n Duration: {{ row.runningDuration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-container> \r\n </ng-template>\r\n </fs-list-column>\r\n <fs-list-column>\r\n <ng-template fs-list-header>Last Ran</ng-template>\r\n <ng-template fs-list-cell let-row=\"row\">\r\n <ng-container *ngIf=\"row.duration===null; else lastRan\">\r\n Never\r\n </ng-container>\r\n <ng-template #lastRan>\r\n <fs-date-ago [date]=\"row.createDate\"></fs-date-ago>\r\n <div class=\"small\" *ngIf=\"row.duration\">\r\n Duration: {{ row.duration | fsDateDuration: { hours: true, minutes: true, seconds: true } }}\r\n </div>\r\n </ng-template>\r\n </ng-template>\r\n </fs-list-column>\r\n</fs-list>\r\n", styles: [""] }]
767
+ }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i1.MatDialog }, { type: i3$3.FsPrompt }]; }, propDecorators: { list: [{
746
768
  type: ViewChild,
747
769
  args: [FsListComponent, { static: true }]
748
770
  }], enable: [{
@@ -818,10 +840,10 @@ class DashboardComponent {
818
840
  }
819
841
  }
820
842
  DashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardComponent, deps: [{ token: i1$1.FsMessage }, { token: i0.ChangeDetectorRef }, { token: i2$3.FsBuildService }], target: i0.ɵɵFactoryTarget.Component });
821
- DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\r\n\r\n <div class=\"h2-container\">\r\n\r\n <div class=\"actions\">\r\n <h2>Actions</h2>\r\n <div class=\"fs-row.gap-tiny.wrap\">\r\n <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n\r\n <button\r\n *ngFor=\"let action of buttonActions\"\r\n mat-raised-button\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </button>\r\n\r\n <ng-container *ngIf=\"menuActions.length\">\r\n <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n <ng-template\r\n *ngFor=\"let action of menuActions\"\r\n fs-menu-item\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </ng-template>\r\n </fs-menu>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fs-row.gap-large.wrap\">\r\n <div>\r\n <h2>Server</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.serverTimezone}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Hostname</fs-label>\r\n {{dashboard.serverHostname}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Directory</fs-label>\r\n {{dashboard.appDirectory}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>System</h2>\r\n <fs-label-field>\r\n <fs-label>Mode</fs-label>\r\n {{dashboard.appMode}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Notification Recipients</fs-label>\r\n {{dashboard.notifyRecipients.join(', ')}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Database</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Name</fs-label>\r\n {{dashboard.databaseName}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.databaseTimezone}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div *ngIf=\"build || dashboard.upgrades.length\">\r\n <h2>Build</h2>\r\n\r\n <ng-container *ngIf=\"build\">\r\n <fs-label-field>\r\n <fs-label>Version</fs-label>\r\n {{build.version}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date</fs-label>\r\n {{ build.date | fsDateFormat: 'date-time' }}\r\n </fs-label-field>\r\n </ng-container>\r\n\r\n <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n <fs-label>Pending Upgrades</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n {{dashboard.upgrades.length}}\r\n <mat-icon\r\n [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n matTooltipClass=\"tooltip-pending-upgrades\"\r\n >\r\n warning\r\n </mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Cron</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Last Ran</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n <mat-icon>warning</mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$3.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
843
+ DashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DashboardComponent, selector: "fs-system-dashboard", inputs: { init: "init", upgrade: "upgrade", load: "load", actions: "actions" }, ngImport: i0, template: "<div *fsSkeleton=\"dashboard\">\r\n <div class=\"fs-row.gap-large.wrap.align-start\">\r\n <div>\r\n <h2>Server</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.serverTimezone}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Hostname</fs-label>\r\n {{dashboard.serverHostname}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Directory</fs-label>\r\n {{dashboard.appDirectory}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>System</h2>\r\n <fs-label-field>\r\n <fs-label>Mode</fs-label>\r\n {{dashboard.appMode}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Notification Recipients</fs-label>\r\n {{dashboard.notifyRecipients.join(', ')}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Database</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Name</fs-label>\r\n {{dashboard.databaseName}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.databaseTimezone}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div *ngIf=\"build || dashboard.upgrades.length\">\r\n <ng-container *ngIf=\"build\">\r\n <h2>Build</h2>\r\n <fs-label-field>\r\n <fs-label>Version</fs-label>\r\n {{build.version || 'Unknown'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date</fs-label>\r\n {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\r\n </fs-label-field>\r\n </ng-container>\r\n\r\n <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n <fs-label>Pending Upgrades</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n {{dashboard.upgrades.length}}\r\n <mat-icon\r\n [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n matTooltipClass=\"tooltip-pending-upgrades\"\r\n >\r\n warning\r\n </mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Cron</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Last Ran</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n <mat-icon>warning</mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n </div>\r\n \r\n\r\n <div>\r\n <div class=\"actions\">\r\n <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n <button\r\n *ngFor=\"let action of buttonActions\"\r\n mat-raised-button\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </button>\r\n\r\n <ng-container *ngIf=\"menuActions.length\">\r\n <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n <ng-template\r\n *ngFor=\"let action of menuActions\"\r\n fs-menu-item\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </ng-template>\r\n </fs-menu>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .menu-button{box-shadow:none}h2{margin-top:0}.actions{display:flex;align-items:center;flex-wrap:wrap}.actions button,.actions fs-menu{margin-bottom:10px;margin-right:5px}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 1000px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}\n"], components: [{ type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3.FsLabelComponent, selector: "fs-label" }, { type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }], directives: [{ type: i5.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }], pipes: { "fsDateFormat": i4$2.FsDateFormatPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
822
844
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DashboardComponent, decorators: [{
823
845
  type: Component,
824
- args: [{ selector: 'fs-system-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *fsSkeleton=\"dashboard\">\r\n\r\n <div class=\"h2-container\">\r\n\r\n <div class=\"actions\">\r\n <h2>Actions</h2>\r\n <div class=\"fs-row.gap-tiny.wrap\">\r\n <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n\r\n <button\r\n *ngFor=\"let action of buttonActions\"\r\n mat-raised-button\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </button>\r\n\r\n <ng-container *ngIf=\"menuActions.length\">\r\n <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n <ng-template\r\n *ngFor=\"let action of menuActions\"\r\n fs-menu-item\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </ng-template>\r\n </fs-menu>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"fs-row.gap-large.wrap\">\r\n <div>\r\n <h2>Server</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.serverTimezone}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Hostname</fs-label>\r\n {{dashboard.serverHostname}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Directory</fs-label>\r\n {{dashboard.appDirectory}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>System</h2>\r\n <fs-label-field>\r\n <fs-label>Mode</fs-label>\r\n {{dashboard.appMode}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Notification Recipients</fs-label>\r\n {{dashboard.notifyRecipients.join(', ')}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Database</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Name</fs-label>\r\n {{dashboard.databaseName}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.databaseTimezone}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div *ngIf=\"build || dashboard.upgrades.length\">\r\n <h2>Build</h2>\r\n\r\n <ng-container *ngIf=\"build\">\r\n <fs-label-field>\r\n <fs-label>Version</fs-label>\r\n {{build.version}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date</fs-label>\r\n {{ build.date | fsDateFormat: 'date-time' }}\r\n </fs-label-field>\r\n </ng-container>\r\n\r\n <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n <fs-label>Pending Upgrades</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n {{dashboard.upgrades.length}}\r\n <mat-icon\r\n [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n matTooltipClass=\"tooltip-pending-upgrades\"\r\n >\r\n warning\r\n </mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Cron</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Last Ran</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n <mat-icon>warning</mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".actions{margin-bottom:1.25em}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 600px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}@media (min-width: 600px){:host ::ng-deep .menu-button{box-shadow:none}}\n"] }]
846
+ args: [{ selector: 'fs-system-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *fsSkeleton=\"dashboard\">\r\n <div class=\"fs-row.gap-large.wrap.align-start\">\r\n <div>\r\n <h2>Server</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.serverTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.serverTimezone}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Hostname</fs-label>\r\n {{dashboard.serverHostname}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Directory</fs-label>\r\n {{dashboard.appDirectory}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>System</h2>\r\n <fs-label-field>\r\n <fs-label>Mode</fs-label>\r\n {{dashboard.appMode}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Notification Recipients</fs-label>\r\n {{dashboard.notifyRecipients.join(', ')}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Database</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Name</fs-label>\r\n {{dashboard.databaseName}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date/Time</fs-label>\r\n {{dashboard.databaseTime | fsDateFormat: 'date-time'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Timezone</fs-label>\r\n {{dashboard.databaseTimezone}}\r\n </fs-label-field>\r\n </div>\r\n\r\n <div *ngIf=\"build || dashboard.upgrades.length\">\r\n <ng-container *ngIf=\"build\">\r\n <h2>Build</h2>\r\n <fs-label-field>\r\n <fs-label>Version</fs-label>\r\n {{build.version || 'Unknown'}}\r\n </fs-label-field>\r\n\r\n <fs-label-field>\r\n <fs-label>Date</fs-label>\r\n {{ (build.date | fsDateFormat: 'date-time') || 'Unknown' }}\r\n </fs-label-field>\r\n </ng-container>\r\n\r\n <fs-label-field *ngIf=\"dashboard.upgrades.length\">\r\n <fs-label>Pending Upgrades</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': !!dashboard.upgrades.length }\">\r\n {{dashboard.upgrades.length}}\r\n <mat-icon\r\n [matTooltip]=\"dashboard.upgrades.join('\\n')\"\r\n matTooltipClass=\"tooltip-pending-upgrades\"\r\n >\r\n warning\r\n </mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n\r\n <div>\r\n <h2>Cron</h2>\r\n\r\n <fs-label-field>\r\n <fs-label>Last Ran</fs-label>\r\n <span class=\"attention\" [ngClass]=\"{ 'needs-attention': dashboard.cronRanAttention }\">\r\n <span *ngIf=\"!dashboard.cronRan\">Never</span>\r\n <span *ngIf=\"dashboard.cronRan\">{{dashboard.cronRan | fsDateFormat: 'date-time'}}</span>\r\n <mat-icon>warning</mat-icon>\r\n </span>\r\n </fs-label-field>\r\n </div>\r\n </div>\r\n \r\n\r\n <div>\r\n <div class=\"actions\">\r\n <button mat-raised-button (click)=\"upgradeClick()\">Run Upgrades</button>\r\n <button mat-raised-button (click)=\"initClick()\">Init System</button>\r\n <button\r\n *ngFor=\"let action of buttonActions\"\r\n mat-raised-button\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </button>\r\n\r\n <ng-container *ngIf=\"menuActions.length\">\r\n <fs-menu buttonClass=\"mat-raised-button menu-button\">\r\n <ng-template\r\n *ngFor=\"let action of menuActions\"\r\n fs-menu-item\r\n (click)=\"actionClick(action)\">\r\n {{action.label}}\r\n </ng-template>\r\n </fs-menu>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host ::ng-deep .menu-button{box-shadow:none}h2{margin-top:0}.actions{display:flex;align-items:center;flex-wrap:wrap}.actions button,.actions fs-menu{margin-bottom:10px;margin-right:5px}table td{padding:3px}.attention{display:flex;align-items:center}.attention mat-icon{display:none;margin-left:2px}.attention.needs-attention{color:#c00}.attention.needs-attention mat-icon{display:inline}::ng-deep .tooltip-pending-upgrades{white-space:pre-line}@media (max-width: 1000px){:host ::ng-deep .menu-button{width:100%;border-radius:4px}}\n"] }]
825
847
  }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i0.ChangeDetectorRef }, { type: i2$3.FsBuildService }]; }, propDecorators: { init: [{
826
848
  type: Input
827
849
  }], upgrade: [{
@@ -1254,12 +1276,12 @@ class SettingsComponent {
1254
1276
  });
1255
1277
  }
1256
1278
  }
1257
- SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$1.FsClipboard }, { token: i3$2.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1258
- SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\r\n<mat-accordion>\r\n <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"title-row\">\r\n <div class=\"title\">{{group || 'General'}}</div>\r\n <div class=\"actions\">\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"export($event, groupedSettings[group])\">\r\n <mat-icon>cloud_download</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"import($event, group)\">\r\n <mat-icon>cloud_upload</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div \r\n hideToggle \r\n *ngFor=\"let setting of groupedSettings[group]\" \r\n class=\"setting\"\r\n [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\"\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n <mat-label>{{setting.label}}</mat-label>\r\n <input\r\n matInput\r\n [(ngModel)]=\"setting.value\"\r\n [name]=\"'setting' + setting.id\">\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n <mat-label>{{setting.label}}</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 *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n {{item.name}}\r\n </mat-option>\r\n </mat-select>\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <fs-file-picker\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n [allowRemove]=\"true\"\r\n [allowDownload]=\"true\"\r\n (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n (remove)=\"fileRemove.emit(setting)\"\r\n [url]=\"setting.value\">\r\n <div fsFileLabel>{{setting.label}}</div>\r\n <div fsFileHint>{{setting.instruction}}</div>\r\n </fs-file-picker>\r\n </div>\r\n\r\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], components: [{ type: i4$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { type: i11.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { type: i10$1.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12.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"] }], directives: [{ type: i4$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.MatLabel, selector: "mat-label" }, { type: i15.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"] }, { type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i12.FsFileLabelDirective, selector: "[fsFileLabel]" }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1279
+ SettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SettingsComponent, deps: [{ token: i1$1.FsMessage }, { token: i2$1.FsClipboard }, { token: i3$3.FsPrompt }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
1280
+ SettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SettingsComponent, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "\r\n<mat-accordion>\r\n <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"title-row\">\r\n <div class=\"title\">{{group || 'General'}}</div>\r\n <div class=\"actions\">\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"export($event, groupedSettings[group])\">\r\n <mat-icon>cloud_download</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"import($event, group)\">\r\n <mat-icon>cloud_upload</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div \r\n hideToggle \r\n *ngFor=\"let setting of groupedSettings[group]\" \r\n class=\"setting\"\r\n [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\"\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n <mat-label>{{setting.label}}</mat-label>\r\n <input\r\n matInput\r\n [(ngModel)]=\"setting.value\"\r\n [name]=\"'setting' + setting.id\">\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n <mat-label>{{setting.label}}</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 *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n {{item.name}}\r\n </mat-option>\r\n </mat-select>\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <fs-file-picker\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n [allowRemove]=\"true\"\r\n [allowDownload]=\"true\"\r\n (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n (remove)=\"fileRemove.emit(setting)\"\r\n [url]=\"setting.value\">\r\n <div fsFileLabel>{{setting.label}}</div>\r\n <div fsFileHint>{{setting.instruction}}</div>\r\n </fs-file-picker>\r\n </div>\r\n\r\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], components: [{ type: i4$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i4$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i9$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i10$1.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes", "weekStartsOn"], outputs: ["change"] }, { type: i11.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { type: i10$1.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { type: i12.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"] }], directives: [{ type: i4$3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7$1.MatLabel, selector: "mat-label" }, { type: i15.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"] }, { type: i16.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i16.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i16.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i12.FsFileLabelDirective, selector: "[fsFileLabel]" }], pipes: { "keyNameValue": KeyNameValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1259
1281
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SettingsComponent, decorators: [{
1260
1282
  type: Component,
1261
1283
  args: [{ selector: 'fs-system-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<mat-accordion>\r\n <mat-expansion-panel hideToggle *ngFor=\"let group of groups\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"title-row\">\r\n <div class=\"title\">{{group || 'General'}}</div>\r\n <div class=\"actions\">\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"export($event, groupedSettings[group])\">\r\n <mat-icon>cloud_download</mat-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\r\n mat-icon-button\r\n (click)=\"import($event, group)\">\r\n <mat-icon>cloud_upload</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n\r\n <div \r\n hideToggle \r\n *ngFor=\"let setting of groupedSettings[group]\" \r\n class=\"setting\"\r\n [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\"\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.InputBox\">\r\n <mat-label>{{setting.label}}</mat-label>\r\n <input\r\n matInput\r\n [(ngModel)]=\"setting.value\"\r\n [name]=\"'setting' + setting.id\">\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Textarea\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple\">\r\n <mat-label>{{setting.label}}</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 *ngFor=\"let item of setting.values | keyNameValue\" [value]=\"item.value\">\r\n {{item.name}}\r\n </mat-option>\r\n </mat-select>\r\n <mat-hint>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Date\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Color\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <mat-form-field \r\n class=\"full-width form-field-multiline-subscript\" \r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.Time\">\r\n <mat-label>{{setting.label}}</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>{{setting.instruction}}</mat-hint>\r\n </mat-form-field>\r\n\r\n <fs-file-picker\r\n *ngIf=\"setting.interfaceType===SettingInterfaceType.File\"\r\n [allowRemove]=\"true\"\r\n [allowDownload]=\"true\"\r\n (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\r\n (remove)=\"fileRemove.emit(setting)\"\r\n [url]=\"setting.value\">\r\n <div fsFileLabel>{{setting.label}}</div>\r\n <div fsFileHint>{{setting.instruction}}</div>\r\n </fs-file-picker>\r\n </div>\r\n\r\n <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"saveGroup(group)\">Save</button>\r\n\r\n </mat-expansion-panel>\r\n\r\n</mat-accordion>\r\n", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"] }]
1262
- }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i2$1.FsClipboard }, { type: i3$2.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
1284
+ }], ctorParameters: function () { return [{ type: i1$1.FsMessage }, { type: i2$1.FsClipboard }, { type: i3$3.FsPrompt }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { loadSettings: [{
1263
1285
  type: Input
1264
1286
  }], save: [{
1265
1287
  type: Input