npm - openapi-explorer - Versions diffs - 1.1.603 → 1.1.605 - Mend

openapi-explorer 1.1.603 → 1.1.605

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/browser/openapi-explorer.min.js +2 -2
package/dist/browser/openapi-explorer.min.js.map +1 -1
package/dist/es/components/api-request.js +1 -1
package/dist/es/components/api-response.js +1 -1
package/dist/es/components/json-tree.js +1 -1
package/dist/es/components/schema-tree.js +1 -1
package/dist/es/openapi-explorer.js +2 -2
package/dist/es/templates/code-samples-template.js +1 -1
package/dist/es/templates/navbar-template.js +1 -1
package/dist/es/templates/overview-template.js +1 -1
package/dist/es/templates/security-scheme-template.js +1 -1
package/dist/es/templates/server-template.js +1 -1
package/dist/es/utils/common-utils.js +1 -1
package/dist/es/utils/spec-parser.js +1 -1
package/dist/lib/components/api-request.js +9 -9
package/dist/lib/components/api-response.js +4 -4
package/dist/lib/components/json-tree.js +2 -2
package/dist/lib/components/schema-tree.js +2 -2
package/dist/lib/openapi-explorer.js +3 -3
package/dist/lib/templates/code-samples-template.js +2 -2
package/dist/lib/templates/navbar-template.js +4 -4
package/dist/lib/templates/overview-template.js +2 -2
package/dist/lib/templates/security-scheme-template.js +6 -6
package/dist/lib/templates/server-template.js +4 -4
package/dist/lib/utils/common-utils.js +3 -3
package/dist/lib/utils/spec-parser.js +3 -3
package/package.json +1 -1

package/dist/browser/openapi-explorer.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"openapi-explorer.min.js","mappings":";;AA8BA;AC+jBA;AAxCA;AA+DA","sources":["webpack://openapi-explorer/./src/templates/code-samples-template.js","webpack://openapi-explorer/./src/components/api-request.js"],"sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport Prism from 'prismjs';\nimport { copyToClipboard } from '../utils/common-utils.js';\nimport { getI18nText } from '../languages';\n\n/* eslint-disable indent /\nexport default function codeSamplesTemplate(xCodeSamples) {\n return html`\n <section class=\"table-title top-gap\"> CODE SAMPLES </div>\n <div class=\"tab-panel col\"\n @click=\"${\n (e) => {\n if (!e.target.classList.contains('tab-btn')) { return; }\n const clickedTab = e.target.dataset.tab;\n\n const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];\n const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];\n tabButtons.forEach((tabBtnEl) => tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? 'add' : 'remove']('active'));\n tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });\n }\n }\">\n <div class=\"tab-buttons row\" style=\"width:100; overflow\">\n ${xCodeSamples.map((v, i) => html`<button class=\"tab-btn ${i === 0 ? 'active' : ''}\" data-tab = '${v.lang}${i}'> ${v.label \|\| v.lang} </button>`)}\n </div>\n ${xCodeSamples.map((v, i) => {\n const paddingToRemove = Math.min(...v.source.split('\\n').slice(1).map(l => l.match(/^(\\s+).$/)?.[1].length).filter(l => typeof l !== 'undefined'));\n const sanitizedSource = v.source.split('\\n').map(s => s.substring(0, paddingToRemove).match(/^\\s+$/) ? s.substring(paddingToRemove) : s);\n const fullSource = sanitizedSource.join('\\n');\n return html`\n <div class=\"tab-content m-markdown code-sample-wrapper\" style= \"display:${i === 0 ? 'block' : 'none'}\" data-tab = '${v.lang}${i}'>\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(v.source, e); }}'>${getI18nText('operations.copy')}</button>\n <pre><code>${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(fullSource, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : fullSource}\n </code></pre>\n </div>`;\n })\n }\n </section>`;\n}\n/* eslint-enable indent /\n","import { LitElement, html } from 'lit';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport mimeTypeResolver from './mime-types.js';\n\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport formatXml from 'xml-but-prettier';\n\nimport { copyToClipboard } from '../utils/common-utils.js';\nimport { getI18nText } from '../languages';\nimport { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';\nimport './json-tree.js';\nimport './schema-tree.js';\nimport getRequestFormTable from './request-form-table.js';\nimport './tag-input.js';\n\nconst textFileRegex = RegExp('^font/\|tar$\|zip$\|7z$\|rtf$\|msword$\|excel$\|/pdf$\|/octet-stream$\|^application/vnd.');\nconst mediaFileRegex = RegExp('^audio/\|^image/\|^video/');\n\nexport default class ApiRequest extends LitElement {\n createRenderRoot() { return this; }\n\n constructor() {\n super();\n this.duplicatedRowsByKey = {};\n this.storedParamValues = {};\n this.responseMessage = '';\n this.responseStatus = '';\n this.responseHeaders = '';\n this.responseText = '';\n this.responseUrl = '';\n this.responseElapsedMs = 0;\n this.curlSyntax = '';\n this.activeResponseTab = 'curl'; // allowed values: response, headers, curl\n this.selectedRequestBodyType = '';\n this.selectedRequestBodyExample = '';\n }\n\n static get properties() {\n return {\n serverUrl: { type: String, attribute: 'server-url' },\n servers: { type: Array },\n method: { type: String },\n path: { type: String },\n elementId: { type: String, attribute: 'element-id' },\n parameters: { type: Array },\n request_body: { type: Object },\n api_keys: { type: Array },\n parser: { type: Object },\n accept: { type: String },\n callback: { type: String },\n responseMessage: { type: String, attribute: false },\n responseText: { type: String, attribute: false },\n responseHeaders: { type: String, attribute: false },\n responseStatus: { type: String, attribute: false },\n responseUrl: { type: String, attribute: false },\n responseElapsedMs: { type: Number, attribute: false },\n fillRequestWithDefault: { type: String, attribute: 'fill-defaults' },\n includeNulls: { type: Boolean, attribute: 'display-nulls', converter(value) { return value === 'true'; } },\n allowTry: { type: String, attribute: 'enable-console' },\n renderStyle: { type: String, attribute: 'render-style' },\n schemaStyle: { type: String, attribute: 'schema-style' },\n activeSchemaTab: { type: String, attribute: 'active-schema-tab' },\n schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },\n fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n // properties for internal tracking\n duplicatedRowsByKey: { type: Object }, // Tracking duplicated rows in form table\n activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute\n selectedRequestBodyType: { type: String, attribute: 'selected-request-body-type' }, // internal tracking of selected request-body type\n selectedRequestBodyExample: { type: String, attribute: 'selected-request-body-example' }, // internal tracking of selected request-body example\n };\n }\n\n render() {\n const id = this.elementId \|\| `${this.method}-${this.path}`;\n return keyed(id, html`\n <div id=\"api-request-${id}\"\n class=\"api-request col regular-font request-panel ${(this.renderStyle === 'focused' \|\| this.callback === 'true') ? 'focused-mode' : 'view-mode'}\">\n <div class=\" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} \"> \n ${this.callback === 'true' ? 'CALLBACK REQUEST' : getI18nText('operations.request')}\n </div>\n <div>\n ${this.inputParametersTemplate('path')}\n ${this.inputParametersTemplate('query')}\n ${this.requestBodyTemplate()}\n ${this.inputParametersTemplate('header')}\n ${this.inputParametersTemplate('cookie')}\n ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}\n </div>\n </div>\n `);\n }\n\n updated(changedProperties) {\n // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.\n // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually\n if (this.renderStyle !== 'focused') {\n return;\n }\n\n // dont update example as only tabs is switched\n if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {\n return;\n }\n\n const exampleTextAreaEls = [...this.querySelectorAll('textarea[data-ptype=\"form-data\"]')];\n exampleTextAreaEls.forEach((el) => {\n const origExampleEl = this.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);\n if (origExampleEl) {\n el.value = origExampleEl.value;\n }\n });\n }\n\n / eslint-disable indent /\n inputParametersTemplate(paramLocation) {\n const filteredParams = this.parameters ? this.parameters.filter((param) => param.in === paramLocation) : [];\n if (filteredParams.length === 0) {\n return '';\n }\n\n const title = {\n path: 'PATH PARAMETERS',\n query: 'QUERY-STRING PARAMETERS',\n header: 'REQUEST HEADERS',\n cookie: 'COOKIES'\n }[paramLocation];\n\n const tableRows = [];\n for (const param of filteredParams) {\n if (!param.schema) {\n continue;\n }\n const paramSchema = getTypeInfo(param.schema, { includeNulls: this.includeNulls });\n if (!paramSchema) {\n continue;\n }\n const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;\n let paramStyle = 'form';\n let paramExplode = true;\n if (paramLocation === 'query') {\n if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {\n paramStyle = param.style;\n }\n if (typeof param.explode === 'boolean') {\n paramExplode = param.explode;\n }\n }\n\n tableRows.push(html`\n <tr> \n <td colspan=\"1\" style=\"width:160px; min-width:50px; vertical-align: top\">\n <div class=\"param-name ${paramSchema.deprecated ? 'deprecated' : ''}\" style=\"margin-top: 1rem;\">\n ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'></span>` : ''}\n </div>\n <div class=\"param-type\" style=\"margin-bottom: 1rem;\">\n ${paramSchema.type === 'array'\n ? `${paramSchema.arrayType}`\n : `${paramSchema.format ? paramSchema.format : paramSchema.type}`\n }${!paramSchema.deprecated && param.required ? html`<span style='opacity: 0;'></span>` : ''}\n </div>\n </td> \n <td colspan=\"2\" style=\"min-width:160px; vertical-align: top\">\n ${this.allowTry === 'true'\n ? paramSchema.type === 'array' && html`\n <div style=\" margin-top: 1rem; margin-bottom: 1rem;\"> \n <tag-input class=\"request-param\" \n style = \"width:100%;\" \n data-ptype = \"${paramLocation}\"\n data-pname = \"${param.name}\"\n data-default = \"${Array.isArray(defaultVal) ? defaultVal.join('~\|~') : defaultVal}\"\n data-param-serialize-style = \"${paramStyle}\"\n data-param-serialize-explode = \"${paramExplode}\"\n data-array = \"true\"\n placeholder=\"add-multiple ↩\"\n @change=\"${(e) => { this.storedParamValues[param.name] = e.detail.value; this.computeCurlSyntax(); }}\"\n .value = \"${this.storedParamValues[param.name] ?? (this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(','))}\"></tag-input>\n </div>`\n \|\| paramSchema.type === 'object' && html`\n <textarea\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n class = \"textarea small request-param\"\n part = \"textarea small textarea-param\"\n rows = 3\n data-ptype = \"${paramLocation}\"\n data-pname = \"${param.name}\"\n data-default = \"${defaultVal}\"\n data-param-serialize-style = \"${paramStyle}\"\n data-param-serialize-explode = \"${paramExplode}\"\n spellcheck = \"false\"\n placeholder=\"${paramSchema.example \|\| defaultVal \|\| ''}\"\n style = \"width:100%; margin-top: 1rem; margin-bottom: 1rem;\"\n .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"></textarea>`\n \|\| html`\n <input type=\"${paramSchema.format === 'password' ? 'password' : 'text'}\" spellcheck=\"false\" style=\"width:100%; margin-top: 1rem; margin-bottom: 1rem;\"\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n placeholder=\"${paramSchema.example \|\| defaultVal \|\| ''}\"\n class=\"request-param\"\n part=\"textbox textbox-param\"\n data-ptype=\"${paramLocation}\"\n data-pname=\"${param.name}\" \n data-default=\"${Array.isArray(defaultVal) ? defaultVal.join('~\|~') : defaultVal}\"\n data-array=\"false\"\n @keyup=\"${this.requestParamFunction}\"\n .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"\n />`\n : ''}\n\n ${this.exampleListTemplate.call(this, param, paramSchema.type)}\n </td>\n ${this.renderStyle === 'focused'\n ? html`\n <td colspan=\"2\" style=\"vertical-align: top\">\n ${param.description\n ? html`\n <div class=\"param-description\" style=\"margin-top: 1rem;\">\n ${unsafeHTML(marked(param.description))}\n </div>`\n : ''\n }\n ${paramSchema.default \|\| paramSchema.s \|\| paramSchema.allowedValues \|\| paramSchema.pattern\n ? html`\n <div class=\"param-constraint\" style=\"margin-top: 1rem;\">\n ${paramSchema.constraints.length ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''}\n ${paramSchema.pattern ? html`\n <div class=\"tooltip tooltip-replace\" style=\"cursor: pointer; max-width: 100%; display: flex;\">\n <div style=\"white-space:nowrap; font-weight:bold; margin-right: 2px;\">Pattern: </div>\n <div style=\"white-space:nowrap; text-overflow:ellipsis; max-width:100%; overflow:hidden;\">${paramSchema.pattern}</div>\n <br>\n <div class=\"tooltip-text\" style=\"position: absolute; display:block;\">${paramSchema.pattern}</div>\n </div>\n ` : ''}\n ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n ${i > 0 ? '\|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n ${html`\n <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n data-type=\"${paramSchema.type === 'array' ? 'array' : 'string'}\"\n data-enum=\"${v.trim()}\"\n @click=\"${(e) => {\n const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${param.name}\"]`);\n if (inputEl) {\n inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;\n }\n }}\"\n >\n ${v} \n </a>`\n }`)}\n </div>`\n : ''\n }\n </td> \n </tr>`\n : ''\n }\n `);\n }\n\n return html`\n <div class=\"table-title top-gap\">${title}${paramLocation === 'path' ? html`<span style='color:var(--red);'></span>` : ''}</div>\n <div style=\"display:block; overflow-x:auto; max-width:100%;\">\n <table role=\"presentation\" class=\"m-table\" style=\"width:100%; word-break:break-word;\">\n ${tableRows}\n </table>\n </div>`;\n }\n\n renderExample(example, paramType, paramName) {\n return html`\n <a\n part=\"anchor anchor-param-example\"\n class=\"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n data-example-type=\"${paramType === 'array' ? paramType : 'string'}\"\n data-example=\"${Array.isArray(example.exampleValue) ? example.exampleValue?.join('~\|~') : example.exampleValue}\"\n @click=\"${(e) => {\n const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${paramName}\"]`);\n if (inputEl) {\n inputEl.value = paramType === 'array' ? (e.target.dataset.example.split('~\|~') \|\| []) : e.target.dataset.example;\n }\n }}\">${Array.isArray(example.exampleValue) ? example.exampleValue?.join(', ') : example.exampleValue}\n </a>\n `;\n }\n\n renderShortFormatExamples(examples, paramType, paramName) {\n return html`${examples.map((example, i) => html`\n ${i === 0 ? '' : '┃'}\n ${this.renderExample(example, paramType, paramName)}`)}`;\n }\n\n renderLongFormatExamples(exampleList, paramType, paramName) {\n return html`\n <ul style=\"margin-block-start: 0.25em;\">\n ${exampleList.map(example =>\n html`\n <li>\n ${this.renderExample(example, paramType, paramName)}\n ${example.exampleSummary?.length > 0 ? html`<span>(${example.exampleSummary})</span>` : ''}\n ${example.exampleDescription?.length > 0 ? html`<p>${unsafeHTML(marked(example.exampleDescription))}</p>` : ''}\n </li>`\n )}\n </ul>`;\n }\n\n /* eslint-disable indent /\n\n exampleListTemplate(param, paramType) {\n const paramName = param.name;\n const paramSchema = getTypeInfo(param.schema, { includeNulls: this.includeNulls });\n\n const examples = generateExample(\n param.examples \|\| param.example && { Example: { value: param.example } } \|\| paramSchema.examples \|\| paramSchema.example && { Example: { value: paramSchema.example } },\n null, param.schema, null, false, true, 'json', false);\n\n const someExampleWithSummaryOrDescription = examples.some((x) => x.exampleSummary?.length > 0 \|\| x.exampleDescription?.length > 0);\n if (!examples.length) {\n return '';\n }\n\n // Don't show an example if there is just one without a description because it is the same as the placeholder for the field\n if (examples.length === 1 && !someExampleWithSummaryOrDescription) {\n return '';\n }\n\n return html`<div style=\"min-width:50px; margin-bottom: 1rem;\">\n <span style=\"font-weight:bold\">Examples: </span>\n ${someExampleWithSummaryOrDescription\n ? this.renderLongFormatExamples(examples, paramType, paramName)\n : this.renderShortFormatExamples(examples, paramType, paramName)\n }\n </div>`;\n }\n\n resetRequestBodySelection() {\n this.selectedRequestBodyType = '';\n this.selectedRequestBodyExample = '';\n this.computeCurlSyntax();\n this.clearResponseData();\n }\n\n // Request-Body Event Handlers\n onSelectExample(e) {\n this.selectedRequestBodyExample = e.target.value;\n const exampleDropdownEl = e.target;\n window.setTimeout((selectEl) => {\n const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');\n const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');\n userInputExampleTextareaEl.value = exampleTextareaEl.value;\n this.computeCurlSyntax();\n }, 0, exampleDropdownEl);\n }\n\n onMimeTypeChange(e) {\n this.selectedRequestBodyType = e.target.value;\n const mimeDropdownEl = e.target;\n this.selectedRequestBodyExample = '';\n window.setTimeout((selectEl) => {\n const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');\n if (exampleTextareaEl) {\n const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');\n userInputExampleTextareaEl.value = exampleTextareaEl.value;\n }\n this.computeCurlSyntax();\n }, 0, mimeDropdownEl);\n }\n\n requestBodyTemplate() {\n if (!this.request_body) {\n return '';\n }\n if (Object.keys(this.request_body).length === 0) {\n return '';\n }\n\n if (this.method === 'get' \|\| this.method === 'head') {\n return '';\n }\n\n // Variable to store partial HTMLs\n let reqBodyTypeSelectorHtml = '';\n let reqBodyFileInputHtml = '';\n let reqBodySchemaHtml = '';\n let reqBodyDefaultHtml = '';\n let bodyTabNameUseBody = true;\n\n const requestBodyTypes = [];\n const content = this.request_body.content;\n for (const mimeType in content) {\n requestBodyTypes.push({\n mimeType,\n schema: content[mimeType].schema,\n example: content[mimeType].example,\n examples: content[mimeType].examples,\n });\n }\n\n if (!content[this.selectedRequestBodyType]) {\n this.selectedRequestBodyType = requestBodyTypes[0]?.mimeType;\n }\n\n // MIME Type selector\n reqBodyTypeSelectorHtml = requestBodyTypes.length === 1\n ? ''\n : html`\n <select aria-label=\"mime type\" style=\"min-width:100px; max-width:100%; margin-bottom:-1px;\" @change = '${(e) => this.onMimeTypeChange(e)}'>\n ${requestBodyTypes.map((reqBody) => html`\n <option value = '${reqBody.mimeType}' ?selected = '${reqBody.mimeType === this.selectedRequestBodyType}'>\n ${reqBody.mimeType}\n </option> `)\n }\n </select>\n `;\n\n // For Loop - Main\n const reqBody = requestBodyTypes.find(req => req.mimeType === this.selectedRequestBodyType);\n // Generate Example\n if (this.selectedRequestBodyType.includes('json') \|\| this.selectedRequestBodyType.includes('xml') \|\| this.selectedRequestBodyType.includes('text')) {\n const reqBodyExamples = generateExample(\n reqBody.examples ? reqBody.examples : '',\n reqBody.example ? reqBody.example : '',\n reqBody.schema,\n reqBody.mimeType,\n false,\n true,\n 'text',\n true\n );\n\n if (!this.selectedRequestBodyExample) {\n this.selectedRequestBodyExample = (reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '');\n }\n const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) \|\| reqBodyExamples[0];\n reqBodyDefaultHtml = html`\n <div class = 'example-panel border-top pad-top-8'>\n ${reqBodyExamples.length === 1\n ? ''\n : html`\n <select aria-label='request body example' style=\"min-width:100px; max-width:100%; margin-bottom:-1px;\" @change='${(e) => this.onSelectExample(e)}'>\n ${reqBodyExamples.map((v) => html`<option value=\"${v.exampleId}\" ?selected=${v.exampleId === this.selectedRequestBodyExample}> \n ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} \n </option>`)}\n </select>`\n }\n ${displayedBodyExample ? html`\n <div class=\"example\" data-default = '${displayedBodyExample.exampleId}'>\n ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style=\"padding: 4px 0\"> ${displayedBodyExample.exampleSummary} </div>` : ''}\n ${displayedBodyExample.exampleDescription ? html`<div class=\"m-markdown-small\" style=\"padding: 4px 0\"> ${unsafeHTML(marked(displayedBodyExample.exampleDescription \|\| ''))} </div>` : ''}\n <!-- this textarea is for user to edit the example -->\n <slot name=\"${this.elementId}--request-body\">\n <textarea\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n class = \"textarea request-body-param-user-input\"\n part = \"textarea textarea-param\"\n spellcheck = \"false\"\n data-ptype = \"${reqBody.mimeType}\" \n data-default = \"${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}\"\n data-default-format = \"${displayedBodyExample.exampleFormat}\"\n style=\"width:100%; resize:vertical;\"\n .value=\"${this.fillRequestWithDefault === 'true' ? (displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)) : ''}\"\n ></textarea>\n </slot>\n\n <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->\n <textarea\n class = \"textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}\" \n spellcheck = \"false\"\n data-ptype = \"${reqBody.mimeType}\" \n style=\"width:100%; resize:vertical; display:none\"\n .value=\"${(displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8))}\"\n ></textarea>\n </div>`\n : ''}\n\n </div>\n `;\n } else if (this.selectedRequestBodyType.includes('form-urlencoded') \|\| this.selectedRequestBodyType.includes('form-data')) {\n bodyTabNameUseBody = false;\n const schemaAsObj = schemaInObjectNotation(reqBody.schema, { includeNulls: this.includeNulls });\n reqBodyDefaultHtml = getRequestFormTable.call(this, schemaAsObj, this.selectedRequestBodyType);\n } else if (mediaFileRegex.test(this.selectedRequestBodyType) \|\| textFileRegex.test(this.selectedRequestBodyType)) {\n reqBodyFileInputHtml = html`\n <div class = \"small-font-size bold-text row\">\n <input type=\"file\" part=\"file-input\" style=\"max-width:100%\" class=\"request-body-param-file\" data-ptype=\"${reqBody.mimeType}\" spellcheck=\"false\" />\n </div> \n `;\n }\n\n // Generate Schema\n if (reqBody.mimeType.includes('json') \|\| reqBody.mimeType.includes('xml') \|\| reqBody.mimeType.includes('text') \|\| reqBody.mimeType.includes('form-')) {\n const schemaAsObj = schemaInObjectNotation(reqBody.schema, { includeNulls: this.includeNulls });\n if (this.schemaStyle === 'table') {\n reqBodySchemaHtml = html`\n ${reqBodySchemaHtml}\n <schema-table\n class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n .data = '${schemaAsObj}'\n schema-expand-level = \"${this.schemaExpandLevel}\"\n schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n schema-hide-write-only = false\n > </schema-table>\n `;\n } else {\n reqBodySchemaHtml = html`\n ${reqBodySchemaHtml}\n <schema-tree\n class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n .data = '${schemaAsObj}'\n schema-expand-level = \"${this.schemaExpandLevel}\"\n schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n schema-hide-write-only = false\n > </schema-tree>\n `;\n }\n }\n\n return html`\n <div class='request-body-container' data-selected-request-body-type=\"${this.selectedRequestBodyType}\">\n <div class=\"table-title top-gap row\">\n ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class=\"mono-font\" style='color:var(--red)'></span>` : ''} \n <span style = \"font-weight:normal; margin-left:5px\"> ${this.selectedRequestBodyType}</span>\n <span style=\"flex:1\"></span>\n ${reqBodyTypeSelectorHtml}\n </div>\n ${this.request_body.description ? html`<div class=\"m-markdown\" style=\"margin-bottom:12px\">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}\n \n ${reqBodySchemaHtml \|\| reqBodyDefaultHtml\n ? html`\n <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n <div class=\"tab-buttons row\" @click=\"${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}\">\n <button class=\"tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab=\"model\" >${getI18nText('operations.model')}</button>\n <button class=\"tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}\" data-tab=\"body\">${bodyTabNameUseBody ? getI18nText('operations.body') : getI18nText('operations.form')}</button>\n </div>\n ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'block' : 'none'}\"> ${reqBodySchemaHtml}</div>`}\n ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'none' : 'block'}\"> ${reqBodyDefaultHtml}</div>`}\n </div>`\n : html`${reqBodyFileInputHtml}`\n }\n </div> \n `;\n }\n\n // formDataTemplate(schema, mimeType, exampleValue = '') {\n // return html`\n // <textarea\n // class = \"textarea dynamic-form-param ${mimeType}\"\n // part = \"textarea textarea-param\"\n // spellcheck = \"false\"\n // data-pname=\"dynamic-form\"\n // data-ptype=\"${mimeType}\"\n // style=\"width:100%\"\n // >${exampleValue}</textarea>\n // ${schema.description ? html`<span class=\"m-markdown-small\">${unsafeHTML(marked(schema.description))}</span>` : ''}\n // `;\n // }\n\n apiResponseTabTemplate() {\n const curlSyntax = this.curlSyntax \|\| this.computeCurlSyntax() \|\| '';\n const hasResponse = this.responseMessage !== '';\n const responseFormat = this.responseHeaders.includes('json') ? 'json' : (this.responseHeaders.includes('html') \|\| this.responseHeaders.includes('xml')) ? 'html' : '';\n return html`\n <div class=\"row\" style=\"font-size:var(--font-size-small); margin:5px 0\">\n ${this.responseMessage\n ? html`<div class=\"response-message ${this.responseStatus}\">Response Status: ${this.responseMessage}\n ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''}\n </div>` : ''\n }\n <div style=\"flex:1\"></div>\n ${!hasResponse ? '' : html`<button class=\"m-btn\" part=\"btn btn-outline\" @click=\"${this.clearResponseData}\">CLEAR RESPONSE</button>`}\n </div>\n <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n <div id=\"tab_buttons\" class=\"tab-buttons row\" @click=\"${(e) => {\n if (e.target.classList.contains('tab-btn') === false) { return; }\n this.activeResponseTab = e.target.dataset.tab;\n }}\">\n <br>\n <div style=\"width: 100%\">\n ${!hasResponse ? '' : html`\n <button class=\"tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}\" data-tab = 'response'>${getI18nText('operations.response')}</button>\n <button class=\"tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}\" data-tab = 'headers'>${getI18nText('operations.response-headers')}</button>`}\n <button class=\"tab-btn ${!hasResponse \|\| this.activeResponseTab === 'curl' ? 'active' : ''}\" data-tab = 'curl'>FULL REQUEST</button>\n </div>\n </div>\n ${this.responseIsBlob\n ? html`\n <div class=\"tab-content col\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\">\n ${this.responseBlobType === 'image'\n ? html`<img style=\"max-height:var(--resp-area-height, 300px); object-fit:contain;\" class=\"mar-top-8\" src=\"${this.responseBlobUrl}\"></img>`\n : ''\n }\n <div style=\"display: flex; justify-content: center\">\n <div> \n <button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.downloadResponseBlob}\" part=\"btn btn-outline\">DOWNLOAD</button>\n ${this.responseBlobType === 'view' \|\| this.responseBlobType === 'image'\n ? html`<button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.viewResponseBlob}\" part=\"btn btn-outline\">VIEW (NEW TAB)</button>`\n : ''\n }\n </div>\n </div>\n </div>`\n : html`\n <div class=\"tab-content col m-markdown\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\" >\n ${this.responseText\n ? html`<button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>`\n : ''\n }\n <pre style=\"min-height: 60px\" @copy='${() => { copyToClipboard(window.getSelection().toString()); }}'>${responseFormat\n ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`\n : `${this.responseText}`\n }\n </pre>\n </div>`\n }\n <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};\" >\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>\n <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>\n </div>\n <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};\">\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(curlSyntax, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>\n <pre class=\"fs-exclude\" data-hj-suppress data-sl=\"mask\">\n <code>${unsafeHTML(Prism.highlight(curlSyntax.trim(), Prism.languages.shell, 'shell'))}</code>\n </pre>\n </div>\n </div>`;\n }\n\n apiCallTemplate() {\n return html`\n <div style=\"display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);\">\n ${\n this.parameters.length > 0 \|\| this.request_body\n ? html`\n <button class=\"m-btn thin-border\" part=\"btn btn-outline\" style=\"margin-right:5px;\" @click=\"${this.onClearRequestData}\">\n ${getI18nText('operations.clear')}\n </button>`\n : ''\n }\n <button class=\"m-btn primary btn-execute thin-border\" part=\"btn btn-fill btn-try\" @click=\"${this.onTryClick}\">${getI18nText('operations.execute')}</button>\n </div>\n ${this.apiResponseTabTemplate()}\n `;\n }\n /* eslint-enable indent /\n\n onClearRequestData(e) {\n const requestPanelEl = e.target.closest('.request-panel');\n const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];\n requestPanelInputEls.forEach((el) => { el.value = ''; });\n\n const event = { bubbles: true, composed: true, detail: { explorerLocation: this.elementId, operation: { method: this.method, path: this.path }, type: 'RequestCleared' } };\n this.dispatchEvent(new CustomEvent('event', event));\n this.computeCurlSyntax();\n }\n\n recomputeFetchOptions() {\n const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');\n const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];\n const acceptHeader = respEl?.selectedMimeType;\n const requestPanelEl = this.closest('.request-panel');\n const pathParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='path']\")];\n const queryParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query']\")];\n\n const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query-object']\")];\n const headerParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='header']\")];\n const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');\n\n let pathUrl = `${this.serverUrl.replace(/\\/$/, '')}${this.path.replaceAll(' ', '')}`;\n\n // Generate URL using Path Params\n pathParamEls.map((el) => {\n pathUrl = pathUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value) \|\| '-');\n });\n\n // Handle relative serverUrls\n if (!pathUrl.startsWith('http')) {\n const newUrl = new URL(pathUrl, window.location.href);\n pathUrl = newUrl.toString();\n }\n\n const fetchUrl = new URL(pathUrl);\n\n const fetchOptions = {\n method: this.method.toUpperCase(),\n headers: new Headers()\n };\n\n // Query Params\n queryParamEls.forEach((el) => {\n if (!el.dataset.array \|\| el.dataset.array === 'false') {\n if (el.value !== '') {\n fetchUrl.searchParams.append(el.dataset.pname, el.value);\n }\n } else {\n const paramSerializeStyle = el.dataset.paramSerializeStyle;\n const paramSerializeExplode = el.dataset.paramSerializeExplode;\n const values = Array.isArray(el.value) ? el.value.filter((v) => v !== '') : [];\n\n if (values.length > 0) {\n if (paramSerializeStyle === 'spaceDelimited') {\n fetchUrl.searchParams.append(el.dataset.pname, values.join(' ').replace(/^\\s\|\\s$/g, ''));\n } else if (paramSerializeStyle === 'pipeDelimited') {\n fetchUrl.searchParams.append(el.dataset.pname, values.join('\|').replace(/^\\\|\|\\\|$/g, ''));\n } else {\n if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n values.forEach((v) => { fetchUrl.searchParams.append(el.dataset.pname, v); });\n } else {\n fetchUrl.searchParams.append(el.dataset.pname, values.join(',').replace(/^,\|,$/g, ''));\n }\n }\n }\n }\n });\n\n // Query Params (Dynamic - create from JSON)\n queryParamObjTypeEls.map((el) => {\n try {\n let queryParamObj = {};\n const paramSerializeStyle = el.dataset.paramSerializeStyle;\n const paramSerializeExplode = el.dataset.paramSerializeExplode;\n queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\\s+/g, ' ')));\n for (const key in queryParamObj) {\n if (typeof queryParamObj[key] === 'object') {\n if (Array.isArray(queryParamObj[key])) {\n if (paramSerializeStyle === 'spaceDelimited') {\n fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));\n } else if (paramSerializeStyle === 'pipeDelimited') {\n fetchUrl.searchParams.append(key, queryParamObj[key].join('\|'));\n } else {\n if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n queryParamObj[key].forEach((v) => {\n fetchUrl.searchParams.append(key, v);\n });\n } else {\n fetchUrl.searchParams.append(key, queryParamObj[key]);\n }\n }\n }\n } else {\n fetchUrl.searchParams.append(key, queryParamObj[key]);\n }\n }\n } catch (err) {\n console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console\n }\n });\n\n // Add Authentication api keys if provided\n this.api_keys.filter((v) => v.finalKeyValue).forEach((v) => {\n if (v.in === 'query') {\n fetchUrl.searchParams.append(v.name, v.finalKeyValue);\n return;\n }\n\n // Otherwise put it in the header\n fetchOptions.headers.append(v.name, v.finalKeyValue);\n });\n\n if (acceptHeader) {\n // Uses the acceptHeader from Response panel\n fetchOptions.headers.append('Accept', acceptHeader);\n } else if (this.accept) {\n fetchOptions.headers.append('Accept', this.accept);\n }\n\n // Add Header Params\n headerParamEls.map((el) => {\n if (el.value) {\n fetchOptions.headers.append(el.dataset.pname, el.value);\n }\n });\n\n // Request Body Params\n\n // url-encoded Form Params (dynamic) - Parse JSON and generate Params\n const formUrlDynamicTextAreaEl = requestPanelEl.querySelector(\"[data-ptype='dynamic-form']\");\n // url-encoded Form Params (regular)\n const rawFormInputEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-input']\")];\n\n const patternPropertyKeyEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='pattern-property-key']\")];\n const patternPropertyInputEls = rawFormInputEls.filter(el => isPatternProperty(el.dataset.pname));\n const formInputEls = rawFormInputEls.filter(el => !isPatternProperty(el.dataset.pname));\n\n let curlData = '';\n let curlForm = '';\n if (requestBodyContainerEl) {\n const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;\n\n if (requestBodyType.includes('form-urlencoded')) {\n if (formUrlDynamicTextAreaEl) {\n const val = formUrlDynamicTextAreaEl.value;\n const formUrlDynParams = new URLSearchParams();\n let proceed = true;\n let tmpObj;\n if (val) {\n try {\n tmpObj = JSON.parse(val);\n } catch (err) {\n proceed = false;\n console.warn('OpenAPI Explorer: Invalid JSON provided', err); // eslint-disable-line no-console\n }\n } else {\n proceed = false;\n }\n if (proceed) {\n for (const prop in tmpObj) {\n formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));\n }\n fetchOptions.body = formUrlDynParams;\n curlData = ` \\\\\\n -d ${formUrlDynParams.toString()}`;\n }\n } else {\n const formUrlParams = new URLSearchParams();\n patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {\n const keyName = patternPropertyKeyEls[counter]?.value \|\| el.dataset.pname;\n if (el.type === 'file') { return; }\n if (el.dataset.array === 'false') {\n if (el.value) {\n formUrlParams.append(keyName, el.value);\n }\n } else {\n const vals = (el.value && Array.isArray(el.value)) ? el.value.join(',') : '';\n formUrlParams.append(keyName, vals);\n }\n });\n fetchOptions.body = formUrlParams;\n curlData = ` \\\\\\n -d ${formUrlParams.toString()}`;\n }\n } else if (requestBodyType.includes('form-data')) {\n const formDataParams = new FormData();\n patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {\n const keyName = patternPropertyKeyEls[counter]?.value \|\| el.dataset.pname;\n if (el.dataset.array === 'false') {\n if (el.type === 'file' && el.files[0]) {\n formDataParams.append(keyName, el.files[0], el.files[0].name);\n curlForm += ` \\\\\\n -F \"${keyName}=@${el.files[0].name}\"`;\n } else if (el.value) {\n formDataParams.append(keyName, el.value);\n curlForm += ` \\\\\\n -F \"${keyName}=${el.value}\"`;\n }\n } else if (el.value && Array.isArray(el.value)) {\n el.value.forEach((v) => {\n curlForm += ` \\\\\\n -F \"${keyName}[]=${v}\"`;\n });\n formDataParams.append(keyName, el.value.join(','));\n }\n });\n fetchOptions.body = formDataParams;\n } else if (mediaFileRegex.test(requestBodyType) \|\| textFileRegex.test(requestBodyType)) {\n const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');\n if (bodyParamFileEl && bodyParamFileEl.files[0]) {\n fetchOptions.body = bodyParamFileEl.files[0];\n curlData = ` \\\\\\n --data-binary @${bodyParamFileEl.files[0].name}`;\n }\n } else if (requestBodyType.includes('json') \|\| requestBodyType.includes('xml') \|\| requestBodyType.includes('text')) {\n const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');\n if (exampleTextAreaEl && exampleTextAreaEl.value) {\n fetchOptions.body = exampleTextAreaEl.value;\n if (requestBodyType.includes('json')) {\n try {\n curlData = ` \\\\\\n -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}'`;\n } catch (err) { / Ignore unparseable JSON / }\n }\n\n if (!curlData) {\n // Save single quotes wrapped => 'text' => `\"'\"text\"'\"`\n curlData = ` \\\\\\n -d '${exampleTextAreaEl.value.replace(/'/g, '\\'\"\\'\"\\'')}'`;\n }\n }\n }\n // Common for all request-body\n if (!requestBodyType.includes('form-data')) {\n // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries\n fetchOptions.headers.append('Content-Type', requestBodyType);\n }\n }\n\n if (this.fetchCredentials) {\n fetchOptions.credentials = this.fetchCredentials;\n }\n\n return {\n fetchOptions,\n fetchUrl,\n curlParts: {\n data: curlData,\n form: curlForm\n }\n };\n }\n\n computeCurlSyntax(headerOverride) {\n const { fetchOptions, fetchUrl, curlParts } = this.recomputeFetchOptions();\n const curl = `curl -X ${this.method.toUpperCase()} \"${fetchUrl.toString()}\"`;\n const headers = headerOverride ?? fetchOptions.headers;\n const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\\\\n -H \"${key}: ${value}\"`, '');\n this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;\n this.requestUpdate();\n }\n\n // onExecuteButtonClicked\n async onTryClick() {\n const tryBtnEl = this.querySelectorAll('.btn-execute')[0];\n \n const { fetchOptions, fetchUrl } = this.recomputeFetchOptions();\n\n this.responseIsBlob = false;\n this.respContentDisposition = '';\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n\n // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options\n const fetchRequest = { explorerLocation: this.elementId, url: fetchUrl.toString(), options: fetchOptions, ...fetchOptions };\n const event = {\n bubbles: true,\n composed: true,\n detail: {\n request: fetchRequest,\n },\n };\n\n this.dispatchEvent(new CustomEvent('before-try', event));\n this.dispatchEvent(new CustomEvent('request', event));\n const newFetchOptions = {\n method: fetchRequest.method \|\| fetchOptions.method,\n headers: fetchRequest.headers \|\| fetchOptions.headers,\n credentials: fetchRequest.credentials \|\| fetchOptions.credentials,\n body: fetchRequest.body \|\| fetchOptions.body\n };\n const fetchRequestObject = new Request(fetchRequest.url, newFetchOptions);\n\n this.computeCurlSyntax(newFetchOptions.headers);\n\n let fetchResponse;\n try {\n let respBlob;\n let respJson;\n let respText;\n tryBtnEl.disabled = true;\n const fetchStart = new Date();\n\n this.responseStatus = '';\n this.responseMessage = '';\n this.responseUrl = '';\n this.responseHeaders = '';\n this.responseText = '⌛';\n this.activeResponseTab = 'response';\n\n this.requestUpdate();\n const awaiter = new Promise(resolve => setTimeout(resolve, 200));\n fetchResponse = await fetch(fetchRequestObject);\n this.responseElapsedMs = new Date() - fetchStart;\n await awaiter;\n\n tryBtnEl.disabled = false;\n this.responseStatus = fetchResponse.ok ? 'success' : 'error';\n this.responseMessage = fetchResponse.statusText ? `${fetchResponse.statusText} (${fetchResponse.status})` : fetchResponse.status;\n this.responseUrl = fetchResponse.url;\n this.responseHeaders = '';\n const headers = {};\n fetchResponse.headers.forEach((hdrVal, hdr) => {\n this.responseHeaders = `${this.responseHeaders}${hdr.trim()}: ${hdrVal}\\n`;\n headers[hdr.trim()] = hdrVal && hdrVal.trim();\n });\n const contentType = fetchResponse.headers.get('content-type');\n const respEmpty = (await fetchResponse.clone().text()).length === 0;\n if (respEmpty) {\n this.responseText = '';\n } else if (contentType) {\n if (contentType.includes('json')) {\n if ((/charset=[^\"']+/).test(contentType)) {\n const encoding = contentType.split('charset=')[1];\n const buffer = await fetchResponse.arrayBuffer();\n try {\n respText = new TextDecoder(encoding).decode(buffer);\n } catch (_) {\n respText = new TextDecoder('utf-8').decode(buffer);\n }\n try {\n this.responseText = JSON.stringify(JSON.parse(respText), null, 8);\n } catch (_) {\n this.responseText = respText;\n }\n } else {\n respJson = await fetchResponse.json();\n this.responseText = JSON.stringify(respJson, null, 8);\n }\n } else if (textFileRegex.test(contentType)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'download';\n } else if (contentType.match(/^image/)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'image';\n } else if (mediaFileRegex.test(contentType)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'view';\n } else {\n respText = await fetchResponse.text();\n if (contentType.includes('xml')) {\n this.responseText = formatXml(respText, { textNodesOnSameLine: true, indentor: ' ' });\n } else {\n this.responseText = respText;\n }\n }\n if (this.responseIsBlob) {\n const contentDisposition = fetchResponse.headers.get('content-disposition');\n const filenameRegex = /filename[^;=\\n]=((['\"]).?\\2\|[^;\\n])/;\n const filename = filenameRegex.exec(contentDisposition);\n this.respContentDisposition = filename && filename[1] && filename[1].replace(/['\"]/g, '') \|\| `download.${mimeTypeResolver(contentType) \|\| 'file'}`;\n respBlob = await fetchResponse.blob();\n this.responseBlobUrl = URL.createObjectURL(respBlob);\n }\n } else {\n respText = await fetchResponse.text();\n this.responseText = respText;\n }\n const responseEvent = {\n bubbles: true,\n composed: true,\n detail: {\n explorerLocation: this.elementId,\n request: fetchRequest,\n response: {\n headers,\n body: respJson \|\| respText \|\| respBlob \|\| fetchResponse.body,\n status: fetchResponse.status,\n },\n },\n };\n this.dispatchEvent(new CustomEvent('after-try', responseEvent));\n this.dispatchEvent(new CustomEvent('response', responseEvent));\n } catch (error) {\n tryBtnEl.disabled = false;\n this.responseMessage = `${error.message} (Check the browser network tab for more information.)`;\n this.responseStatus = 'error';\n const responseEvent = {\n bubbles: true,\n composed: true,\n detail: {\n explorerLocation: this.elementId,\n error,\n request: fetchRequest,\n },\n };\n document.dispatchEvent(new CustomEvent('after-try', responseEvent));\n document.dispatchEvent(new CustomEvent('response', responseEvent));\n }\n this.requestUpdate();\n }\n\n onAddRemoveFileInput(e, pname) {\n if (e.target.tagName.toLowerCase() !== 'button') {\n return;\n }\n\n if (e.target.classList.contains('file-input-remove-btn')) {\n // Remove File Input Set\n const el = e.target.closest('.input-set');\n el.remove();\n return;\n }\n const el = e.target.closest('.file-input-container');\n\n // Add File Input Set\n\n // Container\n const newInputContainerEl = document.createElement('div');\n newInputContainerEl.setAttribute('class', 'input-set row');\n\n // File Input\n const newInputEl = document.createElement('input');\n newInputEl.type = 'file';\n newInputEl.setAttribute('class', 'file-input');\n newInputEl.setAttribute('data-pname', pname);\n newInputEl.setAttribute('data-ptype', 'form-input');\n newInputEl.setAttribute('data-array', 'false');\n newInputEl.setAttribute('data-file-array', 'true');\n\n // Remover Button\n const newRemoveBtnEl = document.createElement('button');\n newRemoveBtnEl.setAttribute('class', 'file-input-remove-btn');\n newRemoveBtnEl.innerHTML = '✕';\n\n newInputContainerEl.appendChild(newInputEl);\n newInputContainerEl.appendChild(newRemoveBtnEl);\n el.insertBefore(newInputContainerEl, e.target);\n // el.appendChild(newInputContainerEl);\n this.computeCurlSyntax();\n }\n\n downloadResponseBlob() {\n if (this.responseBlobUrl) {\n const a = document.createElement('a');\n document.body.appendChild(a);\n a.style = 'display: none';\n a.href = this.responseBlobUrl;\n a.download = this.respContentDisposition;\n a.click();\n a.remove();\n }\n }\n\n viewResponseBlob() {\n if (this.responseBlobUrl) {\n const a = document.createElement('a');\n document.body.appendChild(a);\n a.style = 'display: none';\n a.href = this.responseBlobUrl;\n a.target = '_blank';\n a.click();\n a.remove();\n }\n }\n\n clearResponseData() {\n this.responseUrl = '';\n this.responseHeaders = '';\n this.responseText = '';\n this.responseStatus = '';\n this.responseMessage = '';\n this.responseElapsedMs = 0;\n this.responseIsBlob = false;\n this.responseBlobType = '';\n this.respContentDisposition = '';\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n }\n\n requestParamFunction(event) {\n if (event.key === 'Enter') {\n this.onTryClick();\n event.preventDefault();\n }\n }\n\n disconnectedCallback() {\n // Cleanup ObjectURL forthe blob data if this component created one\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n super.disconnectedCallback();\n }\n}\n\n// Register the element with the browser\nif (!customElements.get('openapi-explorer')) {\n customElements.define('api-request', ApiRequest);\n}\n"],"names":[],"sourceRoot":""}
1	+ {"version":3,"file":"openapi-explorer.min.js","mappings":";;AA8BA;AC+jBA;AAxCA;AA+DA","sources":["webpack://openapi-explorer/./src/templates/code-samples-template.js","webpack://openapi-explorer/./src/components/api-request.js"],"sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport Prism from 'prismjs';\nimport { copyToClipboard } from '../utils/common-utils.js';\nimport { getI18nText } from '../languages/index.js';\n\n/* eslint-disable indent /\nexport default function codeSamplesTemplate(xCodeSamples) {\n return html`\n <section class=\"table-title top-gap\"> CODE SAMPLES </div>\n <div class=\"tab-panel col\"\n @click=\"${\n (e) => {\n if (!e.target.classList.contains('tab-btn')) { return; }\n const clickedTab = e.target.dataset.tab;\n\n const tabButtons = [...e.currentTarget.querySelectorAll('.tab-btn')];\n const tabContents = [...e.currentTarget.querySelectorAll('.tab-content')];\n tabButtons.forEach((tabBtnEl) => tabBtnEl.classList[tabBtnEl.dataset.tab === clickedTab ? 'add' : 'remove']('active'));\n tabContents.forEach((tabBodyEl) => { tabBodyEl.style.display = (tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none'); });\n }\n }\">\n <div class=\"tab-buttons row\" style=\"width:100; overflow\">\n ${xCodeSamples.map((v, i) => html`<button class=\"tab-btn ${i === 0 ? 'active' : ''}\" data-tab = '${v.lang}${i}'> ${v.label \|\| v.lang} </button>`)}\n </div>\n ${xCodeSamples.map((v, i) => {\n const paddingToRemove = Math.min(...v.source.split('\\n').slice(1).map(l => l.match(/^(\\s+).$/)?.[1].length).filter(l => typeof l !== 'undefined'));\n const sanitizedSource = v.source.split('\\n').map(s => s.substring(0, paddingToRemove).match(/^\\s+$/) ? s.substring(paddingToRemove) : s);\n const fullSource = sanitizedSource.join('\\n');\n return html`\n <div class=\"tab-content m-markdown code-sample-wrapper\" style= \"display:${i === 0 ? 'block' : 'none'}\" data-tab = '${v.lang}${i}'>\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(v.source, e); }}'>${getI18nText('operations.copy')}</button>\n <pre><code>${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(fullSource, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : fullSource}\n </code></pre>\n </div>`;\n })\n }\n </section>`;\n}\n/* eslint-enable indent /\n","import { LitElement, html } from 'lit';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport mimeTypeResolver from './mime-types.js';\n\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport formatXml from 'xml-but-prettier';\n\nimport { copyToClipboard } from '../utils/common-utils.js';\nimport { getI18nText } from '../languages/index.js';\nimport { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';\nimport './json-tree.js';\nimport './schema-tree.js';\nimport getRequestFormTable from './request-form-table.js';\nimport './tag-input.js';\n\nconst textFileRegex = RegExp('^font/\|tar$\|zip$\|7z$\|rtf$\|msword$\|excel$\|/pdf$\|/octet-stream$\|^application/vnd.');\nconst mediaFileRegex = RegExp('^audio/\|^image/\|^video/');\n\nexport default class ApiRequest extends LitElement {\n createRenderRoot() { return this; }\n\n constructor() {\n super();\n this.duplicatedRowsByKey = {};\n this.storedParamValues = {};\n this.responseMessage = '';\n this.responseStatus = '';\n this.responseHeaders = '';\n this.responseText = '';\n this.responseUrl = '';\n this.responseElapsedMs = 0;\n this.curlSyntax = '';\n this.activeResponseTab = 'curl'; // allowed values: response, headers, curl\n this.selectedRequestBodyType = '';\n this.selectedRequestBodyExample = '';\n }\n\n static get properties() {\n return {\n serverUrl: { type: String, attribute: 'server-url' },\n servers: { type: Array },\n method: { type: String },\n path: { type: String },\n elementId: { type: String, attribute: 'element-id' },\n parameters: { type: Array },\n request_body: { type: Object },\n api_keys: { type: Array },\n parser: { type: Object },\n accept: { type: String },\n callback: { type: String },\n responseMessage: { type: String, attribute: false },\n responseText: { type: String, attribute: false },\n responseHeaders: { type: String, attribute: false },\n responseStatus: { type: String, attribute: false },\n responseUrl: { type: String, attribute: false },\n responseElapsedMs: { type: Number, attribute: false },\n fillRequestWithDefault: { type: String, attribute: 'fill-defaults' },\n includeNulls: { type: Boolean, attribute: 'display-nulls', converter(value) { return value === 'true'; } },\n allowTry: { type: String, attribute: 'enable-console' },\n renderStyle: { type: String, attribute: 'render-style' },\n schemaStyle: { type: String, attribute: 'schema-style' },\n activeSchemaTab: { type: String, attribute: 'active-schema-tab' },\n schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },\n fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n // properties for internal tracking\n duplicatedRowsByKey: { type: Object }, // Tracking duplicated rows in form table\n activeResponseTab: { type: String }, // internal tracking of response-tab not exposed as a attribute\n selectedRequestBodyType: { type: String, attribute: 'selected-request-body-type' }, // internal tracking of selected request-body type\n selectedRequestBodyExample: { type: String, attribute: 'selected-request-body-example' }, // internal tracking of selected request-body example\n };\n }\n\n render() {\n const id = this.elementId \|\| `${this.method}-${this.path}`;\n return keyed(id, html`\n <div id=\"api-request-${id}\"\n class=\"api-request col regular-font request-panel ${(this.renderStyle === 'focused' \|\| this.callback === 'true') ? 'focused-mode' : 'view-mode'}\">\n <div class=\" ${this.callback === 'true' ? 'tiny-title' : 'req-res-title'} \"> \n ${this.callback === 'true' ? 'CALLBACK REQUEST' : getI18nText('operations.request')}\n </div>\n <div>\n ${this.inputParametersTemplate('path')}\n ${this.inputParametersTemplate('query')}\n ${this.requestBodyTemplate()}\n ${this.inputParametersTemplate('header')}\n ${this.inputParametersTemplate('cookie')}\n ${this.allowTry === 'false' ? '' : html`${this.apiCallTemplate()}`}\n </div>\n </div>\n `);\n }\n\n updated(changedProperties) {\n // In focused mode after rendering the request component, update the text-areas(which contains examples) using the original values from hidden textareas.\n // This is done coz, user may update the dom by editing the textarea's and once the DOM is updated externally change detection wont happen, therefore update the values manually\n if (this.renderStyle !== 'focused') {\n return;\n }\n\n // dont update example as only tabs is switched\n if (changedProperties.size === 1 && changedProperties.has('activeSchemaTab')) {\n return;\n }\n\n const exampleTextAreaEls = [...this.querySelectorAll('textarea[data-ptype=\"form-data\"]')];\n exampleTextAreaEls.forEach((el) => {\n const origExampleEl = this.querySelector(`textarea[data-pname='hidden-${el.dataset.pname}']`);\n if (origExampleEl) {\n el.value = origExampleEl.value;\n }\n });\n }\n\n / eslint-disable indent /\n inputParametersTemplate(paramLocation) {\n const filteredParams = this.parameters ? this.parameters.filter((param) => param.in === paramLocation) : [];\n if (filteredParams.length === 0) {\n return '';\n }\n\n const title = {\n path: 'PATH PARAMETERS',\n query: 'QUERY-STRING PARAMETERS',\n header: 'REQUEST HEADERS',\n cookie: 'COOKIES'\n }[paramLocation];\n\n const tableRows = [];\n for (const param of filteredParams) {\n if (!param.schema) {\n continue;\n }\n const paramSchema = getTypeInfo(param.schema, { includeNulls: this.includeNulls });\n if (!paramSchema) {\n continue;\n }\n const defaultVal = Array.isArray(paramSchema.default) ? paramSchema.default : `${paramSchema.default}`;\n let paramStyle = 'form';\n let paramExplode = true;\n if (paramLocation === 'query') {\n if (param.style && 'form spaceDelimited pipeDelimited'.includes(param.style)) {\n paramStyle = param.style;\n }\n if (typeof param.explode === 'boolean') {\n paramExplode = param.explode;\n }\n }\n\n tableRows.push(html`\n <tr> \n <td colspan=\"1\" style=\"width:160px; min-width:50px; vertical-align: top\">\n <div class=\"param-name ${paramSchema.deprecated ? 'deprecated' : ''}\" style=\"margin-top: 1rem;\">\n ${param.name}${!paramSchema.deprecated && param.required ? html`<span style='color:var(--red);'></span>` : ''}\n </div>\n <div class=\"param-type\" style=\"margin-bottom: 1rem;\">\n ${paramSchema.type === 'array'\n ? `${paramSchema.arrayType}`\n : `${paramSchema.format ? paramSchema.format : paramSchema.type}`\n }${!paramSchema.deprecated && param.required ? html`<span style='opacity: 0;'></span>` : ''}\n </div>\n </td> \n <td colspan=\"2\" style=\"min-width:160px; vertical-align: top\">\n ${this.allowTry === 'true'\n ? paramSchema.type === 'array' && html`\n <div style=\" margin-top: 1rem; margin-bottom: 1rem;\"> \n <tag-input class=\"request-param\" \n style = \"width:100%;\" \n data-ptype = \"${paramLocation}\"\n data-pname = \"${param.name}\"\n data-default = \"${Array.isArray(defaultVal) ? defaultVal.join('~\|~') : defaultVal}\"\n data-param-serialize-style = \"${paramStyle}\"\n data-param-serialize-explode = \"${paramExplode}\"\n data-array = \"true\"\n placeholder=\"add-multiple ↩\"\n @change=\"${(e) => { this.storedParamValues[param.name] = e.detail.value; this.computeCurlSyntax(); }}\"\n .value = \"${this.storedParamValues[param.name] ?? (this.fillRequestWithDefault === 'true' && Array.isArray(defaultVal) ? defaultVal : defaultVal.split(','))}\"></tag-input>\n </div>`\n \|\| paramSchema.type === 'object' && html`\n <textarea\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n class = \"textarea small request-param\"\n part = \"textarea small textarea-param\"\n rows = 3\n data-ptype = \"${paramLocation}\"\n data-pname = \"${param.name}\"\n data-default = \"${defaultVal}\"\n data-param-serialize-style = \"${paramStyle}\"\n data-param-serialize-explode = \"${paramExplode}\"\n spellcheck = \"false\"\n placeholder=\"${paramSchema.example \|\| defaultVal \|\| ''}\"\n style = \"width:100%; margin-top: 1rem; margin-bottom: 1rem;\"\n .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"></textarea>`\n \|\| html`\n <input type=\"${paramSchema.format === 'password' ? 'password' : 'text'}\" spellcheck=\"false\" style=\"width:100%; margin-top: 1rem; margin-bottom: 1rem;\"\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n placeholder=\"${paramSchema.example \|\| defaultVal \|\| ''}\"\n class=\"request-param\"\n part=\"textbox textbox-param\"\n data-ptype=\"${paramLocation}\"\n data-pname=\"${param.name}\" \n data-default=\"${Array.isArray(defaultVal) ? defaultVal.join('~\|~') : defaultVal}\"\n data-array=\"false\"\n @keyup=\"${this.requestParamFunction}\"\n .value=\"${this.fillRequestWithDefault === 'true' ? defaultVal : ''}\"\n />`\n : ''}\n\n ${this.exampleListTemplate.call(this, param, paramSchema.type)}\n </td>\n ${this.renderStyle === 'focused'\n ? html`\n <td colspan=\"2\" style=\"vertical-align: top\">\n ${param.description\n ? html`\n <div class=\"param-description\" style=\"margin-top: 1rem;\">\n ${unsafeHTML(marked(param.description))}\n </div>`\n : ''\n }\n ${paramSchema.default \|\| paramSchema.s \|\| paramSchema.allowedValues \|\| paramSchema.pattern\n ? html`\n <div class=\"param-constraint\" style=\"margin-top: 1rem;\">\n ${paramSchema.constraints.length ? html`<span style=\"font-weight:bold\">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''}\n ${paramSchema.pattern ? html`\n <div class=\"tooltip tooltip-replace\" style=\"cursor: pointer; max-width: 100%; display: flex;\">\n <div style=\"white-space:nowrap; font-weight:bold; margin-right: 2px;\">Pattern: </div>\n <div style=\"white-space:nowrap; text-overflow:ellipsis; max-width:100%; overflow:hidden;\">${paramSchema.pattern}</div>\n <br>\n <div class=\"tooltip-text\" style=\"position: absolute; display:block;\">${paramSchema.pattern}</div>\n </div>\n ` : ''}\n ${paramSchema.allowedValues && paramSchema.allowedValues.split('┃').map((v, i) => html`\n ${i > 0 ? '\|' : html`<span style=\"font-weight:bold\">Allowed: </span>`}\n ${html`\n <a part=\"anchor anchor-param-constraint\" class = \"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n data-type=\"${paramSchema.type === 'array' ? 'array' : 'string'}\"\n data-enum=\"${v.trim()}\"\n @click=\"${(e) => {\n const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${param.name}\"]`);\n if (inputEl) {\n inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;\n }\n }}\"\n >\n ${v} \n </a>`\n }`)}\n </div>`\n : ''\n }\n </td> \n </tr>`\n : ''\n }\n `);\n }\n\n return html`\n <div class=\"table-title top-gap\">${title}${paramLocation === 'path' ? html`<span style='color:var(--red);'></span>` : ''}</div>\n <div style=\"display:block; overflow-x:auto; max-width:100%;\">\n <table role=\"presentation\" class=\"m-table\" style=\"width:100%; word-break:break-word;\">\n ${tableRows}\n </table>\n </div>`;\n }\n\n renderExample(example, paramType, paramName) {\n return html`\n <a\n part=\"anchor anchor-param-example\"\n class=\"${this.allowTry === 'true' ? '' : 'inactive-link'}\"\n data-example-type=\"${paramType === 'array' ? paramType : 'string'}\"\n data-example=\"${Array.isArray(example.exampleValue) ? example.exampleValue?.join('~\|~') : example.exampleValue}\"\n @click=\"${(e) => {\n const inputEl = e.target.closest('table').querySelector(`[data-pname=\"${paramName}\"]`);\n if (inputEl) {\n inputEl.value = paramType === 'array' ? (e.target.dataset.example.split('~\|~') \|\| []) : e.target.dataset.example;\n }\n }}\">${Array.isArray(example.exampleValue) ? example.exampleValue?.join(', ') : example.exampleValue}\n </a>\n `;\n }\n\n renderShortFormatExamples(examples, paramType, paramName) {\n return html`${examples.map((example, i) => html`\n ${i === 0 ? '' : '┃'}\n ${this.renderExample(example, paramType, paramName)}`)}`;\n }\n\n renderLongFormatExamples(exampleList, paramType, paramName) {\n return html`\n <ul style=\"margin-block-start: 0.25em;\">\n ${exampleList.map(example =>\n html`\n <li>\n ${this.renderExample(example, paramType, paramName)}\n ${example.exampleSummary?.length > 0 ? html`<span>(${example.exampleSummary})</span>` : ''}\n ${example.exampleDescription?.length > 0 ? html`<p>${unsafeHTML(marked(example.exampleDescription))}</p>` : ''}\n </li>`\n )}\n </ul>`;\n }\n\n /* eslint-disable indent /\n\n exampleListTemplate(param, paramType) {\n const paramName = param.name;\n const paramSchema = getTypeInfo(param.schema, { includeNulls: this.includeNulls });\n\n const examples = generateExample(\n param.examples \|\| param.example && { Example: { value: param.example } } \|\| paramSchema.examples \|\| paramSchema.example && { Example: { value: paramSchema.example } },\n null, param.schema, null, false, true, 'json', false);\n\n const someExampleWithSummaryOrDescription = examples.some((x) => x.exampleSummary?.length > 0 \|\| x.exampleDescription?.length > 0);\n if (!examples.length) {\n return '';\n }\n\n // Don't show an example if there is just one without a description because it is the same as the placeholder for the field\n if (examples.length === 1 && !someExampleWithSummaryOrDescription) {\n return '';\n }\n\n return html`<div style=\"min-width:50px; margin-bottom: 1rem;\">\n <span style=\"font-weight:bold\">Examples: </span>\n ${someExampleWithSummaryOrDescription\n ? this.renderLongFormatExamples(examples, paramType, paramName)\n : this.renderShortFormatExamples(examples, paramType, paramName)\n }\n </div>`;\n }\n\n resetRequestBodySelection() {\n this.selectedRequestBodyType = '';\n this.selectedRequestBodyExample = '';\n this.computeCurlSyntax();\n this.clearResponseData();\n }\n\n // Request-Body Event Handlers\n onSelectExample(e) {\n this.selectedRequestBodyExample = e.target.value;\n const exampleDropdownEl = e.target;\n window.setTimeout((selectEl) => {\n const exampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param');\n const userInputExampleTextareaEl = selectEl.closest('.example-panel').querySelector('.request-body-param-user-input');\n userInputExampleTextareaEl.value = exampleTextareaEl.value;\n this.computeCurlSyntax();\n }, 0, exampleDropdownEl);\n }\n\n onMimeTypeChange(e) {\n this.selectedRequestBodyType = e.target.value;\n const mimeDropdownEl = e.target;\n this.selectedRequestBodyExample = '';\n window.setTimeout((selectEl) => {\n const exampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param');\n if (exampleTextareaEl) {\n const userInputExampleTextareaEl = selectEl.closest('.request-body-container').querySelector('.request-body-param-user-input');\n userInputExampleTextareaEl.value = exampleTextareaEl.value;\n }\n this.computeCurlSyntax();\n }, 0, mimeDropdownEl);\n }\n\n requestBodyTemplate() {\n if (!this.request_body) {\n return '';\n }\n if (Object.keys(this.request_body).length === 0) {\n return '';\n }\n\n if (this.method === 'get' \|\| this.method === 'head') {\n return '';\n }\n\n // Variable to store partial HTMLs\n let reqBodyTypeSelectorHtml = '';\n let reqBodyFileInputHtml = '';\n let reqBodySchemaHtml = '';\n let reqBodyDefaultHtml = '';\n let bodyTabNameUseBody = true;\n\n const requestBodyTypes = [];\n const content = this.request_body.content;\n for (const mimeType in content) {\n requestBodyTypes.push({\n mimeType,\n schema: content[mimeType].schema,\n example: content[mimeType].example,\n examples: content[mimeType].examples,\n });\n }\n\n if (!content[this.selectedRequestBodyType]) {\n this.selectedRequestBodyType = requestBodyTypes[0]?.mimeType;\n }\n\n // MIME Type selector\n reqBodyTypeSelectorHtml = requestBodyTypes.length === 1\n ? ''\n : html`\n <select aria-label=\"mime type\" style=\"min-width:100px; max-width:100%; margin-bottom:-1px;\" @change = '${(e) => this.onMimeTypeChange(e)}'>\n ${requestBodyTypes.map((reqBody) => html`\n <option value = '${reqBody.mimeType}' ?selected = '${reqBody.mimeType === this.selectedRequestBodyType}'>\n ${reqBody.mimeType}\n </option> `)\n }\n </select>\n `;\n\n // For Loop - Main\n const reqBody = requestBodyTypes.find(req => req.mimeType === this.selectedRequestBodyType);\n // Generate Example\n if (this.selectedRequestBodyType.includes('json') \|\| this.selectedRequestBodyType.includes('xml') \|\| this.selectedRequestBodyType.includes('text')) {\n const reqBodyExamples = generateExample(\n reqBody.examples ? reqBody.examples : '',\n reqBody.example ? reqBody.example : '',\n reqBody.schema,\n reqBody.mimeType,\n false,\n true,\n 'text',\n true\n );\n\n if (!this.selectedRequestBodyExample) {\n this.selectedRequestBodyExample = (reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '');\n }\n const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) \|\| reqBodyExamples[0];\n reqBodyDefaultHtml = html`\n <div class = 'example-panel border-top pad-top-8'>\n ${reqBodyExamples.length === 1\n ? ''\n : html`\n <select aria-label='request body example' style=\"min-width:100px; max-width:100%; margin-bottom:-1px;\" @change='${(e) => this.onSelectExample(e)}'>\n ${reqBodyExamples.map((v) => html`<option value=\"${v.exampleId}\" ?selected=${v.exampleId === this.selectedRequestBodyExample}> \n ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} \n </option>`)}\n </select>`\n }\n ${displayedBodyExample ? html`\n <div class=\"example\" data-default = '${displayedBodyExample.exampleId}'>\n ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style=\"padding: 4px 0\"> ${displayedBodyExample.exampleSummary} </div>` : ''}\n ${displayedBodyExample.exampleDescription ? html`<div class=\"m-markdown-small\" style=\"padding: 4px 0\"> ${unsafeHTML(marked(displayedBodyExample.exampleDescription \|\| ''))} </div>` : ''}\n <!-- this textarea is for user to edit the example -->\n <slot name=\"${this.elementId}--request-body\">\n <textarea\n @input=\"${() => { this.computeCurlSyntax(); }}\"\n class = \"textarea request-body-param-user-input\"\n part = \"textarea textarea-param\"\n spellcheck = \"false\"\n data-ptype = \"${reqBody.mimeType}\" \n data-default = \"${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}\"\n data-default-format = \"${displayedBodyExample.exampleFormat}\"\n style=\"width:100%; resize:vertical;\"\n .value=\"${this.fillRequestWithDefault === 'true' ? (displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)) : ''}\"\n ></textarea>\n </slot>\n\n <!-- This textarea(hidden) is to store the original example value, this will remain unchanged when users switches from one example to another, its is used to populate the editable textarea -->\n <textarea\n class = \"textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}\" \n spellcheck = \"false\"\n data-ptype = \"${reqBody.mimeType}\" \n style=\"width:100%; resize:vertical; display:none\"\n .value=\"${(displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8))}\"\n ></textarea>\n </div>`\n : ''}\n\n </div>\n `;\n } else if (this.selectedRequestBodyType.includes('form-urlencoded') \|\| this.selectedRequestBodyType.includes('form-data')) {\n bodyTabNameUseBody = false;\n const schemaAsObj = schemaInObjectNotation(reqBody.schema, { includeNulls: this.includeNulls });\n reqBodyDefaultHtml = getRequestFormTable.call(this, schemaAsObj, this.selectedRequestBodyType);\n } else if (mediaFileRegex.test(this.selectedRequestBodyType) \|\| textFileRegex.test(this.selectedRequestBodyType)) {\n reqBodyFileInputHtml = html`\n <div class = \"small-font-size bold-text row\">\n <input type=\"file\" part=\"file-input\" style=\"max-width:100%\" class=\"request-body-param-file\" data-ptype=\"${reqBody.mimeType}\" spellcheck=\"false\" />\n </div> \n `;\n }\n\n // Generate Schema\n if (reqBody.mimeType.includes('json') \|\| reqBody.mimeType.includes('xml') \|\| reqBody.mimeType.includes('text') \|\| reqBody.mimeType.includes('form-')) {\n const schemaAsObj = schemaInObjectNotation(reqBody.schema, { includeNulls: this.includeNulls });\n if (this.schemaStyle === 'table') {\n reqBodySchemaHtml = html`\n ${reqBodySchemaHtml}\n <schema-table\n class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n .data = '${schemaAsObj}'\n schema-expand-level = \"${this.schemaExpandLevel}\"\n schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n schema-hide-write-only = false\n > </schema-table>\n `;\n } else {\n reqBodySchemaHtml = html`\n ${reqBodySchemaHtml}\n <schema-tree\n class = '${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)} pad-top-8'\n style = 'display: ${this.selectedRequestBodyType === reqBody.mimeType ? 'block' : 'none'};'\n .data = '${schemaAsObj}'\n schema-expand-level = \"${this.schemaExpandLevel}\"\n schema-hide-read-only = \"${this.schemaHideReadOnly.includes(this.method)}\"\n schema-hide-write-only = false\n > </schema-tree>\n `;\n }\n }\n\n return html`\n <div class='request-body-container' data-selected-request-body-type=\"${this.selectedRequestBodyType}\">\n <div class=\"table-title top-gap row\">\n ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class=\"mono-font\" style='color:var(--red)'></span>` : ''} \n <span style = \"font-weight:normal; margin-left:5px\"> ${this.selectedRequestBodyType}</span>\n <span style=\"flex:1\"></span>\n ${reqBodyTypeSelectorHtml}\n </div>\n ${this.request_body.description ? html`<div class=\"m-markdown\" style=\"margin-bottom:12px\">${unsafeHTML(marked(this.request_body.description))}</div>` : ''}\n \n ${reqBodySchemaHtml \|\| reqBodyDefaultHtml\n ? html`\n <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n <div class=\"tab-buttons row\" @click=\"${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}\">\n <button class=\"tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}\" data-tab=\"model\" >${getI18nText('operations.model')}</button>\n <button class=\"tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}\" data-tab=\"body\">${bodyTabNameUseBody ? getI18nText('operations.body') : getI18nText('operations.form')}</button>\n </div>\n ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'block' : 'none'}\"> ${reqBodySchemaHtml}</div>`}\n ${html`<div class=\"tab-content col\" style=\"display: ${this.activeSchemaTab === 'model' ? 'none' : 'block'}\"> ${reqBodyDefaultHtml}</div>`}\n </div>`\n : html`${reqBodyFileInputHtml}`\n }\n </div> \n `;\n }\n\n // formDataTemplate(schema, mimeType, exampleValue = '') {\n // return html`\n // <textarea\n // class = \"textarea dynamic-form-param ${mimeType}\"\n // part = \"textarea textarea-param\"\n // spellcheck = \"false\"\n // data-pname=\"dynamic-form\"\n // data-ptype=\"${mimeType}\"\n // style=\"width:100%\"\n // >${exampleValue}</textarea>\n // ${schema.description ? html`<span class=\"m-markdown-small\">${unsafeHTML(marked(schema.description))}</span>` : ''}\n // `;\n // }\n\n apiResponseTabTemplate() {\n const curlSyntax = this.curlSyntax \|\| this.computeCurlSyntax() \|\| '';\n const hasResponse = this.responseMessage !== '';\n const responseFormat = this.responseHeaders.includes('json') ? 'json' : (this.responseHeaders.includes('html') \|\| this.responseHeaders.includes('xml')) ? 'html' : '';\n return html`\n <div class=\"row\" style=\"font-size:var(--font-size-small); margin:5px 0\">\n ${this.responseMessage\n ? html`<div class=\"response-message ${this.responseStatus}\">Response Status: ${this.responseMessage}\n ${this.responseElapsedMs ? html`<span><br>Execution Time: ${this.responseElapsedMs}ms</span>` : ''}\n </div>` : ''\n }\n <div style=\"flex:1\"></div>\n ${!hasResponse ? '' : html`<button class=\"m-btn\" part=\"btn btn-outline\" @click=\"${this.clearResponseData}\">CLEAR RESPONSE</button>`}\n </div>\n <div class=\"tab-panel col\" style=\"border-width:0 0 1px 0;\">\n <div id=\"tab_buttons\" class=\"tab-buttons row\" @click=\"${(e) => {\n if (e.target.classList.contains('tab-btn') === false) { return; }\n this.activeResponseTab = e.target.dataset.tab;\n }}\">\n <br>\n <div style=\"width: 100%\">\n ${!hasResponse ? '' : html`\n <button class=\"tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}\" data-tab = 'response'>${getI18nText('operations.response')}</button>\n <button class=\"tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}\" data-tab = 'headers'>${getI18nText('operations.response-headers')}</button>`}\n <button class=\"tab-btn ${!hasResponse \|\| this.activeResponseTab === 'curl' ? 'active' : ''}\" data-tab = 'curl'>FULL REQUEST</button>\n </div>\n </div>\n ${this.responseIsBlob\n ? html`\n <div class=\"tab-content col\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\">\n ${this.responseBlobType === 'image'\n ? html`<img style=\"max-height:var(--resp-area-height, 300px); object-fit:contain;\" class=\"mar-top-8\" src=\"${this.responseBlobUrl}\"></img>`\n : ''\n }\n <div style=\"display: flex; justify-content: center\">\n <div> \n <button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.downloadResponseBlob}\" part=\"btn btn-outline\">DOWNLOAD</button>\n ${this.responseBlobType === 'view' \|\| this.responseBlobType === 'image'\n ? html`<button class=\"m-btn thin-border mar-top-8\" style=\"width:135px\" @click=\"${this.viewResponseBlob}\" part=\"btn btn-outline\">VIEW (NEW TAB)</button>`\n : ''\n }\n </div>\n </div>\n </div>`\n : html`\n <div class=\"tab-content col m-markdown\" style=\"flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};\" >\n ${this.responseText\n ? html`<button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseText, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>`\n : ''\n }\n <pre style=\"min-height: 60px\" @copy='${() => { copyToClipboard(window.getSelection().toString()); }}'>${responseFormat\n ? html`<code>${unsafeHTML(Prism.highlight(this.responseText, Prism.languages[responseFormat], responseFormat))}</code>`\n : `${this.responseText}`\n }\n </pre>\n </div>`\n }\n <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'};\" >\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(this.responseHeaders, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>\n <pre><code>${unsafeHTML(Prism.highlight(this.responseHeaders, Prism.languages.css, 'css'))}</code></pre>\n </div>\n <div class=\"tab-content col m-markdown\" style=\"flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'};\">\n <button class=\"m-btn outline-primary toolbar-copy-btn\" @click='${(e) => { copyToClipboard(curlSyntax, e); }}' part=\"btn btn-fill\">${getI18nText('operations.copy')}</button>\n <pre class=\"fs-exclude\" data-hj-suppress data-sl=\"mask\">\n <code>${unsafeHTML(Prism.highlight(curlSyntax.trim(), Prism.languages.shell, 'shell'))}</code>\n </pre>\n </div>\n </div>`;\n }\n\n apiCallTemplate() {\n return html`\n <div style=\"display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);\">\n ${\n this.parameters.length > 0 \|\| this.request_body\n ? html`\n <button class=\"m-btn thin-border\" part=\"btn btn-outline\" style=\"margin-right:5px;\" @click=\"${this.onClearRequestData}\">\n ${getI18nText('operations.clear')}\n </button>`\n : ''\n }\n <button class=\"m-btn primary btn-execute thin-border\" part=\"btn btn-fill btn-try\" @click=\"${this.onTryClick}\">${getI18nText('operations.execute')}</button>\n </div>\n ${this.apiResponseTabTemplate()}\n `;\n }\n /* eslint-enable indent /\n\n onClearRequestData(e) {\n const requestPanelEl = e.target.closest('.request-panel');\n const requestPanelInputEls = [...requestPanelEl.querySelectorAll('input, tag-input, textarea:not(.is-hidden)')];\n requestPanelInputEls.forEach((el) => { el.value = ''; });\n\n const event = { bubbles: true, composed: true, detail: { explorerLocation: this.elementId, operation: { method: this.method, path: this.path }, type: 'RequestCleared' } };\n this.dispatchEvent(new CustomEvent('event', event));\n this.computeCurlSyntax();\n }\n\n recomputeFetchOptions() {\n const closestRespContainer = this.closest('.expanded-req-resp-container, .req-resp-container');\n const respEl = closestRespContainer && closestRespContainer.getElementsByTagName('api-response')[0];\n const acceptHeader = respEl?.selectedMimeType;\n const requestPanelEl = this.closest('.request-panel');\n const pathParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='path']\")];\n const queryParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query']\")];\n\n const queryParamObjTypeEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='query-object']\")];\n const headerParamEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='header']\")];\n const requestBodyContainerEl = requestPanelEl.querySelector('.request-body-container');\n\n let pathUrl = `${this.serverUrl.replace(/\\/$/, '')}${this.path.replaceAll(' ', '')}`;\n\n // Generate URL using Path Params\n pathParamEls.map((el) => {\n pathUrl = pathUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value) \|\| '-');\n });\n\n // Handle relative serverUrls\n if (!pathUrl.startsWith('http')) {\n const newUrl = new URL(pathUrl, window.location.href);\n pathUrl = newUrl.toString();\n }\n\n const fetchUrl = new URL(pathUrl);\n\n const fetchOptions = {\n method: this.method.toUpperCase(),\n headers: new Headers()\n };\n\n // Query Params\n queryParamEls.forEach((el) => {\n if (!el.dataset.array \|\| el.dataset.array === 'false') {\n if (el.value !== '') {\n fetchUrl.searchParams.append(el.dataset.pname, el.value);\n }\n } else {\n const paramSerializeStyle = el.dataset.paramSerializeStyle;\n const paramSerializeExplode = el.dataset.paramSerializeExplode;\n const values = Array.isArray(el.value) ? el.value.filter((v) => v !== '') : [];\n\n if (values.length > 0) {\n if (paramSerializeStyle === 'spaceDelimited') {\n fetchUrl.searchParams.append(el.dataset.pname, values.join(' ').replace(/^\\s\|\\s$/g, ''));\n } else if (paramSerializeStyle === 'pipeDelimited') {\n fetchUrl.searchParams.append(el.dataset.pname, values.join('\|').replace(/^\\\|\|\\\|$/g, ''));\n } else {\n if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n values.forEach((v) => { fetchUrl.searchParams.append(el.dataset.pname, v); });\n } else {\n fetchUrl.searchParams.append(el.dataset.pname, values.join(',').replace(/^,\|,$/g, ''));\n }\n }\n }\n }\n });\n\n // Query Params (Dynamic - create from JSON)\n queryParamObjTypeEls.map((el) => {\n try {\n let queryParamObj = {};\n const paramSerializeStyle = el.dataset.paramSerializeStyle;\n const paramSerializeExplode = el.dataset.paramSerializeExplode;\n queryParamObj = Object.assign(queryParamObj, JSON.parse(el.value.replace(/\\s+/g, ' ')));\n for (const key in queryParamObj) {\n if (typeof queryParamObj[key] === 'object') {\n if (Array.isArray(queryParamObj[key])) {\n if (paramSerializeStyle === 'spaceDelimited') {\n fetchUrl.searchParams.append(key, queryParamObj[key].join(' '));\n } else if (paramSerializeStyle === 'pipeDelimited') {\n fetchUrl.searchParams.append(key, queryParamObj[key].join('\|'));\n } else {\n if (paramSerializeExplode === 'true') { // eslint-disable-line no-lonely-if\n queryParamObj[key].forEach((v) => {\n fetchUrl.searchParams.append(key, v);\n });\n } else {\n fetchUrl.searchParams.append(key, queryParamObj[key]);\n }\n }\n }\n } else {\n fetchUrl.searchParams.append(key, queryParamObj[key]);\n }\n }\n } catch (err) {\n console.log('OpenAPI Explorer: unable to parse %s into object', el.value); // eslint-disable-line no-console\n }\n });\n\n // Add Authentication api keys if provided\n this.api_keys.filter((v) => v.finalKeyValue).forEach((v) => {\n if (v.in === 'query') {\n fetchUrl.searchParams.append(v.name, v.finalKeyValue);\n return;\n }\n\n // Otherwise put it in the header\n fetchOptions.headers.append(v.name, v.finalKeyValue);\n });\n\n if (acceptHeader) {\n // Uses the acceptHeader from Response panel\n fetchOptions.headers.append('Accept', acceptHeader);\n } else if (this.accept) {\n fetchOptions.headers.append('Accept', this.accept);\n }\n\n // Add Header Params\n headerParamEls.map((el) => {\n if (el.value) {\n fetchOptions.headers.append(el.dataset.pname, el.value);\n }\n });\n\n // Request Body Params\n\n // url-encoded Form Params (dynamic) - Parse JSON and generate Params\n const formUrlDynamicTextAreaEl = requestPanelEl.querySelector(\"[data-ptype='dynamic-form']\");\n // url-encoded Form Params (regular)\n const rawFormInputEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='form-input']\")];\n\n const patternPropertyKeyEls = [...requestPanelEl.querySelectorAll(\"[data-ptype='pattern-property-key']\")];\n const patternPropertyInputEls = rawFormInputEls.filter(el => isPatternProperty(el.dataset.pname));\n const formInputEls = rawFormInputEls.filter(el => !isPatternProperty(el.dataset.pname));\n\n let curlData = '';\n let curlForm = '';\n if (requestBodyContainerEl) {\n const requestBodyType = requestBodyContainerEl.dataset.selectedRequestBodyType;\n\n if (requestBodyType.includes('form-urlencoded')) {\n if (formUrlDynamicTextAreaEl) {\n const val = formUrlDynamicTextAreaEl.value;\n const formUrlDynParams = new URLSearchParams();\n let proceed = true;\n let tmpObj;\n if (val) {\n try {\n tmpObj = JSON.parse(val);\n } catch (err) {\n proceed = false;\n console.warn('OpenAPI Explorer: Invalid JSON provided', err); // eslint-disable-line no-console\n }\n } else {\n proceed = false;\n }\n if (proceed) {\n for (const prop in tmpObj) {\n formUrlDynParams.append(prop, JSON.stringify(tmpObj[prop]));\n }\n fetchOptions.body = formUrlDynParams;\n curlData = ` \\\\\\n -d ${formUrlDynParams.toString()}`;\n }\n } else {\n const formUrlParams = new URLSearchParams();\n patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {\n const keyName = patternPropertyKeyEls[counter]?.value \|\| el.dataset.pname;\n if (el.type === 'file') { return; }\n if (el.dataset.array === 'false') {\n if (el.value) {\n formUrlParams.append(keyName, el.value);\n }\n } else {\n const vals = (el.value && Array.isArray(el.value)) ? el.value.join(',') : '';\n formUrlParams.append(keyName, vals);\n }\n });\n fetchOptions.body = formUrlParams;\n curlData = ` \\\\\\n -d ${formUrlParams.toString()}`;\n }\n } else if (requestBodyType.includes('form-data')) {\n const formDataParams = new FormData();\n patternPropertyInputEls.concat(formInputEls).forEach((el, counter) => {\n const keyName = patternPropertyKeyEls[counter]?.value \|\| el.dataset.pname;\n if (el.dataset.array === 'false') {\n if (el.type === 'file' && el.files[0]) {\n formDataParams.append(keyName, el.files[0], el.files[0].name);\n curlForm += ` \\\\\\n -F \"${keyName}=@${el.files[0].name}\"`;\n } else if (el.value) {\n formDataParams.append(keyName, el.value);\n curlForm += ` \\\\\\n -F \"${keyName}=${el.value}\"`;\n }\n } else if (el.value && Array.isArray(el.value)) {\n el.value.forEach((v) => {\n curlForm += ` \\\\\\n -F \"${keyName}[]=${v}\"`;\n });\n formDataParams.append(keyName, el.value.join(','));\n }\n });\n fetchOptions.body = formDataParams;\n } else if (mediaFileRegex.test(requestBodyType) \|\| textFileRegex.test(requestBodyType)) {\n const bodyParamFileEl = requestPanelEl.querySelector('.request-body-param-file');\n if (bodyParamFileEl && bodyParamFileEl.files[0]) {\n fetchOptions.body = bodyParamFileEl.files[0];\n curlData = ` \\\\\\n --data-binary @${bodyParamFileEl.files[0].name}`;\n }\n } else if (requestBodyType.includes('json') \|\| requestBodyType.includes('xml') \|\| requestBodyType.includes('text')) {\n const exampleTextAreaEl = requestPanelEl.querySelector('.request-body-param-user-input');\n if (exampleTextAreaEl && exampleTextAreaEl.value) {\n fetchOptions.body = exampleTextAreaEl.value;\n if (requestBodyType.includes('json')) {\n try {\n curlData = ` \\\\\\n -d '${JSON.stringify(JSON.parse(exampleTextAreaEl.value))}'`;\n } catch (err) { / Ignore unparseable JSON / }\n }\n\n if (!curlData) {\n // Save single quotes wrapped => 'text' => `\"'\"text\"'\"`\n curlData = ` \\\\\\n -d '${exampleTextAreaEl.value.replace(/'/g, '\\'\"\\'\"\\'')}'`;\n }\n }\n }\n // Common for all request-body\n if (!requestBodyType.includes('form-data')) {\n // For multipart/form-data don't set the content-type to allow creation of browser generated part boundaries\n fetchOptions.headers.append('Content-Type', requestBodyType);\n }\n }\n\n if (this.fetchCredentials) {\n fetchOptions.credentials = this.fetchCredentials;\n }\n\n return {\n fetchOptions,\n fetchUrl,\n curlParts: {\n data: curlData,\n form: curlForm\n }\n };\n }\n\n computeCurlSyntax(headerOverride) {\n const { fetchOptions, fetchUrl, curlParts } = this.recomputeFetchOptions();\n const curl = `curl -X ${this.method.toUpperCase()} \"${fetchUrl.toString()}\"`;\n const headers = headerOverride ?? fetchOptions.headers;\n const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\\\\n -H \"${key}: ${value}\"`, '');\n this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;\n this.requestUpdate();\n }\n\n // onExecuteButtonClicked\n async onTryClick() {\n const tryBtnEl = this.querySelectorAll('.btn-execute')[0];\n \n const { fetchOptions, fetchUrl } = this.recomputeFetchOptions();\n\n this.responseIsBlob = false;\n this.respContentDisposition = '';\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n\n // Options is legacy usage, documentation has been updated to reference properties of the fetch option directly, but older usages may still be using options\n const fetchRequest = { explorerLocation: this.elementId, url: fetchUrl.toString(), options: fetchOptions, ...fetchOptions };\n const event = {\n bubbles: true,\n composed: true,\n detail: {\n request: fetchRequest,\n },\n };\n\n this.dispatchEvent(new CustomEvent('before-try', event));\n this.dispatchEvent(new CustomEvent('request', event));\n const newFetchOptions = {\n method: fetchRequest.method \|\| fetchOptions.method,\n headers: fetchRequest.headers \|\| fetchOptions.headers,\n credentials: fetchRequest.credentials \|\| fetchOptions.credentials,\n body: fetchRequest.body \|\| fetchOptions.body\n };\n const fetchRequestObject = new Request(fetchRequest.url, newFetchOptions);\n\n this.computeCurlSyntax(newFetchOptions.headers);\n\n let fetchResponse;\n try {\n let respBlob;\n let respJson;\n let respText;\n tryBtnEl.disabled = true;\n const fetchStart = new Date();\n\n this.responseStatus = '';\n this.responseMessage = '';\n this.responseUrl = '';\n this.responseHeaders = '';\n this.responseText = '⌛';\n this.activeResponseTab = 'response';\n\n this.requestUpdate();\n const awaiter = new Promise(resolve => setTimeout(resolve, 200));\n fetchResponse = await fetch(fetchRequestObject);\n this.responseElapsedMs = new Date() - fetchStart;\n await awaiter;\n\n tryBtnEl.disabled = false;\n this.responseStatus = fetchResponse.ok ? 'success' : 'error';\n this.responseMessage = fetchResponse.statusText ? `${fetchResponse.statusText} (${fetchResponse.status})` : fetchResponse.status;\n this.responseUrl = fetchResponse.url;\n this.responseHeaders = '';\n const headers = {};\n fetchResponse.headers.forEach((hdrVal, hdr) => {\n this.responseHeaders = `${this.responseHeaders}${hdr.trim()}: ${hdrVal}\\n`;\n headers[hdr.trim()] = hdrVal && hdrVal.trim();\n });\n const contentType = fetchResponse.headers.get('content-type');\n const respEmpty = (await fetchResponse.clone().text()).length === 0;\n if (respEmpty) {\n this.responseText = '';\n } else if (contentType) {\n if (contentType.includes('json')) {\n if ((/charset=[^\"']+/).test(contentType)) {\n const encoding = contentType.split('charset=')[1];\n const buffer = await fetchResponse.arrayBuffer();\n try {\n respText = new TextDecoder(encoding).decode(buffer);\n } catch (_) {\n respText = new TextDecoder('utf-8').decode(buffer);\n }\n try {\n this.responseText = JSON.stringify(JSON.parse(respText), null, 8);\n } catch (_) {\n this.responseText = respText;\n }\n } else {\n respJson = await fetchResponse.json();\n this.responseText = JSON.stringify(respJson, null, 8);\n }\n } else if (textFileRegex.test(contentType)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'download';\n } else if (contentType.match(/^image/)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'image';\n } else if (mediaFileRegex.test(contentType)) {\n this.responseIsBlob = true;\n this.responseBlobType = 'view';\n } else {\n respText = await fetchResponse.text();\n if (contentType.includes('xml')) {\n this.responseText = formatXml(respText, { textNodesOnSameLine: true, indentor: ' ' });\n } else {\n this.responseText = respText;\n }\n }\n if (this.responseIsBlob) {\n const contentDisposition = fetchResponse.headers.get('content-disposition');\n const filenameRegex = /filename[^;=\\n]=((['\"]).?\\2\|[^;\\n])/;\n const filename = filenameRegex.exec(contentDisposition);\n this.respContentDisposition = filename && filename[1] && filename[1].replace(/['\"]/g, '') \|\| `download.${mimeTypeResolver(contentType) \|\| 'file'}`;\n respBlob = await fetchResponse.blob();\n this.responseBlobUrl = URL.createObjectURL(respBlob);\n }\n } else {\n respText = await fetchResponse.text();\n this.responseText = respText;\n }\n const responseEvent = {\n bubbles: true,\n composed: true,\n detail: {\n explorerLocation: this.elementId,\n request: fetchRequest,\n response: {\n headers,\n body: respJson \|\| respText \|\| respBlob \|\| fetchResponse.body,\n status: fetchResponse.status,\n },\n },\n };\n this.dispatchEvent(new CustomEvent('after-try', responseEvent));\n this.dispatchEvent(new CustomEvent('response', responseEvent));\n } catch (error) {\n tryBtnEl.disabled = false;\n this.responseMessage = `${error.message} (Check the browser network tab for more information.)`;\n this.responseStatus = 'error';\n const responseEvent = {\n bubbles: true,\n composed: true,\n detail: {\n explorerLocation: this.elementId,\n error,\n request: fetchRequest,\n },\n };\n document.dispatchEvent(new CustomEvent('after-try', responseEvent));\n document.dispatchEvent(new CustomEvent('response', responseEvent));\n }\n this.requestUpdate();\n }\n\n onAddRemoveFileInput(e, pname) {\n if (e.target.tagName.toLowerCase() !== 'button') {\n return;\n }\n\n if (e.target.classList.contains('file-input-remove-btn')) {\n // Remove File Input Set\n const el = e.target.closest('.input-set');\n el.remove();\n return;\n }\n const el = e.target.closest('.file-input-container');\n\n // Add File Input Set\n\n // Container\n const newInputContainerEl = document.createElement('div');\n newInputContainerEl.setAttribute('class', 'input-set row');\n\n // File Input\n const newInputEl = document.createElement('input');\n newInputEl.type = 'file';\n newInputEl.setAttribute('class', 'file-input');\n newInputEl.setAttribute('data-pname', pname);\n newInputEl.setAttribute('data-ptype', 'form-input');\n newInputEl.setAttribute('data-array', 'false');\n newInputEl.setAttribute('data-file-array', 'true');\n\n // Remover Button\n const newRemoveBtnEl = document.createElement('button');\n newRemoveBtnEl.setAttribute('class', 'file-input-remove-btn');\n newRemoveBtnEl.innerHTML = '✕';\n\n newInputContainerEl.appendChild(newInputEl);\n newInputContainerEl.appendChild(newRemoveBtnEl);\n el.insertBefore(newInputContainerEl, e.target);\n // el.appendChild(newInputContainerEl);\n this.computeCurlSyntax();\n }\n\n downloadResponseBlob() {\n if (this.responseBlobUrl) {\n const a = document.createElement('a');\n document.body.appendChild(a);\n a.style = 'display: none';\n a.href = this.responseBlobUrl;\n a.download = this.respContentDisposition;\n a.click();\n a.remove();\n }\n }\n\n viewResponseBlob() {\n if (this.responseBlobUrl) {\n const a = document.createElement('a');\n document.body.appendChild(a);\n a.style = 'display: none';\n a.href = this.responseBlobUrl;\n a.target = '_blank';\n a.click();\n a.remove();\n }\n }\n\n clearResponseData() {\n this.responseUrl = '';\n this.responseHeaders = '';\n this.responseText = '';\n this.responseStatus = '';\n this.responseMessage = '';\n this.responseElapsedMs = 0;\n this.responseIsBlob = false;\n this.responseBlobType = '';\n this.respContentDisposition = '';\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n }\n\n requestParamFunction(event) {\n if (event.key === 'Enter') {\n this.onTryClick();\n event.preventDefault();\n }\n }\n\n disconnectedCallback() {\n // Cleanup ObjectURL forthe blob data if this component created one\n if (this.responseBlobUrl) {\n URL.revokeObjectURL(this.responseBlobUrl);\n this.responseBlobUrl = '';\n }\n super.disconnectedCallback();\n }\n}\n\n// Register the element with the browser\nif (!customElements.get('openapi-explorer')) {\n customElements.define('api-request', ApiRequest);\n}\n"],"names":[],"sourceRoot":""}

package/dist/es/components/api-request.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { keyed } from 'lit/directives/keyed.js';
 import formatXml from 'xml-but-prettier';
 import { copyToClipboard } from '../utils/common-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 import { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';
 import './json-tree.js';
 import './schema-tree.js';

package/dist/es/components/api-response.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { schemaInObjectNotation, generateExample, getTypeInfo } from '../utils/schema-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
 import FlexStyles from '../styles/flex-styles.js';
 import TableStyles from '../styles/table-styles.js';

package/dist/es/components/json-tree.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { copyToClipboard } from '../utils/common-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
 import BorderStyles from '../styles/border-styles.js';
 import InputStyles from '../styles/input-styles.js';

package/dist/es/components/schema-tree.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 import FontStyles from '../styles/font-styles.js';
 import SchemaStyles from '../styles/schema-styles.js';
 import BorderStyles from '../styles/border-styles.js';

package/dist/es/openapi-explorer.js CHANGED Viewed

@@ -27,7 +27,7 @@ import NavStyles from './styles/nav-styles.js';
 import InfoStyles from './styles/info-styles.js';
 import advancedSearchStyles from './styles/advanced-search-styles.js';
 import { advancedSearch, getCurrentElement, replaceState, sleep } from './utils/common-utils.js';
-import { initI18n } from './languages';
+import { initI18n } from './languages/index.js';
 import ProcessSpec from './utils/spec-parser.js';
 import mainBodyTemplate from './templates/mainBodyTemplate.js';
 import apiRequestStyles from './styles/api-request-styles.js';
@@ -845,4 +845,4 @@ if (!customElements.get('openapi-explorer')) {
   customElements.define('openapi-explorer', OpenApiExplorer);
 }
-import './openapi-explorer-oauth-handler';
+import './openapi-explorer-oauth-handler.js';

package/dist/es/templates/code-samples-template.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import Prism from 'prismjs';
 import { copyToClipboard } from '../utils/common-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 /* eslint-disable indent */
 export default function codeSamplesTemplate(xCodeSamples) {

package/dist/es/templates/navbar-template.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { marked } from 'marked';
 import { componentIsInSearch, pathIsInSearch } from '../utils/common-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 function onExpandCollapse(tagId) {
   const tag = this.resolvedSpec.tags.find(t => t.elementId === tagId);

package/dist/es/templates/overview-template.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 /* eslint-disable indent */
 export default function overviewTemplate() {

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

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { marked } from 'marked';
 import base64url from 'base64url';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 function onApiKeyChange(apiKeyId, e) {
   e.preventDefault();

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

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { marked } from 'marked';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 function onApiServerChange(e, server) {
   if (e && e.target.checked) {

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

@@ -1,4 +1,4 @@
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 /* For Delayed Event Handler Execution */
 export function debounce(fn, delay) {

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

@@ -1,7 +1,7 @@
 import OpenApiResolver from 'openapi-resolver/dist/openapi-resolver.browser';
 import { marked } from 'marked';
 import { invalidCharsRegEx } from './common-utils.js';
-import { getI18nText } from '../languages';
+import { getI18nText } from '../languages/index.js';
 import cloneDeep from 'lodash.clonedeep';
 export default async function ProcessSpec(specUrlOrObject, serverUrl = '') {
   var _jsonParsedSpec$info, _jsonParsedSpec$compo;

package/dist/lib/components/api-request.js CHANGED Viewed

@@ -19,7 +19,7 @@ var _xmlButPrettier = _interopRequireDefault(require("xml-but-prettier"));
 var _commonUtils = require("../utils/common-utils.js");
-var _languages = require("../languages");
+var _index = require("../languages/index.js");
 var _schemaUtils = require("../utils/schema-utils.js");
@@ -184,7 +184,7 @@ class ApiRequest extends _lit.LitElement {
   render() {
     const id = this.elementId || `${this.method}-${this.path}`;
-    return (0, _keyed.keyed)(id, (0, _lit.html)` <div id="api-request-${id}" class="api-request col regular-font request-panel ${this.renderStyle === 'focused' || this.callback === 'true' ? 'focused-mode' : 'view-mode'}"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK REQUEST' : (0, _languages.getI18nText)('operations.request')} </div> <div> ${this.inputParametersTemplate('path')} ${this.inputParametersTemplate('query')} ${this.requestBodyTemplate()} ${this.inputParametersTemplate('header')} ${this.inputParametersTemplate('cookie')} ${this.allowTry === 'false' ? '' : (0, _lit.html)`${this.apiCallTemplate()}`} </div> </div> `);
+    return (0, _keyed.keyed)(id, (0, _lit.html)` <div id="api-request-${id}" class="api-request col regular-font request-panel ${this.renderStyle === 'focused' || this.callback === 'true' ? 'focused-mode' : 'view-mode'}"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK REQUEST' : (0, _index.getI18nText)('operations.request')} </div> <div> ${this.inputParametersTemplate('path')} ${this.inputParametersTemplate('query')} ${this.requestBodyTemplate()} ${this.inputParametersTemplate('header')} ${this.inputParametersTemplate('cookie')} ${this.allowTry === 'false' ? '' : (0, _lit.html)`${this.apiCallTemplate()}`} </div> </div> `);
   }
   updated(changedProperties) {
@@ -443,11 +443,11 @@ class ApiRequest extends _lit.LitElement {
       }
     }
-    return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _languages.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
+    return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.html)`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${bodyTabNameUseBody ? (0, _languages.getI18nText)('operations.body') : (0, _languages.getI18nText)('operations.form')}</button> </div> ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`} ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`} </div>` : (0, _lit.html)`${reqBodyFileInputHtml}`} </div> `;
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _index.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${bodyTabNameUseBody ? (0, _index.getI18nText)('operations.body') : (0, _index.getI18nText)('operations.form')}</button> </div> ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'block' : 'none'}"> ${reqBodySchemaHtml}</div>`} ${(0, _lit.html)`<div class="tab-content col" style="display:${this.activeSchemaTab === 'model' ? 'none' : 'block'}"> ${reqBodyDefaultHtml}</div>`} </div>` : (0, _lit.html)`${reqBodyFileInputHtml}`} </div> `;
   } // formDataTemplate(schema, mimeType, exampleValue = '') {
   //   return html`
   //     <textarea
@@ -473,22 +473,22 @@ class ApiRequest extends _lit.LitElement {
       }
       this.activeResponseTab = e.target.dataset.tab;
-    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _languages.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _languages.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? (0, _lit.html)`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
+    }}"> <br> <div style="width:100%"> ${!hasResponse ? '' : (0, _lit.html)` <button class="tab-btn ${this.activeResponseTab === 'response' ? 'active' : ''}" data-tab="response">${(0, _index.getI18nText)('operations.response')}</button> <button class="tab-btn ${this.activeResponseTab === 'headers' ? 'active' : ''}" data-tab="headers">${(0, _index.getI18nText)('operations.response-headers')}</button>`} <button class="tab-btn ${!hasResponse || this.activeResponseTab === 'curl' ? 'active' : ''}" data-tab="curl">FULL REQUEST</button> </div> </div> ${this.responseIsBlob ? (0, _lit.html)` <div class="tab-content col" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseBlobType === 'image' ? (0, _lit.html)`<img style="max-height:var(--resp-area-height,300px);object-fit:contain" class="mar-top-8" src="${this.responseBlobUrl}">` : ''} <div style="display:flex;justify-content:center"> <div> <button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.downloadResponseBlob}" part="btn btn-outline">DOWNLOAD</button> ${this.responseBlobType === 'view' || this.responseBlobType === 'image' ? (0, _lit.html)`<button class="m-btn thin-border mar-top-8" style="width:135px" @click="${this.viewResponseBlob}" part="btn btn-outline">VIEW (NEW TAB)</button>` : ''} </div> </div> </div>` : (0, _lit.html)` <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'}"> ${this.responseText ? (0, _lit.html)`<button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       (0, _commonUtils.copyToClipboard)(this.responseText, e);
-    }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
+    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button>` : ''} <pre style="min-height:60px" @copy="${() => {
       (0, _commonUtils.copyToClipboard)(window.getSelection().toString());
     }}">${responseFormat ? (0, _lit.html)`<code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseText, _prismjs.default.languages[responseFormat], responseFormat))}</code>` : `${this.responseText}`}
               </pre> </div>`} <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'headers' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       (0, _commonUtils.copyToClipboard)(this.responseHeaders, e);
-    }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseHeaders, _prismjs.default.languages.css, 'css'))}</code></pre> </div> <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
+    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button> <pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(this.responseHeaders, _prismjs.default.languages.css, 'css'))}</code></pre> </div> <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'curl' ? 'flex' : 'none'}"> <button class="m-btn outline-primary toolbar-copy-btn" @click="${e => {
       (0, _commonUtils.copyToClipboard)(curlSyntax, e);
-    }}" part="btn btn-fill">${(0, _languages.getI18nText)('operations.copy')}</button> <pre class="fs-exclude" data-hj-suppress data-sl="mask">
+    }}" part="btn btn-fill">${(0, _index.getI18nText)('operations.copy')}</button> <pre class="fs-exclude" data-hj-suppress data-sl="mask">
             <code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(curlSyntax.trim(), _prismjs.default.languages.shell, 'shell'))}</code>
           </pre> </div> </div>`;
   }
   apiCallTemplate() {
-    return (0, _lit.html)` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? (0, _lit.html)` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${(0, _languages.getI18nText)('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${(0, _languages.getI18nText)('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
+    return (0, _lit.html)` <div style="display:flex;align-items:flex-end;margin:16px 0;font-size:var(--font-size-small)"> ${this.parameters.length > 0 || this.request_body ? (0, _lit.html)` <button class="m-btn thin-border" part="btn btn-outline" style="margin-right:5px" @click="${this.onClearRequestData}"> ${(0, _index.getI18nText)('operations.clear')} </button>` : ''} <button class="m-btn primary btn-execute thin-border" part="btn btn-fill btn-try" @click="${this.onTryClick}">${(0, _index.getI18nText)('operations.execute')}</button> </div> ${this.apiResponseTabTemplate()} `;
   }
   /* eslint-enable indent */

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

@@ -11,7 +11,7 @@ var _unsafeHtml = require("lit/directives/unsafe-html.js");
 var _schemaUtils = require("../utils/schema-utils.js");
-var _languages = require("../languages");
+var _index = require("../languages/index.js");
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
@@ -98,7 +98,7 @@ class ApiResponse extends _lit.LitElement {
   }
   render() {
-    return (0, _lit.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>`;
+    return (0, _lit.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, _index.getI18nText)('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
   }
   resetSelection() {
@@ -168,11 +168,11 @@ class ApiResponse extends _lit.LitElement {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.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, _index.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab !== 'model' ? 'active' : ''}" data-tab="body">${(0, _index.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
   responseHeaderListTemplate(respHeaders) {
-    return (0, _lit.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 => {
+    return (0, _lit.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _index.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 => {
       const typeData = (0, _schemaUtils.getTypeInfo)(v.schema);
       return (0, _lit.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:160px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td class="${(typeData === null || typeData === void 0 ? void 0 : typeData.cssType) || ''}" style="padding:4px;vertical-align:baseline;min-width:100px;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.format) || (typeData === null || typeData === void 0 ? void 0 : typeData.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"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.example) || ''} </td> </tr> `;
     })} </table>`;

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

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

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

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