move logic out of template

Author: MichaelDoyle

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html

@@ -1,10 +1,6 @@
 <section class="ngx-json-treeview">
   @if (segments().length === 0) {
-    @let sectionClass =
-      ['object', 'array'].includes(rootType())
-        ? 'punctuation'
-        : 'segment-type-' + rootType();
-    <div [class]="sectionClass">
+    <div [class]="primativeSegmentClass()">
       <span class="segment-primitive">
         {{ asString() }}
       </span>

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss

@@ -110,8 +110,8 @@ $type-colors: (
     }
   }
   .segment-primitive {
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
   }
   // special cases that need highlighting
   .segment-type-null > .segment-primitive {

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts

@@ -145,6 +145,13 @@ export class NgxJsonTreeviewComponent {
   asString = computed<string>(() =>
     JSON.stringify(this.json(), null, 2).trim()
   );
+  primativeSegmentClass = computed<string>(() => {
+    const type = this.rootType();
+    if (['object', 'array'].includes(type)) {
+      return 'punctuation';
+    }
+    return 'segment-type-' + type;
+  });
 
   isExpandable(segment: Segment) {
     return (