openapi-explorer 0.9.393 → 0.10.395

package/dist/lib/components/api-response.js

@@ -11,7 +11,9 @@ var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
 
 var _schemaUtils = require("../utils/schema-utils");
 
-var _fontStyles = _interopRequireDefault(require("../styles/font-styles"));
+var _languages = require("../languages");
+
+var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
 var _flexStyles = _interopRequireDefault(require("../styles/flex-styles"));
 
@@ -94,7 +96,7 @@ class ApiResponse extends _litElement.LitElement {
   }
 
   render() {
-    return (0, _litElement.html)` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : 'RESPONSE'} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
+    return (0, _litElement.html)` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : (0, _languages.getI18nText)('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
   }
 
   resetSelection() {
@@ -164,11 +166,11 @@ class ApiResponse extends _litElement.LitElement {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">MODEL</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">EXAMPLE</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _litElement.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _litElement.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _litElement.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _litElement.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
 
   responseHeaderListTemplate(respHeaders) {
-    return (0, _litElement.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">RESPONSE HEADERS</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => (0, _litElement.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:120px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td style="padding:4px;vertical-align:baseline;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.type || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.example || ''} </td> </tr> `)} </table>`;
+    return (0, _litElement.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _languages.getI18nText)('operations.response-headers')}</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => (0, _litElement.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:120px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td style="padding:4px;vertical-align:baseline;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.type || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.schema.example || ''} </td> </tr> `)} </table>`;
   }
 
   mimeTypeDropdownTemplate(mimeTypes) {

package/dist/lib/components/json-tree.js

@@ -7,7 +7,9 @@ var _litElement = require("lit-element");
 
 var _commonUtils = require("../utils/common-utils");
 
-var _fontStyles = _interopRequireDefault(require("../styles/font-styles"));
+var _languages = require("../languages");
+
+var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
 var _borderStyles = _interopRequireDefault(require("../styles/border-styles"));
 
@@ -37,7 +39,7 @@ class JsonTree extends _litElement.LitElement {
   render() {
     return (0, _litElement.html)` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
       (0, _commonUtils.copyToClipboard)(JSON.stringify(this.data, null, 2), e);
-    }}">Copy</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
+    }}">${(0, _languages.getI18nText)('operations.copy')}</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {

package/dist/lib/components/mime-types.js

@@ -3,11 +3,14 @@
 exports.__esModule = true;
 exports.default = extension;
 
-var _mimeDb = _interopRequireDefault(require("mime-db"));
+var _db = _interopRequireDefault(require("mime-db/db.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/;
+const extensions = {};
+const types = {};
+populateMaps();
 /**
  * Get the default extension for a MIME type.
  *
@@ -23,7 +26,7 @@ function extension(type) {
 
   const match = EXTRACT_TYPE_REGEXP.exec(type); // get extensions
 
-  const exts = match && exports.extensions[match[1].toLowerCase()];
+  const exts = match && extensions[match[1].toLowerCase()];
 
   if (!exts || !exts.length) {
     return false;
@@ -32,15 +35,11 @@ function extension(type) {
   return exts[0];
 }
 
-const extensions = {};
-const types = {};
-populateMaps();
-
 function populateMaps() {
   // source preference (least -> most)
   const preference = ['nginx', 'apache', undefined, 'iana'];
-  Object.keys(_mimeDb.default).forEach(function forEachMimeType(type) {
-    const mime = _mimeDb.default[type];
+  Object.keys(_db.default).forEach(function forEachMimeType(type) {
+    const mime = _db.default[type];
     const exts = mime.extensions;
 
     if (!exts || !exts.length) {
@@ -54,7 +53,7 @@ function populateMaps() {
       const extensionToTest = exts[i];
 
       if (types[extensionToTest]) {
-        const from = preference.indexOf(_mimeDb.default[types[extensionToTest]].source);
+        const from = preference.indexOf(_db.default[types[extensionToTest]].source);
         const to = preference.indexOf(mime.source);
 
         if (types[extensionToTest] !== 'application/octet-stream' && (from > to || from === to && types[extensionToTest].substr(0, 12) === 'application/')) {

package/dist/lib/components/schema-table.js

@@ -9,7 +9,7 @@ var _marked = require("marked");
 
 var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
 
-var _fontStyles = _interopRequireDefault(require("../styles/font-styles"));
+var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles"));
 

package/dist/lib/components/schema-tree.js

@@ -9,7 +9,9 @@ var _marked = require("marked");
 
 var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
 
-var _fontStyles = _interopRequireDefault(require("../styles/font-styles"));
+var _languages = require("../languages");
+
+var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
 var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles"));
 
@@ -66,7 +68,7 @@ class SchemaTree extends _litElement.LitElement {
 
 
   render() {
-    return (0, _litElement.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _litElement.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? 'Collapse' : 'Expand'} </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _litElement.html)`<span class="mono-font" style="color:var(--red)"> Schema not found </span>`} </div> `;
+    return (0, _litElement.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _litElement.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded === 'true' ? (0, _languages.getI18nText)('schemas.collapse-desc') : (0, _languages.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _litElement.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _languages.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
   }
 
   toggleSchemaDescription() {

package/dist/lib/languages/en.js

@@ -0,0 +1,64 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  translation: {
+    'menu': {
+      'filter': 'Filter',
+      'search': 'Search',
+      'overview': 'Overview',
+      'api-servers': 'API Servers',
+      'authentication': 'Authentication',
+      'operations': 'OPERATIONS',
+      'components': 'COMPONENTS',
+      'schemas': 'Schemas'
+    },
+    'headers': {
+      'api-servers': 'API SERVER',
+      'authentication': 'AUTHENTICATION'
+    },
+    'overview': {
+      'email': 'Email',
+      'terms-of-service': 'Terms of Service'
+    },
+    'api-servers': {
+      'server-variables': 'SERVER VARIABLES',
+      'selected': 'SELECTED'
+    },
+    'authentication': {
+      'no-api-key-applied': 'No API key applied',
+      'http-basic': 'HTTP Basic',
+      'http-basic-desc': 'Send the Authorization header containing the type Basic followed by a space and a base64 encoded string of username:password',
+      'username': 'username',
+      'password': 'password',
+      'requires': 'Requires',
+      'http-basic-note': 'Base 64 encoded username:password',
+      'in-auth-header': 'in Authorization header',
+      'set': 'SET'
+    },
+    'operations': {
+      'request': 'REQUEST',
+      'request-body': 'REQUEST BODY',
+      'model': 'MODEL',
+      'body': 'BODY',
+      'request-headers': 'REQUEST HEADERS',
+      'clear': 'CLEAR',
+      'clear-response': 'CLEAR RESPONSE',
+      'execute': 'EXECUTE',
+      'response': 'RESPONSE',
+      'response-headers': 'RESPONSE HEADERS',
+      'example': 'EXAMPLE',
+      'response-status': 'Response Status',
+      'fetch-fail': 'Failed to fetch (Check the browser network tab for more information.)',
+      'copy': 'Copy',
+      'copied': 'Copied'
+    },
+    'schemas': {
+      'collapse-desc': 'Collapse',
+      'expand-desc': 'Expand',
+      'schema-missing': 'Schema not found'
+    }
+  }
+};
+exports.default = _default;

package/dist/lib/languages/fr.js

@@ -0,0 +1,64 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  translation: {
+    'menu': {
+      'filter': 'Filtre',
+      'search': 'Chercher',
+      'overview': 'Aperçu',
+      'api-servers': 'Serveur API',
+      'authentication': 'Authentification',
+      'operations': 'OPÉRATIONS',
+      'components': 'COMPOSANTS',
+      'schemas': 'Schémas'
+    },
+    'headers': {
+      'api-servers': 'SERVEUR API',
+      'authentication': 'AUTHENTIFICATION'
+    },
+    'overview': {
+      'email': 'Courriel',
+      'terms-of-service': 'Avis'
+    },
+    'api-servers': {
+      'server-variables': 'VARIABLES SERVEUR',
+      'selected': 'CHOISI'
+    },
+    'authentication': {
+      'no-api-key-applied': "Aucune clé d'API appliquée",
+      'http-basic': 'HTTP Basique',
+      'http-basic-desc': "Envoyez l'en-tête Authorization contenant le type Basic suivi d'un espace et d'une chaîne encodée en base64 de nom d'utilisateur:mot de passe",
+      'username': "nom d'utilisateur",
+      'password': 'mot de passe',
+      'requires': 'Nécessite',
+      'http-basic-note': "un nom d'utilisateur/mot de passe encodé en base64",
+      'in-auth-header': "dans l'en-tête Authorization",
+      'set': 'DÉFINIR'
+    },
+    'operations': {
+      'request': 'REQUÊTE',
+      'request-body': 'CORPS DE LA REQUÊTE',
+      'model': 'MODÈLE',
+      'body': 'CORPS',
+      'request-headers': 'EN-TÊTES DE LA REQUÊTE',
+      'clear': 'VIDER',
+      'clear-response': 'VIDER LA RÉPONSE',
+      'execute': 'EXÉCUTER',
+      'response': 'RÉPONSE',
+      'response-headers': 'EN-TÊTES DE LA RÉPONSE',
+      'example': 'EXEMPLE',
+      'response-status': 'Statut de réponse',
+      'fetch-fail': "Échec d'obtenir (Consultez l'onglet Réseau de navigateur pour plus d'information.)",
+      'copy': 'Copier',
+      'copied': 'Copié'
+    },
+    'schemas': {
+      'collapse-desc': 'Réduire',
+      'expand-desc': 'Agrandir',
+      'schema-missing': 'Schéma introuvable'
+    }
+  }
+};
+exports.default = _default;

package/dist/lib/languages/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getI18nText = getI18nText;
+exports.initI18n = initI18n;
+
+var _i18next = _interopRequireDefault(require("i18next"));
+
+var _en = _interopRequireDefault(require("./en"));
+
+var _fr = _interopRequireDefault(require("./fr"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+async function initI18n() {
+  const initLang = window.navigator.language.substring(0, 2);
+  await _i18next.default.init({
+    lng: initLang,
+    fallbackLng: 'en',
+    debug: true,
+    ns: ['translation'],
+    defaultNS: 'translation',
+    resources: {
+      en: _en.default,
+      fr: _fr.default
+    }
+  });
+}
+
+function getI18nText(key) {
+  return _i18next.default.t(key);
+}

package/dist/lib/openapi-explorer.js

@@ -27,7 +27,7 @@ require("prismjs/components/prism-http");
 
 require("prismjs/components/prism-csharp");
 
-var _fontStyles = _interopRequireDefault(require("./styles/font-styles"));
+var _fontStyles = _interopRequireDefault(require("./styles/font-styles.js"));
 
 var _inputStyles = _interopRequireDefault(require("./styles/input-styles"));
 
@@ -49,6 +49,8 @@ var _advancedSearchStyles = _interopRequireDefault(require("./styles/advanced-se
 
 var _commonUtils = require("./utils/common-utils");
 
+var _languages = require("./languages");
+
 var _specParser = _interopRequireDefault(require("./utils/spec-parser"));
 
 var _responsiveViewMainBodyTemplate = _interopRequireDefault(require("./templates/responsiveViewMainBodyTemplate"));
@@ -254,7 +256,7 @@ class OpenApiExplorer extends _litElement.LitElement {
   }
 
   static get styles() {
-    return [_fontStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _litElement.css)`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{padding:24px 8px 0 4px}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:2rem 3rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:${(0, _litElement.unsafeCSS)(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
+    return [_fontStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _litElement.css)`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{padding:24px 8px 0 4px}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:${(0, _litElement.unsafeCSS)(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
   } // Startup
 
 
@@ -263,6 +265,7 @@ class OpenApiExplorer extends _litElement.LitElement {
     this.handleResize = this.handleResize.bind(this);
     window.addEventListener('resize', this.handleResize);
     this.loading = true;
+    (0, _languages.initI18n)();
     const parent = this.parentElement;
 
     if (parent) {
@@ -410,7 +413,6 @@ class OpenApiExplorer extends _litElement.LitElement {
   attributeChangedCallback(name, oldVal, newVal) {
     if (name === 'spec-url') {
       if (oldVal !== newVal) {
-        // put it at the end of event-loop to load all the attributes
         window.setTimeout(async () => {
           await this.loadSpec(newVal); // If the initial location is set, then attempt to scroll there
 

package/dist/lib/styles/input-styles.js

@@ -6,6 +6,6 @@ exports.default = void 0;
 var _litElement = require("lit-element");
 
 /* eslint-disable max-len */
-var _default = (0, _litElement.css)`.m-btn{border-radius:var(--border-radius);font-weight:600;display:inline-block;padding:6px 16px;font-size:var(--font-size-small);outline:0;line-height:1;text-align:center;white-space:nowrap;border:2px solid var(--primary-color);background-color:transparent;transition:background-color .2s;user-select:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.m-btn.primary{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.thin-border{border-width:1px}.m-btn.large{padding:8px 14px}.m-btn.small{padding:5px 12px}.m-btn.tiny{padding:5px 6px}.m-btn.circle{border-radius:50%}.m-btn:hover{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.nav{border:2px solid var(--secondary-color)}.m-btn.nav:hover{background-color:var(--secondary-color)}.m-btn:disabled{background-color:var(--bg3);color:var(--fg3);border-color:var(--fg3);cursor:progress;opacity:.4}.toolbar-copy-btn{cursor:pointer;padding:.125rem .5rem;margin:0 2px;font-size:.8rem;width:56px;color:var(--primary-btn-text-color);border-radius:2px;border:none;background-color:var(--primary-color)}.tab-content .toolbar-copy-btn{position:absolute;top:8px;right:8px;margin-right:8px}.tab-content .toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}button,input,pre,select,textarea{color:var(--fg);outline:0;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius)}button{font-family:var(--font-regular)}input[type=file],input[type=password],input[type=text],pre,select,textarea{font-family:var(--font-mono);font-weight:400;font-size:var(--font-size-small);transition:border .2s;padding:6px 5px}select{font-family:var(--font-regular);padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");background-position:calc(100% - 5px) center;background-repeat:no-repeat;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}select:hover{border-color:var(--primary-color)}input[type=password]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--placeholder-color);opacity:1}input[type=password]:active,input[type=password]:focus,input[type=text]:active,input[type=text]:focus,select:focus,textarea:active,textarea:focus{border:1px solid var(--primary-color)}input[type=file]{font-family:var(--font-regular);padding:2px;cursor:pointer;border:1px solid var(--primary-color);min-height:calc(var(--font-size-small) + 18px)}input[type=file]::-webkit-file-upload-button{font-family:var(--font-regular);font-size:var(--font-size-small);outline:0;cursor:pointer;padding:3px 8px;border:1px solid var(--primary-color);background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:var(--border-radius);-webkit-appearance:none}pre,textarea{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--input-bg)}pre::-webkit-scrollbar,textarea::-webkit-scrollbar{width:8px;height:8px}pre::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:var(--input-bg)}pre::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--border-color)}.link{font-size:var(--font-size-small);text-decoration:underline;color:var(--blue);font-family:var(--font-mono);margin-bottom:2px}input[type=checkbox]:focus{outline:0}input[type=checkbox]{appearance:none;display:inline-block;background-color:var(--light-bg);border-radius:9px;cursor:pointer;height:18px;position:relative;transition:border .15s,padding .25s;min-width:36px;width:36px;vertical-align:top}input[type=checkbox]:after{position:absolute;background-color:var(--bg);border-radius:8px;content:'';top:0;left:0;right:16px;display:block;height:16px;transition:left .25s .1s,right .15s .175s}input[type=checkbox]:checked{box-shadow:inset 0 0 0 13px var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{border:1px solid var(--primary-color);left:16px;right:1px;transition:border .25s,left .15s .25s,right .25s .175s}input.oauth-client-id{flex-grow:1;max-width:300px}input.oauth-client-secret{flex-grow:1;max-width:300px}`;
+var _default = (0, _litElement.css)`.m-btn{border-radius:var(--border-radius);font-weight:600;display:inline-block;padding:6px 16px;font-size:var(--font-size-small);outline:0;line-height:1;text-align:center;white-space:nowrap;border:2px solid var(--primary-color);background-color:transparent;transition:background-color .2s;user-select:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.m-btn.primary{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.thin-border{border-width:1px}.m-btn.large{padding:8px 14px}.m-btn.small{padding:5px 12px}.m-btn.tiny{padding:5px 6px}.m-btn.circle{border-radius:50%}.m-btn:hover{background-color:var(--primary-color);color:var(--primary-btn-text-color)}.m-btn.nav{border:2px solid var(--secondary-color)}.m-btn.nav:hover{background-color:var(--secondary-color)}.m-btn:disabled{background-color:var(--bg3);color:var(--fg3);border-color:var(--fg3);cursor:progress;opacity:.4}.toolbar-copy-btn{cursor:pointer;padding:.125rem .5rem;margin:0 2px;font-size:.8rem;width:60px;color:var(--primary-btn-text-color);border-radius:2px;border:none;background-color:var(--primary-color)}.tab-content .toolbar-copy-btn{position:absolute;top:8px;right:8px;margin-right:8px}.tab-content .toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}button,input,pre,select,textarea{color:var(--fg);outline:0;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius)}button{font-family:var(--font-regular)}input[type=file],input[type=password],input[type=text],pre,select,textarea{font-family:var(--font-mono);font-weight:400;font-size:var(--font-size-small);transition:border .2s;padding:6px 5px}select{font-family:var(--font-regular);padding-right:30px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");background-position:calc(100% - 5px) center;background-repeat:no-repeat;background-size:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}select:hover{border-color:var(--primary-color)}input[type=password]::placeholder,input[type=text]::placeholder,textarea::placeholder{color:var(--placeholder-color);opacity:1}input[type=password]:active,input[type=password]:focus,input[type=text]:active,input[type=text]:focus,select:focus,textarea:active,textarea:focus{border:1px solid var(--primary-color)}input[type=file]{font-family:var(--font-regular);padding:2px;cursor:pointer;border:1px solid var(--primary-color);min-height:calc(var(--font-size-small) + 18px)}input[type=file]::-webkit-file-upload-button{font-family:var(--font-regular);font-size:var(--font-size-small);outline:0;cursor:pointer;padding:3px 8px;border:1px solid var(--primary-color);background-color:var(--primary-color);color:var(--primary-btn-text-color);border-radius:var(--border-radius);-webkit-appearance:none}pre,textarea{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--input-bg)}pre::-webkit-scrollbar,textarea::-webkit-scrollbar{width:8px;height:8px}pre::-webkit-scrollbar-track,textarea::-webkit-scrollbar-track{background:var(--input-bg)}pre::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--border-color)}.link{font-size:var(--font-size-small);text-decoration:underline;color:var(--blue);font-family:var(--font-mono);margin-bottom:2px}input[type=checkbox]:focus{outline:0}input[type=checkbox]{appearance:none;display:inline-block;background-color:var(--light-bg);border-radius:9px;cursor:pointer;height:18px;position:relative;transition:border .15s,padding .25s;min-width:36px;width:36px;vertical-align:top}input[type=checkbox]:after{position:absolute;background-color:var(--bg);border-radius:8px;content:'';top:0;left:0;right:16px;display:block;height:16px;transition:left .25s .1s,right .15s .175s}input[type=checkbox]:checked{box-shadow:inset 0 0 0 13px var(--primary-color);border-color:var(--primary-color)}input[type=checkbox]:checked:after{border:1px solid var(--primary-color);left:16px;right:1px;transition:border .25s,left .15s .25s,right .25s .175s}input.oauth-client-id{flex-grow:1;max-width:300px}input.oauth-client-secret{flex-grow:1;max-width:300px}`;
 
 exports.default = _default;

package/dist/lib/templates/code-samples-template.js

@@ -11,6 +11,8 @@ var _prismjs = _interopRequireDefault(require("prismjs"));
 
 var _commonUtils = require("../utils/common-utils");
 
+var _languages = require("../languages");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable indent */
@@ -29,7 +31,7 @@ function codeSamplesTemplate(xCodeSamples) {
     });
   }}"> <div class="tab-buttons row" style="width:100"> ${xCodeSamples.map((v, i) => (0, _litElement.html)`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab="${v.lang}${i}"> ${v.label || v.lang} </button>`)} </div> ${xCodeSamples.map((v, i) => (0, _litElement.html)` <div class="tab-content m-markdown code-sample-wrapper" style="display:${i === 0 ? 'block' : 'none'}" data-tab="${v.lang}${i}"> <button class="toolbar-copy-btn" @click="${e => {
     (0, _commonUtils.copyToClipboard)(v.source, e);
-  }}">Copy</button> <pre>
+  }}">${(0, _languages.getI18nText)('operations.copy')}</button> <pre>
           <code>${_prismjs.default.languages[v.lang && v.lang.toLowerCase()] ? (0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(v.source, _prismjs.default.languages[v.lang && v.lang.toLowerCase()], v.lang && v.lang.toLowerCase())) : v.source}</code>
         </pre> </div>`)} </div></section>`;
 }

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

@@ -24,6 +24,6 @@ function componentBodyTemplate(sComponent) {
 }
 
 function componentsTemplate() {
-  return (0, _litElement.html)` ${this.resolvedSpec.components.map(component => (0, _litElement.html)` <div id="cmp--${component.name.toLowerCase()}" class="regular-font section-gap--read-mode observe-me"> <div class="title tag">${component.name}</div> <div class="regular-font-size"> ${(0, _unsafeHtml.unsafeHTML)(`<div class='m-markdown regular-font'>${(0, _marked.marked)(component.description ? component.description : '')}</div>`)} </div> </div> <div class="regular-font section-gap--read-mode"> ${component.subComponents.filter(c => c.expanded).map(sComponent => componentBodyTemplate.call(this, sComponent))} </div> `)} `;
+  return (0, _litElement.html)` ${this.resolvedSpec.components.map(component => (0, _litElement.html)` <div id="cmp--${component.name.toLowerCase()}" class="regular-font section-gap--focused-mode observe-me" style="padding-bottom:0"> <div class="title tag">${component.name}</div> <div class="regular-font-size"> ${(0, _unsafeHtml.unsafeHTML)(`<div class='m-markdown regular-font'>${(0, _marked.marked)(component.description ? component.description : '')}</div>`)} </div> </div> <div class="regular-font section-gap--focused-mode" style="padding-top:0"> ${component.subComponents.filter(c => c.expanded).map(sComponent => componentBodyTemplate.call(this, sComponent))} </div> `)} `;
 }
 /* eslint-enable indent */

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

@@ -11,6 +11,8 @@ var _marked = require("marked");
 
 var _commonUtils = require("../utils/common-utils");
 
+var _languages = require("../languages");
+
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);
 
@@ -50,7 +52,7 @@ function expandCollapseAllComponents() {
 function navbarTemplate() {
   var _this$resolvedSpec$co;
 
-  return (0, _litElement.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="Filter" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? (0, _litElement.html)` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : (0, _litElement.html)` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> Search </button> `} </div> `} ${(0, _litElement.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || 'Overview'} </div>`} ${this.allowServerSelection === 'false' ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> API Servers </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> Authentication </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToCustomNavSectionTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">OPERATIONS</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))) ? (0, _litElement.html)` ${this.operationsCollapsed ? (0, _litElement.html)`<div @click="${() => {
+  return (0, _litElement.html)` <nav class="nav-bar ${this.renderStyle}" part="section-navbar"> ${this.allowSearch === 'false' && this.allowAdvancedSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding:24px;${this.allowAdvancedSearch === 'false' ? 'border-bottom: 1px solid var(--nav-hover-bg-color)' : ''}"> ${this.allowSearch === 'false' ? '' : (0, _litElement.html)` <div style="display:flex;flex:1;line-height:22px"> <input id="nav-bar-search" part="textbox textbox-nav-filter" style="width:100%;padding-right:20px;color:var(--nav-hover-text-color);border-color:var(--secondary-color);background-color:var(--nav-hover-bg-color)" type="text" placeholder="${(0, _languages.getI18nText)('menu.filter')}" @change="${this.onSearchChange}" spellcheck="false"> <div style="margin:6px 5px 0 -24px;font-size:var(--font-size-regular);cursor:pointer">&#x21a9;</div> </div> ${this.matchPaths ? (0, _litElement.html)` <div @click="${this.onClearSearch}" style="margin-left:5px;cursor:pointer;align-self:center;color:var(--nav-text-color)" class="small-font-size primary-text bold-text"> CLEAR </div>` : ''} `} ${this.allowAdvancedSearch === 'false' || this.matchPaths ? '' : (0, _litElement.html)` <button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px" @click="${this.onShowSearchModalClicked}"> ${(0, _languages.getI18nText)('menu.search')} </button> `} </div> `} ${(0, _litElement.html)`<nav class="nav-scroll" part="navbar-scroll"> ${this.showInfo === 'false' || !this.resolvedSpec.info ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-overview" data-content-id="overview" @click="${e => this.scrollToEventTarget(e, false)}"> ${this.isV1 && this.resolvedSpec.info.title || (0, _languages.getI18nText)('menu.overview')} </div>`} ${this.allowServerSelection === 'false' ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-servers" data-content-id="servers" @click="${e => this.scrollToEventTarget(e, false)}"> ${(0, _languages.getI18nText)('menu.api-servers')} </div>`} ${this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes ? '' : (0, _litElement.html)`<div class="nav-bar-info" id="link-auth" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> ${(0, _languages.getI18nText)('menu.authentication')} </div>`} <slot name="nav-section" class="custom-nav-section" data-content-id="section" @click="${e => this.scrollToCustomNavSectionTarget(e, false)}"></slot> <div class="sticky-scroll-element"> <div class="nav-bar-section" part="navbar-operations-header"> <slot name="operations-header"> <div class="nav-bar-section-title">${(0, _languages.getI18nText)('menu.operations')}</div> </slot> <div style="" part="navbar-operations-header-collapse"> ${this.resolvedSpec.tags.length > 1 && this.resolvedSpec.tags.some(tag => tag.paths.some(path => (0, _commonUtils.pathIsInSearch)(this.matchPaths, path))) ? (0, _litElement.html)` ${this.operationsCollapsed ? (0, _litElement.html)`<div @click="${() => {
     expandCollapseAll.call(this);
   }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${() => {
     expandCollapseAll.call(this);
@@ -58,7 +60,7 @@ function navbarTemplate() {
     onExpandCollapse.call(this, tag.elementId);
   }}"> <div style="display:flex;justify-content:space-between;width:100%"> <div>${tag.name}</div> <div class="nav-bar-tag-icon expand-button-arrow">▸</div> <div class="nav-bar-tag-icon collapse-button-arrow">▾</div> </div> </div> `} <div class="tag-headers"> ${tag.headers.map(header => (0, _litElement.html)` <div class="nav-bar-h${header.depth}" id="link-${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" data-content-id="${tag.elementId}--${new _marked.marked.Slugger().slug(header.text)}" @click="${e => this.scrollToEventTarget(e, false)}"> ${header.text} </div>`)} </div> <div class="nav-bar-paths-under-tag"> ${tag.paths.filter(v => (0, _commonUtils.pathIsInSearch)(this.matchPaths, v)).map(p => (0, _litElement.html)` <div class="nav-bar-path ${this.usePathInNavBar === 'true' ? 'small-font' : ''}" data-content-id="${p.elementId}" id="link-${p.elementId}" @click="${e => {
     this.scrollToEventTarget(e, false);
-  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">COMPONENTS</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))) ? (0, _litElement.html)` <div style="" part="navbar-components-header-collapse"> ${this.componentsCollapsed ? (0, _litElement.html)`<div @click="${() => {
+  }}"> <span style="line-break:anywhere;${p.deprecated ? 'filter:opacity(0.5)' : ''}"> ${this.usePathInNavBar === 'true' ? (0, _litElement.html)`<span class="mono-font">${p.method.toUpperCase()} ${p.path}</span>` : p.summary || p.shortSummary} ${p.isWebhook ? '(Webhook)' : ''} </span> </div>`)} </div> </div> </slot> `)} ${(_this$resolvedSpec$co = this.resolvedSpec.components) !== null && _this$resolvedSpec$co !== void 0 && _this$resolvedSpec$co.length && !this.hideComponents ? (0, _litElement.html)` <div class="sticky-scroll-element"> <div id="link-components" class="nav-bar-section"> <slot name="components-header"> <div class="nav-bar-section-title">${(0, _languages.getI18nText)('menu.components')}</div> </slot> ${this.resolvedSpec.components.some(c => c.subComponents.some(s => (0, _commonUtils.componentIsInSearch)(this.matchPaths, s))) ? (0, _litElement.html)` <div style="" part="navbar-components-header-collapse"> ${this.componentsCollapsed ? (0, _litElement.html)`<div @click="${() => {
     expandCollapseAllComponents.call(this);
   }}" style="font-size:16px;transform:rotate(0);cursor:pointer">▸</div>` : (0, _litElement.html)`<div @click="${() => {
     expandCollapseAllComponents.call(this);

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

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

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

@@ -13,6 +13,8 @@ var _marked = require("marked");
 
 var _base64url = _interopRequireDefault(require("base64url"));
 
+var _languages = require("../languages");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function onApiKeyChange(apiKeyId, e) {
@@ -293,16 +295,16 @@ function securitySchemeTemplate() {
   }
 
   const providedApiKeys = schemes.filter(v => v.finalKeyValue);
-  return (0, _litElement.html)` <section id="auth" part="section-auth" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="authentication"> <div class="section-padding"> <div class="sub-title regular-font">AUTHENTICATION</div> <div class="small-font-size" style="display:flex;align-items:center;min-height:30px"> ${providedApiKeys.length > 0 ? (0, _litElement.html)` <div class="blue-text"> ${providedApiKeys.length} API key applied </div> <div style="flex:1"></div> <button class="m-btn thin-border" part="btn btn-outline" @click="${() => {
+  return (0, _litElement.html)` <section id="auth" part="section-auth" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="authentication"> <div class="section-padding"> <div class="sub-title regular-font">${(0, _languages.getI18nText)('headers.authentication')}</div> <div class="small-font-size" style="display:flex;align-items:center;min-height:30px"> ${providedApiKeys.length > 0 ? (0, _litElement.html)` <div class="blue-text"> ${providedApiKeys.length} API key applied </div> <div style="flex:1"></div> <button class="m-btn thin-border" part="btn btn-outline" @click="${() => {
     onClearAllApiKeys.call(this);
-  }}">CLEAR ALL API KEYS</button>` : (0, _litElement.html)`<div class="red-text">No API key applied</div>`} </div> ${schemes.length > 0 ? (0, _litElement.html)` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => (0, _litElement.html)` <tr> <td style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px"> <span style="font-weight:700">${v.typeDisplay}</span> ${v.finalKeyValue ? (0, _litElement.html)` <span class="blue-text"> ${v.finalKeyValue ? 'Key Applied' : ''} </span> <button class="m-btn thin-border small" part="btn btn-outline" @click="${() => {
+  }}">CLEAR ALL API KEYS</button>` : (0, _litElement.html)`<div class="red-text">${(0, _languages.getI18nText)('authentication.no-api-key-applied')}</div>`} </div> ${schemes.length > 0 ? (0, _litElement.html)` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => (0, _litElement.html)` <tr> <td style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px"> <span style="font-weight:700">${v.typeDisplay}</span> ${v.finalKeyValue ? (0, _litElement.html)` <span class="blue-text"> ${v.finalKeyValue ? 'Key Applied' : ''} </span> <button class="m-btn thin-border small" part="btn btn-outline" @click="${() => {
     v.finalKeyValue = '';
     this.requestUpdate();
   }}">REMOVE</button> ` : ''} </div> ${v.description ? (0, _litElement.html)` <div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))} </div>` : ''} </td> <td> ${v.type && (v.type.toLowerCase() === 'apikey' || v.type.toLowerCase() === 'http' && v.scheme && v.scheme.toLowerCase() === 'bearer') ? (0, _litElement.html)` ${v.type.toLowerCase() === 'apikey' ? (0, _litElement.html)`Send <code>${v.name}</code> in <code>${v.in}</code> with the given value:` : (0, _litElement.html)`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`} <form style="display:flex"> ${v.in === 'cookie' ? (0, _litElement.html)` <div style="display:block"> <input type="text" value="${getCookieValue(v.apiKeyId)}" disabled="disabled" class="api-key-input" placeholder="IygRVGf54B59e0GAkKmigGfuiVlp/uhFfk2ifA+jMMJzau2F1jPldc09gPTfnMw13BFBxqUZIFDm55DPfwkb0A==" spellcheck="false" style="resize:horizontal;width:100%"> <br> <small> <strong>Cookies</strong>&nbsp;are set and configured by the remote service, therefore it is not possible to configure them from the browser. </small> </div>` : (0, _litElement.html)` <input type="text" value="${v.value}" class="api-key-input" placeholder="api-token" spellcheck="false"> <button 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' ? (0, _litElement.html)` Send the <code>Authorization</code> header containing the type <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>. <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' ? (0, _litElement.html)` ${(0, _languages.getI18nText)('authentication.http-basic-desc')} <form style="display:flex"> <input type="text" value="${v.user}" placeholder="${(0, _languages.getI18nText)('authentication.username')}" spellcheck="false" class="api-key-user" style="width:100px"> <input type="password" value="${v.password}" placeholder="${(0, _languages.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' ? (0, _litElement.html)` <tr> <td colspan="2" style="border:none;padding-left:48px"> ${Object.keys(v.flows).map(f => oAuthFlowTemplate.call(this, f, v, v.flows[f]))} </td> </tr> ` : ''} `)} </table>` : ''} </div> </slot> </section> `;
+  }}" part="btn btn-outline"> ${v.finalKeyValue ? 'UPDATE' : (0, _languages.getI18nText)('authentication.set')} </button> </form>` : ''} </td> </tr> ${v.type.toLowerCase() === 'oauth2' ? (0, _litElement.html)` <tr> <td colspan="2" style="border:none;padding-left:48px"> ${Object.keys(v.flows).map(f => oAuthFlowTemplate.call(this, f, v, v.flows[f]))} </td> </tr> ` : ''} `)} </table>` : ''} </div> </slot> </section> `;
 }
 
 function getOauthScopeTemplate(scopes) {
@@ -334,7 +336,7 @@ function pathSecurityTemplate(pathSecurity) {
         securityDefs: andSecurityKeys1
       });
     });
-    return (0, _litElement.html)`<div class="security-info-button" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> <div style="position:relative;display:flex;min-width:350px;max-width:700px;justify-content:flex-end"> <svg width="16" height="24" style="cursor:pointer"> <g> <path style="fill:var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z"/> </g> </svg> ${orSecurityKeys1.map((orSecurityItem1, i) => (0, _litElement.html)` ${i !== 0 ? (0, _litElement.html)`<div style="padding:3px 4px"> OR </div>` : ''} <div class="tooltip" style="cursor:pointer"> <div style="padding:2px 4px;white-space:nowrap;text-overflow:ellipsis;max-width:150px;overflow:hidden"> <span part="anchor anchor-operation-security"> ${orSecurityItem1.securityTypes} </span> </div> <div class="tooltip-text" style="position:absolute;color:var(--fg);top:26px;right:0;border:1px solid var(--border-color);padding:2px 4px;display:block"> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<div>Requires <b>all</b> of the following </div>` : ''} <div style="padding-left:8px"> ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => (0, _litElement.html)` ${andSecurityItem.type === 'oauth2' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} OAuth token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : andSecurityItem.type === 'http' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} ${andSecurityItem.scheme === 'basic' ? 'Base 64 encoded username:password' : 'Bearer Token'} in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>`} `)} </div> </div> </div> `)} </div> </div>`;
+    return (0, _litElement.html)`<div class="security-info-button" data-content-id="auth" @click="${e => this.scrollToEventTarget(e, false)}"> <div style="position:relative;display:flex;min-width:350px;max-width:700px;justify-content:flex-end"> <svg width="16" height="24" style="cursor:pointer"> <g> <path style="fill:var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z"/> </g> </svg> ${orSecurityKeys1.map((orSecurityItem1, i) => (0, _litElement.html)` ${i !== 0 ? (0, _litElement.html)`<div style="padding:3px 4px"> OR </div>` : ''} <div class="tooltip" style="cursor:pointer"> <div style="padding:2px 4px;white-space:nowrap;text-overflow:ellipsis;max-width:150px;overflow:hidden"> <span part="anchor anchor-operation-security"> ${orSecurityItem1.securityTypes} </span> </div> <div class="tooltip-text" style="position:absolute;color:var(--fg);top:26px;right:0;border:1px solid var(--border-color);padding:2px 4px;display:block"> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<div>Requires <b>all</b> of the following </div>` : ''} <div style="padding-left:8px"> ${orSecurityItem1.securityDefs.map((andSecurityItem, j) => (0, _litElement.html)` ${andSecurityItem.type === 'oauth2' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} OAuth token (${andSecurityItem.apiKeyId}) in <b>Authorization header</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : andSecurityItem.type === 'http' ? (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`${(0, _languages.getI18nText)('authentication.requires')}`} ${andSecurityItem.scheme === 'basic' ? (0, _languages.getI18nText)('authentication.http-basic-note') : 'Bearer Token'} ${(0, _languages.getI18nText)('authentication.in-auth-header')} ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>` : (0, _litElement.html)` <div> ${orSecurityItem1.securityDefs.length > 1 ? (0, _litElement.html)`<b>${j + 1}.</b> &nbsp;` : (0, _litElement.html)`Requires`} Token in <b>${andSecurityItem.name} ${andSecurityItem.in}</b> ${getOauthScopeTemplate(andSecurityItem.scopes)} </div>`} `)} </div> </div> </div> `)} </div> </div>`;
   }
 
   return '';

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

@@ -9,6 +9,8 @@ var _marked = require("marked");
 
 var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
 
+var _languages = require("../languages");
+
 function onApiServerChange(e, server) {
   if (e && e.target.checked) {
     this.selectedServer = server;
@@ -30,7 +32,7 @@ function onApiServerVarChange(e, serverObj) {
 
 
 function serverVarsTemplate() {
-  return this.selectedServer && this.selectedServer.variables ? (0, _litElement.html)` <div class="table-title"> SERVER VARIABLES</div> <table role="presentation" class="m-table"> ${Object.entries(this.selectedServer.variables).map(kv => (0, _litElement.html)` <tr> <td style="vertical-align:middle">${kv[0]}</td> <td> ${kv[1].enum ? (0, _litElement.html)` <select data-var="${kv[0]}" @input="${e => {
+  return this.selectedServer && this.selectedServer.variables ? (0, _litElement.html)` <div class="table-title">${(0, _languages.getI18nText)('api-servers.server-variables')}</div> <table role="presentation" class="m-table"> ${Object.entries(this.selectedServer.variables).map(kv => (0, _litElement.html)` <tr> <td style="vertical-align:middle">${kv[0]}</td> <td> ${kv[1].enum ? (0, _litElement.html)` <select data-var="${kv[0]}" @input="${e => {
     onApiServerVarChange.call(this, e, this.selectedServer);
   }}"> ${Object.entries(kv[1].enum).map(e => kv[1].default === e[1] ? (0, _litElement.html)` <option selected="selected" label="${e[1]}" value="${e[1]}">` : (0, _litElement.html)` <option label="${e[1]}" value="${e[1]}">`)} </select>` : (0, _litElement.html)` <input type="text" part="textbox textbox-server-var" spellcheck="false" data-var="${kv[0]}" value="${kv[1].default}" @input="${e => {
     onApiServerVarChange.call(this, e, this.selectedServer);
@@ -42,8 +44,8 @@ function serverTemplate() {
     return undefined;
   }
 
-  return (0, _litElement.html)` <section id="servers" part="section-servers" style="margin-top:24px;margin-bottom:24px" class="regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <div class="sub-title">API SERVER</div> <div class="mono-font" style="margin:12px 0;font-size:calc(var(--font-size-small) + 1px)"> ${!this.resolvedSpec.servers || !this.resolvedSpec.servers.length ? '' : (0, _litElement.html)` ${this.resolvedSpec.servers.map((server, i) => (0, _litElement.html)` <input type="radio" name="api_server" id="srvr-opt-${i}" value="${server.url}" @change="${e => {
+  return (0, _litElement.html)` <section id="servers" part="section-servers" style="margin-top:24px;margin-bottom:24px" class="regular-font observe-me section-padding ${this.renderStyle === 'read' ? 'section-gap--read-mode' : this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <div class="sub-title">${(0, _languages.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 ? '' : (0, _litElement.html)` ${this.resolvedSpec.servers.map((server, i) => (0, _litElement.html)` <input type="radio" name="api_server" id="srvr-opt-${i}" value="${server.url}" @change="${e => {
     onApiServerChange.call(this, e, server);
-  }}" .checked="${this.selectedServer.url === server.url}" style="margin:4px 0;cursor:pointer"> <label style="cursor:pointer" for="srvr-opt-${i}"> ${server.url} ${server.description ? (0, _litElement.html)`- <span class="regular-font">${server.description} </span>` : ''} </label> <br> `)} `} <div class="table-title primary-text" part="label-selected-server"> SELECTED: ${this.selectedServer && this.selectedServer.computedUrl || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;
+  }}" .checked="${this.selectedServer.url === server.url}" style="margin:4px 0;cursor:pointer"> <label style="cursor:pointer" for="srvr-opt-${i}"> ${server.url} ${server.description ? (0, _litElement.html)`- <span class="regular-font">${server.description} </span>` : ''} </label> <br> `)} `} <div class="table-title primary-text" part="label-selected-server"> ${(0, _languages.getI18nText)('api-servers.selected')}: ${this.selectedServer && this.selectedServer.computedUrl || 'none'}</div> </div> <slot name="servers"></slot> ${serverVarsTemplate.call(this)} </section>`;
 }
 /* eslint-enable indent */