fix(admin-ui): Improve styling of form field wrapper

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field-control.directive.ts

@@ -4,7 +4,7 @@ import { NgControl } from '@angular/forms';
 type InputElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
 /* eslint-disable @angular-eslint/directive-selector */
-@Directive({ selector: 'input, textarea, select' })
+@Directive({ selector: 'input, textarea, select, vdr-currency-input' })
 export class FormFieldControlDirective {
     constructor(
         private elementRef: ElementRef<InputElement>,

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.html

@@ -12,16 +12,17 @@
     <div
         class="input-row"
         [class.has-toggle]="readOnlyToggle"
+        [class.readonly]="isReadOnly"
         [class.invalid]="formFieldControl?.touched && !formFieldControl?.valid"
     >
         <ng-content></ng-content>
         <button
             *ngIf="readOnlyToggle"
             type="button"
-            [disabled]="!isReadOnly"
             [title]="'common.edit-field' | translate"
-            class="btn btn-icon edit-button"
-            (click)="setReadOnly(false)"
+            class="btn edit-button"
+            [class.enabled]="!isReadOnly"
+            (click)="setReadOnly(!isReadOnly)"
         >
             <clr-icon shape="edit"></clr-icon>
         </button>

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.scss

@@ -23,6 +23,7 @@
     input:not([type='checkbox']),
     select,
     textarea,
+    ng-select,
     vdr-zone-selector,
     vdr-facet-value-selector,
     vdr-option-value-input,
@@ -33,6 +34,23 @@
     }
 }
 
+::ng-deep .input-row.readonly {
+    input:not([type='checkbox']),
+    select,
+    textarea,
+    ng-select,
+    vdr-zone-selector,
+    vdr-facet-value-selector,
+    vdr-option-value-input,
+    vdr-affixed-input,
+    vdr-currency-input,
+    vdr-rich-text-editor {
+        &[readonly] {
+            cursor: not-allowed;
+        }
+    }
+}
+
 .input-row {
     input:not([type='checkbox']),
     select,
@@ -40,3 +58,20 @@
         width: 100%;
     }
 }
+
+::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]) {
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+}
+
+.edit-button {
+    border: 1px solid var(--color-weight-200);
+    border-radius: var(--border-radius-input);
+    border-inline-start-width: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    &.enabled {
+        color: var(--color-primary-700);
+        background-color: var(--color-primary-100);
+    }
+}

packages/admin-ui/src/lib/core/src/shared/components/form-field/form-field.component.ts

@@ -1,11 +1,4 @@
-import {
-    AfterContentInit,
-    ChangeDetectionStrategy,
-    Component,
-    ContentChild,
-    Input,
-    OnInit,
-} from '@angular/core';
+import { Component, ContentChild, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 import { FormFieldControlDirective } from './form-field-control.directive';
 
@@ -32,6 +25,7 @@ export class FormFieldComponent implements OnInit {
      * will be displayed which allows the field to be edited.
      */
     @Input() readOnlyToggle = false;
+    @Output() readOnlyToggleChange = new EventEmitter<boolean>();
     @ContentChild(FormFieldControlDirective, { static: true }) formFieldControl: FormFieldControlDirective;
     isReadOnly = false;
 
@@ -46,6 +40,7 @@ export class FormFieldComponent implements OnInit {
     setReadOnly(value: boolean) {
         this.formFieldControl.setReadOnly(value);
         this.isReadOnly = value;
+        this.readOnlyToggleChange.emit(value);
     }
 
     getErrorMessage(): string | undefined {