\n ${this.callback === 'true' ? 'CALLBACK RESPONSE' : 'RESPONSE'}\n
\n ${this.responseTemplate()}\n
\n
\n `;\n }\n\n resetSelection() {\n this.selectedStatus = '';\n this.selectedMimeType = '';\n }\n\n /* eslint-disable indent */\n responseTemplate() {\n if (!this.responses) { return ''; }\n for (const statusCode in this.responses) {\n if (!this.selectedStatus) {\n this.selectedStatus = statusCode;\n }\n const allMimeResp = {};\n for (const mimeResp in this.responses[statusCode]?.content) {\n const mimeRespObj = this.responses[statusCode].content[mimeResp];\n if (!this.selectedMimeType) {\n this.selectedMimeType = mimeResp;\n }\n // Generate Schema\n const schemaTree = schemaInObjectNotation(mimeRespObj.schema, {});\n // Generate Example\n const respExamples = generateExample(\n mimeRespObj.schema,\n mimeResp,\n mimeRespObj.examples,\n mimeRespObj.example,\n !(this.schemaHideReadOnly && (this.schemaHideReadOnly.includes(this.method) || this.schemaHideReadOnly === 'true')),\n !(this.schemaHideWriteOnly && (this.schemaHideWriteOnly.includes(this.method) || this.schemaHideWriteOnly === 'true')),\n mimeResp.includes('json') ? 'json' : 'text',\n );\n allMimeResp[mimeResp] = {\n description: this.responses[statusCode].description,\n examples: respExamples,\n selectedExample: respExamples[0]?.exampleId || '',\n schemaTree,\n };\n }\n // Headers for each response status\n const tempHeaders = [];\n for (const key in this.responses[statusCode]?.headers) {\n tempHeaders.push({ name: key, ...this.responses[statusCode].headers[key] });\n }\n this.headersForEachRespStatus[statusCode] = tempHeaders;\n this.mimeResponsesForEachStatus[statusCode] = allMimeResp;\n }\n return html`\n ${Object.keys(this.responses).length > 1\n ? html`
\n ${Object.keys(this.responses).map((respStatus) => html`\n ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored\n ? ''\n : html`\n {\n this.selectedStatus = respStatus;\n if (this.responses[respStatus].content && Object.keys(this.responses[respStatus].content)[0]) {\n this.selectedMimeType = Object.keys(this.responses[respStatus].content)[0]; // eslint-disable-line prefer-destructuring\n } else {\n this.selectedMimeType = undefined;\n }\n }}\"\n class='m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}'\n part=\"btn ${this.selectedStatus === respStatus ? 'btn-response-status btn-selected-response-status' : ' btn-response-status'}\"\n style='margin: 8px 4px 0 0'\n > \n ${respStatus} \n `\n }`)\n }`\n : html`${Object.keys(this.responses)[0]} `\n }\n
\n\n ${Object.keys(this.responses).map((status) => html`\n
\n
\n ${unsafeHTML(marked(this.responses[status]?.description || ''))} \n ${(this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status]?.length > 0)\n ? html`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}`\n : ''\n }\n
\n ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0\n ? ''\n : html` \n
\n
\n ${this.activeSchemaTab === 'example'\n ? html`
\n ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}\n
`\n : html`
\n ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}\n
`\n }\n
\n `\n }`)\n }\n `;\n }\n\n responseHeaderListTemplate(respHeaders) {\n return html`\n \n
\n ${respHeaders.map((v) => html`\n \n \n ${v.name || ''}\n \n \n ${v.schema.type || ''}\n \n \n ${unsafeHTML(marked(v.description || ''))}
\n \n \n ${v.schema.example || ''}\n \n \n `)}\n
`;\n }\n\n mimeTypeDropdownTemplate(mimeTypes) {\n return html`\n
{ this.selectedMimeType = e.target.value; }}\" style='margin-bottom: -1px; z-index:1'>\n ${mimeTypes.map((mimeType) => html` ${mimeType} `)}\n `;\n }\n\n onSelectExample(e) {\n const exampleContainerEl = e.target.closest('.example-panel');\n const exampleEls = [...exampleContainerEl.querySelectorAll('.example')];\n\n exampleEls.forEach((v) => {\n v.style.display = v.dataset.example === e.target.value ? 'block' : 'none';\n });\n }\n\n mimeExampleTemplate(mimeRespDetails) {\n if (!mimeRespDetails) {\n return html`\n
No example provided \n `;\n }\n return html`\n ${mimeRespDetails.examples.length === 1\n ? html`\n ${mimeRespDetails.examples[0].exampleFormat === 'json'\n ? html`\n ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`
${mimeRespDetails.examples[0].exampleSummary}
` : ''}\n ${mimeRespDetails.examples[0].exampleDescription ? html`
${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))}
` : ''}\n
`\n : html`\n ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`
${mimeRespDetails.examples[0].exampleSummary}
` : ''}\n ${mimeRespDetails.examples[0].exampleDescription ? html`
${unsafeHTML(marked(mimeRespDetails.examples[0].exampleDescription || ''))}
` : ''}\n
${mimeRespDetails.examples[0].exampleValue} \n `\n }`\n : html`\n
\n \n ${mimeRespDetails.examples.map((v) => html` \n ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} \n `)}\n \n ${mimeRespDetails.examples.map((v) => html`\n \n ${v.exampleSummary && v.exampleSummary.length > 80 ? html`
${v.exampleSummary}
` : ''}\n ${v.exampleDescription ? html`
${unsafeHTML(marked(v.exampleDescription || ''))}
` : ''}\n ${v.exampleFormat === 'json'\n ? html`\n
`\n : html`
${v.exampleValue} `\n }\n
\n `\n }\n `;\n }\n\n mimeSchemaTemplate(mimeRespDetails) {\n if (!mimeRespDetails) {\n return html`\n
Schema not found \n `;\n }\n return html`\n ${this.schemaStyle === 'table'\n ? html`\n
`\n : html`\n `\n }`;\n }\n /* eslint-enable indent */\n}\n\n// Register the element with the browser\ncustomElements.define('api-response', ApiResponse);\n","import { css } from 'lit';\n\nexport default css`\n *, *:before, *:after { box-sizing: border-box; }\n\n .dialog-box-overlay {\n background-color: var(--overlay-bg);\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n z-index: var(--dialog-z-index);\n }\n \n .dialog-box {\n position: fixed;\n top: 100px;\n left: 50%;\n transform: translate(-50%, 0%);\n display: flex;\n flex-direction: column;\n width: 70vw;\n background-color: var(--bg2);\n color: var(--fg2);\n border-radius: 4px;\n max-height: 500px;\n overflow: hidden;\n border: 1px solid var(--border-color);\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n }\n \n .dialog-box-header {\n position: sticky;\n top: 0;\n align-self: stretch;\n display: flex;\n align-items: center;\n padding: 0px 16px;\n min-height: 60px;\n max-height: 60px;\n border-bottom: 1px solid var(--light-border-color);\n overflow: hidden;\n }\n \n .dialog-box-header button {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n color: var(--fg);\n border: none;\n outline: none;\n background-color: transparent;\n cursor:pointer;\n border: 1px solid transparent;\n border-radius: 50%;\n margin-right: -8px;\n }\n .dialog-box-header button:hover {\n border-color: var(--primary-color);\n }\n\n .dialog-box-content {\n padding: 16px;\n display:block;\n overflow: auto;\n height: 100%;\n }\n\n .dialog-box-title {\n flex-grow: 1;\n font-size:24px;\n }\n`;\n","import { html } from 'lit';\nimport '~/components/dialog-box';\n\n/* eslint-disable indent */\nexport default function searchByPropertiesModalTemplate() {\n document.addEventListener('close', () => { this.showAdvancedSearchDialog = false; });\n document.addEventListener('open', this.onOpenSearchDialog);\n\n return html`\n \n \n this.onAdvancedSearch(e, 400)}\"\n >\n \n \n \n ${this.advancedSearchMatches?.map((path) => html`\n {\n this.matchPaths = ''; // clear quick filter if applied\n this.showAdvancedSearchDialog = false; // Hide Search Dialog\n this.requestUpdate();\n this.scrollToEventTarget(e, true);\n }\n }\"\n > \n ${path.method} \n ${path.path} \n ${path.summary} \n \n `)\n }\n \n `;\n}\n/* eslint-enable indent */\n","import { LitElement, html } from 'lit';\nimport DialogBoxStyles from '~/styles/dialog-box-styles';\n\nexport default class DialogBox extends LitElement {\n static get properties() {\n return {\n heading: { type: String, attribute: 'heading' },\n show: { type: String, attribute: 'show' },\n };\n }\n\n static get styles() {\n return [DialogBoxStyles];\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('keydown', (e) => {\n if (e.code === 'Escape') {\n this.onClose();\n }\n });\n }\n\n attributeChangedCallback(name, oldVal, newVal) {\n if (oldVal !== newVal) {\n if (name === 'heading') {\n this.heading = newVal;\n }\n if (name === 'show') {\n this.show = newVal;\n if (newVal === 'true') {\n document.dispatchEvent(new CustomEvent('open', {\n bubbles: true,\n composed: true,\n detail: this,\n }));\n }\n }\n }\n super.attributeChangedCallback(name, oldVal, newVal);\n }\n\n /* eslint-disable indent */\n render() {\n return html`\n ${this.show === 'true'\n ? html`\n
`\n : ''\n }`;\n }\n /* eslint-enable indent */\n\n onClose() {\n document.dispatchEvent(new CustomEvent('close', {\n bubbles: true,\n composed: true,\n }));\n }\n}\n\ncustomElements.define('dialog-box', DialogBox);\n","import { html } from 'lit';\nimport ColorUtils from '~/utils/color-utils';\n/* Generates an schema object containing type and constraint info */\nexport default function setTheme(baseTheme, theme = {}) {\n let newTheme = {};\n\n // Common Theme colors\n const primaryColor = theme.primaryColor ? theme.primaryColor : baseTheme === 'dark' ? '#f76b39' : '#ff591e';\n const primaryColorInvert = ColorUtils.color.invert(primaryColor);\n const primaryColorTrans = ColorUtils.color.opacity(primaryColor, '0.8');\n\n // Dark and Light Theme colors\n if (baseTheme === 'dark') {\n const bg1 = theme.bg1 ? theme.bg1 : '#2a2b2c';\n const fg1 = theme.fg1 ? theme.fg1 : '#bbb';\n\n const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, 5); // or #383838;\n const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, 17); // or #444;\n const lightBg = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, 35);\n const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, -15); // or #ababab\n const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -20); // or #aaa\n const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, -65); // or #777\n const inlineCodeFg = theme.inlineCodeFg ? theme.inlineCodeFg : '#aaa';\n const selectionBg = '#bbb';\n const selectionFg = '#eee';\n\n const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, 10);\n\n const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, 10);\n const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.50');\n const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);\n const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);\n const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);\n const overlayBg = 'rgba(80, 80, 80, 0.4)';\n\n newTheme = {\n bg1,\n bg2,\n bg3,\n lightBg,\n fg1,\n fg2,\n fg3,\n lightFg,\n inlineCodeFg,\n primaryColor,\n primaryColorTrans,\n primaryColorInvert,\n selectionBg,\n selectionFg,\n overlayBg,\n navBgColor,\n navTextColor,\n navHoverBgColor,\n navHoverTextColor,\n navAccentColor,\n\n headerColor,\n headerColorInvert: ColorUtils.color.invert(headerColor),\n headerColorDarker: ColorUtils.color.brightness(headerColor, -20),\n headerColorBorder: ColorUtils.color.brightness(headerColor, 10),\n\n borderColor: theme.borderColor || ColorUtils.color.brightness(bg1, 20), // #555\n lightBorderColor: theme.lightBorderColor || ColorUtils.color.brightness(bg1, 15), // #444\n codeBorderColor: theme.codeBorderColor || ColorUtils.color.brightness(bg1, 30),\n\n inputBg: theme.inputBg || ColorUtils.color.brightness(bg1, -5), // #2f2f2f\n placeHolder: theme.placeHolder || ColorUtils.color.opacity(fg1, '0.3'),\n hoverColor: theme.hoverColor || ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n red: theme.red ? theme.red : '#F06560',\n lightRed: theme.lightRed ? theme.lightRed : ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n pink: theme.pink ? theme.pink : '#ffb2b2',\n lightPink: theme.lightPink || ColorUtils.color.brightness(bg1, -10),\n\n green: theme.green || '#7ec699',\n lightGreen: theme.lightGreen || ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n blue: theme.blue || '#71b7ff',\n lightBlue: theme.lightBlue || ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n orange: theme.orange ? theme.orange : '#f08d49',\n lightOrange: theme.lightOrange || ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n yellow: theme.yellow || '#827717',\n lightYellow: theme.lightYellow || ColorUtils.color.brightness(bg1, -10), // #2a2a2a\n\n purple: theme.purple || '#786FF1',\n brown: theme.brown || '#D4AC0D',\n\n codeBg: theme.codeBg || ColorUtils.color.opacity(ColorUtils.color.brightness(bg1, -15), 0.7),\n codeFg: theme.codeFg || '#aaa',\n codePropertyColor: theme.codePropertyColor || '#f8c555',\n codeKeywordColor: theme.codeKeywordColor || '#cc99cd',\n codeOperatorColor: theme.codeOperatorColor || '#67cdcc',\n };\n } else {\n const bg1 = (theme.bg1 ? theme.bg1 : '#fafbfc');\n const fg1 = (theme.fg1 ? theme.fg1 : '#444444');\n const bg2 = theme.bg2 ? theme.bg2 : ColorUtils.color.brightness(bg1, -5); // or '#fafafa'\n const bg3 = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, -15); // or '#f6f6f6'\n const lightBg = theme.bg3 ? theme.bg3 : ColorUtils.color.brightness(bg1, -45);\n const fg2 = theme.fg2 ? theme.fg2 : ColorUtils.color.brightness(fg1, 17); // or '#555'\n const fg3 = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 30); // or #666\n const lightFg = theme.fg3 ? theme.fg3 : ColorUtils.color.brightness(fg1, 70); // or #999\n const inlineCodeFg = theme.inlineCodeFg ? theme.inlineCodeFg : 'brown';\n\n const selectionBg = '#444';\n const selectionFg = '#eee';\n\n const headerColor = theme.headerColor ? theme.headerColor : ColorUtils.color.brightness(bg1, -180);\n\n /*\n const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -10);\n const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.brightness(fg1, 5);\n const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : bg1;\n const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : primaryColor;\n const navAccentColor = theme.navAccentColor ? theme.navAccentColor : primaryColor;\n */\n const navBgColor = theme.navBgColor ? theme.navBgColor : ColorUtils.color.brightness(bg1, -200);\n const navTextColor = theme.navTextColor ? theme.navTextColor : ColorUtils.color.opacity(ColorUtils.color.invert(navBgColor), '0.65');\n const navHoverBgColor = theme.navHoverBgColor ? theme.navHoverBgColor : ColorUtils.color.brightness(navBgColor, -15);\n const navHoverTextColor = theme.navHoverTextColor ? theme.navHoverTextColor : ColorUtils.color.invert(navBgColor);\n const navAccentColor = theme.navAccentColor ? theme.navAccentColor : ColorUtils.color.brightness(primaryColor, 25);\n const overlayBg = 'rgba(0, 0, 0, 0.4)';\n\n newTheme = {\n bg1,\n bg2,\n bg3,\n lightBg,\n fg1,\n fg2,\n fg3,\n lightFg,\n inlineCodeFg,\n primaryColor,\n primaryColorTrans,\n primaryColorInvert,\n selectionBg,\n selectionFg,\n overlayBg,\n navBgColor,\n navTextColor,\n navHoverBgColor,\n navHoverTextColor,\n navAccentColor,\n\n headerColor,\n headerColorInvert: ColorUtils.color.invert(headerColor),\n headerColorDarker: ColorUtils.color.brightness(headerColor, -20),\n headerColorBorder: ColorUtils.color.brightness(headerColor, 10),\n\n borderColor: theme.borderColor || ColorUtils.color.brightness(bg1, -38),\n lightBorderColor: theme.lightBorderColor || ColorUtils.color.brightness(bg1, -23),\n codeBorderColor: theme.codeBorderColor || 'transparent',\n\n inputBg: theme.inputBg || ColorUtils.color.brightness(bg1, 10), // #fff\n placeHolder: theme.placeHolder || ColorUtils.color.brightness(lightFg, 20), // #dedede\n hoverColor: theme.hoverColor || ColorUtils.color.brightness(bg1, -5), // # f1f1f1\n\n red: theme.red || '#F06560',\n lightRed: theme.lightRed || '#fff0f0',\n\n pink: theme.pink ? theme.pink : '#990055',\n lightPink: theme.lightPink ? theme.lightPink : '#ffb2b2',\n\n green: theme.green || '#690',\n lightGreen: theme.lightGreen || '#fbfff0',\n\n blue: theme.blue || '#47AFE8',\n lightBlue: theme.lightBlue || '#eff8fd',\n\n orange: theme.orange || '#FF9900',\n lightOrange: theme.lightOrange || '#fff5e6',\n\n yellow: theme.yellow || '#827717',\n lightYellow: theme.lightYellow || '#fff5cc',\n\n purple: theme.purple || '#786FF1',\n brown: theme.brown || '#D4AC0D',\n\n codeBg: theme.codeBg || ColorUtils.color.opacity(ColorUtils.color.brightness(bg1, -15), 0.7),\n codeFg: theme.codeFg || '#666',\n codePropertyColor: theme.codePropertyColor || '#905',\n codeKeywordColor: theme.codeKeywordColor || '#07a',\n codeOperatorColor: theme.codeOperatorColor || '#9a6e3a',\n };\n }\n return html`\n `;\n}\n","import { html } from 'lit';\n\n// Templates\nimport expandedEndpointTemplate from '~/templates/expanded-endpoint-template';\nimport focusedEndpointTemplate from '~/templates/focused-endpoint-template';\nimport overviewTemplate from '~/templates/overview-template';\nimport endpointTemplate from '~/templates/endpoint-template';\nimport serverTemplate from '~/templates/server-template';\nimport securitySchemeTemplate, { recoverPersistedApiKeys } from '~/templates/security-scheme-template';\nimport headerTemplate from '~/templates/header-template';\nimport navbarTemplate from '~/templates/navbar-template';\nimport advancedSearchTemplate from '~/templates/advance-search-template';\nimport SetTheme from '~/utils/theme';\nimport { isValidHexColor } from '~/utils/color-utils';\n\nexport default function mainBodyTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {\n if (!this.resolvedSpec) {\n return '';\n }\n if (this.persistAuth === 'true') {\n recoverPersistedApiKeys.call(this);\n }\n const newTheme = {\n bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',\n fg1: isValidHexColor(this.textColor) ? this.textColor : '',\n headerColor: isValidHexColor(this.headerColor) ? this.headerColor : '',\n primaryColor: isValidHexColor(this.primaryColor) ? this.primaryColor : '',\n navBgColor: isValidHexColor(this.navBgColor) ? this.navBgColor : '',\n navTextColor: isValidHexColor(this.navTextColor) ? this.navTextColor : '',\n navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',\n navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',\n navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',\n };\n /* eslint-disable indent */\n if (this.resolvedSpec.specLoadError) {\n if (isMini) {\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n
${this.resolvedSpec.info.description}
\n `;\n }\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n \n ${headerTemplate.call(this)}\n
\n \n
${this.resolvedSpec.info.title} \n
${this.resolvedSpec.info.description}
\n
\n `;\n }\n if (this.resolvedSpec.isSpecLoading) {\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n
\n \n `;\n }\n\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n\n \n ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}\n \n \n ${this.allowAdvancedSearch === 'false' ? '' : advancedSearchTemplate.call(this)}\n\n
\n \n ${((this.renderStyle === 'read' || this.renderStyle === 'focused')\n && this.showSideNav === 'true'\n && this.resolvedSpec\n ) ? navbarTemplate.call(this) : ''\n }\n\n \n
\n \n ${this.loading === true\n ? html`
`\n : html`\n ${this.loadFailed === true\n ? html`
Unable to load the Spec
`\n : html`\n
{ this.handleHref(e); }}\">\n ${this.renderStyle === 'focused'\n ? html`${focusedEndpointTemplate.call(this)}`\n : html`\n ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}\n ${this.allowServerSelection === 'true' ? serverTemplate.call(this) : ''}\n ${this.allowAuthentication === 'true' ? securitySchemeTemplate.call(this) : ''}\n
\n
\n ${this.renderStyle === 'read'\n ? expandedEndpointTemplate.call(this)\n : endpointTemplate.call(this, showExpandCollapse, showTags, pathsExpanded)\n }\n `\n }\n
\n `\n }`\n }\n
\n
\n `;\n}\n/* eslint-enable indent */\n","import { css, LitElement, unsafeCSS } from 'lit';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-yaml';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-http';\nimport 'prismjs/components/prism-csharp';\n\n// Styles\nimport FontStyles from '~/styles/font-styles';\nimport InputStyles from '~/styles/input-styles';\nimport FlexStyles from '~/styles/flex-styles';\nimport TableStyles from '~/styles/table-styles';\nimport EndpointStyles from '~/styles/endpoint-styles';\nimport PrismStyles from '~/styles/prism-styles';\nimport TabStyles from '~/styles/tab-styles';\nimport NavStyles from '~/styles/nav-styles';\nimport InfoStyles from '~/styles/info-styles';\nimport CustomStyles from '~/styles/custom-styles';\n// import { expandCollapseNavBarTag } from '@/templates/navbar-template';\nimport { advancedSearch, pathIsInSearch, componentIsInSearch, rapidocApiKey, sleep } from '~/utils/common-utils';\nimport ProcessSpec from '~/utils/spec-parser';\nimport mainBodyTemplate from '~/templates/main-body-template';\nimport { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';\nimport { setApiServer } from '~/templates/server-template';\n\nexport default class RapiDoc extends LitElement {\n constructor() {\n super();\n const intersectionObserverOptions = {\n root: this.getRootNode().host,\n rootMargin: '-50px 0px -50px 0px', // when the element is visible 100px from bottom\n threshold: 0,\n };\n this.showSummaryWhenCollapsed = true;\n this.isIntersectionObserverActive = true;\n this.intersectionObserver = new IntersectionObserver((entries) => { this.onIntersect(entries); }, intersectionObserverOptions);\n }\n\n static get properties() {\n return {\n // Heading\n headingText: { type: String, attribute: 'heading-text' },\n gotoPath: { type: String, attribute: 'goto-path' },\n\n // Spec\n updateRoute: { type: String, attribute: 'update-route' },\n routePrefix: { type: String, attribute: 'route-prefix' },\n specUrl: { type: String, attribute: 'spec-url' },\n sortTags: { type: String, attribute: 'sort-tags' },\n generateMissingTags: { type: String, attribute: 'generate-missing-tags' },\n sortEndpointsBy: { type: String, attribute: 'sort-endpoints-by' },\n specFile: { type: String, attribute: false },\n\n // UI Layouts\n layout: { type: String },\n renderStyle: { type: String, attribute: 'render-style' },\n defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },\n responseAreaHeight: { type: String, attribute: 'response-area-height' },\n fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },\n useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },\n persistAuth: { type: String, attribute: 'persist-auth' },\n onNavTagClick: { type: String, attribute: 'on-nav-tag-click' },\n\n // Schema Styles\n schemaStyle: { type: String, attribute: 'schema-style' },\n schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },\n schemaHideReadOnly: { type: String, attribute: 'schema-hide-read-only' },\n schemaHideWriteOnly: { type: String, attribute: 'schema-hide-write-only' },\n\n // API Server\n apiKeyName: { type: String, attribute: 'api-key-name' },\n apiKeyLocation: { type: String, attribute: 'api-key-location' },\n apiKeyValue: { type: String, attribute: 'api-key-value' },\n defaultApiServerUrl: { type: String, attribute: 'default-api-server' },\n serverUrl: { type: String, attribute: 'server-url' },\n oauthReceiver: { type: String, attribute: 'oauth-receiver' },\n\n // Hide/Show Sections & Enable Disable actions\n showHeader: { type: String, attribute: 'show-header' },\n showSideNav: { type: String, attribute: 'show-side-nav' },\n showInfo: { type: String, attribute: 'show-info' },\n allowAuthentication: { type: String, attribute: 'allow-authentication' },\n allowTry: { type: String, attribute: 'allow-try' },\n allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },\n allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },\n allowSpecFileDownload: { type: String, attribute: 'allow-spec-file-download' },\n allowSearch: { type: String, attribute: 'allow-search' },\n allowAdvancedSearch: { type: String, attribute: 'allow-advanced-search' },\n allowServerSelection: { type: String, attribute: 'allow-server-selection' },\n allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },\n showComponents: { type: String, attribute: 'show-components' },\n pageDirection: { type: String, attribute: 'page-direction' },\n\n // Main Colors and Font\n theme: { type: String },\n bgColor: { type: String, attribute: 'bg-color' },\n textColor: { type: String, attribute: 'text-color' },\n headerColor: { type: String, attribute: 'header-color' },\n primaryColor: { type: String, attribute: 'primary-color' },\n fontSize: { type: String, attribute: 'font-size' },\n regularFont: { type: String, attribute: 'regular-font' },\n monoFont: { type: String, attribute: 'mono-font' },\n loadFonts: { type: String, attribute: 'load-fonts' },\n cssFile: { type: String, attribute: 'css-file' },\n cssClasses: { type: String, attribute: 'css-classes' },\n\n // Nav Bar Colors\n navBgColor: { type: String, attribute: 'nav-bg-color' },\n navTextColor: { type: String, attribute: 'nav-text-color' },\n navHoverBgColor: { type: String, attribute: 'nav-hover-bg-color' },\n navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },\n navAccentColor: { type: String, attribute: 'nav-accent-color' },\n navItemSpacing: { type: String, attribute: 'nav-item-spacing' },\n showMethodInNavBar: { type: String, attribute: 'show-method-in-nav-bar' },\n usePathInNavBar: { type: String, attribute: 'use-path-in-nav-bar' },\n infoDescriptionHeadingsInNavBar: { type: String, attribute: 'info-description-headings-in-navbar' },\n\n // Fetch Options\n fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n // Filters\n matchPaths: { type: String, attribute: 'match-paths' },\n matchType: { type: String, attribute: 'match-type' },\n\n // Internal Properties\n loading: { type: Boolean }, // indicates spec is being loaded\n focusedElementId: { type: String }, // updating the focusedElementId will automatically render appropriate section in focused mode\n showAdvancedSearchDialog: { type: Boolean },\n advancedSearchMatches: { type: Object },\n };\n }\n\n static get styles() {\n return [\n FontStyles,\n InputStyles,\n FlexStyles,\n TableStyles,\n EndpointStyles,\n PrismStyles,\n TabStyles,\n NavStyles,\n InfoStyles,\n css`\n :host {\n display:flex;\n flex-direction: column;\n min-width:360px;\n width:100%;\n height:100%;\n margin:0;\n padding:0;\n overflow: hidden;\n letter-spacing:normal;\n color:var(--fg);\n background-color:var(--bg);\n font-family:var(--font-regular);\n }\n .body {\n display:flex;\n height:100%;\n width:100%;\n overflow:hidden;\n }\n\n .main-content { \n margin:0;\n padding: 0; \n display:block;\n flex:1;\n height:100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n }\n\n .main-content-inner--view-mode {\n padding: 0 8px;\n }\n .main-content::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n .main-content::-webkit-scrollbar-track {\n background:transparent;\n }\n .main-content::-webkit-scrollbar-thumb {\n background-color: var(--border-color);\n }\n\n .section-gap.section-tag {\n border-bottom:1px solid var(--border-color);\n }\n .section-gap,\n .section-gap--focused-mode,\n .section-gap--read-mode { \n padding: 0px 4px; \n }\n .section-tag-header {\n position:relative;\n cursor: n-resize;\n padding: 12px 0;\n }\n .collapsed .section-tag-header:hover{\n cursor: s-resize;\n }\n\n .section-tag-header:hover{\n background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));\n }\n\n .section-tag-header:hover::after {\n position:absolute;\n margin-left:-24px;\n font-size:20px;\n top: calc(50% - 14px);\n color:var(--primary-color);\n content: '⬆'; \n }\n\n .collapsed .section-tag-header::after {\n position:absolute;\n margin-left:-24px;\n font-size:20px;\n top: calc(50% - 14px);\n color: var(--border-color);\n content: '⬇'; \n }\n .collapsed .section-tag-header:hover::after {\n color:var(--primary-color);\n }\n\n .collapsed .section-tag-body {\n display:none;\n }\n\n .logo {\n height:36px;\n width:36px;\n margin-left:5px; \n }\n .only-large-screen-flex,\n .only-large-screen{\n display:none;\n }\n .tag.title {\n text-transform: uppercase;\n }\n .main-header {\n background-color:var(--header-bg);\n color:var(--header-fg);\n width:100%;\n }\n .header-title {\n font-size:calc(var(--font-size-regular) + 8px); \n padding:0 8px;\n }\n input.header-input{\n background:var(--header-color-darker);\n color:var(--header-fg);\n border:1px solid var(--header-color-border);\n flex:1; \n padding-right:24px;\n border-radius:3px;\n }\n input.header-input::placeholder {\n opacity:0.4;\n }\n .loader {\n margin: 16px auto 16px auto; \n border: 4px solid var(--bg3);\n border-radius: 50%;\n border-top: 4px solid var(--primary-color);\n width: 36px;\n height: 36px;\n animation: spin 2s linear infinite;\n }\n .expanded-endpoint-body{ \n position: relative;\n padding: 6px 0px; \n }\n .expanded-endpoint-body.deprecated{ filter:opacity(0.6); }\n .divider { \n border-top: 2px solid var(--border-color);\n margin: 24px 0;\n width:100%;\n }\n\n .tooltip {\n cursor:pointer;\n border: 1px solid var(--border-color);\n border-left-width: 4px;\n margin-left:2px;\n }\n .tooltip a {\n color: var(--fg2);\n text-decoration: none;\n }\n .tooltip-text {\n color: var(--fg2);\n max-width: 400px;\n position: absolute;\n z-index:1;\n background-color: var(--bg2);\n visibility: hidden;\n\n overflow-wrap: break-word;\n }\n .tooltip:hover {\n color: var(--primary-color);\n border-color: var(--primary-color);\n }\n .tooltip:hover a:hover {\n color: var(--primary-color);\n }\n\n .tooltip:hover .tooltip-text {\n visibility: visible;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .nav-method { font-weight: bold; margin-right: 4px; font-size: calc(var(--font-size-small) - 2px); white-space: nowrap; }\n .nav-method.false { display: none; }\n\n .nav-method.as-colored-text.get { color:var(--nav-get-color); }\n .nav-method.as-colored-text.put { color:var(--nav-put-color); }\n .nav-method.as-colored-text.post { color:var(--nav-post-color); }\n .nav-method.as-colored-text.delete { color:var(--nav-delete-color); }\n .nav-method.as-colored-text.head, .nav-method.as-colored-text.patch, .nav-method.as-colored-text.options { color:var(--nav-head-color); }\n \n .nav-method.as-colored-block {\n padding: 1px 4px;\n min-width: 30px;\n border-radius: 4px 0 0 4px;\n color: #000;\n }\n\n .nav-method.as-colored-block.get { background-color: var(--blue); }\n .nav-method.as-colored-block.put { background-color: var(--orange); }\n .nav-method.as-colored-block.post { background-color: var(--green); }\n .nav-method.as-colored-block.delete { background-color: var(--red); }\n .nav-method.as-colored-block.head, .nav-method.as-colored-block.patch , .nav-method.as-colored-block.options { \n background-color: var(--yellow); \n }\n\n @media only screen and (min-width: 768px) {\n .nav-bar {\n width: 260px;\n display:flex;\n }\n .only-large-screen{\n display:block;\n }\n .only-large-screen-flex{\n display:flex;\n }\n .section-gap { \n padding: 0 0 0 24px; \n }\n .section-gap--focused-mode {\n padding: 24px 8px; \n }\n .section-gap--read-mode { \n padding: 24px 8px; \n }\n .endpoint-body {\n position: relative;\n padding:36px 0 48px 0;\n }\n }\n\n @media only screen and (min-width: 1024px) {\n .nav-bar {\n width: ${unsafeCSS(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};\n display:flex;\n }\n .section-gap--focused-mode { \n padding: 12px 80px 12px 80px; \n }\n .section-gap--read-mode { \n padding: 24px 80px 12px 80px; \n }\n }`,\n CustomStyles,\n ];\n }\n\n // Startup\n connectedCallback() {\n super.connectedCallback();\n const parent = this.parentElement;\n if (parent) {\n if (parent.offsetWidth === 0 && parent.style.width === '') {\n parent.style.width = '100vw';\n }\n if (parent.offsetHeight === 0 && parent.style.height === '') {\n parent.style.height = '100vh';\n }\n if (parent.tagName === 'BODY') {\n if (!parent.style.marginTop) { parent.style.marginTop = '0'; }\n if (!parent.style.marginRight) { parent.style.marginRight = '0'; }\n if (!parent.style.marginBottom) { parent.style.marginBottom = '0'; }\n if (!parent.style.marginLeft) { parent.style.marginLeft = '0'; }\n }\n }\n\n if (this.loadFonts !== 'false') {\n const fontDescriptor = {\n family: 'Open Sans',\n style: 'normal',\n weight: '300',\n unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',\n };\n const fontWeight300 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontDescriptor.weight = '600';\n const fontWeight600 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontWeight300.load().then((font) => { document.fonts.add(font); });\n fontWeight600.load().then((font) => { document.fonts.add(font); });\n }\n\n if (!this.layout || !'row, column,'.includes(`${this.layout},`)) { this.layout = 'row'; }\n if (!this.renderStyle || !'read, view, focused,'.includes(`${this.renderStyle},`)) { this.renderStyle = 'read'; }\n if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }\n if (!this.theme || !'light, dark,'.includes(`${this.theme},`)) {\n this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';\n }\n if (!this.defaultSchemaTab || !'example, schema, model,'.includes(`${this.defaultSchemaTab},`)) {\n this.defaultSchemaTab = 'example';\n } else if (this.defaultSchemaTab === 'model') {\n this.defaultSchemaTab = 'schema';\n }\n if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }\n if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }\n const writeMethodsWithBody = ['post', 'put', 'patch'];\n if (!this.schemaHideReadOnly) {\n this.schemaHideReadOnly = writeMethodsWithBody;\n } else if (this.schemaHideReadOnly !== 'never') {\n this.schemaHideReadOnly = writeMethodsWithBody.filter((value) => this.schemaHideReadOnly.includes(value));\n if (this.schemaHideReadOnly.length === 0) {\n this.schemaHideReadOnly = writeMethodsWithBody;\n }\n }\n this.schemaHideReadOnly += ['get', 'head', 'delete', 'options'];\n this.schemaHideWriteOnly = this.schemaHideWriteOnly !== 'never';\n if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }\n if (!this.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }\n if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }\n if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }\n if (!this.responseAreaHeight) {\n this.responseAreaHeight = '300px';\n }\n\n if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }\n if (!this.allowAdvancedSearch || !'true, false,'.includes(`${this.allowAdvancedSearch},`)) { this.allowAdvancedSearch = 'true'; }\n\n if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }\n if (!this.apiKeyValue) { this.apiKeyValue = '-'; }\n if (!this.apiKeyLocation) { this.apiKeyLocation = 'header'; }\n if (!this.apiKeyName) { this.apiKeyName = ''; }\n\n if (!this.oauthReceiver) { this.oauthReceiver = 'oauth-receiver.html'; }\n if (!this.updateRoute || !'true, false,'.includes(`${this.updateRoute},`)) { this.updateRoute = 'true'; }\n if (!this.routePrefix) { this.routePrefix = '#'; }\n if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }\n if (!this.generateMissingTags || !'true, false,'.includes(`${this.generateMissingTags},`)) { this.generateMissingTags = 'false'; }\n if (!this.sortEndpointsBy || !'method, path, summary, none,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }\n if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }\n if (!this.showMethodInNavBar || !'false, as-plain-text, as-colored-text, as-colored-block,'.includes(`${this.showMethodInNavBar},`)) { this.showMethodInNavBar = 'false'; }\n if (!this.usePathInNavBar || !'true, false,'.includes(`${this.usePathInNavBar},`)) { this.usePathInNavBar = 'false'; }\n if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }\n\n if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }\n if (!this.allowServerSelection || !'true, false,'.includes(`${this.allowServerSelection},`)) { this.allowServerSelection = 'true'; }\n if (!this.allowAuthentication || !'true, false,'.includes(`${this.allowAuthentication},`)) { this.allowAuthentication = 'true'; }\n if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }\n\n if (!this.showSideNav || !'true false'.includes(this.showSideNav)) { this.showSideNav = 'true'; }\n if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }\n if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }\n if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }\n if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }\n\n if (!this.showAdvancedSearchDialog) { this.showAdvancedSearchDialog = false; }\n\n if (!this.cssFile) { this.cssFile = null; }\n if (!this.cssClasses) { this.cssClasses = ''; }\n\n marked.setOptions({\n highlight: (code, lang) => {\n if (Prism.languages[lang]) {\n return Prism.highlight(code, Prism.languages[lang], lang);\n }\n return code;\n },\n });\n\n window.addEventListener('hashchange', () => {\n const regEx = new RegExp(`^${this.routePrefix}`, 'i');\n const elementId = window.location.hash.replace(regEx, '');\n this.scrollTo(elementId);\n }, true);\n }\n\n // Cleanup\n disconnectedCallback() {\n if (this.intersectionObserver) {\n this.intersectionObserver.disconnect();\n }\n super.disconnectedCallback();\n }\n\n infoDescriptionHeadingRenderer() {\n const renderer = new marked.Renderer();\n renderer.heading = ((text, level, raw, slugger) => `
${text} `);\n return renderer;\n }\n\n render() {\n // return render(mainBodyTemplate(this), this.shadowRoot, { eventContext: this });\n const cssLinkEl = document.querySelector(`link[href*=\"${this.cssFile}\"]`);\n // adding custom style for RapiDoc\n if (cssLinkEl) {\n this.shadowRoot.appendChild(cssLinkEl.cloneNode());\n }\n return mainBodyTemplate.call(this);\n }\n\n observeExpandedContent() {\n // Main Container\n const observeOverviewEls = this.shadowRoot.querySelectorAll('.observe-me');\n observeOverviewEls.forEach((targetEl) => {\n this.intersectionObserver.observe(targetEl);\n });\n }\n\n attributeChangedCallback(name, oldVal, newVal) {\n if (name === 'spec-url') {\n if (oldVal !== newVal) {\n // put it at the end of event-loop to load all the attributes\n window.setTimeout(async () => {\n await this.loadSpec(newVal);\n // If goto-path is provided and no location-hash is present then try to scroll there\n if (this.gotoPath && !window.location.hash) {\n this.scrollTo(this.gotoPath);\n }\n }, 0);\n }\n }\n if (name === 'render-style') {\n if (newVal === 'read') {\n window.setTimeout(() => {\n this.observeExpandedContent();\n }, 100);\n } else {\n this.intersectionObserver.disconnect();\n }\n }\n if (name === 'api-key-name' || name === 'api-key-location' || name === 'api-key-value') {\n let updateSelectedApiKey = false;\n let apiKeyName = '';\n let apiKeyLocation = '';\n let apiKeyValue = '';\n\n if (name === 'api-key-name') {\n if (this.getAttribute('api-key-location') && this.getAttribute('api-key-value')) {\n apiKeyName = newVal;\n apiKeyLocation = this.getAttribute('api-key-location');\n apiKeyValue = this.getAttribute('api-key-value');\n updateSelectedApiKey = true;\n }\n } else if (name === 'api-key-location') {\n if (this.getAttribute('api-key-name') && this.getAttribute('api-key-value')) {\n apiKeyLocation = newVal;\n apiKeyName = this.getAttribute('api-key-name');\n apiKeyValue = this.getAttribute('api-key-value');\n updateSelectedApiKey = true;\n }\n } else if (name === 'api-key-value') {\n if (this.getAttribute('api-key-name') && this.getAttribute('api-key-location')) {\n apiKeyValue = newVal;\n apiKeyLocation = this.getAttribute('api-key-location');\n apiKeyName = this.getAttribute('api-key-name');\n updateSelectedApiKey = true;\n }\n }\n\n if (updateSelectedApiKey) {\n if (this.resolvedSpec) {\n const rapiDocApiKey = this.resolvedSpec.securitySchemes.find((v) => v.securitySchemeId === rapidocApiKey);\n if (!rapiDocApiKey) {\n this.resolvedSpec.securitySchemes.push({\n securitySchemeId: rapidocApiKey,\n description: 'api-key provided in rapidoc element attributes',\n type: 'apiKey',\n name: apiKeyName,\n in: apiKeyLocation,\n value: apiKeyValue,\n finalKeyValue: apiKeyValue,\n });\n } else {\n rapiDocApiKey.name = apiKeyName;\n rapiDocApiKey.in = apiKeyLocation;\n rapiDocApiKey.value = apiKeyValue;\n rapiDocApiKey.finalKeyValue = apiKeyValue;\n }\n this.requestUpdate();\n }\n }\n }\n super.attributeChangedCallback(name, oldVal, newVal);\n }\n\n onSepcUrlChange() {\n this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);\n }\n\n onSepcFileChange(e) {\n this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);\n const specFile = e.target.files[0];\n const reader = new FileReader();\n reader.onload = () => {\n try {\n const specObj = JSON.parse(reader.result);\n this.loadSpec(specObj);\n this.shadowRoot.getElementById('spec-url').value = '';\n } catch (err) {\n console.error('RapiDoc: Unable to read or parse json'); // eslint-disable-line no-console\n }\n };\n // Read the Text file\n reader.readAsText(specFile);\n }\n\n onFileLoadClick() {\n this.shadowRoot.getElementById('spec-file').click();\n }\n\n onSearchChange(e) {\n this.matchPaths = e.target.value;\n this.resolvedSpec.tags.forEach((tag) => tag.paths.filter((v) => {\n if (this.matchPaths) {\n // v.expanded = false;\n if (pathIsInSearch(this.matchPaths, v, this.matchType)) {\n tag.expanded = true;\n }\n }\n }));\n this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {\n v.expanded = false;\n if (!this.matchPaths || componentIsInSearch(this.matchPaths, v)) {\n v.expanded = true;\n }\n }));\n this.requestUpdate();\n }\n\n onClearSearch() {\n const searchEl = this.shadowRoot.getElementById('nav-bar-search');\n searchEl.value = '';\n this.matchPaths = '';\n this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {\n v.expanded = true;\n }));\n }\n\n onShowSearchModalClicked() {\n this.showAdvancedSearchDialog = true;\n }\n\n // Event Handler on Dialog-Box is opened\n async onOpenSearchDialog(e) {\n // Set focus to text input\n const inputEl = e.detail.querySelector('input');\n await sleep(0);\n if (inputEl) {\n inputEl.focus();\n }\n }\n\n // Public Method\n async loadSpec(specUrl) {\n if (!specUrl) {\n return;\n }\n this.matchPaths = '';\n try {\n this.resolvedSpec = {\n specLoadError: false,\n isSpecLoading: true,\n tags: [],\n };\n this.loading = true;\n this.loadFailed = false;\n const spec = await ProcessSpec.call(\n this,\n specUrl,\n this.generateMissingTags === 'true',\n this.sortTags === 'true',\n this.getAttribute('sort-endpoints-by'),\n this.getAttribute('api-key-name'),\n this.getAttribute('api-key-location'),\n this.getAttribute('api-key-value'),\n this.getAttribute('server-url'),\n );\n this.loading = false;\n this.afterSpecParsedAndValidated(spec);\n } catch (err) {\n this.loading = false;\n this.loadFailed = true;\n this.resolvedSpec = null;\n console.error(`RapiDoc: Unable to resolve the API spec.. ${err.message}`); // eslint-disable-line no-console\n }\n }\n\n async afterSpecParsedAndValidated(spec) {\n this.resolvedSpec = spec;\n this.selectedServer = undefined;\n if (this.defaultApiServerUrl) {\n if (this.defaultApiServerUrl === this.serverUrl) {\n this.selectedServer = {\n url: this.serverUrl,\n computedUrl: this.serverUrl,\n };\n } else if (this.resolvedSpec.servers) {\n this.selectedServer = this.resolvedSpec.servers.find((v) => (v.url === this.defaultApiServerUrl));\n }\n }\n if (!this.selectedServer) {\n if (this.resolvedSpec.servers) {\n this.selectedServer = this.resolvedSpec.servers[0]; // eslint-disable-line prefer-destructuring\n }\n }\n this.requestUpdate();\n // eslint-disable-next-line no-await-in-loop\n while (!await this.updateComplete);\n const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });\n this.dispatchEvent(specLoadedEvent);\n\n // Initiate IntersectionObserver and put it at the end of event loop, to allow loading all the child elements (must for larger specs)\n this.intersectionObserver.disconnect();\n if (this.renderStyle === 'read') {\n await sleep(100);\n this.observeExpandedContent(); // This will auto-highlight the selected nav-item in read-mode\n }\n\n // On first time Spec load, try to navigate to location hash if provided\n const locationHash = window.location.hash?.substring(1);\n if (locationHash) {\n const regEx = new RegExp(`^${this.routePrefix}`, 'i');\n const elementId = window.location.hash.replace(regEx, '');\n if (this.renderStyle === 'view') {\n this.expandAndGotoOperation(elementId, true, true);\n } else {\n this.scrollTo(elementId);\n }\n } else if (this.renderStyle === 'focused') {\n const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];\n this.scrollTo(defaultElementId);\n }\n }\n\n expandAndGotoOperation(elementId, scrollToElement = true) {\n if (!this.resolvedSpec) {\n return;\n }\n // Expand full operation and tag\n let isExpandingNeeded = true;\n const tmpElementId = elementId.indexOf('#') === -1 ? elementId : elementId.substring(1);\n if (tmpElementId.startsWith('overview') || tmpElementId === 'servers' || tmpElementId === 'auth') {\n isExpandingNeeded = false;\n } else {\n for (let i = 0; i < this.resolvedSpec.tags?.length; i++) {\n const tag = this.resolvedSpec.tags[i];\n const path = tag.paths?.find((p) => p.elementId === elementId);\n if (path) {\n if (path.expanded && tag.expanded) {\n isExpandingNeeded = false;\n } else {\n path.expanded = true;\n tag.expanded = true;\n }\n }\n }\n }\n if (scrollToElement) {\n // requestUpdate() and delay required, else we cant find element\n if (isExpandingNeeded) {\n this.requestUpdate();\n }\n window.setTimeout(() => {\n const gotoEl = this.shadowRoot.getElementById(tmpElementId);\n if (gotoEl) {\n gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n if (this.updateRoute === 'true') {\n window.history.replaceState(null, null, `${this.routePrefix || '#'}${tmpElementId}`);\n }\n }\n }, isExpandingNeeded ? 150 : 0);\n }\n }\n\n isValidTopId(id) {\n return (id.startsWith('overview') || id === 'servers' || id === 'auth');\n }\n\n isValidPathId(id) {\n if (id === 'overview' && this.showInfo) {\n return true;\n }\n if (id === 'servers' && this.allowServerSelection) {\n return true;\n }\n if (id === 'auth' && this.allowAuthentication) {\n return true;\n }\n if (id.startsWith('tag--')) {\n return this.resolvedSpec?.tags?.find((tag) => tag.elementId === id);\n }\n return this.resolvedSpec?.tags?.find((tag) => tag.paths.find((path) => path.elementId === id));\n }\n\n onIntersect(entries) {\n if (this.isIntersectionObserverActive === false) {\n return;\n }\n entries.forEach((entry) => {\n if (entry.isIntersecting && entry.intersectionRatio > 0) {\n const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');\n const newNavEl = this.shadowRoot.getElementById(`link-${entry.target.id}`);\n\n // Add active class in the new element\n if (newNavEl) {\n if (this.updateRoute === 'true') {\n window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix || '#'}${entry.target.id}`);\n }\n newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });\n newNavEl.classList.add('active');\n }\n // Remove active class from previous element\n if (oldNavEl) {\n oldNavEl.classList.remove('active');\n }\n }\n });\n }\n\n // Called by anchor tags created using markdown\n handleHref(e) {\n if (e.target.tagName.toLowerCase() === 'a') {\n if (e.target.getAttribute('href').startsWith('#')) {\n const gotoEl = this.shadowRoot.getElementById(e.target.getAttribute('href').replace('#', ''));\n if (gotoEl) {\n gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n }\n }\n }\n }\n\n /**\n * Called by\n * - onClick of Navigation Bar\n * - onClick of Advanced Search items\n *\n * Functionality:\n * 1. First deactivate IntersectionObserver\n * 2. Scroll to the element\n * 3. Activate IntersectionObserver (after little delay)\n *\n */\n async scrollToEventTarget(event, scrollNavItemToView = true) {\n const navEl = event.currentTarget;\n if (!navEl.dataset.contentId) {\n return;\n }\n this.isIntersectionObserverActive = false;\n this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView);\n setTimeout(() => {\n this.isIntersectionObserverActive = true;\n }, 300);\n }\n\n // Public Method (scrolls to a given path and highlights the left-nav selection)\n async scrollTo(elementId, expandPath = true, scrollNavItemToView = true) {\n if (this.renderStyle === 'focused') {\n // for focused mode update this.focusedElementId to update the rendering, else it wont find the needed html elements\n // focusedElementId will get validated in the template\n this.focusedElementId = elementId;\n await sleep(0);\n }\n if (this.renderStyle === 'view') {\n this.expandAndGotoOperation(elementId, expandPath, true);\n } else {\n let isValidElementId = false;\n const contentEl = this.shadowRoot.getElementById(elementId);\n if (contentEl) {\n isValidElementId = true;\n contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n } else {\n isValidElementId = false;\n }\n if (isValidElementId) {\n // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type\n if (this.renderStyle === 'focused') {\n const requestEl = this.shadowRoot.querySelector('api-request');\n if (requestEl) {\n requestEl.resetRequestBodySelection();\n }\n const responseEl = this.shadowRoot.querySelector('api-response');\n if (responseEl) {\n responseEl.resetSelection();\n }\n }\n\n // Update Location Hash\n if (this.updateRoute === 'true') {\n window.history.replaceState(null, null, `${this.routePrefix || '#'}${elementId}`);\n }\n\n // Update NavBar View and Styles\n const newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);\n\n if (newNavEl) {\n if (scrollNavItemToView) {\n newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });\n }\n await sleep(0);\n const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');\n if (oldNavEl) {\n oldNavEl.classList.remove('active');\n }\n newNavEl.classList.add('active'); // must add the class after scrolling\n // this.requestUpdate();\n }\n }\n }\n }\n\n // Public Method - to update security-scheme of type http\n setHttpUserNameAndPassword(securitySchemeId, username, password) {\n return applyApiKey.call(this, securitySchemeId, username, password);\n }\n\n // Public Method - to update security-scheme of type apiKey or OAuth\n setApiKey(securitySchemeId, apiKeyValue) {\n return applyApiKey.call(this, securitySchemeId, '', '', apiKeyValue);\n }\n\n // Public Method\n removeAllSecurityKeys() {\n return onClearAllApiKeys.call(this);\n }\n\n // Public Method\n setApiServer(apiServerUrl) {\n // return apiServerUrl;\n return setApiServer.call(this, apiServerUrl);\n }\n\n // Event handler for Advanced Search text-inputs and checkboxes\n onAdvancedSearch(ev, delay) {\n const eventTargetEl = ev.target;\n clearTimeout(this.timeoutId);\n this.timeoutId = setTimeout(() => {\n let searchInputEl;\n if (eventTargetEl.type === 'text') {\n searchInputEl = eventTargetEl;\n } else {\n searchInputEl = eventTargetEl.closest('.advanced-search-options').querySelector('input[type=text]');\n }\n const searcOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map((v) => v.id);\n this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searcOptions);\n }, delay);\n }\n}\ncustomElements.define('rapi-doc', RapiDoc);\n","import { css, LitElement } from 'lit';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-yaml';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-http';\nimport 'prismjs/components/prism-csharp';\n\n// Styles\nimport FontStyles from '~/styles/font-styles';\nimport InputStyles from '~/styles/input-styles';\nimport FlexStyles from '~/styles/flex-styles';\nimport TableStyles from '~/styles/table-styles';\nimport PrismStyles from '~/styles/prism-styles';\nimport TabStyles from '~/styles/tab-styles';\nimport NavStyles from '~/styles/nav-styles';\nimport InfoStyles from '~/styles/info-styles';\n\nimport EndpointStyles from '~/styles/endpoint-styles';\nimport { rapidocApiKey } from '~/utils/common-utils';\nimport ProcessSpec from '~/utils/spec-parser';\nimport mainBodyTemplate from '~/templates/main-body-template';\nimport { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';\nimport { setApiServer } from '~/templates/server-template';\n\nexport default class RapiDocMini extends LitElement {\n constructor() {\n super();\n this.isMini = true;\n this.updateRoute = 'false';\n this.renderStyle = 'view';\n this.showHeader = 'false';\n this.allowAdvancedSearch = 'false';\n }\n\n static get properties() {\n return {\n // Spec\n specUrl: { type: String, attribute: 'spec-url' },\n sortEndpointsBy: { type: String, attribute: 'sort-endpoints-by' },\n\n // UI Layouts\n layout: { type: String },\n pathsExpanded: { type: String, attribute: 'paths-expanded' },\n defaultSchemaTab: { type: String, attribute: 'default-schema-tab' },\n responseAreaHeight: { type: String, attribute: 'response-area-height' },\n showSummaryWhenCollapsed: { type: String, attribute: 'show-summary-when-collapsed' },\n fillRequestFieldsWithExample: { type: String, attribute: 'fill-request-fields-with-example' },\n useSummaryToListExamples: { type: String, attribute: 'use-summary-to-list-example' },\n persistAuth: { type: String, attribute: 'persist-auth' },\n\n // Schema Styles\n schemaStyle: { type: String, attribute: 'schema-style' },\n schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },\n\n // API Server\n apiKeyName: { type: String, attribute: 'api-key-name' },\n apiKeyLocation: { type: String, attribute: 'api-key-location' },\n apiKeyValue: { type: String, attribute: 'api-key-value' },\n defaultApiServerUrl: { type: String, attribute: 'default-api-server' },\n serverUrl: { type: String, attribute: 'server-url' },\n oauthReceiver: { type: String, attribute: 'oauth-receiver' },\n\n allowTry: { type: String, attribute: 'allow-try' },\n\n // Main Colors and Font\n theme: { type: String },\n bgColor: { type: String, attribute: 'bg-color' },\n textColor: { type: String, attribute: 'text-color' },\n primaryColor: { type: String, attribute: 'primary-color' },\n fontSize: { type: String, attribute: 'font-size' },\n regularFont: { type: String, attribute: 'regular-font' },\n monoFont: { type: String, attribute: 'mono-font' },\n loadFonts: { type: String, attribute: 'load-fonts' },\n\n // Fetch Options\n fetchCredentials: { type: String, attribute: 'fetch-credentials' },\n\n // Filters\n matchPaths: { type: String, attribute: 'match-paths' },\n matchType: { type: String, attribute: 'match-type' },\n\n // Internal Properties\n loading: { type: Boolean }, // indicates spec is being loaded\n };\n }\n\n static get styles() {\n return [\n FontStyles,\n InputStyles,\n FlexStyles,\n TableStyles,\n EndpointStyles,\n PrismStyles,\n TabStyles,\n NavStyles,\n InfoStyles,\n css`\n :host {\n display:flex;\n flex-direction: column;\n min-width:360px;\n width:100%;\n height:100%;\n margin:0;\n padding:0;\n overflow: hidden;\n letter-spacing:normal;\n color:var(--fg);\n background-color:var(--bg);\n font-family:var(--font-regular);\n }\n\n @media only screen and (min-width: 768px) {\n .only-large-screen{\n display:block;\n }\n .only-large-screen-flex{\n display:flex;\n }\n }`,\n ];\n }\n\n // Startup\n connectedCallback() {\n super.connectedCallback();\n\n if (this.loadFonts !== 'false') {\n const fontDescriptor = {\n family: 'Open Sans',\n style: 'normal',\n weight: '300',\n unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',\n };\n const fontWeight300 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontDescriptor.weight = '600';\n const fontWeight600 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontWeight300.load().then((font) => { document.fonts.add(font); });\n fontWeight600.load().then((font) => { document.fonts.add(font); });\n }\n\n if (!this.showSummaryWhenCollapsed || !'true, false,'.includes(`${this.showSummaryWhenCollapsed},`)) { this.showSummaryWhenCollapsed = 'true'; }\n if (!this.layout || !'row, column,'.includes(`${this.layout},`)) { this.layout = 'row'; }\n if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }\n if (!this.theme || !'light, dark,'.includes(`${this.theme},`)) {\n this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';\n }\n if (!this.defaultSchemaTab || !'example, schema, model,'.includes(`${this.defaultSchemaTab},`)) {\n this.defaultSchemaTab = 'example';\n } else if (this.defaultSchemaTab === 'model') {\n this.defaultSchemaTab = 'schema';\n }\n this.pathsExpanded = this.pathsExpanded === 'true';\n if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }\n if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }\n if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }\n if (!this.useSummaryToListExamples || !'true, false,'.includes(`${this.useSummaryToListExamples},`)) { this.useSummaryToListExamples = 'false'; }\n if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }\n if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }\n\n if (!this.allowTry || !'true, false,'.includes(`${this.allowTry},`)) { this.allowTry = 'true'; }\n if (!this.apiKeyValue) { this.apiKeyValue = '-'; }\n if (!this.apiKeyLocation) { this.apiKeyLocation = 'header'; }\n if (!this.apiKeyName) { this.apiKeyName = ''; }\n\n if (!this.oauthReceiver) { this.oauthReceiver = 'oauth-receiver.html'; }\n if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }\n if (!this.sortEndpointsBy || !'method, path, summary,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }\n if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }\n if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }\n\n if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }\n if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }\n\n marked.setOptions({\n highlight: (code, lang) => {\n if (Prism.languages[lang]) {\n return Prism.highlight(code, Prism.languages[lang], lang);\n }\n return code;\n },\n });\n }\n\n render() {\n return mainBodyTemplate.call(this, true, false, false, this.pathsExpanded);\n }\n\n attributeChangedCallback(name, oldVal, newVal) {\n if (name === 'spec-url') {\n if (oldVal !== newVal) {\n // put it at the end of event-loop to load all the attributes\n window.setTimeout(async () => {\n await this.loadSpec(newVal);\n }, 0);\n }\n }\n if (name === 'api-key-name' || name === 'api-key-location' || name === 'api-key-value') {\n let updateSelectedApiKey = false;\n let apiKeyName = '';\n let apiKeyLocation = '';\n let apiKeyValue = '';\n\n if (name === 'api-key-name') {\n if (this.getAttribute('api-key-location') && this.getAttribute('api-key-value')) {\n apiKeyName = newVal;\n apiKeyLocation = this.getAttribute('api-key-location');\n apiKeyValue = this.getAttribute('api-key-value');\n updateSelectedApiKey = true;\n }\n } else if (name === 'api-key-location') {\n if (this.getAttribute('api-key-name') && this.getAttribute('api-key-value')) {\n apiKeyLocation = newVal;\n apiKeyName = this.getAttribute('api-key-name');\n apiKeyValue = this.getAttribute('api-key-value');\n updateSelectedApiKey = true;\n }\n } else if (name === 'api-key-value') {\n if (this.getAttribute('api-key-name') && this.getAttribute('api-key-location')) {\n apiKeyValue = newVal;\n apiKeyLocation = this.getAttribute('api-key-location');\n apiKeyName = this.getAttribute('api-key-name');\n updateSelectedApiKey = true;\n }\n }\n\n if (updateSelectedApiKey) {\n if (this.resolvedSpec) {\n const rapiDocApiKey = this.resolvedSpec.securitySchemes.find((v) => v.securitySchemeId === rapidocApiKey);\n if (!rapiDocApiKey) {\n this.resolvedSpec.securitySchemes.push({\n apiKeyId: rapidocApiKey,\n description: 'api-key provided in rapidoc element attributes',\n type: 'apiKey',\n name: apiKeyName,\n in: apiKeyLocation,\n value: apiKeyValue,\n finalKeyValue: apiKeyValue,\n });\n } else {\n rapiDocApiKey.name = apiKeyName;\n rapiDocApiKey.in = apiKeyLocation;\n rapiDocApiKey.value = apiKeyValue;\n rapiDocApiKey.finalKeyValue = apiKeyValue;\n }\n this.requestUpdate();\n }\n }\n }\n super.attributeChangedCallback(name, oldVal, newVal);\n }\n\n onSepcUrlChange() {\n this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);\n }\n\n // Public Method\n async loadSpec(specUrl) {\n if (!specUrl) {\n return;\n }\n try {\n this.resolvedSpec = {\n specLoadError: false,\n isSpecLoading: true,\n tags: [],\n };\n this.loading = true;\n this.loadFailed = false;\n this.requestUpdate();\n const spec = await ProcessSpec.call(\n this,\n specUrl,\n this.generateMissingTags === 'true',\n this.sortTags === 'true',\n this.getAttribute('sort-endpoints-by'),\n this.getAttribute('api-key-name'),\n this.getAttribute('api-key-location'),\n this.getAttribute('api-key-value'),\n this.getAttribute('server-url'),\n );\n this.loading = false;\n this.afterSpecParsedAndValidated(spec);\n } catch (err) {\n this.loading = false;\n this.loadFailed = true;\n this.resolvedSpec = null;\n console.error(`RapiDoc: Unable to resolve the API spec.. ${err.message}`); // eslint-disable-line no-console\n }\n }\n\n // Public Method - to update security-scheme of type http\n setHttpUserNameAndPassword(securitySchemeId, username, password) {\n return applyApiKey.call(this, securitySchemeId, username, password);\n }\n\n // Public Method - to update security-scheme of type apiKey or OAuth\n setApiKey(securitySchemeId, apiKeyValue) {\n return applyApiKey.call(this, securitySchemeId, '', '', apiKeyValue);\n }\n\n // Public Method\n removeAllSecurityKeys() {\n return onClearAllApiKeys.call(this);\n }\n\n // Public Method\n setApiServer(apiServerUrl) {\n // return apiServerUrl;\n return setApiServer.call(this, apiServerUrl);\n }\n\n async afterSpecParsedAndValidated(spec) {\n this.resolvedSpec = spec;\n this.selectedServer = undefined;\n if (this.defaultApiServerUrl) {\n if (this.defaultApiServerUrl === this.serverUrl) {\n this.selectedServer = {\n url: this.serverUrl,\n computedUrl: this.serverUrl,\n };\n } else if (this.resolvedSpec.servers) {\n this.selectedServer = this.resolvedSpec.servers.find((v) => (v.url === this.defaultApiServerUrl));\n }\n }\n if (!this.selectedServer) {\n if (this.resolvedSpec.servers) {\n this.selectedServer = this.resolvedSpec.servers[0]; // eslint-disable-line prefer-destructuring\n }\n }\n this.requestUpdate();\n // eslint-disable-next-line no-await-in-loop\n while (!await this.updateComplete);\n const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });\n this.dispatchEvent(specLoadedEvent);\n }\n\n // Called by anchor tags created using markdown\n handleHref(e) {\n if (e.target.tagName.toLowerCase() === 'a') {\n if (e.target.getAttribute('href').startsWith('#')) {\n const gotoEl = this.shadowRoot.getElementById(e.target.getAttribute('href').replace('#', ''));\n if (gotoEl) {\n gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n }\n }\n }\n }\n}\ncustomElements.define('rapi-doc-mini', RapiDocMini);\n","import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions\nimport { marked } from 'marked';\n\n// Templates\nimport overviewTemplate from '~/templates/overview-template';\nimport headerTemplate from '~/templates/header-template';\nimport { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';\nimport '~/components/json-tree';\nimport '~/components/schema-tree';\nimport SetTheme from '~/utils/theme';\nimport { isValidHexColor } from '~/utils/color-utils';\n\n/* eslint-disable indent */\n// Json Schema Nav Template\nfunction jsonSchemaNavTemplate() {\n return html`\n
\n \n ${this.resolvedSpec.schemaAndExamples.map((v) => html`\n \n ${v.name}\n
`)\n }\n \n \n `;\n}\n\n// Json Schema Body Template\nfunction jsonSchemaBodyTemplate() {\n return html`\n ${this.showInfo === 'true' ? overviewTemplate.call(this) : ''}\n
\n ${this.resolvedSpec.schemaAndExamples.map((jSchemaBody) => {\n const examplesObj = generateExample(jSchemaBody.schema, 'json', jSchemaBody.examples, jSchemaBody.example, true, false, 'json', true);\n jSchemaBody.selectedExample = examplesObj[0]?.exampleId;\n return html`\n
\n \n
${jSchemaBody.name}
\n
${unsafeHTML(marked(jSchemaBody.description || ''))} \n
\n
\n \n
\n
\n ${examplesObj.length > 1\n ? html`
\n ${examplesObj.map((v) => html`\n \n ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary}\n `)\n }\n `\n : html`
${examplesObj[0].exampleSummary}
`\n }\n ${examplesObj.map((v) => html`\n
`)\n }\n
\n
`;\n })\n }\n
\n `;\n}\n/* eslint-enable indent */\n\n// Json Schema Root Template\nexport default function jsonSchemaViewerTemplate(isMini = false) {\n// export default function jsonSchemaViewerTemplate(isMini = false, showExpandCollapse = true, showTags = true, pathsExpanded = false) {\n if (!this.resolvedSpec) {\n return '';\n }\n const newTheme = {\n bg1: isValidHexColor(this.bgColor) ? this.bgColor : '',\n fg1: isValidHexColor(this.textColor) ? this.textColor : '',\n headerColor: isValidHexColor(this.headerColor) ? this.headerColor : '',\n primaryColor: isValidHexColor(this.primaryColor) ? this.primaryColor : '',\n navBgColor: isValidHexColor(this.navBgColor) ? this.navBgColor : '',\n navTextColor: isValidHexColor(this.navTextColor) ? this.navTextColor : '',\n navHoverBgColor: isValidHexColor(this.navHoverBgColor) ? this.navHoverBgColor : '',\n navHoverTextColor: isValidHexColor(this.navHoverTextColor) ? this.navHoverTextColor : '',\n navAccentColor: isValidHexColor(this.navAccentColor) ? this.navAccentColor : '',\n };\n /* eslint-disable indent */\n if (this.resolvedSpec.specLoadError) {\n if (isMini) {\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n
${this.resolvedSpec.info.description}
\n `;\n }\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n \n ${headerTemplate.call(this)}\n
Header \n
\n \n
${this.resolvedSpec.info.title} \n
${this.resolvedSpec.info.description}
\n
\n `;\n }\n if (this.resolvedSpec.isSpecLoading) {\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n
\n \n `;\n }\n\n return html`\n ${this.theme === 'dark' ? SetTheme.call(this, 'dark', newTheme) : SetTheme.call(this, 'light', newTheme)}\n\n \n ${this.showHeader === 'false' ? '' : headerTemplate.call(this)}\n \n
\n\n \n ${jsonSchemaNavTemplate.call(this)}\n\n \n
\n \n ${this.loading === true\n ? html`
`\n : html`\n ${this.loadFailed === true\n ? html`
Unable to load the Spec
`\n : html`\n
{ this.handleHref(e); }}\">\n ${jsonSchemaBodyTemplate.call(this)}\n
\n `\n }`\n }\n
\n
\n `;\n}\n/* eslint-enable indent */\n","export default class OauthReceiver extends HTMLElement {\n connectedCallback() {\n this.receiveAuthParms();\n window.addEventListener('storage', (e) => this.receiveStorage(e), true);\n }\n\n /**\n * Read OAuth2 parameters and sends them off\n * to the window opener through `window.postMessage`.\n */\n receiveAuthParms() {\n let authData = {};\n if (document.location.search) { // Applies to authorizationCode flow\n const params = new URLSearchParams(document.location.search);\n const code = params.get('code');\n const error = params.get('error');\n const state = params.get('state');\n authData = {\n code,\n error,\n state,\n responseType: 'code',\n };\n } else if (window.location.hash) { // Applies to Implicit flow\n const token_type = this.parseQueryString(window.location.hash.substring(1), 'token_type'); // eslint-disable-line camelcase\n const access_token = this.parseQueryString(window.location.hash.substring(1), 'access_token'); // eslint-disable-line camelcase\n authData = { token_type, access_token, responseType: 'token' }; // eslint-disable-line camelcase\n }\n\n if (window.opener) {\n window.opener.postMessage(authData, this.target);\n return;\n }\n sessionStorage.setItem('rapidoc-oauth-data', JSON.stringify(authData)); // Fallback to session storage if window.opener dont exist\n }\n\n relayAuthParams(e) {\n if (window.parent) {\n if (e.key === 'rapidoc-oauth-data') {\n const authData = JSON.parse(e.newValue);\n window.parent.postMessage(authData, this.target);\n }\n }\n }\n\n parseQueryString(queryString, key) {\n const vars = queryString.split('&');\n for (let i = 0; i < vars.length; i++) {\n const pair = vars[i].split('=');\n if (decodeURIComponent(pair[0]) === key) {\n return decodeURIComponent(pair[1]);\n }\n }\n }\n}\ncustomElements.define('oauth-receiver', OauthReceiver);\n","import { css, LitElement } from 'lit';\nimport { marked } from 'marked';\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-yaml';\nimport 'prismjs/components/prism-go';\nimport 'prismjs/components/prism-java';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-bash';\nimport 'prismjs/components/prism-python';\nimport 'prismjs/components/prism-http';\nimport 'prismjs/components/prism-csharp';\n\n// Styles\nimport FontStyles from '~/styles/font-styles';\nimport InputStyles from '~/styles/input-styles';\nimport FlexStyles from '~/styles/flex-styles';\nimport TableStyles from '~/styles/table-styles';\nimport PrismStyles from '~/styles/prism-styles';\nimport TabStyles from '~/styles/tab-styles';\nimport NavStyles from '~/styles/nav-styles';\nimport InfoStyles from '~/styles/info-styles';\n\nimport EndpointStyles from '~/styles/endpoint-styles';\nimport ProcessSpec from '~/utils/spec-parser';\nimport jsonSchemaViewerTemplate from '~/templates/json-schema-viewer-template';\n\nexport default class JsonSchemaViewer extends LitElement {\n constructor() {\n super();\n this.isMini = false;\n this.updateRoute = 'false';\n this.renderStyle = 'focused';\n this.showHeader = 'true';\n this.allowAdvancedSearch = 'false';\n this.selectedExampleForEachSchema = {};\n }\n\n static get properties() {\n return {\n // Spec\n specUrl: { type: String, attribute: 'spec-url' },\n\n // Schema Styles\n schemaStyle: { type: String, attribute: 'schema-style' },\n schemaExpandLevel: { type: Number, attribute: 'schema-expand-level' },\n schemaDescriptionExpanded: { type: String, attribute: 'schema-description-expanded' },\n allowSchemaDescriptionExpandToggle: { type: String, attribute: 'allow-schema-description-expand-toggle' },\n\n // Hide/show Sections\n showHeader: { type: String, attribute: 'show-header' },\n showSideNav: { type: String, attribute: 'show-side-nav' },\n showInfo: { type: String, attribute: 'show-info' },\n\n // Allow or restrict features\n allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },\n allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },\n allowSpecFileDownload: { type: String, attribute: 'allow-spec-file-download' },\n allowSearch: { type: String, attribute: 'allow-search' },\n\n // Main Colors and Font\n theme: { type: String },\n bgColor: { type: String, attribute: 'bg-color' },\n textColor: { type: String, attribute: 'text-color' },\n primaryColor: { type: String, attribute: 'primary-color' },\n fontSize: { type: String, attribute: 'font-size' },\n regularFont: { type: String, attribute: 'regular-font' },\n monoFont: { type: String, attribute: 'mono-font' },\n loadFonts: { type: String, attribute: 'load-fonts' },\n\n // Internal Properties\n loading: { type: Boolean }, // indicates spec is being loaded\n };\n }\n\n static get styles() {\n return [\n FontStyles,\n InputStyles,\n FlexStyles,\n TableStyles,\n EndpointStyles,\n PrismStyles,\n TabStyles,\n NavStyles,\n InfoStyles,\n css`\n :host {\n display:flex;\n flex-direction: column;\n min-width:360px;\n width:100%;\n height:100%;\n margin:0;\n padding:0;\n overflow: hidden;\n letter-spacing:normal;\n color:var(--fg);\n background-color:var(--bg);\n font-family:var(--font-regular);\n }\n .body {\n display:flex;\n height:100%;\n width:100%;\n overflow:hidden;\n }\n .nav-bar {\n width: 230px;\n display:flex;\n }\n\n .main-content { \n margin:0;\n padding: 16px; \n display:block;\n flex:1;\n height:100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-width: thin;\n scrollbar-color: var(--border-color) transparent;\n }\n .main-content-inner--view-mode {\n padding: 0 8px;\n }\n .main-content::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n .main-content::-webkit-scrollbar-track {\n background:transparent;\n }\n .main-content::-webkit-scrollbar-thumb {\n background-color: var(--border-color);\n }\n .main-header {\n background-color:var(--header-bg);\n color:var(--header-fg);\n width:100%;\n }\n .header-title {\n font-size:calc(var(--font-size-regular) + 8px); \n padding:0 8px;\n }\n input.header-input{\n background:var(--header-color-darker);\n color:var(--header-fg);\n border:1px solid var(--header-color-border);\n flex:1; \n padding-right:24px;\n border-radius:3px;\n }\n input.header-input::placeholder {\n opacity:0.4;\n }\n .loader {\n margin: 16px auto 16px auto; \n border: 4px solid var(--bg3);\n border-radius: 50%;\n border-top: 4px solid var(--primary-color);\n width: 36px;\n height: 36px;\n animation: spin 2s linear infinite;\n }\n @media only screen and (min-width: 768px) {\n .only-large-screen{\n display:block;\n }\n .only-large-screen-flex{\n display:flex;\n }\n }`,\n ];\n }\n\n // Startup\n connectedCallback() {\n super.connectedCallback();\n const parent = this.parentElement;\n if (parent) {\n if (parent.offsetWidth === 0 && parent.style.width === '') {\n parent.style.width = '100vw';\n }\n if (parent.offsetHeight === 0 && parent.style.height === '') {\n parent.style.height = '100vh';\n }\n if (parent.tagName === 'BODY') {\n if (!parent.style.marginTop) { parent.style.marginTop = '0'; }\n if (!parent.style.marginRight) { parent.style.marginRight = '0'; }\n if (!parent.style.marginBottom) { parent.style.marginBottom = '0'; }\n if (!parent.style.marginLeft) { parent.style.marginLeft = '0'; }\n }\n }\n\n if (this.loadFonts !== 'false') {\n const fontDescriptor = {\n family: 'Open Sans',\n style: 'normal',\n weight: '300',\n unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',\n };\n const fontWeight300 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontDescriptor.weight = '600';\n const fontWeight600 = new FontFace(\n 'Open Sans',\n \"url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')\",\n fontDescriptor,\n );\n fontWeight300.load().then((font) => { document.fonts.add(font); });\n fontWeight600.load().then((font) => { document.fonts.add(font); });\n }\n\n this.renderStyle = 'focused';\n this.pathsExpanded = this.pathsExpanded === 'true';\n\n if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }\n if (!this.showSideNav || !'true false'.includes(this.showSideNav)) { this.showSideNav = 'true'; }\n if (!this.showHeader || !'true, false,'.includes(`${this.showHeader},`)) { this.showHeader = 'true'; }\n\n if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }\n if (!this.theme || !'light, dark,'.includes(`${this.theme},`)) {\n this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';\n }\n if (!this.allowSearch || !'true, false,'.includes(`${this.allowSearch},`)) { this.allowSearch = 'true'; }\n if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }\n if (!this.schemaDescriptionExpanded || !'true, false,'.includes(`${this.schemaDescriptionExpanded},`)) { this.schemaDescriptionExpanded = 'false'; }\n if (!this.responseAreaHeight) { this.responseAreaHeight = '300px'; }\n if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }\n if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }\n if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }\n\n marked.setOptions({\n highlight: (code, lang) => {\n if (Prism.languages[lang]) {\n return Prism.highlight(code, Prism.languages[lang], lang);\n }\n return code;\n },\n });\n }\n\n render() {\n return jsonSchemaViewerTemplate.call(this, true, false, false, this.pathsExpanded);\n }\n\n attributeChangedCallback(name, oldVal, newVal) {\n if (name === 'spec-url') {\n if (oldVal !== newVal) {\n // put it at the end of event-loop to load all the attributes\n window.setTimeout(async () => {\n await this.loadSpec(newVal);\n }, 0);\n }\n }\n super.attributeChangedCallback(name, oldVal, newVal);\n }\n\n onSepcUrlChange() {\n this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);\n }\n\n onSearchChange(e) {\n // Todo: Filter Search\n this.matchPaths = e.target.value;\n }\n\n // Public Method\n async loadSpec(specUrl) {\n if (!specUrl) {\n return;\n }\n try {\n this.resolvedSpec = {\n specLoadError: false,\n isSpecLoading: true,\n tags: [],\n };\n this.loading = true;\n this.loadFailed = false;\n this.requestUpdate();\n const spec = await ProcessSpec.call(\n this,\n specUrl,\n this.generateMissingTags === 'true',\n this.sortTags === 'true',\n this.getAttribute('sort-endpoints-by'),\n );\n this.loading = false;\n this.afterSpecParsedAndValidated(spec);\n } catch (err) {\n this.loading = false;\n this.loadFailed = true;\n this.resolvedSpec = null;\n console.error(`RapiDoc: Unable to resolve the API spec.. ${err.message}`); // eslint-disable-line no-console\n }\n }\n\n async afterSpecParsedAndValidated(spec) {\n this.resolvedSpec = spec;\n const specLoadedEvent = new CustomEvent('spec-loaded', { detail: spec });\n this.dispatchEvent(specLoadedEvent);\n }\n\n // Called by anchor tags created using markdown\n handleHref(e) {\n if (e.target.tagName.toLowerCase() === 'a') {\n if (e.target.getAttribute('href').startsWith('#')) {\n const gotoEl = this.shadowRoot.getElementById(e.target.getAttribute('href').replace('#', ''));\n if (gotoEl) {\n gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n }\n }\n }\n }\n\n // Example Dropdown @change Handler\n onSelectExample(e) {\n const exampleContainerEl = e.target.closest('.json-schema-example-panel');\n const exampleEls = [...exampleContainerEl.querySelectorAll('.example')];\n exampleEls.forEach((v) => {\n v.style.display = v.dataset.example === e.target.value ? 'flex' : 'none';\n });\n }\n\n async scrollToEventTarget(event) {\n const navEl = event.currentTarget;\n if (!navEl.dataset.contentId) {\n return;\n }\n const contentEl = this.shadowRoot.getElementById(navEl.dataset.contentId);\n if (contentEl) {\n contentEl.scrollIntoView({ behavior: 'auto', block: 'start' });\n }\n }\n}\ncustomElements.define('json-schema-viewer', JsonSchemaViewer);\n"],"names":[],"sourceRoot":""}