openapi-explorer 0.9.310 → 0.9.314

package/dist/lib/templates/navbar-template.js

@@ -0,0 +1,54 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = navbarTemplate;
+exports.expandCollapseAll = expandCollapseAll;
+
+var _litElement = require("lit-element");
+
+var _commonUtils = require("../utils/common-utils");
+
+function onExpandCollapse(tagId) {
+  const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
+
+  if (!tag) {
+    return;
+  }
+
+  tag.expanded = !tag.expanded;
+
+  if (tag.expanded && this.operationsCollapsed) {
+    this.resolvedSpec.tags.filter(t => t.elementId !== tagId).forEach(t => t.expanded = false);
+  }
+
+  this.requestUpdate();
+}
+
+function expandCollapseAll() {
+  const expand = this.operationsCollapsed;
+  this.operationsCollapsed = !expand;
+  this.resolvedSpec.tags.forEach(t => {
+    t.expanded = expand;
+  });
+}
+/* eslint-disable indent */
+
+
+function navbarTemplate() {
+  return (0, _litElement.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? (0, _litElement.html)` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : (0, _litElement.html)` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${(0, _litElement.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToEventTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 ? (0, _litElement.html)` ${this.operationsCollapsed ? (0, _litElement.html)`<div @click="${e => {
+    expandCollapseAll.call(this, e);
+  }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${e => {
+    expandCollapseAll.call(this, e);
+  }}" style="font-size:16px;transform:rotate(90deg);cursor:pointer">▸</div>`}` : ''} </div> </div> </div> ${this.resolvedSpec.tags.filter(tag => tag.paths.filter(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path)).length).map(tag => (0, _litElement.html)` <slot name="nav-${tag.elementId}"> <div class="nav-bar-tag-and-paths ${tag.expanded ? 'expanded' : 'collapsed'}"> ${tag.name === 'General ⦂' ? (0, _litElement.html)`` : (0, _litElement.html)` <div class="nav-bar-tag" id="link-${tag.elementId}" data-content-id="${tag.elementId}" @click="${() => {
+    onExpandCollapse.call(this, tag.elementId);
+  }}"> <div style="display:flex;justify-content:space-between;width:100%"> <div>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </div> </div> `} <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => {
+    if (this.matchPaths) {
+      return (0, _commonUtils.pathIsInSearch)(this.matchPaths, v);
+    }
+
+    return true;
+  }).map(p => (0, _litElement.html)` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
+    this.scrollToEventTarget(e, false);
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${this.resolvedSpec.components && this.showComponents === 'true' ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <div class="nav-bar-section-title">COMPONENTS</div> </div> </div> ${this.resolvedSpec.components.map(component => component.subComponents.filter(s => s.expanded).length ? (0, _litElement.html)` <div class="nav-bar-tag" data-content-id="cmp--${component.name.toLowerCase()}" id="link-cmp--${component.name.toLowerCase()}" @click="${e => this.scrollToEventTarget(e, false)}"> ${component.name} </div> ${component.subComponents.filter(s => s.expanded).map(p => (0, _litElement.html)` <div class="nav-bar-path" data-content-id="cmp--${p.id}" id="link-cmp--${p.id}" @click="${e => this.scrollToEventTarget(e, false)}"> <span> ${p.name} </span> </div>`)}` : '')}` : ''} </nav>`} </nav> `;
+}
+/* eslint-enable indent */

package/dist/lib/templates/overview-template.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = overviewTemplate;
+
+var _litElement = require("lit-element");
+
+var _unsafeHtml = require("lit-html/directives/unsafe-html");
+
+var _marked = require("marked");
+
+/* eslint-disable indent */
+function overviewTemplate() {
+  return (0, _litElement.html)` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? (0, _litElement.html)` <slot name="overview"> <div id="api-title" part="label-overview-title" style="font-size:32px" class="section-padding"> ${this.resolvedSpec.info.title} ${!this.resolvedSpec.info.version ? '' : (0, _litElement.html)` <span style="font-size:var(--font-size-small);font-weight:700"> ${this.resolvedSpec.info.version} </span>`} </div> <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px);margin-top:8px" class="section-padding"> ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email ? (0, _litElement.html)`<span>${this.resolvedSpec.info.contact.name || 'Email'}: <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a> </span>` : ''} ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.url ? (0, _litElement.html)`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? (0, _litElement.html)`<span>License: ${this.resolvedSpec.info.license.url ? (0, _litElement.html)`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>` : this.resolvedSpec.info.license.name} </span>` : ''} ${this.resolvedSpec.info.termsOfService ? (0, _litElement.html)`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">Terms of Service</a></span>` : ''} </div> </slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? (0, _litElement.html)`${(0, _unsafeHtml.unsafeHTML)(`<div class="m-markdown regular-font section-padding">${(0, _marked.marked)(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> ` : ''} </section> `;
+}
+/* eslint-enable indent */

package/dist/lib/templates/responsiveViewMainBodyTemplate.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = responsiveViewMainBodyTemplate;
+
+var _litElement = require("lit-element");
+
+var _focusedEndpointTemplate = _interopRequireDefault(require("./focused-endpoint-template"));
+
+var _overviewTemplate = _interopRequireDefault(require("./overview-template"));
+
+var _endpointTemplate = _interopRequireDefault(require("./endpoint-template"));
+
+var _serverTemplate = _interopRequireDefault(require("./server-template"));
+
+var _securitySchemeTemplate = _interopRequireDefault(require("./security-scheme-template"));
+
+var _navbarTemplate = _interopRequireDefault(require("./navbar-template"));
+
+var _advanceSearchTemplate = _interopRequireDefault(require("./advance-search-template"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _colorUtils = _interopRequireDefault(require("../utils/color-utils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Templates
+function responsiveViewMainBodyTemplate() {
+  const newTheme = {
+    bg1: _colorUtils.default.isValidHexColor(this.bgColor) ? this.bgColor : '',
+    fg1: _colorUtils.default.isValidHexColor(this.textColor) ? this.textColor : '',
+    primaryColor: _colorUtils.default.isValidHexColor(this.primaryColor) ? this.primaryColor : '#3E6077',
+    secondaryColor: _colorUtils.default.isValidHexColor(this.secondaryColor) ? this.secondaryColor : '#FBAF0B',
+    headerColor: _colorUtils.default.isValidHexColor(this.headerColor) ? this.headerColor : '',
+    navBgColor: _colorUtils.default.isValidHexColor(this.navBgColor) ? this.navBgColor : '',
+    navTextColor: _colorUtils.default.isValidHexColor(this.navTextColor) ? this.navTextColor : '',
+    navHoverBgColor: _colorUtils.default.isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',
+    navHoverTextColor: _colorUtils.default.isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : ''
+  };
+  /* eslint-disable indent */
+
+  return (0, _litElement.html)` ${_theme.default.call(this, newTheme)} ${this.allowAdvancedSearch === 'false' ? '' : _advanceSearchTemplate.default.call(this)} <div id="the-main-body" class="body"> ${this.renderStyle === 'focused' && this.resolvedSpec ? _navbarTemplate.default.call(this) : ''} ${this.loading === true ? (0, _litElement.html)`<slot name="loader"><div class="loader"></div></slot>` : (0, _litElement.html)` <main class="main-content regular-font" part="section-main-content"> <slot></slot> <div id="operations-root" class="main-content-inner"> ${this.loadFailed === true ? (0, _litElement.html)`<div style="text-align:center;margin:16px">Unable to load the Spec${this.specUrl ? ': ' : ''}<strong>${this.specUrl}</strong></div>` : (0, _litElement.html)` <div class="operations-root" @click="${e => {
+    this.handleHref(e);
+  }}"> ${this.renderStyle === 'focused' ? (0, _litElement.html)`${_focusedEndpointTemplate.default.call(this)}` : (0, _litElement.html)` ${this.showInfo === 'true' ? _overviewTemplate.default.call(this) : ''} ${this.allowServerSelection === 'true' ? _serverTemplate.default.call(this) : ''} ${this.allowAuthentication === 'true' ? _securitySchemeTemplate.default.call(this) : ''} <section id="section" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="custom-section"></slot> </section> ${_endpointTemplate.default.call(this)}`} </div> `}</div></main>`} </div> <slot name="footer"></slot> `;
+}
+/* eslint-enable indent */

package/dist/lib/templates/security-scheme-template.js

@@ -0,0 +1,342 @@
+"use strict";
+
+exports.__esModule = true;
+exports.checkForAuthToken = checkForAuthToken;
+exports.default = securitySchemeTemplate;
+exports.pathSecurityTemplate = pathSecurityTemplate;
+
+var _litElement = require("lit-element");
+
+var _unsafeHtml = require("lit-html/directives/unsafe-html");
+
+var _marked = require("marked");
+
+var _base64url = _interopRequireDefault(require("base64url"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function onApiKeyChange(apiKeyId, e) {
+  let apiKeyValue = '';
+  const securityObj = this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
+
+  if (!securityObj) {
+    return;
+  }
+
+  const trEl = e.target.closest('tr');
+
+  if (securityObj.type && securityObj.type === 'http' && securityObj.scheme && securityObj.scheme.toLowerCase() === 'basic') {
+    const userVal = trEl.querySelector('.api-key-user').value.trim();
+    const passwordVal = trEl.querySelector('.api-key-password').value.trim();
+
+    if (passwordVal) {
+      apiKeyValue = `Basic ${btoa(`${userVal}:${passwordVal}`)}`;
+    }
+  } else {
+    apiKeyValue = trEl.querySelector('.api-key-input').value.trim();
+
+    if (apiKeyValue) {
+      if (securityObj.scheme && securityObj.scheme.toLowerCase() === 'bearer') {
+        apiKeyValue = `Bearer ${apiKeyValue.replace(/^Bearer\s+/i, '')}`;
+      }
+    }
+  }
+
+  securityObj.finalKeyValue = apiKeyValue;
+  this.requestUpdate();
+}
+
+function onClearAllApiKeys() {
+  this.resolvedSpec.securitySchemes.forEach(v => {
+    v.user = '';
+    v.password = '';
+    v.value = '';
+    v.finalKeyValue = '';
+  });
+  this.requestUpdate();
+} // Updates the OAuth Access Token (API key), so it reflects in UI and gets used in TRY calls
+
+
+function updateOAuthKey(apiKeyId, tokenType = 'Bearer', accessToken) {
+  const securityObj = this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
+  const tokenPrefix = tokenType && tokenType.toLowerCase() === 'bearer' ? 'Bearer' : tokenType;
+  securityObj.finalKeyValue = `${tokenPrefix}${tokenPrefix ? ' ' : ''}${accessToken}`;
+  this.requestUpdate();
+} // Gets Access-Token in exchange of Authorization Code
+
+
+async function fetchAccessToken(tokenUrl, clientId, clientSecret, redirectUrl, grantType, authCode, sendClientSecretIn = 'header', apiKeyId, authFlowDivEl, scopes = null) {
+  const respDisplayEl = authFlowDivEl ? authFlowDivEl.querySelector('.oauth-resp-display') : undefined;
+  const urlFormParams = new URLSearchParams();
+  const headers = new Headers();
+  urlFormParams.append('grant_type', grantType);
+
+  if (redirectUrl) {
+    urlFormParams.append('redirect_uri', redirectUrl);
+  }
+
+  if (authCode) {
+    urlFormParams.append('code', authCode);
+  }
+
+  if (sendClientSecretIn === 'header') {
+    headers.set('Authorization', `Basic ${btoa(`${clientId}:${clientSecret}`)}`);
+  } else {
+    urlFormParams.append('client_id', clientId);
+
+    if (clientSecret) {
+      urlFormParams.append('client_secret', clientSecret);
+    }
+  }
+
+  if (scopes) {
+    urlFormParams.append('scope', scopes);
+  }
+
+  const {
+    codeVerifier
+  } = JSON.parse(localStorage.getItem('openapi-explorer-oauth') || '{}');
+  localStorage.removeItem('openapi-explorer-oauth');
+
+  if (codeVerifier) {
+    urlFormParams.append('code_verifier', codeVerifier);
+  }
+
+  try {
+    const resp = await fetch(tokenUrl, {
+      method: 'POST',
+      headers,
+      body: urlFormParams
+    });
+    const tokenResp = await resp.json();
+
+    if (!resp.ok) {
+      if (respDisplayEl) {
+        respDisplayEl.innerHTML = `<span style="color:var(--red)">${tokenResp.error_description || tokenResp.error_description || 'Unable to get access token'}</span>`;
+      }
+
+      return;
+    }
+
+    if (tokenResp.token_type && tokenResp.access_token) {
+      updateOAuthKey.call(this, apiKeyId, tokenResp.token_type, tokenResp.access_token);
+
+      if (respDisplayEl) {
+        respDisplayEl.innerHTML = '<span style="color:var(--green)">Access Token Received</span>';
+      }
+    }
+  } catch (err) {
+    if (respDisplayEl) {
+      respDisplayEl.innerHTML = '<span style="color:var(--red)">Failed to get access token</span>';
+    }
+  }
+}
+
+function getCookieValue(keyId) {
+  const foundCookie = (document.cookie || '').split(';').find(c => c.split('=')[0] === keyId);
+  return foundCookie && foundCookie.split('=')[1] || '';
+}
+
+function toObject(urlSearchParams) {
+  const result = {};
+  const entries = urlSearchParams && urlSearchParams.entries() || [];
+
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+
+  return result;
+} // Gets invoked when it receives the Authorization Code from the other window via message-event
+
+
+async function checkForAuthToken(redirectToApiLocation) {
+  const parameters = toObject(new URLSearchParams(window.location.search));
+  const hashQuery = toObject(new URLSearchParams(window.location.hash.slice(1)));
+  Object.assign(parameters, hashQuery);
+  const newUrl = new URL(window.location);
+  newUrl.searchParams.delete('nonce');
+  newUrl.searchParams.delete('expires_in');
+  newUrl.searchParams.delete('access_token');
+  newUrl.searchParams.delete('token_type');
+  newUrl.searchParams.delete('id_token');
+  newUrl.searchParams.delete('state');
+  newUrl.searchParams.delete('code');
+  newUrl.searchParams.delete('iss');
+  newUrl.searchParams.delete('scope');
+  newUrl.searchParams.delete('prompt');
+  newUrl.searchParams.delete('hd');
+  newUrl.searchParams.delete('authuser');
+  newUrl.searchParams.delete('redirect_auth');
+
+  if (!parameters.state) {
+    return;
+  }
+
+  const sanitizedUrlWithHash = newUrl.toString().replace(/#((code|state|access_token|id_token|authuser|expires_in|hd|prompt|scope|token_type)=[^&]+&?)*$/ig, '');
+  history.replaceState({}, undefined, sanitizedUrlWithHash);
+  const {
+    apiKeyId,
+    flowId,
+    url
+  } = JSON.parse(_base64url.default.decode(parameters.state));
+
+  if (redirectToApiLocation && url && !parameters.redirect_auth) {
+    const apiExplorerLocation = new URL(url);
+    Object.keys(parameters).forEach(key => apiExplorerLocation.searchParams.append(key, parameters[key]));
+    apiExplorerLocation.searchParams.append('redirect_auth', true);
+    window.location.replace(apiExplorerLocation.toString());
+    return;
+  }
+
+  if (parameters.code) {
+    const securityObj = this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
+    const tokenUrl = securityObj && securityObj.flows[flowId] && new URL(securityObj.flows[flowId].tokenUrl || '', this.selectedServer.computedUrl);
+    await fetchAccessToken.call(this, tokenUrl, securityObj.clientId, securityObj.clientSecret, securityObj.redirectUri || window.location.href, 'authorization_code', parameters.code, null, apiKeyId);
+    return;
+  }
+
+  updateOAuthKey.call(this, apiKeyId, parameters.token_type, parameters.access_token);
+}
+
+async function onInvokeOAuthFlow(apiKeyId, flowType, authUrl, tokenUrl, e) {
+  const authFlowDivEl = e.target.closest('.oauth-flow');
+  const clientId = authFlowDivEl.querySelector('.oauth-client-id') ? authFlowDivEl.querySelector('.oauth-client-id').value.trim() : '';
+  const clientSecret = authFlowDivEl.querySelector('.oauth-client-secret') ? authFlowDivEl.querySelector('.oauth-client-secret').value.trim() : '';
+  const sendClientSecretIn = authFlowDivEl.querySelector('.oauth-send-client-secret-in') ? authFlowDivEl.querySelector('.oauth-send-client-secret-in').value.trim() : 'header';
+  const checkedScopeEls = [...authFlowDivEl.querySelectorAll('input[type="checkbox"]:checked')];
+  const securityObj = this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
+  let grantType = '';
+  let responseType = ''; // clear previous error messages
+
+  const errEls = [...authFlowDivEl.parentNode.querySelectorAll('.oauth-resp-display')];
+  errEls.forEach(v => {
+    v.innerHTML = '';
+  });
+
+  if (flowType === 'authorizationCode' || flowType === 'implicit') {
+    const authUrlObj = new URL(authUrl);
+    const authCodeParams = new URLSearchParams(authUrlObj.search);
+
+    if (flowType === 'authorizationCode') {
+      const randomBytes = new Uint32Array(3);
+      (window.crypto || window.msCrypto).getRandomValues(randomBytes);
+      authCodeParams.set('nonce', randomBytes.toString('hex').split(',').join(''));
+      grantType = 'authorization_code';
+      responseType = 'code';
+      const codeVerifier = randomBytes.toString('hex').split(',').join('');
+      const hash = await (window.crypto || window.msCrypto).subtle.digest('SHA-256', new TextEncoder().encode(codeVerifier));
+      const codeChallenge = (0, _base64url.default)(hash);
+      authCodeParams.set('code_challenge', codeChallenge);
+      authCodeParams.set('code_challenge_method', 'S256');
+      localStorage.setItem('openapi-explorer-oauth', JSON.stringify({
+        codeVerifier
+      }));
+    } else if (flowType === 'implicit') {
+      responseType = 'token';
+    }
+
+    const selectedScopes = checkedScopeEls.map(v => v.value).join(' ');
+
+    if (selectedScopes) {
+      authCodeParams.set('scope', selectedScopes);
+    }
+
+    authCodeParams.set('client_id', clientId);
+    authCodeParams.set('redirect_uri', securityObj.redirectUri || window.location.href);
+    authCodeParams.set('response_type', responseType);
+    authCodeParams.set('state', _base64url.default.encode(JSON.stringify({
+      apiKeyId,
+      flowId: flowType,
+      url: window.location.href
+    })));
+    authUrlObj.search = authCodeParams.toString();
+    window.location.assign(authUrlObj.toString());
+  } else if (flowType === 'clientCredentials') {
+    grantType = 'client_credentials';
+    const selectedScopes = checkedScopeEls.map(v => v.value).join(' ');
+    fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, '', grantType, '', sendClientSecretIn, apiKeyId, authFlowDivEl, selectedScopes);
+  }
+}
+/* eslint-disable indent */
+
+
+function oAuthFlowTemplate(flowName, securityObj, authFlow) {
+  const apiKeyId = securityObj.apiKeyId;
+
+  const getFullUrl = url => url ? new URL(url, this.selectedServer.computedUrl) : undefined;
+
+  const authorizationUrl = getFullUrl(authFlow.authorizationUrl, this.selectedServer.computedUrl);
+  const tokenUrl = getFullUrl(authFlow.tokenUrl, this.selectedServer.computedUrl);
+  const refreshUrl = getFullUrl(authFlow.refreshUrl, this.selectedServer.computedUrl);
+  let flowNameDisplay;
+
+  if (flowName === 'authorizationCode') {
+    flowNameDisplay = 'Authorization Code Flow';
+  } else if (flowName === 'clientCredentials') {
+    flowNameDisplay = 'Client Credentials Flow';
+  } else if (flowName === 'implicit') {
+    flowNameDisplay = 'Implicit Flow';
+  } else {
+    flowNameDisplay = flowName;
+  }
+
+  return (0, _litElement.html)` <div class="oauth-flow" style="padding:10px 0;margin-bottom:10px"> <div class="tiny-title upper" style="margin-bottom:5px">${flowNameDisplay}</div> ${authorizationUrl ? (0, _litElement.html)`<div><span style="width:75px;display:inline-block">Auth URL</span> <span class="mono-font"> ${authorizationUrl} </span></div>` : ''} ${tokenUrl ? (0, _litElement.html)`<div><span style="width:75px;display:inline-block">Token URL</span> <span class="mono-font">${tokenUrl}</span></div>` : ''} ${refreshUrl ? (0, _litElement.html)`<div><span style="width:75px;display:inline-block">Refresh URL</span> <span class="mono-font">${refreshUrl}</span></div>` : ''} ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' ? (0, _litElement.html)` ${authFlow.scopes ? (0, _litElement.html)` <span> Scopes </span> <div class="oauth-scopes" part="section-auth-scopes" style="width:100%;display:flex;flex-direction:column;flex-wrap:wrap;margin:0 0 .125rem 0"> ${Object.entries(authFlow.scopes).map((scopeAndDescr, index) => (0, _litElement.html)` <div class="m-checkbox" style="display:inline-flex;align-items:center"> <input type="checkbox" checked="checked" part="checkbox checkbox-auth-scope" id="${flowName}${index}" value="${scopeAndDescr[0]}"> <label for="${flowName}${index}" style="margin-left:5px"> <span class="mono-font">${scopeAndDescr[0]}</span> ${scopeAndDescr[0] !== scopeAndDescr[1] ? ` - ${scopeAndDescr[1] || ''}` : ''} </label> </div> `)} </div> ` : ''} <div style="display:flex"> <input type="text" part="textbox textbox-auth-client-id" value="${securityObj.clientId || ''}" placeholder="Client ID" spellcheck="false" class="oauth-client-id"> ${flowName === 'clientCredentials' ? (0, _litElement.html)` <input type="password" part="textbox textbox-auth-client-secret" value="" placeholder="Client Secret" spellcheck="false" class="oauth-client-secret" style="margin:0 5px"> <select aria-label="oauth client secret location" style="margin-right:5px" class="oauth-send-client-secret-in"> <option value="header" selected="selected"> Authorization Header </option> <option value="request-body"> Request Body </option> </select>` : (0, _litElement.html)`<div style="width:5px"></div>`} ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' ? (0, _litElement.html)` <button class="m-btn thin-border" part="btn btn-outline" @click="${e => {
+    onInvokeOAuthFlow.call(this, apiKeyId, flowName, authorizationUrl, tokenUrl, e);
+  }}">GET TOKEN</button>` : ''} </div> <div class="oauth-resp-display red-text small-font-size"></div> ` : ''} </div> `;
+}
+
+function securitySchemeTemplate() {
+  const schemes = this.resolvedSpec && this.resolvedSpec.securitySchemes;
+
+  if (!schemes) {
+    return undefined;
+  }
+
+  const providedApiKeys = schemes.filter(v => v.finalKeyValue);
+  return (0, _litElement.html)` <section id="auth" part="section-auth" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="authentication"> <div class="section-padding"> <div class="sub-title regular-font">AUTHENTICATION</div> <div class="small-font-size" style="display:flex;align-items:center;min-height:30px"> ${providedApiKeys.length > 0 ? (0, _litElement.html)` <div class="blue-text"> ${providedApiKeys.length} API key applied </div> <div style="flex:1"></div> <button class="m-btn thin-border" part="btn btn-outline" @click="${() => {
+    onClearAllApiKeys.call(this);
+  }}">CLEAR ALL API KEYS</button>` : (0, _litElement.html)`<div class="red-text">No API key applied</div>`} </div> ${schemes.length > 0 ? (0, _litElement.html)` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => (0, _litElement.html)` <tr> <td style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px"> <span style="font-weight:700">${v.typeDisplay}</span> ${v.finalKeyValue ? (0, _litElement.html)` <span class="blue-text"> ${v.finalKeyValue ? 'Key Applied' : ''} </span> <button class="m-btn thin-border small" part="btn btn-outline" @click="${() => {
+    v.finalKeyValue = '';
+    this.requestUpdate();
+  }}">REMOVE</button> ` : ''} </div> ${v.description ? (0, _litElement.html)` <div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))} </div>` : ''} </td> <td> ${v.type && (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer') ? (0, _litElement.html)` ${v.type.toLowerCase() === 'apikey' ? (0, _litElement.html)`Send <code>${v.name}</code> in <code>${v.in}</code> with the given value:` : (0, _litElement.html)`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`} <div style="display:flex"> ${v.in === 'cookie' ? (0, _litElement.html)` <div style="display:block"> <input type="text" value="${getCookieValue(v.apiKeyId)}" disabled="disabled" class="api-key-input" placeholder="IygRVGf54B59e0GAkKmigGfuiVlp/uhFfk2ifA+jMMJzau2F1jPldc09gPTfnMw13BFBxqUZIFDm55DPfwkb0A==" spellcheck="false" style="resize:horizontal;width:100%"> <br> <small> <strong>Cookies</strong>&nbsp;are set and configured by the remote service, therefore it is not possible to configure them from the browser. </small> </div>` : (0, _litElement.html)` <input type="text" value="${v.value}" class="api-key-input" placeholder="api-token" spellcheck="false"> <button class="m-btn thin-border" style="margin-left:5px" part="btn btn-outline" @click="${e => {
+    onApiKeyChange.call(this, v.apiKeyId, e);
+  }}"> ${v.finalKeyValue ? 'UPDATE' : 'SET'} </button>`} </div>` : ''} ${v.type && v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'basic' ? (0, _litElement.html)` Send the <code>Authorization</code> header containing the type <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>. <div style="display:flex"> <input type="text" value="${v.user}" placeholder="username" spellcheck="false" class="api-key-user" style="width:100px"> <input type="password" value="${v.password}" placeholder="password" spellcheck="false" class="api-key-password" style="width:100px;margin:0 5px"> <button class="m-btn thin-border" @click="${e => {
+    onApiKeyChange.call(this, v.apiKeyId, e);
+  }}" part="btn btn-outline"> ${v.finalKeyValue ? 'UPDATE' : 'SET'} </button> </div>` : ''} </td> </tr> ${v.type.toLowerCase() === 'oauth2' ? (0, _litElement.html)` <tr> <td colspan="2" style="border:none;padding-left:48px"> ${Object.keys(v.flows).map(f => oAuthFlowTemplate.call(this, f, v, v.flows[f]))} </td> </tr> ` : ''} `)} </table>` : ''} </div> </slot> </section> `;
+}
+
+function getOauthScopeTemplate(scopes) {
+  if (!scopes || !scopes.length || !Array.isArray(scopes)) {
+    return '';
+  }
+
+  return (0, _litElement.html)` <div> <b>Required scopes:</b> <br> <div style="margin-left:8px"> ${scopes.map(scope => (0, _litElement.html)`<span>${scope}</span>&nbsp;`)} </div> </div>`;
+}
+
+function pathSecurityTemplate(pathSecurity) {
+  if (this.resolvedSpec.securitySchemes && pathSecurity) {
+    const orSecurityKeys1 = [];
+    pathSecurity.forEach(pSecurity => {
+      const andSecurityKeys1 = [];
+      const andKeyTypes = [];
+      Object.keys(pSecurity).forEach(pathSecurityKey => {
+        const s = this.resolvedSpec.securitySchemes.find(ss => ss.apiKeyId === pathSecurityKey);
+
+        if (s) {
+          andKeyTypes.push(s.typeDisplay);
+          andSecurityKeys1.push({ ...s,
+            scopes: pSecurity[pathSecurityKey]
+          });
+        }
+      });
+      orSecurityKeys1.push({
+        securityTypes: andKeyTypes.length > 1 ? `${andKeyTypes[0]} + ${andKeyTypes.length - 1} more` : andKeyTypes[0],
+        securityDefs: andSecurityKeys1
+      });
+    });
+    return (0, _litElement.html)`<div class="security-info-button" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> <div style="position:relative;display:flex;min-width:350px;max-width:700px;justify-content:flex-end"> <svg width="16" height="24" style="cursor:pointer"> <g> <path style="fill:var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z"/> </g> </svg> ${orSecurityKeys1.map((orSecurityItem1, i) => (0, _litElement.html)` ${i !== 0 ? (0, _litElement.html)`<div style="padding:3px 4px"> OR </div>` : ''} <div class="tooltip" style="cursor:pointer"> <div style="padding:2px 4px;white-space:nowrap;text-overflow:ellipsis;max-width:150px;overflow:hidden"> <span part="anchor anchor-operation-security"> ${orSecurityItem1.securityTypes} </span> </div> <div class="tooltip-text" style="position:absolute;color:var(--fg);top:26px;right:0;border:1px solid var(--border-color);padding:2px 4px;display:block"> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<div>Requires <b>all</b> of the following </div>` : ''} <div style="padding-left:8px"> ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => (0, _litElement.html)` ${andSecurityItem.type === 'oauth2' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} OAuth token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : andSecurityItem.type === 'http' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>`} `)} </div> </div> </div> `)} </div> </div>`;
+  }
+
+  return '';
+}
+/* eslint-enable indent */

package/dist/lib/templates/server-template.js

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = serverTemplate;
+
+var _litElement = require("lit-element");
+
+var _marked = require("marked");
+
+var _unsafeHtml = require("lit-html/directives/unsafe-html");
+
+function onApiServerChange(e, server) {
+  if (e && e.target.checked) {
+    this.selectedServer = server;
+    this.requestUpdate();
+  }
+}
+
+function onApiServerVarChange(e, serverObj) {
+  const inputEls = [...e.currentTarget.closest('table').querySelectorAll('input, select')];
+  let tempUrl = serverObj.url;
+  inputEls.forEach(v => {
+    const regex = new RegExp(`{${v.dataset.var}}`, 'g');
+    tempUrl = tempUrl.replace(regex, v.value);
+  });
+  serverObj.computedUrl = tempUrl;
+  this.requestUpdate();
+}
+/* eslint-disable indent */
+
+
+function serverVarsTemplate() {
+  return this.selectedServer && this.selectedServer.variables ? (0, _litElement.html)` <div class="table-title"> SERVER VARIABLES</div> <table role="presentation" class="m-table"> ${Object.entries(this.selectedServer.variables).map(kv => (0, _litElement.html)` <tr> <td style="vertical-align:middle">${kv[0]}</td> <td> ${kv[1].enum ? (0, _litElement.html)` <select data-var="${kv[0]}" @input="${e => {
+    onApiServerVarChange.call(this, e, this.selectedServer);
+  }}"> ${Object.entries(kv[1].enum).map(e => kv[1].default === e[1] ? (0, _litElement.html)` <option selected="selected" label="${e[1]}" value="${e[1]}">` : (0, _litElement.html)` <option label="${e[1]}" value="${e[1]}">`)} </select>` : (0, _litElement.html)` <input type="text" part="textbox textbox-server-var" spellcheck="false" data-var="${kv[0]}" value="${kv[1].default}" @input="${e => {
+    onApiServerVarChange.call(this, e, this.selectedServer);
+  }}">`} </td> </tr> ${kv[1].description ? (0, _litElement.html)`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(kv[1].description))} </span></td></tr>` : ''} `)} </table> ` : '';
+}
+
+function serverTemplate() {
+  if (!this.resolvedSpec) {
+    return undefined;
+  }
+
+  return (0, _litElement.html)` <section id="servers" part="section-servers" style="margin-top:24px;margin-bottom:24px" class="regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <div class="sub-title">API SERVER</div> <div class="mono-font" style="margin:12px 0;font-size:calc(var(--font-size-small) + 1px)"> ${!this.resolvedSpec.servers || !this.resolvedSpec.servers.length ? '' : (0, _litElement.html)` ${this.resolvedSpec.servers.map((server, i) => (0, _litElement.html)` <input type="radio" name="api_server" id="srvr-opt-${i}" value="${server.url}" @change="${e => {
+    onApiServerChange.call(this, e, server);
+  }}" .checked="${this.selectedServer.url === server.url}" style="margin:4px 0;cursor:pointer"> <label style="cursor:pointer" for="srvr-opt-${i}"> ${server.url} ${server.description ? (0, _litElement.html)`- <span class="regular-font">${server.description} </span>` : ''} </label> <br> `)} `} <div class="table-title primary-text" part="label-selected-server"> SELECTED: ${this.selectedServer && this.selectedServer.computedUrl || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;
+}
+/* eslint-enable indent */

package/dist/lib/utils/color-utils.js

@@ -0,0 +1,112 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+/* eslint-disable no-mixed-operators */
+
+/* eslint-disable no-bitwise */
+var _default = {
+  color: {
+    inputReverseFg: '#fff',
+    inputReverseBg: '#333',
+    headerBg: '#444',
+
+    getRgb(hexStr) {
+      let hex = (hexStr || '').trim();
+
+      if (hex.indexOf('#') === 0) {
+        hex = hex.slice(1, 7);
+      } // convert 3-digit hex to 6-digits.
+
+
+      if (hex.length === 3 || hex.length === 4) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      }
+
+      if (hex.length !== 6) {
+        // eslint-disable-next-line no-console
+        console.error(`Invalid HEX color: '${hexStr}'`);
+        return {
+          r: 0,
+          g: 0,
+          b: 0
+        };
+      }
+
+      return {
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16)
+      };
+    },
+
+    luminanace(hexColorCode) {
+      const rgb = this.getRgb(hexColorCode);
+      return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114;
+    },
+
+    invert(hexColorCode) {
+      // compare with `>=128`, but giving little more preference to white over black
+      return this.luminanace(hexColorCode) > 149 ? '#000000' : '#ffffff';
+    },
+
+    // https://stackoverflow.com/a/41491220/5091874
+    selectTextColorFromBackground(bcHexColor) {
+      const {
+        r,
+        g,
+        b
+      } = this.getRgb(bcHexColor);
+      const colors = [r / 255, g / 255, b / 255];
+      const c = colors.map(col => {
+        if (col <= 0.03928) {
+          return col / 12.92;
+        }
+
+        return ((col + 0.055) / 1.055) ** 2.4;
+      });
+      const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+      return L > 0.179 ? '#000000' : '#FFFFFF';
+    },
+
+    opacity(hex, opacity) {
+      const rgb = this.getRgb(hex);
+      return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
+    },
+
+    brightness(hex, amt) {
+      const rgb = this.getRgb(hex);
+      rgb.r += amt;
+      rgb.g += amt;
+      rgb.b += amt;
+
+      if (rgb.r > 255) {
+        rgb.r = 255;
+      } else if (rgb.r < 0) {
+        rgb.r = 0;
+      }
+
+      if (rgb.g > 255) {
+        rgb.g = 255;
+      } else if (rgb.g < 0) {
+        rgb.g = 0;
+      }
+
+      if (rgb.b > 255) {
+        rgb.b = 255;
+      } else if (rgb.b < 0) {
+        rgb.b = 0;
+      }
+
+      return `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
+    }
+
+  },
+
+  isValidHexColor(colorCode) {
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
+  }
+
+};
+exports.default = _default;