IE10, IE9 Fixes

Use Reflect.metadate decorator instead of Class.parameters
Add fallback old syntax of flexbox
Other minor styling fixes

.eslintrc

@@ -9,7 +9,8 @@
   "globals": {
     "should": true,
     "expect": true,
-    "sinon": true
+    "sinon": true,
+    "Reflect": true
   },
   "rules": {
     "quotes": [2, "single"],

lib/common/components/StickySidebar/sticky-sidebar.js

@@ -7,6 +7,7 @@ import {BrowserDomAdapter} from 'angular2/platform/browser';
   selector: '[sticky-sidebar]',
   inputs: ['scrollParent', 'scrollYOffset']
 })
+@Reflect.metadata('parameters', [[ElementRef], [BrowserDomAdapter]])
 export default class StickySidebar {
   constructor(elementRef, dom) {
     this.element = elementRef.nativeElement;
@@ -59,5 +60,3 @@ export default class StickySidebar {
     this.unbind();
   }
 }
-
-StickySidebar.parameters = [ [ElementRef], [BrowserDomAdapter] ];

lib/common/components/Tabs/tabs.js

@@ -65,16 +65,24 @@ export class Tabs {
 })
 @View({
   template: `
-    <div class="tab-wrap" [hidden]="!active">
+    <div class="tab-wrap" [ngClass]="{ 'active': active }">
       <ng-content></ng-content>
     </div>
-  `
+  `,
+  styles: [`
+    .tab-wrap {
+      display: none;
+    }
+
+    .tab-wrap.active {
+      display: block;
+    }`
+  ]
 })
+@Reflect.metadata('parameters', [ [Tabs] ])
 export class Tab {
   constructor(tabs) {
     this.active = false;
     tabs.addTab(this);
   }
 }
-
-Tab.parameters = [ [ Tabs ] ];

lib/common/styles/_variables.scss

@@ -15,6 +15,6 @@ $samples-panel-width: 40%;
 $sample-panel-headers-color: #8A9094;
 $sample-panel-color: #CFD2D3;
 
-$tree-lines-color: #7D97CE;
+$tree-lines-color: #CDD9F3;//#7D97CE;
 
 $side-menu-mobile-breakpoint: 1000px;

lib/components/JsonSchema/json-schema-common.scss

@@ -30,6 +30,8 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-name {
+  flex-grow: 0;
+  -ms-flex-grow: 0;
   display: inline-block;
   font-size: 14px;
   padding: $cell-padding 0 $cell-padding 0;
@@ -47,7 +49,9 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 }
 
 .param-info {
-  width: 100%;
+  //width: 100%;
+  flex-grow: 1;
+  -ms-flex-grow: 1;
   padding: $cell-padding 0;
   box-sizing: border-box;
   border-bottom: 1px solid #ccc;
@@ -56,6 +60,7 @@ $sub-schema-offset: ($bullet-size/2) + $bullet-margin;
 
 .param {
   display: flex;
+  display: -ms-flexbox;
 }
 
 .param-required {

lib/components/JsonSchema/json-schema-lazy.js

@@ -2,8 +2,9 @@
 
 import {Component, View, ElementRef} from 'angular2/core';
 import {CORE_DIRECTIVES} from 'angular2/common';
-import JsonSchema from './json-schema';
 import {DynamicComponentLoader} from 'angular2/src/core/linker/dynamic_component_loader';
+
+import JsonSchema from './json-schema';
 import OptionsManager from '../../options';
 import SchemaManager from '../../utils/SchemaManager';
 
@@ -19,6 +20,7 @@ var cache = {};
   template: '',
   directives: [CORE_DIRECTIVES]
 })
+@Reflect.metadata('parameters', [[ElementRef], [DynamicComponentLoader]])
 export default class JsonSchemaLazy {
 
   constructor(elementRef, dcl) {
@@ -79,5 +81,3 @@ export default class JsonSchemaLazy {
 function insertAfter(newNode, referenceNode) {
   referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
 }
-
-JsonSchemaLazy.parameters = [[ElementRef], [DynamicComponentLoader]];

lib/components/JsonSchema/json-schema.js

@@ -1,8 +1,9 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
-import {Tabs, Tab} from '../../common/components/Tabs/tabs';
 import {ElementRef} from 'angular2/core';
+
+import {RedocComponent, BaseComponent, SchemaManager} from '../base';
+import {Tabs, Tab} from '../../common/components/Tabs/tabs';
 import JsonPointer from '../../utils/JsonPointer';
 
 @RedocComponent({
@@ -12,6 +13,7 @@ import JsonPointer from '../../utils/JsonPointer';
   directives: [JsonSchema, Tabs, Tab],
   inputs: ['isArray', 'final']
 })
+@Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
 export default class JsonSchema extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
@@ -152,4 +154,3 @@ export default class JsonSchema extends BaseComponent {
     }
   }
 }
-JsonSchema.parameters = JsonSchema.parameters.concat([[ElementRef]]);

lib/components/Method/method.js

@@ -2,6 +2,7 @@
 
 import {JsonPointer} from '../../utils/JsonPointer';
 import {RedocComponent, BaseComponent} from '../base';
+
 import ParamsList from '../ParamsList/params-list';
 import ResponsesList from '../ResponsesList/responses-list';
 import ResponsesSamples from '../ResponsesSamples/responses-samples';

lib/components/Redoc/redoc.js

@@ -1,5 +1,12 @@
 'use strict';
 
+import {ChangeDetectionStrategy} from 'angular2/core';
+import {ElementRef} from 'angular2/core';
+import {BrowserDomAdapter, bootstrap} from 'angular2/platform/browser';
+import detectScollParent from 'scrollparent';
+
+import {isFunction, isString} from 'angular2/src/facade/lang';
+
 import {RedocComponent, BaseComponent} from '../base';
 import SchemaManager from '../../utils/SchemaManager';
 
@@ -11,13 +18,6 @@ import StickySidebar from '../../common/components/StickySidebar/sticky-sidebar'
 import OptionsManager from '../../options';
 import {redocEvents} from '../../events';
 
-import {ChangeDetectionStrategy} from 'angular2/core';
-import {ElementRef} from 'angular2/core';
-import {BrowserDomAdapter, bootstrap} from 'angular2/platform/browser';
-import detectScollParent from 'scrollparent';
-
-import {isFunction, isString} from 'angular2/src/facade/lang';
-
 let optionNames = new Set(['scrollYOffset', 'disableLazySchemas']);
 
 let dom = new BrowserDomAdapter();
@@ -30,6 +30,7 @@ let dom = new BrowserDomAdapter();
   directives: [ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar],
   changeDetection: ChangeDetectionStrategy.Default
 })
+@Reflect.metadata('parameters', [[SchemaManager], [OptionsManager], [ElementRef], [BrowserDomAdapter]])
 export default class Redoc extends BaseComponent {
   constructor(schemaMgr, optionsMgr, elementRef, dom) {
     super(schemaMgr);
@@ -100,6 +101,7 @@ export default class Redoc extends BaseComponent {
           25% {transform: translateY(0px)}
           50% {transform: translateY(10px)}
           75% {transform: translateY(20px)}
+          100% {transform: translateY(10px)}
         }
 
         redoc.loading:before {
@@ -200,4 +202,3 @@ export default class Redoc extends BaseComponent {
     }
   }
 }
-Redoc.parameters = Redoc.parameters.concat([[OptionsManager], [ElementRef], [BrowserDomAdapter]]);

lib/components/RequestSamples/request-samples.js

@@ -1,12 +1,12 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
+import {ViewChildren, QueryList, ChangeDetectorRef, ChangeDetectionStrategy} from 'angular2/core';
+
+import {RedocComponent, BaseComponent, SchemaManager} from '../base';
 import JsonPointer from '../../utils/JsonPointer';
 import {Tabs, Tab} from '../../common/components/Tabs/tabs';
 import SchemaSample from '../SchemaSample/schema-sample';
 import {PrismPipe} from '../../utils/pipes';
-
-import {ViewChildren, QueryList, ChangeDetectorRef, ChangeDetectionStrategy} from 'angular2/core';
 import {redocEvents} from '../../events';
 
 @RedocComponent({
@@ -18,6 +18,7 @@ import {redocEvents} from '../../events';
   pipes: [PrismPipe],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
+@Reflect.metadata('parameters', [[SchemaManager], [new ViewChildren(Tabs), QueryList], [ChangeDetectorRef]])
 export default class RequestSamples extends BaseComponent {
   constructor(schemaMgr, tabs, changeDetector) {
     super(schemaMgr);
@@ -46,5 +47,3 @@ export default class RequestSamples extends BaseComponent {
     this.data.samples = this.componentSchema['x-code-samples'] || [];
   }
 }
-
-RequestSamples.parameters = RequestSamples.parameters.concat([ [new ViewChildren(Tabs), QueryList], [ChangeDetectorRef] ]);

lib/components/SchemaSample/schema-sample.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
+import {ElementRef} from 'angular2/core';
 
 import SchemaSampler from 'json-schema-instantiator';
 
 import {JsonFormatter} from '../../utils/JsonFormatterPipe';
-import {ElementRef} from 'angular2/core';
+import {RedocComponent, BaseComponent, SchemaManager} from '../base';
 
 @RedocComponent({
   selector: 'schema-sample',
@@ -13,6 +13,7 @@ import {ElementRef} from 'angular2/core';
   pipes: [JsonFormatter],
   styleUrls: ['./lib/components/SchemaSample/schema-sample.css']
 })
+@Reflect.metadata('parameters', [[SchemaManager], [ElementRef]])
 export default class SchemaSample extends BaseComponent {
   constructor(schemaMgr, elementRef) {
     super(schemaMgr);
@@ -54,4 +55,3 @@ export default class SchemaSample extends BaseComponent {
     });
   }
 }
-SchemaSample.parameters = SchemaSample.parameters.concat([[ElementRef]]);

lib/components/SideMenu/side-menu.js

@@ -1,14 +1,14 @@
 'use strict';
 
-import {RedocComponent, BaseComponent} from '../base';
-import {redocEvents} from '../../events';
-
 import {NgZone, ChangeDetectionStrategy, ElementRef, forwardRef} from 'angular2/core';
 import Redoc from '../Redoc/redoc';
 import {document} from 'angular2/src/facade/browser';
 import {BrowserDomAdapter} from 'angular2/platform/browser';
 import {global} from 'angular2/src/facade/lang';
 
+import {RedocComponent, BaseComponent, SchemaManager} from '../base';
+import {redocEvents} from '../../events';
+
 const CHANGE = {
   NEXT : 1,
   BACK : -1,
@@ -27,6 +27,8 @@ const INVIEW_POSITION = {
   styleUrls: ['./lib/components/SideMenu/side-menu.css'],
   changeDetection: ChangeDetectionStrategy.Default
 })
+@Reflect.metadata('parameters', [[SchemaManager], [ElementRef],
+  [BrowserDomAdapter], [NgZone], [forwardRef(() => Redoc)]])
 export default class SideMenu extends BaseComponent {
   constructor(schemaMgr, elementRef, adapter, zone, redoc) {
     super(schemaMgr);
@@ -254,5 +256,5 @@ export default class SideMenu extends BaseComponent {
     this.changeActive(CHANGE.INITIAL);
   }
 }
-SideMenu.parameters = SideMenu.parameters.concat([[ElementRef],
-  [BrowserDomAdapter], [NgZone], [forwardRef(() => Redoc)] ]);
+//SideMenu.parameters = SideMenu.parameters.concat([[ElementRef],
+//  [BrowserDomAdapter], [NgZone], [forwardRef(() => Redoc)] ]);

lib/components/base.js

@@ -5,6 +5,8 @@ import SchemaManager from '../utils/SchemaManager';
 import JsonPointer from '../utils/JsonPointer';
 import {MarkedPipe, JsonPointerEscapePipe} from '../utils/pipes';
 
+export { SchemaManager };
+
 // common inputs for all components
 let commonInputs = ['pointer']; // json pointer to the schema chunk
 
@@ -77,6 +79,7 @@ export function RedocComponent(options) {
  * Generic Component
  * @class
  */
+@Reflect.metadata('parameters', [[SchemaManager]])
 export class BaseComponent {
   constructor(schemaMgr) {
     this.schemaMgr = schemaMgr;
@@ -208,4 +211,3 @@ export class BaseComponent {
    */
   destroy() {}
 }
-BaseComponent.parameters = [[SchemaManager]];

lib/utils/JsonPointer.js

@@ -63,4 +63,6 @@ export class JsonPointer extends JsonPointerLib {
 JsonPointerLib._origParse = JsonPointerLib.parse;
 JsonPointerLib.parse = JsonPointer.parse;
 
+
+Object.assign(JsonPointer, JsonPointerLib);
 export default JsonPointer;

lib/utils/pipes.js

@@ -5,6 +5,7 @@ import {isString, stringify, isBlank} from 'angular2/src/facade/lang';
 import {BaseException} from 'angular2/src/facade/exceptions';
 import {JsonPointer} from './JsonPointer';
 import marked from 'marked';
+
 import Prism from 'prismjs';
 import 'prismjs/components/prism-actionscript.js';
 import 'prismjs/components/prism-c.js';