openapi-explorer 2.1.656 → 2.1.658

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

@@ -3,39 +3,31 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import base64url from 'base64url';
 import { getI18nText } from '../languages/index.js';
-
 function onApiKeyChange(apiKeyId, e) {
   e.preventDefault();
   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 = '';
@@ -44,17 +36,17 @@ function onClearAllApiKeys() {
     v.finalKeyValue = '';
   });
   this.requestUpdate();
-} // Updates the OAuth Access Token (API key), so it reflects in UI and gets used in TRY calls
-
+}
 
+// 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
-
+}
 
+// Gets Access-Token in exchange of Authorization Code
 async function fetchAccessToken(tokenUrl, suggestedClientId, clientSecret, redirectUrl, grantType, authCode, sendClientSecretIn = 'header', apiKeyId, authFlowDivEl, scopes = null) {
   const respDisplayEl = authFlowDivEl ? authFlowDivEl.querySelector('.oauth-resp-display') : undefined;
   const {
@@ -66,33 +58,26 @@ async function fetchAccessToken(tokenUrl, suggestedClientId, clientSecret, redir
   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);
   }
-
   if (codeVerifier) {
     urlFormParams.append('code_verifier', codeVerifier);
   }
-
   try {
     const resp = await fetch(tokenUrl, {
       method: 'POST',
@@ -100,18 +85,14 @@ async function fetchAccessToken(tokenUrl, suggestedClientId, clientSecret, redir
       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>';
       }
@@ -122,24 +103,20 @@ async function fetchAccessToken(tokenUrl, suggestedClientId, clientSecret, redir
     }
   }
 }
-
 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
-
+}
 
+// 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)));
@@ -158,15 +135,12 @@ export async function checkForAuthToken(redirectToApiLocation) {
   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);
   let parsedState;
-
   try {
     // If somehow the state contains a question mark, just remove it, a ? is not a valid here
     parsedState = JSON.parse(base64url.decode(parameters.state.replace(/\?.*$/, '')));
@@ -175,13 +149,11 @@ export async function checkForAuthToken(redirectToApiLocation) {
     console.error('The state parameter in the OAuth response is invalid', error, parameters.state);
     return;
   }
-
   const {
     apiKeyId,
     flowId,
     url
   } = parsedState;
-
   if (redirectToApiLocation && url && !parameters.redirect_auth) {
     const apiExplorerLocation = new URL(url);
     Object.keys(parameters).forEach(key => apiExplorerLocation.searchParams.append(key, parameters[key]));
@@ -189,19 +161,15 @@ export async function checkForAuthToken(redirectToApiLocation) {
     window.location.replace(apiExplorerLocation.toString());
     return;
   }
-
   if (parameters.code) {
     var _this$selectedServer;
-
     const securityObj = this.resolvedSpec.securitySchemes.find(v => v.apiKeyId === apiKeyId);
     const tokenUrl = securityObj && securityObj.flows[flowId] && new URL(securityObj.flows[flowId].tokenUrl || '', (_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _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() : '';
@@ -210,18 +178,17 @@ async function onInvokeOAuthFlow(apiKeyId, flowType, authUrl, tokenUrl, e) {
   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
+  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);
     let codeVerifier;
-
     if (flowType === 'authorizationCode') {
       const randomBytes = new Uint32Array(12);
       (window.crypto || window.msCrypto).getRandomValues(randomBytes);
@@ -236,7 +203,6 @@ async function onInvokeOAuthFlow(apiKeyId, flowType, authUrl, tokenUrl, e) {
     } else if (flowType === 'implicit') {
       responseType = 'token';
     }
-
     localStorage.setItem('openapi-explorer-oauth', JSON.stringify({
       codeVerifier,
       clientId,
@@ -244,11 +210,9 @@ async function onInvokeOAuthFlow(apiKeyId, flowType, authUrl, tokenUrl, e) {
       flowId: flowType
     }));
     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);
@@ -265,25 +229,20 @@ async function onInvokeOAuthFlow(apiKeyId, flowType, authUrl, tokenUrl, e) {
     fetchAccessToken.call(this, tokenUrl, clientId, clientSecret, '', grantType, '', sendClientSecretIn, apiKeyId, authFlowDivEl, selectedScopes);
   }
 }
-/* eslint-disable indent */
 
+/* eslint-disable indent */
 
 function oAuthFlowTemplate(flowName, securityObj, authFlow) {
   var _this$selectedServer3, _this$selectedServer4, _this$selectedServer5;
-
   const apiKeyId = securityObj.apiKeyId;
-
   const getFullUrl = url => {
     var _this$selectedServer2;
-
     return url ? new URL(url, (_this$selectedServer2 = this.selectedServer) === null || _this$selectedServer2 === void 0 ? void 0 : _this$selectedServer2.computedUrl) : undefined;
   };
-
   const authorizationUrl = getFullUrl(authFlow.authorizationUrl, (_this$selectedServer3 = this.selectedServer) === null || _this$selectedServer3 === void 0 ? void 0 : _this$selectedServer3.computedUrl);
   const tokenUrl = getFullUrl(authFlow.tokenUrl, (_this$selectedServer4 = this.selectedServer) === null || _this$selectedServer4 === void 0 ? void 0 : _this$selectedServer4.computedUrl);
   const refreshUrl = getFullUrl(authFlow.refreshUrl, (_this$selectedServer5 = this.selectedServer) === null || _this$selectedServer5 === void 0 ? void 0 : _this$selectedServer5.computedUrl);
   let flowNameDisplay;
-
   if (flowName === 'authorizationCode') {
     flowNameDisplay = 'Authorization Code Flow';
   } else if (flowName === 'clientCredentials') {
@@ -293,20 +252,16 @@ function oAuthFlowTemplate(flowName, securityObj, authFlow) {
   } 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"> <div> <input id="oauth-client-id" type="text" part="textbox textbox-auth-client-id" value="${securityObj.clientId || ''}" placeholder="Client ID" spellcheck="false" class="oauth-client-input"> ${flowName === 'clientCredentials' ? html` <input id="oauth-client-secret" type="password" part="textbox textbox-auth-client-secret" value="" placeholder="Client Secret" spellcheck="false" class="oauth-client-input"> <select id="oauth-send-client-secret-in" aria-label="oauth client secret location" style="margin-right:5px" class="oauth-client-input"> <option value="header" selected="selected"> Authorization Header </option> <option value="request-body"> Request Body </option> </select> ` : html`<div style="width:5px"></div>`} </div> ${flowName === 'authorizationCode' || flowName === 'clientCredentials' || flowName === 'implicit' ? html` <div class="oauth-client-input" style="margin-left:1rem"> <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> <div class="oauth-resp-display red-text small-font-size"></div> ` : ''} </div> `;
 }
-
 function renderSecurityScheme(v) {
   if (!v.type) {
     return '';
   }
-
   if (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer') {
     var _v$bearerFormat, _v$bearerFormat2;
-
     return html` <div style="padding-top:1rem"> ${v.type.toLowerCase() === 'apikey' ? html`Send <code>${v.name || 'API key'}</code> in <code>${v.in || 'the request'}</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 then the ${(_v$bearerFormat = v.bearerFormat) !== null && _v$bearerFormat !== void 0 ? _v$bearerFormat : 'Token String'}.`} </div> <form style="height:50px;margin-top:1rem;padding:10px 0;margin-bottom:10px"> ${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>` : !v.finalKeyValue ? html` <input type="text" value="${v.value}" placeholder="${(_v$bearerFormat2 = v.bearerFormat) !== null && _v$bearerFormat2 !== void 0 ? _v$bearerFormat2 : 'api-token'}" spellcheck="false" class="api-key-input fs-exclude" data-hj-suppress data-sl="mask"> <button type="submit" class="m-btn thin-border" style="margin-left:5px" part="btn btn-outline" @click="${e => {
       onApiKeyChange.call(this, v.apiKeyId, e);
     }}"> ${getI18nText('authentication.set')} </button>` : html`<span class="blue-text" style="margin-right:1rem">Key Applied</span> <button class="m-btn thin-border small" part="btn btn-outline" @click="${() => {
@@ -314,7 +269,6 @@ function renderSecurityScheme(v) {
       this.requestUpdate();
     }}">REMOVE</button>`} </form>`;
   }
-
   if (v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'basic') {
     if (v.finalKeyValue) {
       return html` <div style="padding-top:1rem">${getI18nText('authentication.http-basic-desc')}</div> <div style="height:50px;margin-top:1rem;padding:10px 0;margin-bottom:10px"> <span class="blue-text" style="margin-right:1rem">Key Applied</span> <button class="m-btn thin-border small" part="btn btn-outline" @click="${() => {
@@ -322,61 +276,46 @@ function renderSecurityScheme(v) {
         this.requestUpdate();
       }}">REMOVE</button> </div>`;
     }
-
     return html` <div style="padding-top:1rem">${getI18nText('authentication.http-basic-desc')}</div> <div style="height:50px;margin-top:1rem;padding:10px 0;margin-bottom:10px"> <form style="display:flex"> <input type="text" value="${v.user}" placeholder="${getI18nText('authentication.username')}" spellcheck="false" class="api-key-user" style="width:100px"> <input class="api-key-password fs-exclude" data-hj-suppress data-sl="mask" type="password" value="${v.password}" placeholder="${getI18nText('authentication.password')}" spellcheck="false" style="width:100px;margin:0 5px"> <button type="submit" class="m-btn thin-border" @click="${e => {
       onApiKeyChange.call(this, v.apiKeyId, e);
     }}" part="btn btn-outline"> ${v.finalKeyValue ? 'UPDATE' : getI18nText('authentication.set')} </button> </form> </div>`;
   }
-
   if (v.type.toLowerCase() === 'oauth2' && Object.keys(v.flows).length) {
     return html`${Object.keys(v.flows).map(f => oAuthFlowTemplate.call(this, f, v, v.flows[f]))}`;
   }
-
   return '';
 }
-
 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"> <slot name="authentication-header"> <div class="sub-title regular-font">${getI18nText('headers.authentication')}</div> </slot> <div class="small-font-size" style="display:flex;align-items:center;min-height:40px"> ${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">${getI18nText('authentication.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 colspan="1" style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center"> <div style="display:flex;justify-content:center"> <span style="font-weight:700">${getTypeDisplayHeader(v)}</span> </div> </div> ${v.description ? html` <div class="m-markdown"> ${unsafeHTML(marked(v.description || ''))} </div>` : ''} </td> <td colspan="3">${renderSecurityScheme.call(this, v)}</td> </tr>`)} </table>` : ''} <slot name="authentication-footer"></slot> </div> </slot> </section> `;
 }
-
 function getOauthScopeTemplate(rawScopes) {
   const scopes = Array.isArray(rawScopes) ? rawScopes.map(s => s === null || s === void 0 ? void 0 : s.trim()).filter(s => s) : [];
-
   if (!scopes.length) {
     return '';
   }
-
   return html` <div> <b>Required scopes:</b> <br> <div style="margin-left:8px"> ${scopes.map(scope => html`<span>${scope}</span>&nbsp;`)} </div> </div>`;
 }
-
 function getTypeDisplayHeader(securityScheme) {
   if (securityScheme.type === 'apiKey') {
     return `API Key (${securityScheme.name})`;
   }
-
   if (securityScheme.type === 'oauth2') {
     return 'OAuth2.0';
   }
-
   if (securityScheme.type === 'http') {
     return securityScheme.scheme === 'basic' ? getI18nText('authentication.http-basic') : 'HTTP Bearer';
   }
-
   return securityScheme.type;
 }
-
 export function pathSecurityTemplate(pathSecurityOptions) {
   const requiredSecurityOptions = (pathSecurityOptions === null || pathSecurityOptions === void 0 ? void 0 : pathSecurityOptions.filter(o => o && Object.keys(o).length)) || [];
-
   if (this.resolvedSpec.securitySchemes && requiredSecurityOptions.length) {
     const orSecurityKeys1 = [];
     requiredSecurityOptions.forEach(pSecurity => {
@@ -384,10 +323,10 @@ export function pathSecurityTemplate(pathSecurityOptions) {
       const andKeyTypes = [];
       Object.keys(pSecurity).forEach(pathSecurityKey => {
         const s = this.resolvedSpec.securitySchemes.find(ss => ss.apiKeyId === pathSecurityKey);
-
         if (s) {
           andKeyTypes.push(getTypeDisplayHeader(s));
-          andSecurityKeys1.push({ ...s,
+          andSecurityKeys1.push({
+            ...s,
             scopes: pSecurity[pathSecurityKey]
           });
         }
@@ -399,7 +338,7 @@ export function pathSecurityTemplate(pathSecurityOptions) {
     });
     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="security-tooltip 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`${getI18nText('authentication.requires')}`} ${andSecurityItem.scheme === 'basic' ? getI18nText('authentication.http-basic-note') : 'Bearer Token'} ${getI18nText('authentication.in-auth-header')} ${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

@@ -2,14 +2,12 @@ import { html } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getI18nText } from '../languages/index.js';
-
 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;
@@ -20,26 +18,21 @@ function onApiServerVarChange(e, serverObj) {
   serverObj.computedUrl = tempUrl;
   this.requestUpdate();
 }
-/* eslint-disable indent */
-
 
+/* eslint-disable indent */
 function serverVarsTemplate() {
   var _this$selectedServer;
-
   return Object.keys(((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.variables) || {}).length ? html` <div class="table-title">${getI18nText('api-servers.server-variables')}</div> <table role="presentation" class="m-table"> ${Object.entries(this.selectedServer.variables).map(kv => html` <tr> <td colspan="1" style="vertical-align:middle">${kv[0]}</td> <td colspan="2"> ${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() {
   var _this$selectedServer2;
-
   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">${getI18nText('headers.api-servers')}</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"> ${getI18nText('api-servers.selected')}: ${((_this$selectedServer2 = this.selectedServer) === null || _this$selectedServer2 === void 0 ? void 0 : _this$selectedServer2.computedUrl) || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;

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

@@ -1,24 +1,19 @@
 /* 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}'`);
@@ -28,24 +23,20 @@ export default {
           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 {
@@ -58,49 +49,39 @@ export default {
         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);
   }
-
 };

package/dist/es/utils/common-utils.js

@@ -1,6 +1,6 @@
 import { getI18nText } from '../languages/index.js';
-/* For Delayed Event Handler Execution */
 
+/* For Delayed Event Handler Execution */
 export function debounce(fn, delay) {
   let timeoutID = null;
   return (...args) => {
@@ -19,28 +19,24 @@ export function sleep(ms) {
 export function copyToClipboard(copyData, eventTarget) {
   // In lots of places we have more than a couple of spaces for <pre> display purposes, we remove those extra spaces here.
   let data = copyData === null || copyData === void 0 ? void 0 : copyData.trim().replace(/\s{8}/g, '  ');
-
   try {
     // If the parsed type is a number, then leave it alone
     if (typeof JSON.parse(data) === 'object') {
       // Convert to 2 spaces in all JSON text
       data = JSON.stringify(JSON.parse(data), null, 2).trim();
     }
-  } catch (error) {// Ignore non JSON text;
+  } catch (error) {
+    // Ignore non JSON text;
   }
-
   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');
     const btnEl = eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.target;
-
     if (btnEl) {
       btnEl.innerText = getI18nText('operations.copied');
       setTimeout(() => {
@@ -50,7 +46,6 @@ export function copyToClipboard(copyData, eventTarget) {
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console
   }
-
   document.body.removeChild(textArea);
 }
 export function getBaseUrlFromUrl(url) {
@@ -64,7 +59,6 @@ export function pathIsInSearch(searchVal, path) {
   if (!searchVal) {
     return true;
   }
-
   const stringToSearch = `${path.method} ${path.path} ${path.summary || ''} ${path.description || ''} ${path.operationId || ''}`;
   return stringToSearch.includes(searchVal) || stringToSearch.toLowerCase().includes(searchVal) || stringToSearch.normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(searchVal) || stringToSearch.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').includes(searchVal);
 }
@@ -72,10 +66,8 @@ export function schemaKeys(schemaProps, result = new Set()) {
   if (!schemaProps) {
     return result;
   }
-
   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) {
@@ -88,40 +80,31 @@ export function advancedSearch(searchVal, allSpecTags, searchOptions = []) {
   if (!searchVal.trim() || searchOptions.length === 0) {
     return undefined;
   }
-
   const pathsMatched = [];
   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(' ') || ''}`;
       }
-
       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(' ')}`;
       }
-
       if (stringToSearch.toLowerCase().includes(searchVal.trim().toLowerCase())) {
         pathsMatched.push({
           elementId: path.elementId,