@c8y/ngx-components 1024.2.4 → 1024.8.3

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

@@ -1,22 +1,22 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Pipe, inject, ChangeDetectorRef, signal, computed, Input, ChangeDetectionStrategy, Output, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, signal, computed, inject, DestroyRef, Component, Pipe, ChangeDetectorRef, Input, ChangeDetectionStrategy, Output, ViewChild, NgModule } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 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, 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 { IconDirective, SelectComponent, C8yTranslatePipe, BottomDrawerRef, AlertService, ValidationPattern, isBinaryFile, C8yTranslateDirective, FormGroupComponent, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, FilePickerComponent, MessagesComponent, RequiredInputPlaceholderDirective, 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 { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
 import * as i3 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 i1$1 from '@angular/forms';
-import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, Validators, FormsModule } from '@angular/forms';
 import { OperationDetailsComponent, OperationDetailsModule } from '@c8y/ngx-components/operations/operation-details';
 import { has, uniqBy } from 'lodash-es';
 import { saveAs } from 'file-saver';
 import { map } from 'rxjs/operators';
-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';
@@ -67,6 +67,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i2.BottomDrawerService }] });
 
+/** Shared language list for Monaco-based configuration editors (no "Auto" option). */
+const EDITOR_LANGUAGES = [
+    { 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') }
+];
+
+// Device text configs are plain text by default — put plaintext first in the picker.
+const PLAINTEXT_OPTION = EDITOR_LANGUAGES[EDITOR_LANGUAGES.length - 1];
+const TEXT_EDITOR_LANGUAGES = [
+    PLAINTEXT_OPTION,
+    ...EDITOR_LANGUAGES.slice(0, -1)
+];
 class TextBasedConfigurationComponent {
     constructor(route, alertService, repositoryService, deviceConfigurationService, inventoryService) {
         this.route = route;
@@ -74,7 +95,38 @@ class TextBasedConfigurationComponent {
         this.repositoryService = repositoryService;
         this.deviceConfigurationService = deviceConfigurationService;
         this.inventoryService = inventoryService;
-        this.reloadingConfig = false;
+        this.reloadingConfig = signal(false, ...(ngDevMode ? [{ debugName: "reloadingConfig" }] : /* istanbul ignore next */ []));
+        this.latestOperation = signal(undefined, ...(ngDevMode ? [{ debugName: "latestOperation" }] : /* istanbul ignore next */ []));
+        this.form = new FormGroup({
+            config: new FormControl(''),
+            language: new FormControl(PLAINTEXT_OPTION)
+        });
+        this.editorLanguages = TEXT_EDITOR_LANGUAGES;
+        this.editorLanguageValue = toSignal(this.form.controls.language.valueChanges, {
+            initialValue: PLAINTEXT_OPTION
+        });
+        this.editorLanguage = computed(() => this.editorLanguageValue()?.value ?? 'plaintext', ...(ngDevMode ? [{ debugName: "editorLanguage" }] : /* istanbul ignore next */ []));
+        this.savingConfig = computed(() => {
+            const operation = this.latestOperation();
+            return operation
+                ? !!operation.c8y_Configuration &&
+                    (operation.status === OperationStatus.PENDING ||
+                        operation.status === OperationStatus.EXECUTING)
+                : false;
+        }, ...(ngDevMode ? [{ debugName: "savingConfig" }] : /* istanbul ignore next */ []));
+        // Read-only is driven through editorOptions (not the form control's disabled state) because
+        // the editor only applies the disabled state at creation time. computed() keeps the reference
+        // stable until read-only actually changes, so the editor does not re-run updateOptions() needlessly.
+        this.editorOptions = computed(() => ({
+            language: this.editorLanguage(),
+            readOnly: this.reloadingConfig() || this.savingConfig(),
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false
+        }), ...(ngDevMode ? [{ debugName: "editorOptions" }] : /* istanbul ignore next */ []));
+        this.destroyRef = inject(DestroyRef);
+    }
+    get configControl() {
+        return this.form.controls.config;
     }
     async ngOnInit() {
         await this.load();
@@ -86,35 +138,30 @@ class TextBasedConfigurationComponent {
         this.showTextBasedConfigReload = this.deviceConfigurationService.hasAnySupportedOperation(this.device, [DeviceConfigurationOperation.SEND_CONFIG]);
         this.showTextBasedConfigSave = this.deviceConfigurationService.hasAnySupportedOperation(this.device, [DeviceConfigurationOperation.CONFIG]);
         if (this.device.c8y_Configuration && this.device.c8y_Configuration.config) {
-            this.config = this.device.c8y_Configuration.config;
+            this.configControl.setValue(this.device.c8y_Configuration.config);
         }
     }
     async loadOperation() {
         const operation = await this.repositoryService.getLastConfigUpdateOperation(this.device.id);
         if (operation !== null) {
-            this.reloadingConfig =
-                !!operation.c8y_SendConfiguration &&
-                    (operation.status === OperationStatus.PENDING ||
-                        operation.status === OperationStatus.EXECUTING);
-            this.repositoryService.observeOperation(operation).subscribe(operationUpdate => {
+            this.reloadingConfig.set(!!operation.c8y_SendConfiguration &&
+                (operation.status === OperationStatus.PENDING ||
+                    operation.status === OperationStatus.EXECUTING));
+            this.repositoryService
+                .observeOperation(operation)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(operationUpdate => {
                 if (operationUpdate.status === OperationStatus.PENDING ||
                     operationUpdate.status === OperationStatus.EXECUTING) {
-                    this.latestOperation = operationUpdate;
+                    this.latestOperation.set(operationUpdate);
                 }
                 else
-                    this.latestOperation = null;
+                    this.latestOperation.set(null);
             });
         }
     }
-    get savingConfig() {
-        return this.latestOperation
-            ? !!this.latestOperation.c8y_Configuration &&
-                (this.latestOperation.status === OperationStatus.PENDING ||
-                    this.latestOperation.status === OperationStatus.EXECUTING)
-            : false;
-    }
     async reloadConfiguration() {
-        this.reloadingConfig = true;
+        this.reloadingConfig.set(true);
         const operationCfg = await this.repositoryService.createTextBasedConfigurationReloadOperation(this.device);
         try {
             this.repositoryService.createObservedOperation(operationCfg).subscribe(operationUpdate => this.onOperationReloadSuccess(operationUpdate), operationUpdate => this.onOperationReloadError(operationUpdate), () => this.onOperationReloadComplete());
@@ -133,31 +180,31 @@ class TextBasedConfigurationComponent {
         }
     }
     onOperationReloadSuccess(operationUpdate) {
-        this.latestOperation = operationUpdate;
+        this.latestOperation.set(operationUpdate);
         if (operationUpdate.status === OperationStatus.PENDING) {
             this.alertService.success(gettext('Configuration will be reloaded.'));
         }
     }
     onOperationReloadError(operationUpdate) {
-        this.latestOperation = operationUpdate;
-        this.reloadingConfig = false;
+        this.latestOperation.set(operationUpdate);
+        this.reloadingConfig.set(false);
     }
     async onOperationReloadComplete() {
         await this.loadDevice();
-        this.config = this.device.c8y_Configuration.config;
-        this.reloadingConfig = false;
+        this.configControl.setValue(this.device.c8y_Configuration.config);
+        this.reloadingConfig.set(false);
     }
     onOperationUpdateSuccess(operationUpdate) {
-        this.latestOperation = operationUpdate;
+        this.latestOperation.set(operationUpdate);
         if (operationUpdate.status === OperationStatus.PENDING) {
             this.alertService.success(gettext('Configuration will be updated.'));
         }
     }
     onOperationUpdateError(operationUpdate) {
-        this.latestOperation = operationUpdate;
+        this.latestOperation.set(operationUpdate);
     }
     onOperationUpdateComplete() {
-        this.device.c8y_Configuration.config = this.config;
+        this.device.c8y_Configuration.config = this.configControl.value;
     }
     async loadDevice() {
         this.device = (await this.inventoryService.detail(this.device.id, {
@@ -165,11 +212,19 @@ class TextBasedConfigurationComponent {
         })).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: 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" }] }); }
+    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\n  class=\"d-flex d-col fit-h min-height-0\"\n  [formGroup]=\"form\"\n>\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50 d-flex a-i-center\">\n      <label\n        class=\"m-r-8 flex-no-shrink\"\n        for=\"textCfgEditorLanguage\"\n        translate\n      >\n        Language\n      </label>\n      <c8y-select\n        aria-label=\"{{ 'Editor language' | translate }}\"\n        id=\"textCfgEditorLanguage\"\n        [items]=\"editorLanguages\"\n        formControlName=\"language\"\n      ></c8y-select>\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=\"p-relative flex-grow min-height-0\">\n    <c8y-editor\n      class=\"p-absolute top-0 left-0 fit-w fit-h\"\n      formControlName=\"config\"\n      [editorOptions]=\"editorOptions()\"\n    ></c8y-editor>\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 flex-no-shrink fit-w separator\">\n      <button\n        class=\"btn btn-primary\"\n        id=\"send-config-btn\"\n        type=\"button\"\n        (click)=\"updateConfiguration(configControl.value)\"\n        [disabled]=\"reloadingConfig() || savingConfig() || !configControl.value\"\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: ReactiveFormsModule }, { 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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "component", type: OperationDetailsComponent, selector: "c8y-operation-details", inputs: ["operation"] }, { 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" }] }); }
 }
 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" }]
+            args: [{ selector: 'c8y-text-based-configuration', imports: [
+                        IconDirective,
+                        NgClass,
+                        ReactiveFormsModule,
+                        EditorComponent,
+                        OperationDetailsComponent,
+                        C8yTranslatePipe,
+                        SelectComponent
+                    ], template: "<div\n  class=\"d-flex d-col fit-h min-height-0\"\n  [formGroup]=\"form\"\n>\n  <fieldset class=\"card-block bg-level-1 fit-w\">\n    <div class=\"content-flex-50 d-flex a-i-center\">\n      <label\n        class=\"m-r-8 flex-no-shrink\"\n        for=\"textCfgEditorLanguage\"\n        translate\n      >\n        Language\n      </label>\n      <c8y-select\n        aria-label=\"{{ 'Editor language' | translate }}\"\n        id=\"textCfgEditorLanguage\"\n        [items]=\"editorLanguages\"\n        formControlName=\"language\"\n      ></c8y-select>\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=\"p-relative flex-grow min-height-0\">\n    <c8y-editor\n      class=\"p-absolute top-0 left-0 fit-w fit-h\"\n      formControlName=\"config\"\n      [editorOptions]=\"editorOptions()\"\n    ></c8y-editor>\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 flex-no-shrink fit-w separator\">\n      <button\n        class=\"btn btn-primary\"\n        id=\"send-config-btn\"\n        type=\"button\"\n        (click)=\"updateConfiguration(configControl.value)\"\n        [disabled]=\"reloadingConfig() || savingConfig() || !configControl.value\"\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: i3$1.InventoryService }] });
 
 class DeviceConfigurationGuard {
@@ -257,20 +312,10 @@ function mimeForFilename(filename) {
 }
 /** 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') }
-];
+const AUTO_LANGUAGE_OPTION = {
+    value: AUTO_LANGUAGE,
+    label: gettext('Auto (from filename)')
+};
 class ConfigurationDetailComponent {
     constructor() {
         this.repositoryService = inject(RepositoryService);
@@ -298,7 +343,7 @@ class ConfigurationDetailComponent {
             editorFilename: new FormControl('', [
                 Validators.pattern(ValidationPattern.rules.noWhiteSpaceOnly.pattern)
             ]),
-            editorLanguage: new FormControl(EDITOR_LANGUAGES[0]),
+            editorLanguage: new FormControl(AUTO_LANGUAGE_OPTION),
             editorContent: new FormControl('')
         });
         this.configurationTypeMO = {};
@@ -321,7 +366,7 @@ class ConfigurationDetailComponent {
             initialValue: ''
         });
         this.editorLanguageValue = toSignal(this.form.controls.editorLanguage.valueChanges, {
-            initialValue: EDITOR_LANGUAGES[0]
+            initialValue: AUTO_LANGUAGE_OPTION
         });
         /** User's manual pick (when not "auto") wins over auto-detection from filename. */
         this.editorLanguage = computed(() => {
@@ -330,7 +375,7 @@ class ConfigurationDetailComponent {
                 ? detectLanguage(this.editorFilenameValue() ?? '')
                 : picked;
         }, ...(ngDevMode ? [{ debugName: "editorLanguage" }] : /* istanbul ignore next */ []));
-        this.editorLanguages = EDITOR_LANGUAGES;
+        this.editorLanguages = [AUTO_LANGUAGE_OPTION, ...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;