openapi-explorer 0.9.310 → 0.9.314

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

@@ -0,0 +1,330 @@
+import { html } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { marked } from 'marked';
+import base64url from 'base64url';
+
+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
+
+
+export 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.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 = base64url(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.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 html` <div class="oauth-flow" style="padding:10px 0;margin-bottom:10px"> <div class="tiny-title upper" style="margin-bottom:5px">${flowNameDisplay}</div> ${authorizationUrl ? html`<div><span style="width:75px;display:inline-block">Auth URL</span> <span class="mono-font"> ${authorizationUrl} </span></div>` : ''} ${tokenUrl ? html`<div><span style="width:75px;display:inline-block">Token URL</span> <span class="mono-font">${tokenUrl}</span></div>` : ''} ${refreshUrl ? 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' ? html` ${authFlow.scopes ? 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) => 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' ? 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>` : html`<div style="width:5px"></div>`} ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' ? 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> `;
+}
+
+export default function securitySchemeTemplate() {
+  const schemes = this.resolvedSpec && this.resolvedSpec.securitySchemes;
+
+  if (!schemes) {
+    return undefined;
+  }
+
+  const providedApiKeys = schemes.filter(v => v.finalKeyValue);
+  return 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 ? 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>` : html`<div class="red-text">No API key applied</div>`} </div> ${schemes.length > 0 ? html` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => 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 ? 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 ? html` <div class="m-markdown"> ${unsafeHTML(marked(v.description || ''))} </div>` : ''} </td> <td> ${v.type && (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer') ? html` ${v.type.toLowerCase() === 'apikey' ? html`Send <code>${v.name}</code> in <code>${v.in}</code> with the given value:` : 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' ? 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>` : 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' ? 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' ? 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 html` <div> <b>Required scopes:</b> <br> <div style="margin-left:8px"> ${scopes.map(scope => html`<span>${scope}</span>&nbsp;`)} </div> </div>`;
+}
+
+export 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 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) => html` ${i !== 0 ? 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 ? html`<div>Requires <b>all</b> of the following </div>` : ''} <div style="padding-left:8px"> ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => html` ${andSecurityItem.type === 'oauth2' ? html` <div> ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} OAuth token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : andSecurityItem.type === 'http' ? html` <div> ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : html`Requires`} ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : html` <div> ${orSecurityItem1.securityDefs.length > 1 ? html`<b>${j + 1}.</b> &nbsp;` : 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/es/templates/server-template.js

@@ -0,0 +1,42 @@
+import { html } from 'lit-element';
+import { marked } from 'marked';
+import { unsafeHTML } from '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 ? html` <div class="table-title"> SERVER VARIABLES</div> <table role="presentation" class="m-table"> ${Object.entries(this.selectedServer.variables).map(kv => html` <tr> <td style="vertical-align:middle">${kv[0]}</td> <td> ${kv[1].enum ? 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] ? html` <option selected="selected" label="${e[1]}" value="${e[1]}">` : html` <option label="${e[1]}" value="${e[1]}">`)} </select>` : 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 ? html`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${unsafeHTML(marked(kv[1].description))} </span></td></tr>` : ''} `)} </table> ` : '';
+}
+
+export default function serverTemplate() {
+  if (!this.resolvedSpec) {
+    return undefined;
+  }
+
+  return 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 ? '' : html` ${this.resolvedSpec.servers.map((server, i) => 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 ? 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/{src → dist/es}/utils/color-utils.js

@@ -1,69 +1,106 @@
 /* eslint-disable no-mixed-operators */
+
 /* eslint-disable no-bitwise */
 export 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.
+      } // 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: 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),
+        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);
+      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 {
+        r,
+        g,
+        b
+      } = this.getRgb(bcHexColor);
       const colors = [r / 255, g / 255, b / 255];
-      const c = colors.map((col) => {
+      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';
+      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.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;
+      }
 
-      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);
-  },
-};
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(colorCode);
+  }
+
+};

package/{src → dist/es}/utils/common-utils.js

@@ -9,21 +9,21 @@ export function debounce(fn, delay) {
     }, delay);
   };
 }
-
 export const invalidCharsRegEx = new RegExp(/[\s#:?&={}]/, 'g'); // used for generating valid html element ids by replacing the invalid chars with hyphen (-)
 
 export function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise(resolve => setTimeout(resolve, ms));
 }
-
 export function copyToClipboard(data, e) {
   const btnEl = e.currentTarget;
   const textArea = document.createElement('textarea');
   textArea.value = data;
   textArea.style.position = 'fixed'; // avoid scrolling to bottom
+
   document.body.appendChild(textArea);
   textArea.focus();
   textArea.select();
+
   try {
     document.execCommand('copy');
     btnEl.innerText = 'Copied';
@@ -33,29 +33,28 @@ export function copyToClipboard(data, e) {
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console
   }
+
   document.body.removeChild(textArea);
 }
-
 export function getBaseUrlFromUrl(url) {
   const pathArray = url.split('/');
   return `${pathArray[0]}//${pathArray[2]}`;
 }
-
 export function componentIsInSearch(searchVal, component) {
   return component.name.toLowerCase().includes(searchVal.toLowerCase());
 }
-
 export function pathIsInSearch(searchVal, path) {
   const stringToSearch = `${path.method} ${path.path} ${path.summary || path.description || ''} ${path.operationId || ''}`.toLowerCase();
   return stringToSearch.includes(searchVal.toLowerCase());
 }
-
 export function schemaKeys(schemaProps, result = new Set()) {
   if (!schemaProps) {
     return result;
   }
-  Object.keys(schemaProps).forEach((key) => {
+
+  Object.keys(schemaProps).forEach(key => {
     result.add(key);
+
     if (schemaProps[key].properties) {
       schemaKeys(schemaProps[key].properties, result);
     } else if (schemaProps[key].items && schemaProps[key].items.properties) {
@@ -64,38 +63,42 @@ export function schemaKeys(schemaProps, result = new Set()) {
   });
   return result;
 }
-
 export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
   if (!searchVal.trim() || searchOptions.length === 0) {
     return undefined;
   }
 
   const pathsMatched = [];
-  allSpecTags.forEach((tag) => {
-    tag.paths.forEach((path) => {
+  allSpecTags.forEach(tag => {
+    tag.paths.forEach(path => {
       let stringToSearch = '';
+
       if (searchOptions.includes('search-api-path')) {
         stringToSearch = path.path;
       }
+
       if (searchOptions.includes('search-api-descr')) {
         stringToSearch = `${stringToSearch} ${path.summary || path.description || ''}`;
       }
+
       if (searchOptions.includes('search-api-params')) {
-        stringToSearch = `${stringToSearch} ${path.parameters && path.parameters.map((v) => v.name).join(' ') || ''}`;
+        stringToSearch = `${stringToSearch} ${path.parameters && path.parameters.map(v => v.name).join(' ') || ''}`;
       }
 
       if (searchOptions.includes('search-api-request-body') && path.requestBody) {
         let schemaKeySet = new Set();
+
         for (const contentType in path.requestBody && path.requestBody.content) {
           if (path.requestBody.content[contentType].schema && path.requestBody.content[contentType].schema.properties) {
             schemaKeySet = schemaKeys(path.requestBody.content[contentType].schema.properties);
           }
+
           stringToSearch = `${stringToSearch} ${[...schemaKeySet].join(' ')}`;
         }
       }
 
       if (searchOptions.includes('search-api-resp-descr')) {
-        stringToSearch = `${stringToSearch} ${Object.values(path.responses).map((v) => v.description || '').join(' ')}`;
+        stringToSearch = `${stringToSearch} ${Object.values(path.responses).map(v => v.description || '').join(' ')}`;
       }
 
       if (stringToSearch.toLowerCase().includes(searchVal.trim().toLowerCase())) {
@@ -104,27 +107,24 @@ export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
           method: path.method,
           path: path.path,
           summary: path.summary || path.description || '',
-          deprecated: path.deprecated,
+          deprecated: path.deprecated
         });
       }
     });
   });
   return pathsMatched;
 }
-
 export function getCurrentElement() {
   const currentQuery = (window.location.hash || '').split('?')[1];
   const query = new URLSearchParams(currentQuery);
   return decodeURIComponent(query.get('route') || '');
 }
-
 export function replaceState(rawElementId) {
   const elementId = rawElementId && rawElementId.replace(/^#/, '') || '';
-
   const currentNavigationHashPart = (window.location.hash || '').split('?')[0].replace(/^#/, '');
   const currentQuery = (window.location.hash || '').split('?')[1];
   const query = new URLSearchParams(currentQuery);
   query.delete('route');
   const newQuery = query.toString().length > 1 ? `${query.toString()}&route=${elementId}` : `route=${elementId}`;
   window.history.replaceState(null, null, `#${currentNavigationHashPart}?${newQuery}`);
-}
+}