diff --git a/api-request-editor.js b/api-request-editor.js
index 950b606..502a48a 100644
--- a/api-request-editor.js
+++ b/api-request-editor.js
@@ -1,5 +1,6 @@
 import { html, css, LitElement } from 'lit-element';
-import {EventsTargetMixin} from '@advanced-rest-client/events-target-mixin/events-target-mixin.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { EventsTargetMixin } from '@advanced-rest-client/events-target-mixin/events-target-mixin.js';
 import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js';
 import formStyles from '@api-components/api-form-mixin/api-form-styles.js';
 import '@api-components/api-url-data-model/api-url-data-model.js';
@@ -33,7 +34,11 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
       .content {
         height: 100%;
         display: flex;
-        flex-direction: columns;
+        flex-direction: column;
+      }
+
+      .content > * {
+        margin: 0;
       }
 
       [hidden] {
@@ -170,17 +175,11 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
        * This value **must** be set in order for OAuth 1/2 to work properly.
        */
       redirectUri: { type: String },
-      /**
-       * Inheritet from the authorization panel state if authorization is
-       * required. Authorization may be not required if one of the
-       * authorization methods is `nil` (RAML).
-       */
-      _authRequired: { type: Boolean },
       /**
        * Inheritet from the authorization panel state if authorization
        * data is valid.
        */
-      _authValid: { type: Boolean },
+      _authInvalid: { type: Boolean },
       /**
        * If set it will renders the view in the narrow layout.
        */
@@ -384,12 +383,8 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
     return this._isPayloadRequest;
   }
 
-  get authRequired() {
-    return this._authRequired;
-  }
-
-  get authValid() {
-    return this._authValid;
+  get authInvalid() {
+    return this._authInvalid;
   }
 
   get loadingRequest() {
@@ -467,10 +462,13 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
    * Clears the request properties.
    */
   clearRequest() {
-    this.set('url', '');
-    this.set('headers', '');
-    this.set('payload', '');
-    this.shadowRoot.querySelector('authorization-panel').clear();
+    this.url = '';
+    this.headers = '';
+    this.payload = '';
+    const node = this.shadowRoot.querySelector('authorization-panel');
+    if (node) {
+      node.clear();
+    }
     this._dispatch('request-clear-state');
     this._sendGaEvent('Clear request');
   }
@@ -659,8 +657,9 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
   execute() {
     this.loadingRequest = true;
     const request = this.serializeRequest();
-    this.requestId = this.$.uuid.generate();
-    request.id = this.requestId;
+    const uuid = this.shadowRoot.querySelector('uuid').generate();
+    this.requestId = uuid;
+    request.id = uuid;
     this._dispatch('api-request', request);
     this._sendGaEvent('request-execute', 'true');
   }
@@ -881,23 +880,58 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
   }
 
   _urlHandler(e) {
+    console.log('url', e.detail.value);
     this.url = e.detail.value;
   }
 
-  _endpointUriHandler(e) {
-    this._endpointUri = e.detail.endpointUri;
+  async _endpointUriHandler(e) {
+    await this.updateComplete;
+    console.log('_endpointUri', e.detail.value);
+    this._endpointUri = e.detail.value;
   }
 
-  _apiBaseUriHandler(e) {
-    this._apiBaseUri = e.detail.apiBaseUri;
+  async _apiBaseUriHandler(e) {
+    await this.updateComplete;
+    console.log('_apiBaseUri', e.detail.value);
+    this._apiBaseUri = e.detail.value;
   }
 
-  _pathModelHandler(e) {
-    this._pathModel = e.detail.pathModel;
+  async _pathModelHandler(e) {
+    await this.updateComplete;
+    console.log('_pathModel', e.detail.value);
+    this._pathModel = e.detail.value;
   }
 
-  _queryModelHandler(e) {
-    this._queryModel = e.detail.queryModel;
+  async _queryModelHandler(e) {
+    await this.updateComplete;
+    console.log('_queryModel', e.detail.value);
+    this._queryModel = e.detail.value;
+  }
+
+  _contentTypeHandler(e) {
+    console.log('_contentType', e.detail.value);
+    this._contentType = e.detail.value;
+  }
+
+  _authInvalidChanged(e) {
+    console.log('_authInvalid', e.detail.value);
+    this._authInvalid = e.detail.value;
+  }
+
+  _paramsInvalidChanged(e) {
+    this._paramsInvalid = e.detail.value;
+  }
+
+  _headersInvalidChanged(e) {
+    this._headersInvalid = e.detail.value;
+  }
+
+  _headersHandler(e) {
+    this._headers = e.detail.value;
+  }
+
+  _payloadHandler(e) {
+    this._payload = e.detail.value;
   }
 
   render() {
@@ -917,6 +951,11 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
       allowCustom,
       allowDisableParams,
       allowHideOptional,
+      readOnly,
+      disabled,
+      legacy,
+      outlined,
+      invalid,
 
       _endpointUri,
       _apiBaseUri,
@@ -926,8 +965,10 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
       _apiHeaders,
       _isPayloadRequest,
       _apiPayload,
-      _loadingRequest
+      _loadingRequest,
+      _contentType
     } = this;
+    console.log('render::_isPayloadRequest', _isPayloadRequest);
     return html`
     ${aware ? html`<raml-aware
       .scope="${aware}"
@@ -937,88 +978,112 @@ class ApiRequestEditor extends AmfHelperMixin(EventsTargetMixin(LitElement)) {
       .amf="${amf}"
       .baseUri="${baseUri}"
       .selected="${selected}"
-      .server="${server}"
-      .protocols="${protocols}"
-      .version="${version}"
+      .server="${ifDefined(server)}"
+      .protocols="${ifDefined(protocols)}"
+      .version="${ifDefined(version)}"
       @apibaseuri-changed="${this._apiBaseUriHandler}"
       @pathmodel-changed="${this._pathModelHandler}"
       @querymodel-changed="${this._queryModelHandler}"
-      @endpointuri-changed="${this._endpointUriHandler}"
-    ></api-url-data-model>
+      @endpointpath-changed="${this._endpointUriHandler}"></api-url-data-model>
+
     <div class="content">
       <div class="url-editor" ?hidden="${noUrlEditor}">
-        <api-url-editor
-          ?required="${!noUrlEditor}"
-          autovalidate
-          .baseUri="${_apiBaseUri}"
-          .endpointPath="${_endpointUri}"
-          .queryModel="${_queryModel}"
-          .pathModel="${_pathModel}"
-          .eventsTarget="${eventsTarget}"
-          @value-changed="${this._urlHandler}"
-          @invalid-changed="${this._urlInvalidChanged}"></api-url-editor>
+      <api-url-editor
+        ?required="${!noUrlEditor}"
+        autovalidate
+        .baseUri="${_apiBaseUri}"
+        .endpointPath="${_endpointUri}"
+        .queryModel="${_queryModel}"
+        .pathModel="${_pathModel}"
+        .eventsTarget="${eventsTarget}"
+        .readOnly="${readOnly}"
+        .disabled="${disabled}"
+        ?outlined="${outlined}"
+        ?legacy="${legacy}"
+        @value-changed="${this._urlHandler}"
+        @invalid-changed="${this._urlInvalidChanged}"></api-url-editor>
       </div>
 
-      <authorization-panel
-        .amf="${amf}"
-        .eventsTarget="${eventsTarget}"
-        hidden="[[authNotRequired]]"
-        .securedBy="${_securedBy}"
-        .redirectUri="${redirectUri}"
-        .noDocs="${noDocs}"
-        auth-required="{{authRequired}}"
-        auth-valid="{{authValid}}"
-      ></authorization-panel>
       <api-url-params-editor
+        ?hidden="${!_pathModel && !_queryModel}"
         .uriModel="${_pathModel}"
         .queryModel="${_queryModel}"
         .noDocs="${noDocs}"
         ?narrow="${narrow}"
         ?allowcustom="${allowCustom}"
-        invalid="{{paramsInvalid}}"
-      ></api-url-params-editor>
+        .readOnly="${readOnly}"
+        .disabled="${disabled}"
+        ?outlined="${outlined}"
+        ?legacy="${legacy}"
+        @invalid-changed="${this._paramsInvalidChanged}"
+        @urimodel-changed="${this._pathModelHandler}"
+        @querymodel-changed="${this._queryModelHandler}"></api-url-params-editor>
+
       <api-headers-editor
+        ?hidden="${!_apiHeaders}"
         .eventsTarget="${eventsTarget}"
         .amf="${amf}"
         .amfHeaders="${_apiHeaders}"
         .noDocs="${noDocs}"
         .isPayload="${_isPayloadRequest}"
         ?narrow="${narrow}"
-        content-type="{{contentType}}"
-        value="{{headers}}"
+        .readOnly="${readOnly}"
+        .disabled="${disabled}"
+        ?outlined="${outlined}"
+        ?legacy="${legacy}"
         ?allowcustom="${allowCustom}"
-        allow-disable-params="[[allowDisableParams]]"
-        allow-hide-optional="[[allowHideOptional]]"
+        ?allowDisableParams="${allowDisableParams}"
+        ?allowHideOptional="${allowHideOptional}"
         autovalidate
-        invalid="{{headersInvalid}}"
-      ></api-headers-editor>
+        @contenttype-changed="${this._contentTypeHandler}"
+        @value-changed="${this._headersHandler}"
+        @invalid-changed="${this._headersInvalidChanged}"></api-headers-editor>
+
       ${_isPayloadRequest ? html`<api-body-editor
         .eventsTarget="${eventsTarget}"
         .amf="${amf}"
         .amfBody="${_apiPayload}"
         ?narrow="${narrow}"
-        content-type="{{contentType}}"
-        value="{{payload}}"
+        .readOnly="${readOnly}"
+        .disabled="${disabled}"
+        ?outlined="${outlined}"
+        ?legacy="${legacy}"
+        .contentType="${_contentType}"
+        @value-changed="${this._payloadHandler}"
         ?allowcustom="${allowCustom}"
         ?allowDisableParams="${allowDisableParams}"
-        ?allowHideOptional="${allowHideOptional}"
-      ></api-body-editor>` : ''}
+        ?allowHideOptional="${allowHideOptional}"></api-body-editor>` : ''}
+
+      ${_securedBy ? html`<authorization-panel
+        .amf="${amf}"
+        .eventsTarget="${eventsTarget}"
+        .securedBy="${_securedBy}"
+        .redirectUri="${redirectUri}"
+        .noDocs="${noDocs}"
+        .readOnly="${readOnly}"
+        .disabled="${disabled}"
+        ?outlined="${outlined}"
+        ?legacy="${legacy}"
+        @invalid-changed="${this._authInvalidChanged}"
+      ></authorization-panel>` : undefined}
 
       <div class="action-bar">
         ${_loadingRequest ?
-          html`<paper-button class="send-button abort" @click="${this._abortRequest}">Abort</paper-button>` :
-          html`<paper-button class="send-button" @click="${this._sendHandler}" disabled="[[_computeSendDisabled(urlInvalid, paramsInvalid, headersInvalid)]]">[[_computeSendLabel(authValid)]]</paper-button>`}
-        <template is="dom-if" if="[[invalid]]">
-          <span class="invalid-info">Fill in required parameters</span>
-        </template>
-        <paper-spinner alt="Loading request" active="[[loadingRequest]]"></paper-spinner>
+          html`<anypoint-button
+            class="send-button abort"
+            @click="${this._abortRequest}">Abort</anypoint-button>` :
+          html`<anypoint-button class="send-button" @click="${this._sendHandler}">Send</anypoint-button>`}
+        ${invalid ? html`<span class="invalid-info">Fill in required parameters</span>` : ''}
+        <paper-spinner alt="Loading request" .active="${_loadingRequest}"></paper-spinner>
       </div>
+
+      <paper-toast
+        text="Authorization for this endpoint is required"
+        id="authFormError"
+        horizontal-align="right" horizontal-offset="12"></paper-toast>
+      <uuid-generator id="uuid"></uuid-generator>
     </div>
-    <paper-toast
-      text="Authorization for this endpoint is required"
-      id="authFormError"
-      horizontal-align="right" horizontal-offset="12"></paper-toast>
-    <uuid-generator id="uuid"></uuid-generator>`;
+    `;
   }
   /**
    * Dispatched when the user requests to send current request.
diff --git a/demo/index.html b/demo/index.html
index 531ace9..df764c1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,256 +1,135 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-    <title>api-request-editor demo</title>
 
-    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="../../../web-animations-js/web-animations-next.min.js"></script>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>api-request-editor</title>
+
+  <link media="all" rel="stylesheet" href="../node_modules/codemirror/addon/lint/lint.css" />
+
+  <script src="../node_modules/web-animations-js/web-animations-next.min.js"></script>
+  <script src="../node_modules/cryptojslib/components/core.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/sha1.js"></script>
+  <script src="../node_modules/cryptojslib/components/enc-base64-min.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/md5.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
+  <script src="../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
+  <!--
+  Previously this was included into the compoennt.
+  Since compoennts are ES6 modules this libraries cannot be loaded into
+  the component as they do not export anything and won't set global variable.
+  -->
+  <script src="../node_modules/jsonlint/lib/jsonlint.js"></script>
+  <script src="../node_modules/codemirror/lib/codemirror.js"></script>
+  <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
+  <script src="../node_modules/codemirror/mode/meta.js"></script>
+  <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
+  <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
+  <script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+  <script src="../node_modules/codemirror/addon/lint/lint.js"></script>
+  <script src="../node_modules/codemirror/addon/lint/json-lint.js"></script>
+  <!--
+  From the inside of a web component it is hard to determine where
+  scripts are actually located. This should be set if the page won't load all possible
+  scripts at run time. The component will download the "mode" from this location.
+  -->
+  <script>
+  /* global CodeMirror */
+  CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js';
+  </script>
+  <!-- Finally dependencies for authorization panel.  -->
+  <script src="../node_modules/cryptojslib/components/core.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/sha1.js"></script>
+  <script src="../node_modules/cryptojslib/components/enc-base64-min.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/md5.js"></script>
+  <script src="../node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
+  <script src="../node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>
+  <style>
+  [role="main"].centered {
+    max-width: 1440px;
+  }
+
+  output {
+    background-color: #FFF3E0;
+    white-space: pre-wrap;
+    margin-top: 40px;
+  }
+
+  body.styled {
+    --anypoiont-dropdown-shaddow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+    --anypoiont-autocomplete-dropdown-shaddow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
+    --arc-font-subhead-font-size: 16px;
+    --arc-font-subhead-font-weight: 400;
+    --arc-font-subhead-line-height: 24px;
+  }
+
+  body.styled.dark output {
+    background-color: #3a3a3a;
+  }
+
+  body.styled.dark {
+    --secondary-text-color: #616161;
+    --primary-background-color: #424242;
+
+    --anypoint-input-legacy-label-color: #F5F5F5;
+    --arc-interactive-demo-options-color: #F5F5F5;
+    --anypoint-checkbox-label-color:  #F5F5F5;
+    --anypoint-input-background-color: #494949;
+    --anypoint-input-label-color: #fff;
+    --anypoint-input-input-color: #fff;
+    --anypoint-input-border-bottom-color: #fff;
+    --anypoint-input-focused-border-bottom-color: #fff;
+    --anypoint-input-label-background-color: rgb(66, 66, 66);
+    --anypoint-input-legacy-focus-background-color: #3a3b3c;
+    --anypoint-input-legacy-focus-border-color: #178bea;
+    --anypoint-input-info-message-color: #fff;
+
+    --inline-documentation-background-color: #3a3a3a;
+
+    --anypoint-dropdown-menu-background-color: #494949;
+    --anypoint-dropdown-menu-label-background-color: var(--primary-background-color);
+    --anypoint-listbox-background-color: #494949;
+    --anypoint-dropdown-menu-focus-background-color: #9E9E9E;
+    --anypoint-dropdown-menu-label-color: #fff;
+    --anypoint-dropdown-menu-info-message-color: #fff;
+    --anypoint-item-hover-background-color: #9E9E9E;
+    --anypoiont-autocomplete-background-color: #494949;
+    --anypoint-icon-button-emphasis-low-color: #fff;
+
+    --from-row-action-icon-color: #fff;
+    --icon-button-color: #fff;
+    --api-form-action-icon-color: #fff;
+    --api-form-action-button-color: #fff;
+    --anypoint-icon-button-emphasis-low-color: #fff;
+    --anypoiont-autocomplete-background-color: #494949;
+
+    --auth-method-oauth2-redirect-info-color: #fff;
+    --from-row-action-icon-color: #fff;
+    --inline-documentation-color: #fff;
+
+    --code-mirror-background-color: #37474F;
+    --code-mirror-string-color: #C3E88D;
+    --code-mirror-punctuation-color: #EEFFFF;
+    --code-mirror-atom-color: #F07178;
+    --code-mirror-number-color: #F78C6A;
+    --code-mirror-cursor-color: #009688;
+  }
+
+  api-request-editor {
+    width: 600px;
+    margin: 12px;
+    padding: 12px;
+  }
+
+  api-request-editor[invalid] {
+    border: 1px red solid;
+  }
+  </style>
+</head>
+
+<body class="styled">
+  <div id="demo"></div>
+  <script type="module" src="index.js"></script>
 
-    <!--
-    Previously this was included into the compoennt.
-    Since compoennts are ES6 modules this libraries cannot be loaded into
-    the component as they do not export anything and won't set global variable.
-    -->
-    <script src="../../../jsonlint/lib/jsonlint.js"></script>
-    <script src="../../../codemirror/lib/codemirror.js"></script>
-    <script src="../../../codemirror/addon/mode/loadmode.js"></script>
-    <script src="../../../codemirror/mode/meta.js"></script>
-    <script src="../../../codemirror/mode/javascript/javascript.js"></script>
-    <script src="../../../codemirror/mode/xml/xml.js"></script>
-    <script src="../../../codemirror/mode/htmlmixed/htmlmixed.js"></script>
-    <script src="../../../codemirror/addon/lint/lint.js"></script>
-    <script src="../../../codemirror/addon/lint/json-lint.js"></script>
-    <script src="../../../@advanced-rest-client/code-mirror-hint/headers-addon.js"></script>
-    <script src="../../../@advanced-rest-client/code-mirror-hint/show-hint.js"></script>
-    <script src="../../../@advanced-rest-client/code-mirror-hint/hint-http-headers.js"></script>
-    <!--
-    From the inside of a web component it is hard to determine where
-    scripts are actually located. This should be set if the page won't load all possible
-    scripts at run time. The component will download the "mode" from this location.
-    -->
-    <script>
-    /* global CodeMirror */
-    CodeMirror.modeURL = '../../../codemirror/mode/%N/%N.js';
-    </script>
-    <!-- Finally dependencies for authorization panel.  -->
-    <script src="../../../cryptojslib/components/core.js"></script>
-    <script src="../../../cryptojslib/rollups/sha1.js"></script>
-    <script src="../../../cryptojslib/components/enc-base64-min.js"></script>
-    <script src="../../../cryptojslib/rollups/md5.js"></script>
-    <script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
-    <script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
-
-    <custom-style>
-      <style is="custom-style" include="demo-pages-shared-styles">
-      html,
-      body {
-        background-color: #e5e5e5;
-        margin: 0;
-        padding: 0;
-      }
-
-      main {
-        @apply --layout-horizontal;
-        margin-right: 20px;
-      }
-
-      nav {
-        width: 256px;
-      }
-
-      h2 {
-        @apply --paper-font-title;
-      }
-
-      header {
-        padding: 12px 24px;
-        background-color: #C5E1A5;
-        @apply --layout-horizontal;
-        @apply --layout-center;
-        --iron-icon-fill-color: #3E2723;
-        --paper-input-container-focus-color: #33691E;
-        --paper-input-container-label: {
-          color: #3E2723;
-        };
-      }
-
-      .spacer {
-        @apply --layout-flex;
-      }
-
-      .content {
-        @apply --layout-flex;
-        max-width: 700px;
-      }
-
-      .card {
-        @apply --shadow-elevation-4dp;
-        padding: 20px;
-        margin: 20px;
-        box-sizing: border-box;
-        background-color: #fff;
-      }
-
-      paper-checkbox {
-        margin-bottom: 12px;
-      }
-
-      [invalid] {
-        border: 1px red dashed;
-      }
-      </style>
-    </custom-style>
-  </head>
-  <body>
-    <dom-bind id="demo">
-      <template is="dom-bind">
-        <oauth2-authorization></oauth2-authorization>
-        <oauth1-authorization></oauth1-authorization>
-        <xhr-simple-request></xhr-simple-request>
-        <header>
-          <paper-dropdown-menu label="Select demo API">
-            <paper-listbox slot="dropdown-content" id="apisList" on-selected-changed="_apiChanged">
-              <paper-item data-src="demo-api.json">ARC demo api</paper-item>
-              <paper-item data-src="demo-api-compact.json">ARC demo api - compact model</paper-item>
-            </paper-listbox>
-          </paper-dropdown-menu>
-
-          <div class="spacer"></div>
-          <paper-dropdown-menu label="Override API's base uri">
-            <paper-listbox slot="dropdown-content" id="basesList" selected="{{selectedOverrideBase}}" attr-for-selected="data-url">
-              <paper-item data-url="">Restore API's base URI</paper-item>
-              <paper-item data-url="https://domain.com/base">https://domain.com/base</paper-item>
-              <paper-item data-url="https://www.google.com?q=">https://www.google.com?q=</paper-item>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </header>
-        <main role="main">
-          <nav>
-            <api-navigation amf-model="[[amfModel]]" endpoints-opened=""></api-navigation>
-          </nav>
-
-          <template is="dom-if" if="[[!hasData]]">
-            <section class="intro">
-              <p class="usage-info">Select a HTTP method in the navigation</p>
-            </section>
-          </template>
-
-          <template is="dom-if" if="[[hasData]]">
-            <section class="content">
-              <div class="card">
-                <api-request-editor narrow="[[narrow]]" amf-model="[[amfModel]]" base-uri="[[computeFinaleBaseUri(selectedOverrideBase, baseUri)]]" selected="[[selectedAmfId]]" allow-custom="[[allowCustom]]" allow-disable-params="[[allowDisableParams]]" allow-hide-optional="[[allowHideOptional]]" redirect-uri="[[redirectUri]]" no-url-editor="[[noUrlEditor]]" no-docs="[[noDocs]]" selected-tab="{{selectedTab}}" content-type="{{contentType}}" is-payload-request="{{isPayloadRequest}}" auth-required="{{authRequired}}" auth-valid="{{authValid}}" auth-not-required="{{authNotRequired}}" loading-request="{{loadingRequest}}" params-invalid="{{paramsInvalid}}" headers-invalid="{{headersInvalid}}" url-invalid="{{urlInvalid}}" invalid="{{invalid}}"></api-request-editor>
-              </div>
-
-              <div class="card">
-                <h2>Configuration options</h2>
-                <paper-checkbox checked="{{narrow}}">Render narrow view</paper-checkbox>
-                <paper-checkbox checked="{{allowCustom}}">Allow custom properties</paper-checkbox>
-                <paper-checkbox checked="{{allowHideOptional}}">Allow auto hide optional headers</paper-checkbox>
-                <paper-checkbox checked="{{allowDisableParams}}">Allow disabling parameters</paper-checkbox>
-                <paper-checkbox checked="{{noUrlEditor}}">Remove URL editor</paper-checkbox>
-                <paper-checkbox checked="{{noDocs}}">Remove inline documentatrion</paper-checkbox>
-                <paper-input label="Override base uri" value="{{baseUri}}"></paper-input>
-              </div>
-
-              <div class="card">
-                <h2>Editor state</h2>
-                <p>Selected editor tab: [[selectedTab]]</p>
-                <p>Selected content type: [[contentType]]</p>
-                <p>Is payload required: [[isPayloadRequest]]</p>
-                <p>Authorization requirements are set: [[authRequired]]</p>
-                <p>Authorization is valid: [[authValid]]</p>
-                <p>Authorization is not required (null scheme present): [[authNotRequired]]</p>
-                <p>Request is being loaded: [[loadingRequest]]</p>
-                <p>Parameter form is invalid: [[paramsInvalid]]</p>
-                <p>Headers for is invalid: [[headersInvalid]]</p>
-                <p>URL is invalid: [[urlInvalid]]</p>
-                <p>Editor is invalid: [[invalid]]</p>
-              </div>
-            </section>
-          </template>
-        </main>
-
-        <paper-toast text="Request send event detected" id="rsend"></paper-toast>
-        <paper-toast text="Request abort event detected" id="rabort"></paper-toast>
-      </template>
-    </dom-bind>
-    <script type="module">
-    import '../../../@polymer/polymer/lib/elements/dom-bind.js';
-    import '../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
-    import '../../../@polymer/iron-demo-helpers/demo-snippet.js';
-    import '../../../@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
-    import '../../../@polymer/paper-item/paper-item.js';
-    import '../../../@polymer/paper-listbox/paper-listbox.js';
-    import '../../../@polymer/paper-checkbox/paper-checkbox.js';
-    import '../../../@polymer/paper-toast/paper-toast.js';
-    import '../../../@polymer/paper-input/paper-input.js';
-    import '../../../@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
-    import '../../../@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
-    import '../../../@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
-    import '../../../@api-components/api-navigation/api-navigation.js';
-    import '../../../@api-components/api-console-default-theme/api-console-default-theme.js';
-    import '../api-request-editor.js';
-    (function(app) {
-    app.redirectUri = 'https://auth.advancedrestclient.com/oauth-popup.html';
-    app.allowCustom = true;
-    app.allowHideOptional = true;
-    app.allowDisableParams = true;
-
-    app._load = function() {
-      document.getElementById('apisList').selected = 0;
-    };
-
-    app._loadFile = function(file) {
-      app.selectedAmfId = undefined;
-      app.amfModel = undefined;
-      fetch('./' + file)
-      .then((response) => response.json())
-      .then((data) => {
-        app.amfModel = data;
-      });
-    };
-
-    app._apiChanged = function(e) {
-      const file = e.target.selectedItem.dataset.src;
-      app._loadFile(file);
-    };
-
-    app._navChanged = function(e) {
-      const type = e.detail.type;
-      if (type === 'method') {
-        app.setData(e.detail.selected);
-        app.hasData = true;
-      } else {
-        app.hasData = false;
-      }
-    };
-
-    app.setData = function(selected) {
-      app.selectedAmfId = selected;
-    };
-
-    app._apiRequestHandler = function() {
-      document.getElementById('rsend').opened = true;
-    };
-
-    app._apiAbortHandler = function() {
-      document.getElementById('rabort').opened = true;
-    };
-
-    app.computeFinaleBaseUri = function(selectedOverrideBase, baseUri) {
-      if (selectedOverrideBase) {
-        return selectedOverrideBase;
-      }
-      return baseUri;
-    };
-
-    window.addEventListener('WebComponentsReady', app._load);
-    window.addEventListener('api-navigation-selection-changed', app._navChanged);
-    window.addEventListener('api-request', app._apiRequestHandler);
-    window.addEventListener('abort-api-request', app._apiAbortHandler);
-    })(document.getElementById('demo'));
-    </script>
-  </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..8cdc160
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,256 @@
+import { html, render } from 'lit-html';
+import { LitElement } from 'lit-element';
+import { ApiDemoPageBase } from '@advanced-rest-client/arc-demo-helper/ApiDemoPage.js';
+import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js';
+import '@anypoint-web-components/anypoint-checkbox/anypoint-checkbox.js';
+import '@advanced-rest-client/arc-demo-helper/arc-demo-helper.js';
+import '@advanced-rest-client/arc-demo-helper/arc-interactive-demo.js';
+import '@api-components/api-navigation/api-navigation.js';
+import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
+import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
+import '../api-request-editor.js';
+
+class DemoElement extends AmfHelperMixin(LitElement) {}
+window.customElements.define('demo-element', DemoElement);
+
+class ComponentDemo extends ApiDemoPageBase {
+  constructor() {
+    super();
+    this._componentName = 'api-request-editor';
+
+    this.initObservableProperties([
+      'outlined',
+      'legacy',
+      'readOnly',
+      'disabled',
+      'narrow',
+      'selectedAmfId',
+      'allowCustom',
+      'allowHideOptional',
+      'allowDisableParams',
+      'noDocs'
+    ]);
+    this.allowCustom = false;
+    this.allowHideOptional = true;
+    this.allowDisableParams = true;
+
+    this.demoStates = ['Filled', 'Outlined', 'Legacy'];
+    this._demoStateHandler = this._demoStateHandler.bind(this);
+    this._toggleMainOption = this._toggleMainOption.bind(this);
+    this.redirectUri = location.origin +
+      '/node_modules/@advanced-rest-client/oauth-authorization/oauth-popup.html';
+  }
+
+  _demoStateHandler(e) {
+    const state = e.detail.value;
+    switch (state) {
+      case 0:
+        this.outlined = false;
+        this.legacy = false;
+        break;
+      case 1:
+        this.outlined = true;
+        this.legacy = false;
+        break;
+      case 2:
+        this.outlined = false;
+        this.legacy = true;
+        break;
+    }
+  }
+
+  _toggleMainOption(e) {
+    const { name, checked } = e.target;
+    this[name] = checked;
+  }
+
+  _authSettingsChanged(e) {
+    const value = e.detail;
+    this.authSettings = value;
+    this.authSettingsValue = value ? JSON.stringify(value, null, 2) : '';
+  }
+
+  get helper() {
+    if (!this.__helper) {
+      this.__helper = document.getElementById('helper');
+    }
+    return this.__helper;
+  }
+
+  _navChanged(e) {
+    this.selectedAmfId = undefined;
+    const { selected, type } = e.detail;
+    if (type === 'method') {
+      this.selectedAmfId = selected;
+      this.hasData = true;
+    } else {
+      this.hasData = false;
+    }
+  }
+
+  _apiListTemplate() {
+    return [
+      ['demo-api', 'Demo API'],
+    ].map(([file, label]) => html`
+      <paper-item data-src="${file}-compact.json">${label} - compact model</paper-item>
+      <paper-item data-src="${file}.json">${label}</paper-item>
+      `);
+  }
+
+  _demoTemplate() {
+    const {
+      demoStates,
+      darkThemeActive,
+      outlined,
+      legacy,
+      readOnly,
+      disabled,
+      amf,
+      narrow,
+      redirectUri,
+      allowCustom,
+      allowHideOptional,
+      allowDisableParams,
+      selectedAmfId,
+      noDocs
+    } = this;
+    return html `
+    <section class="documentation-section">
+      <h3>Interactive demo</h3>
+      <p>
+        This demo lets you preview the OAuth2 authorization method element with various
+        configuration options.
+      </p>
+
+      <section role="main" class="horizontal-section-container centered main">
+        ${this._apiNavigationTemplate()}
+        <div class="demo-container">
+
+          <arc-interactive-demo
+            .states="${demoStates}"
+            @state-chanegd="${this._demoStateHandler}"
+            ?dark="${darkThemeActive}"
+          >
+
+            <api-request-editor
+              slot="content"
+              .amf="${amf}"
+              .selected="${selectedAmfId}"
+              ?allowCustom="${allowCustom}"
+              ?allowHideOptional="${allowHideOptional}"
+              ?allowDisableParams="${allowDisableParams}"
+              ?narrow="${narrow}"
+              ?outlined="${outlined}"
+              ?legacy="${legacy}"
+              ?readOnly="${readOnly}"
+              ?disabled="${disabled}"
+              ?noDocs="${noDocs}"
+              .redirectUri="${redirectUri}"></api-request-editor>
+
+            <label slot="options" id="mainOptionsLabel">Options</label>
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="readOnly"
+              @change="${this._toggleMainOption}"
+              >Read only</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="disabled"
+              @change="${this._toggleMainOption}"
+              >Disabled</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="allowCustom"
+              .checked="${allowCustom}"
+              @change="${this._toggleMainOption}"
+              >Allow custom</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="allowHideOptional"
+              .checked="${allowHideOptional}"
+              @change="${this._toggleMainOption}"
+              >Allow hide optional</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="allowDisableParams"
+              .checked="${allowDisableParams}"
+              @change="${this._toggleMainOption}"
+              >Allow disable params</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="narrow"
+              @change="${this._toggleMainOption}"
+              >Narrow view</anypoint-checkbox
+            >
+            <anypoint-checkbox
+              aria-describedby="mainOptionsLabel"
+              slot="options"
+              name="noDocs"
+              @change="${this._toggleMainOption}"
+              >No docs</anypoint-checkbox
+            >
+          </arc-interactive-demo>
+        </div>
+      </section>
+    </section>`;
+  }
+
+  _introductionTemplate() {
+    return html `
+      <section class="documentation-section">
+        <h3>Introduction</h3>
+        <p>
+          A web component to render accessible OAuth2 authorization form.
+        </p>
+        <p>
+          This component implements Material Design styles.
+        </p>
+      </section>
+    `;
+  }
+
+  _usageTemplate() {
+    return html `
+      <section class="documentation-section">
+        <h2>Usage</h2>
+        <p>Anypoint dropdown menu comes with 3 predefied styles:</p>
+        <ul>
+          <li><b>Filled</b> (default)</li>
+          <li><b>Outlined</b></li>
+          <li>
+            <b>Legacy</b> - To provide compatibility with legacy Anypoint design
+          </li>
+        </ul>
+      </section>`;
+  }
+
+  _render() {
+    const { amf } = this;
+    render(html`
+      ${this.headerTemplate()}
+
+      <demo-element id="helper" .amf="${amf}"></demo-element>
+      <oauth2-authorization></oauth2-authorization>
+      <oauth1-authorization></oauth1-authorization>
+      <xhr-simple-request></xhr-simple-request>
+
+        ${this._demoTemplate()}
+        ${this._introductionTemplate()}
+        ${this._usageTemplate()}
+      `, document.querySelector('#demo'));
+  }
+}
+const instance = new ComponentDemo();
+instance.render();
+window.demo = instance;
diff --git a/demo/old.index.html b/demo/old.index.html
new file mode 100644
index 0000000..531ace9
--- /dev/null
+++ b/demo/old.index.html
@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <title>api-request-editor demo</title>
+
+    <script src="../../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../web-animations-js/web-animations-next.min.js"></script>
+
+    <!--
+    Previously this was included into the compoennt.
+    Since compoennts are ES6 modules this libraries cannot be loaded into
+    the component as they do not export anything and won't set global variable.
+    -->
+    <script src="../../../jsonlint/lib/jsonlint.js"></script>
+    <script src="../../../codemirror/lib/codemirror.js"></script>
+    <script src="../../../codemirror/addon/mode/loadmode.js"></script>
+    <script src="../../../codemirror/mode/meta.js"></script>
+    <script src="../../../codemirror/mode/javascript/javascript.js"></script>
+    <script src="../../../codemirror/mode/xml/xml.js"></script>
+    <script src="../../../codemirror/mode/htmlmixed/htmlmixed.js"></script>
+    <script src="../../../codemirror/addon/lint/lint.js"></script>
+    <script src="../../../codemirror/addon/lint/json-lint.js"></script>
+    <script src="../../../@advanced-rest-client/code-mirror-hint/headers-addon.js"></script>
+    <script src="../../../@advanced-rest-client/code-mirror-hint/show-hint.js"></script>
+    <script src="../../../@advanced-rest-client/code-mirror-hint/hint-http-headers.js"></script>
+    <!--
+    From the inside of a web component it is hard to determine where
+    scripts are actually located. This should be set if the page won't load all possible
+    scripts at run time. The component will download the "mode" from this location.
+    -->
+    <script>
+    /* global CodeMirror */
+    CodeMirror.modeURL = '../../../codemirror/mode/%N/%N.js';
+    </script>
+    <!-- Finally dependencies for authorization panel.  -->
+    <script src="../../../cryptojslib/components/core.js"></script>
+    <script src="../../../cryptojslib/rollups/sha1.js"></script>
+    <script src="../../../cryptojslib/components/enc-base64-min.js"></script>
+    <script src="../../../cryptojslib/rollups/md5.js"></script>
+    <script src="../../../cryptojslib/rollups/hmac-sha1.js"></script>
+    <script src="../../../jsrsasign/lib/jsrsasign-rsa-min.js"></script>
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      html,
+      body {
+        background-color: #e5e5e5;
+        margin: 0;
+        padding: 0;
+      }
+
+      main {
+        @apply --layout-horizontal;
+        margin-right: 20px;
+      }
+
+      nav {
+        width: 256px;
+      }
+
+      h2 {
+        @apply --paper-font-title;
+      }
+
+      header {
+        padding: 12px 24px;
+        background-color: #C5E1A5;
+        @apply --layout-horizontal;
+        @apply --layout-center;
+        --iron-icon-fill-color: #3E2723;
+        --paper-input-container-focus-color: #33691E;
+        --paper-input-container-label: {
+          color: #3E2723;
+        };
+      }
+
+      .spacer {
+        @apply --layout-flex;
+      }
+
+      .content {
+        @apply --layout-flex;
+        max-width: 700px;
+      }
+
+      .card {
+        @apply --shadow-elevation-4dp;
+        padding: 20px;
+        margin: 20px;
+        box-sizing: border-box;
+        background-color: #fff;
+      }
+
+      paper-checkbox {
+        margin-bottom: 12px;
+      }
+
+      [invalid] {
+        border: 1px red dashed;
+      }
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <dom-bind id="demo">
+      <template is="dom-bind">
+        <oauth2-authorization></oauth2-authorization>
+        <oauth1-authorization></oauth1-authorization>
+        <xhr-simple-request></xhr-simple-request>
+        <header>
+          <paper-dropdown-menu label="Select demo API">
+            <paper-listbox slot="dropdown-content" id="apisList" on-selected-changed="_apiChanged">
+              <paper-item data-src="demo-api.json">ARC demo api</paper-item>
+              <paper-item data-src="demo-api-compact.json">ARC demo api - compact model</paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu>
+
+          <div class="spacer"></div>
+          <paper-dropdown-menu label="Override API's base uri">
+            <paper-listbox slot="dropdown-content" id="basesList" selected="{{selectedOverrideBase}}" attr-for-selected="data-url">
+              <paper-item data-url="">Restore API's base URI</paper-item>
+              <paper-item data-url="https://domain.com/base">https://domain.com/base</paper-item>
+              <paper-item data-url="https://www.google.com?q=">https://www.google.com?q=</paper-item>
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </header>
+        <main role="main">
+          <nav>
+            <api-navigation amf-model="[[amfModel]]" endpoints-opened=""></api-navigation>
+          </nav>
+
+          <template is="dom-if" if="[[!hasData]]">
+            <section class="intro">
+              <p class="usage-info">Select a HTTP method in the navigation</p>
+            </section>
+          </template>
+
+          <template is="dom-if" if="[[hasData]]">
+            <section class="content">
+              <div class="card">
+                <api-request-editor narrow="[[narrow]]" amf-model="[[amfModel]]" base-uri="[[computeFinaleBaseUri(selectedOverrideBase, baseUri)]]" selected="[[selectedAmfId]]" allow-custom="[[allowCustom]]" allow-disable-params="[[allowDisableParams]]" allow-hide-optional="[[allowHideOptional]]" redirect-uri="[[redirectUri]]" no-url-editor="[[noUrlEditor]]" no-docs="[[noDocs]]" selected-tab="{{selectedTab}}" content-type="{{contentType}}" is-payload-request="{{isPayloadRequest}}" auth-required="{{authRequired}}" auth-valid="{{authValid}}" auth-not-required="{{authNotRequired}}" loading-request="{{loadingRequest}}" params-invalid="{{paramsInvalid}}" headers-invalid="{{headersInvalid}}" url-invalid="{{urlInvalid}}" invalid="{{invalid}}"></api-request-editor>
+              </div>
+
+              <div class="card">
+                <h2>Configuration options</h2>
+                <paper-checkbox checked="{{narrow}}">Render narrow view</paper-checkbox>
+                <paper-checkbox checked="{{allowCustom}}">Allow custom properties</paper-checkbox>
+                <paper-checkbox checked="{{allowHideOptional}}">Allow auto hide optional headers</paper-checkbox>
+                <paper-checkbox checked="{{allowDisableParams}}">Allow disabling parameters</paper-checkbox>
+                <paper-checkbox checked="{{noUrlEditor}}">Remove URL editor</paper-checkbox>
+                <paper-checkbox checked="{{noDocs}}">Remove inline documentatrion</paper-checkbox>
+                <paper-input label="Override base uri" value="{{baseUri}}"></paper-input>
+              </div>
+
+              <div class="card">
+                <h2>Editor state</h2>
+                <p>Selected editor tab: [[selectedTab]]</p>
+                <p>Selected content type: [[contentType]]</p>
+                <p>Is payload required: [[isPayloadRequest]]</p>
+                <p>Authorization requirements are set: [[authRequired]]</p>
+                <p>Authorization is valid: [[authValid]]</p>
+                <p>Authorization is not required (null scheme present): [[authNotRequired]]</p>
+                <p>Request is being loaded: [[loadingRequest]]</p>
+                <p>Parameter form is invalid: [[paramsInvalid]]</p>
+                <p>Headers for is invalid: [[headersInvalid]]</p>
+                <p>URL is invalid: [[urlInvalid]]</p>
+                <p>Editor is invalid: [[invalid]]</p>
+              </div>
+            </section>
+          </template>
+        </main>
+
+        <paper-toast text="Request send event detected" id="rsend"></paper-toast>
+        <paper-toast text="Request abort event detected" id="rabort"></paper-toast>
+      </template>
+    </dom-bind>
+    <script type="module">
+    import '../../../@polymer/polymer/lib/elements/dom-bind.js';
+    import '../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
+    import '../../../@polymer/iron-demo-helpers/demo-snippet.js';
+    import '../../../@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+    import '../../../@polymer/paper-item/paper-item.js';
+    import '../../../@polymer/paper-listbox/paper-listbox.js';
+    import '../../../@polymer/paper-checkbox/paper-checkbox.js';
+    import '../../../@polymer/paper-toast/paper-toast.js';
+    import '../../../@polymer/paper-input/paper-input.js';
+    import '../../../@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
+    import '../../../@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
+    import '../../../@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
+    import '../../../@api-components/api-navigation/api-navigation.js';
+    import '../../../@api-components/api-console-default-theme/api-console-default-theme.js';
+    import '../api-request-editor.js';
+    (function(app) {
+    app.redirectUri = 'https://auth.advancedrestclient.com/oauth-popup.html';
+    app.allowCustom = true;
+    app.allowHideOptional = true;
+    app.allowDisableParams = true;
+
+    app._load = function() {
+      document.getElementById('apisList').selected = 0;
+    };
+
+    app._loadFile = function(file) {
+      app.selectedAmfId = undefined;
+      app.amfModel = undefined;
+      fetch('./' + file)
+      .then((response) => response.json())
+      .then((data) => {
+        app.amfModel = data;
+      });
+    };
+
+    app._apiChanged = function(e) {
+      const file = e.target.selectedItem.dataset.src;
+      app._loadFile(file);
+    };
+
+    app._navChanged = function(e) {
+      const type = e.detail.type;
+      if (type === 'method') {
+        app.setData(e.detail.selected);
+        app.hasData = true;
+      } else {
+        app.hasData = false;
+      }
+    };
+
+    app.setData = function(selected) {
+      app.selectedAmfId = selected;
+    };
+
+    app._apiRequestHandler = function() {
+      document.getElementById('rsend').opened = true;
+    };
+
+    app._apiAbortHandler = function() {
+      document.getElementById('rabort').opened = true;
+    };
+
+    app.computeFinaleBaseUri = function(selectedOverrideBase, baseUri) {
+      if (selectedOverrideBase) {
+        return selectedOverrideBase;
+      }
+      return baseUri;
+    };
+
+    window.addEventListener('WebComponentsReady', app._load);
+    window.addEventListener('api-navigation-selection-changed', app._navChanged);
+    window.addEventListener('api-request', app._apiRequestHandler);
+    window.addEventListener('abort-api-request', app._apiAbortHandler);
+    })(document.getElementById('demo'));
+    </script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index 4952a78..bb70a3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -170,15 +170,15 @@
       }
     },
     "@advanced-rest-client/eslint-config": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@advanced-rest-client/eslint-config/-/eslint-config-1.0.8.tgz",
-      "integrity": "sha512-P32LzFEiJfiGAeqNAIZplITtiBbftpPrQrzcd1Kfzrh+BftP3lf2IVlqxTWIZdLIiXXHx5jVHBSxiVaK/wyBlQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@advanced-rest-client/eslint-config/-/eslint-config-1.1.0.tgz",
+      "integrity": "sha512-WHUknUgY3COChBi3PdetdUupI5xMgJxtXjGducBdR5MYhn7Ftxd+u81zW/s8XfaE0unhCY9g90+bcWfMI1UZyA==",
       "dev": true,
       "requires": {
-        "eslint": "^5.13.0",
+        "eslint": "^6.2.1",
         "eslint-config-google": "^0.13.0",
-        "eslint-plugin-html": "^4.0.0",
-        "eslint-plugin-import": "^2.0.0",
+        "eslint-plugin-html": "^6.0.0",
+        "eslint-plugin-import": "^2.18.2",
         "eslint-plugin-wc": "^1.2.0"
       }
     },
@@ -538,9 +538,9 @@
       }
     },
     "@api-components/amf-helper-mixin": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-3.0.2.tgz",
-      "integrity": "sha512-UWxVYUjrdItjxT9t34MtYoxSvmadUk7yt3qNi3j9jvHjeH9paSXq0mYnf8Kbz+dQiPkWgTGDiRc10Y7jZyrLSw==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@api-components/amf-helper-mixin/-/amf-helper-mixin-3.1.3.tgz",
+      "integrity": "sha512-uYFV3wmFVKEnNfLLyyWFVB9y7gfDeCpXxmNOYqnRa4BcCT0dX0fBqKG92bwBLx/0sJfyVIIzBN8FzfNqaxLmsw==",
       "requires": {
         "@polymer/iron-meta": "^3.0.0",
         "@polymer/polymer": "^3.3.0"
@@ -677,12 +677,12 @@
       }
     },
     "@api-components/api-url-data-model": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@api-components/api-url-data-model/-/api-url-data-model-3.0.0.tgz",
-      "integrity": "sha512-fYwnhMSKMHtBo2M6z7/CP5pmuJ3YAAdOEAQjeKMdKC/QK/L+bN7lq07b0CFN2h1C7FgX/fg+M6dI9kt7ODJCFg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@api-components/api-url-data-model/-/api-url-data-model-3.0.1.tgz",
+      "integrity": "sha512-Bn4Gp1YwqEZTOxvTh8oKo09hIRj33IESIGJwuJPKbEqlh4aEwii3sPlBHn2UL05nEBv5YoYkkbHa4GJ61bo5wg==",
       "requires": {
-        "@api-components/amf-helper-mixin": "^3.0.2",
-        "@api-components/api-view-model-transformer": "^3.0.1",
+        "@api-components/amf-helper-mixin": "^3.1.3",
+        "@api-components/api-view-model-transformer": "^3.0.3",
         "@api-components/raml-aware": "^3.0.0",
         "lit-element": "^2.2.1"
       }
@@ -779,6 +779,14 @@
         "resolve": "^1.3.2",
         "semver": "^5.4.1",
         "source-map": "^0.5.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "@babel/generator": {
@@ -1516,6 +1524,14 @@
         "invariant": "^2.2.2",
         "js-levenshtein": "^1.1.3",
         "semver": "^5.5.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "@babel/template": {
@@ -3045,9 +3061,9 @@
       }
     },
     "acorn": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.3.0.tgz",
-      "integrity": "sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.0.0.tgz",
+      "integrity": "sha512-PaF/MduxijYYt7unVGRuds1vBC9bFxbNf+VWqhOClfdgy7RlVkQqt610ig1/yxTgsDIfW1cWDel5EBbOy3jdtQ==",
       "dev": true
     },
     "acorn-jsx": {
@@ -3077,6 +3093,24 @@
         "es6-promisify": "^5.0.0"
       }
     },
+    "aggregate-error": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.0.tgz",
+      "integrity": "sha512-yKD9kEoJIR+2IFqhMwayIBgheLYbB3PS2OBhWae1L/ODTd/JF/30cW0bc9TqzRL3k4U41Dieu3BF4I29p8xesA==",
+      "dev": true,
+      "requires": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^3.2.0"
+      },
+      "dependencies": {
+        "indent-string": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+          "dev": true
+        }
+      }
+    },
     "ajv": {
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
@@ -3995,6 +4029,12 @@
         }
       }
     },
+    "clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true
+    },
     "cli-cursor": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
@@ -4532,14 +4572,6 @@
       "requires": {
         "browserslist": "^4.6.6",
         "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
       }
     },
     "core-util-is": {
@@ -4599,6 +4631,14 @@
         "semver": "^5.5.0",
         "shebang-command": "^1.2.0",
         "which": "^1.2.9"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "cryptojslib": {
@@ -4746,16 +4786,36 @@
       }
     },
     "del": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-5.0.0.tgz",
-      "integrity": "sha512-TfU3nUY0WDIhN18eq+pgpbLY9AfL5RfiE9czKaTSolc6aK7qASXfDErvYgjV1UqCR4sNXDoxO0/idPmhDUt2Sg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
+      "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==",
       "dev": true,
       "requires": {
-        "globby": "^10.0.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "rimraf": "^2.6.3"
+        "globby": "^10.0.1",
+        "graceful-fs": "^4.2.2",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.1",
+        "p-map": "^3.0.0",
+        "rimraf": "^3.0.0",
+        "slash": "^3.0.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
+          "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        }
       }
     },
     "delayed-stream": {
@@ -5231,49 +5291,56 @@
       }
     },
     "eslint": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.16.0.tgz",
-      "integrity": "sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.2.1.tgz",
+      "integrity": "sha512-ES7BzEzr0Q6m5TK9i+/iTpKjclXitOdDK4vT07OqbkBT2/VcN/gO9EL1C4HlK3TAOXYv2ItcmbVR9jO1MR0fJg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
-        "ajv": "^6.9.1",
+        "ajv": "^6.10.0",
         "chalk": "^2.1.0",
         "cross-spawn": "^6.0.5",
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
-        "eslint-scope": "^4.0.3",
-        "eslint-utils": "^1.3.1",
-        "eslint-visitor-keys": "^1.0.0",
-        "espree": "^5.0.1",
+        "eslint-scope": "^5.0.0",
+        "eslint-utils": "^1.4.2",
+        "eslint-visitor-keys": "^1.1.0",
+        "espree": "^6.1.0",
         "esquery": "^1.0.1",
         "esutils": "^2.0.2",
         "file-entry-cache": "^5.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob": "^7.1.2",
+        "glob-parent": "^5.0.0",
         "globals": "^11.7.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
-        "inquirer": "^6.2.2",
-        "js-yaml": "^3.13.0",
+        "inquirer": "^6.4.1",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.3.0",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.14",
         "minimatch": "^3.0.4",
         "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
         "optionator": "^0.8.2",
-        "path-is-inside": "^1.0.2",
         "progress": "^2.0.0",
         "regexpp": "^2.0.1",
-        "semver": "^5.5.1",
-        "strip-ansi": "^4.0.0",
-        "strip-json-comments": "^2.0.1",
+        "semver": "^6.1.2",
+        "strip-ansi": "^5.2.0",
+        "strip-json-comments": "^3.0.1",
         "table": "^5.2.3",
-        "text-table": "^0.2.0"
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
         "ansi-styles": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -5295,12 +5362,12 @@
           }
         },
         "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^3.0.0"
+            "ansi-regex": "^4.1.0"
           }
         }
       }
@@ -5383,12 +5450,12 @@
       }
     },
     "eslint-plugin-html": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-4.0.6.tgz",
-      "integrity": "sha512-nj6A9oK+7BKnMm0E7dMRH3r75BfpkXtcVIb3pFC4AcDdBTNyg2NGxHXyFNT1emW4VsR7P2SZvRXXQtUR+kY08w==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.0.0.tgz",
+      "integrity": "sha512-PQcGippOHS+HTbQCStmH5MY1BF2MaU8qW/+Mvo/8xTa/ioeMXdSP+IiaBw2+nh0KEMfYQKuTz1Zo+vHynjwhbg==",
       "dev": true,
       "requires": {
-        "htmlparser2": "^3.8.2"
+        "htmlparser2": "^3.10.1"
       }
     },
     "eslint-plugin-import": {
@@ -5448,9 +5515,9 @@
       }
     },
     "eslint-scope": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
+      "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.1.0",
@@ -5473,14 +5540,14 @@
       "dev": true
     },
     "espree": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-5.0.1.tgz",
-      "integrity": "sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.0.tgz",
+      "integrity": "sha512-boA7CHRLlVWUSg3iL5Kmlt/xT3Q+sXnKoRYYzj1YeM10A76TEJBbotV5pKbnK42hEUIr121zTv+QLRM5LsCPXQ==",
       "dev": true,
       "requires": {
-        "acorn": "^6.0.7",
+        "acorn": "^7.0.0",
         "acorn-jsx": "^5.0.0",
-        "eslint-visitor-keys": "^1.0.0"
+        "eslint-visitor-keys": "^1.1.0"
       }
     },
     "esprima": {
@@ -6731,23 +6798,11 @@
       "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
       "dev": true
     },
-    "is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
-      "requires": {
-        "is-path-inside": "^2.1.0"
-      }
-    },
     "is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
-      "requires": {
-        "path-is-inside": "^1.0.2"
-      }
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.1.tgz",
+      "integrity": "sha512-CKstxrctq1kUesU6WhtZDbYKzzYBuRH0UYInAVrkc/EYdB9ltbfE0gOoayG9nhohG6447sOOVGhHqsdmBvkbNg==",
+      "dev": true
     },
     "is-plain-obj": {
       "version": "1.1.0",
@@ -6933,6 +6988,12 @@
             "istanbul-lib-coverage": "^1.2.1",
             "semver": "^5.3.0"
           }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
         }
       }
     },
@@ -6964,14 +7025,6 @@
         "@babel/types": "^7.4.0",
         "istanbul-lib-coverage": "^2.0.5",
         "semver": "^6.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
       }
     },
     "istanbul-lib-report": {
@@ -7691,6 +7744,12 @@
           "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
           "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
           "dev": true
+        },
+        "p-map": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
+          "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
+          "dev": true
         }
       }
     },
@@ -8071,6 +8130,12 @@
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
           "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
         }
       }
     },
@@ -8458,6 +8523,12 @@
           "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
           "dev": true
         },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+          "dev": true
+        },
         "supports-color": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
@@ -8546,6 +8617,14 @@
       "requires": {
         "object.getownpropertydescriptors": "^2.0.3",
         "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "node-releases": {
@@ -8555,6 +8634,14 @@
       "dev": true,
       "requires": {
         "semver": "^5.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "nomnom": {
@@ -8576,6 +8663,14 @@
         "resolve": "^1.10.0",
         "semver": "2 || 3 || 4 || 5",
         "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
       }
     },
     "normalize-path": {
@@ -8791,10 +8886,13 @@
       }
     },
     "p-map": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-      "dev": true
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
+      "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+      "dev": true,
+      "requires": {
+        "aggregate-error": "^3.0.0"
+      }
     },
     "p-try": {
       "version": "1.0.0",
@@ -9749,9 +9847,9 @@
       }
     },
     "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
       "dev": true
     },
     "semver-compare": {
@@ -10183,9 +10281,9 @@
       }
     },
     "strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
+      "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
       "dev": true
     },
     "supports-color": {
@@ -10847,6 +10945,12 @@
       "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
       "dev": true
     },
+    "v8-compile-cache": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
+      "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==",
+      "dev": true
+    },
     "valid-url": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz",
diff --git a/package.json b/package.json
index 1210650..7d434fa 100644
--- a/package.json
+++ b/package.json
@@ -36,10 +36,10 @@
     "@advanced-rest-client/events-target-mixin": "^3.0.0",
     "@advanced-rest-client/http-method-selector": "^3.0.0",
     "@advanced-rest-client/uuid-generator": "^3.0.1",
-    "@api-components/amf-helper-mixin": "^3.0.2",
+    "@api-components/amf-helper-mixin": "^3.1.0",
     "@api-components/api-body-editor": "^3.0.0",
     "@api-components/api-headers-editor": "^3.0.2",
-    "@api-components/api-url-data-model": "^3.0.0",
+    "@api-components/api-url-data-model": "^3.0.1",
     "@api-components/api-url-editor": "^3.0.0",
     "@api-components/api-url-params-editor": "^3.0.2",
     "@anypoint-web-components/anypoint-button": "^1.0.4",