merge with origin

lib/components/JsonSchema/json-schema.html

@@ -20,7 +20,13 @@
           </div>
         </div>
         <div class="param-description" innerHtml="{{prop.description | marked}}"></div>
-        <div class="discriminator-info" *ngIf="prop.isDiscriminator"> This field value determines the exact schema: </div>
+        <div class="discriminator-info" *ngIf="prop.isDiscriminator">
+          This field value determines the exact schema:
+          <ul>
+            <li *ngFor="#derived of data.derived"
+            (click)="selectDerived(derived)" [ngClass]="{active: derived.active}"> {{derived.name}} </li>
+          </ul>
+        </div>
       </td>
     </tr>
     <tr class="param-schema" [ngClass]="{'param-array': prop._isArray}" *ngIf="prop._pointer">
@@ -32,12 +38,10 @@
   </template>
   <tr *ngIf="data.derived.length" class="param-wrap discriminator-wrap">
     <td colspan="2">
-      <tabs>
-        <tab *ngFor="#derived of data.derived" tabTitle="{{derived.name}}">
-          <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
-          </json-schema>
-        </tab>
-      </tabs>
+      <div class="derived-schema" *ngFor="#derived of data.derived" [ngClass]="{active: derived.active}">
+        <json-schema pointer="{{derived.$ref}}" [final]="derived.final" class="discriminator-part">
+        </json-schema>
+      </div>
     </td>
   </tr>
 </table>

lib/components/JsonSchema/json-schema.js

@@ -21,6 +21,14 @@ export default class JsonSchema extends BaseComponent {
     this.final = false;
   }
 
+  selectDerived(subClass) {
+    if (subClass.active) return;
+    this.data.derived.forEach((subSchema) => {
+      subSchema.active = false;
+    });
+    subClass.active = true;
+  }
+
   prepareModel() {
     this.data = {};
     this.data.properties = [];
@@ -43,6 +51,7 @@ export default class JsonSchema extends BaseComponent {
     let normPtr = schema._pointer || this.pointer;
     let derived = this.schemaMgr.findDerivedDefinitions( normPtr );
     if (!this.final && derived.length) {
+      derived[0].active = true;
       this.data.derived = derived;
       this.data.discriminator = schema.discriminator;
     }

lib/components/JsonSchema/json-schema.scss

@@ -12,6 +12,13 @@ $array-marker-line-height: 1.5;
   padding: 0 10px;
 }
 
+.derived-schema {
+  display: none;
+}
+.derived-schema.active {
+  display: block;
+}
+
 json-schema.nested-schema {
   background-color: $side-menu-active-bg-color;
   padding: 10px 20px;
@@ -114,15 +121,14 @@ json-schema.nested-schema {
   padding: 0;
 }
 
-:host tabs {
+ul {
+  text-align: left;
+  margin: 0;
+  padding: 0;
   display: block;
 }
 
-:host ul {
-    text-align: center;
-}
-
-:host tabs li {
+li {
   margin: 0.2em 0.3em 0.2em 0;
   font-family: $headers-font, $headers-font-family;
   font-size: .929em;
@@ -132,6 +138,8 @@ json-schema.nested-schema {
   padding: 2px 8px 4px 8px;
   border-radius: $border-radius;
   background-color: rgba($black, 0.3);
+  display: inline-block;
+  cursor: pointer;
 
   &:last-of-type {
     margin-right: 0;