@c8y/ngx-components 1024.0.0 → 1024.1.5

package/fesm2022/c8y-ngx-components-repository-configuration.mjs

@@ -1,35 +1,55 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Pipe, Input, Output, ViewChild, NgModule, inject, ChangeDetectorRef, signal, computed, ChangeDetectionStrategy } from '@angular/core';
+import { EventEmitter, Injectable, Component, Pipe, inject, ChangeDetectorRef, signal, computed, Input, ChangeDetectionStrategy, Output, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
-import * as i4 from '@c8y/client';
+import * as i3$1 from '@c8y/client';
 import { OperationStatus, InventoryBinaryService } from '@c8y/client';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i2 from '@c8y/ngx-components';
-import { IconDirective, C8yTranslatePipe, C8yTranslateDirective, FormGroupComponent, RequiredInputPlaceholderDirective, Permissions, DatePipe, FilterInputComponent, ActionBarItemComponent, TabsetAriaDirective, EmptyStateComponent, hookRoute, ViewContext, BottomDrawerRef, AlertService, ValidationPattern, isBinaryFile, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, FilePickerComponent, MessagesComponent, SelectComponent, DataGridService, BottomDrawerService, ModalService, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, HelpComponent, DataGridComponent, EmptyStateContextDirective, GuideDocsComponent, GuideHrefDirective, NavigatorNode, hookNavigator, CoreModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
+import { IconDirective, C8yTranslatePipe, BottomDrawerRef, AlertService, ValidationPattern, isBinaryFile, C8yTranslateDirective, FormGroupComponent, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, FilePickerComponent, MessagesComponent, RequiredInputPlaceholderDirective, SelectComponent, Permissions, DatePipe, FilterInputComponent, ActionBarItemComponent, TabsetAriaDirective, EmptyStateComponent, hookRoute, ViewContext, DataGridService, BottomDrawerService, ModalService, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, HelpComponent, DataGridComponent, EmptyStateContextDirective, GuideDocsComponent, GuideHrefDirective, NavigatorNode, hookNavigator, CoreModule, FormsModule as FormsModule$1 } from '@c8y/ngx-components';
 import * as i3 from '@c8y/ngx-components/repository/shared';
-import { DeviceConfigurationOperation, RepositoryType, SharedRepositoryModule, RepositoryService, RepositoryItemNameGridColumn, DescriptionGridColumn, FileGridColumn, DeviceTypeGridColumn, TypeGridColumn } from '@c8y/ngx-components/repository/shared';
+import { DeviceConfigurationOperation, RepositoryService, RepositoryType, mimeTypeToEditorLanguage, SharedRepositoryModule, RepositoryItemNameGridColumn, DescriptionGridColumn, FileGridColumn, DeviceTypeGridColumn, TypeGridColumn } from '@c8y/ngx-components/repository/shared';
 import { NgClass, NgIf, NgFor, AsyncPipe } from '@angular/common';
-import * as i4$1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { OperationDetailsComponent, OperationDetailsModule } from '@c8y/ngx-components/operations/operation-details';
-import { has, cloneDeep, uniqBy } from 'lodash-es';
+import { has, uniqBy } from 'lodash-es';
 import { saveAs } from 'file-saver';
-import * as i1$1 from 'ngx-bootstrap/modal';
 import { map } from 'rxjs/operators';
-import * as i1$2 from 'ngx-bootstrap/tabs';
-import { TabsetComponent, TabDirective, TabsModule } from 'ngx-bootstrap/tabs';
-import { TranslateService } from '@ngx-translate/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
 import { pipe } from 'rxjs';
+import * as i1$3 from 'ngx-bootstrap/tabs';
+import { TabsetComponent, TabDirective, TabsModule } from 'ngx-bootstrap/tabs';
+import * as i1$2 from 'ngx-bootstrap/modal';
+import { TranslateService } from '@ngx-translate/core';
 
 class DeviceConfigurationService {
-    constructor() {
+    constructor(bottomDrawerService) {
+        this.bottomDrawerService = bottomDrawerService;
         this.configurationsUpdated = new EventEmitter();
     }
     updateConfigurations(repositorySnapsOnly) {
         this.configurationsUpdated.emit(repositorySnapsOnly);
     }
+    /**
+     * Opens a component in a bottom drawer prefilled with `initialState` and resolves once the
+     * user saves (the drawer's `result` promise settles), or `false` if they cancel. Shared by
+     * the "Save to repository" and "Edit in repository" flows, which differ only in the payload.
+     */
+    async openConfigurationDrawer(component, initialState) {
+        try {
+            const drawer = this.bottomDrawerService.openDrawer(component, {
+                disableClickOutside: true,
+                closeOnNavigation: true,
+                initialState
+            });
+            await drawer.instance.result;
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
     hasAnySupportedOperation(mo, operation) {
         const supported = mo.c8y_SupportedOperations;
         if (!supported) {
@@ -40,12 +60,12 @@ class DeviceConfigurationService {
         }
         return supported.some(supportedOperation => operation.includes(supportedOperation));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationService, deps: [{ token: i2.BottomDrawerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [{ type: i2.BottomDrawerService }] });
 
 class TextBasedConfigurationComponent {
     constructor(route, alertService, repositoryService, deviceConfigurationService, inventoryService) {
@@ -144,13 +164,13 @@ class TextBasedConfigurationComponent {
             withChildren: false
         })).data;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextBasedConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AlertService }, { token: i3.RepositoryService }, { token: DeviceConfigurationService }, { token: i4.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextBasedConfigurationComponent, isStandalone: true, selector: "c8y-text-based-configuration", ngImport: i0, template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        @if (showTextBasedConfigReload) {\n          <button\n            class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n            title=\"{{ 'Get configuration from device' | translate }}\"\n            type=\"button\"\n            (click)=\"reloadConfiguration()\"\n            [disabled]=\"reloadingConfig || savingConfig\"\n          >\n            @if (reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n                [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n              ></i>\n            }\n            @if (!reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"download\"\n              ></i>\n            }\n\n            {{ 'Get configuration from device' | translate }}\n          </button>\n        }\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  @if (latestOperation !== undefined) {\n    <c8y-operation-details\n      class=\"bg-level-2 p-0\"\n      [operation]=\"latestOperation\"\n    ></c8y-operation-details>\n  }\n  @if (showTextBasedConfigSave) {\n    <div class=\"card-footer fit-w separator\">\n      <button\n        class=\"btn btn-primary\"\n        id=\"send-config-btn\"\n        type=\"button\"\n        (click)=\"updateConfiguration(config)\"\n        [disabled]=\"reloadingConfig || savingConfig || !config\"\n        [ngClass]=\"{ 'btn-pending': savingConfig }\"\n      >\n        @if (!savingConfig) {\n          <span title=\"{{ 'Send' | translate }}\">\n            {{ 'Send configuration to device' | translate }}\n          </span>\n        }\n        @if (savingConfig) {\n          <span title=\"{{ 'Sending\u2026' | translate }}\">\n            {{ 'Sending\u2026' | translate }}\n          </span>\n        }\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextBasedConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AlertService }, { token: i3.RepositoryService }, { token: DeviceConfigurationService }, { token: i3$1.InventoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TextBasedConfigurationComponent, isStandalone: true, selector: "c8y-text-based-configuration", ngImport: i0, template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        @if (showTextBasedConfigReload) {\n          <button\n            class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n            title=\"{{ 'Get configuration from device' | translate }}\"\n            type=\"button\"\n            (click)=\"reloadConfiguration()\"\n            [disabled]=\"reloadingConfig || savingConfig\"\n          >\n            @if (reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n                [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n              ></i>\n            }\n            @if (!reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"download\"\n              ></i>\n            }\n\n            {{ 'Get configuration from device' | translate }}\n          </button>\n        }\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  @if (latestOperation !== undefined) {\n    <c8y-operation-details\n      class=\"bg-level-2 p-0\"\n      [operation]=\"latestOperation\"\n    ></c8y-operation-details>\n  }\n  @if (showTextBasedConfigSave) {\n    <div class=\"card-footer fit-w separator\">\n      <button\n        class=\"btn btn-primary\"\n        id=\"send-config-btn\"\n        type=\"button\"\n        (click)=\"updateConfiguration(config)\"\n        [disabled]=\"reloadingConfig || savingConfig || !config\"\n        [ngClass]=\"{ 'btn-pending': savingConfig }\"\n      >\n        @if (!savingConfig) {\n          <span title=\"{{ 'Send' | translate }}\">\n            {{ 'Send configuration to device' | translate }}\n          </span>\n        }\n        @if (savingConfig) {\n          <span title=\"{{ 'Sending\u2026' | translate }}\">\n            {{ 'Sending\u2026' | translate }}\n          </span>\n        }\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TextBasedConfigurationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-text-based-configuration', imports: [IconDirective, NgClass, FormsModule, OperationDetailsComponent, C8yTranslatePipe], template: "<div class=\"d-flex d-col fit-h\">\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50\">\n      <div class=\"m-l-auto d-flex\">\n        @if (showTextBasedConfigReload) {\n          <button\n            class=\"btn btn-default btn-sm a-s-center m-t-8 m-b-8\"\n            title=\"{{ 'Get configuration from device' | translate }}\"\n            type=\"button\"\n            (click)=\"reloadConfiguration()\"\n            [disabled]=\"reloadingConfig || savingConfig\"\n          >\n            @if (reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"refresh\"\n                [ngClass]=\"{ 'icon-spin': reloadingConfig }\"\n              ></i>\n            }\n            @if (!reloadingConfig) {\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"download\"\n              ></i>\n            }\n\n            {{ 'Get configuration from device' | translate }}\n          </button>\n        }\n      </div>\n    </div>\n  </fieldset>\n  <div class=\"flex-grow\">\n    <textarea\n      class=\"form-control fit-h p-r-16 p-l-16\"\n      [attr.aria-label]=\"'Operations' | translate\"\n      [(ngModel)]=\"config\"\n      [disabled]=\"reloadingConfig || savingConfig\"\n      c8y-spellcheck=\"false\"\n    ></textarea>\n  </div>\n  @if (latestOperation !== undefined) {\n    <c8y-operation-details\n      class=\"bg-level-2 p-0\"\n      [operation]=\"latestOperation\"\n    ></c8y-operation-details>\n  }\n  @if (showTextBasedConfigSave) {\n    <div class=\"card-footer fit-w separator\">\n      <button\n        class=\"btn btn-primary\"\n        id=\"send-config-btn\"\n        type=\"button\"\n        (click)=\"updateConfiguration(config)\"\n        [disabled]=\"reloadingConfig || savingConfig || !config\"\n        [ngClass]=\"{ 'btn-pending': savingConfig }\"\n      >\n        @if (!savingConfig) {\n          <span title=\"{{ 'Send' | translate }}\">\n            {{ 'Send configuration to device' | translate }}\n          </span>\n        }\n        @if (savingConfig) {\n          <span title=\"{{ 'Sending\u2026' | translate }}\">\n            {{ 'Sending\u2026' | translate }}\n          </span>\n        }\n      </button>\n    </div>\n  }\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.AlertService }, { type: i3.RepositoryService }, { type: DeviceConfigurationService }, { type: i4.InventoryService }] });
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.AlertService }, { type: i3.RepositoryService }, { type: DeviceConfigurationService }, { type: i3$1.InventoryService }] });
 
 class DeviceConfigurationGuard {
     constructor(deviceConfigurationService) {
@@ -197,91 +217,368 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ name: 'configurationFilterPipe' }]
         }] });
 
-class SaveToRepositoryComponent {
-    constructor(modal, alertService, repositoryService) {
-        this.modal = modal;
-        this.alertService = alertService;
-        this.repositoryService = repositoryService;
+const EXT_LANGUAGE_MAP = {
+    json: 'json',
+    yaml: 'yaml',
+    yml: 'yaml',
+    xml: 'xml',
+    html: 'html',
+    css: 'css',
+    ts: 'typescript',
+    js: 'javascript',
+    md: 'markdown',
+    toml: 'ini',
+    properties: 'ini',
+    ini: 'ini',
+    conf: 'ini',
+    cfg: 'ini',
+    sh: 'shell'
+};
+function detectLanguage(filename) {
+    const ext = (filename.split('.').pop() ?? '').toLowerCase();
+    return EXT_LANGUAGE_MAP[ext] ?? 'plaintext';
+}
+const EXT_MIME_MAP = {
+    json: 'application/json',
+    xml: 'application/xml',
+    yaml: 'application/yaml',
+    yml: 'application/yaml',
+    js: 'application/javascript',
+    ts: 'application/typescript',
+    html: 'text/html',
+    css: 'text/css',
+    md: 'text/markdown',
+    sh: 'application/x-sh',
+    toml: 'application/toml'
+};
+function mimeForFilename(filename) {
+    const ext = (filename.split('.').pop() ?? '').toLowerCase();
+    return EXT_MIME_MAP[ext] ?? 'text/plain';
+}
+/** Sentinel value meaning "derive language from filename". */
+const AUTO_LANGUAGE = 'auto';
+const EDITOR_LANGUAGES = [
+    { value: AUTO_LANGUAGE, label: gettext('Auto (from filename)') },
+    { value: 'json', label: gettext('JSON') },
+    { value: 'javascript', label: gettext('JavaScript') },
+    { value: 'typescript', label: gettext('TypeScript') },
+    { value: 'css', label: gettext('CSS') },
+    { value: 'html', label: gettext('HTML') },
+    { value: 'yaml', label: gettext('YAML') },
+    { value: 'markdown', label: gettext('Markdown') },
+    { value: 'xml', label: gettext('XML') },
+    { value: 'ini', label: gettext('INI / TOML / Properties') },
+    { value: 'shell', label: gettext('Shell') },
+    { value: 'plaintext', label: gettext('Plain text') }
+];
+class ConfigurationDetailComponent {
+    constructor() {
+        this.repositoryService = inject(RepositoryService);
+        this.bottomDrawerRef = inject(BottomDrawerRef);
+        this.alert = inject(AlertService);
+        this.inventoryBinaryService = inject(InventoryBinaryService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.binary = { file: undefined, url: undefined };
+        this.mo = {};
+        this.form = new FormGroup({
+            version: new FormControl('', [
+                Validators.required,
+                Validators.maxLength(254),
+                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
+            ]),
+            deviceType: new FormControl('', [
+                Validators.maxLength(254),
+                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
+            ]),
+            description: new FormControl('', [
+                Validators.maxLength(254),
+                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
+            ]),
+            uploadChoice: new FormControl('uploadBinary'),
+            editorFilename: new FormControl('', [
+                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
+            ]),
+            editorLanguage: new FormControl(EDITOR_LANGUAGES[0]),
+            editorContent: new FormControl('')
+        });
+        this.configurationTypeMO = {};
+        this.saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+        this.pattern = signal('', ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
+        this.isExternalUrl = signal(false, ...(ngDevMode ? [{ debugName: "isExternalUrl" }] : /* istanbul ignore next */ []));
+        this.ValidationPattern = ValidationPattern;
+        this.textForConfigurationUrlPopover = gettext(`Path for binaries can vary depending on device agent implementation, for example:
+    /configuration/binaries/configuration1.bin
+    https://configuration/binary/123
+    ftp://configuration/binary/123.tar.gz
+    Configurations with external URLs only work with the configuration typed devices (file-based configuration), not with devices with a legacy configuration.
+  `);
         this.result = new Promise((resolve, reject) => {
             this._save = resolve;
             this._cancel = reject;
         });
+        this.settled = false;
+        this.editorFilenameValue = toSignal(this.form.controls.editorFilename.valueChanges, {
+            initialValue: ''
+        });
+        this.editorLanguageValue = toSignal(this.form.controls.editorLanguage.valueChanges, {
+            initialValue: EDITOR_LANGUAGES[0]
+        });
+        /** User's manual pick (when not "auto") wins over auto-detection from filename. */
+        this.editorLanguage = computed(() => {
+            const picked = this.editorLanguageValue()?.value;
+            return !picked || picked === AUTO_LANGUAGE
+                ? detectLanguage(this.editorFilenameValue() ?? '')
+                : picked;
+        }, ...(ngDevMode ? [{ debugName: "editorLanguage" }] : /* istanbul ignore next */ []));
+        this.editorLanguages = EDITOR_LANGUAGES;
+        this.submitButtonTitle = computed(() => this.mo?.id ? gettext('Update configuration') : gettext('Add configuration'), ...(ngDevMode ? [{ debugName: "submitButtonTitle" }] : /* istanbul ignore next */ []));
+        this.form.controls.uploadChoice.valueChanges.pipe(takeUntilDestroyed()).subscribe(choice => {
+            const ctrl = this.form.controls.editorFilename;
+            if (choice === 'editInline') {
+                ctrl.addValidators(Validators.required);
+            }
+            else {
+                ctrl.removeValidators(Validators.required);
+            }
+            ctrl.updateValueAndValidity();
+        });
+        // Drawer can be closed externally (Escape, navigation, programmatic close).
+        // Make sure the result promise is always settled, otherwise callers awaiting it hang.
+        this.bottomDrawerRef.onClosed$.pipe(takeUntilDestroyed()).subscribe(() => {
+            if (!this.settled) {
+                this.settled = true;
+                this._cancel('Drawer closed');
+            }
+        });
     }
-    async save() {
-        {
-            try {
-                const configSnapshotData = {
-                    selected: {
-                        configurationType: this.configSnapshot.configurationType
-                    },
-                    version: this.configSnapshot.name,
-                    deviceType: this.configSnapshot.deviceType,
-                    description: this.configSnapshot.description,
-                    binary: {
-                        file: new File([this.configSnapshot.binary], this.configSnapshot.name)
-                    }
-                };
-                await this.repositoryService.create(configSnapshotData, RepositoryType.CONFIGURATION);
-                this.alertService.success(gettext('Configuration saved.'));
-                this._save();
+    async ngOnInit() {
+        this.configs = await this.repositoryService.listRepositoryEntries(RepositoryType.CONFIGURATION);
+        this.setPipe('');
+        // Prefill when editing an existing entry (mo.id) or when the caller supplies
+        // content to seed a new entry — e.g. saving a device snapshot to the repository.
+        const shouldPrefill = !!(this.mo?.id || this.binary?.file || this.version);
+        if (shouldPrefill) {
+            this.configurationTypeMO = this.mo;
+            const hasExternalUrl = !!this.binary?.url && !this.inventoryBinaryService.getIdFromUrl(this.binary.url);
+            if (hasExternalUrl) {
+                this.isExternalUrl.set(true);
+                this.form.patchValue({
+                    version: this.version ?? '',
+                    deviceType: this.deviceType ?? '',
+                    description: this.description ?? '',
+                    uploadChoice: 'uploadUrl'
+                });
             }
-            catch (ex) {
-                this.alertService.addServerFailure(ex);
+            else {
+                const patchValues = {
+                    version: this.version ?? '',
+                    deviceType: this.deviceType ?? '',
+                    description: this.description ?? '',
+                    uploadChoice: 'editInline'
+                };
+                if (this.binary?.file) {
+                    this.existingBinary = this.binary.file;
+                    // Decide from the content, not the declared MIME type: platform-served binaries
+                    // are often labelled text/plain, and their bytes must never open in the editor.
+                    if (await isBinaryFile(this.binary.file, { ignoreMimeType: true })) {
+                        patchValues.uploadChoice = 'uploadBinary';
+                    }
+                    else {
+                        patchValues.editorContent = await this.binary.file.text();
+                        patchValues.editorFilename = this.binary.file.name;
+                    }
+                }
+                this.form.patchValue(patchValues);
             }
+            this.form.markAsDirty();
         }
+        this.cdr.markForCheck();
     }
-    close() {
-        this._cancel();
-        this.modal.hide();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveToRepositoryComponent, deps: [{ token: i1$1.BsModalRef }, { token: i2.AlertService }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SaveToRepositoryComponent, isStandalone: true, selector: "c8y-save-config-to-configuration-repository", ngImport: i0, template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveToRepositoryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-save-config-to-configuration-repository', imports: [
-                        IconDirective,
-                        C8yTranslateDirective,
-                        FormsModule,
-                        FormGroupComponent,
-                        RequiredInputPlaceholderDirective,
-                        C8yTranslatePipe
-                    ], template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.AlertService }, { type: i3.RepositoryService }] });
-
-class SourceCodePreviewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SourceCodePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SourceCodePreviewComponent, isStandalone: true, selector: "c8y-source-code-preview", inputs: { isDisabled: "isDisabled", text: "text" }, ngImport: i0, template: "<textarea\n  [disabled]=\"isDisabled\"\n  class=\"text-monospace form-control no-resize flex-grow\"\n  rows=\"4\"\n  >{{ text }}</textarea\n>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SourceCodePreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-source-code-preview', template: "<textarea\n  [disabled]=\"isDisabled\"\n  class=\"text-monospace form-control no-resize flex-grow\"\n  rows=\"4\"\n  >{{ text }}</textarea\n>\n" }]
-        }], propDecorators: { isDisabled: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }] } });
-
-class ConfigurationPreviewComponent {
-    set configurationType(type) {
-        this._configurationType = type;
-        this.setOperation(type);
+    cancel() {
+        this.settled = true;
+        this._cancel('User canceled');
+        this.bottomDrawerRef.close();
     }
-    get configurationType() {
-        return this._configurationType;
+    setPipe(filterStr) {
+        this.pattern.set(filterStr);
+        this.filterPipe = pipe(map(data => uniqBy(data, 'configurationType')), map(data => data.filter(mo => mo.configurationType &&
+            mo.configurationType.toLowerCase().indexOf(filterStr.toLowerCase()) > -1)));
     }
-    constructor(deviceConfigurationService, operationRealtime, bsModal, user, appState, repositoryService, operationService, alertService) {
-        this.deviceConfigurationService = deviceConfigurationService;
-        this.operationRealtime = operationRealtime;
-        this.bsModal = bsModal;
-        this.user = user;
-        this.appState = appState;
-        this.repositoryService = repositoryService;
-        this.operationService = operationService;
-        this.alertService = alertService;
-        this.isLegacy = false;
-        this.canCallAction = true;
-        this.deviceConfigurationOperation = DeviceConfigurationOperation;
+    onUploadChoiceChange(choice) {
+        this.form.controls.uploadChoice.setValue(choice);
+        this.form.markAsDirty();
+    }
+    onFileBinaryChange(file) {
+        this.binary = { ...this.binary, file };
+        this.form.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    onFileUrlChange(url) {
+        this.binary = { ...this.binary, url };
+        this.form.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    onTextFilePicked({ name, content }) {
+        this.form.patchValue({
+            uploadChoice: 'editInline',
+            editorFilename: name,
+            editorContent: content
+        });
+        this.form.markAsDirty();
+        this.cdr.markForCheck();
+    }
+    get isSaveDisabled() {
+        if (this.saving() || !this.form.valid || this.form.pristine) {
+            return true;
+        }
+        const { uploadChoice, editorFilename, editorContent } = this.form.value;
+        if (uploadChoice === 'uploadBinary') {
+            return !this.binary?.file;
+        }
+        if (uploadChoice === 'uploadUrl') {
+            return !this.binary?.url?.trim();
+        }
+        if (uploadChoice === 'editInline') {
+            return !editorFilename?.trim() || !editorContent;
+        }
+        return false;
+    }
+    async save() {
+        if (this.isSaveDisabled) {
+            return;
+        }
+        try {
+            this.saving.set(true);
+            const { version, deviceType, description, uploadChoice, editorFilename, editorContent } = this.form.value;
+            let binary = { ...this.binary };
+            if (uploadChoice === 'uploadUrl') {
+                binary = { url: this.binary?.url };
+            }
+            else if (uploadChoice === 'editInline') {
+                binary = {
+                    file: new File([editorContent], editorFilename, { type: mimeForFilename(editorFilename) })
+                };
+            }
+            else if (this.existingBinary === this.binary?.file && this.binary?.url) {
+                // Editing an entry whose binary is unchanged: reuse the persisted url instead of
+                // re-uploading. Only valid when a url exists — a new entry (e.g. from a device
+                // snapshot) has no persisted binary, so its file must still be uploaded.
+                binary = { ...this.binary, file: undefined };
+            }
+            await this.repositoryService.create({
+                version,
+                description,
+                binary,
+                deviceType,
+                configurationType: this.configurationTypeMO?.configurationType
+            }, RepositoryType.CONFIGURATION, this.mo);
+            this.alert.success(this.mo?.id ? gettext('Configuration updated.') : gettext('Configuration created.'));
+            this.settled = true;
+            this._save();
+            this.bottomDrawerRef.close();
+        }
+        catch (ex) {
+            // Keep the drawer open so the user can fix and retry.
+            // Do NOT settle the result promise here.
+            this.alert.addServerFailure(ex);
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigurationDetailComponent, isStandalone: true, selector: "c8y-configuration-detail", inputs: { version: "version", description: "description", binary: "binary", deviceType: "deviceType", mo: "mo" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header j-c-center separator flex-no-shrink p-24\">\n  <i\n    class=\"m-r-8\"\n    [c8yIcon]=\"'cogs'\"\n    aria-hidden=\"true\"\n  ></i>\n  <h4 id=\"drawerTitle\">\n    @if (mo?.id) {\n      {{ 'Update configuration' | translate }}\n    } @else {\n      {{ 'Add configuration' | translate }}\n    }\n  </h4>\n</div>\n\n<form\n  class=\"d-contents\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"save()\"\n>\n  <div\n    class=\"card-body inner-scroll p-24\"\n    [class.d-col]=\"form.value.uploadChoice === 'editInline'\"\n  >\n    <div class=\"row\">\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confVersion\"\n          translate\n        >\n          Name\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confVersion\"\n          placeholder=\"{{ 'e.g.' | translate }} hosts\"\n          aria-required=\"true\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"version\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDeviceType\"\n          translate\n        >\n          Device type\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDeviceType\"\n          placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"deviceType\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDescription\"\n          translate\n        >\n          Description\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDescription\"\n          placeholder=\"{{ 'e.g.' | translate }} Host configuration\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"description\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label translate>Configuration type</label>\n        <c8y-typeahead\n          placeholder=\"{{ 'e.g.' | translate }} ssh\"\n          name=\"confType\"\n          data-cy=\"conf-detail--configuration-type\"\n          [ngModel]=\"configurationTypeMO\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"configurationTypeMO = $event\"\n          maxlength=\"254\"\n          (onSearch)=\"setPipe($event)\"\n          displayProperty=\"configurationType\"\n        >\n          @let patternStr = pattern();\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n            (click)=\"configurationTypeMO = config; setPipe('')\"\n            [active]=\"configurationTypeMO === config\"\n          >\n            <c8y-highlight\n              [text]=\"config.configurationType || '--'\"\n              [pattern]=\"patternStr\"\n            ></c8y-highlight>\n          </c8y-li>\n          <ng-template #notFoundTemplate>\n            @if (patternStr.length > 0) {\n              <c8y-li class=\"bg-level-2 p-8\">\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            }\n          </ng-template>\n        </c8y-typeahead>\n      </c8y-form-group>\n    </div>\n\n    <fieldset\n      class=\"d-col\"\n      [class.flex-grow]=\"form.value.uploadChoice === 'editInline'\"\n      [class.min-height-0]=\"form.value.uploadChoice === 'editInline'\"\n    >\n      <legend\n        class=\"legend form-block m-t-40\"\n        translate\n      >\n        Configuration file\n      </legend>\n\n      @if (isExternalUrl()) {\n        <p\n          class=\"text-muted m-b-8\"\n          translate\n        >\n          Content is sourced from a remote URL and cannot be edited inline.\n        </p>\n        <c8y-form-group>\n          <label\n            for=\"confFileUrl\"\n            translate\n          >\n            File URL\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"confFileUrl\"\n            placeholder=\"https://...\"\n            type=\"url\"\n            autocomplete=\"off\"\n            [ngModel]=\"binary.url\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"binary = { url: $event }; form.markAsDirty()\"\n          />\n        </c8y-form-group>\n      } @else {\n        <c8y-file-picker\n          [maxAllowedFiles]=\"1\"\n          [allowedUploadChoices]=\"['uploadBinary', 'uploadUrl', 'editInline']\"\n          [uploadChoice]=\"form.controls.uploadChoice.value\"\n          (uploadChoiceChange)=\"onUploadChoiceChange($event)\"\n          [fileUrl]=\"binary.url\"\n          (fileUrlChange)=\"onFileUrlChange($event)\"\n          [fileBinary]=\"binary.file\"\n          (fileBinaryChange)=\"onFileBinaryChange($event)\"\n          (textFilePicked)=\"onTextFilePicked($event)\"\n          [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n        >\n          <ng-container c8yInlineEditor>\n            <div class=\"row\">\n              <c8y-form-group class=\"col-sm-9\">\n                <label\n                  for=\"confEditorFilename\"\n                  translate\n                >\n                  Filename\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"confEditorFilename\"\n                  placeholder=\"config.json\"\n                  aria-required=\"true\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  formControlName=\"editorFilename\"\n                />\n              </c8y-form-group>\n              <c8y-form-group class=\"col-sm-3\">\n                <label\n                  for=\"confEditorLanguage\"\n                  translate\n                >\n                  Language\n                </label>\n                <c8y-select\n                  aria-label=\"{{ 'Editor language' | translate }}\"\n                  id=\"confEditorLanguage\"\n                  [items]=\"editorLanguages\"\n                  formControlName=\"editorLanguage\"\n                ></c8y-select>\n              </c8y-form-group>\n            </div>\n            <c8y-form-group class=\"d-col flex-grow min-height-0 m-b-0\">\n              <label\n                for=\"confEditorContent\"\n                translate\n              >\n                Content\n              </label>\n              <c8y-editor\n                class=\"flex-grow\"\n                style=\"min-height: 95px\"\n                id=\"confEditorContent\"\n                formControlName=\"editorContent\"\n                monacoEditorMarkerValidator\n                [editorOptions]=\"{ language: editorLanguage() }\"\n              ></c8y-editor>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n          </ng-container>\n        </c8y-file-picker>\n      }\n    </fieldset>\n  </div>\n\n  <div class=\"card-footer j-c-between separator flex-no-shrink p-24\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      [disabled]=\"saving()\"\n    >\n      <span translate>Cancel</span>\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [class.btn-pending]=\"saving()\"\n      [title]=\"submitButtonTitle() | translate\"\n      type=\"submit\"\n      [disabled]=\"isSaveDisabled\"\n    >\n      {{ submitButtonTitle() | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "allowedUploadChoices", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover", "editInlineConfirmTitle", "editInlineConfirmMessage"], outputs: ["onFilesPicked", "uploadChoiceChange", "fileBinaryChange", "fileUrlChange", "textFilePicked"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-configuration-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-contents' }, imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        IconDirective,
+                        C8yTranslateDirective,
+                        FormGroupComponent,
+                        TypeaheadComponent,
+                        ForOfDirective,
+                        ListItemComponent,
+                        HighlightComponent,
+                        FilePickerComponent,
+                        NgClass,
+                        C8yTranslatePipe,
+                        EditorComponent,
+                        MonacoEditorMarkerValidatorDirective,
+                        MessagesComponent,
+                        RequiredInputPlaceholderDirective,
+                        SelectComponent
+                    ], template: "<div class=\"card-header j-c-center separator flex-no-shrink p-24\">\n  <i\n    class=\"m-r-8\"\n    [c8yIcon]=\"'cogs'\"\n    aria-hidden=\"true\"\n  ></i>\n  <h4 id=\"drawerTitle\">\n    @if (mo?.id) {\n      {{ 'Update configuration' | translate }}\n    } @else {\n      {{ 'Add configuration' | translate }}\n    }\n  </h4>\n</div>\n\n<form\n  class=\"d-contents\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"save()\"\n>\n  <div\n    class=\"card-body inner-scroll p-24\"\n    [class.d-col]=\"form.value.uploadChoice === 'editInline'\"\n  >\n    <div class=\"row\">\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confVersion\"\n          translate\n        >\n          Name\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confVersion\"\n          placeholder=\"{{ 'e.g.' | translate }} hosts\"\n          aria-required=\"true\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"version\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDeviceType\"\n          translate\n        >\n          Device type\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDeviceType\"\n          placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"deviceType\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDescription\"\n          translate\n        >\n          Description\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDescription\"\n          placeholder=\"{{ 'e.g.' | translate }} Host configuration\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"description\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label translate>Configuration type</label>\n        <c8y-typeahead\n          placeholder=\"{{ 'e.g.' | translate }} ssh\"\n          name=\"confType\"\n          data-cy=\"conf-detail--configuration-type\"\n          [ngModel]=\"configurationTypeMO\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"configurationTypeMO = $event\"\n          maxlength=\"254\"\n          (onSearch)=\"setPipe($event)\"\n          displayProperty=\"configurationType\"\n        >\n          @let patternStr = pattern();\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n            (click)=\"configurationTypeMO = config; setPipe('')\"\n            [active]=\"configurationTypeMO === config\"\n          >\n            <c8y-highlight\n              [text]=\"config.configurationType || '--'\"\n              [pattern]=\"patternStr\"\n            ></c8y-highlight>\n          </c8y-li>\n          <ng-template #notFoundTemplate>\n            @if (patternStr.length > 0) {\n              <c8y-li class=\"bg-level-2 p-8\">\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            }\n          </ng-template>\n        </c8y-typeahead>\n      </c8y-form-group>\n    </div>\n\n    <fieldset\n      class=\"d-col\"\n      [class.flex-grow]=\"form.value.uploadChoice === 'editInline'\"\n      [class.min-height-0]=\"form.value.uploadChoice === 'editInline'\"\n    >\n      <legend\n        class=\"legend form-block m-t-40\"\n        translate\n      >\n        Configuration file\n      </legend>\n\n      @if (isExternalUrl()) {\n        <p\n          class=\"text-muted m-b-8\"\n          translate\n        >\n          Content is sourced from a remote URL and cannot be edited inline.\n        </p>\n        <c8y-form-group>\n          <label\n            for=\"confFileUrl\"\n            translate\n          >\n            File URL\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"confFileUrl\"\n            placeholder=\"https://...\"\n            type=\"url\"\n            autocomplete=\"off\"\n            [ngModel]=\"binary.url\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"binary = { url: $event }; form.markAsDirty()\"\n          />\n        </c8y-form-group>\n      } @else {\n        <c8y-file-picker\n          [maxAllowedFiles]=\"1\"\n          [allowedUploadChoices]=\"['uploadBinary', 'uploadUrl', 'editInline']\"\n          [uploadChoice]=\"form.controls.uploadChoice.value\"\n          (uploadChoiceChange)=\"onUploadChoiceChange($event)\"\n          [fileUrl]=\"binary.url\"\n          (fileUrlChange)=\"onFileUrlChange($event)\"\n          [fileBinary]=\"binary.file\"\n          (fileBinaryChange)=\"onFileBinaryChange($event)\"\n          (textFilePicked)=\"onTextFilePicked($event)\"\n          [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n        >\n          <ng-container c8yInlineEditor>\n            <div class=\"row\">\n              <c8y-form-group class=\"col-sm-9\">\n                <label\n                  for=\"confEditorFilename\"\n                  translate\n                >\n                  Filename\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"confEditorFilename\"\n                  placeholder=\"config.json\"\n                  aria-required=\"true\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  formControlName=\"editorFilename\"\n                />\n              </c8y-form-group>\n              <c8y-form-group class=\"col-sm-3\">\n                <label\n                  for=\"confEditorLanguage\"\n                  translate\n                >\n                  Language\n                </label>\n                <c8y-select\n                  aria-label=\"{{ 'Editor language' | translate }}\"\n                  id=\"confEditorLanguage\"\n                  [items]=\"editorLanguages\"\n                  formControlName=\"editorLanguage\"\n                ></c8y-select>\n              </c8y-form-group>\n            </div>\n            <c8y-form-group class=\"d-col flex-grow min-height-0 m-b-0\">\n              <label\n                for=\"confEditorContent\"\n                translate\n              >\n                Content\n              </label>\n              <c8y-editor\n                class=\"flex-grow\"\n                style=\"min-height: 95px\"\n                id=\"confEditorContent\"\n                formControlName=\"editorContent\"\n                monacoEditorMarkerValidator\n                [editorOptions]=\"{ language: editorLanguage() }\"\n              ></c8y-editor>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n          </ng-container>\n        </c8y-file-picker>\n      }\n    </fieldset>\n  </div>\n\n  <div class=\"card-footer j-c-between separator flex-no-shrink p-24\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      [disabled]=\"saving()\"\n    >\n      <span translate>Cancel</span>\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [class.btn-pending]=\"saving()\"\n      [title]=\"submitButtonTitle() | translate\"\n      type=\"submit\"\n      [disabled]=\"isSaveDisabled\"\n    >\n      {{ submitButtonTitle() | translate }}\n    </button>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [], propDecorators: { version: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], binary: [{
+                type: Input
+            }], deviceType: [{
+                type: Input
+            }], mo: [{
+                type: Input
+            }] } });
+
+class SourceCodePreviewComponent {
+    constructor() {
+        // Kept as a stable reference — a fresh object every change detection cycle would make the
+        // editor re-run updateOptions() needlessly. Only rebuilt when the relevant inputs change.
+        this.editorOptions = this.buildEditorOptions();
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    ngOnChanges(changes) {
+        if (changes.isDisabled || changes.binaryType) {
+            this.editorOptions = this.buildEditorOptions();
+        }
+    }
+    onEditorInit() {
+        this.cdr.detectChanges();
+    }
+    buildEditorOptions() {
+        return {
+            readOnly: this.isDisabled,
+            language: mimeTypeToEditorLanguage(this.binaryType),
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SourceCodePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SourceCodePreviewComponent, isStandalone: true, selector: "c8y-source-code-preview", inputs: { isDisabled: "isDisabled", text: "text", binaryType: "binaryType" }, usesOnChanges: true, ngImport: i0, template: "<c8y-editor\n  class=\"flex-grow\"\n  [ngModel]=\"text\"\n  [editorOptions]=\"editorOptions\"\n  (editorInit)=\"onEditorInit()\"\n></c8y-editor>\n", dependencies: [{ kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SourceCodePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-source-code-preview', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [EditorComponent, FormsModule], template: "<c8y-editor\n  class=\"flex-grow\"\n  [ngModel]=\"text\"\n  [editorOptions]=\"editorOptions\"\n  (editorInit)=\"onEditorInit()\"\n></c8y-editor>\n" }]
+        }], propDecorators: { isDisabled: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], binaryType: [{
+                type: Input
+            }] } });
+
+class ConfigurationPreviewComponent {
+    set configurationType(type) {
+        this._configurationType = type;
+        this.setOperation(type);
+    }
+    get configurationType() {
+        return this._configurationType;
+    }
+    constructor(deviceConfigurationService, operationRealtime, user, appState, repositoryService, operationService, alertService) {
+        this.deviceConfigurationService = deviceConfigurationService;
+        this.operationRealtime = operationRealtime;
+        this.user = user;
+        this.appState = appState;
+        this.repositoryService = repositoryService;
+        this.operationService = operationService;
+        this.alertService = alertService;
+        this.isLegacy = false;
+        this.editInRepository = new EventEmitter();
+        this.canCallAction = true;
+        this.deviceConfigurationOperation = DeviceConfigurationOperation;
     }
     async ngOnInit() {
         this.setCanCallAction();
@@ -365,23 +662,22 @@ class ConfigurationPreviewComponent {
         saveAs(blob, fileName);
     }
     async saveToRepository() {
-        const initialState = {
-            configSnapshot: cloneDeep(this.configSnapshot)
-        };
-        const modal = this.bsModal.show(SaveToRepositoryComponent, {
-            class: 'modal-sm',
-            ariaDescribedby: 'modal-body',
-            ariaLabelledBy: 'modal-title',
-            initialState,
-            ignoreBackdropClick: true
-        }).content;
-        try {
-            await modal.result;
+        const snapshot = this.configSnapshot;
+        // Prefer the original binary (real bytes + filename) so the drawer can tell text
+        // from binary: text opens in the inline editor, binary in the upload-binary option.
+        const file = snapshot.binaryFile ??
+            new File([snapshot.binary ?? ''], snapshot.name, { type: snapshot.binaryType });
+        const saved = await this.deviceConfigurationService.openConfigurationDrawer(ConfigurationDetailComponent, {
+            version: snapshot.name,
+            deviceType: snapshot.deviceType,
+            description: snapshot.description,
+            binary: { file },
+            // No id — the drawer treats this as a new entry, but carries the
+            // configuration type so the user can review and edit before saving.
+            mo: { configurationType: snapshot.configurationType }
+        });
+        if (saved) {
             this.deviceConfigurationService.updateConfigurations(true);
-            modal.close();
-        }
-        catch (ex) {
-            // do nothing
         }
     }
     hasPermission() {
@@ -409,21 +705,20 @@ class ConfigurationPreviewComponent {
             this.deviceConfigurationService.updateConfigurations();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationPreviewComponent, deps: [{ token: DeviceConfigurationService }, { token: i2.OperationRealtimeService }, { token: i1$1.BsModalService }, { token: i4.UserService }, { token: i2.AppStateService }, { token: i3.RepositoryService }, { token: i4.OperationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: ConfigurationPreviewComponent, isStandalone: true, selector: "c8y-device-configuration-preview", inputs: { device: "device", configurationType: "configurationType", configSnapshot: "configSnapshot", canSaveSnapshot: "canSaveSnapshot", actionButtonText: "actionButtonText", actionButtonIcon: "actionButtonIcon", isLegacy: "isLegacy", operationToTrigger: "operationToTrigger" }, ngImport: i0, template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Configuration</span>\n      <span *ngIf=\"configSnapshot?.name; else emptyText\">\n        <strong>{{ configSnapshot.name }}</strong>\n      </span>\n      <ng-template #emptyText>---</ng-template>\n    </p>\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Last updated</span>\n      <small *ngIf=\"configSnapshot?.time; else emptyDate\">\n        {{ configSnapshot.time | c8yDate }}\n      </small>\n      <ng-template #emptyDate>---</ng-template>\n    </p>\n  </div>\n  <div class=\"col-5\">\n    <button\n      id=\"action-btn\"\n      class=\"btn btn-default btn-sm pull-right\"\n      type=\"button\"\n      title=\"{{ actionButtonText | translate }}\"\n      (click)=\"createDeviceOperation()\"\n      [disabled]=\"isCreateOperationDisabled()\"\n      *ngIf=\"canCallAction\"\n    >\n      <i [c8yIcon]=\"actionButtonIcon\"></i>\n      {{ actionButtonText | translate }}\n    </button>\n  </div>\n</div>\n<div class=\"c8y-empty-state text-left\" *ngIf=\"!configSnapshot?.binary && showBinary()\">\n  <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n  <p>\n    <strong translate>No preview available.</strong>\n    <br />\n    <small *ngIf=\"configSnapshot?.binary !== ''; else emptyFile\" translate>\n      The file is not available.\n    </small>\n    <ng-template #emptyFile>\n      <small translate>The file is empty.</small>\n    </ng-template>\n  </p>\n</div>\n<div *ngIf=\"configSnapshot?.binary && showBinary()\" class=\"flex-grow d-flex d-col\">\n  <c8y-source-code-preview\n    [text]=\"configSnapshot.binary\"\n    [isDisabled]=\"true\"\n    class=\"d-contents\"\n  ></c8y-source-code-preview>\n  <div *ngIf=\"canSaveSnapshot\" class=\"p-t-16\">\n    <button\n      title=\"{{ 'Download' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary btn-sm pull-right m-l-8\"\n      (click)=\"download()\"\n    >\n      {{ 'Download' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save to repository' | translate }}\"\n      *ngIf=\"hasPermission()\"\n      type=\"button\"\n      class=\"btn btn-default btn-sm pull-right\"\n      (click)=\"saveToRepository()\"\n    >\n      {{ 'Save to repository' | translate }}\n    </button>\n  </div>\n</div>\n<div *ngIf=\"showOperation()\">\n  <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n</div>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: SourceCodePreviewComponent, selector: "c8y-source-code-preview", inputs: ["isDisabled", "text"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationPreviewComponent, deps: [{ token: DeviceConfigurationService }, { token: i2.OperationRealtimeService }, { token: i3$1.UserService }, { token: i2.AppStateService }, { token: i3.RepositoryService }, { token: i3$1.OperationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigurationPreviewComponent, isStandalone: true, selector: "c8y-device-configuration-preview", inputs: { device: "device", configurationType: "configurationType", configSnapshot: "configSnapshot", canSaveSnapshot: "canSaveSnapshot", actionButtonText: "actionButtonText", actionButtonIcon: "actionButtonIcon", isLegacy: "isLegacy", operationToTrigger: "operationToTrigger", editableRepositoryMo: "editableRepositoryMo" }, outputs: { editInRepository: "editInRepository" }, ngImport: i0, template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span\n        class=\"text-label-small text-uppercase m-r-4\"\n        translate\n        >Configuration</span\n      >\n      @if (configSnapshot?.name) {\n        <span>\n          <strong>{{ configSnapshot.name }}</strong>\n        </span>\n      } @else {\n        ---\n      }\n    </p>\n    <p>\n      <span\n        class=\"text-label-small text-uppercase m-r-4\"\n        translate\n        >Last updated</span\n      >\n      @if (configSnapshot?.time) {\n        <small>\n          {{ configSnapshot.time | c8yDate }}\n        </small>\n      } @else {\n        ---\n      }\n    </p>\n  </div>\n  <div class=\"col-5 d-flex j-c-end gap-4\">\n    @if (editableRepositoryMo) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Edit in repository' | translate }}\"\n        type=\"button\"\n        (click)=\"editInRepository.emit(editableRepositoryMo)\"\n      >\n        <i\n          [c8yIcon]=\"'pencil'\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Edit in repository' | translate }}\n      </button>\n    }\n    @if (canCallAction) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ actionButtonText | translate }}\"\n        id=\"action-btn\"\n        type=\"button\"\n        (click)=\"createDeviceOperation()\"\n        [disabled]=\"isCreateOperationDisabled()\"\n      >\n        <i [c8yIcon]=\"actionButtonIcon\"></i>\n        {{ actionButtonText | translate }}\n      </button>\n    }\n  </div>\n</div>\n@if (!configSnapshot?.binary && showBinary()) {\n  <div class=\"c8y-empty-state text-left\">\n    <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n    <p>\n      <strong translate>No preview available.</strong>\n      <br />\n      @if (configSnapshot?.binary !== '') {\n        <small translate> The file is not available. </small>\n      } @else {\n        <small translate>The file is empty.</small>\n      }\n    </p>\n  </div>\n}\n@if (configSnapshot?.binary && showBinary()) {\n  <div class=\"flex-grow d-flex d-col\">\n    <c8y-source-code-preview\n      class=\"d-contents\"\n      [text]=\"configSnapshot.binary\"\n      [binaryType]=\"configSnapshot.binaryType\"\n      [isDisabled]=\"true\"\n    ></c8y-source-code-preview>\n    @if (canSaveSnapshot) {\n      <div class=\"p-t-16\">\n        <button\n          class=\"btn btn-primary btn-sm pull-right m-l-8\"\n          title=\"{{ 'Download' | translate }}\"\n          type=\"button\"\n          (click)=\"download()\"\n        >\n          {{ 'Download' | translate }}\n        </button>\n        @if (hasPermission()) {\n          <button\n            class=\"btn btn-default btn-sm pull-right\"\n            title=\"{{ 'Save to repository' | translate }}\"\n            type=\"button\"\n            (click)=\"saveToRepository()\"\n          >\n            {{ 'Save to repository' | translate }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n@if (showOperation()) {\n  <div>\n    <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: SourceCodePreviewComponent, selector: "c8y-source-code-preview", inputs: ["isDisabled", "text", "binaryType"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-device-configuration-preview', imports: [
                         C8yTranslateDirective,
-                        NgIf,
                         IconDirective,
                         SourceCodePreviewComponent,
                         OperationDetailsComponent,
                         C8yTranslatePipe,
                         DatePipe
-                    ], template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Configuration</span>\n      <span *ngIf=\"configSnapshot?.name; else emptyText\">\n        <strong>{{ configSnapshot.name }}</strong>\n      </span>\n      <ng-template #emptyText>---</ng-template>\n    </p>\n    <p>\n      <span class=\"text-label-small text-uppercase m-r-4\" translate>Last updated</span>\n      <small *ngIf=\"configSnapshot?.time; else emptyDate\">\n        {{ configSnapshot.time | c8yDate }}\n      </small>\n      <ng-template #emptyDate>---</ng-template>\n    </p>\n  </div>\n  <div class=\"col-5\">\n    <button\n      id=\"action-btn\"\n      class=\"btn btn-default btn-sm pull-right\"\n      type=\"button\"\n      title=\"{{ actionButtonText | translate }}\"\n      (click)=\"createDeviceOperation()\"\n      [disabled]=\"isCreateOperationDisabled()\"\n      *ngIf=\"canCallAction\"\n    >\n      <i [c8yIcon]=\"actionButtonIcon\"></i>\n      {{ actionButtonText | translate }}\n    </button>\n  </div>\n</div>\n<div class=\"c8y-empty-state text-left\" *ngIf=\"!configSnapshot?.binary && showBinary()\">\n  <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n  <p>\n    <strong translate>No preview available.</strong>\n    <br />\n    <small *ngIf=\"configSnapshot?.binary !== ''; else emptyFile\" translate>\n      The file is not available.\n    </small>\n    <ng-template #emptyFile>\n      <small translate>The file is empty.</small>\n    </ng-template>\n  </p>\n</div>\n<div *ngIf=\"configSnapshot?.binary && showBinary()\" class=\"flex-grow d-flex d-col\">\n  <c8y-source-code-preview\n    [text]=\"configSnapshot.binary\"\n    [isDisabled]=\"true\"\n    class=\"d-contents\"\n  ></c8y-source-code-preview>\n  <div *ngIf=\"canSaveSnapshot\" class=\"p-t-16\">\n    <button\n      title=\"{{ 'Download' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-primary btn-sm pull-right m-l-8\"\n      (click)=\"download()\"\n    >\n      {{ 'Download' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save to repository' | translate }}\"\n      *ngIf=\"hasPermission()\"\n      type=\"button\"\n      class=\"btn btn-default btn-sm pull-right\"\n      (click)=\"saveToRepository()\"\n    >\n      {{ 'Save to repository' | translate }}\n    </button>\n  </div>\n</div>\n<div *ngIf=\"showOperation()\">\n  <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DeviceConfigurationService }, { type: i2.OperationRealtimeService }, { type: i1$1.BsModalService }, { type: i4.UserService }, { type: i2.AppStateService }, { type: i3.RepositoryService }, { type: i4.OperationService }, { type: i2.AlertService }], propDecorators: { device: [{
+                    ], template: "<div class=\"content-flex-55 p-b-16\">\n  <div class=\"col-7 p-t-4\">\n    <p>\n      <span\n        class=\"text-label-small text-uppercase m-r-4\"\n        translate\n        >Configuration</span\n      >\n      @if (configSnapshot?.name) {\n        <span>\n          <strong>{{ configSnapshot.name }}</strong>\n        </span>\n      } @else {\n        ---\n      }\n    </p>\n    <p>\n      <span\n        class=\"text-label-small text-uppercase m-r-4\"\n        translate\n        >Last updated</span\n      >\n      @if (configSnapshot?.time) {\n        <small>\n          {{ configSnapshot.time | c8yDate }}\n        </small>\n      } @else {\n        ---\n      }\n    </p>\n  </div>\n  <div class=\"col-5 d-flex j-c-end gap-4\">\n    @if (editableRepositoryMo) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ 'Edit in repository' | translate }}\"\n        type=\"button\"\n        (click)=\"editInRepository.emit(editableRepositoryMo)\"\n      >\n        <i\n          [c8yIcon]=\"'pencil'\"\n          aria-hidden=\"true\"\n        ></i>\n        {{ 'Edit in repository' | translate }}\n      </button>\n    }\n    @if (canCallAction) {\n      <button\n        class=\"btn btn-default btn-sm\"\n        title=\"{{ actionButtonText | translate }}\"\n        id=\"action-btn\"\n        type=\"button\"\n        (click)=\"createDeviceOperation()\"\n        [disabled]=\"isCreateOperationDisabled()\"\n      >\n        <i [c8yIcon]=\"actionButtonIcon\"></i>\n        {{ actionButtonText | translate }}\n      </button>\n    }\n  </div>\n</div>\n@if (!configSnapshot?.binary && showBinary()) {\n  <div class=\"c8y-empty-state text-left\">\n    <h1 [c8yIcon]=\"'file-image-o'\"></h1>\n    <p>\n      <strong translate>No preview available.</strong>\n      <br />\n      @if (configSnapshot?.binary !== '') {\n        <small translate> The file is not available. </small>\n      } @else {\n        <small translate>The file is empty.</small>\n      }\n    </p>\n  </div>\n}\n@if (configSnapshot?.binary && showBinary()) {\n  <div class=\"flex-grow d-flex d-col\">\n    <c8y-source-code-preview\n      class=\"d-contents\"\n      [text]=\"configSnapshot.binary\"\n      [binaryType]=\"configSnapshot.binaryType\"\n      [isDisabled]=\"true\"\n    ></c8y-source-code-preview>\n    @if (canSaveSnapshot) {\n      <div class=\"p-t-16\">\n        <button\n          class=\"btn btn-primary btn-sm pull-right m-l-8\"\n          title=\"{{ 'Download' | translate }}\"\n          type=\"button\"\n          (click)=\"download()\"\n        >\n          {{ 'Download' | translate }}\n        </button>\n        @if (hasPermission()) {\n          <button\n            class=\"btn btn-default btn-sm pull-right\"\n            title=\"{{ 'Save to repository' | translate }}\"\n            type=\"button\"\n            (click)=\"saveToRepository()\"\n          >\n            {{ 'Save to repository' | translate }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n@if (showOperation()) {\n  <div>\n    <c8y-operation-details [operation]=\"operation\"></c8y-operation-details>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: DeviceConfigurationService }, { type: i2.OperationRealtimeService }, { type: i3$1.UserService }, { type: i2.AppStateService }, { type: i3.RepositoryService }, { type: i3$1.OperationService }, { type: i2.AlertService }], propDecorators: { device: [{
                 type: Input
             }], configurationType: [{
                 type: Input
@@ -439,6 +734,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], operationToTrigger: [{
                 type: Input
+            }], editableRepositoryMo: [{
+                type: Input
+            }], editInRepository: [{
+                type: Output
             }] } });
 
 class DeviceConfigurationListComponent {
@@ -479,10 +778,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class DeviceConfigurationComponent {
-    constructor(route, deviceConfigurationService, realtime, repositoryService) {
+    constructor(route, deviceConfigurationService, repositoryService) {
         this.route = route;
         this.deviceConfigurationService = deviceConfigurationService;
-        this.realtime = realtime;
         this.repositoryService = repositoryService;
         this.supportedConfigurations = [];
         this.showBinaryBasedConfig = false;
@@ -525,9 +823,11 @@ class DeviceConfigurationComponent {
     async onConfigTypeSelected(config) {
         this.configurationType = config.name;
         this.isLegacy = config.isLegacy;
+        this.selectedRepositoryMo = undefined;
         this.updateSnapshots();
     }
     async onRepositoryConfigSelected(config) {
+        this.selectedRepositoryMo = config;
         this.repositorySnapshot = {
             id: config.id,
             time: config.creationTime,
@@ -543,9 +843,10 @@ class DeviceConfigurationComponent {
                 });
                 if (binary) {
                     this.repositorySnapshot.binary = await binary.text();
+                    this.repositorySnapshot.binaryType = binary.type || undefined;
                 }
             }
-            catch (ex) {
+            catch {
                 // do nothing
             }
         }
@@ -553,6 +854,7 @@ class DeviceConfigurationComponent {
     async updateSnapshots(repositorySnapsOnly) {
         this.reloading = true;
         this.repositorySnapshot = undefined;
+        this.selectedRepositoryMo = undefined;
         this.repositorySnapshots = await this.repositoryService.getSnapshotsFromRepository(this.device, this.configurationType);
         if (!repositorySnapsOnly) {
             this.configSnapshot = this.isLegacy
@@ -564,8 +866,27 @@ class DeviceConfigurationComponent {
         }
         this.reloading = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: DeviceConfigurationService }, { token: i4.Realtime }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: DeviceConfigurationComponent, isStandalone: true, selector: "c8y-device-configuration", viewQueries: [{ propertyName: "textBasedConfigurationComponent", first: true, predicate: TextBasedConfigurationComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n", dependencies: [{ kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TabsetAriaDirective, selector: "tabset" }, { kind: "component", type: TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DeviceConfigurationListComponent, selector: "c8y-device-configuration-list", inputs: ["items", "itemIcon", "emptyState", "isFilterEnabled"], outputs: ["configSelected"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ConfigurationPreviewComponent, selector: "c8y-device-configuration-preview", inputs: ["device", "configurationType", "configSnapshot", "canSaveSnapshot", "actionButtonText", "actionButtonIcon", "isLegacy", "operationToTrigger"] }, { kind: "component", type: TextBasedConfigurationComponent, selector: "c8y-text-based-configuration" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    async openEditInRepository(mo) {
+        let fileBinary = null;
+        try {
+            fileBinary = await this.repositoryService.getBinaryFile(mo.url, { allowExternal: false });
+        }
+        catch {
+            // Binary unavailable — drawer still opens; editor will be empty
+        }
+        const saved = await this.deviceConfigurationService.openConfigurationDrawer(ConfigurationDetailComponent, {
+            version: mo.name,
+            deviceType: mo.deviceType,
+            description: mo.description,
+            binary: { file: fileBinary, url: mo.url },
+            mo
+        });
+        if (saved) {
+            this.updateSnapshots(true);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationComponent, deps: [{ token: i1.ActivatedRoute }, { token: DeviceConfigurationService }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DeviceConfigurationComponent, isStandalone: true, selector: "c8y-device-configuration", viewQueries: [{ propertyName: "textBasedConfigurationComponent", first: true, predicate: TextBasedConfigurationComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"updateSnapshots()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    @if (showBinaryBasedConfig && !showTextBasedConfig) {\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n      </div>\n    }\n    @if (!showBinaryBasedConfig && showTextBasedConfig) {\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n      </div>\n    }\n    @if (showBinaryBasedConfig) {\n      <tab heading=\"{{ 'Configurations' | translate }}\">\n        <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n          <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n          <div class=\"card--grid__inner-scroll bg-level-1\">\n            <div class=\"p-l-16 p-r-16\">\n              <h5 class=\"legend form-block\">\n                <span translate>Device-supported configurations</span>\n              </h5>\n            </div>\n            <c8y-device-configuration-list\n              [itemIcon]=\"'gears'\"\n              [items]=\"supportedConfigurations\"\n              (configSelected)=\"onConfigTypeSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n          <!-- CONFIGURATION PREVIEW -->\n          <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n            <div class=\"card-block d-flex d-col flex-grow\">\n              <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n              <!-- EMPTY STATE -->\n              @if (!configurationType) {\n                <c8y-ui-empty-state\n                  [icon]=\"'file-text'\"\n                  [title]=\"'No configuration selected.' | translate\"\n                  [subtitle]=\"'Select a configuration to preview.' | translate\"\n                  [horizontal]=\"true\"\n                ></c8y-ui-empty-state>\n              }\n              <!-- PREVIEW AVAILABLE STATE -->\n              @if (configurationType) {\n                <c8y-device-configuration-preview\n                  class=\"d-flex d-col flex-grow\"\n                  [actionButtonIcon]=\"'download'\"\n                  [device]=\"device\"\n                  [configurationType]=\"configurationType\"\n                  [configSnapshot]=\"configSnapshot\"\n                  [canSaveSnapshot]=\"true\"\n                  [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n                  [actionButtonText]=\"'Get snapshot from device' | translate\"\n                  [isLegacy]=\"isLegacy\"\n                ></c8y-device-configuration-preview>\n              }\n            </div>\n          </div>\n          <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n          <div class=\"card--grid__inner-scroll bg-level-1\">\n            <div class=\"p-l-16 p-r-16\">\n              <h5\n                class=\"legend form-block\"\n                translate\n              >\n                Available supported configurations\n              </h5>\n            </div>\n            <!-- EMPTY STATE -->\n            @if (!configurationType) {\n              <c8y-ui-empty-state\n                [icon]=\"'gears'\"\n                [title]=\"'No selection.' | translate\"\n                [subtitle]=\"\n                  'Select a configuration from the device-supported configuration list.' | translate\n                \"\n                [horizontal]=\"true\"\n              ></c8y-ui-empty-state>\n            }\n            @if (configurationType) {\n              <div class=\"p-r-16\">\n                <c8y-device-configuration-list\n                  [itemIcon]=\"'file-text'\"\n                  [items]=\"repositorySnapshots\"\n                  [emptyState]=\"repositorySnapshotsEmptyState\"\n                  [isFilterEnabled]=\"true\"\n                  (configSelected)=\"onRepositoryConfigSelected($event)\"\n                ></c8y-device-configuration-list>\n              </div>\n            }\n          </div>\n          <!-- CONFIGURATION PREVIEW -->\n          <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n            <div class=\"card-block flex-grow d-flex d-col\">\n              <h5\n                class=\"legend form-block\"\n                translate\n              >\n                Preview\n              </h5>\n              <!-- EMPTY STATE -->\n              @if (!repositorySnapshot) {\n                <c8y-ui-empty-state\n                  [icon]=\"'file-text'\"\n                  [title]=\"'No configuration selected.' | translate\"\n                  [subtitle]=\"'Select a configuration to preview.' | translate\"\n                  [horizontal]=\"true\"\n                ></c8y-ui-empty-state>\n              }\n              <!-- CONFIGURATION SELECTED STATE -->\n              @if (repositorySnapshot) {\n                <c8y-device-configuration-preview\n                  class=\"d-flex d-col flex-grow\"\n                  [actionButtonIcon]=\"'upload'\"\n                  [device]=\"device\"\n                  [configurationType]=\"configurationType\"\n                  [configSnapshot]=\"repositorySnapshot\"\n                  [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n                  [actionButtonText]=\"'Send configuration to device' | translate\"\n                  [isLegacy]=\"isLegacy\"\n                  [editableRepositoryMo]=\"selectedRepositoryMo\"\n                  (editInRepository)=\"openEditInRepository($event)\"\n                ></c8y-device-configuration-preview>\n              }\n            </div>\n          </div>\n        </div>\n      </tab>\n    }\n    @if (showTextBasedConfig) {\n      <tab heading=\"{{ 'Text-based configuration' | translate }}\">\n        <c8y-text-based-configuration></c8y-text-based-configuration>\n      </tab>\n    }\n  </tabset>\n</div>\n", dependencies: [{ kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TabsetAriaDirective, selector: "tabset" }, { kind: "component", type: TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DeviceConfigurationListComponent, selector: "c8y-device-configuration-list", inputs: ["items", "itemIcon", "emptyState", "isFilterEnabled"], outputs: ["configSelected"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: ConfigurationPreviewComponent, selector: "c8y-device-configuration-preview", inputs: ["device", "configurationType", "configSnapshot", "canSaveSnapshot", "actionButtonText", "actionButtonIcon", "isLegacy", "operationToTrigger", "editableRepositoryMo"], outputs: ["editInRepository"] }, { kind: "component", type: TextBasedConfigurationComponent, selector: "c8y-text-based-configuration" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceConfigurationComponent, decorators: [{
             type: Component,
@@ -575,7 +896,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NgClass,
                         TabsetAriaDirective,
                         TabsetComponent,
-                        NgIf,
                         TabDirective,
                         C8yTranslateDirective,
                         DeviceConfigurationListComponent,
@@ -583,12 +903,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ConfigurationPreviewComponent,
                         TextBasedConfigurationComponent,
                         C8yTranslatePipe
-                    ], template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button class=\"btn btn-link\" title=\"{{ 'Reload' | translate }}\" (click)=\"updateSnapshots()\">\n    <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': reloading }\"></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    <div class=\"card-header separator\" *ngIf=\"showBinaryBasedConfig && !showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n    </div>\n    <div class=\"card-header separator\" *ngIf=\"!showBinaryBasedConfig && showTextBasedConfig\">\n      <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n    </div>\n    <tab heading=\"{{ 'Configurations' | translate }}\" *ngIf=\"showBinaryBasedConfig\">\n      <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n        <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\">\n              <span translate>Device-supported configurations</span>\n            </h5>\n          </div>\n          <c8y-device-configuration-list\n            [items]=\"supportedConfigurations\"\n            [itemIcon]=\"'gears'\"\n            (configSelected)=\"onConfigTypeSelected($event)\"\n          ></c8y-device-configuration-list>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block d-flex d-col flex-grow\">\n            <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n\n            <!-- EMPTY STATE -->\n\n            <c8y-ui-empty-state\n              *ngIf=\"!configurationType\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- PREVIEW AVAILABLE STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"configurationType\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"configSnapshot\"\n              [canSaveSnapshot]=\"true\"\n              [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n              [actionButtonText]=\"'Get snapshot from device' | translate\"\n              [actionButtonIcon]=\"'download'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n\n        <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n        <div class=\"card--grid__inner-scroll bg-level-1\">\n          <div class=\"p-l-16 p-r-16\">\n            <h5 class=\"legend form-block\" translate>Available supported configurations</h5>\n          </div>\n\n          <!-- EMPTY STATE -->\n\n          <c8y-ui-empty-state\n            *ngIf=\"!configurationType\"\n            [icon]=\"'gears'\"\n            [title]=\"'No selection.' | translate\"\n            [subtitle]=\"\n              'Select a configuration from the device-supported configuration list.' | translate\n            \"\n            [horizontal]=\"true\"\n          ></c8y-ui-empty-state>\n\n          <div class=\"p-r-16\" *ngIf=\"configurationType\">\n            <c8y-device-configuration-list\n              [items]=\"repositorySnapshots\"\n              [itemIcon]=\"'file-text'\"\n              [emptyState]=\"repositorySnapshotsEmptyState\"\n              [isFilterEnabled]=\"true\"\n              (configSelected)=\"onRepositoryConfigSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n        </div>\n\n        <!-- CONFIGURATION PREVIEW -->\n        <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n          <div class=\"card-block flex-grow d-flex d-col\">\n            <h5 class=\"legend form-block\" translate>Preview</h5>\n\n            <!-- EMPTY STATE -->\n            <c8y-ui-empty-state\n              *ngIf=\"!repositorySnapshot\"\n              [icon]=\"'file-text'\"\n              [title]=\"'No configuration selected.' | translate\"\n              [subtitle]=\"'Select a configuration to preview.' | translate\"\n              [horizontal]=\"true\"\n            ></c8y-ui-empty-state>\n\n            <!-- CONFIGURATION SELECTED STATE -->\n            <c8y-device-configuration-preview\n              *ngIf=\"repositorySnapshot\"\n              [device]=\"device\"\n              [configurationType]=\"configurationType\"\n              [configSnapshot]=\"repositorySnapshot\"\n              [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n              [actionButtonText]=\"'Send configuration to device' | translate\"\n              [actionButtonIcon]=\"'upload'\"\n              [isLegacy]=\"isLegacy\"\n              class=\"d-flex d-col flex-grow\"\n            ></c8y-device-configuration-preview>\n          </div>\n        </div>\n      </div>\n    </tab>\n    <tab heading=\"{{ 'Text-based configuration' | translate }}\" *ngIf=\"showTextBasedConfig\">\n      <c8y-text-based-configuration></c8y-text-based-configuration>\n    </tab>\n  </tabset>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: DeviceConfigurationService }, { type: i4.Realtime }, { type: i3.RepositoryService }], propDecorators: { textBasedConfigurationComponent: [{
+                    ], template: "<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Reload' | translate }}\"\n    (click)=\"updateSnapshots()\"\n  >\n    <i\n      c8yIcon=\"refresh\"\n      [ngClass]=\"{ 'icon-spin': reloading }\"\n    ></i>\n    {{ 'Reload' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<div class=\"card content-fullpage card-has-tabs\">\n  <tabset>\n    @if (showBinaryBasedConfig && !showTextBasedConfig) {\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">{{ 'Configurations' | translate }}</div>\n      </div>\n    }\n    @if (!showBinaryBasedConfig && showTextBasedConfig) {\n      <div class=\"card-header separator\">\n        <div class=\"card-title\">{{ 'Text-based configuration' | translate }}</div>\n      </div>\n    }\n    @if (showBinaryBasedConfig) {\n      <tab heading=\"{{ 'Configurations' | translate }}\">\n        <div class=\"card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0\">\n          <!-- DEVICE SUPPORTED CONFIGURATIONS -->\n          <div class=\"card--grid__inner-scroll bg-level-1\">\n            <div class=\"p-l-16 p-r-16\">\n              <h5 class=\"legend form-block\">\n                <span translate>Device-supported configurations</span>\n              </h5>\n            </div>\n            <c8y-device-configuration-list\n              [itemIcon]=\"'gears'\"\n              [items]=\"supportedConfigurations\"\n              (configSelected)=\"onConfigTypeSelected($event)\"\n            ></c8y-device-configuration-list>\n          </div>\n          <!-- CONFIGURATION PREVIEW -->\n          <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n            <div class=\"card-block d-flex d-col flex-grow\">\n              <h5 class=\"legend form-block\"><span translate>Preview</span></h5>\n              <!-- EMPTY STATE -->\n              @if (!configurationType) {\n                <c8y-ui-empty-state\n                  [icon]=\"'file-text'\"\n                  [title]=\"'No configuration selected.' | translate\"\n                  [subtitle]=\"'Select a configuration to preview.' | translate\"\n                  [horizontal]=\"true\"\n                ></c8y-ui-empty-state>\n              }\n              <!-- PREVIEW AVAILABLE STATE -->\n              @if (configurationType) {\n                <c8y-device-configuration-preview\n                  class=\"d-flex d-col flex-grow\"\n                  [actionButtonIcon]=\"'download'\"\n                  [device]=\"device\"\n                  [configurationType]=\"configurationType\"\n                  [configSnapshot]=\"configSnapshot\"\n                  [canSaveSnapshot]=\"true\"\n                  [operationToTrigger]=\"'c8y_UploadConfigFile'\"\n                  [actionButtonText]=\"'Get snapshot from device' | translate\"\n                  [isLegacy]=\"isLegacy\"\n                ></c8y-device-configuration-preview>\n              }\n            </div>\n          </div>\n          <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->\n          <div class=\"card--grid__inner-scroll bg-level-1\">\n            <div class=\"p-l-16 p-r-16\">\n              <h5\n                class=\"legend form-block\"\n                translate\n              >\n                Available supported configurations\n              </h5>\n            </div>\n            <!-- EMPTY STATE -->\n            @if (!configurationType) {\n              <c8y-ui-empty-state\n                [icon]=\"'gears'\"\n                [title]=\"'No selection.' | translate\"\n                [subtitle]=\"\n                  'Select a configuration from the device-supported configuration list.' | translate\n                \"\n                [horizontal]=\"true\"\n              ></c8y-ui-empty-state>\n            }\n            @if (configurationType) {\n              <div class=\"p-r-16\">\n                <c8y-device-configuration-list\n                  [itemIcon]=\"'file-text'\"\n                  [items]=\"repositorySnapshots\"\n                  [emptyState]=\"repositorySnapshotsEmptyState\"\n                  [isFilterEnabled]=\"true\"\n                  (configSelected)=\"onRepositoryConfigSelected($event)\"\n                ></c8y-device-configuration-list>\n              </div>\n            }\n          </div>\n          <!-- CONFIGURATION PREVIEW -->\n          <div class=\"card--grid__inner-scroll d-flex d-col flex-grow\">\n            <div class=\"card-block flex-grow d-flex d-col\">\n              <h5\n                class=\"legend form-block\"\n                translate\n              >\n                Preview\n              </h5>\n              <!-- EMPTY STATE -->\n              @if (!repositorySnapshot) {\n                <c8y-ui-empty-state\n                  [icon]=\"'file-text'\"\n                  [title]=\"'No configuration selected.' | translate\"\n                  [subtitle]=\"'Select a configuration to preview.' | translate\"\n                  [horizontal]=\"true\"\n                ></c8y-ui-empty-state>\n              }\n              <!-- CONFIGURATION SELECTED STATE -->\n              @if (repositorySnapshot) {\n                <c8y-device-configuration-preview\n                  class=\"d-flex d-col flex-grow\"\n                  [actionButtonIcon]=\"'upload'\"\n                  [device]=\"device\"\n                  [configurationType]=\"configurationType\"\n                  [configSnapshot]=\"repositorySnapshot\"\n                  [operationToTrigger]=\"'c8y_DownloadConfigFile'\"\n                  [actionButtonText]=\"'Send configuration to device' | translate\"\n                  [isLegacy]=\"isLegacy\"\n                  [editableRepositoryMo]=\"selectedRepositoryMo\"\n                  (editInRepository)=\"openEditInRepository($event)\"\n                ></c8y-device-configuration-preview>\n              }\n            </div>\n          </div>\n        </div>\n      </tab>\n    }\n    @if (showTextBasedConfig) {\n      <tab heading=\"{{ 'Text-based configuration' | translate }}\">\n        <c8y-text-based-configuration></c8y-text-based-configuration>\n      </tab>\n    }\n  </tabset>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: DeviceConfigurationService }, { type: i3.RepositoryService }], propDecorators: { textBasedConfigurationComponent: [{
                 type: ViewChild,
                 args: [TextBasedConfigurationComponent]
             }] } });
 
+class SaveToRepositoryComponent {
+    constructor(modal, alertService, repositoryService) {
+        this.modal = modal;
+        this.alertService = alertService;
+        this.repositoryService = repositoryService;
+        this.result = new Promise((resolve, reject) => {
+            this._save = resolve;
+            this._cancel = reject;
+        });
+    }
+    async save() {
+        {
+            try {
+                const configSnapshotData = {
+                    selected: {
+                        configurationType: this.configSnapshot.configurationType
+                    },
+                    version: this.configSnapshot.name,
+                    deviceType: this.configSnapshot.deviceType,
+                    description: this.configSnapshot.description,
+                    binary: {
+                        file: new File([this.configSnapshot.binary], this.configSnapshot.name)
+                    }
+                };
+                await this.repositoryService.create(configSnapshotData, RepositoryType.CONFIGURATION);
+                this.alertService.success(gettext('Configuration saved.'));
+                this._save();
+            }
+            catch (ex) {
+                this.alertService.addServerFailure(ex);
+            }
+        }
+    }
+    close() {
+        this._cancel();
+        this.modal.hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveToRepositoryComponent, deps: [{ token: i1$2.BsModalRef }, { token: i2.AlertService }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SaveToRepositoryComponent, isStandalone: true, selector: "c8y-save-config-to-configuration-repository", ngImport: i0, template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveToRepositoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-save-config-to-configuration-repository', imports: [
+                        IconDirective,
+                        C8yTranslateDirective,
+                        FormsModule,
+                        FormGroupComponent,
+                        RequiredInputPlaceholderDirective,
+                        C8yTranslatePipe
+                    ], template: "<div class=\"modal-header dialog-header\">\n  <i c8yIcon=\"gears\"></i>\n  <h4 id=\"modal-title\" translate>\n    Save configuration\n  </h4>\n</div>\n<div class=\"modal-body\" id=\"modal-body\">\n  <form #saveConfigurationSnapshot=\"ngForm\" class=\"p-t-24\">\n    <c8y-form-group>\n      <label translate for=\"name\">Name</label>\n      <input\n        id=\"name\"\n        type=\"text\"\n        class=\"form-control\"\n        autocomplete=\"off\"\n        name=\"name\"\n        [(ngModel)]=\"configSnapshot.name\"\n        required\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"deviceType\">Device type</label>\n      <input\n        id=\"deviceType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"deviceType\"\n        [(ngModel)]=\"configSnapshot.deviceType\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"description\">Description</label>\n      <input\n        type=\"text\"\n        id=\"description\"\n        class=\"form-control\"\n        maxlength=\"254\"\n        autocomplete=\"off\"\n        name=\"description\"\n        [(ngModel)]=\"configSnapshot.description\"\n      />\n    </c8y-form-group>\n    <c8y-form-group>\n      <label translate for=\"configurationType\">Configuration type</label>\n      <input\n        id=\"configurationType\"\n        class=\"form-control\"\n        rows=\"6\"\n        name=\"configurationType\"\n        [(ngModel)]=\"configSnapshot.configurationType\"\n      />\n    </c8y-form-group>\n  </form>\n</div>\n<div class=\"modal-footer\">\n  <button title=\"{{ 'Cancel' | translate }}\" class=\"btn btn-default\" (click)=\"close()\" translate>\n    Cancel\n  </button>\n\n  <button\n    title=\"{{ 'Save configuration to repository' | translate }}\"\n    class=\"btn btn-primary\"\n    (click)=\"save()\"\n    [disabled]=\"saveConfigurationSnapshot.form.invalid\"\n    translate\n  >\n    Save\n  </button>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1$2.BsModalRef }, { type: i2.AlertService }, { type: i3.RepositoryService }] });
+
 class ConfigurationRepositoryDeviceTabModule {
     static forRoot() {
         return {
@@ -609,7 +981,7 @@ class ConfigurationRepositoryDeviceTabModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationRepositoryDeviceTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationRepositoryDeviceTabModule, imports: [SharedRepositoryModule,
-            OperationDetailsModule, i1$2.TabsModule, DeviceConfigurationComponent,
+            OperationDetailsModule, i1$3.TabsModule, DeviceConfigurationComponent,
             DeviceConfigurationListComponent,
             ConfigurationPreviewComponent,
             ConfigurationFilterPipe,
@@ -623,6 +995,7 @@ class ConfigurationRepositoryDeviceTabModule {
             DeviceConfigurationListComponent,
             ConfigurationPreviewComponent,
             SaveToRepositoryComponent,
+            SourceCodePreviewComponent,
             TextBasedConfigurationComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationRepositoryDeviceTabModule, decorators: [{
@@ -644,303 +1017,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
-const EXT_LANGUAGE_MAP = {
-    json: 'json',
-    yaml: 'yaml',
-    yml: 'yaml',
-    xml: 'xml',
-    html: 'html',
-    css: 'css',
-    ts: 'typescript',
-    js: 'javascript',
-    md: 'markdown',
-    toml: 'ini',
-    properties: 'ini',
-    ini: 'ini',
-    conf: 'ini',
-    cfg: 'ini',
-    sh: 'shell'
-};
-function detectLanguage(filename) {
-    const ext = (filename.split('.').pop() ?? '').toLowerCase();
-    return EXT_LANGUAGE_MAP[ext] ?? 'plaintext';
-}
-const EXT_MIME_MAP = {
-    json: 'application/json',
-    xml: 'application/xml',
-    yaml: 'application/yaml',
-    yml: 'application/yaml',
-    js: 'application/javascript',
-    ts: 'application/typescript',
-    html: 'text/html',
-    css: 'text/css',
-    md: 'text/markdown',
-    sh: 'application/x-sh',
-    toml: 'application/toml'
-};
-function mimeForFilename(filename) {
-    const ext = (filename.split('.').pop() ?? '').toLowerCase();
-    return EXT_MIME_MAP[ext] ?? 'text/plain';
-}
-/** Sentinel value meaning "derive language from filename". */
-const AUTO_LANGUAGE = 'auto';
-const EDITOR_LANGUAGES = [
-    { value: AUTO_LANGUAGE, label: gettext('Auto (from filename)') },
-    { value: 'json', label: gettext('JSON') },
-    { value: 'javascript', label: gettext('JavaScript') },
-    { value: 'typescript', label: gettext('TypeScript') },
-    { value: 'css', label: gettext('CSS') },
-    { value: 'html', label: gettext('HTML') },
-    { value: 'yaml', label: gettext('YAML') },
-    { value: 'markdown', label: gettext('Markdown') },
-    { value: 'xml', label: gettext('XML') },
-    { value: 'ini', label: gettext('INI / TOML / Properties') },
-    { value: 'shell', label: gettext('Shell') },
-    { value: 'plaintext', label: gettext('Plain text') }
-];
-class ConfigurationDetailComponent {
-    constructor() {
-        this.repositoryService = inject(RepositoryService);
-        this.bottomDrawerRef = inject(BottomDrawerRef);
-        this.alert = inject(AlertService);
-        this.inventoryBinaryService = inject(InventoryBinaryService);
-        this.cdr = inject(ChangeDetectorRef);
-        this.binary = { file: undefined, url: undefined };
-        this.mo = {};
-        this.form = new FormGroup({
-            version: new FormControl('', [
-                Validators.required,
-                Validators.maxLength(254),
-                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
-            ]),
-            deviceType: new FormControl('', [
-                Validators.maxLength(254),
-                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
-            ]),
-            description: new FormControl('', [
-                Validators.maxLength(254),
-                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
-            ]),
-            uploadChoice: new FormControl('uploadBinary'),
-            editorFilename: new FormControl('', [
-                Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
-            ]),
-            editorLanguage: new FormControl(EDITOR_LANGUAGES[0]),
-            editorContent: new FormControl('')
-        });
-        this.configurationTypeMO = {};
-        this.saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
-        this.pattern = signal('', ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
-        this.isExternalUrl = signal(false, ...(ngDevMode ? [{ debugName: "isExternalUrl" }] : /* istanbul ignore next */ []));
-        this.ValidationPattern = ValidationPattern;
-        this.textForConfigurationUrlPopover = gettext(`Path for binaries can vary depending on device agent implementation, for example:
-    /configuration/binaries/configuration1.bin
-    https://configuration/binary/123
-    ftp://configuration/binary/123.tar.gz
-    Configurations with external URLs only work with the configuration typed devices (file-based configuration), not with devices with a legacy configuration.
-  `);
-        this.result = new Promise((resolve, reject) => {
-            this._save = resolve;
-            this._cancel = reject;
-        });
-        this.settled = false;
-        this.editorFilenameValue = toSignal(this.form.controls.editorFilename.valueChanges, {
-            initialValue: ''
-        });
-        this.editorLanguageValue = toSignal(this.form.controls.editorLanguage.valueChanges, {
-            initialValue: EDITOR_LANGUAGES[0]
-        });
-        /** User's manual pick (when not "auto") wins over auto-detection from filename. */
-        this.editorLanguage = computed(() => {
-            const picked = this.editorLanguageValue()?.value;
-            return !picked || picked === AUTO_LANGUAGE
-                ? detectLanguage(this.editorFilenameValue() ?? '')
-                : picked;
-        }, ...(ngDevMode ? [{ debugName: "editorLanguage" }] : /* istanbul ignore next */ []));
-        this.editorLanguages = EDITOR_LANGUAGES;
-        this.submitButtonTitle = computed(() => this.mo?.id ? gettext('Update configuration') : gettext('Add configuration'), ...(ngDevMode ? [{ debugName: "submitButtonTitle" }] : /* istanbul ignore next */ []));
-        this.form.controls.uploadChoice.valueChanges.pipe(takeUntilDestroyed()).subscribe(choice => {
-            const ctrl = this.form.controls.editorFilename;
-            if (choice === 'editInline') {
-                ctrl.addValidators(Validators.required);
-            }
-            else {
-                ctrl.removeValidators(Validators.required);
-            }
-            ctrl.updateValueAndValidity();
-        });
-        // Drawer can be closed externally (Escape, navigation, programmatic close).
-        // Make sure the result promise is always settled, otherwise callers awaiting it hang.
-        this.bottomDrawerRef.onClosed$.pipe(takeUntilDestroyed()).subscribe(() => {
-            if (!this.settled) {
-                this.settled = true;
-                this._cancel('Drawer closed');
-            }
-        });
-    }
-    async ngOnInit() {
-        this.configs = await this.repositoryService.listRepositoryEntries(RepositoryType.CONFIGURATION);
-        this.setPipe('');
-        if (this.mo?.id) {
-            this.configurationTypeMO = this.mo;
-            const hasExternalUrl = !!this.binary?.url && !this.inventoryBinaryService.getIdFromUrl(this.binary.url);
-            if (hasExternalUrl) {
-                this.isExternalUrl.set(true);
-                this.form.patchValue({
-                    version: this.version ?? '',
-                    deviceType: this.deviceType ?? '',
-                    description: this.description ?? '',
-                    uploadChoice: 'uploadUrl'
-                });
-            }
-            else {
-                const patchValues = {
-                    version: this.version ?? '',
-                    deviceType: this.deviceType ?? '',
-                    description: this.description ?? '',
-                    uploadChoice: 'editInline'
-                };
-                if (this.binary?.file) {
-                    this.existingBinary = this.binary.file;
-                    if (await isBinaryFile(this.binary.file)) {
-                        patchValues.uploadChoice = 'uploadBinary';
-                    }
-                    else {
-                        patchValues.editorContent = await this.binary.file.text();
-                        patchValues.editorFilename = this.binary.file.name;
-                    }
-                }
-                this.form.patchValue(patchValues);
-            }
-            this.form.markAsDirty();
-        }
-        this.cdr.markForCheck();
-    }
-    cancel() {
-        this.settled = true;
-        this._cancel('User canceled');
-        this.bottomDrawerRef.close();
-    }
-    setPipe(filterStr) {
-        this.pattern.set(filterStr);
-        this.filterPipe = pipe(map(data => uniqBy(data, 'configurationType')), map(data => data.filter(mo => mo.configurationType &&
-            mo.configurationType.toLowerCase().indexOf(filterStr.toLowerCase()) > -1)));
-    }
-    onUploadChoiceChange(choice) {
-        this.form.controls.uploadChoice.setValue(choice);
-        this.form.markAsDirty();
-    }
-    onFileBinaryChange(file) {
-        this.binary = { ...this.binary, file };
-        this.form.markAsDirty();
-        this.cdr.markForCheck();
-    }
-    onFileUrlChange(url) {
-        this.binary = { ...this.binary, url };
-        this.form.markAsDirty();
-        this.cdr.markForCheck();
-    }
-    onTextFilePicked({ name, content }) {
-        this.form.patchValue({
-            uploadChoice: 'editInline',
-            editorFilename: name,
-            editorContent: content
-        });
-        this.form.markAsDirty();
-        this.cdr.markForCheck();
-    }
-    get isSaveDisabled() {
-        if (this.saving() || !this.form.valid || this.form.pristine) {
-            return true;
-        }
-        const { uploadChoice, editorFilename, editorContent } = this.form.value;
-        if (uploadChoice === 'uploadBinary') {
-            return !this.binary?.file;
-        }
-        if (uploadChoice === 'uploadUrl') {
-            return !this.binary?.url?.trim();
-        }
-        if (uploadChoice === 'editInline') {
-            return !editorFilename?.trim() || !editorContent;
-        }
-        return false;
-    }
-    async save() {
-        if (this.isSaveDisabled) {
-            return;
-        }
-        try {
-            this.saving.set(true);
-            const { version, deviceType, description, uploadChoice, editorFilename, editorContent } = this.form.value;
-            let binary = { ...this.binary };
-            if (uploadChoice === 'uploadUrl') {
-                binary = { url: this.binary?.url };
-            }
-            else if (uploadChoice === 'editInline') {
-                binary = {
-                    file: new File([editorContent], editorFilename, { type: mimeForFilename(editorFilename) })
-                };
-            }
-            else if (this.existingBinary === this.binary?.file) {
-                binary = { ...this.binary, file: undefined };
-            }
-            await this.repositoryService.create({
-                version,
-                description,
-                binary,
-                deviceType,
-                configurationType: this.configurationTypeMO?.configurationType
-            }, RepositoryType.CONFIGURATION, this.mo);
-            this.alert.success(this.mo?.id ? gettext('Configuration updated.') : gettext('Configuration created.'));
-            this.settled = true;
-            this._save();
-            this.bottomDrawerRef.close();
-        }
-        catch (ex) {
-            // Keep the drawer open so the user can fix and retry.
-            // Do NOT settle the result promise here.
-            this.alert.addServerFailure(ex);
-        }
-        finally {
-            this.saving.set(false);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ConfigurationDetailComponent, isStandalone: true, selector: "c8y-configuration-detail", inputs: { version: "version", description: "description", binary: "binary", deviceType: "deviceType", mo: "mo" }, host: { classAttribute: "d-contents" }, ngImport: i0, template: "<div class=\"card-header j-c-center separator flex-no-shrink p-24\">\n  <i\n    class=\"m-r-8\"\n    [c8yIcon]=\"'cogs'\"\n    aria-hidden=\"true\"\n  ></i>\n  <h4 id=\"drawerTitle\">\n    @if (mo?.id) {\n      {{ 'Update configuration' | translate }}\n    } @else {\n      {{ 'Add configuration' | translate }}\n    }\n  </h4>\n</div>\n\n<form\n  class=\"d-contents\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"save()\"\n>\n  <div\n    class=\"card-body inner-scroll p-24\"\n    [class.d-col]=\"form.value.uploadChoice === 'editInline'\"\n  >\n    <div class=\"row\">\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confVersion\"\n          translate\n        >\n          Name\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confVersion\"\n          placeholder=\"{{ 'e.g.' | translate }} hosts\"\n          aria-required=\"true\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"version\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDeviceType\"\n          translate\n        >\n          Device type\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDeviceType\"\n          placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"deviceType\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDescription\"\n          translate\n        >\n          Description\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDescription\"\n          placeholder=\"{{ 'e.g.' | translate }} Host configuration\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"description\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label translate>Configuration type</label>\n        <c8y-typeahead\n          placeholder=\"{{ 'e.g.' | translate }} ssh\"\n          name=\"confType\"\n          data-cy=\"conf-detail--configuration-type\"\n          [ngModel]=\"configurationTypeMO\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"configurationTypeMO = $event\"\n          maxlength=\"254\"\n          (onSearch)=\"setPipe($event)\"\n          displayProperty=\"configurationType\"\n        >\n          @let patternStr = pattern();\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n            (click)=\"configurationTypeMO = config; setPipe('')\"\n            [active]=\"configurationTypeMO === config\"\n          >\n            <c8y-highlight\n              [text]=\"config.configurationType || '--'\"\n              [pattern]=\"patternStr\"\n            ></c8y-highlight>\n          </c8y-li>\n          <ng-template #notFoundTemplate>\n            @if (patternStr.length > 0) {\n              <c8y-li class=\"bg-level-2 p-8\">\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            }\n          </ng-template>\n        </c8y-typeahead>\n      </c8y-form-group>\n    </div>\n\n    <fieldset\n      class=\"d-col\"\n      [class.flex-grow]=\"form.value.uploadChoice === 'editInline'\"\n      [class.min-height-0]=\"form.value.uploadChoice === 'editInline'\"\n    >\n      <legend\n        class=\"legend form-block m-t-40\"\n        translate\n      >\n        Configuration file\n      </legend>\n\n      @if (isExternalUrl()) {\n        <p\n          class=\"text-muted m-b-8\"\n          translate\n        >\n          Content is sourced from a remote URL and cannot be edited inline.\n        </p>\n        <c8y-form-group>\n          <label\n            for=\"confFileUrl\"\n            translate\n          >\n            File URL\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"confFileUrl\"\n            placeholder=\"https://...\"\n            type=\"url\"\n            autocomplete=\"off\"\n            [ngModel]=\"binary.url\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"binary = { url: $event }; form.markAsDirty()\"\n          />\n        </c8y-form-group>\n      } @else {\n        <c8y-file-picker\n          [maxAllowedFiles]=\"1\"\n          [allowedUploadChoices]=\"['uploadBinary', 'uploadUrl', 'editInline']\"\n          [uploadChoice]=\"form.controls.uploadChoice.value\"\n          (uploadChoiceChange)=\"onUploadChoiceChange($event)\"\n          [fileUrl]=\"binary.url\"\n          (fileUrlChange)=\"onFileUrlChange($event)\"\n          [fileBinary]=\"binary.file\"\n          (fileBinaryChange)=\"onFileBinaryChange($event)\"\n          (textFilePicked)=\"onTextFilePicked($event)\"\n          [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n        >\n          <ng-container c8yInlineEditor>\n            <div class=\"row\">\n              <c8y-form-group class=\"col-sm-9\">\n                <label\n                  for=\"confEditorFilename\"\n                  translate\n                >\n                  Filename\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"confEditorFilename\"\n                  placeholder=\"config.json\"\n                  aria-required=\"true\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  formControlName=\"editorFilename\"\n                />\n              </c8y-form-group>\n              <c8y-form-group class=\"col-sm-3\">\n                <label\n                  for=\"confEditorLanguage\"\n                  translate\n                >\n                  Language\n                </label>\n                <c8y-select\n                  aria-label=\"{{ 'Editor language' | translate }}\"\n                  id=\"confEditorLanguage\"\n                  [items]=\"editorLanguages\"\n                  formControlName=\"editorLanguage\"\n                ></c8y-select>\n              </c8y-form-group>\n            </div>\n            <c8y-form-group class=\"d-col flex-grow min-height-0 m-b-0\">\n              <label\n                for=\"confEditorContent\"\n                translate\n              >\n                Content\n              </label>\n              <c8y-editor\n                class=\"flex-grow\"\n                style=\"min-height: 95px\"\n                id=\"confEditorContent\"\n                formControlName=\"editorContent\"\n                monacoEditorMarkerValidator\n                [editorOptions]=\"{ language: editorLanguage() }\"\n              ></c8y-editor>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n          </ng-container>\n        </c8y-file-picker>\n      }\n    </fieldset>\n  </div>\n\n  <div class=\"card-footer j-c-between separator flex-no-shrink p-24\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      [disabled]=\"saving()\"\n    >\n      <span translate>Cancel</span>\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [class.btn-pending]=\"saving()\"\n      [title]=\"submitButtonTitle() | translate\"\n      type=\"submit\"\n      [disabled]=\"isSaveDisabled\"\n    >\n      {{ submitButtonTitle() | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "directive", type: ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForLoadingLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount", "c8yForChange", "c8yForLoadMoreComponent"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: FilePickerComponent, selector: "c8y-file-picker", inputs: ["maxAllowedFiles", "uploadChoice", "allowedUploadChoices", "fileUrl", "fileBinary", "config", "filePickerIndex", "fileUrlPopover", "editInlineConfirmTitle", "editInlineConfirmMessage"], outputs: ["onFilesPicked", "uploadChoiceChange", "fileBinaryChange", "fileUrlChange", "textFilePicked"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ConfigurationDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'c8y-configuration-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-contents' }, imports: [
-                        ReactiveFormsModule,
-                        FormsModule,
-                        IconDirective,
-                        C8yTranslateDirective,
-                        FormGroupComponent,
-                        TypeaheadComponent,
-                        ForOfDirective,
-                        ListItemComponent,
-                        HighlightComponent,
-                        FilePickerComponent,
-                        NgClass,
-                        C8yTranslatePipe,
-                        EditorComponent,
-                        MonacoEditorMarkerValidatorDirective,
-                        MessagesComponent,
-                        RequiredInputPlaceholderDirective,
-                        SelectComponent
-                    ], template: "<div class=\"card-header j-c-center separator flex-no-shrink p-24\">\n  <i\n    class=\"m-r-8\"\n    [c8yIcon]=\"'cogs'\"\n    aria-hidden=\"true\"\n  ></i>\n  <h4 id=\"drawerTitle\">\n    @if (mo?.id) {\n      {{ 'Update configuration' | translate }}\n    } @else {\n      {{ 'Add configuration' | translate }}\n    }\n  </h4>\n</div>\n\n<form\n  class=\"d-contents\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"save()\"\n>\n  <div\n    class=\"card-body inner-scroll p-24\"\n    [class.d-col]=\"form.value.uploadChoice === 'editInline'\"\n  >\n    <div class=\"row\">\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confVersion\"\n          translate\n        >\n          Name\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confVersion\"\n          placeholder=\"{{ 'e.g.' | translate }} hosts\"\n          aria-required=\"true\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"version\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDeviceType\"\n          translate\n        >\n          Device type\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDeviceType\"\n          placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"deviceType\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label\n          for=\"confDescription\"\n          translate\n        >\n          Description\n        </label>\n        <input\n          class=\"form-control\"\n          id=\"confDescription\"\n          placeholder=\"{{ 'e.g.' | translate }} Host configuration\"\n          type=\"text\"\n          autocomplete=\"off\"\n          formControlName=\"description\"\n        />\n      </c8y-form-group>\n\n      <c8y-form-group class=\"col-sm-3\">\n        <label translate>Configuration type</label>\n        <c8y-typeahead\n          placeholder=\"{{ 'e.g.' | translate }} ssh\"\n          name=\"confType\"\n          data-cy=\"conf-detail--configuration-type\"\n          [ngModel]=\"configurationTypeMO\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"configurationTypeMO = $event\"\n          maxlength=\"254\"\n          (onSearch)=\"setPipe($event)\"\n          displayProperty=\"configurationType\"\n        >\n          @let patternStr = pattern();\n          <c8y-li\n            class=\"p-l-8 p-r-8 c8y-list__item--link\"\n            *c8yFor=\"let config of configs; pipe: filterPipe; notFound: notFoundTemplate\"\n            (click)=\"configurationTypeMO = config; setPipe('')\"\n            [active]=\"configurationTypeMO === config\"\n          >\n            <c8y-highlight\n              [text]=\"config.configurationType || '--'\"\n              [pattern]=\"patternStr\"\n            ></c8y-highlight>\n          </c8y-li>\n          <ng-template #notFoundTemplate>\n            @if (patternStr.length > 0) {\n              <c8y-li class=\"bg-level-2 p-8\">\n                <span translate>No match found.</span>\n                <button\n                  class=\"btn btn-primary btn-xs m-l-8\"\n                  title=\"{{ 'Add new`configuration type`' | translate }}\"\n                  type=\"button\"\n                  translate\n                >\n                  Add new`configuration type`\n                </button>\n              </c8y-li>\n            }\n          </ng-template>\n        </c8y-typeahead>\n      </c8y-form-group>\n    </div>\n\n    <fieldset\n      class=\"d-col\"\n      [class.flex-grow]=\"form.value.uploadChoice === 'editInline'\"\n      [class.min-height-0]=\"form.value.uploadChoice === 'editInline'\"\n    >\n      <legend\n        class=\"legend form-block m-t-40\"\n        translate\n      >\n        Configuration file\n      </legend>\n\n      @if (isExternalUrl()) {\n        <p\n          class=\"text-muted m-b-8\"\n          translate\n        >\n          Content is sourced from a remote URL and cannot be edited inline.\n        </p>\n        <c8y-form-group>\n          <label\n            for=\"confFileUrl\"\n            translate\n          >\n            File URL\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"confFileUrl\"\n            placeholder=\"https://...\"\n            type=\"url\"\n            autocomplete=\"off\"\n            [ngModel]=\"binary.url\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"binary = { url: $event }; form.markAsDirty()\"\n          />\n        </c8y-form-group>\n      } @else {\n        <c8y-file-picker\n          [maxAllowedFiles]=\"1\"\n          [allowedUploadChoices]=\"['uploadBinary', 'uploadUrl', 'editInline']\"\n          [uploadChoice]=\"form.controls.uploadChoice.value\"\n          (uploadChoiceChange)=\"onUploadChoiceChange($event)\"\n          [fileUrl]=\"binary.url\"\n          (fileUrlChange)=\"onFileUrlChange($event)\"\n          [fileBinary]=\"binary.file\"\n          (fileBinaryChange)=\"onFileBinaryChange($event)\"\n          (textFilePicked)=\"onTextFilePicked($event)\"\n          [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n        >\n          <ng-container c8yInlineEditor>\n            <div class=\"row\">\n              <c8y-form-group class=\"col-sm-9\">\n                <label\n                  for=\"confEditorFilename\"\n                  translate\n                >\n                  Filename\n                </label>\n                <input\n                  class=\"form-control\"\n                  id=\"confEditorFilename\"\n                  placeholder=\"config.json\"\n                  aria-required=\"true\"\n                  type=\"text\"\n                  autocomplete=\"off\"\n                  formControlName=\"editorFilename\"\n                />\n              </c8y-form-group>\n              <c8y-form-group class=\"col-sm-3\">\n                <label\n                  for=\"confEditorLanguage\"\n                  translate\n                >\n                  Language\n                </label>\n                <c8y-select\n                  aria-label=\"{{ 'Editor language' | translate }}\"\n                  id=\"confEditorLanguage\"\n                  [items]=\"editorLanguages\"\n                  formControlName=\"editorLanguage\"\n                ></c8y-select>\n              </c8y-form-group>\n            </div>\n            <c8y-form-group class=\"d-col flex-grow min-height-0 m-b-0\">\n              <label\n                for=\"confEditorContent\"\n                translate\n              >\n                Content\n              </label>\n              <c8y-editor\n                class=\"flex-grow\"\n                style=\"min-height: 95px\"\n                id=\"confEditorContent\"\n                formControlName=\"editorContent\"\n                monacoEditorMarkerValidator\n                [editorOptions]=\"{ language: editorLanguage() }\"\n              ></c8y-editor>\n              <c8y-messages></c8y-messages>\n            </c8y-form-group>\n          </ng-container>\n        </c8y-file-picker>\n      }\n    </fieldset>\n  </div>\n\n  <div class=\"card-footer j-c-between separator flex-no-shrink p-24\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      (click)=\"cancel()\"\n      [disabled]=\"saving()\"\n    >\n      <span translate>Cancel</span>\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      [class.btn-pending]=\"saving()\"\n      [title]=\"submitButtonTitle() | translate\"\n      type=\"submit\"\n      [disabled]=\"isSaveDisabled\"\n    >\n      {{ submitButtonTitle() | translate }}\n    </button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [], propDecorators: { version: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], binary: [{
-                type: Input
-            }], deviceType: [{
-                type: Input
-            }], mo: [{
-                type: Input
-            }] } });
-
 class ConfigurationListComponent {
     constructor() {
         this.alert = inject(AlertService);