@firestitch/system 18.0.45 → 18.0.46

package/fesm2022/firestitch-system.mjs

@@ -41,9 +41,9 @@ import { FsPopoverModule } from '@firestitch/popover';
 import * as i1 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
 import { CdkScrollable } from '@angular/cdk/scrolling';
+import { FsApi, RequestMethod, StreamEventData, StreamEventType } from '@firestitch/api';
 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 { FsMessage } from '@firestitch/message';
@@ -215,7 +215,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
 
 class ApiLogsComponent {
     _dialog = inject(MatDialog);
+    _api = inject(FsApi);
     list;
+    /**
+     * Optional override. Left unset, the component reads the framework's own
+     * system/logs/api endpoint.
+     */
     loadApiLogs;
     config = null;
     apiLogStates = indexNameValue(ApiLogStates);
@@ -252,12 +257,16 @@ class ApiLogsComponent {
                 },
             ],
             fetch: (query) => {
-                Object.assign(query, {});
-                return this.loadApiLogs(query)
-                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+                return this._apiLogsGet(query);
             },
         };
     }
+    _apiLogsGet(query) {
+        return this.loadApiLogs
+            ? this.loadApiLogs(query)
+            : this._api.get('system/logs/api', query, { key: null })
+                .pipe(map((response) => ({ data: response.apiLogs, paging: response.paging })));
+    }
     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 });
 }
@@ -1021,13 +1030,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class InfoComponent {
+    _api = inject(FsApi);
     iframe;
+    /**
+     * Optional override. Left unset, the component reads the framework's own
+     * system/info endpoint.
+     */
     load;
     ngAfterViewInit() {
         this._load();
     }
+    _infoGet() {
+        return this.load
+            ? this.load()
+            : this._api.get('system/info', {}, { key: 'info' });
+    }
     _load() {
-        this.load()
+        this._infoGet()
             .subscribe((info) => {
             info += '<style>body { background: transparent; }</style>';
             const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
@@ -1495,6 +1514,10 @@ class ServerLogsComponent {
     _dialog = inject(MatDialog);
     _api = inject(FsApi);
     list;
+    /**
+     * Optional override. Left unset, the component reads the framework's own
+     * system/logs/server endpoint.
+     */
     loadLogs;
     acknowledgedAll = new EventEmitter();
     config = null;
@@ -1570,12 +1593,16 @@ class ServerLogsComponent {
                 },
             ],
             fetch: (query) => {
-                return this._api
-                    .get('system/logs/server', query, { key: null })
-                    .pipe(map((response) => ({ data: response.logs, paging: response.paging })));
+                return this._logsGet(query);
             },
         };
     }
+    _logsGet(query) {
+        return this.loadLogs
+            ? this.loadLogs(query)
+            : this._api.get('system/logs/server', query, { key: null })
+                .pipe(map((response) => ({ data: response.logs, paging: response.paging })));
+    }
     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 });
 }
@@ -1611,6 +1638,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<fs-dialog>\n  <fs-dialog-title [close]=\"true\">\n    {{ setting.label }}\n  </fs-dialog-title>\n  <mat-dialog-content>\n    <fs-markdown-renderer [markdown]=\"setting.instructions\"></fs-markdown-renderer>\n  </mat-dialog-content>\n</fs-dialog>\n", styles: ["fs-markdown-renderer{display:block;max-width:700px}:host ::ng-deep fs-markdown-renderer .markdown-renderer-container{overflow-x:auto;overflow-y:hidden}\n"] }]
         }] });
 
+class SettingData {
+    _api = inject(FsApi);
+    gets(data = {}, config = {}) {
+        return this._api.get('system/settings', data, { key: 'settings', ...config });
+    }
+    bulk(data = {}, config = {}) {
+        return this._api.post('system/settings/bulk', data, { key: 'settings', ...config });
+    }
+    fileUpload(settingId, data = {}, config = {}) {
+        return this._api.post(`system/settings/${settingId}/files`, data, { key: 'setting', ...config });
+    }
+    fileDelete(settingId, data = {}, config = {}) {
+        return this._api.delete(`system/settings/${settingId}/files`, data, { key: 'setting', ...config });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingData, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingData, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingData, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class KeyNameValuePipe {
     transform(values) {
         return Object.keys(values).map((key) => {
@@ -1680,18 +1731,22 @@ class SettingsComponent {
     _clipboard = inject(FsClipboard);
     _prompt = inject(FsPrompt);
     _dialog = inject(MatDialog);
+    _settingData = inject(SettingData);
     _cdRef = inject(ChangeDetectorRef);
+    /**
+     * Optional overrides. The settings endpoints ship with the framework at a fixed
+     * path (system/settings), so when one of these is left unset the component calls
+     * that endpoint itself through SettingData and a consumer has to pass nothing.
+     */
     loadSettings;
     save;
-    fileRemove = new EventEmitter();
-    fileSelect = new EventEmitter();
+    fileUpload;
+    fileDelete;
     groupedSettings = [];
     groups = [];
     SettingInterfaceType = SettingInterfaceType;
     ngOnInit() {
-        this.loadSettings({
-            visible: true,
-        })
+        this._loadSettings({ visible: true })
             .subscribe((settings) => {
             settings = settings
                 .filter((setting) => {
@@ -1784,13 +1839,54 @@ class SettingsComponent {
         const values = settings.reduce((result, value) => {
             return (result[value.name] = value.value, result);
         }, {});
-        this.save(group, values)
+        this._save(group, values)
             .subscribe(() => {
             this._message.success('Changes Saved');
         });
     }
+    /**
+     * The X on a file setting. Persisted on its own because the bulk save deliberately
+     * skips file settings — they have their own endpoint, and without this the field
+     * only cleared on screen while the file stayed.
+     */
+    removeFile(setting) {
+        this._fileDelete(setting)
+            .subscribe((updated) => {
+            setting.value = updated?.value ?? '';
+            this._message.success('Changes Saved');
+            this._cdRef.markForCheck();
+        });
+    }
+    selectFile(setting, file) {
+        this._fileUpload(setting, file)
+            .subscribe((updated) => {
+            setting.value = updated?.value ?? setting.value;
+            this._message.success('Changes Saved');
+            this._cdRef.markForCheck();
+        });
+    }
+    _loadSettings(query) {
+        return this.loadSettings
+            ? this.loadSettings(query)
+            : this._settingData.gets(query);
+    }
+    _save(group, values) {
+        return this.save
+            ? this.save(group, values)
+            : this._settingData.bulk({ group, values });
+    }
+    _fileUpload(setting, file) {
+        return this.fileUpload
+            ? this.fileUpload(setting, file)
+            : this._settingData.fileUpload(setting.id, { file });
+    }
+    _fileDelete(setting) {
+        return this.fileDelete
+            ? this.fileDelete(setting)
+            : this._settingData.fileDelete(setting.id);
+    }
     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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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                @if (setting.instructions) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Setup instructions\"\n                    (click)=\"openInstructions(setting)\">\n                    <mat-icon>\n                      help_outline\n                    </mat-icon>\n                  </button>\n                }\n              </div>\n              <div\n                fsFileHint\n                [innerHTML]=\"setting.instruction | linkify\">\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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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" }, { kind: "pipe", type: LinkifyPipe, name: "linkify" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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", fileUpload: "fileUpload", fileDelete: "fileDelete" }, 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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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)=\"selectFile(setting, $event.file)\"\n              (remove)=\"removeFile(setting)\"\n              [url]=\"setting.value\">\n              <div fsFileLabel>\n                {{ setting.label }}\n                @if (setting.instructions) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Setup instructions\"\n                    (click)=\"openInstructions(setting)\">\n                    <mat-icon>\n                      help_outline\n                    </mat-icon>\n                  </button>\n                }\n              </div>\n              <div\n                fsFileHint\n                [innerHTML]=\"setting.instruction | linkify\">\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$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.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: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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" }, { kind: "pipe", type: LinkifyPipe, name: "linkify" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
@@ -1817,19 +1913,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         MatButton,
                         KeyNameValuePipe,
                         LinkifyPipe,
-                    ], 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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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                @if (setting.instructions) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Setup instructions\"\n                    (click)=\"openInstructions(setting)\">\n                    <mat-icon>\n                      help_outline\n                    </mat-icon>\n                  </button>\n                }\n              </div>\n              <div\n                fsFileHint\n                [innerHTML]=\"setting.instruction | linkify\">\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"] }]
+                    ], 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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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              @if (setting.instructions) {\n                <button\n                  type=\"button\"\n                  matSuffix\n                  mat-icon-button\n                  matTooltip=\"Setup instructions\"\n                  (click)=\"openInstructions(setting)\">\n                  <mat-icon>\n                    help_outline\n                  </mat-icon>\n                </button>\n              }\n              <mat-hint\n                [innerHTML]=\"setting.instruction | linkify\">\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)=\"selectFile(setting, $event.file)\"\n              (remove)=\"removeFile(setting)\"\n              [url]=\"setting.value\">\n              <div fsFileLabel>\n                {{ setting.label }}\n                @if (setting.instructions) {\n                  <button\n                    type=\"button\"\n                    mat-icon-button\n                    matTooltip=\"Setup instructions\"\n                    (click)=\"openInstructions(setting)\">\n                    <mat-icon>\n                      help_outline\n                    </mat-icon>\n                  </button>\n                }\n              </div>\n              <div\n                fsFileHint\n                [innerHTML]=\"setting.instruction | linkify\">\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
-            }], fileRemove: [{
-                type: Output
-            }], fileSelect: [{
-                type: Output
+            }], fileUpload: [{
+                type: Input
+            }], fileDelete: [{
+                type: Input
             }] } });
 
 class UpgradeLogsComponent {
+    _api = inject(FsApi);
     list;
+    /**
+     * Optional override. Left unset, the component reads the framework's own
+     * system/logs/upgrade endpoint.
+     */
     loadUpgradeLogs;
     config = null;
     logTypes = [];
@@ -1847,11 +1948,16 @@ class UpgradeLogsComponent {
                 },
             ],
             fetch: (query) => {
-                return this.loadUpgradeLogs(query)
-                    .pipe(map((response) => ({ data: response.data, paging: response.paging })));
+                return this._upgradeLogsGet(query);
             },
         };
     }
+    _upgradeLogsGet(query) {
+        return this.loadUpgradeLogs
+            ? this.loadUpgradeLogs(query)
+            : this._api.get('system/logs/upgrade', query, { key: null })
+                .pipe(map((response) => ({ data: response.upgrades, paging: response.paging })));
+    }
     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, 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\">\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: "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 });
 }