@firestitch/system 18.0.40 → 18.0.42

package/fesm2022/firestitch-system.mjs

@@ -57,6 +57,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$4 from '@firestitch/clipboard';
 import { FsClipboard, FsClipboardModule } from '@firestitch/clipboard';
 import { MatOption } from '@angular/material/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i2$5 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
 
@@ -1382,7 +1383,7 @@ class ServerLogComponent {
         return JSON.stringify(value, null, 2);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ServerLogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log()\">\n  <div mat-dialog-title>\n    Log\n  </div>\n  <mat-dialog-content>\n    <div class=\"fs-row.column-gap-lg.row-gap-sm.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>\n          Error Type\n        </fs-label>\n        {{ LogTypes[log().type] || log().type }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log().message }}\n      </fs-label-field>\n      @if (log().url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log().url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log().createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log().file }} &#64; {{ log().line }}\n      </fs-label-field>\n    </div>\n    @if (backtrace() || logData() || server()) {\n      <mat-tab-group>\n        @if (backtrace()) {\n          <mat-tab label=\"Backtrace\">\n            <pre>{{ backtrace() }}</pre>\n          </mat-tab>\n        }\n        @if (logData()) {\n          <mat-tab label=\"Data\">\n            <pre>{{ logData() }}</pre>\n          </mat-tab>\n        }\n        @if (server()) {\n          <mat-tab label=\"$_SERVER\">\n            <pre>{{ server() }}</pre>\n          </mat-tab>\n        }\n      </mat-tab-group>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        (click)=\"copy()\">\n      Copy\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-tab-group{margin-top:16px}pre{margin:0;padding:16px 0;white-space:pre-wrap;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: ServerLogComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<fs-dialog *fsSkeleton=\"log()\">\n  <div mat-dialog-title>\n    Log\n  </div>\n  <mat-dialog-content>\n    <div class=\"fs-row.column-gap-lg.row-gap-sm.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log().message }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Error Type\n        </fs-label>\n        {{ LogTypes[log().type] || log().type }}\n      </fs-label-field>\n      @if (log().url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log().url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log().createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      @if (log().file) {\n        <fs-label-field>\n          <fs-label>\n            File\n          </fs-label>\n          {{ log().file }} &#64; {{ log().line }}\n        </fs-label-field>\n      }\n    </div>\n    @if (backtrace() || logData() || server()) {\n      <mat-tab-group>\n        @if (backtrace()) {\n          <mat-tab label=\"Backtrace\">\n            <pre>\n              {{ backtrace() }}\n            </pre>\n          </mat-tab>\n        }\n        @if (logData()) {\n          <mat-tab label=\"Data\">\n            <pre>\n              {{ logData() }}\n            </pre>\n          </mat-tab>\n        }\n        @if (server()) {\n          <mat-tab label=\"$_SERVER\">\n            <pre>\n              {{ server() }}\n            </pre>\n          </mat-tab>\n        }\n      </mat-tab-group>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        (click)=\"copy()\">\n      Copy\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>", styles: ["mat-tab-group{margin-top:16px}pre{margin:0;padding:16px 0;white-space:pre-wrap;word-break:break-word}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: FsLabelModule }, { kind: "component", type: i3.FsLabelComponent, selector: "fs-label" }, { kind: "component", type: i3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["appearance", "showOutline", "disabled", "focused", "hoverable", "padless"] }, { kind: "ngmodule", type: FsDateModule }, { kind: "pipe", type: i4.FsDateFormatPipe, name: "fsDateFormat" }, { kind: "ngmodule", type: FsSkeletonModule }, { kind: "directive", type: i1.FsSkeletonContentDirective, selector: "[fsSkeleton]", inputs: ["fsSkeleton", "fsSkeletonPattern"] }, { kind: "ngmodule", type: FsDialogModule }, { kind: "component", type: i2.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: ServerLogComponent, decorators: [{
             type: Component,
@@ -1394,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsDateModule,
                         FsSkeletonModule,
                         FsDialogModule,
-                    ], template: "<fs-dialog *fsSkeleton=\"log()\">\n  <div mat-dialog-title>\n    Log\n  </div>\n  <mat-dialog-content>\n    <div class=\"fs-row.column-gap-lg.row-gap-sm.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>\n          Error Type\n        </fs-label>\n        {{ LogTypes[log().type] || log().type }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log().message }}\n      </fs-label-field>\n      @if (log().url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log().url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log().createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          File\n        </fs-label>\n        {{ log().file }} &#64; {{ log().line }}\n      </fs-label-field>\n    </div>\n    @if (backtrace() || logData() || server()) {\n      <mat-tab-group>\n        @if (backtrace()) {\n          <mat-tab label=\"Backtrace\">\n            <pre>{{ backtrace() }}</pre>\n          </mat-tab>\n        }\n        @if (logData()) {\n          <mat-tab label=\"Data\">\n            <pre>{{ logData() }}</pre>\n          </mat-tab>\n        }\n        @if (server()) {\n          <mat-tab label=\"$_SERVER\">\n            <pre>{{ server() }}</pre>\n          </mat-tab>\n        }\n      </mat-tab-group>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        (click)=\"copy()\">\n      Copy\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["mat-tab-group{margin-top:16px}pre{margin:0;padding:16px 0;white-space:pre-wrap;word-break:break-word}\n"] }]
+                    ], template: "<fs-dialog *fsSkeleton=\"log()\">\n  <div mat-dialog-title>\n    Log\n  </div>\n  <mat-dialog-content>\n    <div class=\"fs-row.column-gap-lg.row-gap-sm.wrap.align-start\">\n      <fs-label-field>\n        <fs-label>\n          Message\n        </fs-label>\n        {{ log().message }}\n      </fs-label-field>\n      <fs-label-field>\n        <fs-label>\n          Error Type\n        </fs-label>\n        {{ LogTypes[log().type] || log().type }}\n      </fs-label-field>\n      @if (log().url) {\n        <fs-label-field>\n          <fs-label>\n            URL\n          </fs-label>\n          {{ log().url }}\n        </fs-label-field>\n      }\n      <fs-label-field>\n        <fs-label>\n          Date\n        </fs-label>\n        {{ log().createDate|fsDateFormat: 'full-date-time' }}\n      </fs-label-field>\n      @if (log().file) {\n        <fs-label-field>\n          <fs-label>\n            File\n          </fs-label>\n          {{ log().file }} &#64; {{ log().line }}\n        </fs-label-field>\n      }\n    </div>\n    @if (backtrace() || logData() || server()) {\n      <mat-tab-group>\n        @if (backtrace()) {\n          <mat-tab label=\"Backtrace\">\n            <pre>\n              {{ backtrace() }}\n            </pre>\n          </mat-tab>\n        }\n        @if (logData()) {\n          <mat-tab label=\"Data\">\n            <pre>\n              {{ logData() }}\n            </pre>\n          </mat-tab>\n        }\n        @if (server()) {\n          <mat-tab label=\"$_SERVER\">\n            <pre>\n              {{ server() }}\n            </pre>\n          </mat-tab>\n        }\n      </mat-tab-group>\n    }\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        [mat-dialog-close]=\"true\"\n        color=\"primary\">\n      Done\n    </button>\n    <button\n        mat-button\n        type=\"button\"\n        (click)=\"copy()\">\n      Copy\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>", styles: ["mat-tab-group{margin-top:16px}pre{margin:0;padding:16px 0;white-space:pre-wrap;word-break:break-word}\n"] }]
         }], ctorParameters: () => [] });
 
 class ServerLogsComponent {
@@ -1521,6 +1522,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             type: Injectable
         }] });
 
+// Matches http:// and https:// urls, including query strings ie. ?variable=something
+const URL_PATTERN = /(\bhttps?:\/\/[^\s<>"']+)/gi;
+// Punctuation that ends the sentence rather than the url ie. "See https://google.com."
+const TRAILING_PATTERN = /[.,:;!?)\]}]+$/;
+class LinkifyPipe {
+    _sanitizer = inject(DomSanitizer);
+    transform(value) {
+        if (!value) {
+            return '';
+        }
+        const html = String(value)
+            .split(URL_PATTERN)
+            .map((part, index) => {
+            // split() with a capture group puts the matched urls at the odd indexes
+            if (index % 2 === 0) {
+                return this._escape(part);
+            }
+            const trailing = part.match(TRAILING_PATTERN);
+            const url = trailing ? part.slice(0, -trailing[0].length) : part;
+            const escaped = this._escape(url);
+            return `<a href="${escaped}" target="_blank" rel="noopener noreferrer">${escaped}</a>` +
+                (trailing ? this._escape(trailing[0]) : '');
+        })
+            .join('');
+        return this._sanitizer.bypassSecurityTrustHtml(html);
+    }
+    _escape(value) {
+        return value
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, isStandalone: true, name: "linkify" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: LinkifyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'linkify',
+                    standalone: true,
+                }]
+        }] });
+
 class SettingsComponent {
     _message = inject(FsMessage);
     _clipboard = inject(FsClipboard);
@@ -1620,7 +1665,7 @@ class SettingsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SettingsComponent, isStandalone: true, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "<mat-accordion>\n  @for (group of groups; track group) {\n    <mat-expansion-panel\n      hideToggle\n      >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class=\"title-row\">\n            <div class=\"title\">\n              {{ group || 'General' }}\n            </div>\n            <div class=\"actions\">\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"export($event, groupedSettings[group])\">\n                <mat-icon>\n                  cloud_download\n                </mat-icon>\n              </button>\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"import($event, group)\">\n                <mat-icon>\n                  cloud_upload\n                </mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (setting of groupedSettings[group]; track setting) {\n        <div\n          hideToggle\n          class=\"setting\"\n          [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n          @if (setting.interfaceType===SettingInterfaceType.InputBox) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Textarea) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <textarea\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              </textarea>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <mat-select\n                [(ngModel)]=\"setting.value\"\n                [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\n                [name]=\"'setting' + setting.id\">\n                @for (item of setting.values | keyNameValue; track item) {\n                  <mat-option\n                    [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Date) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsDatePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Color) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsColorPicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Time) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsTimePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.File) {\n            <fs-file-picker\n              [allowRemove]=\"true\"\n              [allowDownload]=\"true\"\n              (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\n              (remove)=\"fileRemove.emit(setting)\"\n              [url]=\"setting.value\">\n              <div fsFileLabel>\n                {{ setting.label }}\n              </div>\n              <div fsFileHint>\n                {{ setting.instruction }}\n              </div>\n            </fs-file-picker>\n          }\n        </div>\n      }\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"saveGroup(group)\">\n        Save\n      </button>\n    </mat-expansion-panel>\n  }\n</mat-accordion>", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"], dependencies: [{ kind: "directive", type: MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FsDatePickerModule }, { kind: "component", type: i2$4.FsDatePickerComponent, selector: "[fsDatePicker]", inputs: ["minYear", "maxYear", "minDate", "maxDate", "startOfDay", "view", "format", "minutes"], outputs: ["change"] }, { kind: "component", type: i2$4.FsTimePickerComponent, selector: "[fsTimePicker]", inputs: ["view"] }, { kind: "ngmodule", type: FsColorPickerModule }, { kind: "component", type: i3$3.FsColorPickerComponent, selector: "[fsColorPicker]", inputs: ["showClear"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i4$1.FsFilePickerComponent, selector: "fs-file-picker", inputs: ["minWidth", "minHeight", "imageWidth", "imageHeight", "imageQuality", "label", "showFilename", "allowDownload", "allowReupload", "multiple", "allowRemove", "url", "file", "accept", "disabled", "previewWidth", "previewHeight"], outputs: ["select", "remove", "download"] }, { kind: "directive", type: i4$1.FsFileLabelDirective, selector: "[fsFileLabel]" }, { kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: KeyNameValuePipe, name: "keyNameValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: SettingsComponent, isStandalone: true, selector: "fs-system-settings", inputs: { loadSettings: "loadSettings", save: "save" }, outputs: { fileRemove: "fileRemove", fileSelect: "fileSelect" }, ngImport: i0, template: "<mat-accordion>\n  @for (group of groups; track group) {\n    <mat-expansion-panel\n      hideToggle\n      >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class=\"title-row\">\n            <div class=\"title\">\n              {{ group || 'General' }}\n            </div>\n            <div class=\"actions\">\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"export($event, groupedSettings[group])\">\n                <mat-icon>\n                  cloud_download\n                </mat-icon>\n              </button>\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"import($event, group)\">\n                <mat-icon>\n                  cloud_upload\n                </mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (setting of groupedSettings[group]; track setting) {\n        <div\n          hideToggle\n          class=\"setting\"\n          [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n          @if (setting.interfaceType===SettingInterfaceType.InputBox) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint\n                [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              <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              <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              <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              <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              <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              </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: "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,
@@ -1645,7 +1690,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsFileModule,
                         MatButton,
                         KeyNameValuePipe,
-                    ], template: "<mat-accordion>\n  @for (group of groups; track group) {\n    <mat-expansion-panel\n      hideToggle\n      >\n      <mat-expansion-panel-header>\n        <mat-panel-title>\n          <div class=\"title-row\">\n            <div class=\"title\">\n              {{ group || 'General' }}\n            </div>\n            <div class=\"actions\">\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Export ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"export($event, groupedSettings[group])\">\n                <mat-icon>\n                  cloud_download\n                </mat-icon>\n              </button>\n              <button\n                type=\"button\"\n                [matTooltip]=\"'Import ' + (group || 'General') + ' Settings'\"\n                mat-icon-button\n                (click)=\"import($event, group)\">\n                <mat-icon>\n                  cloud_upload\n                </mat-icon>\n              </button>\n            </div>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      @for (setting of groupedSettings[group]; track setting) {\n        <div\n          hideToggle\n          class=\"setting\"\n          [ngClass]=\"{ 'has-instruction': !! setting.instruction }\">\n          @if (setting.interfaceType===SettingInterfaceType.InputBox) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Textarea) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <textarea\n                matInput\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              </textarea>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Select || setting.interfaceType===SettingInterfaceType.SelectMultiple) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <mat-select\n                [(ngModel)]=\"setting.value\"\n                [multiple]=\"setting.interfaceType===SettingInterfaceType.SelectMultiple\"\n                [name]=\"'setting' + setting.id\">\n                @for (item of setting.values | keyNameValue; track item) {\n                  <mat-option\n                    [value]=\"item.value\">\n                    {{ item.name }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Date) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsDatePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Color) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsColorPicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.Time) {\n            <mat-form-field\n              class=\"full-width form-field-multiline-subscript\"\n              >\n              <mat-label>\n                {{ setting.label }}\n              </mat-label>\n              <input\n                matInput\n                fsTimePicker\n                [(ngModel)]=\"setting.value\"\n                [name]=\"'setting' + setting.id\">\n              <mat-hint>\n                {{ setting.instruction }}\n              </mat-hint>\n            </mat-form-field>\n          }\n          @if (setting.interfaceType===SettingInterfaceType.File) {\n            <fs-file-picker\n              [allowRemove]=\"true\"\n              [allowDownload]=\"true\"\n              (select)=\"fileSelect.emit({ setting: setting, file: $event.file })\"\n              (remove)=\"fileRemove.emit(setting)\"\n              [url]=\"setting.value\">\n              <div fsFileLabel>\n                {{ setting.label }}\n              </div>\n              <div fsFileHint>\n                {{ setting.instruction }}\n              </div>\n            </fs-file-picker>\n          }\n        </div>\n      }\n      <button\n        mat-stroked-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"saveGroup(group)\">\n        Save\n      </button>\n    </mat-expansion-panel>\n  }\n</mat-accordion>", styles: [".mat-expansion-panel-header{font-size:19px}.full-width{width:100%}.title-row{flex-direction:row;box-sizing:border-box;display:flex;place-content:center flex-start;align-items:center;width:100%}.title-row .title{display:flex;flex:1}:host ::ng-deep .mat-expansion-panel-header-title{margin:0}:host ::ng-deep .mat-expansion-panel .actions{display:none}:host ::ng-deep .mat-expansion-panel.mat-expanded .actions{display:block}:host ::ng-deep .setting.has-instruction fs-file-picker fs-label-message{display:block;padding-bottom:1em}\n"] }]
+                        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              <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              <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              <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              <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              <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              <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              </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: [{
@@ -2014,5 +2060,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, InfoComponent, KeyNameValuePipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, QueryLogsComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
+export { ApiLogComponent, ApiLogState, ApiLogStates, ApiLogsComponent, CronComponent, CronLogComponent, CronState, CronStates, CronsComponent, DashboardComponent, FS_SYSTEM_CONFIG, FsSystemModule, InfoComponent, KeyNameValuePipe, LinkifyPipe, ProcessComponent, ProcessState, ProcessStates, ProcessesComponent, QueryLogsComponent, ServerLogsComponent, SettingsComponent, UpgradeLogsComponent };
 //# sourceMappingURL=firestitch-system.mjs.map