json-editor.component.html

<div class="row editor-container" [ngClass]="shorterEditorContainerClass">
  <div class="col-md-2 menu-container">
    <tree-menu [record]="_record" [schema]="schema"></tree-menu>
    <add-field-dropdown [fields]="keys" [pathString]="''" (fieldAdd)="onFieldAdd($event)" [schema]="schema">Add field</add-field-dropdown>
    <div *ngIf="config.enableAdminModeSwitch" class="admin-mode" tooltip="Allows editing all fields (use with care)">
      <input id="admin-mode-checkbox" type="checkbox" [(ngModel)]="appGlobalsService.adminMode" />
      <label class="admin-mode" for="admin-mode-checkbox">Enable Admin Mode</label>
    </div>
    <validation-badges (onBadgeClick)="openPanel($event)"></validation-badges>
  </div>
  <div id="middle-main-container" class="middle main-container" [ngClass]="middleContainerColMdClass" [shortcuts]="shortcuts">
    <tabset *ngIf="config.tabsConfig">
      <tab *ngFor="let tabName of tabNames; trackBy:trackByElement" [heading]="tabName" (select)="activeTabName = tabName" [active]="isActiveTab(tabName)">
        <sub-record [value]="_record" [tabName]="tabName" [schema]="tabNameToSubSchema[tabName]" [keys]="tabNameToKeys[tabName]"
                    (deleteKey)="onDeleteKey($event)"></sub-record>
      </tab>
    </tabset>
    <sub-record *ngIf="!config.tabsConfig" [value]="_record" [schema]="schema" (deleteKey)="onDeleteKey($event)" [keys]="keys"></sub-record>
  </div>
  <div id="right-main-container" *ngIf="!isPreviewerDisabled" [ngClass]="rightContainerColMdClass" class="main-container">
    <button id="btn-preview-toggle" type="button" class="btn btn-default btn-toggle" (click)="isPreviewerHidden = !isPreviewerHidden">{{isPreviewerHidden ? "Show Preview" : "Hide Preview"}}</button>
    <editor-previewer [hidden]="isPreviewerHidden" [previews]="previews"> </editor-previewer>
  </div>
</div>

<error-panel [activeTab]="errorPanelActiveTab" [isOpen]="isErrorPanelOpen" (onCollapse)="isErrorPanelOpen = $event"></error-panel>
<!-- Modal View controlled by ModalService -->
<modal-view>
</modal-view>