AAE-22724 Fix json widget display (#10248)

lib/core/src/lib/form/components/widgets/json/json.widget.html

@@ -0,0 +1,8 @@
+<div class="adf-json-widget">
+    <div class="adf-json-widget-label">
+        <label class="adf-label" [attr.for]="field.id">
+            {{ field.name | translate }}
+        </label>
+    </div>
+    <button mat-raised-button color="primary" (click)="view()">json</button>
+</div>

lib/core/src/lib/form/components/widgets/json/json.widget.scss

@@ -0,0 +1,11 @@
+.adf {
+    &-json-widget {
+        width: 100%;
+
+        &-label {
+            .adf-label {
+                -webkit-font-smoothing: antialiased;
+            }
+        }
+    }
+}

lib/core/src/lib/form/components/widgets/json/json.widget.ts

@@ -21,10 +21,13 @@ import { MatDialog } from '@angular/material/dialog';
 import { EditJsonDialogSettings, EditJsonDialogComponent } from '../../../../dialogs/edit-json/edit-json.dialog';
 import { FormService } from '../../../services/form.service';
 import { WidgetComponent } from '../widget.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     standalone: true,
-    template: ` <button mat-raised-button color="primary" (click)="view()">json</button> `,
+    templateUrl: './json.widget.html',
+    styleUrls: ['./json.widget.scss'],
     host: {
         '(click)': 'event($event)',
         '(blur)': 'event($event)',
@@ -36,7 +39,7 @@ import { WidgetComponent } from '../widget.component';
         '(invalid)': 'event($event)',
         '(select)': 'event($event)'
     },
-    imports: [MatButtonModule],
+    imports: [TranslateModule, MatFormFieldModule, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class JsonWidgetComponent extends WidgetComponent {