Merge commit '278e5d79177a5ee47dd90cd77af4c9d839c7cadb' into releases

2024-11-27 19:13:44 +03:00 · 2017-09-21 15:50:32 +00:00 · 2017-09-21 15:50:32 +00:00 · 7568048dc9
commit 7568048dc9
parent 4dda729582 278e5d7917
16 changed files with 627 additions and 450 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,5 +0,0 @@
-build/
-gulpfile.js
-*.conf.js
-*.config.js
-demo/
--- a/.travis.yml
+++ b/.travis.yml
@ -23,6 +23,7 @@ env:
  - secure: apiavCfCQngL9Een1m7MIXMf3bqO3rY4YY59TMBl/yFKi80CEsHPHhgVUkl6hC+aM5PeBt/vgjh37rHMX31j/pcSZ4Z8SO/4Bwr36iHfhSxSEuAQog8P07qWqH7wYYWGIVmF682stgl0fYF+GN92sx/6edFVzsWVECf2G7imtICKSTbhKGm3Dhn2JwGnhD7eyfgZ33omgiaswumdu0xABoXDfqSZR+16fC4Ap5rhv3fXO9ndvRNy1STn376nT+my6e86UrQL4aS/S+HNHgIe1BUs+5cOp6Jgw6t0ie7phY0EAiECsRxy9K4e3Dctv9m6+Wma4+vy65MS0zGyrqey6oyV4l827sCOjrD1qcqc9bX6FlMSouVoNfE4ZjINNAbgigTaiLSoDSPcf5I5smkkM2ezzFOMSZwZxNdaNL2LKb97vc8m/ZUkv0sKZyT7oqVL7aJweEivsSHj5l2KR8Z7XrVB1y2eI6GvyTSa/d+CL4dSRzjh8+IRN047YBrdTKD5IkdT0upfoBu14WPUfFmLKxX+iMCslXRWb6kwojhrWNYmZvL65KRAzJ6+eIPDG/W5QUOpYyYT77bLlBQjVo6NmVvl9v3HMECq9CHH0ivKFBGPiKMOx7cJkTax3FuyznOW2WCXB9kTb5Zk9toaiNlSp9L6ll/h2Eyxa6n6sWUgmmM=
 addons:
  sauce_connect: true
+  chrome: stable
 cache: yarn
 before_install: if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
 before_deploy:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,19 @@
+<a name="1.19.0"></a>
+# [1.19.0](https://github.com/Rebilly/ReDoc/compare/v1.18.1...v1.19.0) (2017-09-21)
+
+
+### Bug Fixes
+
+* Clearly label version compatibility ([8d849a6](https://github.com/Rebilly/ReDoc/commit/8d849a6)), closes [#338](https://github.com/Rebilly/ReDoc/issues/338)
+* HEAD http verb support ([d8b6e02](https://github.com/Rebilly/ReDoc/commit/d8b6e02)), closes [#342](https://github.com/Rebilly/ReDoc/issues/342)
+
+
+### Features
+
+* add ignoredHeaderParameters option ([56d62e5](https://github.com/Rebilly/ReDoc/commit/56d62e5))
+* add native-scrollbars option to workaround scrolling perf issues ([f2ed92c](https://github.com/Rebilly/ReDoc/commit/f2ed92c))
+
+
 <a name="1.18.1"></a>
 ## [1.18.1](https://github.com/Rebilly/ReDoc/compare/v1.17.0...v1.18.1) (2017-08-28)

--- a/README.md
+++ b/README.md
@ -18,7 +18,7 @@

 ## Features
 - Extremely easy deployment
- The widest OpenAPI features support (yes, it supports even `discriminator`) <br>
+- The widest OpenAPI v2.0 features support (yes, it supports even `discriminator`) <br>
 ![](docs/images/discriminator-demo.gif)
 - Neat **interactive** documentation for nested objects <br>
 ![](docs/images/nested-demo.gif)
@ -32,6 +32,7 @@
 - Multiple ReDoc instances on single page ([example](demo/examples/multiple-apis/index.html))

 ## Roadmap
+  - [ ] [OpenAPI v3.0 support](https://github.com/Rebilly/ReDoc/issues/312)
  - [x] ~~performance optimizations~~
  - [x] ~~better navigation (menu improvements + search)~~
  - [ ] ability to simple branding/styling
@ -44,6 +45,13 @@ We host the latest and all the previous ReDoc releases on GitHub Pages-based **C
 - `v1.x.x` release: https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js
 - `latest` release: https://rebilly.github.io/ReDoc/releases/latest/redoc.min.js this file is updated with each release of ReDoc and may introduce breaking changes. **Not recommended to use in production.** Use particular release or `v1.x.x`.

+## Version Guidance
+| ReDoc Release | OpenAPI Specification |
+|:--------------|:----------------------|
+| 1.19.x        | 2.0                   |
+| 1.18.x        | 2.0                   |
+| 1.17.x        | 2.0                   |
+
 ## Some Real-life usages
 - [Rebilly](https://rebilly.github.io/RebillyAPI)
 - [Docker Engine](https://docs.docker.com/engine/api/v1.25/)
@ -131,6 +139,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
 * [`x-displayName`](docs/redoc-vendor-extensions.md#x-displayname) - specify human-friendly names for the menu categories
 * [`x-tagGroups`](docs/redoc-vendor-extensions.md#x-tagGroups) - group tags by categories in the side menu
 * [`x-servers`](docs/redoc-vendor-extensions.md#x-servers) - ability to specify different servers for API (backported from OpenAPI 3.0)
+* [`x-ignoredHeaderParameters`](docs/redoc-vendor-extensions.md#x-ignoredHeaderParameters) - ability to specify header parameter names to ignore

 ### `<redoc>` tag attributes
 * `spec-url` - relative or absolute url to your spec file;
@ -148,6 +157,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
 * `no-auto-auth` - do not inject Authentication section automatically
 * `path-in-middle-panel` - show path link and HTTP verb in the middle panel instead of the right one
 * `hide-loading` - do not show loading animation. Useful for small docs
+* `native-scrollbars` - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs)

 ## Advanced usage
 Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
--- a/demo/index.html
+++ b/demo/index.html
@ -30,7 +30,6 @@
    <script src="main.js"> </script>
    <script src="/webpack-dev-server.js"></script>
    <script src="/polyfills.js"></script>
-    <script src="/vendor.js"></script>
    <script src="/redoc.js"></script>
  </body>
 </html>
--- a/docs/redoc-vendor-extensions.md
+++ b/docs/redoc-vendor-extensions.md
@ -54,7 +54,28 @@ x-tagGroups:
      - Secondary Stats
 ```

-#### <a name="logoObject"></a>Logo Object
+#### x-ignoredHeaderParameters
+
+
+| Field Name                  |	Type	        | Description |
+| :-------------------------- | :-----------: | :---------- |
+| x-ignoredHeaderParameters   | [ string ] | A list of ignored headers |
+
+
+###### Usage in Redoc
+`x-ignoredHeaderParameters` is used to specify header parameter names which are ignored by ReDoc
+
+###### x-ignoredHeaderParameters example
+```yaml
+swagger: '2.0'
+info:
+  ...
+tags: [...]
+x-ignoredHeaderParameters:
+  - Accept
+  - User-Agent
+  - X-Test-Header
+```

 ### Info Object vendor extensions
 Extends OpenAPI [Info Object](http://swagger.io/specification/#infoObject)
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,51 +1,53 @@
-module.exports = function (config) {
+module.exports = function(config) {
  const testWebpackConfig = require('./build/webpack.test.js');
  const travis = process.env.TRAVIS;

  config.set({
-    frameworks: ['phantomjs-shim', 'jasmine', 'sinon', 'should'],
+    frameworks: ['jasmine', 'sinon', 'should'],
    preprocessors: {
-      './tests/spec-bundle.js': ['coverage', 'webpack', 'sourcemap']
+      './tests/spec-bundle.js': ['coverage', 'webpack', 'sourcemap'],
    },

    coverageReporter: {
-      type: 'in-memory'
+      type: 'in-memory',
    },

    remapCoverageReporter: {
      'text-summary': null,
      'text-lcov': './coverage/lcov.info',
-      'html': './coverage/html'
+      html: './coverage/html',
    },
    webpack: testWebpackConfig,
    webpackMiddleware: {
      stats: 'errors-only',
-      state: true
+      state: true,
    },
    client: {
      chai: {
-        truncateThreshold: 0
-      }
+        truncateThreshold: 0,
+      },
    },
    files: [
      { pattern: './tests/spec-bundle.js', watched: false },
      { pattern: 'tests/schemas/**/*.json', included: false },
      { pattern: 'tests/schemas/**/*.yml', included: false },
      { pattern: 'lib/**/*.html', included: false },
-      { pattern: 'lib/**/*.css', included: false }
+      { pattern: 'lib/**/*.css', included: false },
    ],

    proxies: {
      '/tests/schemas': '/base/tests/schemas',
      '/lib/': '/base/lib/',
-      '/node_modules/': '/base/node_modules/'
+      '/node_modules/': '/base/node_modules/',
    },
    colors: true,
    singleRun: true,
-    reporters: travis ? ['mocha', 'coverage',  'remap-coverage', 'coveralls'] : ['mocha', 'coverage', 'remap-coverage'],
+    reporters: travis
+      ? ['mocha', 'coverage', 'remap-coverage', 'coveralls']
+      : ['mocha', 'coverage', 'remap-coverage'],

-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadless'],

-    browserNoActivityTimeout: 60000
+    browserNoActivityTimeout: 60000,
  });
-}
+};
--- a/lib/components/EndpointLink/endpoint-link.scss
+++ b/lib/components/EndpointLink/endpoint-link.scss
@ -30,7 +30,7 @@
 }

 .operation-api-url {
-  color: rgba($black, .8);
+  color: rgba($black, 0.8);
  &-path {
    font-family: $headers-font, $headers-font-family;
    position: relative;
@ -146,4 +146,8 @@
  &.link {
    background-color: $link-color;
  }
+
+  &.head {
+    background-color: $head-color;
+  }
 }
--- a/lib/components/ParamsList/params-list.ts
+++ b/lib/components/ParamsList/params-list.ts
@ -1,7 +1,8 @@
-'use strict';
-import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
-import { BaseComponent, SpecManager } from '../base';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+
+import { OptionsService } from '../../services/options.service';
 import { SchemaHelper } from '../../services/schema-helper.service';
+import { BaseComponent, SpecManager } from '../base';

 function safePush(obj, prop, item) {
  if (!obj[prop]) obj[prop] = [];
@ -12,16 +13,16 @@ function safePush(obj, prop, item) {
  selector: 'params-list',
  templateUrl: './params-list.html',
  styleUrls: ['./params-list.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ParamsList extends BaseComponent implements OnInit {
-  @Input() pointer:string;
+  @Input() pointer: string;

  params: Array<any>;
  empty: boolean;
  bodyParam: any;

-  constructor(specMgr:SpecManager) {
+  constructor(specMgr: SpecManager, private options: OptionsService) {
    super(specMgr);
  }

@ -29,11 +30,20 @@ export class ParamsList extends BaseComponent implements OnInit {
    this.params = [];
    let paramsList = this.specMgr.getOperationParams(this.pointer);

-    paramsList = paramsList.map(paramSchema => {
-      let propPointer = paramSchema._pointer;
-      if (paramSchema.in === 'body') return paramSchema;
-      return SchemaHelper.preprocess(paramSchema, propPointer, this.pointer);
-    });
+    const igrnoredHeaders =
+      this.specMgr.schema['x-ignoredHeaderParameters'] ||
+      this.options.options.ignoredHeaderParameters ||
+      [];
+
+    paramsList = paramsList
+      .map(paramSchema => {
+        let propPointer = paramSchema._pointer;
+        if (paramSchema.in === 'body') return paramSchema;
+        return SchemaHelper.preprocess(paramSchema, propPointer, this.pointer);
+      })
+      .filter(param => {
+        return param.in !== 'header' || igrnoredHeaders.indexOf(param.name) < 0;
+      });

    let paramsMap = this.orderParams(paramsList);

--- a/lib/components/Redoc/redoc.scss
+++ b/lib/components/Redoc/redoc.scss
@ -4,11 +4,11 @@
  display: block;
  box-sizing: border-box;

-  -webkit-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);
-  -o-tap-highlight-color: rgba(0,0,0,0);
-  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);
+  -ms-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);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
@ -18,10 +18,10 @@
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
-  -webkit-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-rendering: optimizeSpeed!important;
+  -webkit-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-rendering: optimizeSpeed !important;
  font-smooth: always;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
@ -96,7 +96,6 @@ side-menu {
  }
 }

-
 .redoc-error {
  padding: 20px;
  text-align: center;
@ -131,7 +130,7 @@ side-menu {
    background-color: #333;
    border-radius: 3px;
    vertical-align: top;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAACgCAYAAADuDlcXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjQ5N0JDQUE3OTYxMUU0ODNGMUE0RUM3NjRDRTQyNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjQ5N0JDQkE3OTYxMUU0ODNGMUE0RUM3NjRDRTQyNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2NDk3QkM4QTc5NjExRTQ4M0YxQTRFQzc2NENFNDI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2NDk3QkM5QTc5NjExRTQ4M0YxQTRFQzc2NENFNDI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+mIrGwQAAAZ9JREFUeNrsmtuOwyAMRBmU//9lbx9208ayjQ1EarSDVFW56ARIGGZIIK/S3gWvX3X7LN3a6WxDHdPnnDBpcZHEOe3wrmLUMg2zatKykPOq1/5fK71tLIQR9jjYsaJfWdWAAcRsM2W1z9LNGcFkRlmtPhvpf7qmHAGEESZqLFr/qbHaCy4Is6oxLdvT+nWr0lLPCCPsFn+mA5e2UjLycL1o6qLMiapqRGoifVCDinrgU2mRyJthzZg3CSPs+2HhIM4YGq0a4oDgiGjYTKw20/OwUzAEuXz73YSqtdsV+F1a3eZpweFEGGG7Y3ULbJRk4nYPlEHbUi86wpNtbz4oB37PICOrLEdC9DKzFv7EkQ8tYY8Nr8tuyJrRsdpMrIJ0n4GPBmGEEUbYzRMKnFwug1B7rppmbCiyBjBrQ1vC8KW/CxrF7osNrRbxMjofWsIIuwU2vapnZfTRq4/wFXl3hG9bMzP6ZWV47LoB+Gym1/EyUleKI2GEPW8pQpu80bHLvsifSWFVAVEzo2VDTxxb9T16eO7sF0vmxPNPxPFHgAEA/rGUMXq/uWcAAAAASUVORK5CYII=');
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAACgCAMAAADZ0KclAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAA80lEQVR42uSWSwLCIAxEX+5/aa2QZBJw5UIt9QMdRqSPEAAw/TyvqzZf150NzdXL49qreXwXjeqz9bqN1tgJl/KLyaVrrL7K7gx+1vlNMqy+helOO4rfBGYZiEkq1ubQ3DeKvc97Et+d+e01vIZlLZZqb1WNJFd8ZKYsmv4Hh3H2fDgjMUI5WSExjiEZs7rEZ5T+/jQn9lhgsw53j/e9MQtxqPsbZY54M5fNl/MY/f1s7NbRSkYlYjc0KPsWMrmhIU9933ywxDiSE+upYNH8TdusUotllNvcAUzfnE/NC4OSYyklQhpdl9E4Tw0Cm4/G9xBgAO7VCkjWLOMfAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: 6px 4px;
    text-indent: -9000px;
@ -177,13 +176,18 @@ side-menu {
      background-position: 4px -131px;
      background-color: $link-color;
    }
+
+    &.head {
+      background-position: 6px -102px;
+      background-color: $head-color;
+    }
  }
 }

 /* global redoc styles */

@for $index from 1 through 5 {
-  :host /deep/ h#{$index}{
+  :host /deep/ h#{$index} {
    margin-top: 0;
    font-family: $headers-font, $headers-font-family;
    color: $secondary-color;
@ -194,11 +198,23 @@ side-menu {
 }

 :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; line-height: 20px; }
+  h1 {
+    font-size: $h1;
+    color: $headers-color;
+  }
+  h2 {
+    font-size: $h2;
+  }
+  h3 {
+    font-size: $h3;
+  }
+  h4 {
+    font-size: $h4;
+  }
+  h5 {
+    font-size: $h5;
+    line-height: 20px;
+  }

  p {
    font-family: $base-font, $base-font-family;
@ -215,7 +231,7 @@ side-menu {

  p > code {
    color: $red;
-    border: 1px solid rgba(38,50,56,0.1);
+    border: 1px solid rgba(38, 50, 56, 0.1);
  }

  .hint--inversed {
@ -247,7 +263,6 @@ footer {
  }
 }

-
 /* markdown elements */

 :host /deep/ .redoc-markdown-block {
@ -260,13 +275,14 @@ footer {
    overflow-x: auto;
    line-height: normal;
    border-radius: $border-radius;
-    border: 1px solid rgba(38,50,56,0.1);
+    border: 1px solid rgba(38, 50, 56, 0.1);

    code {
      background-color: transparent;
      color: white;

-      &:before, &:after {
+      &:before,
+      &:after {
        content: none;
      }
    }
@ -274,12 +290,12 @@ footer {

  code {
    font-family: Courier, monospace;
-    background-color: rgba(38,50,56,0.04);
+    background-color: rgba(38, 50, 56, 0.04);
    padding: 0.1em 0.2em 0.2em;
    font-size: 1em;
    border-radius: $border-radius;
    color: $red;
-    border: 1px solid rgba(38,50,56, 0.1);
+    border: 1px solid rgba(38, 50, 56, 0.1);
  }

  p:last-of-type {
@ -299,7 +315,8 @@ footer {
    box-sizing: content-box;
  }

-  ul, ol {
+  ul,
+  ol {
    padding-left: 2em;
    margin: 0;
    margin-bottom: 1em;
@ -332,7 +349,8 @@ footer {
    }
  }

-  table th, table td {
+  table th,
+  table td {
    padding: 6px 13px;
    border: 1px solid #ddd;
  }
--- a/lib/components/SideMenu/side-menu.scss
+++ b/lib/components/SideMenu/side-menu.scss
@ -9,6 +9,7 @@ $mobile-menu-compact-breakpoint: 550px;
 #resources-nav {
  position: relative;
  width: 100%;
+  overflow: scroll;
 }

 ul.menu-root {
--- a/lib/services/options.service.ts
+++ b/lib/services/options.service.ts
@ -20,7 +20,9 @@ const OPTION_NAMES = new Set([
  'noAutoAuth',
  'pathInMiddlePanel',
  'untrustedSpec',
-  'hideLoading'
+  'hideLoading',
+  'ignoredHeaderParameters',
+  'nativeScrollbars',
 ]);

 export interface Options {
@ -38,6 +40,8 @@ export interface Options {
  untrustedSpec?: boolean;
  hideLoading?: boolean;
  spec?: any;
+  ignoredHeaderParameters?: string[];
+  nativeScrollbars?: boolean;
 }

@Injectable()
@ -77,7 +81,7 @@ export class OptionsService {
    this._normalizeOptions();
  }

-  _normalizeOptions():void {
+  _normalizeOptions(): void {
    // modify scrollYOffset to always be a function
    if (!isFunction(this._options.scrollYOffset)) {
      if (isFinite(this._options.scrollYOffset)) {
@ -107,6 +111,8 @@ export class OptionsService {
    if (isString(this._options.pathInMiddlePanel)) this._options.pathInMiddlePanel = true;
    if (isString(this._options.untrustedSpec)) this._options.untrustedSpec = true;
    if (isString(this._options.hideLoading)) this._options.hideLoading = true;
+    if (isString(this._options.nativeScrollbars))
+      this._options.nativeScrollbars = true;
    if (isString(this._options.expandResponses)) {
      let str = this._options.expandResponses as string;
      if (str === 'all') return;
--- a/lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts
+++ b/lib/shared/components/PerfectScrollbar/perfect-scrollbar.ts
@ -1,37 +1,49 @@
-'use strict';
-
 import 'perfect-scrollbar/dist/css/perfect-scrollbar.css';

-import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
-import { BrowserDomAdapter as DOM } from '../../../utils/browser-adapter';
-
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import * as PS from 'perfect-scrollbar';

+import { OptionsService } from '../../../services/options.service';
+
@Directive({
-  selector: '[perfect-scrollbar]'
+  selector: '[perfect-scrollbar]',
 })
 export class PerfectScrollbar implements OnInit, OnDestroy {
  $element: any;
  subscription: any;
+  enabled: boolean = true;

-  constructor(elementRef:ElementRef) {
+  constructor(elementRef: ElementRef, optionsService: OptionsService) {
    this.$element = elementRef.nativeElement;
+    this.enabled = !optionsService.options.nativeScrollbars;
  }

  update() {
+    if (!this.enabled) return;
    PS.update(this.$element);
  }

  ngOnInit() {
-    requestAnimationFrame(() => PS.initialize(this.$element, {
-      wheelSpeed: 2,
-      wheelPropagation: false,
-      minScrollbarLength: 20,
-      suppressScrollX: true
-    }));
+    if (!this.enabled) return;
+    requestAnimationFrame(() =>
+      PS.initialize(this.$element, {
+        wheelSpeed: 2,
+        handlers: [
+          'click-rail',
+          'drag-scrollbar',
+          'keyboard',
+          'wheel',
+          'touch',
+        ],
+        wheelPropagation: true,
+        minScrollbarLength: 20,
+        suppressScrollX: true,
+      } as any),
+    );
  }

  ngOnDestroy() {
+    if (!this.enabled) return;
    PS.destroy(this.$element);
  }
 }
--- a/lib/shared/styles/_variables.scss
+++ b/lib/shared/styles/_variables.scss
@ -77,6 +77,7 @@ $post-color: #248fb2;
 $put-color: #9b708b;
 $options-color: #d3ca12;
 $patch-color: #e09d43;
+$head-color: #c167e4;
 $delete-color: #e27a7a;
 $basic-color: #999;
 $link-color: #31bbb6;
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "redoc",
  "description": "Swagger-generated API Reference Documentation",
-  "version": "1.18.1",
+  "version": "1.19.0",
  "repository": {
    "type": "git",
    "url": "git://github.com/Rebilly/ReDoc"
@ -14,7 +14,8 @@
  "module": "dist/redoc.module.js",
  "types": "dist/redoc.module.d.ts",
  "scripts": {
-    "start": "webpack-dev-server --config build/webpack.dev.js --content-base demo",
+    "start":
+      "webpack-dev-server --config build/webpack.dev.js --content-base demo",
    "start:prod": "NODE_ENV=production npm start",
    "test": "npm run lint && node ./build/run_tests.js",
    "lint": "tslint -e \"lib/**/*{ngfactory|css.shim}.ts\" lib/**/*.ts",
@ -26,12 +27,14 @@
    "e2e-server": "http-server -p 3000 tests/e2e",
    "e2e-copy": "cp dist/redoc.min.js tests/e2e/",
    "webdriver": "webdriver-manager update",
-    "deploy": "node ./build/prepare_deploy.js && deploy-to-gh-pages --update demo",
+    "deploy":
+      "node ./build/prepare_deploy.js && deploy-to-gh-pages --update demo",
    "branch-release": "git reset --hard && branch-release",
    "clean": "rimraf dist .tmp compiled lib/**/*.css",
    "ngc": "ngc -p tsconfig.json",
    "inline": "ng2-inline -o .tmp -r --compress \"lib/**/*.ts\"",
-    "build:module": "npm run build:sass && npm run inline && ngc -p tsconfig.aot.json && npm run module:css",
+    "build:module":
+      "npm run build:sass && npm run inline && ngc -p tsconfig.aot.json && npm run module:css",
    "module:css": "node build/join-module-css.js",
    "webpack:prod": "webpack --config build/webpack.prod.js --profile --bail",
    "build:sass": "node-sass -q -o lib lib",
@ -54,64 +57,61 @@
  "author": "Roman Hotsiy",
  "license": "MIT",
  "devDependencies": {
-    "@angular/common": "^4.3.2",
-    "@angular/compiler": "^4.3.2",
-    "@angular/compiler-cli": "^4.3.2",
-    "@angular/core": "^4.3.2",
-    "@angular/platform-browser": "^4.3.2",
-    "@angular/platform-browser-dynamic": "^4.3.2",
-    "@angular/platform-server": "^4.3.2",
-    "@types/jasmine": "^2.5.53",
-    "@types/requirejs": "^2.1.29",
-    "@types/should": "^8.3.0",
-    "@types/swagger-schema-official": "^2.0.5",
-    "@types/webpack": "^3.0.5",
+    "@angular/common": "^4.4.3",
+    "@angular/compiler": "^4.4.3",
+    "@angular/compiler-cli": "^4.4.3",
+    "@angular/core": "^4.4.3",
+    "@angular/platform-browser": "^4.4.3",
+    "@angular/platform-browser-dynamic": "^4.4.3",
+    "@angular/platform-server": "^4.4.3",
+    "@types/jasmine": "^2.6.0",
+    "@types/requirejs": "^2.1.31",
+    "@types/should": "^11.2.0",
+    "@types/swagger-schema-official": "^2.0.6",
+    "@types/webpack": "^3.0.11",
    "angular2-inline-template-style": "^1.1.0",
    "angular2-template-loader": "^0.6.2",
-    "awesome-typescript-loader": "^3.2.2",
+    "awesome-typescript-loader": "^3.2.3",
    "branch-release": "^1.0.3",
-    "chalk": "^2.0.1",
-    "codelyzer": "^3.1.2",
-    "conventional-changelog-cli": "^1.3.2",
-    "css-loader": "^0.28.1",
+    "chalk": "^2.1.0",
+    "codelyzer": "^3.2.0",
+    "conventional-changelog-cli": "^1.3.3",
+    "css-loader": "^0.28.7",
    "deploy-to-gh-pages": "^1.3.3",
    "exports-loader": "^0.6.4",
    "http-server": "^0.10.0",
    "istanbul-instrumenter-loader": "^3.0.0",
-    "jasmine-core": "^2.7.0",
-    "jasmine-spec-reporter": "^4.1.1",
-    "karma": "^1.6.0",
+    "jasmine-core": "^2.8.0",
+    "jasmine-spec-reporter": "^4.2.1",
+    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-coveralls": "^1.1.2",
    "karma-jasmine": "^1.0.2",
-    "karma-mocha-reporter": "^2.2.3",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.1.2",
+    "karma-mocha-reporter": "^2.2.4",
    "karma-remap-coverage": "^0.1.4",
    "karma-should": "^1.0.0",
    "karma-sinon": "^1.0.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.4",
    "node-sass": "^4.5.3",
-    "npm-run-all": "^4.0.2",
-    "phantomjs-prebuilt": "^2.1.14",
+    "npm-run-all": "^4.1.1",
    "protractor": "^5.1.1",
    "raw-loader": "^0.5.1",
-    "rimraf": "^2.6.1",
-    "rxjs": "^5.4.2",
+    "rimraf": "^2.6.2",
+    "rxjs": "^5.4.3",
    "sass-loader": "^6.0.6",
    "shelljs": "^0.7.7",
-    "should": "^11.2.1",
-    "sinon": "^2.4.1",
+    "should": "^13.1.0",
+    "sinon": "^3.3.0",
    "source-map-loader": "^0.2.1",
    "string-replace-webpack-plugin": "^0.1.3",
    "style-loader": "^0.18.2",
    "swagger-schema-official": "^2.0.0-bab6bed",
-    "tslint": "^5.5.0",
-    "typescript": "^2.4.2",
-    "webpack": "^3.4.1",
-    "webpack-dev-server": "^2.6.1",
+    "tslint": "^5.7.0",
+    "typescript": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2",
    "webpack-merge": "^4.1.0"
  },
  "peerDependencies": {
@ -127,22 +127,22 @@
    "rxjs": "^5.3.1"
  },
  "dependencies": {
-    "core-js": "^2.4.1",
-    "dropkickjs": "^2.1.10",
+    "core-js": "^2.5.1",
+    "dropkickjs": "~2.1.10",
    "hint.css": "^2.3.2",
    "https-browserify": "^1.0.0",
    "json-pointer": "^0.6.0",
-    "json-schema-ref-parser": "^3.2.0",
+    "json-schema-ref-parser": "^3.3.1",
    "lunr": "^1.0.0",
    "mark.js": "github:julmot/mark.js",
-    "openapi-sampler": "^0.4.2",
-    "perfect-scrollbar": "^0.7.0",
-    "prismjs": "^1.5.1",
+    "openapi-sampler": "^0.4.3",
+    "perfect-scrollbar": "^0.8.1",
+    "prismjs": "^1.8.1",
    "remarkable": "1.7.1",
    "scrollparent": "^2.0.1",
-    "slugify": "^1.0.2",
+    "slugify": "^1.2.1",
    "stream-http": "^2.6.1",
    "ts-helpers": "^1.1.2",
-    "zone.js": "^0.8.16"
+    "zone.js": "^0.8.17"
  }
 }
--- a/yarn.lock
+++ b/yarn.lock