openapi-explorer 0.9.385 → 0.9.392

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

@@ -2,6 +2,7 @@ import { html } from 'lit-element';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { marked } from 'marked';
 import base64url from 'base64url';
+import { getI18nText } from '../languages';
 
 function onApiKeyChange(apiKeyId, e) {
   let apiKeyValue = '';
@@ -281,16 +282,16 @@ export default function securitySchemeTemplate() {
   }
 
   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="${() => {
+  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">${getI18nText('headers.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="${() => {
+  }}">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 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.`} <form 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 type="submit" 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>`} </form>` : ''} ${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>. <form 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 type="submit" class="m-btn thin-border" @click="${e => {
+  }}"> ${v.finalKeyValue ? 'UPDATE' : 'SET'} </button>`} </form>` : ''} ${v.type && v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'basic' ? html` ${getI18nText('authentication.http-basic-desc')} <form style="display:flex"> <input type="text" value="${v.user}" placeholder="${getI18nText('authentication.username')}" spellcheck="false" class="api-key-user" style="width:100px"> <input type="password" value="${v.password}" placeholder="${getI18nText('authentication.password')}" spellcheck="false" class="api-key-password" 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' : 'SET'} </button> </form>` : ''} </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> `;
+  }}" part="btn btn-outline"> ${v.finalKeyValue ? 'UPDATE' : getI18nText('authentication.set')} </button> </form>` : ''} </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) {
@@ -322,7 +323,7 @@ export function pathSecurityTemplate(pathSecurity) {
         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 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`${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 '';

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

@@ -1,6 +1,7 @@
 import { html } from 'lit-element';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { getI18nText } from '../languages';
 
 function onApiServerChange(e, server) {
   if (e && e.target.checked) {
@@ -23,7 +24,7 @@ function onApiServerVarChange(e, serverObj) {
 
 
 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 => {
+  return this.selectedServer && this.selectedServer.variables ? 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 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);
@@ -35,8 +36,8 @@ export default function serverTemplate() {
     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 => {
+  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"> SELECTED: ${this.selectedServer && this.selectedServer.computedUrl || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;
+  }}" .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.selectedServer && this.selectedServer.computedUrl || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;
 }
 /* eslint-enable indent */

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

@@ -1,4 +1,6 @@
+import { getI18nText } from '../languages';
 /* For Delayed Event Handler Execution */
+
 export function debounce(fn, delay) {
   let timeoutID = null;
   return (...args) => {
@@ -26,9 +28,9 @@ export function copyToClipboard(data, e) {
 
   try {
     document.execCommand('copy');
-    btnEl.innerText = 'Copied';
+    btnEl.innerText = getI18nText('operations.copied');
     setTimeout(() => {
-      btnEl.innerText = 'Copy';
+      btnEl.innerText = getI18nText('operations.copy');
     }, 5000);
   } catch (err) {
     console.error('Unable to copy', err); // eslint-disable-line no-console

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

@@ -1,31 +1,38 @@
 import cloneDeep from 'lodash.clonedeep';
 import { expandN } from 'regex-to-strings';
-import xmlFormatter from './xml/xml'; // When the type is not known for a property set the displayed type to be this:
+import xmlFormatter from './xml/xml.js'; // When the type is not known for a property set the displayed type to be this:
 
 const IS_MISSING_TYPE_INFO_TYPE = '';
 /* Generates an schema object containing type and constraint info */
 
-export function getTypeInfo(schema) {
-  var _schema$items;
+export function getTypeInfo(schema, options = {
+  includeNulls: false
+}) {
+  var _schema$items, _schema$const;
 
   if (!schema) {
     return undefined;
   }
 
-  let dataType = '';
-  let constraint = '';
+  let dataType = IS_MISSING_TYPE_INFO_TYPE;
 
   if (schema.circularReference) {
     dataType = `{recursive: ${schema.circularReference.name}} `;
   } else if (schema.type) {
     const arraySchema = Array.isArray(schema.type) ? schema.type : typeof schema.type === 'string' ? schema.type.split('┃') : schema.type;
-    dataType = Array.isArray(arraySchema) ? arraySchema.filter(s => s !== 'null').join('┃') : schema.type;
+    dataType = Array.isArray(arraySchema) ? arraySchema.filter(s => s !== 'null' || options.includeNulls).join('┃') : schema.type;
 
-    if (schema.format || schema.enum) {
-      dataType = dataType.replace('string', schema.enum ? 'enum' : schema.format);
+    if (schema.format || schema.enum || schema.const) {
+      dataType = dataType.replace('string', schema.enum && 'enum' || schema.const && 'const' || schema.format);
+    }
+
+    if (schema.nullable && options.includeNulls) {
+      dataType += '┃null';
+    }
+
+    if (dataType.includes('┃null') && schema.format) {
+      schema.format += '┃null';
     }
-  } else {
-    dataType = IS_MISSING_TYPE_INFO_TYPE;
   }
 
   const info = {
@@ -39,21 +46,18 @@ export function getTypeInfo(schema) {
     title: schema.title || '',
     description: schema.description || '',
     constraint: '',
-    allowedValues: '',
-    arrayType: '',
-    html: ''
-  }; // Set Allowed Values
-
-  info.allowedValues = Array.isArray(schema.enum) ? schema.enum.join('┃') : '';
+    allowedValues: (_schema$const = schema.const) !== null && _schema$const !== void 0 ? _schema$const : Array.isArray(schema.enum) ? schema.enum.join('┃') : '',
+    arrayType: ''
+  };
 
   if (dataType === 'array' && schema.items) {
-    var _schema$items$default;
+    var _schema$items$default, _schema$const2;
 
     const arrayItemType = schema.items.type;
     const arrayItemDefault = (_schema$items$default = schema.items.default) !== null && _schema$items$default !== void 0 ? _schema$items$default : '';
     info.arrayType = `${schema.type} of ${Array.isArray(arrayItemType) ? arrayItemType.join('') : arrayItemType}`;
     info.default = arrayItemDefault;
-    info.allowedValues = Array.isArray(schema.items.enum) ? schema.items.enum.join('┃') : '';
+    info.allowedValues = (_schema$const2 = schema.const) !== null && _schema$const2 !== void 0 ? _schema$const2 : Array.isArray(schema.items.enum) ? schema.items.enum.join('┃') : '';
   }
 
   if (dataType.match(/integer|number/g)) {
@@ -65,25 +69,24 @@ export function getTypeInfo(schema) {
     const rightBound = schema.maximum !== undefined ? ']' : ')';
 
     if (typeof minimum === 'number' || typeof maximum === 'number') {
-      constraint = `Range: ${leftBound}${minimum !== null && minimum !== void 0 ? minimum : ''},${maximum !== null && maximum !== void 0 ? maximum : ''}${rightBound}`;
+      info.constraint = `Range: ${leftBound}${minimum !== null && minimum !== void 0 ? minimum : ''},${maximum !== null && maximum !== void 0 ? maximum : ''}${rightBound}`;
     }
 
     if (schema.multipleOf !== undefined) {
-      constraint += `${constraint ? ', ' : ''}Multiples: ${schema.multipleOf}`;
+      info.constraint += `${info.constraint ? ', ' : ''}Multiples: ${schema.multipleOf}`;
     }
   }
 
   if (dataType.match(/string/g)) {
     if (schema.minLength !== undefined && schema.maxLength !== undefined) {
-      constraint += `Min length: ${schema.minLength}, Max length: ${schema.maxLength}`;
+      info.constraint += `Min length: ${schema.minLength}, Max length: ${schema.maxLength}`;
     } else if (schema.minLength !== undefined) {
-      constraint += `Min length: ${schema.minLength}`;
+      info.constraint += `Min length: ${schema.minLength}`;
     } else if (schema.maxLength !== undefined) {
-      constraint += `Max length: ${schema.maxLength}`;
+      info.constraint += `Max length: ${schema.maxLength}`;
     }
   }
 
-  info.constraint = constraint;
   info.html = JSON.stringify({
     type: info.type,
     format: info.format,
@@ -160,6 +163,10 @@ export function getSampleValueByType(schemaObj, fallbackPropertyName, skipExampl
   }
 
   if (typeValue.match(/^string/g)) {
+    if (schemaObj.const) {
+      return schemaObj.const;
+    }
+
     if (schemaObj.enum) {
       return schemaObj.enum[0];
     }
@@ -356,13 +363,13 @@ function getExampleValuesFromSchemaRecursive(schema, config = {}) {
  * For changing OpenAPI-Schema to an Object Notation,
  * This Object would further be an input to UI Components to generate an Object-Tree
  * @param {object} schema - Schema object from OpenAPI spec
- * @param {object} obj - recursively pass this object to generate object notation
+ * @param {object} options - recursively pass this object to generate object notation
  * @param {number} level - recursion level
  * @param {string} suffix - used for suffixing property names to avoid duplicate props during object composition
  */
 
 
-export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
+export function schemaInObjectNotation(rawSchema, options, level = 0, suffix = '') {
   if (!rawSchema) {
     return undefined;
   }
@@ -380,18 +387,18 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
     allOf.map((v, i) => {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         const propSuffix = (v.anyOf || v.oneOf) && i > 0 ? i : '';
-        const partialObj = schemaInObjectNotation(v, {}, level + 1, propSuffix);
+        const partialObj = schemaInObjectNotation(v, options, level + 1, propSuffix);
         Object.assign(objWithAllProps, partialObj);
       } else if (v.type === 'array' || v.items) {
-        const partialObj = schemaInObjectNotation(v, {}, level + 1);
+        const partialObj = schemaInObjectNotation(v, options, level + 1);
         Object.assign(objWithAllProps, partialObj);
       } else if (v.type) {
         const prop = `prop${Object.keys(objWithAllProps).length}`;
-        const typeObj = getTypeInfo(v);
+        const typeObj = getTypeInfo(v, options);
         objWithAllProps[prop] = `${typeObj.html}`;
       }
     });
-    const obj = schemaInObjectNotation(schema, {}, 0);
+    const obj = schemaInObjectNotation(schema, options, 0);
     return Object.assign({}, objWithAllProps, typeof obj === 'object' && !Array.isArray(obj) ? obj : {});
   } else if (anyOf || oneOf) {
     const objWithAnyOfProps = {};
@@ -401,7 +408,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
       if (v.type === 'object' || v.properties || v.allOf || v.anyOf || v.oneOf) {
         var _partialObj$Flags, _partialObj$Flags2;
 
-        const partialObj = schemaInObjectNotation(v, {});
+        const partialObj = schemaInObjectNotation(v, options);
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
         objWithAnyOfProps['::type'] = 'xxx-of-option';
         readOnly = readOnly && ((_partialObj$Flags = partialObj['::flags']) === null || _partialObj$Flags === void 0 ? void 0 : _partialObj$Flags['🆁']);
@@ -410,7 +417,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
         var _partialObj$Flags3, _partialObj$Flags4;
 
         // This else-if block never seems to get executed
-        const partialObj = schemaInObjectNotation(v, {});
+        const partialObj = schemaInObjectNotation(v, options);
         objWithAnyOfProps[`::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`] = partialObj;
         objWithAnyOfProps['::type'] = 'xxx-of-array';
         readOnly = readOnly && ((_partialObj$Flags3 = partialObj['::flags']) === null || _partialObj$Flags3 === void 0 ? void 0 : _partialObj$Flags3['🆁']);
@@ -419,13 +426,13 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
         var _objWithAnyOfProps$, _objWithAnyOfProps$2;
 
         const prop = `::OPTION~${index + 1}${v.title ? `~${v.title}` : ''}`;
-        objWithAnyOfProps[prop] = `${getTypeInfo(v).html}`;
+        objWithAnyOfProps[prop] = `${getTypeInfo(v, options).html}`;
         objWithAnyOfProps['::type'] = 'xxx-of-option';
         readOnly = readOnly && ((_objWithAnyOfProps$ = objWithAnyOfProps['::flags']) === null || _objWithAnyOfProps$ === void 0 ? void 0 : _objWithAnyOfProps$['🆁']);
         writeOnly = writeOnly && ((_objWithAnyOfProps$2 = objWithAnyOfProps['::flags']) === null || _objWithAnyOfProps$2 === void 0 ? void 0 : _objWithAnyOfProps$2['🆆']);
       }
     });
-    const obj = schemaInObjectNotation(schema, {}, 0);
+    const obj = schemaInObjectNotation(schema, options, 0);
     const resultObj = typeof obj === 'object' && !Array.isArray(obj) ? obj : {};
     resultObj[anyOf ? `::ANY~OF ${suffix}` : `::ONE~OF ${suffix}`] = objWithAnyOfProps;
     resultObj['::type'] = 'xxx-of';
@@ -459,7 +466,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
     if (primitiveType.length > 0) {
       subSchema.type = primitiveType.join('┃');
-      multiPrimitiveTypes = getTypeInfo(subSchema);
+      multiPrimitiveTypes = getTypeInfo(subSchema, options);
 
       if (complexTypes.length === 0) {
         return `${multiPrimitiveTypes && multiPrimitiveTypes.html || ''}`;
@@ -477,7 +484,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
           multiTypeOptions[`::OPTION~${i + 1}`] = 'NULL~|~~|~~|~~|~~|~~|~~|~~|~';
         } else if ('integer, number, string, boolean,'.includes(`${v},`)) {
           subSchema.type = Array.isArray(v) ? v.join('┃') : v;
-          const primitiveTypeInfo = getTypeInfo(subSchema);
+          const primitiveTypeInfo = getTypeInfo(subSchema, options);
           multiTypeOptions[`::OPTION~${i + 1}`] = primitiveTypeInfo.html;
         } else if (v === 'object') {
           // If object type iterate all the properties and create an object-type-option
@@ -494,9 +501,9 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
           for (const key in schema.properties) {
             if (schema.required && schema.required.includes(key)) {
-              objTypeOption[`${key}*`] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+              objTypeOption[`${key}*`] = schemaInObjectNotation(schema.properties[key], options, level + 1);
             } else {
-              objTypeOption[key] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+              objTypeOption[key] = schemaInObjectNotation(schema.properties[key], options, level + 1);
             }
           }
 
@@ -513,7 +520,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
             '::props': schemaInObjectNotation(Object.assign({
               readOnly: schema.readOnly,
               writeOnly: schema.writeOnly
-            }, schema.items), {}, level + 1)
+            }, schema.items), options, level + 1)
           };
         }
       });
@@ -535,14 +542,14 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
 
     for (const key in schema.properties) {
       if (schema.required && schema.required.includes(key)) {
-        obj[`${key}*`] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+        obj[`${key}*`] = schemaInObjectNotation(schema.properties[key], options, level + 1);
       } else {
-        obj[key] = schemaInObjectNotation(schema.properties[key], {}, level + 1);
+        obj[key] = schemaInObjectNotation(schema.properties[key], options, level + 1);
       }
     }
 
     if (schema.additionalProperties) {
-      obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, {});
+      obj['<any-key>'] = schemaInObjectNotation(schema.additionalProperties, options);
     }
 
     return obj;
@@ -563,7 +570,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
       deprecated: schema.deprecated,
       readOnly: schema.readOnly,
       writeOnly: schema.writeOnly
-    }, schema.items), {}, level + 1);
+    }, schema.items), options, level + 1);
 
     if ((_schema$items2 = schema.items) !== null && _schema$items2 !== void 0 && _schema$items2.items) {
       obj['::array-type'] = schema.items.items.type;
@@ -572,7 +579,7 @@ export function schemaInObjectNotation(rawSchema, _, level = 0, suffix = '') {
     return obj;
   }
 
-  const typeObj = getTypeInfo(schema);
+  const typeObj = getTypeInfo(schema, options);
   return `${(typeObj === null || typeObj === void 0 ? void 0 : typeObj.html) || ''}`;
 }
 /* Create Example object */

package/dist/es/utils/spec-parser.js

@@ -1,6 +1,7 @@
 import OpenApiResolver from 'openapi-resolver/dist/openapi-resolver.browser';
 import { marked } from 'marked';
 import { invalidCharsRegEx } from './common-utils';
+import { getI18nText } from '../languages';
 import cloneDeep from 'lodash.clonedeep';
 export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
   const inputSpecIsAUrl = typeof specUrlOrObject === 'string' && specUrlOrObject.match(/^http/) || typeof specUrlOrObject === 'object' && typeof specUrlOrObject.href === 'string';
@@ -53,7 +54,7 @@ export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
 
   securitySchemes.forEach(v => {
     if (v.type === 'http') {
-      v.typeDisplay = v.scheme === 'basic' ? 'HTTP Basic' : 'HTTP Bearer';
+      v.typeDisplay = v.scheme === 'basic' ? getI18nText('authentication.http-basic') : 'HTTP Bearer';
     } else if (v.type === 'apiKey') {
       v.typeDisplay = `API Key (${v.name})`;
     } else if (v.type === 'oauth2') {
@@ -155,7 +156,7 @@ function getComponents(openApiSpec) {
 
     switch (component) {
       case 'schemas':
-        cmpName = 'Schemas';
+        cmpName = getI18nText('menu.schemas');
         cmpDescription = '';
         break;