From 400550933959ae28c78126c555d5d1c29b86d301 Mon Sep 17 00:00:00 2001
From: Michael Doyle <michael.james.doyle@gmail.com>
Date: Fri, 16 May 2025 15:42:25 -0400
Subject: [PATCH 1/2] properly deal with empty objects

---
 projects/demo/src/app/app.component.html           |  3 ++-
 .../src/lib/ngx-json-treeview.component.html       | 14 ++++++++++++--
 .../src/lib/ngx-json-treeview.component.ts         |  7 +++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
index 97a7884..f460067 100644
--- a/projects/demo/src/app/app.component.html
+++ b/projects/demo/src/app/app.component.html
@@ -34,13 +34,14 @@ <h3>Clickable Nodes</h3>
   }
 </div>
 
-<h3>Primatives</h3>
+<h3>Simple Types</h3>
 <div class="json-container">
   <ngx-json-treeview [json]="13" />
   <ngx-json-treeview [json]="'hello, world!'" />
   <ngx-json-treeview [json]="true" />
   <ngx-json-treeview [json]="null" />
   <ngx-json-treeview [json]="{}" />
+  <ngx-json-treeview [json]="[]" />
 </div>
 
 <h3>Arrays</h3>
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
index 1adba9b..96e0b62 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
@@ -1,6 +1,10 @@
 <section class="ngx-json-treeview">
   @if (segments().length === 0) {
-    <section [class]="'segment-type-' + rootType()">
+    @let sectionClass =
+      ['object', 'array'].includes(rootType())
+        ? 'punctuation'
+        : 'segment-type-' + rootType();
+    <section [class]="sectionClass">
       <span class="segment-primative">
         {{ asString() }}
       </span>
@@ -17,6 +21,7 @@
     ) {
       <section [class]="'segment segment-type-' + segment.type">
         @let expandable = isExpandable(segment);
+        @let empty = isEmpty(segment);
         @let openingBrace = openingBraceForSegment(segment);
         @let closingBrace = closingBraceForSegment(segment);
         @let clickableValue = isClickable(segment);
@@ -33,7 +38,12 @@
             <span class="segment-key">{{ `"${segment.key}"` }}</span>
           </span>
           <span class="puctuation">: </span>
-          @if (!expandable || !segment.expanded) {
+          @if (empty) {
+            <span
+              class="puctuation"
+              >{{ `${openingBrace}${closingBrace}${i < len - 1 ? ',' : ''}` }}</span
+            >
+          } @else if (!expandable || !segment.expanded) {
             <span
               [tabindex]="clickableValue ? 0 : -1"
               [class.segment-label]="expandable"
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
index 584d5ff..472c18e 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
@@ -151,6 +151,13 @@ export class NgxJsonTreeviewComponent {
     );
   }
 
+  isEmpty(segment: Segment) {
+    return (
+      (segment.type === 'object' && Object.keys(segment.value).length === 0) ||
+      (segment.type === 'array' && segment.value.length === 0)
+    );
+  }
+
   isClickable(segment: Segment) {
     return this.enableClickableValues() && this.isClickableValue()(segment);
   }

From ccdbcdb0362ca7be0d7ee523f1629805bd36fba8 Mon Sep 17 00:00:00 2001
From: Michael Doyle <michael.james.doyle@gmail.com>
Date: Fri, 16 May 2025 15:46:57 -0400
Subject: [PATCH 2/2] fix spelling of puctuation

---
 .../src/lib/ngx-json-treeview.component.html       | 14 +++++++-------
 .../src/lib/ngx-json-treeview.component.scss       |  2 +-
 .../src/lib/ngx-json-treeview.component.ts         |  4 +++-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
index 96e0b62..6ef17d4 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html
@@ -11,7 +11,7 @@
     </section>
   } @else {
     @if (_currentDepth() === 0) {
-      <span class="puctuation">{{ openingBrace() }}</span>
+      <span class="punctuation">{{ openingBrace() }}</span>
     }
     @for (
       segment of segments();
@@ -37,10 +37,10 @@
             }
             <span class="segment-key">{{ `"${segment.key}"` }}</span>
           </span>
-          <span class="puctuation">: </span>
+          <span class="punctuation">: </span>
           @if (empty) {
             <span
-              class="puctuation"
+              class="punctuation"
               >{{ `${openingBrace}${closingBrace}${i < len - 1 ? ',' : ''}` }}</span
             >
           } @else if (!expandable || !segment.expanded) {
@@ -53,10 +53,10 @@
               (keydown.enter)="onValueClickHandler(segment)"
               >{{ segment.description }}</span
             >
-            <span class="puctuation">{{ i < len - 1 ? ',' : '' }}</span>
+            <span class="punctuation">{{ i < len - 1 ? ',' : '' }}</span>
           } @else {
             @if (openingBrace) {
-              <span class="puctuation">
+              <span class="punctuation">
                 {{ openingBrace }}
               </span>
             }
@@ -74,7 +74,7 @@
               [_currentDepth]="_currentDepth() + 1"
               (onValueClick)="onValueClickHandler($event)" />
             @if (closingBrace) {
-              <span class="puctuation"
+              <span class="punctuation"
                 >{{ closingBrace }}{{ i < len - 1 ? ',' : '' }}</span
               >
             }
@@ -83,7 +83,7 @@
       </section>
     }
     @if (_currentDepth() === 0) {
-      <span class="puctuation">{{ closingBrace() }}</span>
+      <span class="punctuation">{{ closingBrace() }}</span>
     }
   }
 </section>
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
index 22f9962..a433065 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss
@@ -100,7 +100,7 @@ $type-colors: (
     }
   }
 
-  .puctuation {
+  .punctuation {
     color: var(--ngx-json-punctuation, #000);
   }
 
diff --git a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
index 472c18e..6011a34 100644
--- a/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
+++ b/projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts
@@ -142,7 +142,9 @@ export class NgxJsonTreeviewComponent {
       return ']';
     } else return '}';
   });
-  asString = computed<string>(() => JSON.stringify(this.json(), null, 2));
+  asString = computed<string>(() =>
+    JSON.stringify(this.json(), null, 2).trim()
+  );
 
   isExpandable(segment: Segment) {
     return (