From 9e70aad67d9a2d7e88bd67f5cecf9a8160bdd936 Mon Sep 17 00:00:00 2001
From: Diogo Bastos <50139916+DiogoABastos@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:08:15 +0100
Subject: [PATCH] AAE-22724 Fix json widget display (#10248)

---
 .../lib/form/components/widgets/json/json.widget.html |  8 ++++++++
 .../lib/form/components/widgets/json/json.widget.scss | 11 +++++++++++
 .../lib/form/components/widgets/json/json.widget.ts   |  7 +++++--
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 lib/core/src/lib/form/components/widgets/json/json.widget.html
 create mode 100644 lib/core/src/lib/form/components/widgets/json/json.widget.scss

diff --git a/lib/core/src/lib/form/components/widgets/json/json.widget.html b/lib/core/src/lib/form/components/widgets/json/json.widget.html
new file mode 100644
index 0000000000..0c1e4d28bb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/lib/core/src/lib/form/components/widgets/json/json.widget.scss b/lib/core/src/lib/form/components/widgets/json/json.widget.scss
new file mode 100644
index 0000000000..4795b57e44
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/lib/core/src/lib/form/components/widgets/json/json.widget.ts b/lib/core/src/lib/form/components/widgets/json/json.widget.ts
index 93f403a002..63a67bb551 100644
--- a/lib/core/src/lib/form/components/widgets/json/json.widget.ts
+++ b/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 {