Merge commit '2ac8b3af3cf42f2b6139e7c3c0779592ec253a90' into releases

.codeclimate.yml

@@ -1,12 +0,0 @@
-engines:
-  eslint:
-    enabled: true
-  scss-lint:
-    enabled: true
-  fixme:
-    enabled: true
-ratings:
-   paths:
-   - "lib/**"
-exclude_paths:
-  - "**.spec.js"

.travis.yml

@@ -32,7 +32,7 @@ before_script:
 after_script:
   - kill %1 # kill e2e server
 before_deploy:
-- npm run build:prod-module
+- if [[ ! -z "$TRAVIS_TAG" ]]; then npm run build:prod-module; fi
 deploy:
   - provider: npm
     skip_cleanup: true

README.md

@@ -1,7 +1,7 @@
 # ReDoc
 **OpenAPI/Swagger-generated API Reference Documentation**
 
-[![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![Code Climate](https://codeclimate.com/github/Rebilly/ReDoc/badges/gpa.svg)](https://codeclimate.com/github/Rebilly/ReDoc) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc)
+[![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc)
 
 [![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE)
 
@@ -112,6 +112,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
   * **selector**: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset;
   * **function**: A getter function. Must return a number representing the offset (in pixels);
 * `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
+* `hide-hostname` - if set, the protocol and hostname is not shown in the method definition.
 
 ## Advanced usage
 Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
@@ -139,3 +140,5 @@ Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
 - Start the server
 `npm start`
 - Open `http://localhost:9000`
+
+Alternatively, Docker can be used by just running `docker-compose up`.

build/webpack.dev.js

@@ -8,8 +8,7 @@ const IS_PRODUCTION = process.env.NODE_ENV === "production";
 // TODO Refactor common parts of config
 
 module.exports = {
-  context: root(),
+  devtool: '#inline-source-map',
-  devtool: 'source-map',
 
   resolve: {
     extensions: ['.ts', '.js', '.json', '.css'],
@@ -51,7 +50,9 @@ module.exports = {
     path: root('dist'),
     filename: '[name].js',
     sourceMapFilename: '[name].[id].map',
-    chunkFilename: '[id].chunk.js'
+    chunkFilename: '[id].chunk.js',
+    // devtoolModuleFilenameTemplate: "[resource-path]",
+    // devtoolFallbackModuleFilenameTemplate: "[resource-path]?[hash]",
   },
 
   module: {

build/webpack.prod.js

@@ -3,7 +3,6 @@ const webpack = require('webpack');
 const VERSION = JSON.stringify(require('../package.json').version);
 
 const root = require('./helpers').root;
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const BANNER =
 `ReDoc - OpenAPI/Swagger-generated API Reference Documentation
 -------------------------------------------------------------

demo/swagger.yaml

@@ -26,6 +26,14 @@ info:
     This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with  [W3C spec](https://www.w3.org/TR/cors/).
     And that allows cross-domain communication from the browser.
     All responses have a wildcard same-origin which makes them completely public and accessible to everyone, including any code on any site.
+    # Authentication
+    Petstore offers two forms of authentication:
+      - API Key
+      - OAuth2
+
+    OAuth2 - an open protocol to allow secure authorization in a simple
+    and standard method from web, mobile and desktop applications.
+    <!-- ReDoc-Inject: <security-definitions> -->
   version: 1.0.0
   title: Swagger Petstore
   termsOfService: 'http://swagger.io/terms/'
@@ -48,6 +56,9 @@ tags:
     description: Operations about user
 securityDefinitions:
   petstore_auth:
+    description: |
+      Get access to data while protecting your account credentials.
+      OAuth2 is also a safer and more secure way to give you access.
     type: oauth2
     authorizationUrl: 'http://petstore.swagger.io/api/oauth/dialog'
     flow: implicit
@@ -55,6 +66,8 @@ securityDefinitions:
       'write:pets': modify pets in your account
       'read:pets': read your pets
   api_key:
+    description: |
+      For this sample, you can use the api key `special-key` to test the authorization filters.
     type: apiKey
     name: api_key
     in: header

docker-compose.yml

@@ -0,0 +1,8 @@
+dev:
+  image: node:7
+  command: sh -c "npm install; npm start -- --host=0.0.0.0"
+  ports:
+   - "9000:9000"
+  volumes:
+   - "./:/code"
+  working_dir: /code

lib/components/ApiInfo/api-info.html

@@ -1,5 +1,5 @@
-<div>
+<div class="api-info-wrapper">
-  <h1 class="api-info-header">{{info.title}} ({{info.version}})</h1>
+  <h1>{{info.title}} ({{info.version}})</h1>
   <p>
     Download OpenAPI (fka Swagger) specification:
     <a class="openapi-button" target="_blank" attr.href='{{specUrl}}'> Download </a>
@@ -17,5 +17,7 @@
       <span *ngIf="!info.license.url"> {{info.license.name}} </span>
     </span>
   </p>
-  <dynamic-ng2-viewer [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
+  <span class="redoc-markdown-block">
+    <dynamic-ng2-viewer  [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
+  </span>
 </div>

lib/components/ApiInfo/api-info.scss

@@ -1,28 +1,24 @@
 @import '../../shared/styles/variables';
 
-.api-info-header {
+:host > .api-info-wrapper {
-  font-weight: normal;
-}
-
-:host > div {
-  width: 60%;
-  padding: 40px;
   box-sizing: border-box;
+  padding: $section-spacing;
+  width: 60%;
+
 
   @media (max-width: $right-panel-squash-breakpoint) {
     width: 100%;
   }
 }
 
-a.openapi-button {
+.openapi-button {
-  padding: 3px 8px 4px 8px;
-  color: $primary-color;
   border: 1px solid $primary-color;
-  margin-left: 0.5em;
+  color: $primary-color;
   font-weight: normal;
+  margin-left: 0.5em;
+  padding: 3px 8px 4px;
 }
 
 :host /deep/ [section] {
-  padding-top: 60px;
+  padding-top: 2 * $section-spacing;
-  margin-top: 20px;
 }

lib/components/ApiLogo/api-logo.scss

@@ -1,5 +1,14 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+  text-align: center;
+
+  @media (max-width: $side-menu-mobile-breakpoint) {
+    display: none;
+  }
+}
+
 img {
   max-height: 150px;
   width: auto;

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

@@ -5,26 +5,16 @@ $cell-spacing: 25px;
 $cell-padding: 10px;
 $bullet-margin: 10px;
 $line-border: $lines-width solid $tree-lines-color;
-$line-border-erase: ($lines-width + 1px) solid #fff;
+$line-border-erase: ($lines-width + 1px) solid $background-color;
+
+$border-color: lighten($secondary-color, 50%);
+$nullable-color: #3195a6;
+$hint-border: 1px dotted rgba(38, 50, 56, 0.4);
 
 $param-name-height: 20px;
 
 $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 
-.param-name {
-  position: relative;
-  border-left: $line-border;
-  padding: $cell-padding 0;
-  vertical-align: top;
-  line-height: $param-name-height;
-
-  white-space: nowrap;
-  font-size: 0.929em;
-  font-weight: $regular;
-
-  box-sizing: border-box;
-}
-
 .param-name-wrap {
   display: inline-block;
   padding-right: $cell-spacing;
@@ -32,10 +22,9 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 }
 
 .param-info {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid $border-color;
   padding: $cell-padding 0;
   width: 75%;
-  line-height: 1em;
 
   box-sizing: border-box;
 }
@@ -46,7 +35,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   margin-right: 6px;
   margin-left: 6px;
   border-radius: $border-radius;
-  background-color: rgba($primary-color, .1);
+  background-color: rgba($primary-color, 0.1);
   padding: 0 4px;
   color: rgba($primary-color, 0.7);
 }
@@ -58,7 +47,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 .param-required {
   vertical-align: middle;
   line-height: $param-name-height;
-  color: #f00;
+  color: $red;
   font-size: 12px;
   font-weight: bold;
 }
@@ -66,7 +55,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
 .param-nullable {
   vertical-align: middle;
   line-height: $param-name-height;
-  color: #3195a6;
+  color: $nullable-color;
   font-size: 12px;
   font-weight: bold;
 }
@@ -77,82 +66,103 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   color: rgba($black, 0.4);
   font-size: 0.929em;
   font-weight: normal;
+
+  &.array::before {
+    content: $array-text;
+    color: $black;
+    font-weight: $base-font-weight;
+  }
+
+  &.tuple::before {
+    content: $tuple-text;
+    color: $black;
+    font-weight: $base-font-weight;
+  }
+
+  &.with-hint {
+    display: inline-block;
+    margin-bottom: 0.4em;
+    border-bottom: $hint-border;
+    padding: 0;
+    cursor: help;
+  }
+
+  &-trivial {
+    display: inline-block;
+  }
+
+  &-file {
+    font-weight: bold;
+    text-transform: capitalize;
+  }
 }
 
-.param-type.array:before {
+// tree
-  content: "Array of ";
-  color: $black;
-  font-weight: $base-font-weight;
-}
-
-.param-type.tuple:before {
-  content: "Tuple";
-  color: $black;
-  font-weight: $base-font-weight;
-}
-
-.param-type.with-hint {
-  display: inline-block;
-  margin-bottom: 0.4em;
-  border-bottom: 1px dotted rgba(38,50,56,0.4);
-  padding: 0;
-  cursor: help;
-}
-
-.param-type-trivial {
-  display: inline-block;
-}
-
-.param-type-file {
-  font-weight: bold;
-  text-transform: capitalize;
-}
-
-/* tree */
 
 // Bullet
 
-.param-name > span:before {
+.param-name {
-  content: "";
+  border-left: $line-border;
-  display: inline-block;
+  box-sizing: border-box;
-  width: $bullet-size;
-  height: $bullet-size + 6;
-  background-color: $primary-color;
-  margin: 0 $bullet-margin;
-  vertical-align: middle;
-}
-
-.param-name > span:after {
-  content: "";
-  position: absolute;
-  border-top: $line-border;
-  width: $bullet-margin;
-  left: 0;
-  top: ($param-name-height/2) + $cell-padding + 1;
-}
-
- .param:first-of-type > .param-name:before {
-  content: "";
-  display: block;
-  position: absolute;
-  left: -$lines-width;
-  top: 0;
-  border-left: $line-border-erase;
-  height: ($param-name-height/2) + $cell-padding + 1;
-}
-
-.param:last-of-type > .param-name, .param.last > .param-name {
   position: relative;
 
-  &:after {
+  padding: $cell-padding 0;
-    content: "";
+  vertical-align: top;
+  line-height: $param-name-height;
+
+  white-space: nowrap;
+  font-size: 0.929em;
+  font-weight: $regular;
+
+  > span::before {
+    content: '';
+    display: inline-block;
+    width: $bullet-size;
+    height: $bullet-size + 6;
+    background-color: $primary-color;
+    margin: 0 $bullet-margin;
+    vertical-align: middle;
+  }
+
+  > span::after {
+    content: '';
+    position: absolute;
+    border-top: $line-border;
+    width: $bullet-margin;
+    left: 0;
+    top: ($param-name-height / 2) + $cell-padding + 1;
+  }
+}
+
+.param:first-of-type {
+
+  > .param-name::before {
+    content: '';
     display: block;
     position: absolute;
-    left: -$lines-width - 1px;
+    left: -$lines-width;
+    top: 0;
     border-left: $line-border-erase;
-    top: ($param-name-height/2) + $cell-padding + $lines-width + 1;
+    height: ($param-name-height / 2) + $cell-padding + 1;
-    background-color: white;
+  }
-    bottom: 0;
+}
+
+.param:last-of-type,
+.param.last {
+
+  > .param-name {
+    position: relative;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      left: -$lines-width - 1px;
+      border-left: $line-border-erase;
+      top: ($param-name-height / 2) + $cell-padding + $lines-width + 1;
+      background-color: $background-color;
+      bottom: 0;
+    }
   }
 }
 
@@ -160,33 +170,60 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
   border-left-color: transparent;
 }
 
-.param-schema .param-wrap:first-of-type .param-name:before {
+.param-schema {
-  display: none !important;
+  .param-wrap:first-of-type {
+    .param-name::before {
+      display: none;
+    }
+  }
 }
 
-.param-schema.last > td {
+.param-schema.last {
-  border-left: 0;
+  > td {
+    border-left: 0;
+  }
 }
 
 .param-enum {
   color: $text-color;
-  font-size: 13px;
+  font-size: 0.95em;
 
-  &:before {
+  &::before {
-    content: 'Values: {';
+    content: 'Valid values: ';
-  }
-
-  &:after {
-    content: '}';
-  }
-
-  > .enum-value {
-    &:after {
-      content: ", ";
-    }
-
-    &:last-of-type:after {
-      content: none;
-    }
   }
 }
+
+.param-pattern {
+  color: $nullable-color;
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: '/';
+    margin: 0 3px;
+    font-size: 1.2em;
+    font-weight: bold;
+    vertical-align: bottom;
+  }
+}
+
+.param-default {
+  font-size: 0.95em;
+
+  &::before {
+    content: 'Default: ';
+  }
+}
+
+.param-enum-value,
+.param-default-value {
+  background-color: $background-color;
+  border: 1px solid rgba($secondary-color, 0.2);
+  margin: 2px 3px;
+  padding: 0 5px;
+  border-radius: 2px;
+  color: $secondary-color;
+  display: inline-block;
+  min-width: 20px;
+  text-align: center;
+}

lib/components/JsonSchema/json-schema.html

@@ -23,8 +23,9 @@
       </span>
       <span *ngIf="schema['x-nullable']" class="param-nullable">Nullable</span>
       <div *ngIf="schema.enum" class="param-enum">
-        <span *ngFor="let enumItem of schema.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
+        <span *ngFor="let enumItem of schema.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
       </div>
+      <span *ngIf="schema.pattern" class="param-pattern">{{schema.pattern}}</span>
     </span>
   </template>
   <template ngSwitchCase="tuple">
@@ -57,7 +58,7 @@
             <span class="param-name-wrap" (click)="subSchema.toggle()">
               <span class="param-name-content">
                 {{prop._name}}
-                <span class="param-enum-value" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
+                <span class="param-name-enumvalue" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
               </span>
               <svg *ngIf="prop._pointer" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
                 <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
@@ -72,14 +73,16 @@
               </span>
               <span *ngIf="prop._required" class="param-required">Required</span>
               <span *ngIf="prop['x-nullable']" class="param-nullable">Nullable</span>
-              <div *ngIf="prop.default != null">Default: {{prop.default | json}}</div>
+              <div class="param-default" *ngIf="prop.default != null">
-              <div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
+                <span class="param-default-value">{{prop.default | json}}</span>
-                <span *ngFor="let enumItem of prop.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
               </div>
+              <div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
+                <span *ngFor="let enumItem of prop.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
+              </div>
+              <span *ngIf="prop.pattern" class="param-pattern">{{prop.pattern}}</span>
             </div>
             <div class="param-description" [innerHtml]="prop.description | marked"></div>
             <div class="discriminator-info" *ngIf="prop.isDiscriminator">
-              <span>This field value determines the exact schema:</span>
               <drop-down (change)="selectDescendant($event)">
                 <option *ngFor="let descendant of descendants; let i=index"
                 [value]="i" [attr.selected]="descendant.active ? '' : null" >{{descendant.name}}</option>

lib/components/JsonSchema/json-schema.scss

@@ -1,8 +1,9 @@
 @import 'json-schema-common';
 
-/* styles for array-schema for array */
+// styles for array-schema for array
 $array-marker-font-sz: 13px;
 $array-marker-line-height: 1.5;
+
 :host {
   display: block;
 }
@@ -15,6 +16,7 @@ $array-marker-line-height: 1.5;
 .derived-schema {
   display: none;
 }
+
 .derived-schema.active {
   display: block;
 }
@@ -156,13 +158,7 @@ table {
 }
 
 .discriminator-info {
-  font-weight: $regular;
+  margin-top: 5px;
-  margin-bottom: 10px;
-
-  > span {
-    font-size: 0.9em;
-    font-weight: $light;
-  }
 }
 
 .discriminator-wrap:not(.empty) > td {
@@ -214,7 +210,7 @@ li:before {
   }
 }
 
-.param-enum-value {
+.param-name-enumvalue {
   padding: 2px;
   background-color: #e6ebf6;
 

lib/components/Method/method.html

@@ -13,12 +13,12 @@
     <responses-list pointer="{{pointer}}/responses"> </responses-list>
 </div>
 <div class="method-samples">
-    <h5>Definition</h5>
+    <h4 class="method-params-subheader">Definition</h4>
 
     <div class="method-endpoint">
       <h5 class="http-method" [ngClass]="method.httpMethod">{{method.httpMethod}}</h5>
       <span select-on-click><!--
-      --><span class="api-url">{{method.apiUrl}}</span><span class="path">{{method.path}}</span><!--
+      --><span class="method-api-url">{{method.apiUrl}}</span><span class="method-api-url-path">{{method.path}}</span><!--
   --></span>
     </div>
 

lib/components/Method/method.scss

@@ -12,14 +12,6 @@
   border-bottom: 0;
 }
 
-h2 {
-  color: $secondary-color;
-}
-
-responses-list, params-list {
-  display: block;
-}
-
 .method-header {
   margin-bottom: .9em;
 }
@@ -35,7 +27,7 @@ responses-list, params-list {
   overflow-x: auto;
 }
 
-.method-endpoint > h5 {
+.method-endpoint > .method-params-subheader {
   padding-top: 1px;
   padding-bottom: 0;
   margin: 0;
@@ -46,43 +38,42 @@ responses-list, params-list {
   border-radius: $border-radius;
 }
 
-.api-url {
+.method-api-url {
   color: rgba(#ffffff, .6);
   margin-left: 10px;
   margin-top: 2px;
   position: relative;
   top: 1px;
   font-family: $headers-font, $headers-font-family;
-  font-size: 0.929em!important;
+  font-size: 0.929em;
-}
 
-.path {
+  &-path {
-  font-family: $headers-font, $headers-font-family;
+    font-family: $headers-font, $headers-font-family;
-  position: relative;
+    position: relative;
-  top: 1px;
+    top: 1px;
-  color: #ffffff;
+    color: #ffffff;
-  font-size: 0.929em!important;
+  }
 }
 
 .method-tags {
   margin-top: 20px;
-}
 
-.method-tags a {
+  > a {
-  font-size: 16px;
+    font-size: 16px;
-  color: #999;
+    color: #999;
-  display: inline-block;
+    display: inline-block;
-  padding: 0 0.5em;
+    padding: 0 0.5em;
-  text-decoration: none;
+    text-decoration: none;
-}
 
-.method-tags a:before {
+    &:before {
-  content: '#';
+      content: '#';
-  margin-right: -0.4em;
+      margin-right: -0.4em;
-}
+    }
 
-.method-tags a:first-of-type {
+    &:first-of-type {
-  padding: 0;
+      padding: 0;
+    }
+  }
 }
 
 .method-content, .method-samples {
@@ -93,20 +84,16 @@ responses-list, params-list {
 
 .method-content {
   width: 100% - $samples-panel-width;
-  padding: 40px;
+  padding: $section-spacing;
 }
 
 .method-samples {
   color: $sample-panel-color;
   width: 40%;
-  padding: 40px;
+  padding: $section-spacing;
   background: $samples-panel-bg-color;
 }
 
-responses-samples {
-  display: block;
-}
-
 .method-samples header,
 .method-samples > h5 {
   color: $sample-panel-headers-color;
@@ -137,6 +124,8 @@ responses-samples {
   background: #ffffff;
   padding: 3px 10px;
   text-transform: uppercase;
+  display: inline-block;
+  margin: 0;
 }
 
 [select-on-click] {

lib/components/Method/method.ts

@@ -3,6 +3,7 @@ import { Input, Component, OnInit, ChangeDetectionStrategy } from '@angular/core
 import JsonPointer from '../../utils/JsonPointer';
 import { BaseComponent, SpecManager } from '../base';
 import { SchemaHelper } from '../../services/schema-helper.service';
+import { OptionsService } from '../../services/options.service';
 
 @Component({
   selector: 'method',
@@ -16,13 +17,17 @@ export class Method extends BaseComponent implements OnInit {
 
   method:any;
 
-  constructor(specMgr:SpecManager) {
+  constructor(specMgr:SpecManager, private optionsService: OptionsService) {
     super(specMgr);
   }
 
   init() {
     this.method = {};
-    this.method.apiUrl = this.specMgr.apiUrl;
+    if (this.optionsService.options.hideHostname) {
+      this.method.apiUrl = this.specMgr.basePath;
+    } else {
+      this.method.apiUrl = this.specMgr.apiUrl;
+    }
     this.method.httpMethod = JsonPointer.baseName(this.pointer);
     this.method.path = JsonPointer.baseName(this.pointer, 2);
     this.method.info = this.componentSchema;

lib/components/MethodsList/methods-list.scss

@@ -1,7 +1,11 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+  overflow: hidden;
+}
 .tag-info {
-  padding: 40px;
+  padding: $section-spacing;
   box-sizing: border-box;
   background-color: white;
   width: 60%;

lib/components/ParamsList/params-list.html

@@ -16,10 +16,13 @@
             title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
             <span class="param-range" *ngIf="param._range"> {{param._range}} </span>
             <span *ngIf="param.required" class="param-required">Required</span>
-            <div class="default" *ngIf="param.default != null">Default: {{param.default | json}}</div>
+            <div class="param-default" *ngIf="param.default != null">
-            <div *ngIf="param.enum" class="param-enum">
+              <span class="param-default-value">{{param.default | json}}</span>
-              <span *ngFor="let enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
             </div>
+            <div *ngIf="param.enum" class="param-enum">
+              <span *ngFor="let enumItem of param.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
+            </div>
+            <span *ngIf="param.pattern" class="param-pattern">{{param.pattern}}</span>
           </div>
           <div class="param-description" [innerHtml]="param.description | marked"></div>
         </div>

lib/components/Redoc/redoc.html

@@ -7,7 +7,7 @@
       <api-logo> </api-logo>
       <side-menu> </side-menu>
   </div>
-  <div id="api-content">
+  <div class="api-content">
     <warnings></warnings>
     <api-info></api-info>
     <methods-list> </methods-list>

lib/components/Redoc/redoc.scss

@@ -1,88 +1,64 @@
 @import '../../shared/styles/variables';
 
 :host {
-    display: block;
+  display: block;
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
-    -moz-tap-highlight-color: rgba(0,0,0,0);
+  -moz-tap-highlight-color: rgba(0,0,0,0);
-    -ms-tap-highlight-color: rgba(0,0,0,0);
+  -ms-tap-highlight-color: rgba(0,0,0,0);
-    -o-tap-highlight-color: rgba(0,0,0,0);
+  -o-tap-highlight-color: rgba(0,0,0,0);
-    tap-highlight-color: rgba(0,0,0,0);
+  tap-highlight-color: rgba(0,0,0,0);
-    -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
-    font-smoothing: antialiased;
+  font-smoothing: antialiased;
-    -webkit-osx-font-smoothing: grayscale;
+  -webkit-osx-font-smoothing: grayscale;
-    -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
-    osx-font-smoothing: grayscale;
+  osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
-    text-size-adjust: 100%;
+  text-size-adjust: 100%;
-    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  -ms-text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-    text-rendering: optimizeSpeed!important;
+  text-rendering: optimizeSpeed!important;
-    font-smooth: always;
+  font-smooth: always;
-    -webkit-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
-    -ms-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
-    text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 .redoc-wrap {
-    position: relative;
+  position: relative;
-    font-family: $base-font, $base-font-family;
+  font-family: $base-font, $base-font-family;
-    font-size: $em-size;
+  font-size: $em-size;
-    line-height: $base-line-height;
+  line-height: $base-line-height;
-    color: $text-color;
+  color: $text-color;
-}
-
-side-menu {
-    display: block;
-    box-sizing: border-box;
-}
-
-methods-list {
-    display: block;
-    overflow: hidden;
-}
-
-api-info, .side-bar {
-    display: block;
-    padding: 10px 0;
-}
-
-api-logo {
-    display: block;
-    text-align: center;
-
-    @media (max-width: $side-menu-mobile-breakpoint) {
-        display: none;
-    }
 }
 
 [sticky-sidebar] {
-    width: $side-bar-width;
+  width: $side-bar-width;
-    background-color: $side-bar-bg-color;
+  background-color: $side-bar-bg-color;
-    overflow-y: auto;
+  overflow-y: auto;
-    overflow-x: hidden;
+  overflow-x: hidden;
 
-    @media (max-width: $side-menu-mobile-breakpoint) {
-        z-index: 1;
-        width: 100%;
-        bottom: auto !important;
-    }
-}
-
-#api-content {
-  margin-left: $side-bar-width;
-  position: relative;
   @media (max-width: $side-menu-mobile-breakpoint) {
-      padding-top: 3em;
+    z-index: 1;
-      margin-left: 0;
+    width: 100%;
+    bottom: auto !important;
   }
 }
 
-#api-content:before {
+.api-content {
+  margin-left: $side-bar-width;
+  position: relative;
+  @media (max-width: $side-menu-mobile-breakpoint) {
+    padding-top: 3em;
+    margin-left: 0;
+  }
+}
+
+.api-content:before {
   content: "";
   background: $samples-panel-bg-color;
   height: 100%;
@@ -91,178 +67,19 @@ api-logo {
   right: 0;
   position: absolute;
   z-index: -1;
-}
 
-
+  @media (max-width: $right-panel-squash-breakpoint) {
-@media (max-width: $right-panel-squash-breakpoint) {
-  #api-content:before {
     display: none;
   }
 }
 
-/* global redoc styles */
-
-@for $index from 1 through 5 {
-    :host /deep/ h#{$index}{
-        margin-top: 0;
-        font-family: $headers-font, $headers-font-family;
-        color: $headers-color;
-        font-weight: $headers-font-weight;
-    }
-}
-
-:host /deep/ {
-    h1 { font-size: $h1; }
-    h2 { font-size: $h2; }
-    h3 { font-size: $h3; }
-    h4 { font-size: $h4; }
-    h5 { font-size: $h5; }
-
-    p {
-        font-family: $base-font, $base-font-family;
-        font-weight: $base-font-weight;
-        margin: 0;
-        margin-bottom: 1em;
-        line-height: $base-line-height;
-    }
-
-    a {
-        text-decoration: none;
-        color: $primary-color;
-    }
-
-    p > code {
-        color: $red;
-        border: 1px solid rgba(38,50,56,0.1);
-    }
-
-    .hint--inversed {
-      &:before {
-        border-top-color: #fff;
-      }
-
-      &:after {
-        background: #fff;
-        color: #383838;
-      }
-    }
-
-    @import '../../shared/styles/share-link';
-}
-
-footer {
-    position: relative;
-    text-align: right;
-    padding: 10px 40px;
-    font-size: 15px;
-    margin-top: -35px;
-    color: white;
-    a {
-      color: white;
-    }
-    strong {
-      font-size: 18px;
-    }
-}
-
-
-/* markdown elements */
-
-:host /deep/ .redoc-markdown-block {
-    pre {
-        font-family: Courier, monospace;
-        white-space: pre-wrap;
-        background-color: #263238;
-        color: white;
-        padding: 12px 14px 15px 14px;
-        overflow-x: auto;
-        line-height: normal;
-        border-radius: $border-radius;
-        border: 1px solid rgba(38,50,56,0.1);
-
-        code {
-            background-color: transparent;
-
-            &:before, &:after {
-                content: none;
-            }
-        }
-    }
-
-    code {
-        font-family: Courier, monospace;
-        background-color: rgba(38,50,56,0.04);
-        padding: 0.1em 0 0.2em 0;
-        font-size: 1em;
-        border-radius: $border-radius;
-
-        &:before, &:after {
-            letter-spacing: -0.2em;
-            content: "\00a0";
-        }
-    }
-
-    p:last-of-type {
-        margin-bottom: 0;
-    }
-
-    blockquote {
-        margin: 0;
-        margin-bottom: 1em;
-        padding: 0 15px;
-        color: #777;
-        border-left: 4px solid #ddd;
-    }
-
-    img {
-        max-width: 100%;
-        box-sizing: content-box;
-    }
-
-    ul, ol {
-        padding-left: 2em;
-        margin: 0;
-        margin-bottom: 1em;
-    }
-
-    table {
-        display: block;
-        width: 100%;
-        overflow: auto;
-        word-break: normal;
-        word-break: keep-all;
-        border-collapse: collapse;
-        border-spacing: 0;
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-    }
-
-    table tr {
-        background-color: #fff;
-        border-top: 1px solid #ccc;
-
-        &:nth-child(2n) {
-            background-color: #f8f8f8;
-        }
-    }
-
-    table th, table td {
-        padding: 6px 13px;
-        border: 1px solid #ddd;
-    }
-
-    table th {
-        text-align: left;
-        font-weight: bold;
-    }
-}
 
 .redoc-error {
   padding: 20px;
   text-align: center;
-  color: #cc0000;
+  color: $red;
   > h2 {
-    color: #cc0000;
+    color: $red;
     font-size: 40px;
   }
 }
@@ -272,3 +89,161 @@ footer {
   margin: 0 auto;
   font-size: 18px;
 }
+
+/* global redoc styles */
+
+@for $index from 1 through 5 {
+  :host /deep/ h#{$index}{
+    margin-top: 0;
+    font-family: $headers-font, $headers-font-family;
+    color: $secondary-color;
+    font-weight: $headers-font-weight;
+    line-height: 1.4em;
+  }
+}
+
+:host /deep/ {
+  h1 { font-size: $h1; color: $headers-color; }
+  h2 { font-size: $h2; }
+  h3 { font-size: $h3; }
+  h4 { font-size: $h4; }
+  h5 { font-size: $h5; }
+
+  p {
+    font-family: $base-font, $base-font-family;
+    font-weight: $base-font-weight;
+    margin: 0;
+    margin-bottom: 1em;
+    line-height: $base-line-height;
+  }
+
+  a {
+    text-decoration: none;
+    color: $primary-color;
+  }
+
+  p > code {
+    color: $red;
+    border: 1px solid rgba(38,50,56,0.1);
+  }
+
+  .hint--inversed {
+    &:before {
+      border-top-color: #fff;
+    }
+
+    &:after {
+      background: #fff;
+      color: #383838;
+    }
+  }
+
+  @import '../../shared/styles/share-link';
+}
+
+footer {
+  position: relative;
+  text-align: right;
+  padding: 10px $section-spacing;
+  font-size: 15px;
+  margin-top: -35px;
+  color: white;
+  a {
+    color: white;
+  }
+  strong {
+    font-size: 18px;
+  }
+}
+
+
+/* markdown elements */
+
+:host /deep/ .redoc-markdown-block {
+  pre {
+    font-family: Courier, monospace;
+    white-space: pre-wrap;
+    background-color: #263238;
+    color: white;
+    padding: 12px 14px 15px 14px;
+    overflow-x: auto;
+    line-height: normal;
+    border-radius: $border-radius;
+    border: 1px solid rgba(38,50,56,0.1);
+
+    code {
+      background-color: transparent;
+
+      &:before, &:after {
+        content: none;
+      }
+    }
+  }
+
+  code {
+    font-family: Courier, monospace;
+    background-color: rgba(38,50,56,0.04);
+    padding: 0.1em 0 0.2em 0;
+    font-size: 1em;
+    border-radius: $border-radius;
+
+    &:before, &:after {
+      letter-spacing: -0.2em;
+      content: "\00a0";
+    }
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    margin: 0;
+    margin-bottom: 1em;
+    padding: 0 15px;
+    color: #777;
+    border-left: 4px solid #ddd;
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: content-box;
+  }
+
+  ul, ol {
+    padding-left: 2em;
+    margin: 0;
+    margin-bottom: 1em;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+    word-break: normal;
+    word-break: keep-all;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #ccc;
+
+    &:nth-child(2n) {
+      background-color: #f8f8f8;
+    }
+  }
+
+  table th, table td {
+    padding: 6px 13px;
+    border: 1px solid #ddd;
+  }
+
+  table th {
+    text-align: left;
+    font-weight: bold;
+  }
+}

lib/components/RequestSamples/request-samples.scss

@@ -2,6 +2,7 @@
 
 :host {
   overflow: hidden;
+  display: block;
 }
 
 .action-buttons {
@@ -37,48 +38,48 @@
 }
 
 header {
-    font-family: $headers-font;
+  font-family: $headers-font;
-    font-size: $h5;
+  font-size: $h5;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    margin: 0;
+  margin: 0;
-    color: $sample-panel-headers-color;
+  color: $sample-panel-headers-color;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-weight: normal;
+  font-weight: normal;
 }
 
 :host /deep/ > tabs > ul li {
-    font-family: $headers-font;
+  font-family: $headers-font;
-    font-size: .9em;
+  font-size: .9em;
-    border-radius: $border-radius;
+  border-radius: $border-radius;
-    margin: 2px 0;
+  margin: 2px 0;
-    padding: 3px 10px 2px 10px;
+  padding: 3px 10px 2px 10px;
-    line-height: 1.25;
+  line-height: 1.25;
-    color: $sample-panel-headers-color;
+  color: $sample-panel-headers-color;
 
-    &:hover {
+  &:hover {
-        background-color: rgba(white, .1);
+    background-color: rgba(white, .1);
-        color: #ffffff;
+    color: #ffffff;
-    }
+  }
 
-    &.active {
+  &.active {
-        background-color: #ffffff;
+    background-color: #ffffff;
-        color: $text-color;
+    color: $text-color;
-    }
+  }
 }
 
 :host /deep/ tabs ul {
     padding-top: 10px;
 }
 
-pre {
+.code-sample pre {
-    overflow-x: auto;
+  overflow-x: auto;
-    word-break: break-all;
+  word-break: break-all;
-    word-wrap: break-word;
+  word-wrap: break-word;
-    white-space: pre-wrap;
+  white-space: pre-wrap;
-    margin-top: 0;
+  margin-top: 0;
-    overflow-x: auto;
+  overflow-x: auto;
-    padding: 20px;
+  padding: 20px;
-    border-radius: 4px;
+  border-radius: 4px;
-    background-color: #222d32;
+  background-color: #222d32;
-    margin-bottom: 36px;
+  margin-bottom: 36px;
 }

lib/components/RequestSamples/request-samples.ts

@@ -1,14 +1,14 @@
 'use strict';
 
 import { Component, ViewChildren, QueryList, Input,
- ChangeDetectionStrategy, OnInit, HostBinding } from '@angular/core';
+ ChangeDetectionStrategy, OnInit, HostBinding, ElementRef, NgZone } from '@angular/core';
 
 import { Subject } from 'rxjs/Subject';
 
 import { BaseComponent, SpecManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
 import { Tabs } from '../../shared/components/index';
-import { AppStateService } from '../../services/index';
+import { AppStateService, ScrollService } from '../../services/index';
 
 @Component({
   selector: 'request-samples',
@@ -26,14 +26,26 @@ export class RequestSamples extends BaseComponent implements OnInit {
   selectedLang: Subject<any>;
   samples: Array<any>;
 
-  constructor(specMgr:SpecManager, public appState:AppStateService) {
+  constructor(
+    specMgr:SpecManager,
+    public appState:AppStateService,
+    private scrollService: ScrollService,
+    private el: ElementRef,
+    private zone: NgZone
+  ) {
     super(specMgr);
 
     this.selectedLang = this.appState.samplesLanguage;
   }
 
   changeLangNotify(lang) {
+    let relativeScrollPos = this.scrollService.relativeScrollPos(this.el.nativeElement);
     this.selectedLang.next(lang);
+    // do scroll in the end of VM turn to have it seamless
+    let subscription = this.zone.onMicrotaskEmpty.subscribe(() => {
+      this.scrollService.scrollTo(this.el.nativeElement, relativeScrollPos);
+      subscription.unsubscribe();
+    });
   }
 
   init() {

lib/components/ResponsesList/responses-list.scss

@@ -1,9 +1,13 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 .responses-list-header {
   font-size: 18px;
   padding: 0.2em 0;
-  margin: 3em 0 1.1em 0;
+  margin: 3em 0 1.1em;
   color: #253137;
   font-weight: normal;
 }
@@ -45,13 +49,13 @@ header {
   margin-right: 6px;
   margin-left: 6px;
   border-radius: $border-radius;
-  background-color: rgba($primary-color, .1);
+  background-color: rgba($primary-color, 0.1);
   padding: 0 4px;
   color: rgba($primary-color, 0.7);
 }
 
-.header-type.array:before {
+.header-type.array::before {
-  content: "Array of ";
+  content: $array-text;
   color: $black;
   font-weight: $base-font-weight;
 }

lib/components/ResponsesSamples/responses-samples.scss

@@ -2,46 +2,39 @@
 
 :host {
   overflow: hidden;
-}
+  display: block;
-
-tab, tabs {
-    display: block;
-}
-
-schema-sample {
-    display: block;
 }
 
 header {
-    font-family: $headers-font;
+  font-family: $headers-font;
-    font-size: 0.929em;
+  font-size: 0.929em;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    margin: 0;
+  margin: 0;
-    color: $sample-panel-headers-color;
+  color: $sample-panel-headers-color;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    font-weight: normal;
+  font-weight: normal;
 }
 
 :host /deep/ > tabs > ul li {
-    font-family: $headers-font;
+  font-family: $headers-font;
-    font-size: 0.929em;
+  font-size: 0.929em;
-    border-radius: $border-radius;
+  border-radius: $border-radius;
-    margin: 2px 0;
+  margin: 2px 0;
-    padding: 2px 8px 3px 8px;
+  padding: 2px 8px 3px 8px;
-    color: $sample-panel-headers-color;
+  color: $sample-panel-headers-color;
-    line-height: 1.25;
+  line-height: 1.25;
 
-    &:hover {
+  &:hover {
-        color: #ffffff;
+    color: #ffffff;
-        background-color: rgba(white, .1);
+    background-color: rgba(white, .1);
-    }
+  }
 
-    &.active {
+  &.active {
-        background-color: white;
+    background-color: white;
-        color: $black;
+    color: $black;
-    }
+  }
 }
 
 :host /deep/ tabs ul {
-    padding-top: 10px;
+  padding-top: 10px;
 }

lib/components/SchemaSample/schema-sample.scss

@@ -1,5 +1,9 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 pre {
   background-color: transparent;
   padding: 0;

lib/components/SecurityDefinitions/security-definitions.html

@@ -2,39 +2,37 @@
   <h2 class="sharable-header" attr.section="section/Authentication/{{def.name}}">
     <a class="share-link" href="#section/Authentication/{{def.name}}"></a>{{def.name}}</h2>
   <div [innerHTML]="def.details.description | marked"></div>
-  <div class="redoc-markdown-block"> <!-- apply md styles to table -->
+  <table class="security-details">
-    <table class="details">
+    <tr>
-      <tr>
+      <th> Security scheme type: </th>
-        <th> Security scheme type: </th>
+      <td> {{def.details._displayType}} </td>
-        <td> {{def.details._displayType}} </td>
+    </tr>
-      </tr>
+    <tr *ngIf="def.details.type === 'apiKey'">
-      <tr *ngIf="def.details.type === 'apiKey'">
+      <th> {{def.details.in}} parameter name:</th>
-        <th> {{def.details.in}} parameter name:</th>
+      <td> {{def.details.name}} </td>
-        <td> {{def.details.name}} </td>
+    </tr>
-      </tr>
-      <template [ngIf]="def.details.type === 'oauth2'">
-        <tr>
-          <th> OAuth2 Flow</th>
-          <td> {{def.details.flow}} </td>
-        </tr>
-        <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
-          <th> Authorization URL </th>
-          <td> {{def.details.authorizationUrl}} </td>
-        </tr>
-        <tr *ngIf="def.details.flow !== 'implicit'">
-          <th> Token URL </th>
-          <td> {{def.details.tokenUrl}} </td>
-        </tr>
-      </template>
-    </table>
     <template [ngIf]="def.details.type === 'oauth2'">
-      <h3> OAuth2 Scopes </h3>
+      <tr>
-      <table class="scopes">
+        <th> OAuth2 Flow</th>
-        <tr *ngFor="let scopeName of def.details.scopes | keys">
+        <td> {{def.details.flow}} </td>
-          <th> {{scopeName}} </th>
+      </tr>
-          <td> {{def.details.scopes[scopeName]}} </td>
+      <tr *ngIf="def.details.flow === 'implicit' || def.details.flow === 'accessCode'">
-        </tr>
+        <th> Authorization URL </th>
-      </table>
+        <td> {{def.details.authorizationUrl}} </td>
+      </tr>
+      <tr *ngIf="def.details.flow !== 'implicit'">
+        <th> Token URL </th>
+        <td> {{def.details.tokenUrl}} </td>
+      </tr>
     </template>
-  </div>
+  </table>
+  <template [ngIf]="def.details.type === 'oauth2'">
+    <h3> OAuth2 Scopes </h3>
+    <table class="security-scopes-details">
+      <tr *ngFor="let scopeName of def.details.scopes | keys">
+        <th> {{scopeName}} </th>
+        <td> {{def.details.scopes[scopeName]}} </td>
+      </tr>
+    </table>
+  </template>
 </div>

lib/components/SecurityDefinitions/security-definitions.scss

@@ -1,16 +1,16 @@
 @import '../../shared/styles/variables';
 
+:host {
+  display: block;
+}
+
 .security-definition:not(:last-of-type) {
   border-bottom: 1px solid rgba($text-color, .3);
   padding-bottom: 20px;
 }
 
-h2, h3 {
-  color: $secondary-color;
-}
-
 :host h2 {
-  padding-top: 40px;
+  padding-top: $section-spacing;
 }
 
 h3 {
@@ -18,7 +18,7 @@ h3 {
   font-size: 1em;
 }
 
-:host .redoc-markdown-block table {
+:host .security-scopes-details, :host .security-details {
   margin-top: 20px;
 }
 

lib/components/SideMenu/side-menu.scss

@@ -1,72 +1,77 @@
 @import '../../shared/styles/variables';
 $mobile-menu-compact-breakpoint: 550px;
 
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
 .menu-header {
-    text-transform: uppercase;
+  text-transform: uppercase;
-    color: $headers-color;
+  color: $headers-color;
-    padding: 0 $side-menu-item-hpadding;
+  padding: 0 $side-menu-item-hpadding;
-    margin: 10px 0;
+  margin: 10px 0;
 }
 
 .menu-cat-header {
-    font-size: $h5;
+  font-size: $h5;
-    font-family: $headers-font, $headers-font-family;
+  font-family: $headers-font, $headers-font-family;
-    font-weight: $light;
+  font-weight: $light;
-    cursor: pointer;
+  cursor: pointer;
-    color: rgba($text-color, .6);
+  color: rgba($text-color, .6);
-    text-transform: uppercase;
+  text-transform: uppercase;
-    background-color: $side-bar-bg-color;
+  background-color: $side-bar-bg-color;
+  -webkit-transition: all .15s ease-in-out;
+  -moz-transition: all .15s ease-in-out;
+  -ms-transition: all .15s ease-in-out;
+  -o-transition: all .15s ease-in-out;
+  transition: all .15s ease-in-out;
+  display: block;
+  padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
+
+  &:hover,
+  &.active {
+    color: $primary-color;
+    background-color: $side-menu-active-bg-color;
+  }
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.menu-subitems {
+  margin: 0;
+  font-size: 0.929em;
+  line-height: 1.2em;
+  font-weight: $light;
+  color: rgba($text-color, .9);
+  padding: 0;
+  overflow: hidden;
+
+  &.active {
+    height: auto;
+  }
+
+  & li {
     -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
     -ms-transition: all .15s ease-in-out;
     -o-transition: all .15s ease-in-out;
     transition: all .15s ease-in-out;
-    display: block;
+    list-style: none inside none;
-    padding: $side-menu-item-vpadding*2.5 $side-menu-item-hpadding;
+    cursor: pointer;
-
+    background-color: $side-menu-active-bg-color;
-    &:hover,
+    padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
-    &.active {
+    padding-left: $side-menu-item-hpadding*2;
-        color: $primary-color;
-        background-color: $side-menu-active-bg-color;
-    }
-
-    &[hidden] {
-      display: none;
-    }
-}
-
-.menu-subitems {
-    margin: 0;
-    font-size: 0.929em;
-    line-height: 1.2em;
-    font-weight: $light;
-    color: rgba($text-color, .9);
-    padding: 0;
     overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-    &.active {
+  & li:hover,
-        height: auto;
+  & li.active {
-    }
+    background: darken($side-menu-active-bg-color, 6%);
-
+  }
-    & li {
-        -webkit-transition: all .15s ease-in-out;
-        -moz-transition: all .15s ease-in-out;
-        -ms-transition: all .15s ease-in-out;
-        -o-transition: all .15s ease-in-out;
-        transition: all .15s ease-in-out;
-        list-style: none inside none;
-        cursor: pointer;
-        background-color: $side-menu-active-bg-color;
-        padding: $side-menu-item-vpadding*2 $side-menu-item-hpadding*2;
-        padding-left: $side-menu-item-hpadding*2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    & li:hover,
-    & li.active {
-        background: darken($side-menu-active-bg-color, 6%);
-    }
 }
 
 
@@ -74,82 +79,82 @@ $mobile-menu-compact-breakpoint: 550px;
 }
 
 .mobile-nav {
-    display: none;
+  display: none;
+  height: 3em;
+  line-height: 3em;
+  box-sizing: border-box;
+  border-bottom: 1px solid #ccc;
+  cursor: pointer;
+
+  &:after {
+    content: "";
+    display: inline-block;
+    width: 3em;
     height: 3em;
-    line-height: 3em;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
-    box-sizing: border-box;
+    background-size: 70%;
-    border-bottom: 1px solid #ccc;
+    background-repeat: no-repeat;
-    cursor: pointer;
+    background-position: center;
 
-    &:after {
+    float: right;
-        content: "";
+    vertical-align: middle;
-        display: inline-block;
+  }
-        width: 3em;
-        height: 3em;
-        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
-        background-size: 70%;
-        background-repeat: no-repeat;
-        background-position: center;
 
-        float: right;
+  .menu-header {
-        vertical-align: middle;
+    padding: 0 10px 0 20px;
-    }
+    font-size: 0.95em;
-
+
-    .menu-header {
+    @media (max-width: $mobile-menu-compact-breakpoint) {
-        padding: 0 10px 0 20px;
+      display: none;
-        font-size: 0.95em;
-
-        @media (max-width: $mobile-menu-compact-breakpoint) {
-            display: none;
-        }
     }
+  }
 }
 
 @media (max-width: $side-menu-mobile-breakpoint) {
-    .mobile-nav {
+  .mobile-nav {
-        display: block;
+    display: block;
-    }
+  }
 
-    #resources-nav {
+  #resources-nav {
-        height: 0;
+    height: 0;
-        overflow-y: auto;
+    overflow-y: auto;
-        transition: all 0.3s ease;
+    transition: all 0.3s ease;
-    }
+  }
 
-    #resources-nav .menu-header {
+  #resources-nav .menu-header {
-        display: none;
+    display: none;
-    }
+  }
 
-    .menu-subitems {
+  .menu-subitems {
-        height: auto;
+    height: auto;
-    }
+  }
 }
 
 .selected-tag {
-    text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 .selected-endpoint:before {
-    content: "/";
+  content: "/";
-    padding: 0 2px;
+  padding: 0 2px;
-    color: #ccc;
+  color: #ccc;
 }
 
 .selected-endpoint:empty:before {
-    display: none;
+  display: none;
 }
 
 .selected-item-info {
-    white-space: nowrap;
+  white-space: nowrap;
-    text-overflow: ellipsis;
+  text-overflow: ellipsis;
-    overflow: hidden;
+  overflow: hidden;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    max-width: 350px;
+  max-width: 350px;
 
-    @media (max-width: $mobile-menu-compact-breakpoint) {
+  @media (max-width: $mobile-menu-compact-breakpoint) {
-        display: inline-block;
+    display: inline-block;
-        padding: 0 20px;
+    padding: 0 20px;
-        max-width: 80%;
+    max-width: 80%;
-        max-width: calc(100% - 4em);
+    max-width: calc(100% - 4em);
-    }
+  }
 }

lib/services/content-projector.service.ts

@@ -27,11 +27,14 @@ export class ContentProjector {
     }
 
     let parentCompRef = parentView.createComponent(componentFactory, null, contextInjector, [projectedNodes]);
+
+    // using private property to get AppElement instance
     let appElement = (<any>parentView)._element;
     appElement.nestedViews = appElement.nestedViews || [];
     for (let i=0; i < componentRefs.length; i++) {
       let compRef = componentRefs[i];
       appElement.nestedViews.push((<any>compRef.hostView).internalView);
+      // attach appElement to parentView change detector
       (<any>compRef.hostView).internalView.addToContentChildren(appElement);
     }
     return parentCompRef;

lib/services/options.service.ts

@@ -8,7 +8,7 @@ const defaults = {
   disableLazySchemas: false
 };
 
-const OPTION_NAMES = new Set(['scrollYOffset', 'disableLazySchemas', 'specUrl', 'suppressWarnings']);
+const OPTION_NAMES = new Set(['scrollYOffset', 'disableLazySchemas', 'specUrl', 'suppressWarnings', 'hideHostname']);
 
 @Injectable()
 export class OptionsService {
@@ -69,5 +69,6 @@ export class OptionsService {
 
     if (isString(this._options.disableLazySchemas)) this._options.disableLazySchemas = true;
     if (isString(this._options.suppressWarnings)) this._options.suppressWarnings = true;
+    if (isString(this._options.hideHostname)) this._options.hideHostname = true;
   }
 }

lib/services/scroll.service.ts

@@ -42,17 +42,22 @@ export class ScrollService {
     return INVIEW_POSITION.INVIEW;
   }
 
-  scrollTo($el) {
+  scrollTo($el, offset:number = 0) {
     // TODO: rewrite this to use offsetTop as more reliable solution
     let subjRect = $el.getBoundingClientRect();
-    let offset = this.scrollY() + subjRect.top - this.scrollYOffset() + 1;
+    let posY = this.scrollY() + subjRect.top - this.scrollYOffset() + offset + 1;
     if (this.$scrollParent.scrollTo) {
-      this.$scrollParent.scrollTo(0, offset);
+      this.$scrollParent.scrollTo(0, posY);
     } else {
-      this.$scrollParent.scrollTop = offset;
+      this.$scrollParent.scrollTop = posY;
     }
   }
 
+  relativeScrollPos($el) {
+    let subjRect = $el.getBoundingClientRect();
+    return - subjRect.top + this.scrollYOffset() - 1;
+  }
+
   scrollHandler(evt) {
     let isScrolledDown = (this.scrollY() - this.prevOffsetY > 0);
     this.prevOffsetY = this.scrollY();

lib/shared/components/Tabs/tabs.scss

@@ -1,5 +1,9 @@
 @import '../../styles/variables';
 
+:host {
+  display: block;
+}
+
 ul {
   display: block;
   margin: 0;
@@ -12,9 +16,6 @@ li {
   cursor: pointer;
 }
 
-li.active {
-}
-
 .tab-success, .tab-error, .tab-redirect, .tab-info {
   &:before {
     content: "";

lib/shared/components/Zippy/zippy.scss

@@ -50,6 +50,12 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
 .zippy-indicator svg {
   height: 1.2em;
   vertical-align: middle;
+  transition: all 0.3s ease;
+  transform: rotateZ(-180deg);
+}
+
+.zippy-hidden > .zippy-title svg {
+ transform: rotateZ(0);
 }
 
 

lib/shared/styles/_variables.scss

@@ -1,48 +1,52 @@
 // Colors
 // ---------------------------
-$primary-color : #0033a0;
+$primary-color: #0033a0;
-$secondary-color : #263238;
+$secondary-color: #263238;
-$black : #263238;
+$black: #263238;
-$green : #00aa13;
+$green: #00aa13;
-$yellow : #f1c400;
+$yellow: #f1c400;
-$red : #e53935;
+$red: #e53935;
+$background-color: #fff;
 
-$em-size : 14px;
+$em-size: 14px;
 
 // Font weights
 // ---------------------------
-$light : 300;
+$light: 300;
-$regular : 400;
+$regular: 400;
-$bold : 700;
+$bold: 700;
 
 // Base Font
 // ---------------------------
-$base-font : Roboto;
+$base-font: Roboto;
-$base-font-family : sans-serif;
+$base-font-family: sans-serif;
-$base-font-weight : $light;
+$base-font-weight: $light;
-$base-font-size : 1em;
+$base-font-size: 1em;
-$base-line-height : 1.55em;
+$base-line-height: 1.55em;
-$text-color : $black;
+$text-color: $black;
 
 // Heading Font
 // ---------------------------
-$headers-font : Montserrat;
+$headers-font: Montserrat;
-$headers-font-family : sans-serif;
+$headers-font-family: sans-serif;
-$headers-font-weight : $regular;
+$headers-font-weight: $regular;
-$headers-color : $primary-color;
+$headers-color: $primary-color;
-$method-headers-color : $primary-color;
+$method-headers-color: $primary-color;
 $h1: 1.85714285714286em;
 $h2: 1.5714285714285714em;
 $h3: 1.2857142857142858em;
 $h4: 1.1428571428571428em;
 $h5: 0.929em;
 
+// spacings
+$section-spacing: 40px;
+
 // Side Bar
 // ---------------------------
 $side-bar-width: 260px;
-$side-bar-bg-color: #FAFAFA;
+$side-bar-bg-color: #fafafa;
 $side-menu-item-color: #384248;
-$side-menu-even-bg-color: #F0F0F0;
+$side-menu-even-bg-color: #f0f0f0;
 $side-menu-active-bg-color: #f0f0f0;
 $side-menu-item-hpadding: 20px;
 $side-menu-item-vpadding: 5px;
@@ -54,7 +58,7 @@ $samples-panel-width: 40%;
 $sample-panel-headers-color: lighten($black, 50%);
 $sample-panel-color: lighten($black, 80%);
 
-$tree-lines-color: rgba($primary-color, .5);
+$tree-lines-color: rgba($primary-color, 0.5);
 
 $side-menu-mobile-breakpoint: 1000px;
 $right-panel-squash-breakpoint: 1100px;
@@ -62,3 +66,7 @@ $right-panel-squash-breakpoint: 1100px;
 // Border Radius
 // ---------------------------
 $border-radius: 2px;
+
+// texts
+$array-text: 'Array of ';
+$tuple-text: 'Tuple ';

lib/utils/spec-manager.ts

@@ -10,6 +10,7 @@ import { MdRenderer } from './md-renderer';
 export class SpecManager {
   public _schema: any = {};
   public apiUrl: string;
+  public basePath: string;
 
   public spec = new BehaviorSubject<any|null>(null);
   private _instance: any;
@@ -65,8 +66,8 @@ export class SpecManager {
     }
 
     let host = this._schema.host || urlParts.host;
-    let basePath = this._schema.basePath || '/';
+    this.basePath = this._schema.basePath || '/';
-    this.apiUrl = protocol + '://' + host + basePath;
+    this.apiUrl = protocol + '://' + host + this.basePath;
     if (this.apiUrl.endsWith('/')) {
       this.apiUrl = this.apiUrl.substr(0, this.apiUrl.length - 1);
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "redoc",
   "description": "Swagger-generated API Reference Documentation",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "repository": {
     "type": "git",
     "url": "git://github.com/Rebilly/ReDoc"
@@ -61,10 +61,9 @@
     "branch-release": "^1.0.3",
     "chalk": "^1.1.3",
     "codelyzer": "^1.0.0-beta.3",
-    "copy-webpack-plugin": "^3.0.1",
     "core-js": "^2.4.1",
     "coveralls": "^2.11.9",
-    "css-loader": "^0.24.0",
+    "css-loader": "^0.25.0",
     "deploy-to-gh-pages": "^1.1.2",
     "http-server": "^0.9.0",
     "istanbul-instrumenter-loader": "^0.2.0",
@@ -96,16 +95,15 @@
     "style-loader": "^0.13.1",
     "ts-helpers": "^1.1.1",
     "tslint": "^3.15.1",
-    "tslint-stylish": "^2.1.0-beta",
     "typescript": "^2.0.3",
     "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.6",
+    "webpack-dev-server": "^2.1.0-beta.10",
     "zone.js": "^0.6.25"
   },
   "dependencies": {
     "dropkickjs": "^2.1.10",
     "hint.css": "^2.3.2",
-    "json-pointer": "^0.5.0",
+    "json-pointer": "^0.6.0",
     "json-schema-ref-parser": "^3.1.2",
     "openapi-sampler": "^0.3.2",
     "prismjs": "^1.5.1",

tests/e2e/redoc.e2e.js

@@ -106,6 +106,7 @@ if (process.env.JOB === 'e2e-guru') {
     delete apisGuruList['clarify.io']; // non-string references
     //delete apisGuruList['pushpay.com']; // https://github.com/Rebilly/ReDoc/issues/30
     delete apisGuruList['bbci.co.uk']; // too big
+    delete apisGuruList['bbc.com']; // too big
 
     // run quick version of e2e test on all builds except releases
     if (process.env.TRAVIS && !process.env.TRAVIS_TAG) {