Merge commit '278e5d79177a5ee47dd90cd77af4c9d839c7cadb' into releases

.eslintignore

@@ -1,5 +0,0 @@
-build/
-gulpfile.js
-*.conf.js
-*.config.js
-demo/

.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:

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)
 

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:

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>

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)

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,
   });
-}
+};

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;
+  }
 }

lib/components/ParamsList/params-list.ts

@@ -1,7 +1,8 @@
-'use strict';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core';
+
-import { BaseComponent, SpecManager } from '../base';
+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,10 +30,19 @@ export class ParamsList extends BaseComponent implements OnInit {
     this.params = [];
     let paramsList = this.specMgr.getOperationParams(this.pointer);
 
-    paramsList = paramsList.map(paramSchema => {
+    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);

lib/components/Redoc/redoc.scss

@@ -4,11 +4,11 @@
   display: block;
   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;
   -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);
+  -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;
   -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; }
+  h1 {
-  h2 { font-size: $h2; }
+    font-size: $h1;
-  h3 { font-size: $h3; }
+    color: $headers-color;
-  h4 { font-size: $h4; }
+  }
-  h5 { font-size: $h5; line-height: 20px; }
+  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;
   }

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 {

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;

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 { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { BrowserDomAdapter as DOM } from '../../../utils/browser-adapter';
-
 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, {
+    if (!this.enabled) return;
+    requestAnimationFrame(() =>
+      PS.initialize(this.$element, {
         wheelSpeed: 2,
-      wheelPropagation: false,
+        handlers: [
+          'click-rail',
+          'drag-scrollbar',
+          'keyboard',
+          'wheel',
+          'touch',
+        ],
+        wheelPropagation: true,
         minScrollbarLength: 20,
-      suppressScrollX: true
+        suppressScrollX: true,
-    }));
+      } as any),
+    );
   }
 
   ngOnDestroy() {
+    if (!this.enabled) return;
     PS.destroy(this.$element);
   }
 }

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;

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/common": "^4.4.3",
-    "@angular/compiler": "^4.3.2",
+    "@angular/compiler": "^4.4.3",
-    "@angular/compiler-cli": "^4.3.2",
+    "@angular/compiler-cli": "^4.4.3",
-    "@angular/core": "^4.3.2",
+    "@angular/core": "^4.4.3",
-    "@angular/platform-browser": "^4.3.2",
+    "@angular/platform-browser": "^4.4.3",
-    "@angular/platform-browser-dynamic": "^4.3.2",
+    "@angular/platform-browser-dynamic": "^4.4.3",
-    "@angular/platform-server": "^4.3.2",
+    "@angular/platform-server": "^4.4.3",
-    "@types/jasmine": "^2.5.53",
+    "@types/jasmine": "^2.6.0",
-    "@types/requirejs": "^2.1.29",
+    "@types/requirejs": "^2.1.31",
-    "@types/should": "^8.3.0",
+    "@types/should": "^11.2.0",
-    "@types/swagger-schema-official": "^2.0.5",
+    "@types/swagger-schema-official": "^2.0.6",
-    "@types/webpack": "^3.0.5",
+    "@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",
+    "chalk": "^2.1.0",
-    "codelyzer": "^3.1.2",
+    "codelyzer": "^3.2.0",
-    "conventional-changelog-cli": "^1.3.2",
+    "conventional-changelog-cli": "^1.3.3",
-    "css-loader": "^0.28.1",
+    "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-core": "^2.8.0",
-    "jasmine-spec-reporter": "^4.1.1",
+    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^1.6.0",
+    "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-mocha-reporter": "^2.2.4",
-    "karma-phantomjs-launcher": "^1.0.4",
-    "karma-phantomjs-shim": "^1.1.2",
     "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",
+    "npm-run-all": "^4.1.1",
-    "phantomjs-prebuilt": "^2.1.14",
     "protractor": "^5.1.1",
     "raw-loader": "^0.5.1",
-    "rimraf": "^2.6.1",
+    "rimraf": "^2.6.2",
-    "rxjs": "^5.4.2",
+    "rxjs": "^5.4.3",
     "sass-loader": "^6.0.6",
     "shelljs": "^0.7.7",
-    "should": "^11.2.1",
+    "should": "^13.1.0",
-    "sinon": "^2.4.1",
+    "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",
+    "tslint": "^5.7.0",
-    "typescript": "^2.4.2",
+    "typescript": "^2.5.2",
-    "webpack": "^3.4.1",
+    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.6.1",
+    "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",
+    "core-js": "^2.5.1",
-    "dropkickjs": "^2.1.10",
+    "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",
+    "openapi-sampler": "^0.4.3",
-    "perfect-scrollbar": "^0.7.0",
+    "perfect-scrollbar": "^0.8.1",
-    "prismjs": "^1.5.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"
   }
 }