Возможность полностью разворачивать/сворачивать объекты

Closes #20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "har-viewer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "prepare": "node scripts/prepare.mjs",

src/app/components/json-viewer/json-segment.component.html

@@ -1,4 +1,9 @@
-<div class="header" [class.header_expandable]="expandable()" [class.header_expanded]="expanded()" (click)="toggle()">
+<div
+    class="header"
+    [class.header_expandable]="expandable()"
+    [class.header_expanded]="expanded()"
+    (click)="toggle($event)"
+>
     @if (expandable()) {
         <div class="toggle"></div>
     }
@@ -23,5 +28,5 @@
 </div>
 
 @if (expanded()) {
-    <app-json-viewer class="children" [json]="segment().value"></app-json-viewer>
+    <app-json-viewer class="children" [json]="segment().value" [opened]="expanded() === 'full'"></app-json-viewer>
 }

src/app/components/json-viewer/json-segment.component.ts

@@ -1,10 +1,24 @@
-import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, input, signal } from '@angular/core';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    Input,
+    input,
+    OnInit,
+    signal,
+} from '@angular/core';
 import { Primitive } from '../../types/primitive';
+import { Unsafe } from '../../types/unsafe';
 import { isObjectOrArray } from '../../utils/is-object-or-array';
 import { StringContentService } from '../string-content-modal/string-content.service';
 import { JsonViewerComponent } from './json-viewer.component';
 import { Segment } from './segments/base/segment';
 
+type ExpandType = 'slim' | 'full';
+
 @Component({
     selector: 'app-json-segment',
     standalone: true,
@@ -13,11 +27,14 @@ import { Segment } from './segments/base/segment';
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [forwardRef(() => JsonViewerComponent)],
 })
-export class JsonSegmentComponent {
+export class JsonSegmentComponent implements OnInit {
     public segment = input.required<Segment>();
 
+    @Input({ transform: booleanAttribute })
+    public opened!: boolean;
+
     protected readonly expandable = computed(() => isObjectOrArray(this.segment().value));
-    protected readonly expanded = signal(false);
+    protected readonly expanded = signal<Unsafe<ExpandType>>(null);
 
     protected readonly isString = computed(() => this.isType('string'));
     protected readonly isNumber = computed(() => this.isType('number'));
@@ -27,8 +44,20 @@ export class JsonSegmentComponent {
 
     protected readonly stringContentService = inject(StringContentService);
 
-    protected toggle(): void {
-        this.expanded.update(x => !x);
+    public ngOnInit(): void {
+        if (this.opened) {
+            this.expanded.set('full');
+        }
+    }
+
+    protected toggle(event: MouseEvent): void {
+        this.expanded.update(state => {
+            if (state) {
+                return null;
+            } else {
+                return event.altKey ? 'full' : 'slim';
+            }
+        });
     }
 
     protected showMore(): void {

src/app/components/json-viewer/json-viewer.component.html

@@ -1,3 +1,3 @@
 @for (segment of segments(); track segment.id) {
-    <app-json-segment [segment]="segment"></app-json-segment>
+    <app-json-segment [segment]="segment" [opened]="opened"></app-json-segment>
 }

src/app/components/json-viewer/json-viewer.component.ts

@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    Input,
+    input,
+    Signal,
+} from '@angular/core';
 import { JSONValue } from '../../types/json-value';
 import { JsonSegmentComponent } from './json-segment.component';
 import { JsonViewerService } from './json-viewer.service';
@@ -15,6 +24,9 @@ import { Segment } from './segments/base/segment';
 export class JsonViewerComponent {
     public json = input.required<JSONValue>();
 
+    @Input({ transform: booleanAttribute })
+    public opened!: boolean;
+
     protected readonly segments = this.getSegments();
 
     private readonly jsonViewerService = inject(JsonViewerService);