@c8y/ngx-components 1023.92.0 → 1023.96.0

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

@@ -1,24 +1,26 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Pipe, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, Component, Pipe, Input, Output, ViewChild, NgModule, inject, ChangeDetectorRef, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/router';
 import * as i4 from '@c8y/client';
-import { OperationStatus } 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, ValidationPattern, TypeaheadComponent, ForOfDirective, ListItemComponent, HighlightComponent, FilePickerComponent, BuiltInActionType, Status, TitleComponent, BreadcrumbComponent, BreadcrumbItemComponent, HelpComponent, DataGridComponent, EmptyStateContextDirective, GuideDocsComponent, GuideHrefDirective, NavigatorNode, hookNavigator, CoreModule, FormsModule as FormsModule$1 } 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 * as i3 from '@c8y/ngx-components/repository/shared';
-import { DeviceConfigurationOperation, RepositoryType, SharedRepositoryModule, RepositoryItemNameGridColumn, DescriptionGridColumn, FileGridColumn, DeviceTypeGridColumn, TypeGridColumn } from '@c8y/ngx-components/repository/shared';
+import { DeviceConfigurationOperation, RepositoryType, SharedRepositoryModule, RepositoryService, RepositoryItemNameGridColumn, DescriptionGridColumn, FileGridColumn, DeviceTypeGridColumn, TypeGridColumn } from '@c8y/ngx-components/repository/shared';
 import { NgIf, NgClass, NgFor, AsyncPipe } from '@angular/common';
 import * as i4$1 from '@angular/forms';
-import { FormsModule } 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, isUndefined } from 'lodash-es';
+import { has, cloneDeep, uniqBy } from 'lodash-es';
 import { saveAs } from 'file-saver';
-import * as i3$1 from 'ngx-bootstrap/modal';
+import * as i1$1 from 'ngx-bootstrap/modal';
 import { map } from 'rxjs/operators';
-import * as i1$1 from 'ngx-bootstrap/tabs';
+import * as i1$2 from 'ngx-bootstrap/tabs';
 import { TabsetComponent, TabDirective, TabsModule } from 'ngx-bootstrap/tabs';
-import * as i4$2 from '@ngx-translate/core';
+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';
 
 class DeviceConfigurationService {
@@ -232,7 +234,7 @@ class SaveToRepositoryComponent {
         this._cancel();
         this.modal.hide();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SaveToRepositoryComponent, deps: [{ token: i3$1.BsModalRef }, { token: i2.AlertService }, { token: i3.RepositoryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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],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]),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: "20.3.25", ngImport: i0, type: SaveToRepositoryComponent, decorators: [{
@@ -245,7 +247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         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: i3$1.BsModalRef }, { type: i2.AlertService }, { type: i3.RepositoryService }] });
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }, { type: i2.AlertService }, { type: i3.RepositoryService }] });
 
 class SourceCodePreviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SourceCodePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -407,7 +409,7 @@ class ConfigurationPreviewComponent {
             this.deviceConfigurationService.updateConfigurations();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationPreviewComponent, deps: [{ token: DeviceConfigurationService }, { token: i2.OperationRealtimeService }, { token: i3$1.BsModalService }, { token: i4.UserService }, { token: i2.AppStateService }, { token: i3.RepositoryService }, { token: i4.OperationService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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: "20.3.25", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationPreviewComponent, decorators: [{
@@ -421,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         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: i3$1.BsModalService }, { type: i4.UserService }, { type: i2.AppStateService }, { type: i3.RepositoryService }, { type: i4.OperationService }, { type: i2.AlertService }], propDecorators: { device: [{
+        }], 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: [{
                 type: Input
             }], configurationType: [{
                 type: Input
@@ -607,7 +609,7 @@ class ConfigurationRepositoryDeviceTabModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationRepositoryDeviceTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationRepositoryDeviceTabModule, imports: [SharedRepositoryModule,
-            OperationDetailsModule, i1$1.TabsModule, DeviceConfigurationComponent,
+            OperationDetailsModule, i1$2.TabsModule, DeviceConfigurationComponent,
             DeviceConfigurationListComponent,
             ConfigurationPreviewComponent,
             ConfigurationFilterPipe,
@@ -642,19 +644,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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(repositoryService, bsModalRef, alert) {
-        this.repositoryService = repositoryService;
-        this.bsModalRef = bsModalRef;
-        this.alert = alert;
-        this.binary = {
-            file: undefined,
-            url: undefined
-        };
-        this.pattern = '';
+    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.saving = false;
-        this.uploadChoice = 'uploadBinary';
+        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" }] : []));
+        this.pattern = signal('', ...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.isExternalUrl = signal(false, ...(ngDevMode ? [{ debugName: "isExternalUrl" }] : []));
+        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
@@ -665,58 +743,146 @@ class ConfigurationDetailComponent {
             this._save = resolve;
             this._cancel = reject;
         });
-        this.ValidationPattern = ValidationPattern;
+        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" }] : []));
+        this.editorLanguages = EDITOR_LANGUAGES;
+        this.submitButtonTitle = computed(() => this.mo?.id ? gettext('Update configuration') : gettext('Add configuration'), ...(ngDevMode ? [{ debugName: "submitButtonTitle" }] : []));
+        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);
-        if (this.mo) {
-            this.uploadChoice = this.binary.file ? 'uploadBinary' : 'uploadUrl';
-            this.existingBinary = this.binary.file;
+        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.setPipe('');
-        this.submitButtonTitle = this.mo.id
-            ? gettext('Update configuration')
-            : gettext('Add configuration');
+        this.cdr.markForCheck();
     }
     cancel() {
-        this.bsModalRef.hide();
-        this._cancel();
+        this.settled = true;
+        this._cancel('User canceled');
+        this.bottomDrawerRef.close();
     }
     setPipe(filterStr) {
-        this.pattern = filterStr;
-        this.filterPipe = pipe(map(data => uniqBy(data, 'configurationType')), map(data => {
-            return data.filter(mo => mo.configurationType &&
-                mo.configurationType.toLowerCase().indexOf(filterStr.toLowerCase()) > -1);
-        }));
-    }
-    onFile(dropped) {
-        this.configurationForm.form.markAsDirty();
-        if (!isUndefined(dropped.url)) {
-            this.binary = {
-                url: dropped.url
-            };
-            return;
+        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;
         }
-        else if (dropped.droppedFiles) {
-            this.binary = {
-                file: dropped.droppedFiles[0].file
-            };
-            return;
+        const { uploadChoice, editorFilename, editorContent } = this.form.value;
+        if (uploadChoice === 'uploadBinary') {
+            return !this.binary?.file;
         }
-        else {
-            this.binary = {
-                file: undefined,
-                url: undefined
-            };
+        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 = true;
-            const { version, description, binary, deviceType } = this;
-            if (this.existingBinary === this.binary.file) {
-                binary.file = undefined;
+            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,
@@ -725,52 +891,65 @@ class ConfigurationDetailComponent {
                 deviceType,
                 configurationType: this.configurationTypeMO?.configurationType
             }, RepositoryType.CONFIGURATION, this.mo);
-            this.alert.success(this.mo.id ? gettext('Configuration updated.') : gettext('Configuration created.'));
-            this.bsModalRef.hide();
+            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);
-            this._cancel();
         }
         finally {
-            this.saving = false;
+            this.saving.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationDetailComponent, deps: [{ token: i3.RepositoryService }, { token: i3$1.BsModalRef }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ConfigurationDetailComponent, isStandalone: true, selector: "c8y-configuration-detail", viewQueries: [{ propertyName: "configurationForm", first: true, predicate: ["configurationForm"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"viewport-modal\">\n  <div\n    class=\"modal-header dialog-header\"\n    id=\"configurationModalTitle\"\n  >\n    <i [c8yIcon]=\"'cogs'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"mo.id\"\n    >\n      Update configuration\n    </h4>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"!mo.id\"\n    >\n      Add configuration\n    </h4>\n  </div>\n\n  <form\n    class=\"d-contents\"\n    #configurationForm=\"ngForm\"\n    (ngSubmit)=\"configurationForm.form.valid && save()\"\n  >\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <div\n        class=\"modal-body\"\n        id=\"configurationModalDescription\"\n      >\n        <c8y-form-group>\n          <label translate>Name</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} hosts\"\n            name=\"version\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            maxlength=\"254\"\n            [(ngModel)]=\"version\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Device type</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n            name=\"deviceType\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"deviceType\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Description</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g. Host configuration' | translate }} c8y_Linux\"\n            name=\"description\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"description\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Configuration type</label>\n          <c8y-typeahead\n            placeholder=\"{{ 'e.g.' | translate }} ssh\"\n            name=\"confType\"\n            [(ngModel)]=\"configurationTypeMO\"\n            maxlength=\"254\"\n            (onSearch)=\"setPipe($event)\"\n            displayProperty=\"configurationType\"\n          >\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]=\"pattern\"\n              ></c8y-highlight>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li\n                class=\"bg-level-2 p-8\"\n                *ngIf=\"pattern.length > 0\"\n              >\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            </ng-template>\n          </c8y-typeahead>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div\n            class=\"legend form-block m-t-40\"\n            translate\n          >\n            Configuration file\n          </div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [uploadChoice]=\"uploadChoice\"\n            [fileUrl]=\"binary.url\"\n            [fileBinary]=\"binary.file\"\n            [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\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        title=\"{{ submitButtonTitle | translate }}\"\n        type=\"submit\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !configurationForm.valid ||\n          configurationForm.pristine ||\n          (!binary?.url?.trim() && !binary?.file) ||\n          saving\n        \"\n      >\n        {{ submitButtonTitle | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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],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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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]),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: "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"], outputs: ["onFilesPicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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],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: "20.3.25", ngImport: i0, type: ConfigurationDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-configuration-detail', imports: [
+            args: [{ selector: 'c8y-configuration-detail', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'd-contents' }, imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
                         IconDirective,
-                        NgIf,
                         C8yTranslateDirective,
-                        FormsModule,
                         FormGroupComponent,
-                        RequiredInputPlaceholderDirective,
                         TypeaheadComponent,
                         ForOfDirective,
                         ListItemComponent,
                         HighlightComponent,
                         FilePickerComponent,
                         NgClass,
-                        C8yTranslatePipe
-                    ], template: "<div class=\"viewport-modal\">\n  <div\n    class=\"modal-header dialog-header\"\n    id=\"configurationModalTitle\"\n  >\n    <i [c8yIcon]=\"'cogs'\"></i>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"mo.id\"\n    >\n      Update configuration\n    </h4>\n    <h4\n      id=\"modal-title\"\n      translate\n      *ngIf=\"!mo.id\"\n    >\n      Add configuration\n    </h4>\n  </div>\n\n  <form\n    class=\"d-contents\"\n    #configurationForm=\"ngForm\"\n    (ngSubmit)=\"configurationForm.form.valid && save()\"\n  >\n    <div\n      class=\"modal-inner-scroll\"\n      id=\"modal-body\"\n    >\n      <div\n        class=\"modal-body\"\n        id=\"configurationModalDescription\"\n      >\n        <c8y-form-group>\n          <label translate>Name</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} hosts\"\n            name=\"version\"\n            type=\"text\"\n            autocomplete=\"off\"\n            required\n            maxlength=\"254\"\n            [(ngModel)]=\"version\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Device type</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n            name=\"deviceType\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"deviceType\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Description</label>\n          <input\n            class=\"form-control\"\n            placeholder=\"{{ 'e.g. Host configuration' | translate }} c8y_Linux\"\n            name=\"description\"\n            type=\"text\"\n            autocomplete=\"off\"\n            maxlength=\"254\"\n            [(ngModel)]=\"description\"\n            [pattern]=\"ValidationPattern.rules.noWhiteSpaceOnly.pattern\"\n          />\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <label translate>Configuration type</label>\n          <c8y-typeahead\n            placeholder=\"{{ 'e.g.' | translate }} ssh\"\n            name=\"confType\"\n            [(ngModel)]=\"configurationTypeMO\"\n            maxlength=\"254\"\n            (onSearch)=\"setPipe($event)\"\n            displayProperty=\"configurationType\"\n          >\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]=\"pattern\"\n              ></c8y-highlight>\n            </c8y-li>\n            <ng-template #notFoundTemplate>\n              <c8y-li\n                class=\"bg-level-2 p-8\"\n                *ngIf=\"pattern.length > 0\"\n              >\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            </ng-template>\n          </c8y-typeahead>\n        </c8y-form-group>\n\n        <c8y-form-group>\n          <div\n            class=\"legend form-block m-t-40\"\n            translate\n          >\n            Configuration file\n          </div>\n          <c8y-file-picker\n            [maxAllowedFiles]=\"1\"\n            (onFilesPicked)=\"onFile($event)\"\n            [uploadChoice]=\"uploadChoice\"\n            [fileUrl]=\"binary.url\"\n            [fileBinary]=\"binary.file\"\n            [fileUrlPopover]=\"textForConfigurationUrlPopover\"\n          ></c8y-file-picker>\n        </c8y-form-group>\n      </div>\n    </div>\n\n    <div class=\"modal-footer\">\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        title=\"{{ submitButtonTitle | translate }}\"\n        type=\"submit\"\n        [ngClass]=\"{ 'btn-pending': saving }\"\n        [disabled]=\"\n          !configurationForm.valid ||\n          configurationForm.pristine ||\n          (!binary?.url?.trim() && !binary?.file) ||\n          saving\n        \"\n      >\n        {{ submitButtonTitle | translate }}\n      </button>\n    </div>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3.RepositoryService }, { type: i3$1.BsModalRef }, { type: i2.AlertService }], propDecorators: { configurationForm: [{
-                type: ViewChild,
-                args: ['configurationForm', { static: true }]
+                        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(alert, gridService, repositoryService, bsModalService, modalService, translateService, inventoryBinaryService) {
-        this.alert = alert;
-        this.gridService = gridService;
-        this.repositoryService = repositoryService;
-        this.bsModalService = bsModalService;
-        this.modalService = modalService;
-        this.translateService = translateService;
-        this.inventoryBinaryService = inventoryBinaryService;
+    constructor() {
+        this.alert = inject(AlertService);
+        this.gridService = inject(DataGridService);
+        this.repositoryService = inject(RepositoryService);
+        this.bottomDrawerService = inject(BottomDrawerService);
+        this.modalService = inject(ModalService);
+        this.translateService = inject(TranslateService);
+        this.inventoryBinaryService = inject(InventoryBinaryService);
         this.refresh$ = new EventEmitter();
         this.pagination = {
             pageSize: 50,
@@ -868,43 +1047,44 @@ class ConfigurationListComponent {
     }
     async add() {
         try {
-            await this.bsModalService.show(ConfigurationDetailComponent, {
-                class: 'modal-sm',
-                ariaDescribedby: 'configurationModalDescription',
-                ariaLabelledBy: 'configurationModalTitle',
-                ignoreBackdropClick: true,
-                keyboard: false
-            }).content.result;
+            const drawer = this.bottomDrawerService.openDrawer(ConfigurationDetailComponent, {
+                disableClickOutside: true,
+                closeOnNavigation: true
+            });
+            await drawer.instance.result;
             this.refresh$.next();
         }
         catch (ex) {
-            // intended empty
+            // intended empty — user canceled or save failed (error displayed by detail component)
         }
     }
     async edit(configuration) {
-        const fileBinary = await this.repositoryService.getBinaryFile(configuration.url, {
-            allowExternal: false
-        });
+        let fileBinary = null;
+        try {
+            fileBinary = await this.repositoryService.getBinaryFile(configuration.url, {
+                allowExternal: false
+            });
+        }
+        catch {
+            // Binary unavailable — drawer still opens; editor will be empty
+        }
         try {
-            const modal = this.bsModalService.show(ConfigurationDetailComponent, {
-                class: 'modal-sm',
-                ariaDescribedby: 'configurationModalDescription',
-                ariaLabelledBy: 'configurationModalTitle',
-                ignoreBackdropClick: true,
-                keyboard: false,
+            const drawer = this.bottomDrawerService.openDrawer(ConfigurationDetailComponent, {
+                disableClickOutside: true,
+                closeOnNavigation: true,
                 initialState: {
                     version: configuration.name,
                     deviceType: configuration.deviceType,
                     description: configuration.description,
-                    binary: { file: fileBinary, url: configuration.url }
+                    binary: { file: fileBinary, url: configuration.url },
+                    mo: configuration
                 }
-            }).content;
-            modal.mo = configuration;
-            await modal.result;
+            });
+            await drawer.instance.result;
             this.refresh$.next();
         }
         catch (ex) {
-            // intended empty
+            // intended empty — user canceled or save failed (error displayed by detail component)
         }
     }
     isBinaryFile(configuration) {
@@ -948,12 +1128,12 @@ class ConfigurationListComponent {
     trackByName(_index, column) {
         return column.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationListComponent, deps: [{ token: i2.AlertService }, { token: i2.DataGridService }, { token: i3.RepositoryService }, { token: i3$1.BsModalService }, { token: i2.ModalService }, { token: i4$2.TranslateService }, { token: i4.InventoryBinaryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ConfigurationListComponent, isStandalone: true, selector: "c8y-configuration-list", viewQueries: [{ propertyName: "filter", first: true, predicate: FilterInputComponent, descendants: true }], ngImport: i0, template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small>\n    {{ size$ | async }}\n    <span translate>snapshots</span>\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Configurations' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'gears'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      @if (stats?.size === 0) {\n        <p>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Add configuration snapshot' | translate }}\"\n            type=\"button\"\n            (click)=\"add()\"\n          >\n            {{ 'Add configuration snapshot' | translate }}\n          </button>\n        </p>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n            >\n              user documentation</a\n            >.\n          </small>\n        </p>\n      }\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { 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: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ConfigurationListComponent, isStandalone: true, selector: "c8y-configuration-list", ngImport: i0, template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small>\n    {{ size$ | async }}\n    <span translate>snapshots</span>\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Configurations' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'gears'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      @if (stats?.size === 0) {\n        <p>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Add configuration snapshot' | translate }}\"\n            type=\"button\"\n            (click)=\"add()\"\n          >\n            {{ 'Add configuration snapshot' | translate }}\n          </button>\n        </p>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n            >\n              user documentation</a\n            >.\n          </small>\n        </p>\n      }\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n", dependencies: [{ kind: "component", type: TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { 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: "component", type: HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: DataGridComponent, selector: "c8y-data-grid", inputs: ["title", "loadMoreItemsLabel", "loadingItemsLabel", "showSearch", "refresh", "loading", "columns", "rows", "pagination", "childNodePagination", "infiniteScroll", "serverSideDataCallback", "selectable", "singleSelection", "selectionPrimaryKey", "displayOptions", "actionControls", "bulkActionControls", "headerActionControls", "searchText", "configureColumnsEnabled", "showCounterWarning", "activeClassName", "expandableRows", "treeGrid", "hideReload", "childNodesProperty", "parentNodeLabelProperty"], outputs: ["rowMouseOver", "rowMouseLeave", "rowClick", "onConfigChange", "onBeforeFilter", "onBeforeSearch", "onFilter", "itemsSelect", "onReload", "onAddCustomColumn", "onRemoveCustomColumn", "onColumnFilterReset", "onSort", "onPageSizeChange", "onColumnReordered", "onColumnVisibilityChange"] }, { kind: "directive", type: EmptyStateContextDirective, selector: "[emptyStateContext]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: GuideDocsComponent, selector: "[c8y-guide-docs]" }, { kind: "directive", type: GuideHrefDirective, selector: "[c8y-guide-href]", inputs: ["c8y-guide-href"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ConfigurationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-configuration-list', imports: [
+            args: [{ selector: 'c8y-configuration-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TitleComponent,
                         C8yTranslateDirective,
                         BreadcrumbComponent,
@@ -969,10 +1149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AsyncPipe,
                         C8yTranslatePipe
                     ], template: "<c8y-title>\n  <span\n    class=\"m-r-4\"\n    translate\n  >\n    Configuration repository\n  </span>\n  <small>\n    {{ size$ | async }}\n    <span translate>snapshots</span>\n  </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n  <c8y-breadcrumb-item\n    icon=\"c8y-management\"\n    label=\"{{ 'Management' | translate }}\"\n  ></c8y-breadcrumb-item>\n  <c8y-breadcrumb-item\n    icon=\"gears\"\n    label=\"{{ 'Configuration repository' | translate }}\"\n  ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<c8y-action-bar-item [placement]=\"'right'\">\n  <button\n    class=\"btn btn-link\"\n    title=\"{{ 'Add configuration snapshot' | translate }}\"\n    type=\"button\"\n    (click)=\"add()\"\n  >\n    <i c8yIcon=\"plus-circle\"></i>\n    {{ 'Add configuration snapshot' | translate }}\n  </button>\n</c8y-action-bar-item>\n\n<c8y-help\n  src=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n></c8y-help>\n\n<div class=\"content-fullpage border-top border-bottom\">\n  <c8y-data-grid\n    [title]=\"'Configurations' | translate\"\n    [refresh]=\"refresh$\"\n    [pagination]=\"pagination\"\n    [columns]=\"columns\"\n    [actionControls]=\"actionControls\"\n    [infiniteScroll]=\"'auto'\"\n    [serverSideDataCallback]=\"serverSideDataCallback\"\n  >\n    <c8y-ui-empty-state\n      [icon]=\"stats?.size > 0 ? 'search' : 'gears'\"\n      [title]=\"stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)\"\n      [subtitle]=\"stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)\"\n      *emptyStateContext=\"let stats\"\n      [horizontal]=\"stats?.size > 0\"\n    >\n      @if (stats?.size === 0) {\n        <p>\n          <button\n            class=\"btn btn-primary\"\n            title=\"{{ 'Add configuration snapshot' | translate }}\"\n            type=\"button\"\n            (click)=\"add()\"\n          >\n            {{ 'Add configuration snapshot' | translate }}\n          </button>\n        </p>\n        <p c8y-guide-docs>\n          <small\n            translate\n            ngNonBindable\n          >\n            Find out more in the\n            <a\n              c8y-guide-href=\"/docs/device-management-application/managing-device-data/#managing-configurations\"\n            >\n              user documentation</a\n            >.\n          </small>\n        </p>\n      }\n    </c8y-ui-empty-state>\n  </c8y-data-grid>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i2.AlertService }, { type: i2.DataGridService }, { type: i3.RepositoryService }, { type: i3$1.BsModalService }, { type: i2.ModalService }, { type: i4$2.TranslateService }, { type: i4.InventoryBinaryService }], propDecorators: { filter: [{
-                type: ViewChild,
-                args: [FilterInputComponent, { static: false }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class ConfigurationRepositoryNavigationFactory {
     constructor() {
@@ -1043,5 +1220,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ConfigurationDetailComponent, ConfigurationFilterPipe, ConfigurationListComponent, ConfigurationPreviewComponent, ConfigurationRepositoryDeviceTabModule, ConfigurationRepositoryListModule, ConfigurationRepositoryModule, DeviceConfigurationComponent, DeviceConfigurationGuard, DeviceConfigurationListComponent, DeviceConfigurationService, SaveToRepositoryComponent, SourceCodePreviewComponent, TextBasedConfigurationComponent };
+export { ConfigurationDetailComponent, ConfigurationFilterPipe, ConfigurationListComponent, ConfigurationPreviewComponent, ConfigurationRepositoryDeviceTabModule, ConfigurationRepositoryListModule, ConfigurationRepositoryModule, DeviceConfigurationComponent, DeviceConfigurationGuard, DeviceConfigurationListComponent, DeviceConfigurationService, SaveToRepositoryComponent, SourceCodePreviewComponent, TextBasedConfigurationComponent, detectLanguage };
 //# sourceMappingURL=c8y-ngx-components-repository-configuration.mjs.map