mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-12-04 21:23:07 +00:00
3670 lines
618 KiB
JavaScript
3670 lines
618 KiB
JavaScript
|
/*! RapiDoc 9.2.0-beta | Author - Mrinmoy Majumdar | License information can be found in rapidoc-min.js.LICENSE.txt */
|
||
|
|
(()=>{var e,t,r={448:(e,t,r)=>{"use strict";const n=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),a=new Map;class i{constructor(e,t){if(this._$cssResult$=!0,t!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){let e=a.get(this.cssText);return n&&void 0===e&&(a.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const s=e=>new i("string"==typeof e?e:e+"",o),l=(e,...t)=>{const r=1===e.length?e[0]:t.reduce(((t,r,n)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+e[n+1]),e[0]);return new i(r,o)},c=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const r of e.cssRules)t+=r.cssText;return s(t)})(e):e;var p;const u=window.trustedTypes,d=u?u.emptyScript:"",h=window.reactiveElementPolyfillSupport,f={toAttribute(e,t){switch(t){case Boolean:e=e?d:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let r=e;switch(t){case Boolean:r=null!==e;break;case Number:r=null===e?null:Number(e);break;case Object:case Array:try{r=JSON.parse(e)}catch(e){r=null}}return r}},m=(e,t)=>t!==e&&(t==t||e==e),y={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:m};class g extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o()}static addInitializer(e){var t;null!==(t=this.l)&&void 0!==t||(this.l=[]),this.l.push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach(((t,r)=>{const n=this._$Eh(r,t);void 0!==n&&(this._$Eu.set(n,r),e.push(n))})),e}static createProperty(e,t=y){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const r="symbol"==typeof e?Symbol():"__"+e,n=this.getPropertyDescriptor(e,r,t);void 0!==n&&Object.defineProperty(this.prototype,e,n)}}static getPropertyDescriptor(e,t,r){return{get(){return this[t]},set(n){const o=this[e];this[t]=n,this.requestUpdate(e,o,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||y}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),this.elementProperties=new Map(e.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const r of t)this.createProperty(r,e[r])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const r=new Set(e.flat(1/0).reverse());for(const e of r)t.unshift(c(e))}else void 0!==e&&t.push(c(e));return t}static _$Eh(e,t){const r=t.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof e?e.toLowerCase():void 0}o(){var e;this._$Ep=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(e=this.constructor.l)||void 0===e||e.forEach((e=>e(this)))}addController(e){var t,r;(null!==(t=this._$Eg)&&void 0!==t?t:this._$Eg=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(r=e.hostConnected)||void 0===r||r.call(e))}removeController(e){var t;null===(t=this._$Eg)||void 0===t||t.splice(this._$Eg.indexOf(e)>>>0,1)}_$Em(){this.constructor.elementProperties.forEach(((e,t)=>{this.hasOwnProperty(t)&&(this._$Et.set(t,this[t]),delete this[t])}))}createRenderRoot(){var e;const t=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{n?e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet)):t.forEach((t=>{const r=document.createElement("style"),n=window.litNonce;void 0!==n&&r.setAttribute("nonc
|
||
|
|
.hover-bg:hover{
|
||
|
|
background: var(--bg3);
|
||
|
|
}
|
||
|
|
::selection {
|
||
|
|
background: var(--selection-bg);
|
||
|
|
color: var(--selection-fg);
|
||
|
|
}
|
||
|
|
.regular-font{
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
}
|
||
|
|
.mono-font {
|
||
|
|
font-family:var(--font-mono);
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: calc(var(--font-size-small) + 18px);
|
||
|
|
font-weight: normal
|
||
|
|
}
|
||
|
|
.sub-title{ font-size: 20px;}
|
||
|
|
.req-res-title {
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
font-size: calc(var(--font-size-small) + 4px);
|
||
|
|
font-weight:bold;
|
||
|
|
margin-bottom:8px;
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
.tiny-title {
|
||
|
|
font-size:calc(var(--font-size-small) + 1px);
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
.regular-font-size { font-size: var(--font-size-regular); }
|
||
|
|
.small-font-size { font-size: var(--font-size-small); }
|
||
|
|
.upper { text-transform: uppercase; }
|
||
|
|
.primary-text{ color: var(--primary-color); }
|
||
|
|
.bold-text { font-weight:bold; }
|
||
|
|
.gray-text { color: var(--light-fg); }
|
||
|
|
.red-text {color: var(--red)}
|
||
|
|
.blue-text {color: var(--blue)}
|
||
|
|
.multiline {
|
||
|
|
overflow: scroll;
|
||
|
|
max-height: var(--resp-area-height, 300px);
|
||
|
|
color: var(--fg3);
|
||
|
|
}
|
||
|
|
.method-fg.put { color: var(--orange); }
|
||
|
|
.method-fg.post { color: var(--green); }
|
||
|
|
.method-fg.get { color: var(--blue); }
|
||
|
|
.method-fg.delete { color: var(--red); }
|
||
|
|
.method-fg.options,
|
||
|
|
.method-fg.head,
|
||
|
|
.method-fg.patch {
|
||
|
|
color: var(--yellow);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1{ font-family:var(--font-regular); font-size:28px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
h2{ font-family:var(--font-regular); font-size:24px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
h3{ font-family:var(--font-regular); font-size:18px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
h4{ font-family:var(--font-regular); font-size:16px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
h5{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
h6{ font-family:var(--font-regular); font-size:14px; padding-top: 10px; letter-spacing:normal; font-weight:normal; }
|
||
|
|
|
||
|
|
h1,h2,h3,h4,h5,h5{
|
||
|
|
margin-block-end: 0.2em;
|
||
|
|
}
|
||
|
|
p { margin-block-start: 0.5em; }
|
||
|
|
a { color: var(--blue); cursor:pointer; }
|
||
|
|
a.inactive-link {
|
||
|
|
color:var(--fg);
|
||
|
|
text-decoration: none;
|
||
|
|
cursor:text;
|
||
|
|
}
|
||
|
|
|
||
|
|
code,
|
||
|
|
pre {
|
||
|
|
margin: 0px;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: calc(var(--font-size-mono) - 1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown,
|
||
|
|
.m-markdown-small {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown p,
|
||
|
|
.m-markdown span {
|
||
|
|
font-size: var(--font-size-regular);
|
||
|
|
line-height:calc(var(--font-size-regular) + 8px);
|
||
|
|
}
|
||
|
|
.m-markdown li {
|
||
|
|
font-size: var(--font-size-regular);
|
||
|
|
line-height:calc(var(--font-size-regular) + 10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small p,
|
||
|
|
.m-markdown-small span,
|
||
|
|
.m-markdown-small li {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
line-height: calc(var(--font-size-small) + 6px);
|
||
|
|
}
|
||
|
|
.m-markdown-small li {
|
||
|
|
line-height: calc(var(--font-size-small) + 8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown p:not(:first-child) {
|
||
|
|
margin-block-start: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small p:not(:first-child) {
|
||
|
|
margin-block-start: 12px;
|
||
|
|
}
|
||
|
|
.m-markdown-small p:first-child {
|
||
|
|
margin-block-start: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown p,
|
||
|
|
.m-markdown-small p {
|
||
|
|
margin-block-end: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown code span {
|
||
|
|
font-size:var(--font-size-mono);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small code,
|
||
|
|
.m-markdown code {
|
||
|
|
padding: 1px 6px;
|
||
|
|
border-radius: 2px;
|
||
|
|
color: var(--inline-code-fg);
|
||
|
|
background-color: var(--bg3);
|
||
|
|
font-size: calc(var(--font-size-mono));
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small code {
|
||
|
|
font-size: calc(var(--font-size-mono) - 1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small pre,
|
||
|
|
.m-markdown pre {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
overflow-x: auto;
|
||
|
|
line-height: normal;
|
||
|
|
border-radius: 2px;
|
||
|
|
border: 1px solid var(--code-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown pre {
|
||
|
|
padding: 12px;
|
||
|
|
background-color: var(--code-bg);
|
||
|
|
color:var(--code-fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small pre {
|
||
|
|
margin-top: 4px;
|
||
|
|
padding: 2px 4px;
|
||
|
|
background-color: var(--bg3);
|
||
|
|
color: var(--fg2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small pre code,
|
||
|
|
.m-markdown pre code {
|
||
|
|
border:none;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown pre code {
|
||
|
|
color: var(--code-fg);
|
||
|
|
background-color: var(--code-bg);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small pre code {
|
||
|
|
color: var(--fg2);
|
||
|
|
background-color: var(--bg3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown ul,
|
||
|
|
.m-markdown ol {
|
||
|
|
padding-inline-start: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small ul,
|
||
|
|
.m-markdown-small ol {
|
||
|
|
padding-inline-start: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small a,
|
||
|
|
.m-markdown a {
|
||
|
|
color:var(--blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small img,
|
||
|
|
.m-markdown img {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Markdown table */
|
||
|
|
|
||
|
|
.m-markdown-small table,
|
||
|
|
.m-markdown table {
|
||
|
|
border-spacing: 0;
|
||
|
|
margin: 10px 0;
|
||
|
|
border-collapse: separate;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
font-size: calc(var(--font-size-small) + 1px);
|
||
|
|
line-height: calc(var(--font-size-small) + 4px);
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small table {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
line-height: calc(var(--font-size-small) + 2px);
|
||
|
|
margin: 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small td,
|
||
|
|
.m-markdown-small th,
|
||
|
|
.m-markdown td,
|
||
|
|
.m-markdown th {
|
||
|
|
vertical-align: top;
|
||
|
|
border-top: 1px solid var(--border-color);
|
||
|
|
line-height: calc(var(--font-size-small) + 4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small tr:first-child th,
|
||
|
|
.m-markdown tr:first-child th {
|
||
|
|
border-top: 0 none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown th,
|
||
|
|
.m-markdown td {
|
||
|
|
padding: 10px 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small th,
|
||
|
|
.m-markdown-small td {
|
||
|
|
padding: 8px 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown th,
|
||
|
|
.m-markdown-small th {
|
||
|
|
font-weight: 600;
|
||
|
|
background-color: var(--bg2);
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown-small table code {
|
||
|
|
font-size: calc(var(--font-size-mono) - 2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown table code {
|
||
|
|
font-size: calc(var(--font-size-mono) - 1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-markdown blockquote,
|
||
|
|
.m-markdown-small blockquote {
|
||
|
|
margin-inline-start: 0;
|
||
|
|
margin-inline-end: 0;
|
||
|
|
border-left: 3px solid var(--border-color);
|
||
|
|
padding: 6px 0 6px 6px;
|
||
|
|
}
|
||
|
|
.m-markdown hr{
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
`,Ve=l`
|
||
|
|
/* Button */
|
||
|
|
.m-btn {
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
font-weight: 600;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 6px 16px;
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
outline: 0;
|
||
|
|
line-height: 1;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
border: 2px solid var(--primary-color);
|
||
|
|
background-color:transparent;
|
||
|
|
transition: background-color 0.2s;
|
||
|
|
user-select: none;
|
||
|
|
cursor: pointer;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||
|
|
}
|
||
|
|
.m-btn.primary {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--primary-color-invert);
|
||
|
|
}
|
||
|
|
.m-btn.thin-border { border-width: 1px; }
|
||
|
|
.m-btn.large { padding:8px 14px; }
|
||
|
|
.m-btn.small { padding:5px 12px; }
|
||
|
|
.m-btn.tiny { padding:5px 6px; }
|
||
|
|
.m-btn.circle { border-radius: 50%; }
|
||
|
|
.m-btn:hover {
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--primary-color-invert);
|
||
|
|
}
|
||
|
|
.m-btn.nav { border: 2px solid var(--nav-accent-color); }
|
||
|
|
.m-btn.nav:hover {
|
||
|
|
background-color: var(--nav-accent-color);
|
||
|
|
}
|
||
|
|
.m-btn:disabled{
|
||
|
|
background-color: var(--bg3);
|
||
|
|
color: var(--fg3);
|
||
|
|
border-color: var(--fg3);
|
||
|
|
cursor: not-allowed;
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
.toolbar-btn{
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 4px;
|
||
|
|
margin:0 2px;
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
min-width: 50px;
|
||
|
|
color: var(--primary-color-invert);
|
||
|
|
border-radius: 2px;
|
||
|
|
border: none;
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
input, textarea, select, button, pre {
|
||
|
|
color:var(--fg);
|
||
|
|
outline: none;
|
||
|
|
background-color: var(--input-bg);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Form Inputs */
|
||
|
|
pre,
|
||
|
|
select,
|
||
|
|
textarea,
|
||
|
|
input[type="file"],
|
||
|
|
input[type="text"],
|
||
|
|
input[type="password"] {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
transition: border .2s;
|
||
|
|
padding: 6px 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
select {
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
padding: 5px 30px 5px 5px;
|
||
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");
|
||
|
|
background-position: calc(100% - 5px) center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 10px;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
-moz-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
select:hover {
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea::placeholder,
|
||
|
|
input[type="text"]::placeholder,
|
||
|
|
input[type="password"]::placeholder {
|
||
|
|
color: var(--placeholder-color);
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
select:focus,
|
||
|
|
textarea:focus,
|
||
|
|
input[type="text"]:focus,
|
||
|
|
input[type="password"]:focus,
|
||
|
|
textarea:active,
|
||
|
|
input[type="text"]:active,
|
||
|
|
input[type="password"]:active {
|
||
|
|
border:1px solid var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="file"]{
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
padding:2px;
|
||
|
|
cursor:pointer;
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
min-height: calc(var(--font-size-small) + 18px);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="file"]::-webkit-file-upload-button {
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
outline: none;
|
||
|
|
cursor:pointer;
|
||
|
|
padding: 3px 8px;
|
||
|
|
border: 1px solid var(--primary-color);
|
||
|
|
background-color: var(--primary-color);
|
||
|
|
color: var(--primary-color-invert);
|
||
|
|
border-radius: var(--border-radius);;
|
||
|
|
-webkit-appearance: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre,
|
||
|
|
textarea {
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: var(--border-color) var(--input-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
pre::-webkit-scrollbar,
|
||
|
|
textarea::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre::-webkit-scrollbar-track,
|
||
|
|
textarea::-webkit-scrollbar-track {
|
||
|
|
background:var(--input-bg);
|
||
|
|
}
|
||
|
|
|
||
|
|
pre::-webkit-scrollbar-thumb,
|
||
|
|
textarea::-webkit-scrollbar-thumb {
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link {
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
text-decoration: underline;
|
||
|
|
color:var(--blue);
|
||
|
|
font-family:var(--font-mono);
|
||
|
|
margin-bottom:2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"]:focus{
|
||
|
|
outline:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Toggle Body */
|
||
|
|
input[type="checkbox"] {
|
||
|
|
appearance: none;
|
||
|
|
display: inline-block;
|
||
|
|
background-color: var(--light-bg);
|
||
|
|
border: 1px solid var(--light-bg);
|
||
|
|
border-radius: 9px;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 18px;
|
||
|
|
position: relative;
|
||
|
|
transition: border .25s .15s, box-shadow .25s .3s, padding .25s;
|
||
|
|
min-width: 36px;
|
||
|
|
width: 36px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
/* Toggle Thumb */
|
||
|
|
input[type="checkbox"]:after {
|
||
|
|
position: absolute;
|
||
|
|
background-color: var(--bg);
|
||
|
|
border: 1px solid var(--light-bg);
|
||
|
|
border-radius: 8px;
|
||
|
|
content: '';
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
right: 16px;
|
||
|
|
display: block;
|
||
|
|
height: 16px;
|
||
|
|
transition: border .25s .15s, left .25s .1s, right .15s .175s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Toggle Body - Checked */
|
||
|
|
input[type="checkbox"]:checked {
|
||
|
|
box-shadow: inset 0 0 0 13px var(--green);
|
||
|
|
border-color: var(--green);
|
||
|
|
}
|
||
|
|
/* Toggle Thumb - Checked*/
|
||
|
|
input[type="checkbox"]:checked:after {
|
||
|
|
border: 1px solid var(--green);
|
||
|
|
left: 16px;
|
||
|
|
right: 1px;
|
||
|
|
transition: border .25s, left .15s .25s, right .25s .175s;
|
||
|
|
}
|
||
|
|
`,Ge=l`
|
||
|
|
.row, .col{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
.row {
|
||
|
|
align-items:center;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.col {
|
||
|
|
align-items:stretch;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
`,Ke=l`
|
||
|
|
.m-table {
|
||
|
|
border-spacing: 0;
|
||
|
|
border-collapse: separate;
|
||
|
|
border: 1px solid var(--light-border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
margin: 0;
|
||
|
|
max-width: 100%;
|
||
|
|
direction: ltr;
|
||
|
|
}
|
||
|
|
.m-table tr:first-child td,
|
||
|
|
.m-table tr:first-child th {
|
||
|
|
border-top: 0 none;
|
||
|
|
}
|
||
|
|
.m-table td,
|
||
|
|
.m-table th {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
line-height: calc(var(--font-size-small) + 4px);
|
||
|
|
padding: 4px 5px 4px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-table.padded-12 td,
|
||
|
|
.m-table.padded-12 th {
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-table td:not([align]),
|
||
|
|
.m-table th:not([align]) {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-table th {
|
||
|
|
color: var(--fg2);
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
line-height: calc(var(--font-size-small) + 18px);
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: normal;
|
||
|
|
background-color: var(--bg2);
|
||
|
|
vertical-align: bottom;
|
||
|
|
border-bottom: 1px solid var(--light-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-table > tbody > tr > td,
|
||
|
|
.m-table > tr > td {
|
||
|
|
border-top: 1px solid var(--light-border-color);
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.table-title {
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
font-weight:bold;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin: 12px 0 4px 0;
|
||
|
|
}
|
||
|
|
`,Je=l`
|
||
|
|
.only-large-screen { display:none; }
|
||
|
|
.endpoint-head .path{
|
||
|
|
display: flex;
|
||
|
|
font-family:var(--font-mono);
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
align-items: center;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-head .descr {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
color:var(--light-fg);
|
||
|
|
font-weight:400;
|
||
|
|
align-items: center;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
word-break: break-all;
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-endpoint.expanded{margin-bottom:16px; }
|
||
|
|
.m-endpoint > .endpoint-head{
|
||
|
|
border-width:1px 1px 1px 5px;
|
||
|
|
border-style:solid;
|
||
|
|
border-color:transparent;
|
||
|
|
border-top-color:var(--light-border-color);
|
||
|
|
display:flex;
|
||
|
|
padding:6px 16px;
|
||
|
|
align-items: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.m-endpoint > .endpoint-head.put:hover,
|
||
|
|
.m-endpoint > .endpoint-head.put.expanded{
|
||
|
|
border-color:var(--orange);
|
||
|
|
background-color:var(--light-orange);
|
||
|
|
}
|
||
|
|
.m-endpoint > .endpoint-head.post:hover,
|
||
|
|
.m-endpoint > .endpoint-head.post.expanded {
|
||
|
|
border-color:var(--green);
|
||
|
|
background-color:var(--light-green);
|
||
|
|
}
|
||
|
|
.m-endpoint > .endpoint-head.get:hover,
|
||
|
|
.m-endpoint > .endpoint-head.get.expanded {
|
||
|
|
border-color:var(--blue);
|
||
|
|
background-color:var(--light-blue);
|
||
|
|
}
|
||
|
|
.m-endpoint > .endpoint-head.delete:hover,
|
||
|
|
.m-endpoint > .endpoint-head.delete.expanded {
|
||
|
|
border-color:var(--red);
|
||
|
|
background-color:var(--light-red);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-endpoint > .endpoint-head.head:hover,
|
||
|
|
.m-endpoint > .endpoint-head.head.expanded,
|
||
|
|
.m-endpoint > .endpoint-head.patch:hover,
|
||
|
|
.m-endpoint > .endpoint-head.patch.expanded,
|
||
|
|
.m-endpoint > .endpoint-head.options:hover,
|
||
|
|
.m-endpoint > .endpoint-head.options.expanded {
|
||
|
|
border-color:var(--yellow);
|
||
|
|
background-color:var(--light-yellow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-endpoint > .endpoint-head.deprecated:hover,
|
||
|
|
.m-endpoint > .endpoint-head.deprecated.expanded {
|
||
|
|
border-color:var(--border-color);
|
||
|
|
filter:opacity(0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-endpoint .endpoint-body {
|
||
|
|
flex-wrap:wrap;
|
||
|
|
padding:16px 0px 0 0px;
|
||
|
|
border-width:0px 1px 1px 5px;
|
||
|
|
border-style:solid;
|
||
|
|
box-shadow: 0px 4px 3px -3px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
.m-endpoint .endpoint-body.delete{ border-color:var(--red); }
|
||
|
|
.m-endpoint .endpoint-body.put{ border-color:var(--orange); }
|
||
|
|
.m-endpoint .endpoint-body.post{border-color:var(--green);}
|
||
|
|
.m-endpoint .endpoint-body.get{ border-color:var(--blue); }
|
||
|
|
.m-endpoint .endpoint-body.head,
|
||
|
|
.m-endpoint .endpoint-body.patch,
|
||
|
|
.m-endpoint .endpoint-body.options {
|
||
|
|
border-color:var(--yellow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.m-endpoint .endpoint-body.deprecated{
|
||
|
|
border-color:var(--border-color);
|
||
|
|
filter:opacity(0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.endpoint-head .deprecated{
|
||
|
|
color: var(--light-fg);
|
||
|
|
filter:opacity(0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary{
|
||
|
|
padding:8px 8px;
|
||
|
|
}
|
||
|
|
.summary .title{
|
||
|
|
font-size:calc(var(--font-size-regular) + 2px);
|
||
|
|
margin-bottom: 6px;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.method{
|
||
|
|
padding:2px 5px;
|
||
|
|
vertical-align: middle;
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
height: calc(var(--font-size-small) + 16px);
|
||
|
|
line-height: calc(var(--font-size-small) + 8px);
|
||
|
|
width: 60px;
|
||
|
|
border-radius: 2px;
|
||
|
|
display:inline-block;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
text-transform:uppercase;
|
||
|
|
margin-right:5px;
|
||
|
|
}
|
||
|
|
.method.delete{ border: 2px solid var(--red);}
|
||
|
|
.method.put{ border: 2px solid var(--orange); }
|
||
|
|
.method.post{ border: 2px solid var(--green); }
|
||
|
|
.method.get{ border: 2px solid var(--blue); }
|
||
|
|
.method.get.deprecated{ border: 2px solid var(--border-color); }
|
||
|
|
.method.head,
|
||
|
|
.method.patch,
|
||
|
|
.method.options {
|
||
|
|
border: 2px solid var(--yellow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.req-resp-container{
|
||
|
|
display: flex;
|
||
|
|
margin-top:16px;
|
||
|
|
align-items: stretch;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
flex-direction: column;
|
||
|
|
border-top:1px solid var(--light-border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.view-mode-request,
|
||
|
|
api-response.view-mode {
|
||
|
|
flex:1;
|
||
|
|
min-height:100px;
|
||
|
|
padding:16px 8px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.view-mode-request {
|
||
|
|
border-width:0 0 1px 0;
|
||
|
|
border-style:dashed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head .view-mode-request,
|
||
|
|
.patch .view-mode-request,
|
||
|
|
.options .view-mode-request {
|
||
|
|
border-color:var(--yellow);
|
||
|
|
}
|
||
|
|
.put .view-mode-request {
|
||
|
|
border-color:var(--orange);
|
||
|
|
}
|
||
|
|
.post .view-mode-request {
|
||
|
|
border-color:var(--green);
|
||
|
|
}
|
||
|
|
.get .view-mode-request {
|
||
|
|
border-color:var(--blue);
|
||
|
|
}
|
||
|
|
.delete .view-mode-request {
|
||
|
|
border-color:var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 1024px) {
|
||
|
|
.only-large-screen { display:block; }
|
||
|
|
.endpoint-head .path{
|
||
|
|
font-size: var(--font-size-regular);
|
||
|
|
}
|
||
|
|
.endpoint-head .descr{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.endpoint-head .m-markdown-small,
|
||
|
|
.descr .m-markdown-small{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.req-resp-container{
|
||
|
|
flex-direction: var(--layout, row);
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
}
|
||
|
|
api-response.view-mode {
|
||
|
|
padding:16px;
|
||
|
|
}
|
||
|
|
.view-mode-request.row-layout {
|
||
|
|
border-width:0 1px 0 0;
|
||
|
|
padding:16px;
|
||
|
|
}
|
||
|
|
.summary{
|
||
|
|
padding:8px 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`,Ye=l`
|
||
|
|
code[class*="language-"],
|
||
|
|
pre[class*="language-"] {
|
||
|
|
text-align: left;
|
||
|
|
white-space: pre;
|
||
|
|
word-spacing: normal;
|
||
|
|
word-break: normal;
|
||
|
|
word-wrap: normal;
|
||
|
|
line-height: 1.5;
|
||
|
|
tab-size: 2;
|
||
|
|
|
||
|
|
-webkit-hyphens: none;
|
||
|
|
-moz-hyphens: none;
|
||
|
|
-ms-hyphens: none;
|
||
|
|
hyphens: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Code blocks */
|
||
|
|
pre[class*="language-"] {
|
||
|
|
padding: 1em;
|
||
|
|
margin: .5em 0;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inline code */
|
||
|
|
:not(pre) > code[class*="language-"] {
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.comment,
|
||
|
|
.token.block-comment,
|
||
|
|
.token.prolog,
|
||
|
|
.token.doctype,
|
||
|
|
.token.cdata {
|
||
|
|
color: var(--light-fg)
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.punctuation {
|
||
|
|
color: var(--fg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.tag,
|
||
|
|
.token.attr-name,
|
||
|
|
.token.namespace,
|
||
|
|
.token.deleted {
|
||
|
|
color:var(--pink);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.function-name {
|
||
|
|
color: var(--blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.boolean,
|
||
|
|
.token.number,
|
||
|
|
.token.function {
|
||
|
|
color: var(--red);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.property,
|
||
|
|
.token.class-name,
|
||
|
|
.token.constant,
|
||
|
|
.token.symbol {
|
||
|
|
color: var(--code-property-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.selector,
|
||
|
|
.token.important,
|
||
|
|
.token.atrule,
|
||
|
|
.token.keyword,
|
||
|
|
.token.builtin {
|
||
|
|
color: var(--code-keyword-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.string,
|
||
|
|
.token.char,
|
||
|
|
.token.attr-value,
|
||
|
|
.token.regex,
|
||
|
|
.token.variable {
|
||
|
|
color: var(--green);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.operator,
|
||
|
|
.token.entity,
|
||
|
|
.token.url {
|
||
|
|
color: var(--code-operator-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.important,
|
||
|
|
.token.bold {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.token.italic {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.entity {
|
||
|
|
cursor: help;
|
||
|
|
}
|
||
|
|
|
||
|
|
.token.inserted {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
`,Ze=l`
|
||
|
|
.tab-panel {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
.tab-buttons {
|
||
|
|
height:30px;
|
||
|
|
border-bottom: 1px solid var(--light-border-color) ;
|
||
|
|
align-items: stretch;
|
||
|
|
overflow-y: hidden;
|
||
|
|
overflow-x: auto;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
}
|
||
|
|
.tab-buttons::-webkit-scrollbar {
|
||
|
|
height: 1px;
|
||
|
|
background-color: var(--border-color);
|
||
|
|
}
|
||
|
|
.tab-btn {
|
||
|
|
border: none;
|
||
|
|
border-bottom: 3px solid transparent;
|
||
|
|
color: var(--light-fg);
|
||
|
|
background-color: transparent;
|
||
|
|
white-space: nowrap;
|
||
|
|
cursor:pointer;
|
||
|
|
outline:none;
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
margin-right:16px;
|
||
|
|
padding:1px;
|
||
|
|
}
|
||
|
|
.tab-btn.active {
|
||
|
|
border-bottom: 3px solid var(--primary-color);
|
||
|
|
font-weight:bold;
|
||
|
|
color:var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-btn:hover {
|
||
|
|
color:var(--primary-color);
|
||
|
|
}
|
||
|
|
.tab-content {
|
||
|
|
margin:-1px 0 0 0;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
`,Qe=l`
|
||
|
|
.nav-bar {
|
||
|
|
width:0;
|
||
|
|
height:100%;
|
||
|
|
overflow: hidden;
|
||
|
|
color:var(--nav-text-color);
|
||
|
|
background-color: var(--nav-bg-color);
|
||
|
|
background-blend-mode: multiply;
|
||
|
|
line-height: calc(var(--font-size-small) + 4px);
|
||
|
|
display:none;
|
||
|
|
position:relative;
|
||
|
|
flex-direction:column;
|
||
|
|
flex-wrap:nowrap;
|
||
|
|
word-break:break-word;
|
||
|
|
}
|
||
|
|
::slotted([slot=nav-logo]){
|
||
|
|
padding:16px 16px 0 16px;
|
||
|
|
}
|
||
|
|
.nav-scroll {
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-y: overlay;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: var(--nav-hover-bg-color) transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-tag {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.nav-bar.read .nav-bar-tag-icon {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-tag-icon {
|
||
|
|
color: var(--nav-text-color);
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.nav-bar-tag-icon:hover {
|
||
|
|
color:var(--nav-hover-text-color);
|
||
|
|
}
|
||
|
|
.nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-tag-icon::after {
|
||
|
|
content: '⌵';
|
||
|
|
width:16px;
|
||
|
|
height:16px;
|
||
|
|
text-align: center;
|
||
|
|
display: inline-block;
|
||
|
|
transform: rotate(270deg);
|
||
|
|
}
|
||
|
|
.nav-bar.focused .nav-bar-tag-and-paths.expanded .nav-bar-tag-icon::after {
|
||
|
|
content: '⌵';
|
||
|
|
width:16px;
|
||
|
|
height:16px;
|
||
|
|
text-align: center;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.nav-scroll::-webkit-scrollbar {
|
||
|
|
width: var(--scroll-bar-width, 8px);
|
||
|
|
}
|
||
|
|
.nav-scroll::-webkit-scrollbar-track {
|
||
|
|
background:transparent;
|
||
|
|
}
|
||
|
|
.nav-scroll::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--nav-hover-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-tag {
|
||
|
|
font-size: var(--font-size-regular);
|
||
|
|
color: var(--nav-accent-color);
|
||
|
|
border-left:4px solid transparent;
|
||
|
|
font-weight:bold;
|
||
|
|
padding: 15px 15px 15px 10px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-components,
|
||
|
|
.nav-bar-h1,
|
||
|
|
.nav-bar-h2,
|
||
|
|
.nav-bar-info,
|
||
|
|
.nav-bar-tag,
|
||
|
|
.nav-bar-path {
|
||
|
|
display:flex;
|
||
|
|
cursor:pointer;
|
||
|
|
border-left:4px solid transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-h1,
|
||
|
|
.nav-bar-h2,
|
||
|
|
.nav-bar-path {
|
||
|
|
font-size: calc(var(--font-size-small) + 1px);
|
||
|
|
padding: var(--nav-item-padding);
|
||
|
|
}
|
||
|
|
.nav-bar-path.small-font {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-info {
|
||
|
|
font-size: var(--font-size-regular);
|
||
|
|
padding: 16px 10px;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
.nav-bar-section {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
color: var(--nav-text-color);
|
||
|
|
padding: var(--nav-item-padding);
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
.nav-bar-section.operations {
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
.nav-bar-section.operations:hover {
|
||
|
|
color:var(--nav-hover-text-color);
|
||
|
|
background-color:var(--nav-hover-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-section:first-child {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.nav-bar-h2 {margin-left:12px;}
|
||
|
|
|
||
|
|
.nav-bar-h1.active,
|
||
|
|
.nav-bar-h2.active,
|
||
|
|
.nav-bar-info.active,
|
||
|
|
.nav-bar-tag.active,
|
||
|
|
.nav-bar-path.active,
|
||
|
|
.nav-bar-section.operations.active {
|
||
|
|
border-left:4px solid var(--nav-accent-color);
|
||
|
|
color:var(--nav-hover-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-bar-h1:hover,
|
||
|
|
.nav-bar-h2:hover,
|
||
|
|
.nav-bar-info:hover,
|
||
|
|
.nav-bar-tag:hover,
|
||
|
|
.nav-bar-path:hover {
|
||
|
|
color:var(--nav-hover-text-color);
|
||
|
|
background-color:var(--nav-hover-bg-color);
|
||
|
|
}
|
||
|
|
`,Xe=l`
|
||
|
|
#api-info {
|
||
|
|
font-size:calc(var(--font-size-regular) - 1px);margin-top:8px
|
||
|
|
margin-left: -15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#api-info span:before {
|
||
|
|
content: "|";
|
||
|
|
display: inline-block;
|
||
|
|
opacity: 0.5;
|
||
|
|
width: 15px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#api-info span:first-child:before {
|
||
|
|
content: "";
|
||
|
|
width: 0px;
|
||
|
|
}
|
||
|
|
`,et=l`
|
||
|
|
|
||
|
|
`;const tt=/[\s#:?&={}]/g,rt="_rapidoc_api_key";function nt(e){return new Promise((t=>setTimeout(t,e)))}function ot(e,t){const r=t.currentTarget,n=document.createElement("textarea");n.value=e,n.style.position="fixed",document.body.appendChild(n),n.focus(),n.select();try{document.execCommand("copy"),r.innerText="Copied",setTimeout((()=>{r.innerText="Copy"}),5e3)}catch(e){console.error("Unable to copy",e)}document.body.removeChild(n)}function at(e,t,r="includes"){if("includes"===r){return`${t.method} ${t.path} ${t.summary||t.description||""} ${t.operationId||""}`.toLowerCase().includes(e.toLowerCase())}return new RegExp(e,"i").test(`${t.method} ${t.path}`)}function it(e,t=new Set){return e?(Object.keys(e).forEach((r=>{var n;if(t.add(r),e[r].properties)it(e[r].properties,t);else if(null!==(n=e[r].items)&&void 0!==n&&n.properties){var o;it(null===(o=e[r].items)||void 0===o?void 0:o.properties,t)}})),t):t}function st(e,t){if(e){const r=document.createElement("a");document.body.appendChild(r),r.style="display: none",r.href=e,r.download=t,r.click(),r.remove()}}function lt(e){if(e){const t=document.createElement("a");document.body.appendChild(t),t.style="display: none",t.href=e,t.target="_blank",t.click(),t.remove()}}var ct=r(764).Buffer;function pt(e){if(e.__esModule)return e;var t=Object.defineProperty({},"__esModule",{value:!0});return Object.keys(e).forEach((function(r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})})),t}var ut=function(e){return e&&e.Math==Math&&e},dt=ut("object"==typeof globalThis&&globalThis)||ut("object"==typeof window&&window)||ut("object"==typeof self&&self)||ut("object"==typeof dt&&dt)||function(){return this}()||Function("return this")(),ht=function(e){try{return!!e()}catch(e){return!0}},ft=!ht((function(){var e=function(){}.bind();return"function"!=typeof e||e.hasOwnProperty("prototype")})),mt=ft,yt=Function.prototype,gt=yt.apply,vt=yt.call,bt="object"==typeof Reflect&&Reflect.apply||(mt?vt.bind(gt):function(){return vt.apply(gt,arguments)}),xt=ft,wt=Function.prototype,$t=wt.bind,kt=wt.call,St=xt&&$t.bind(kt,kt),At=xt?function(e){return e&&St(e)}:function(e){return e&&function(){return kt.apply(e,arguments)}},Et=function(e){return"function"==typeof e},Ot={},Tt=!ht((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]})),Ct=ft,_t=Function.prototype.call,jt=Ct?_t.bind(_t):function(){return _t.apply(_t,arguments)},It={},Pt={}.propertyIsEnumerable,Rt=Object.getOwnPropertyDescriptor,Lt=Rt&&!Pt.call({1:2},1);It.f=Lt?function(e){var t=Rt(this,e);return!!t&&t.enumerable}:Pt;var Dt,Ft,Bt=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}},Nt=At,zt=Nt({}.toString),Ut=Nt("".slice),qt=function(e){return Ut(zt(e),8,-1)},Mt=At,Ht=ht,Wt=qt,Vt=dt.Object,Gt=Mt("".split),Kt=Ht((function(){return!Vt("z").propertyIsEnumerable(0)}))?function(e){return"String"==Wt(e)?Gt(e,""):Vt(e)}:Vt,Jt=dt.TypeError,Yt=function(e){if(null==e)throw Jt("Can't call method on "+e);return e},Zt=Kt,Qt=Yt,Xt=function(e){return Zt(Qt(e))},er=Et,tr=function(e){return"object"==typeof e?null!==e:er(e)},rr={},nr=rr,or=dt,ar=Et,ir=function(e){return ar(e)?e:void 0},sr=function(e,t){return arguments.length<2?ir(nr[e])||ir(or[e]):nr[e]&&nr[e][t]||or[e]&&or[e][t]},lr=At({}.isPrototypeOf),cr=sr("navigator","userAgent")||"",pr=dt,ur=cr,dr=pr.process,hr=pr.Deno,fr=dr&&dr.versions||hr&&hr.version,mr=fr&&fr.v8;mr&&(Ft=(Dt=mr.split("."))[0]>0&&Dt[0]<4?1:+(Dt[0]+Dt[1])),!Ft&&ur&&(!(Dt=ur.match(/Edge\/(\d+)/))||Dt[1]>=74)&&(Dt=ur.match(/Chrome\/(\d+)/))&&(Ft=+Dt[1]);var yr=Ft,gr=yr,vr=ht,br=!!Object.getOwnPropertySymbols&&!vr((function(){var e=Symbol();return!String(e)||!(Object(e)instanceof Symbol)||!Symbol.sham&&gr&&gr<41})),xr=br&&!Symbol.sham&&"symbol"==typeof Symbol.iterator,wr=sr,$r=Et,kr=lr,Sr=xr,Ar=dt.Object,Er=Sr?function(e){return"symbol"==typeof e}:function(e){var t=wr("Symbol");return $r(t)&&kr(t.prototype,Ar(e))},Or=dt.String,Tr=function(e){try{return Or(e)}catch(e){return"Object"}},Cr=Et,_r=Tr,jr=dt.TypeError,Ir=
|
||
|
|
<div class="oauth-flow ${e}" style="padding: 12px 0; margin-bottom:12px;">
|
||
|
|
<div class="tiny-title upper" style="margin-bottom:8px;">${p}</div>
|
||
|
|
${i?F`<div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Auth URL</span> <span class="mono-font"> ${i} </span></div>`:""}
|
||
|
|
${s?F`<div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Token URL</span> <span class="mono-font">${s}</span></div>`:""}
|
||
|
|
${l?F`<div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Refresh URL</span> <span class="mono-font">${l}</span></div>`:""}
|
||
|
|
${"authorizationCode"===e||"clientCredentials"===e||"implicit"===e||"password"===e?F`
|
||
|
|
${o.scopes?F`
|
||
|
|
<span> Scopes </span>
|
||
|
|
<div class= "oauth-scopes" part="section-auth-scopes" style = "width:100%; display:flex; flex-direction:column; flex-wrap:wrap; margin:0 0 10px 24px">
|
||
|
|
${Object.entries(o.scopes).map(((t,r)=>F`
|
||
|
|
<div class="m-checkbox" style="display:inline-flex; align-items:center">
|
||
|
|
<input type="checkbox" part="checkbox checkbox-auth-scope" class="scope-checkbox" id="${n}${e}${r}" ?checked="${a.includes(t[0])}" value="${t[0]}">
|
||
|
|
<label for="${n}${e}${r}" style="margin-left:5px; cursor:pointer">
|
||
|
|
<span class="mono-font">${t[0]}</span>
|
||
|
|
${t[0]!==t[1]?` - ${t[1]||""}`:""}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
${"password"===e?F`
|
||
|
|
<div style="margin:5px 0">
|
||
|
|
<input type="text" value = "" placeholder="username" spellcheck="false" class="oauth2 ${e} ${n} api-key-user" part="textbox textbox-username">
|
||
|
|
<input type="password" value = "" placeholder="password" spellcheck="false" class="oauth2 ${e} ${n} api-key-password" style = "margin:0 5px;" part="textbox textbox-password">
|
||
|
|
</div>`:""}
|
||
|
|
<div>
|
||
|
|
${"authorizationCode"===e?F`
|
||
|
|
<div style="margin: 16px 0 4px">
|
||
|
|
<input type="checkbox" part="checkbox checkbox-auth-scope" id="${n}-pkce" checked>
|
||
|
|
<label for="${n}-pkce" style="margin:0 16px 0 4px; line-height:24px; cursor:pointer">
|
||
|
|
Send Proof Key for Code Exchange (PKCE)
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
<input type="text" part="textbox textbox-auth-client-id" value = "${t||""}" placeholder="client-id" spellcheck="false" class="oauth2 ${e} ${n} oauth-client-id">
|
||
|
|
${"authorizationCode"===e||"clientCredentials"===e||"password"===e?F`
|
||
|
|
<input type="password" part="textbox textbox-auth-client-secret" value = "${r||""}" placeholder="client-secret" spellcheck="false" class="oauth2 ${e} ${n} oauth-client-secret" style = "margin:0 5px;">
|
||
|
|
${"authorizationCode"===e||"clientCredentials"===e||"password"===e?F`
|
||
|
|
<select style="margin-right:5px;" class="${e} ${n} oauth-send-client-secret-in">
|
||
|
|
<option value = 'header' selected> Authorization Header </option>
|
||
|
|
<option value = 'request-body'> Request Body </option>
|
||
|
|
</select>`:""}`:""}
|
||
|
|
${"authorizationCode"===e||"clientCredentials"===e||"implicit"===e||"password"===e?F`
|
||
|
|
<button class="m-btn thin-border" part="btn btn-outline"
|
||
|
|
@click="${t=>{tR.call(this,n,e,i,s,t)}}"
|
||
|
|
> GET TOKEN </button>`:""}
|
||
|
|
</div>
|
||
|
|
<div class="oauth-resp-display red-text small-font-size"></div>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
`}function nR(e){var t;const r=null===(t=this.resolvedSpec.securitySchemes)||void 0===t?void 0:t.find((t=>t.securitySchemeId===e));if(r.user="",r.password="",r.value="",r.finalKeyValue="","true"===this.persistAuth){const e=KP.call(this);delete e[r.securitySchemeId],JP.call(this,e)}this.requestUpdate()}function oR(){var e;if(!this.resolvedSpec)return"";const t=null===(e=this.resolvedSpec.securitySchemes)||void 0===e?void 0:e.filter((e=>e.finalKeyValue));return t?F`
|
||
|
|
<section id='auth' part="section-auth" style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;" class = 'observe-me ${"read focused".includes(this.renderStyle)?"section-gap--read-mode":"section-gap "}'>
|
||
|
|
<div class='sub-title regular-font'> AUTHENTICATION </div>
|
||
|
|
|
||
|
|
<div class="small-font-size" style="display:flex; align-items: center; min-height:30px">
|
||
|
|
${t.length>0?F`
|
||
|
|
<div class="blue-text"> ${t.length} API key applied </div>
|
||
|
|
<div style="flex:1"></div>
|
||
|
|
<button class="m-btn thin-border" part="btn btn-outline" @click=${()=>{GP.call(this)}}>CLEAR ALL API KEYS</button>`:F`<div class="red-text">No API key applied</div>`}
|
||
|
|
</div>
|
||
|
|
${this.resolvedSpec.securitySchemes&&this.resolvedSpec.securitySchemes.length>0?F`
|
||
|
|
<table id="auth-table" class='m-table padded-12' style="width:100%;">
|
||
|
|
${this.resolvedSpec.securitySchemes.map((e=>F`
|
||
|
|
<tr id="security-scheme-${e.securitySchemeId}" class="${e.type.toLowerCase()}">
|
||
|
|
<td style="max-width:500px; overflow-wrap: break-word;">
|
||
|
|
<div style="line-height:28px; margin-bottom:5px;">
|
||
|
|
<span style="font-weight:bold; font-size:var(--font-size-regular)">${e.typeDisplay}</span>
|
||
|
|
${e.finalKeyValue?F`
|
||
|
|
<span class='blue-text'> ${e.finalKeyValue?"Key Applied":""} </span>
|
||
|
|
<button class="m-btn thin-border small" part="btn btn-outline" @click=${()=>{nR.call(this,e.securitySchemeId)}}>REMOVE</button>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
${e.description?F`
|
||
|
|
<div class="m-markdown">
|
||
|
|
${HP(qe(e.description||""))}
|
||
|
|
</div>`:""}
|
||
|
|
|
||
|
|
${"apikey"===e.type.toLowerCase()||"http"===e.type.toLowerCase()&&"bearer"===e.scheme.toLowerCase()?F`
|
||
|
|
<div style="margin-bottom:5px">
|
||
|
|
${"apikey"===e.type.toLowerCase()?F`Send <code>${e.name}</code> in <code>${e.in}</code>`:F`Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String.`}
|
||
|
|
</div>
|
||
|
|
<div style="max-height:28px;">
|
||
|
|
${"cookie"!==e.in?F`
|
||
|
|
<input type = "text" value = "${e.value}" class="${e.type} ${e.securitySchemeId} api-key-input" placeholder = "api-token" spellcheck = "false">
|
||
|
|
<button class="m-btn thin-border" style = "margin-left:5px;"
|
||
|
|
part = "btn btn-outline"
|
||
|
|
@click="${t=>{ZP.call(this,e.securitySchemeId,t)}}">
|
||
|
|
${e.finalKeyValue?"UPDATE":"SET"}
|
||
|
|
</button>`:F`<span class="gray-text" style="font-size::var(--font-size-small)"> cookies cannot be set from here</span>`}
|
||
|
|
</div>`:""}
|
||
|
|
${"http"===e.type.toLowerCase()&&"basic"===e.scheme.toLowerCase()?F`
|
||
|
|
<div style="margin-bottom:5px">
|
||
|
|
Send <code>Authorization</code> in <code>header</code> containing the word <code>Basic</code> followed by a space and a base64 encoded string of <code>username:password</code>.
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<input type="text" value = "${e.user}" placeholder="username" spellcheck="false" class="${e.type} ${e.securitySchemeId} api-key-user" style="width:100px">
|
||
|
|
<input type="password" value = "${e.password}" placeholder="password" spellcheck="false" class="${e.type} ${e.securitySchemeId} api-key-password" style = "width:100px; margin:0 5px;">
|
||
|
|
<button class="m-btn thin-border"
|
||
|
|
@click="${t=>{ZP.call(this,e.securitySchemeId,t)}}"
|
||
|
|
part = "btn btn-outline"
|
||
|
|
>
|
||
|
|
${e.finalKeyValue?"UPDATE":"SET"}
|
||
|
|
</button>
|
||
|
|
</div>`:""}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
${"oauth2"===e.type.toLowerCase()?F`
|
||
|
|
<tr>
|
||
|
|
<td style="border:none; padding-left:48px">
|
||
|
|
${Object.keys(e.flows).map((t=>rR.call(this,t,e["x-client-id"],e["x-client-secret"],e.securitySchemeId,e.flows[t],e["x-default-scopes"])))}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`:""}
|
||
|
|
`))}
|
||
|
|
</table>`:""}
|
||
|
|
<slot name="auth"></slot>
|
||
|
|
</section>
|
||
|
|
`:void 0}function aR(e){if(this.resolvedSpec.securitySchemes&&e){const t=[];return e.forEach((e=>{const r=[],n=[];Object.keys(e).forEach((t=>{let o="";const a=this.resolvedSpec.securitySchemes.find((e=>e.securitySchemeId===t));e[t]&&Array.isArray(e[t])&&(o=e[t].join(", ")),a&&(n.push(a.typeDisplay),r.push({...a,scopes:o}))})),t.push({securityTypes:n.length>1?`${n[0]} + ${n.length-1} more`:n[0],securityDefs:r})})),F`<div style="position:absolute; top:3px; right:2px; font-size:var(--font-size-small); line-height: 1.5;">
|
||
|
|
<div style="position:relative; display:flex; min-width:350px; max-width:700px; justify-content: flex-end;">
|
||
|
|
<svg width="16" height="24">
|
||
|
|
<g>
|
||
|
|
<path style="fill: var(--fg3)" d="m13.8,8.5l0,-2.6l0,0c0,-3.2 -2.6,-5.8 -5.8,-5.8s-5.8,2.6 -5.8,5.8l0,0l0,2.6l-2.1,0l0,11.2l16,0l0,-11.2l-2.1,0l-0,0l0,0l0,0l-0,0zm-9.8,-2.6c0,0 0,0 0,0c0,-2.2 1.8,-4 4,-4c2.2,0 4,1.8 4,4c0,0 0,0 0,0l0,2.6l-8.03,0l0,-2.6l0,0l0,0z" />
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
${t.map(((e,t)=>F`
|
||
|
|
|
||
|
|
${e.securityTypes?F`
|
||
|
|
${0!==t?F`<div style="padding:3px 4px;"> OR </div>`:""}
|
||
|
|
<div class="tooltip">
|
||
|
|
<div style = "padding:2px 4px; white-space:nowrap; text-overflow:ellipsis;max-width:150px; overflow:hidden;">
|
||
|
|
<a part="anchor anchor-operation-security" href="#auth"> ${e.securityTypes} </a>
|
||
|
|
</div>
|
||
|
|
<div class="tooltip-text" style="position:absolute; color: var(--fg); top:26px; right:0; border:1px solid var(--border-color);padding:2px 4px; display:block;">
|
||
|
|
${e.securityDefs.length>1?F`<div>Requires <b>all</b> of the following </div>`:""}
|
||
|
|
<div style="padding-left: 8px">
|
||
|
|
${e.securityDefs.map(((t,r)=>{const n=F`${""!==t.scopes?F`
|
||
|
|
<div>
|
||
|
|
<b>Required scopes:</b>
|
||
|
|
<br/>
|
||
|
|
<div style="margin-left:8px">
|
||
|
|
${t.scopes.split(",").map(((e,t)=>F`${0===t?"":"┃"}<span>${e}</span>`))}
|
||
|
|
</div>
|
||
|
|
</div>`:""}`;return F`
|
||
|
|
${"oauth2"===t.type?F`
|
||
|
|
<div>
|
||
|
|
${e.securityDefs.length>1?F`<b>${r+1}.</b> `:"Needs"}
|
||
|
|
OAuth Token <span style="font-family:var(--font-mono); color:var(--primary-color);">${t.securitySchemeId}</span> in <b>Authorization header</b>
|
||
|
|
${n}
|
||
|
|
</div>`:"http"===t.type?F`
|
||
|
|
<div>
|
||
|
|
${e.securityDefs.length>1?F`<b>${r+1}.</b> `:F`Requires`}
|
||
|
|
${"basic"===t.scheme?"Base 64 encoded username:password":"Bearer Token"} in <b>Authorization header</b>
|
||
|
|
${n}
|
||
|
|
</div>`:F`
|
||
|
|
<div>
|
||
|
|
${e.securityDefs.length>1?F`<b>${r+1}.</b> `:F`Requires`}
|
||
|
|
Token in <b>${t.name} ${t.in}</b>
|
||
|
|
${n}
|
||
|
|
</div>`}`}))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
`))}
|
||
|
|
</div>
|
||
|
|
`}return""}function iR(e){return F`
|
||
|
|
<section class="table-title" style="margin-top:24px;">CODE SAMPLES</div>
|
||
|
|
<div class="tab-panel col"
|
||
|
|
@click="${e=>{if(!e.target.classList.contains("tab-btn"))return;const t=e.target.dataset.tab,r=[...e.currentTarget.querySelectorAll(".tab-btn")],n=[...e.currentTarget.querySelectorAll(".tab-content")];r.forEach((e=>e.classList[e.dataset.tab===t?"add":"remove"]("active"))),n.forEach((e=>{e.style.display=e.dataset.tab===t?"block":"none"}))}}">
|
||
|
|
<div class="tab-buttons row" style="width:100; overflow">
|
||
|
|
${e.map(((e,t)=>F`<button class="tab-btn ${0===t?"active":""}" data-tab = '${e.lang}${t}'> ${e.label||e.lang} </button>`))}
|
||
|
|
</div>
|
||
|
|
${e.map(((e,t)=>{var r,n,o;return F`
|
||
|
|
<div class="tab-content m-markdown" style= "display:${0===t?"block":"none"}" data-tab = '${e.lang}${t}'>
|
||
|
|
<button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${t=>{ot(e.source,t)}}'> Copy </button>
|
||
|
|
<pre><code class="language">${He().languages[null===(r=e.lang)||void 0===r?void 0:r.toLowerCase()]?HP(He().highlight(e.source,He().languages[null===(n=e.lang)||void 0===n?void 0:n.toLowerCase()],null===(o=e.lang)||void 0===o?void 0:o.toLowerCase())):e.source}</code></pre>
|
||
|
|
</div>`}))}
|
||
|
|
</section>`}function sR(e){return F`
|
||
|
|
<div class="req-res-title" style="margin-top:12px">CALLBACKS</div>
|
||
|
|
${Object.entries(e).map((e=>F`
|
||
|
|
<div class="tiny-title" style="padding: 12px; border:1px solid var(--light-border-color)">
|
||
|
|
${e[0]}
|
||
|
|
${Object.entries(e[1]).map((e=>F`
|
||
|
|
<div class="mono-font small-font-size" style="display:flex; margin-left:16px;">
|
||
|
|
<div>
|
||
|
|
${Object.entries(e[1]).map((t=>{var r,n,o;return F`
|
||
|
|
<div>
|
||
|
|
<div style="margin-top:12px;">
|
||
|
|
<div class="method method-fg ${t[0]}" style="width:70px; border:none; margin:0; padding:0; line-height:20px; vertical-align: baseline;text-align:left">
|
||
|
|
<span style="font-size:20px;"> ⥄ </span>
|
||
|
|
${t[0]}
|
||
|
|
</div>
|
||
|
|
<span style="line-height:20px; vertical-align: baseline;">${e[0]} </span>
|
||
|
|
</div>
|
||
|
|
<div class='expanded-req-resp-container'>
|
||
|
|
<api-request
|
||
|
|
class = "${this.renderStyle}-mode callback"
|
||
|
|
style = "width:100%;"
|
||
|
|
callback = "true"
|
||
|
|
method = "${t[0]||""}",
|
||
|
|
path = "${e[0]||""}"
|
||
|
|
.parameters = "${(null===(r=t[1])||void 0===r?void 0:r.parameters)||""}"
|
||
|
|
.request_body = "${(null===(n=t[1])||void 0===n?void 0:n.requestBody)||""}"
|
||
|
|
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
|
||
|
|
allow-try = "false"
|
||
|
|
render-style="${this.renderStyle}"
|
||
|
|
schema-style = "${this.schemaStyle}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "${this.schemaHideReadOnly}"
|
||
|
|
fetch-credentials = "${this.fetchCredentials}"
|
||
|
|
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
|
||
|
|
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
|
||
|
|
anchor:anchor, anchor-param-example:anchor-param-example"
|
||
|
|
> </api-request>
|
||
|
|
|
||
|
|
<api-response
|
||
|
|
style = "width:100%;"
|
||
|
|
class = "${this.renderStyle}-mode"
|
||
|
|
callback = "true"
|
||
|
|
.responses="${null===(o=t[1])||void 0===o?void 0:o.responses}"
|
||
|
|
render-style="${this.renderStyle}"
|
||
|
|
schema-style="${this.schemaStyle}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
|
||
|
|
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
|
||
|
|
> </api-response>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
`}const lR={},cR=UP(class extends qP{constructor(){super(...arguments),this.nt=lR}render(e,t){return t()}update(e,[t,r]){if(Array.isArray(t)){if(Array.isArray(this.nt)&&this.nt.length===t.length&&t.every(((e,t)=>e===this.nt[t])))return B}else if(this.nt===t)return B;return this.nt=Array.isArray(t)?Array.from(t):t,this.render(t,r)}}),{H:pR}=X,uR={},dR=UP(class extends qP{constructor(e){if(super(e),e.type!==NP&&e.type!==FP&&e.type!==zP)throw Error("The `live` directive is not allowed on child or event bindings");if(!(e=>void 0===e.strings)(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[t]){if(t===B||t===N)return t;const r=e.element,n=e.name;if(e.type===NP){if(t===r[n])return B}else if(e.type===zP){if(!!t===r.hasAttribute(n))return B}else if(e.type===FP&&r.getAttribute(n)===t+"")return B;return((e,t=uR)=>{e._$AH=t})(e),t}}),hR=l`
|
||
|
|
.border-top {
|
||
|
|
border-top:1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
.border{
|
||
|
|
border:1px solid var(--border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
}
|
||
|
|
.light-border{
|
||
|
|
border:1px solid var(--light-border-color);
|
||
|
|
border-radius: var(--border-radius);
|
||
|
|
}
|
||
|
|
.pad-8-16{
|
||
|
|
padding: 8px 16px;
|
||
|
|
}
|
||
|
|
.pad-top-8{
|
||
|
|
padding-top: 8px;
|
||
|
|
}
|
||
|
|
.mar-top-8{
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
`;function fR(e){if(!e)return;let t="",r="";if(e.$ref){const r=e.$ref.lastIndexOf("/");t=`{recursive: ${e.$ref.substring(r+1)}} `}else e.type?(t=Array.isArray(e.type)?e.type.join("┃"):e.type,(e.format||e.enum)&&(t=t.replace("string",e.enum?"enum":e.format)),e.nullable&&(t+="┃null")):t=0===Object.keys(e).length?"any":"{missing-type-info}";const n={type:t,format:e.format||"",pattern:e.pattern&&!e.enum?e.pattern:"",readOrWriteOnly:e.readOnly?"🆁":e.writeOnly?"🆆":"",deprecated:e.deprecated?"❌":"",examples:e.examples||e.example,default:null!=e.default?`${e.default}`:"",description:e.description||"",constrain:"",allowedValues:"",arrayType:"",html:""};if("{recursive}"===n.type?n.description=e.$ref.substring(e.$ref.lastIndexOf("/")+1):"{missing-type-info}"!==n.type&&"any"!==n.type||(n.description=n.description||""),n.allowedValues=Array.isArray(e.enum)?e.enum.join("┃"):"","array"===t&&e.items){var o,a,i;const t=null===(o=e.items)||void 0===o?void 0:o.type,r=void 0!==(null===(a=e.items)||void 0===a?void 0:a.default)?e.items.default:"";n.arrayType=`${e.type} of ${Array.isArray(t)?t.join(""):t}`,n.default=r,n.allowedValues=Array.isArray(null===(i=e.items)||void 0===i?void 0:i.enum)?e.items.enum.join("┃"):""}return t.match(/integer|number/g)&&(void 0===e.minimum&&void 0===e.exclusiveMinimum||(r+=void 0!==e.minimum?`Min ${e.minimum}`:`More than ${e.exclusiveMinimum}`),void 0===e.maximum&&void 0===e.exclusiveMaximum||(r+=void 0!==e.maximum?`${r?"┃":""}Max ${e.maximum}`:`${r?"┃":""}Less than ${e.exclusiveMaximum}`),void 0!==e.multipleOf&&(r+=`${r?"┃":""} multiple of ${e.multipleOf}`)),t.match(/string/g)&&(void 0!==e.minLength&&void 0!==e.maxLength?r+=`${r?"┃":""}${e.minLength} to ${e.maxLength} chars`:void 0!==e.minLength?r+=`${r?"┃":""}Min ${e.minLength} chars`:void 0!==e.maxLength&&(r+=`Max ${r?"┃":""}${e.maxLength} chars`)),n.constrain=r,n.html=`${n.type}~|~${n.readOrWriteOnly}~|~${n.constrain}~|~${n.default}~|~${n.allowedValues}~|~${n.pattern}~|~${n.description}~|~${e.title||""}~|~${n.deprecated?"deprecated":""}`,n}function mR(e){return e?{Example:{value:e}}:e}function yR(e,t="string"){let r,n;if(e){if(e.constructor===Object){const t=Object.values(e);r=t.length>0?"boolean"==typeof t[0].value||"number"==typeof t[0].value?t[0].value.toString():t[0].value:"",n=Object.values(e).map((e=>({value:"boolean"==typeof e.value||"number"==typeof e.value?e.value.toString():e.value,description:e.description||e.summary||e.value})))}else Array.isArray(e)||(e=e?[e]:[]),e.length>0&&("array"===t?([r]=e,n=e.map((e=>({value:e,description:Array.isArray(e)?e.join(" , "):e})))):(r=e[0].toString(),n=e.map((e=>({value:e.toString(),description:e})))));return{exampleVal:r,exampleList:n}}return{exampleVal:"",exampleList:[]}}function gR(e){const t=e.examples?e.examples[0]:null===e.example?null:e.example||void 0;if(""===t)return"";if(null===t)return null;if(0===t)return 0;if(t)return t;if(0===Object.keys(e).length)return null;if(e.$ref)return e.$ref;const r=Array.isArray(e.type)?e.type[0]:e.type;if(!r)return"?";if(r.match(/^integer|^number/g)){const t=Number.isNaN(Number(e.multipleOf))?void 0:Number(e.multipleOf),n=Number.isNaN(Number(e.maximum))?void 0:Number(e.maximum),o=Number.isNaN(Number(e.minimum))?Number.isNaN(Number(e.exclusiveMinimum))?n||0:Number(e.exclusiveMinimum)+(r.startsWith("integer")?1:.001):Number(e.minimum);return t?t>=o?t:o%t==0?o:Math.ceil(o/t)*t:o}if(r.match(/^boolean/g))return!1;if(r.match(/^null/g))return null;if(r.match(/^string/g)){if(e.enum)return e.enum[0];if(e.pattern)return e.pattern;if(!e.format){const t=Number.isNaN(e.minLength)?void 0:Number(e.minLength),r=Number.isNaN(e.maxLength)?void 0:Number(e.maxLength),n=t||(r>6?6:r||void 0);return n?"A".repeat(n):"string"}{const t=`${Date.now().toString(16)}${Math.random().toString(16)}0`.repeat(16);switch(e.format.toLowerCase()){case"url":case"uri":return"http://example.com";case"date":return new Date(0).toISOString().split("T")[0];case"time":return new Date(0).toISOString().split("T")[1];case"date-time":return new Date(0).toISOString();case"duration":return"P3Y
|
||
|
|
:host{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
.json-tree {
|
||
|
|
position: relative;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
display:inline-block;
|
||
|
|
overflow:hidden;
|
||
|
|
word-break: break-all;
|
||
|
|
flex:1;
|
||
|
|
line-height: calc(var(--font-size-small) + 6px);
|
||
|
|
direction: ltr;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.open-bracket{
|
||
|
|
display:inline-block;
|
||
|
|
padding: 0 20px 0 0;
|
||
|
|
cursor:pointer;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
.open-bracket:hover{
|
||
|
|
color:var(--primary-color);
|
||
|
|
background-color:var(--hover-color);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
.inside-bracket{
|
||
|
|
padding-left:12px;
|
||
|
|
border-left:1px dotted var(--border-color);
|
||
|
|
}
|
||
|
|
.open-bracket.collapsed + .inside-bracket,
|
||
|
|
.open-bracket.collapsed + .inside-bracket + .close-bracket {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.string{color:var(--green);}
|
||
|
|
.number{color:var(--blue);}
|
||
|
|
.null{color:var(--red);}
|
||
|
|
.boolean{color:var(--purple);}
|
||
|
|
.object{color:var(--fg)}
|
||
|
|
.toolbar {
|
||
|
|
position: absolute;
|
||
|
|
top:5px;
|
||
|
|
right:6px;
|
||
|
|
display:flex;
|
||
|
|
padding:2px;
|
||
|
|
align-items: center;
|
||
|
|
}`,et]}render(){return F`
|
||
|
|
<div class = "json-tree" >
|
||
|
|
<div class='toolbar'>
|
||
|
|
<button class="toolbar-btn" part="btn btn-fill btn-copy" @click='${e=>{ot(JSON.stringify(this.data,null,2),e)}}'> Copy </button>
|
||
|
|
</div>
|
||
|
|
${this.generateTree(this.data,!0)}
|
||
|
|
</div>
|
||
|
|
`}generateTree(e,t=!1){if(null===e)return F`<div class="null" style="display:inline;">null</div>`;if("object"==typeof e&&e instanceof Date==!1){const r=Array.isArray(e)?"array":"pure_object";return 0===Object.keys(e).length?F`${Array.isArray(e)?"[ ],":"{ },"}`:F`
|
||
|
|
<div class="open-bracket expanded ${"array"===r?"array":"object"} " @click="${this.toggleExpand}" > ${"array"===r?"[":"{"}</div>
|
||
|
|
<div class="inside-bracket">
|
||
|
|
${Object.keys(e).map(((t,n,o)=>F`
|
||
|
|
<div class="item">
|
||
|
|
${"pure_object"===r?F`"${t}":`:""}
|
||
|
|
${this.generateTree(e[t],n===o.length-1)}
|
||
|
|
</div>`))}
|
||
|
|
</div>
|
||
|
|
<div class="close-bracket">${"array"===r?"]":"}"}${t?"":","}</div>
|
||
|
|
`}return"string"==typeof e||e instanceof Date?F`<span class="${typeof e}">"${e}"</span>${t?"":","}`:F`<span class="${typeof e}">${e}</span>${t?"":","}`}toggleExpand(e){const t=e.target;t.classList.contains("expanded")?(t.classList.replace("expanded","collapsed"),e.target.innerHTML=e.target.classList.contains("array")?"[...]":"{...}"):(t.classList.replace("collapsed","expanded"),e.target.innerHTML=e.target.classList.contains("array")?"[":"{")}});const CR=l`
|
||
|
|
|
||
|
|
*, *:before, *:after { box-sizing: border-box; }
|
||
|
|
|
||
|
|
.tr {
|
||
|
|
display: flex;
|
||
|
|
flex: none;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: content-box;
|
||
|
|
border-bottom: 1px dotted transparent;
|
||
|
|
}
|
||
|
|
.td {
|
||
|
|
display: block;
|
||
|
|
flex: 0 0 auto;
|
||
|
|
}
|
||
|
|
.key {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
white-space: normal;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsed-descr .key{
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key-descr {
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
color:var(--light-fg);
|
||
|
|
flex-shrink: 1;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.expanded-descr .key-descr{
|
||
|
|
max-height:auto;
|
||
|
|
overflow:hidden;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.collapsed-descr .tr {
|
||
|
|
max-height:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tr.xxx-of{
|
||
|
|
border-top: 1px dotted var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.xxx-of-key {
|
||
|
|
font-size: calc(var(--font-size-small) - 2px);
|
||
|
|
font-weight:bold;
|
||
|
|
background-color:var(--primary-color);
|
||
|
|
color:var(--primary-color-invert);
|
||
|
|
border-radius:2px;
|
||
|
|
line-height:calc(var(--font-size-small) + 6px);
|
||
|
|
padding:0px 5px;
|
||
|
|
margin-bottom:1px;
|
||
|
|
display:inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.xxx-of-descr {
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
color: var(--primary-color);
|
||
|
|
font-size: calc(var(--font-size-small) - 1px);
|
||
|
|
margin-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host {color:var(--green);}
|
||
|
|
.inte, .numb, .number, .int6, .int3, .floa, .doub, .deci .blue {color:var(--blue);}
|
||
|
|
.null {color:var(--red);}
|
||
|
|
.bool, .boolean{color:var(--orange)}
|
||
|
|
.enum {color:var(--purple)}
|
||
|
|
.recu {color:var(--brown)}
|
||
|
|
.toolbar {
|
||
|
|
display:flex;
|
||
|
|
width:100%;
|
||
|
|
padding: 2px 0;
|
||
|
|
color:var(--primary-color);
|
||
|
|
}
|
||
|
|
.toolbar-item {
|
||
|
|
cursor:pointer;
|
||
|
|
padding:5px 0;
|
||
|
|
margin:0 2px;
|
||
|
|
}
|
||
|
|
.schema-root-type {
|
||
|
|
cursor:auto;
|
||
|
|
color:var(--fg2);
|
||
|
|
font-weight: bold;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.schema-root-type.xxx-of {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.toolbar-item:first-of-type { margin:0 2px 0 0;}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 500px) {
|
||
|
|
.key-descr {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.expanded-descr .key-descr{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;customElements.define("schema-tree",class extends ne{static get properties(){return{data:{type:Object},schemaExpandLevel:{type:Number,attribute:"schema-expand-level"},schemaDescriptionExpanded:{type:String,attribute:"schema-description-expanded"},allowSchemaDescriptionExpandToggle:{type:String,attribute:"allow-schema-description-expand-toggle"},schemaHideReadOnly:{type:String,attribute:"schema-hide-read-only"},schemaHideWriteOnly:{type:String,attribute:"schema-hide-write-only"}}}connectedCallback(){super.connectedCallback(),(!this.schemaExpandLevel||this.schemaExpandLevel<1)&&(this.schemaExpandLevel=99999),this.schemaDescriptionExpanded&&"true false".includes(this.schemaDescriptionExpanded)||(this.schemaDescriptionExpanded="false"),this.schemaHideReadOnly&&"true false".includes(this.schemaHideReadOnly)||(this.schemaHideReadOnly="true"),this.schemaHideWriteOnly&&"true false".includes(this.schemaHideWriteOnly)||(this.schemaHideWriteOnly="true")}static get styles(){return[We,CR,hR,l`
|
||
|
|
.tree {
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
text-align: left;
|
||
|
|
direction: ltr;
|
||
|
|
line-height:calc(var(--font-size-small) + 6px);
|
||
|
|
}
|
||
|
|
.tree .tr:hover{
|
||
|
|
background-color:var(--hover-color);
|
||
|
|
}
|
||
|
|
.collapsed-descr .tr {
|
||
|
|
max-height:calc(var(--font-size-small) + 8px);
|
||
|
|
}
|
||
|
|
.collapsed-descr .m-markdown-small p {
|
||
|
|
line-height:calc(var(--font-size-small) + 6px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree .key {
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
.key.deprecated .key-label {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
|
||
|
|
.open-bracket{
|
||
|
|
display:inline-block;
|
||
|
|
padding: 0 20px 0 0;
|
||
|
|
cursor:pointer;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
.open-bracket:hover {
|
||
|
|
color:var(--primary-color);
|
||
|
|
background-color:var(--hover-color);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
.close-bracket{
|
||
|
|
display:inline-block;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
}
|
||
|
|
.tr.collapsed + .inside-bracket,
|
||
|
|
.tr.collapsed + .inside-bracket + .close-bracket{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.inside-bracket.object,
|
||
|
|
.inside-bracket.array {
|
||
|
|
border-left: 1px dotted var(--border-color);
|
||
|
|
}
|
||
|
|
.inside-bracket.xxx-of {
|
||
|
|
padding:5px 0px;
|
||
|
|
border-style: dotted;
|
||
|
|
border-width: 0 0 1px 0;
|
||
|
|
border-color:var(--primary-color);
|
||
|
|
}`,et]}render(){var e,t,r;return F`
|
||
|
|
<div class="tree ${"true"===this.schemaDescriptionExpanded?"expanded-descr":"collapsed-descr"}">
|
||
|
|
<div class="toolbar">
|
||
|
|
<div class="toolbar-item schema-root-type ${(null===(e=this.data)||void 0===e?void 0:e["::type"])||""} "> ${(null===(t=this.data)||void 0===t?void 0:t["::type"])||""} </div>
|
||
|
|
${"true"===this.allowSchemaDescriptionExpandToggle?F`
|
||
|
|
<div style="flex:1"></div>
|
||
|
|
<div class='toolbar-item' @click='${()=>{this.schemaDescriptionExpanded="true"===this.schemaDescriptionExpanded?"false":"true"}}'>
|
||
|
|
${"true"===this.schemaDescriptionExpanded?"Single line description":"Multiline description"}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
${null!==(r=this.data)&&void 0!==r&&r["::description"]?F`<span class='m-markdown'> ${HP(qe(this.data["::description"]||""))}</span>`:""}
|
||
|
|
${this.data?F`
|
||
|
|
${this.generateTree("array"===this.data["::type"]?this.data["::props"]:this.data,this.data["::type"],this.data["::array-type"]||"")}`:F`<span class='mono-font' style='color:var(--red)'> Schema not found </span>`}
|
||
|
|
</div>
|
||
|
|
`}generateTree(e,t="object",r="",n="",o="",a=0,i=0,s=""){var l;if("true"===this.schemaHideReadOnly){if("array"===t&&"readonly"===s)return;if("readonly"===e["::readwrite"])return}if("true"===this.schemaHideWriteOnly){if("array"===t&&"writeonly"===s)return;if("writeonly"===e["::readwrite"])return}if(!e)return F`<div class="null" style="display:inline;">null</div>`;if(0===Object.keys(e).length)return F`<span class="key object">${n}:{ }</span>`;let c="",p="";if(n.startsWith("::ONE~OF")||n.startsWith("::ANY~OF"))c=n.replace("::","").replace("~"," ");else if(n.startsWith("::OPTION")){const e=n.split("~");c=e[1],p=e[2]}else c=n;const u=400-12*i;let d="",h="";const f=null!==(l=e["::type"])&&void 0!==l&&l.startsWith("xxx-of")?a:a+1,m="xxx-of-option"===t||"xxx-of-option"===e["::type"]||n.startsWith("::OPTION")?i:i+1;if("object"===e["::type"])"array"===t?(d=a<this.schemaExpandLevel?F`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`:F`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`,h="}]"):(d=a<this.schemaExpandLevel?F`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`:F`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`,h="}");else if("array"===e["::type"])if("array"===t){const e="object"!==r?r:"";d=a<this.schemaExpandLevel?F`<span class="open-bracket array-of-array" data-array-type="${e}" @click="${this.toggleObjectExpand}">[[ ${e} </span>`:F`<span class="open-bracket array-of-array" data-array-type="${e}" @click="${this.toggleObjectExpand}">[[...]]</span>`,h="]]"}else d=a<this.schemaExpandLevel?F`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`:F`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`,h="]";var y;if("object"==typeof e)return F`
|
||
|
|
<div class="tr ${a<this.schemaExpandLevel||null!==(y=e["::type"])&&void 0!==y&&y.startsWith("xxx-of")?"expanded":"collapsed"} ${e["::type"]||"no-type-info"}">
|
||
|
|
<div class="td key ${e["::deprecated"]?"deprecated":""}" style='min-width:${u}px'>
|
||
|
|
${"xxx-of-option"===e["::type"]||"xxx-of-array"===e["::type"]||n.startsWith("::OPTION")?F`<span class='key-label xxx-of-key'>${c}</span><span class="xxx-of-descr">${p}</span>`:"::props"===c||"::ARRAY~OF"===c?"":a>0?F`<span class="key-label" title="${"readonly"===s?"Read-Only":"writeonly"===s?"Write-Only":""}">
|
||
|
|
${c.replace(/\*$/,"")}${c.endsWith("*")?F`<span style="color:var(--red)">*</span>`:""}${"readonly"===s?F` 🆁`:"writeonly"===s?F` 🆆`:s}:
|
||
|
|
</span>`:""}
|
||
|
|
${"xxx-of"===e["::type"]&&"array"===t?F`<span style="color:var(--primary-color)">ARRAY</span>`:""}
|
||
|
|
${d}
|
||
|
|
</div>
|
||
|
|
<div class='td key-descr m-markdown-small'>${HP(qe(o||""))}</div>
|
||
|
|
</div>
|
||
|
|
<div class='inside-bracket ${e["::type"]||"no-type-info"}' style='padding-left:${"xxx-of-option"===e["::type"]||"xxx-of-array"===e["::type"]?0:12}px;'>
|
||
|
|
${Array.isArray(e)&&e[0]?F`${this.generateTree(e[0],"xxx-of-option","","::ARRAY~OF","",f,m,e[0]["::readwrite"])}`:F`
|
||
|
|
${Object.keys(e).map((t=>F`
|
||
|
|
${["::title","::description","::type","::props","::deprecated","::array-type","::readwrite"].includes(t)?"array"===e[t]["::type"]||"object"===e[t]["::type"]?F`${this.generateTree("array"===e[t]["::type"]?e[t]["::props"]:e[t],e[t]["::type"],e[t]["::array-type"]||"",t,e[t]["::description"],f,m,e[t]["::readwrite"]?e[t]["::readwrite"]:"")}`:"":F`${this.generateTree("array"===e[t]["::type"]?e[t]["::props"]:e[t],e[t]["::type"],e[t]["::array-type"]||"",t,e[t]["::description"],f,m,e[t]["::readwrite"]?e[t]["::readwrite"]:"")}`}
|
||
|
|
`))}
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
${e["::type"]&&e["::type"].includes("xxx-of")?"":F`<div class='close-bracket'> ${h} </div>`}
|
||
|
|
`;const[g,v,b,x,w,$,k,S,A]=e.split("~|~");if("🆁"===v&&"true"===this.schemaHideReadOnly)return;if("🆆"===v&&"true"===this.schemaHideWriteOnly)return;const E=g.replace(/┃.*/g,"").replace(/[^a-zA-Z0-9+]/g,"").substring(0,4).toLowerCase();let O="",T="";return"array"===t?"readonly"===s?(O="🆁",T="Read-Only"):"writeonly"===s&&(O="🆆",T="Write-Only"):"🆁"===v?(O="🆁",T="Read-Only"):"🆆"===v&&(O="🆆",T="Write-Only"),F`
|
||
|
|
<div class = "tr primitive">
|
||
|
|
<div class="td key ${A}" style='min-width:${u}px' >
|
||
|
|
${c.endsWith("*")?F`<span class="key-label">${c.substring(0,c.length-1)}</span><span style='color:var(--red);'>*</span>:`:n.startsWith("::OPTION")?F`<span class='key-label xxx-of-key'>${c}</span><span class="xxx-of-descr">${p}</span>`:F`<span class="key-label">${c}:</span>`}
|
||
|
|
<span class="${E}" title="${T}">
|
||
|
|
${"array"===t?`[${g}]`:`${g}`}
|
||
|
|
${O}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class='td key-descr'>
|
||
|
|
${"array"===t?F`<span class="m-markdown-small">${HP(qe(o))}</span>`:""}
|
||
|
|
${b?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${b}</div>`:""}
|
||
|
|
${x?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${x}</div>`:""}
|
||
|
|
${w?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${w}</div>`:""}
|
||
|
|
${$?F`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${$}</div>`:""}
|
||
|
|
${k?F`<span class="m-markdown-small">${HP(qe(`${S?`**${S}:**`:""} ${k}`))}</span>`:""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}toggleObjectExpand(e){const t=e.target.closest(".tr");t.classList.contains("expanded")?(t.classList.replace("expanded","collapsed"),e.target.innerHTML=e.target.classList.contains("array-of-object")?"[{...}]":e.target.classList.contains("array-of-array")?"[[...]]":e.target.classList.contains("array")?"[...]":"{...}"):(t.classList.replace("collapsed","expanded"),e.target.innerHTML=e.target.classList.contains("array-of-object")?"[{":e.target.classList.contains("array-of-array")?`[[ ${e.target.dataset.arrayType}`:e.target.classList.contains("object")?"{":"[")}});customElements.define("tag-input",class extends ne{render(){let e="";return Array.isArray(this.value)&&(e=F`${this.value.filter((e=>""!==e.trim())).map((e=>F`<span class='tag'>${e}</span>`))}`),F`
|
||
|
|
<div class='tags' tabindex="0">
|
||
|
|
${e}
|
||
|
|
<input type="text" class='editor' @paste="${e=>this.afterPaste(e)}" @keydown="${this.afterKeyDown}" @blur="${this.onBlur}" placeholder="${this.placeholder||""}">
|
||
|
|
</div>
|
||
|
|
`}static get properties(){return{placeholder:{type:String},value:{type:Array,attribute:"value"}}}attributeChangedCallback(e,t,r){"value"===e&&r&&t!==r&&(this.value=r.split(",").filter((e=>""!==e.trim()))),super.attributeChangedCallback(e,t,r)}afterPaste(e){const t=(e.clipboardData||window.clipboardData).getData("Text"),r=t?t.split(",").filter((e=>""!==e.trim())):"";r&&(Array.isArray(this.value)?this.value=[...this.value,...r]:this.value=r),e.preventDefault()}afterKeyDown(e){13===e.keyCode?(e.stopPropagation(),e.preventDefault(),e.target.value&&(Array.isArray(this.value)?this.value=[...this.value,e.target.value]:this.value=[e.target.value],e.target.value="")):8===e.keyCode&&0===e.target.value.length&&Array.isArray(this.value)&&this.value.length>0&&(this.value.splice(-1),this.value=[...this.value])}onBlur(e){e.target.value&&(Array.isArray(this.value)?this.value=[...this.value,e.target.value]:this.value=[e.target.value],e.target.value="")}static get styles(){return[l`
|
||
|
|
.tags{
|
||
|
|
display:flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
outline: none;
|
||
|
|
padding:0;
|
||
|
|
border-radius:var(--border-radius);
|
||
|
|
border:1px solid var(--border-color);
|
||
|
|
cursor:text;
|
||
|
|
overflow:hidden;
|
||
|
|
background:var(--input-bg);
|
||
|
|
}
|
||
|
|
.tag, .editor {
|
||
|
|
padding:3px;
|
||
|
|
margin:2px;
|
||
|
|
}
|
||
|
|
.tag{
|
||
|
|
border:1px solid var(--border-color);
|
||
|
|
background-color:var(--bg3);
|
||
|
|
color:var(--fg3);
|
||
|
|
border-radius:var(--border-radius);
|
||
|
|
word-break: break-all;
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
}
|
||
|
|
.tag:hover ~ #cursor {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.editor{
|
||
|
|
flex:1;
|
||
|
|
border:1px solid transparent;
|
||
|
|
color:var(--fg);
|
||
|
|
min-width:60px;
|
||
|
|
outline: none;
|
||
|
|
line-height: inherit;
|
||
|
|
font-family:inherit;
|
||
|
|
background:transparent;
|
||
|
|
font-size: calc(var(--font-size-small) + 1px);
|
||
|
|
}
|
||
|
|
.editor::placeholder {
|
||
|
|
color: var(--placeholder-color);
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
`]}});customElements.define("api-request",class extends ne{constructor(){super(),this.responseMessage="",this.responseStatus="success",this.responseHeaders="",this.responseText="",this.responseUrl="",this.curlSyntax="",this.activeResponseTab="response",this.selectedRequestBodyType="",this.selectedRequestBodyExample="",this.activeParameterSchemaTabs={}}static get properties(){return{serverUrl:{type:String,attribute:"server-url"},servers:{type:Array},method:{type:String},path:{type:String},security:{type:Array},parameters:{type:Array},request_body:{type:Object},api_keys:{type:Array},parser:{type:Object},accept:{type:String},callback:{type:String},responseMessage:{type:String,attribute:!1},responseText:{type:String,attribute:!1},responseHeaders:{type:String,attribute:!1},responseStatus:{type:String,attribute:!1},responseUrl:{type:String,attribute:!1},fillRequestFieldsWithExample:{type:String,attribute:"fill-request-fields-with-example"},allowTry:{type:String,attribute:"allow-try"},renderStyle:{type:String,attribute:"render-style"},schemaStyle:{type:String,attribute:"schema-style"},activeSchemaTab:{type:String,attribute:"active-schema-tab"},activeParameterSchemaTabs:{type:Object,converter:{fromAttribute:e=>JSON.parse(e),toAttribute:e=>JSON.stringify(e)},attribute:"active-parameter-schema-tabs"},schemaExpandLevel:{type:Number,attribute:"schema-expand-level"},schemaDescriptionExpanded:{type:String,attribute:"schema-description-expanded"},allowSchemaDescriptionExpandToggle:{type:String,attribute:"allow-schema-description-expand-toggle"},schemaHideReadOnly:{type:String,attribute:"schema-hide-read-only"},fetchCredentials:{type:String,attribute:"fetch-credentials"},activeResponseTab:{type:String},selectedRequestBodyType:{type:String,attribute:"selected-request-body-type"},selectedRequestBodyExample:{type:String,attribute:"selected-request-body-example"}}}static get styles(){return[Ke,Ve,We,Ge,hR,Ze,Ye,l`
|
||
|
|
*, *:before, *:after { box-sizing: border-box; }
|
||
|
|
|
||
|
|
.read-mode {
|
||
|
|
margin-top: 24px;
|
||
|
|
}
|
||
|
|
.param-name,
|
||
|
|
.param-type {
|
||
|
|
margin: 1px 0;
|
||
|
|
text-align: right;
|
||
|
|
line-height: var(--font-size-small);
|
||
|
|
}
|
||
|
|
.param-name{
|
||
|
|
color: var(--fg);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
}
|
||
|
|
.param-name.deprecated {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
.param-type{
|
||
|
|
color: var(--light-fg);
|
||
|
|
font-family: var(--font-regular);
|
||
|
|
}
|
||
|
|
.param-constraint{
|
||
|
|
min-width:100px;
|
||
|
|
}
|
||
|
|
.param-constraint:empty{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.top-gap{margin-top:24px;}
|
||
|
|
|
||
|
|
.textarea {
|
||
|
|
min-height:220px;
|
||
|
|
padding:5px;
|
||
|
|
resize:vertical;
|
||
|
|
direction: ltr;
|
||
|
|
}
|
||
|
|
.example:first-child {
|
||
|
|
margin-top: -9px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.response-message{
|
||
|
|
font-weight:bold;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.response-message.error {
|
||
|
|
color:var(--red);
|
||
|
|
}
|
||
|
|
.response-message.success {
|
||
|
|
color:var(--blue);
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-input-container {
|
||
|
|
align-items:flex-end;
|
||
|
|
}
|
||
|
|
.file-input-container .input-set:first-child .file-input-remove-btn{
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.file-input-remove-btn{
|
||
|
|
font-size:16px;
|
||
|
|
color:var(--red);
|
||
|
|
outline: none;
|
||
|
|
border: none;
|
||
|
|
background:none;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.v-tab-btn {
|
||
|
|
font-size: var(--smal-font-size);
|
||
|
|
height:24px;
|
||
|
|
border:none;
|
||
|
|
background:none;
|
||
|
|
opacity: 0.3;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 4px 8px;
|
||
|
|
}
|
||
|
|
.v-tab-btn.active {
|
||
|
|
font-weight: bold;
|
||
|
|
background: var(--bg);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.textarea {
|
||
|
|
padding:8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (max-width: 470px) {
|
||
|
|
.hide-in-small-screen {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`,et]}render(){return F`
|
||
|
|
<div class="col regular-font request-panel ${"read focused".includes(this.renderStyle)||"true"===this.callback?"read-mode":"view-mode"}">
|
||
|
|
<div class=" ${"true"===this.callback?"tiny-title":"req-res-title"} ">
|
||
|
|
${"true"===this.callback?"CALLBACK REQUEST":"REQUEST"}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
${cR([this.allowTry,this.parameters,this.activeParameterSchemaTabs],(()=>this.inputParametersTemplate("path")))}
|
||
|
|
${cR([this.allowTry,this.parameters,this.activeParameterSchemaTabs],(()=>this.inputParametersTemplate("query")))}
|
||
|
|
${this.requestBodyTemplate()}
|
||
|
|
${cR([this.allowTry,this.parameters,this.activeParameterSchemaTabs],(()=>this.inputParametersTemplate("header")))}
|
||
|
|
${cR([this.allowTry,this.parameters,this.activeParameterSchemaTabs],(()=>this.inputParametersTemplate("cookie")))}
|
||
|
|
${"false"===this.allowTry?"":F`${this.apiCallTemplate()}`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}updated(e){if("focused"===this.renderStyle)if(1===e.size&&e.has("activeSchemaTab"));else{[...this.shadowRoot.querySelectorAll('textarea[data-ptype="form-data"]')].forEach((e=>{const t=this.shadowRoot.querySelector(`textarea[data-pname='hidden-${e.dataset.pname}']`);t&&(e.value=t.value)}))}}exampleListTemplate(e,t,r=[]){return F`
|
||
|
|
${r.length>0?F`<span style="font-weight:bold">Example: </span>
|
||
|
|
${r.map(((r,n)=>{var o,a;return F`
|
||
|
|
${0===n?"":"┃"}
|
||
|
|
${"array"===t?"[":""}
|
||
|
|
<a part="anchor anchor-param-example" class = "${"true"===this.allowTry?"":"inactive-link"}"
|
||
|
|
data-example-type="${"array"===t?t:"string"}"
|
||
|
|
data-example = "${r.value&&Array.isArray(r.value)?null===(o=r.value)||void 0===o?void 0:o.join("~|~"):r.value||""}"
|
||
|
|
@click="${t=>{const r=t.target.closest("table").querySelector(`[data-pname="${e}"]`);r&&("array"===t.target.dataset.exampleType?r.value=t.target.dataset.example.split("~|~"):r.value=t.target.dataset.example)}}"
|
||
|
|
>${r.value&&Array.isArray(r.value)?null===(a=r.value)||void 0===a?void 0:a.join(", "):r.value||""}</a>
|
||
|
|
${"array"===t?"] ":""}
|
||
|
|
`}))}
|
||
|
|
`:""}`}inputParametersTemplate(e){const t=this.parameters?this.parameters.filter((t=>t.in===e)):[];if(0===t.length)return"";let r="";"path"===e?r="PATH PARAMETERS":"query"===e?r="QUERY-STRING PARAMETERS":"header"===e?r="REQUEST HEADERS":"cookie"===e&&(r="COOKIES");const n=[];for(const r of t){const[t,o,a]=TR(r);if(!t)continue;const i=fR(t);if(!i)continue;const s=AR(t,{});let l="form",c=!0,p=!1;"query"===e&&(r.style&&"form spaceDelimited pipeDelimited".includes(r.style)?l=r.style:o&&(l=o),"boolean"==typeof r.explode&&(c=r.explode),"boolean"==typeof r.allowReserved&&(p=r.allowReserved));const u=yR(r.examples||mR(r.example)||mR(null==a?void 0:a.example)||(null==a?void 0:a.examples)||i.examples||mR(i.example),i.type);u.exampleVal||"object"!==i.type||(u.exampleVal=ER(t,o||"json","","",!0,!0,"text",!1)[0].exampleValue);const d="read focused".includes(this.renderStyle)?"200px":"160px";n.push(F`
|
||
|
|
<tr>
|
||
|
|
<td rowspan="${"true"===this.allowTry?"1":"2"}" style="width:${d}; min-width:100px;">
|
||
|
|
<div class="param-name">
|
||
|
|
${r.required?F`<span style='color:var(--red)'>*</span>`:""}${r.name}
|
||
|
|
</div>
|
||
|
|
<div class="param-type">
|
||
|
|
${"array"===i.type?`${i.arrayType}`:`${i.format?i.format:i.type}`}
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
${"true"===this.allowTry?F`
|
||
|
|
<td style="min-width:100px;">
|
||
|
|
${"array"===i.type?F`
|
||
|
|
<tag-input class="request-param"
|
||
|
|
style = "width:100%"
|
||
|
|
data-ptype = "${e}"
|
||
|
|
data-pname = "${r.name}"
|
||
|
|
data-example = "${Array.isArray(u.exampleVal)?u.exampleVal.join("~|~"):u.exampleVal}"
|
||
|
|
data-param-serialize-style = "${l}"
|
||
|
|
data-param-serialize-explode = "${c}"
|
||
|
|
data-param-allow-reserved = "${p}"
|
||
|
|
data-array = "true"
|
||
|
|
placeholder = "add-multiple ↩"
|
||
|
|
.value = "${Array.isArray(u.exampleVal),u.exampleVal}"
|
||
|
|
>
|
||
|
|
</tag-input>`:"object"===i.type?F`
|
||
|
|
<div class="tab-panel col" style="border-width:0 0 1px 0;">
|
||
|
|
<div class="tab-buttons row" @click="${e=>{if("button"===e.target.tagName.toLowerCase()){const t={...this.activeParameterSchemaTabs};t[r.name]=e.target.dataset.tab,this.activeParameterSchemaTabs=t}}}">
|
||
|
|
<button class="tab-btn ${"example"===this.activeParameterSchemaTabs[r.name]?"active":""}" data-tab = 'example'>EXAMPLE </button>
|
||
|
|
<button class="tab-btn ${"example"!==this.activeParameterSchemaTabs[r.name]?"active":""}" data-tab = 'schema'>SCHEMA</button>
|
||
|
|
</div>
|
||
|
|
${"example"===this.activeParameterSchemaTabs[r.name]?F`<div class="tab-content col">
|
||
|
|
<textarea
|
||
|
|
class = "textarea request-param"
|
||
|
|
part = "textarea textarea-param"
|
||
|
|
data-ptype = "${e}-object"
|
||
|
|
data-pname = "${r.name}"
|
||
|
|
data-example = "${u.exampleVal}"
|
||
|
|
data-param-serialize-style = "${l}"
|
||
|
|
data-param-serialize-explode = "${c}"
|
||
|
|
data-param-allow-reserved = "${p}"
|
||
|
|
spellcheck = "false"
|
||
|
|
.textContent = "${"true"===this.fillRequestFieldsWithExample?u.exampleVal:""}"
|
||
|
|
style = "resize:vertical; width:100%; height: ${"read focused".includes(this.renderStyle)?"180px":"120px"};"
|
||
|
|
></textarea>
|
||
|
|
</div>`:F`
|
||
|
|
<div class="tab-content col">
|
||
|
|
<schema-tree
|
||
|
|
class = 'json'
|
||
|
|
style = 'display: block'
|
||
|
|
.data = '${s}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
|
||
|
|
schema-hide-write-only = "false"
|
||
|
|
> </schema-tree>
|
||
|
|
</div>`}
|
||
|
|
</div>`:F`
|
||
|
|
<input type="${"password"===i.format?"password":"text"}" spellcheck="false" style="width:100%"
|
||
|
|
class="request-param"
|
||
|
|
part="textbox textbox-param"
|
||
|
|
data-ptype="${e}"
|
||
|
|
data-pname="${r.name}"
|
||
|
|
data-example="${Array.isArray(u.exampleVal)?u.exampleVal.join("~|~"):u.exampleVal}"
|
||
|
|
data-param-allow-reserved = "${p}"
|
||
|
|
data-array="false"
|
||
|
|
.value="${dR("true"===this.fillRequestFieldsWithExample?u.exampleVal:"")}"
|
||
|
|
/>`}
|
||
|
|
</td>`:""}
|
||
|
|
${i.default||i.constrain||i.allowedValues||i.pattern?F`
|
||
|
|
<td colspan="${"true"===this.allowTry?"1":"2"}">
|
||
|
|
<div class="param-constraint">
|
||
|
|
${i.default?F`<span style="font-weight:bold">Default: </span>${i.default}<br/>`:""}
|
||
|
|
${i.pattern?F`<span style="font-weight:bold">Pattern: </span>${i.pattern}<br/>`:""}
|
||
|
|
${i.constrain?F`${i.constrain}<br/>`:""}
|
||
|
|
${i.allowedValues&&i.allowedValues.split("┃").map(((e,t)=>F`
|
||
|
|
${t>0?"┃":F`<span style="font-weight:bold">Allowed: </span>`}
|
||
|
|
${F`
|
||
|
|
<a part="anchor anchor-param-constraint" class = "${"true"===this.allowTry?"":"inactive-link"}"
|
||
|
|
data-type="${"array"===i.type?i.type:"string"}"
|
||
|
|
data-enum="${e.trim()}"
|
||
|
|
@click="${e=>{const t=e.target.closest("table").querySelector(`[data-pname="${r.name}"]`);t&&("array"===e.target.dataset.type?t.value=[e.target.dataset.enum]:t.value=e.target.dataset.enum)}}"
|
||
|
|
>${e}</a>`}`))}
|
||
|
|
</div>
|
||
|
|
</td>`:""}
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
${"true"===this.allowTry?F`<td style="border:none"> </td>`:""}
|
||
|
|
<td colspan="2" style="border:none;">
|
||
|
|
<span class="m-markdown-small">${HP(qe(r.description||""))}</span>
|
||
|
|
${this.exampleListTemplate.call(this,r.name,i.type,u.exampleList)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`)}return F`
|
||
|
|
<div class="table-title top-gap">${r}</div>
|
||
|
|
<div style="display:block; overflow-x:auto; max-width:100%;">
|
||
|
|
<table class="m-table" style="width:100%; word-break:break-word;">
|
||
|
|
${n}
|
||
|
|
</table>
|
||
|
|
</div>`}resetRequestBodySelection(){this.selectedRequestBodyType="",this.selectedRequestBodyExample="",this.clearResponseData()}onSelectExample(e){this.selectedRequestBodyExample=e.target.value;const t=e.target;window.setTimeout((e=>{const t=e.closest(".example-panel").querySelector(".request-body-param");e.closest(".example-panel").querySelector(".request-body-param-user-input").value=t.innerText}),0,t)}onMimeTypeChange(e){this.selectedRequestBodyType=e.target.value;const t=e.target;this.selectedRequestBodyExample="",window.setTimeout((e=>{const t=e.closest(".request-body-container").querySelector(".request-body-param");if(t){e.closest(".request-body-container").querySelector(".request-body-param-user-input").value=t.innerText}}),0,t)}requestBodyTemplate(){if(!this.request_body)return"";if(0===Object.keys(this.request_body).length)return"";let e="",t="",r="",n="",o="";const a=[],{content:i}=this.request_body;for(const e in i)a.push({mimeType:e,schema:i[e].schema,example:i[e].example,examples:i[e].examples}),this.selectedRequestBodyType||(this.selectedRequestBodyType=e);return e=1===a.length?"":F`
|
||
|
|
<select style="min-width:100px; max-width:100%; margin-bottom:-1px;" @change = '${e=>this.onMimeTypeChange(e)}'>
|
||
|
|
${a.map((e=>F`
|
||
|
|
<option value = '${e.mimeType}' ?selected = '${e.mimeType===this.selectedRequestBodyType}'>
|
||
|
|
${e.mimeType}
|
||
|
|
</option> `))}
|
||
|
|
</select>
|
||
|
|
`,a.forEach((e=>{let a,i=[];if(this.selectedRequestBodyType.includes("json")||this.selectedRequestBodyType.includes("xml")||this.selectedRequestBodyType.includes("text")||this.selectedRequestBodyType.includes("jose"))e.mimeType===this.selectedRequestBodyType&&(i=ER(e.schema,e.mimeType,e.examples,e.example,!1,!0,"text",!1),this.selectedRequestBodyExample||(this.selectedRequestBodyExample=i.length>0?i[0].exampleId:""),o=F`
|
||
|
|
${o}
|
||
|
|
<div class = 'example-panel border-top pad-top-8'>
|
||
|
|
${1===i.length?"":F`
|
||
|
|
<select style="min-width:100px; max-width:100%; margin-bottom:-1px;" @change='${e=>this.onSelectExample(e)}'>
|
||
|
|
${i.map((e=>F`<option value="${e.exampleId}" ?selected=${e.exampleId===this.selectedRequestBodyExample} >
|
||
|
|
${e.exampleSummary.length>80?e.exampleId:e.exampleSummary?e.exampleSummary:e.exampleId}
|
||
|
|
</option>`))}
|
||
|
|
</select>
|
||
|
|
`}
|
||
|
|
${i.filter((e=>e.exampleId===this.selectedRequestBodyExample)).map((t=>F`
|
||
|
|
<div class="example ${t.exampleId===this.selectedRequestBodyExample?"example-selected":""}" data-example = '${t.exampleId}'>
|
||
|
|
${t.exampleSummary&&t.exampleSummary.length>80?F`<div style="padding: 4px 0"> ${t.exampleSummary} </div>`:""}
|
||
|
|
${t.exampleDescription?F`<div class="m-markdown-small" style="padding: 4px 0"> ${HP(qe(t.exampleDescription||""))} </div>`:""}
|
||
|
|
<!-- This pre(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 -->
|
||
|
|
<pre
|
||
|
|
class = "textarea is-hidden request-body-param ${e.mimeType.substring(e.mimeType.indexOf("/")+1)}"
|
||
|
|
spellcheck = "false"
|
||
|
|
data-ptype = "${e.mimeType}"
|
||
|
|
style="width:100%; resize:vertical; display:none"
|
||
|
|
>${"text"===t.exampleFormat?t.exampleValue:JSON.stringify(t.exampleValue,null,2)}</pre>
|
||
|
|
|
||
|
|
<!-- this textarea is for user to edit the example -->
|
||
|
|
<textarea
|
||
|
|
class = "textarea request-body-param-user-input"
|
||
|
|
part = "textarea textarea-param"
|
||
|
|
spellcheck = "false"
|
||
|
|
data-ptype = "${e.mimeType}"
|
||
|
|
data-example = "${"text"===t.exampleFormat?t.exampleValue:JSON.stringify(t.exampleValue,null,2)}"
|
||
|
|
data-example-format = "${t.exampleFormat}"
|
||
|
|
style="width:100%; resize:vertical;"
|
||
|
|
.textContent = "${"true"===this.fillRequestFieldsWithExample?"text"===t.exampleFormat?t.exampleValue:JSON.stringify(t.exampleValue,null,2):""}"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
`);else if(this.selectedRequestBodyType.includes("form-urlencoded")||this.selectedRequestBodyType.includes("form-data")){if(e.mimeType===this.selectedRequestBodyType){const t=ER(e.schema,e.mimeType,e.examples,e.example,!1,!0,"text",!1);e.schema&&(r=this.formDataTemplate(e.schema,e.mimeType,t[0]?t[0].exampleValue:""))}}else/^audio\/|^image\/|^video\/|^font\/|tar$|zip$|7z$|rtf$|msword$|excel$|\/pdf$|\/octet-stream$/.test(this.selectedRequestBodyType)&&e.mimeType===this.selectedRequestBodyType&&(t=F`
|
||
|
|
<div class = "small-font-size bold-text row">
|
||
|
|
<input type="file" part="file-input" style="max-width:100%" class="request-body-param-file" data-ptype="${e.mimeType}" spellcheck="false" />
|
||
|
|
</div>
|
||
|
|
`);(e.mimeType.includes("json")||e.mimeType.includes("xml")||e.mimeType.includes("text")||this.selectedRequestBodyType.includes("jose"))&&(a=AR(e.schema,{}),"table"===this.schemaStyle?n=F`
|
||
|
|
${n}
|
||
|
|
<schema-table
|
||
|
|
class = '${e.mimeType.substring(e.mimeType.indexOf("/")+1)}'
|
||
|
|
style = 'display: ${this.selectedRequestBodyType===e.mimeType?"block":"none"};'
|
||
|
|
.data = '${a}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "${this.schemaHideReadOnly.includes(this.method)}"
|
||
|
|
schema-hide-write-only = "false"
|
||
|
|
> </schema-table>
|
||
|
|
`:"tree"===this.schemaStyle&&(n=F`
|
||
|
|
${n}
|
||
|
|
<schema-tree
|
||
|
|
class = "${e.mimeType.substring(e.mimeType.indexOf("/")+1)}"
|
||
|
|
style = "display: ${this.selectedRequestBodyType===e.mimeType?"block":"none"};"
|
||
|
|
.data = "${a}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "true"
|
||
|
|
schema-hide-write-only = "false"
|
||
|
|
> </schema-tree>
|
||
|
|
`))})),F`
|
||
|
|
<div class='request-body-container' data-selected-request-body-type="${this.selectedRequestBodyType}">
|
||
|
|
<div class="table-title top-gap row">
|
||
|
|
REQUEST BODY ${this.request_body.required?F`<span class="mono-font" style='color:var(--red)'>*</span>`:""}
|
||
|
|
<span style = "font-weight:normal; margin-left:5px"> ${this.selectedRequestBodyType}</span>
|
||
|
|
<span style="flex:1"></span>
|
||
|
|
${e}
|
||
|
|
</div>
|
||
|
|
${this.request_body.description?F`<div class="m-markdown" style="margin-bottom:12px">${HP(qe(this.request_body.description))}</div>`:""}
|
||
|
|
|
||
|
|
${this.selectedRequestBodyType.includes("json")||this.selectedRequestBodyType.includes("xml")||this.selectedRequestBodyType.includes("text")||this.selectedRequestBodyType.includes("jose")?F`
|
||
|
|
<div class="tab-panel col" style="border-width:0 0 1px 0;">
|
||
|
|
<div class="tab-buttons row" @click="${e=>{"button"===e.target.tagName.toLowerCase()&&(this.activeSchemaTab=e.target.dataset.tab)}}">
|
||
|
|
<button class="tab-btn ${"example"===this.activeSchemaTab?"active":""}" data-tab = 'example'>EXAMPLE</button>
|
||
|
|
<button class="tab-btn ${"example"!==this.activeSchemaTab?"active":""}" data-tab = 'schema'>SCHEMA</button>
|
||
|
|
</div>
|
||
|
|
${"example"===this.activeSchemaTab?F`<div class="tab-content col"> ${o}</div>`:F`<div class="tab-content col"> ${n}</div>`}
|
||
|
|
</div>`:F`
|
||
|
|
${t}
|
||
|
|
${r}`}
|
||
|
|
</div>
|
||
|
|
`}formDataParamAsObjectTemplate(e,t,r){var n;const o=AR(t,{}),a=ER(t,"json",t.examples,t.example,!1,!0,"text",!1);return F`
|
||
|
|
<div class="tab-panel row" style="min-height:220px; border-left: 6px solid var(--light-border-color); align-items: stretch;">
|
||
|
|
<div style="width:24px; background-color:var(--light-border-color)">
|
||
|
|
<div class="row" style="flex-direction:row-reverse; width:160px; height:24px; transform:rotate(270deg) translateX(-160px); transform-origin:top left; display:block;" @click="${e=>{if(e.target.classList.contains("v-tab-btn")){const{tab:t}=e.target.dataset;if(t){const r=e.target.closest(".tab-panel"),n=r.querySelector(`.v-tab-btn[data-tab="${t}"]`),o=[...r.querySelectorAll(`.v-tab-btn:not([data-tab="${t}"])`)],a=r.querySelector(`.tab-content[data-tab="${t}"]`),i=[...r.querySelectorAll(`.tab-content:not([data-tab="${t}"])`)];n.classList.add("active"),a.style.display="block",o.forEach((e=>{e.classList.remove("active")})),i.forEach((e=>{e.style.display="none"}))}}"button"===e.target.tagName.toLowerCase()&&(this.activeSchemaTab=e.target.dataset.tab)}}">
|
||
|
|
<button class="v-tab-btn ${"example"===this.activeSchemaTab?"active":""}" data-tab = 'example'>EXAMPLE</button>
|
||
|
|
<button class="v-tab-btn ${"example"!==this.activeSchemaTab?"active":""}" data-tab = 'schema'>SCHEMA</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
${F`
|
||
|
|
<div class="tab-content col" data-tab = 'example' style="display:${"example"===this.activeSchemaTab?"block":"none"}; padding-left:5px; width:100%">
|
||
|
|
<textarea
|
||
|
|
class = "textarea"
|
||
|
|
part = "textarea textarea-param"
|
||
|
|
style = "width:100%; border:none; resize:vertical;"
|
||
|
|
data-array = "false"
|
||
|
|
data-ptype = "${r.includes("form-urlencode")?"form-urlencode":"form-data"}"
|
||
|
|
data-pname = "${e}"
|
||
|
|
data-example = "${(null===(n=a[0])||void 0===n?void 0:n.exampleValue)||""}"
|
||
|
|
.textContent = "${"true"===this.fillRequestFieldsWithExample?a[0].exampleValue:""}"
|
||
|
|
spellcheck = "false"
|
||
|
|
></textarea>
|
||
|
|
<!-- This textarea(hidden) is to store the original example value, in focused mode on navbar change it is used to update the example text -->
|
||
|
|
<textarea data-pname = "hidden-${e}" data-ptype = "${r.includes("form-urlencode")?"hidden-form-urlencode":"hidden-form-data"}" class="is-hidden" style="display:none">${a[0].exampleValue}</textarea>
|
||
|
|
</div>`}
|
||
|
|
${F`
|
||
|
|
<div class="tab-content col" data-tab = 'schema' style="display:${"example"!==this.activeSchemaTab?"block":"none"}; padding-left:5px; width:100%;">
|
||
|
|
<schema-tree
|
||
|
|
.data = '${o}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
> </schema-tree>
|
||
|
|
</div>`}
|
||
|
|
</div>
|
||
|
|
`}formDataTemplate(e,t,r=""){const n=[];if(e.properties){for(const r in e.properties){var o,a;const i=e.properties[r];if(i.readOnly)continue;const s=i.examples||i.example||"",l=i.type,c=fR(i),p="read focused".includes(this.renderStyle)?"200px":"160px",u=yR(c.examples||c.example,c.type);n.push(F`
|
||
|
|
<tr>
|
||
|
|
<td style="width:${p}; min-width:100px;">
|
||
|
|
<div class="param-name ${i.deprecated?"deprecated":""}">
|
||
|
|
${r}${null!==(o=e.required)&&void 0!==o&&o.includes(r)||i.required?F`<span style='color:var(--red);'>*</span>`:""}
|
||
|
|
</div>
|
||
|
|
<div class="param-type">${c.type}</div>
|
||
|
|
</td>
|
||
|
|
<td
|
||
|
|
style="${"object"===l?"width:100%; padding:0;":"true"===this.allowTry?"":"display:none;"} min-width:100px;"
|
||
|
|
colspan="${"object"===l?2:1}">
|
||
|
|
${"array"===l?"binary"===(null===(a=i.items)||void 0===a?void 0:a.format)?F`
|
||
|
|
<div class="file-input-container col" style='align-items:flex-end;' @click="${e=>this.onAddRemoveFileInput(e,r,t)}">
|
||
|
|
<div class='input-set row'>
|
||
|
|
<input
|
||
|
|
type = "file"
|
||
|
|
part = "file-input"
|
||
|
|
style = "width:100%"
|
||
|
|
data-pname = "${r}"
|
||
|
|
data-ptype = "${t.includes("form-urlencode")?"form-urlencode":"form-data"}"
|
||
|
|
data-array = "false"
|
||
|
|
data-file-array = "true"
|
||
|
|
/>
|
||
|
|
<button class="file-input-remove-btn"> ✕ </button>
|
||
|
|
</div>
|
||
|
|
<button class="m-btn primary file-input-add-btn" part="btn btn-fill" style="margin:2px 25px 0 0; padding:2px 6px;">ADD</button>
|
||
|
|
</div>
|
||
|
|
`:F`
|
||
|
|
<tag-input
|
||
|
|
style = "width:100%"
|
||
|
|
data-ptype = "${t.includes("form-urlencode")?"form-urlencode":"form-data"}"
|
||
|
|
data-pname = "${r}"
|
||
|
|
data-example = "${Array.isArray(s)?s.join("~|~"):s}"
|
||
|
|
data-array = "true"
|
||
|
|
placeholder = "add-multiple ↩"
|
||
|
|
.value = "${Array.isArray(s)?Array.isArray(s[0])?s[0]:[s[0]]:[s]}"
|
||
|
|
>
|
||
|
|
</tag-input>
|
||
|
|
`:F`
|
||
|
|
${"object"===l?this.formDataParamAsObjectTemplate.call(this,r,i,t):F`
|
||
|
|
${"true"===this.allowTry?F`<input
|
||
|
|
.value = "${"true"===this.fillRequestFieldsWithExample?u.exampleVal:""}"
|
||
|
|
spellcheck = "false"
|
||
|
|
type = "${"binary"===i.format?"file":"password"===i.format?"password":"text"}"
|
||
|
|
part = "textbox textbox-param"
|
||
|
|
style = "width:100%"
|
||
|
|
data-ptype = "${t.includes("form-urlencode")?"form-urlencode":"form-data"}"
|
||
|
|
data-pname = "${r}"
|
||
|
|
data-example = "${Array.isArray(s)?s[0]:s}"
|
||
|
|
data-array = "false"
|
||
|
|
/>`:""}
|
||
|
|
`}`}
|
||
|
|
</td>
|
||
|
|
${"object"===l?"":F`
|
||
|
|
<td>
|
||
|
|
${c.default||c.constrain||c.allowedValues||c.pattern?F`
|
||
|
|
<div class="param-constraint">
|
||
|
|
${c.default?F`<span style="font-weight:bold">Default: </span>${c.default}<br/>`:""}
|
||
|
|
${c.pattern?F`<span style="font-weight:bold">Pattern: </span>${c.pattern}<br/>`:""}
|
||
|
|
${c.constrain?F`${c.constrain}<br/>`:""}
|
||
|
|
${c.allowedValues&&c.allowedValues.split("┃").map(((e,t)=>F`
|
||
|
|
${t>0?"┃":F`<span style="font-weight:bold">Allowed: </span>`}
|
||
|
|
${F`
|
||
|
|
<a part="anchor anchor-param-constraint" class = "${"true"===this.allowTry?"":"inactive-link"}"
|
||
|
|
data-type="${"array"===c.type?c.type:"string"}"
|
||
|
|
data-enum="${e.trim()}"
|
||
|
|
@click="${e=>{const t=e.target.closest("table").querySelector(`[data-pname="${r}"]`);t&&("array"===e.target.dataset.type?t.value=[e.target.dataset.enum]:t.value=e.target.dataset.enum)}}"
|
||
|
|
>
|
||
|
|
${e}
|
||
|
|
</a>`}`))}
|
||
|
|
</div>`:""}
|
||
|
|
</td>`}
|
||
|
|
</tr>
|
||
|
|
${"object"===l?"":F`
|
||
|
|
<tr>
|
||
|
|
<td style="border:none"> </td>
|
||
|
|
<td colspan="2" style="border:none; margin-top:0; padding:0 5px 8px 5px;">
|
||
|
|
<span class="m-markdown-small">${HP(qe(i.description||""))}</span>
|
||
|
|
${this.exampleListTemplate.call(this,r,c.type,u.exampleList)}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`}`)}return F`
|
||
|
|
<table style="width:100%;" class="m-table">
|
||
|
|
${n}
|
||
|
|
</table>
|
||
|
|
`}return F`
|
||
|
|
<textarea
|
||
|
|
class = "textarea dynamic-form-param ${t}"
|
||
|
|
part = "textarea textarea-param"
|
||
|
|
spellcheck = "false"
|
||
|
|
data-pname="dynamic-form"
|
||
|
|
data-ptype="${t}"
|
||
|
|
.textContent = "${r}"
|
||
|
|
style="width:100%"
|
||
|
|
></textarea>
|
||
|
|
${e.description?F`<span class="m-markdown-small">${HP(qe(e.description))}</span>`:""}
|
||
|
|
`}apiResponseTabTemplate(){const e=this.responseHeaders.includes("json")?"json":this.responseHeaders.includes("html")||this.responseHeaders.includes("xml")?"html":"";return F`
|
||
|
|
<div class="row" style="font-size:var(--font-size-small); margin:5px 0">
|
||
|
|
<div class="response-message ${this.responseStatus}">Response Status: ${this.responseMessage}</div>
|
||
|
|
<div style="flex:1"></div>
|
||
|
|
<button class="m-btn" part="btn btn-outline btn-clear-response" @click="${this.clearResponseData}">CLEAR RESPONSE</button>
|
||
|
|
</div>
|
||
|
|
<div class="tab-panel col" style="border-width:0 0 1px 0;">
|
||
|
|
<div id="tab_buttons" class="tab-buttons row" @click="${e=>{!1!==e.target.classList.contains("tab-btn")&&(this.activeResponseTab=e.target.dataset.tab)}}">
|
||
|
|
<button class="tab-btn ${"response"===this.activeResponseTab?"active":""}" data-tab = 'response' > RESPONSE</button>
|
||
|
|
<button class="tab-btn ${"headers"===this.activeResponseTab?"active":""}" data-tab = 'headers' > RESPONSE HEADERS</button>
|
||
|
|
<button class="tab-btn ${"curl"===this.activeResponseTab?"active":""}" data-tab = 'curl'>CURL</button>
|
||
|
|
</div>
|
||
|
|
${this.responseIsBlob?F`
|
||
|
|
<div class="tab-content col" style="flex:1; display:${"response"===this.activeResponseTab?"flex":"none"};">
|
||
|
|
<button class="m-btn thin-border mar-top-8" style="width:135px" @click='${e=>{st(this.responseBlobUrl,this.respContentDisposition)}}' part="btn btn-outline">
|
||
|
|
DOWNLOAD
|
||
|
|
</button>
|
||
|
|
${"view"===this.responseBlobType?F`<button class="m-btn thin-border mar-top-8" style="width:135px" @click='${e=>{lt(this.responseBlobUrl)}}' part="btn btn-outline">VIEW (NEW TAB)</button>`:""}
|
||
|
|
</div>`:F`
|
||
|
|
<div class="tab-content col m-markdown" style="flex:1;display:${"response"===this.activeResponseTab?"flex":"none"};" >
|
||
|
|
<button class="toolbar-btn" style="position:absolute; top:12px; right:8px" @click='${e=>{ot(this.responseText,e)}}' part="btn btn-fill"> Copy </button>
|
||
|
|
<pre style="white-space:pre; max-height:400px; overflow:auto">${e?F`<code>${HP(He().highlight(this.responseText,He().languages[e],e))}</code>`:`${this.responseText}`}</pre>
|
||
|
|
</div>`}
|
||
|
|
<div class="tab-content col m-markdown" style="flex:1;display:${"headers"===this.activeResponseTab?"flex":"none"};" >
|
||
|
|
<button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${e=>{ot(this.responseHeaders,e)}}' part="btn btn-fill"> Copy </button>
|
||
|
|
<pre style="white-space:pre"><code>${HP(He().highlight(this.responseHeaders,He().languages.css,"css"))}</code></pre>
|
||
|
|
</div>
|
||
|
|
<div class="tab-content col m-markdown" style="flex:1;display:${"curl"===this.activeResponseTab?"flex":"none"};">
|
||
|
|
<button class="toolbar-btn" style = "position:absolute; top:12px; right:8px" @click='${e=>{ot(this.curlSyntax.replace(/\\$/,""),e)}}' part="btn btn-fill"> Copy </button>
|
||
|
|
<pre style="white-space:pre"><code>${HP(He().highlight(this.curlSyntax.trim().replace(/\\$/,""),He().languages.shell,"shell"))}</code></pre>
|
||
|
|
</div>
|
||
|
|
</div>`}apiCallTemplate(){var e,t;let r="";this.servers&&this.servers.length>0&&(r=F`
|
||
|
|
<select style="min-width:100px;" @change='${e=>{this.serverUrl=e.target.value}}'>
|
||
|
|
${this.servers.map((e=>F`<option value = "${e.url}"> ${e.url} - ${e.description} </option>`))}
|
||
|
|
</select>
|
||
|
|
`);const n=F`
|
||
|
|
<div style="display:flex; flex-direction:column;">
|
||
|
|
${r}
|
||
|
|
${this.serverUrl?F`
|
||
|
|
<div style="display:flex; align-items:baseline;">
|
||
|
|
<div style="font-weight:bold; padding-right:5px;">API Server</div>
|
||
|
|
<span class = "gray-text"> ${this.serverUrl} </span>
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
`;return F`
|
||
|
|
<div style="display:flex; align-items:flex-end; margin:16px 0; font-size:var(--font-size-small);">
|
||
|
|
<div class="hide-in-small-screen" style="flex-direction:column; margin:0; width:calc(100% - 60px);">
|
||
|
|
<div style="display:flex; flex-direction:row; align-items:center; overflow:hidden;">
|
||
|
|
${n}
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;">
|
||
|
|
<div style="font-weight:bold; padding-right:5px;">Authentication</div>
|
||
|
|
${(null===(e=this.security)||void 0===e?void 0:e.length)>0?F`
|
||
|
|
${this.api_keys.length>0?F`<div style="color:var(--blue); overflow:hidden;">
|
||
|
|
${1===this.api_keys.length?`${null===(t=this.api_keys[0])||void 0===t?void 0:t.typeDisplay} in ${this.api_keys[0].in}`:`${this.api_keys.length} API keys applied`}
|
||
|
|
</div>`:F`<div class="gray-text">Required <span style="color:var(--red)">(None Applied)</span>`}`:F`<span class="gray-text"> Not Required </span>`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
${this.parameters.length>0||this.request_body?F`
|
||
|
|
<button class="m-btn thin-border" part="btn btn-outline btn-fill" style="margin-right:5px;" @click="${this.onFillRequestData}" title="Fills with example data (if provided)">
|
||
|
|
FILL EXAMPLE
|
||
|
|
</button>
|
||
|
|
<button class="m-btn thin-border" part="btn btn-outline btn-clear" style="margin-right:5px;" @click="${this.onClearRequestData}">
|
||
|
|
CLEAR
|
||
|
|
</button>`:""}
|
||
|
|
<button class="m-btn primary thin-border" part="btn btn-try" @click="${this.onTryClick}">TRY</button>
|
||
|
|
</div>
|
||
|
|
${""===this.responseMessage?"":this.apiResponseTabTemplate()}
|
||
|
|
`}async onFillRequestData(e){[...e.target.closest(".request-panel").querySelectorAll("input, tag-input, textarea:not(.is-hidden)")].forEach((e=>{e.dataset.example&&("TAG-INPUT"===e.tagName.toUpperCase()?e.value=e.dataset.example.split("~|~"):e.value=e.dataset.example)}))}async onClearRequestData(e){[...e.target.closest(".request-panel").querySelectorAll("input, tag-input, textarea:not(.is-hidden)")].forEach((e=>{e.value=""}))}async onTryClick(e){var t;const r=e.target;let n,o,a="",i="",s="",l="";const c=null===(t=this.closest(".expanded-req-resp-container, .req-resp-container"))||void 0===t?void 0:t.getElementsByTagName("api-response")[0],p=null==c?void 0:c.selectedMimeType,u=e.target.closest(".request-panel"),d=[...u.querySelectorAll("[data-ptype='path']")],h=[...u.querySelectorAll("[data-ptype='query']")],f=[...u.querySelectorAll("[data-ptype='query-object']")],m=[...u.querySelectorAll("[data-ptype='header']")],y=u.querySelector(".request-body-container");n=this.path;const g={method:this.method.toUpperCase()};d.map((e=>{n=n.replace(`{${e.dataset.pname}}`,encodeURIComponent(e.value))}));const v=new Map,b=[];h.length>0&&h.forEach((e=>{const t=new URLSearchParams;if("true"===e.dataset.paramAllowReserved&&b.push(e.dataset.pname),"false"===e.dataset.array)""!==e.value&&t.append(e.dataset.pname,e.value);else{const{paramSerializeStyle:r,paramSerializeExplode:n}=e.dataset;let o=e.value&&Array.isArray(e.value)?e.value:[];o=Array.isArray(o)?o.filter((e=>""!==e)):[],o.length>0&&("spaceDelimited"===r?t.append(e.dataset.pname,o.join(" ").replace(/^\s|\s$/g,"")):"pipeDelimited"===r?t.append(e.dataset.pname,o.join("|").replace(/^\||\|$/g,"")):"true"===n?o.forEach((r=>{t.append(e.dataset.pname,r)})):t.append(e.dataset.pname,o.join(",").replace(/^,|,$/g,"")))}t.toString()&&v.set(e.dataset.pname,t)})),f.length>0&&f.map((e=>{const t=new URLSearchParams;try{let r={};const{paramSerializeStyle:n,paramSerializeExplode:o}=e.dataset;if(r=Object.assign(r,JSON.parse(e.value.replace(/\s+/g," "))),"true"===e.dataset.paramAllowReserved&&b.push(e.dataset.pname),"json xml".includes(n))"json"===n?t.append(e.dataset.pname,JSON.stringify(r)):"xml"===n&&t.append(e.dataset.pname,vR(r));else for(const e in r)"object"==typeof r[e]?Array.isArray(r[e])&&("spaceDelimited"===n?t.append(e,r[e].join(" ")):"pipeDelimited"===n?t.append(e,r[e].join("|")):"true"===o?r[e].forEach((r=>{t.append(e,r)})):t.append(e,r[e])):t.append(e,r[e])}catch(t){console.log("RapiDoc: unable to parse %s into object",e.value)}t.toString()&&v.set(e.dataset.pname,t)}));let x="";if(v.size&&(x="?",v.forEach(((e,t)=>{b.includes(t)?(x+=`${t}=`,x+=e.getAll(t).join(`&${t}=`),x+="&"):x+=`${e.toString()}&`})),x=x.slice(0,-1)),n=`${n}${x}`,this.api_keys.filter((e=>"query"===e.in)).forEach((e=>{n=`${n}${n.includes("?")?"&":"?"}${e.name}=${encodeURIComponent(e.finalKeyValue)}`})),n=`${this.serverUrl.replace(/\/$/,"")}${n}`,!1===n.startsWith("http")){o=new URL(n,window.location.href).href}else o=n;a=`curl -X ${this.method.toUpperCase()} "${o}" \\\n`;const w=new Headers;if(p?(w.append("Accept",p),i+=` -H "Accept: ${p}" \\\n`):this.accept&&(w.append("Accept",this.accept),i+=` -H "Accept: ${this.accept}" \\\n`),this.api_keys.filter((e=>"header"===e.in)).forEach((e=>{w.append(e.name,e.finalKeyValue),i+=` -H "${e.name}: ${e.finalKeyValue}" \\\n`})),m.map((e=>{e.value&&(w.append(e.dataset.pname,e.value),i+=` -H "${e.dataset.pname}: ${e.value}" \\\n`)})),y){const e=y.dataset.selectedRequestBodyType;if(e.includes("form-urlencoded")){const e=u.querySelector("[data-ptype='dynamic-form']");if(e){const t=e.value,r=new URLSearchParams;let n,o=!0;if(t)try{n=JSON.parse(t)}catch(e){o=!1,console.warn("RapiDoc: Invalid JSON provided",e)}else o=!1;if(o){for(const e in n)r.append(e,JSON.stringify(n[e]));g.body=r,s=` -d ${r.toString()} \\\n`}}else{const e=[...u.querySelectorAll("[data-ptype='form-urlencode']")],t=new URLSearchParams;e.filter((e=>"file"!==e.type)).forEach((e=>{if("false"===e.dataset.array)e.value&&t.append(e.dataset.pname,e.value);else{const r=e.value&&Array.isArray(e.value)?e.value.join(","):"";t.app
|
||
|
|
.table {
|
||
|
|
font-size: var(--font-size-small);
|
||
|
|
text-align: left;
|
||
|
|
line-height: calc(var(--font-size-small) + 6px);
|
||
|
|
}
|
||
|
|
.table .tr {
|
||
|
|
width: calc(100% - 5px);
|
||
|
|
padding: 0 0 0 5px;
|
||
|
|
border-bottom: 1px dotted var(--light-border-color);
|
||
|
|
}
|
||
|
|
.table .td {
|
||
|
|
padding: 4px 0;
|
||
|
|
}
|
||
|
|
.table .key {
|
||
|
|
width: 240px;
|
||
|
|
}
|
||
|
|
.key.deprecated .key-label {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
|
||
|
|
.table .key-type {
|
||
|
|
white-space: normal;
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
.collapsed-descr .tr {
|
||
|
|
max-height: calc(var(--font-size-small) + var(--font-size-small) + 4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.obj-toggle {
|
||
|
|
padding: 0 2px;
|
||
|
|
border-radius:2px;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: -16px;
|
||
|
|
color:var(--primary-color);
|
||
|
|
cursor:pointer;
|
||
|
|
font-size: calc(var(--font-size-small) + 4px);
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
background-clip: border-box;
|
||
|
|
}
|
||
|
|
.obj-toggle:hover {
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
.tr.expanded + .object-body {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.tr.collapsed + .object-body {
|
||
|
|
display:none;
|
||
|
|
}`,et]}render(){var e,t,r;return F`
|
||
|
|
<div class="table ${"true"===this.schemaDescriptionExpanded?"expanded-descr":"collapsed-descr"}">
|
||
|
|
<div class='toolbar'>
|
||
|
|
<div class="toolbar-item schema-root-type ${(null===(e=this.data)||void 0===e?void 0:e["::type"])||""} "> ${(null===(t=this.data)||void 0===t?void 0:t["::type"])||""} </div>
|
||
|
|
${"true"===this.allowSchemaDescriptionExpandToggle?F`
|
||
|
|
<div style="flex:1"></div>
|
||
|
|
<div class='toolbar-item' @click='${()=>{this.schemaDescriptionExpanded="true"===this.schemaDescriptionExpanded?"false":"true"}}'>
|
||
|
|
${"true"===this.schemaDescriptionExpanded?"Single line description":"Multiline description"}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
</div>
|
||
|
|
${null!==(r=this.data)&&void 0!==r&&r["::description"]?F`<span class='m-markdown'> ${HP(qe(this.data["::description"]||""))}</span>`:""}
|
||
|
|
<div style = 'border:1px solid var(--light-border-color)'>
|
||
|
|
<div style='display:flex; background-color: var(--bg2); padding:8px 4px; border-bottom:1px solid var(--light-border-color);'>
|
||
|
|
<div class='key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Field </div>
|
||
|
|
<div class='key-type' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Type </div>
|
||
|
|
<div class='key-descr' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Description </div>
|
||
|
|
</div>
|
||
|
|
${this.data?F`
|
||
|
|
${this.generateTree("array"===this.data["::type"]?this.data["::props"]:this.data,this.data["::type"],this.data["::array-type"])}`:""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}generateTree(e,t="object",r="",n="",o="",a=0,i=0,s=""){var l,c;if("true"===this.schemaHideReadOnly){if("array"===t&&"readonly"===s)return;if("readonly"===e["::readwrite"])return}if("true"===this.schemaHideWriteOnly){if("array"===t&&"writeonly"===s)return;if("writeonly"===e["::readwrite"])return}const p=null!==(l=e["::type"])&&void 0!==l&&l.startsWith("xxx-of")?a:a+1,u="xxx-of-option"===t||"xxx-of-option"===e["::type"]||n.startsWith("::OPTION")?i:i+1,d=16*u;if(!e)return F`<div class="null" style="display:inline;">null</div>`;if(0===Object.keys(e).length)return F`<span class="td key object" style='padding-left:${d}px'>${n}</span>`;let h="",f="",m=!1;if(n.startsWith("::ONE~OF")||n.startsWith("::ANY~OF"))h=n.replace("::","").replace("~"," "),m=!0;else if(n.startsWith("::OPTION")){const e=n.split("~");h=e[1],f=e[2]}else h=n;let y="";if("object"===e["::type"]?y="array"===t?"array of object":"object":"array"===e["::type"]&&(y="array"===t?"array of array "+("object"!==r?`of ${r}`:""):"array"),"object"==typeof e)return F`
|
||
|
|
${p>=0&&n?F`
|
||
|
|
<div class='tr ${p<=this.schemaExpandLevel?"expanded":"collapsed"} ${e["::type"]}' data-obj='${h}'>
|
||
|
|
<div class="td key ${e["::deprecated"]?"deprecated":""}" style='padding-left:${d}px'>
|
||
|
|
${h||f?F`
|
||
|
|
<span
|
||
|
|
class='obj-toggle ${p<this.schemaExpandLevel?"expanded":"collapsed"}'
|
||
|
|
data-obj='${h}'
|
||
|
|
@click= ${e=>this.toggleObjectExpand(e,h)}
|
||
|
|
>
|
||
|
|
${a<this.schemaExpandLevel?"-":"+"}
|
||
|
|
</span>`:""}
|
||
|
|
${"xxx-of-option"===e["::type"]||"xxx-of-array"===e["::type"]||n.startsWith("::OPTION")?F`<span class="xxx-of-key" style="margin-left:-6px">${h}</span><span class="${m?"xxx-of-key":"xxx-of-descr"}">${f}</span>`:h.endsWith("*")?F`<span class="key-label" style="display:inline-block; margin-left:-6px;"> ${h.substring(0,h.length-1)}</span><span style='color:var(--red);'>*</span>`:F`<span class="key-label" style="display:inline-block; margin-left:-6px;">${"::props"===h?"":h}</span>`}
|
||
|
|
${"xxx-of"===e["::type"]&&"array"===t?F`<span style="color:var(--primary-color)">ARRAY</span>`:""}
|
||
|
|
</div>
|
||
|
|
<div class='td key-type' title="${"readonly"===e["::readwrite"]?"Read-Only":"writeonly"===e["::readwrite"]?"Write-Only":""}">
|
||
|
|
${(e["::type"]||"").includes("xxx-of")?"":y}
|
||
|
|
${"readonly"===e["::readwrite"]?" 🆁":"writeonly"===e["::readwrite"]?" 🆆":""}
|
||
|
|
</div>
|
||
|
|
<div class='td key-descr m-markdown-small' style='line-height:1.7'>${HP(qe(o||""))}</div>
|
||
|
|
</div>`:F`
|
||
|
|
${"array"===e["::type"]&&"array"===t?F`
|
||
|
|
<div class='tr'>
|
||
|
|
<div class='td key'></div>
|
||
|
|
<div class='td key-type'>
|
||
|
|
${r&&"object"!==r?`${t} of ${r}`:t}
|
||
|
|
</div>
|
||
|
|
<div class='td key-descr'></div>
|
||
|
|
</div>`:""}
|
||
|
|
`}
|
||
|
|
<div class='object-body'>
|
||
|
|
${Array.isArray(e)&&e[0]?F`${this.generateTree(e[0],"xxx-of-option","","::ARRAY~OF","",p,u,"")}`:F`
|
||
|
|
${Object.keys(e).map((t=>F`
|
||
|
|
${["::title","::description","::type","::props","::deprecated","::array-type","::readwrite"].includes(t)?"array"===e[t]["::type"]||"object"===e[t]["::type"]?F`${this.generateTree("array"===e[t]["::type"]?e[t]["::props"]:e[t],e[t]["::type"],e[t]["::array-type"]||"",t,e[t]["::description"],p,u,e[t]["::readwrite"]?e[t]["::readwrite"]:"")}`:"":F`${this.generateTree("array"===e[t]["::type"]?e[t]["::props"]:e[t],e[t]["::type"],e[t]["::array-type"]||"",t,e[t]["::description"],p,u,e[t]["::readwrite"]?e[t]["::readwrite"]:"")}`}
|
||
|
|
`))}
|
||
|
|
`}
|
||
|
|
<div>
|
||
|
|
`;const[g,v,b,x,w,$,k,S,A]=e.split("~|~");if("🆁"===v&&"true"===this.schemaHideReadOnly)return;if("🆆"===v&&"true"===this.schemaHideWriteOnly)return;const E=g.replace(/┃.*/g,"").replace(/[^a-zA-Z0-9+]/g,"").substring(0,4).toLowerCase();let O="";return O="array"===t?F`
|
||
|
|
<div class='td key-type ${E}' title="${"readonly"===s?"Read-Only":"writeonly"===v?"Write-Only":""}">
|
||
|
|
[${g}] ${"readonly"===s?"🆁":"writeonly"===s?"🆆":""}
|
||
|
|
</div>`:F`
|
||
|
|
<div class='td key-type ${E}' title="${"🆁"===v?"Read-Only":"🆆"===v?"Write-Only":""}">
|
||
|
|
${g} ${v}
|
||
|
|
</div>`,F`
|
||
|
|
<div class = "tr primitive">
|
||
|
|
<div class="td key ${A}" style='padding-left:${d}px'>
|
||
|
|
${null!==(c=h)&&void 0!==c&&c.endsWith("*")?F`<span class="key-label">${h.substring(0,h.length-1)}</span><span style='color:var(--red);'>*</span>`:n.startsWith("::OPTION")?F`<span class='xxx-of-key'>${h}</span><span class="xxx-of-descr">${f}</span>`:F`${h?F`<span class="key-label"> ${h}</span>`:F`<span class="xxx-of-descr">${S}</span>`}`}
|
||
|
|
</div>
|
||
|
|
${O}
|
||
|
|
<div class='td key-descr'>
|
||
|
|
${"array"===t?F`<span class="m-markdown-small">${HP(qe(o))}</span>`:""}
|
||
|
|
${b?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${b}</div>`:""}
|
||
|
|
${x?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${x}</div>`:""}
|
||
|
|
${w?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${w}</div>`:""}
|
||
|
|
${$?F`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${$}</div>`:""}
|
||
|
|
${k?F`<span class="m-markdown-small">${HP(qe(`${S?`**${S}:**`:""} ${k}`))}</span>`:""}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}toggleObjectExpand(e){const t=e.target.closest(".tr");t.classList.contains("expanded")?(t.classList.add("collapsed"),t.classList.remove("expanded"),e.target.innerText="+"):(t.classList.remove("collapsed"),t.classList.add("expanded"),e.target.innerText="-")}});function _R(e){const t=new qe.Renderer;return t.heading=(t,r,n,o)=>`<h${r} class="observe-me" id="${e}--${o.slug(n)}">${t}</h${r}>`,t}function jR(e,t=""){var r,n,o;const a=new Set;for(const t in e.responses)for(const r in null===(i=e.responses[t])||void 0===i?void 0:i.content){var i;a.add(r.trim())}const s=[...a].join(", "),l=this.resolvedSpec.securitySchemes.filter((t=>{var r;return t.finalKeyValue&&(null===(r=e.security)||void 0===r?void 0:r.some((e=>t.securitySchemeId in e)))}))||[],c=this.resolvedSpec.securitySchemes.find((e=>e.securitySchemeId===rt&&"-"!==e.value));c&&l.push(c);const p=e.xCodeSamples?iR.call(this,e.xCodeSamples):"";return F`
|
||
|
|
${"read"===this.renderStyle?F`<div class='divider' part="operation-divider"></div>`:""}
|
||
|
|
<div class='expanded-endpoint-body observe-me ${e.method} ${e.deprecated?"deprecated":""} ' part="section-operation ${e.elementId}" id='${e.elementId}'>
|
||
|
|
${"focused"===this.renderStyle&&"General ⦂"!==t?F`<h3 class="upper" style="font-weight:bold"> ${t} </h3>`:""}
|
||
|
|
${e.deprecated?F`<div class="bold-text red-text"> DEPRECATED </div>`:""}
|
||
|
|
${F`
|
||
|
|
${e.xBadges&&(null===(r=e.xBadges)||void 0===r?void 0:r.length)>0?F`
|
||
|
|
<div style="display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);">
|
||
|
|
${e.xBadges.map((e=>F`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px; background-color: var(--light-${e.color}, var(--input-bg)); color:var(--${e.color}); border:1px solid var(--${e.color})">${e.label}</span>`))}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
<h2> ${e.shortSummary||`${e.method.toUpperCase()} ${e.path}`}</h2>
|
||
|
|
${e.isWebhook?F`<span style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span>`:F`
|
||
|
|
<div class='mono-font part="section-operation-url" regular-font-size' style='text-align:left; direction:ltr; padding: 8px 0; color:var(--fg3)'>
|
||
|
|
<span part="label-operation-method" class='regular-font upper method-fg bold-text ${e.method}'>${e.method}</span>
|
||
|
|
<span part="label-operation-path">${e.path}</span>
|
||
|
|
</div>
|
||
|
|
`}
|
||
|
|
<slot name="${e.elementId}"></slot>`}
|
||
|
|
${e.description?F`<div class="m-markdown"> ${HP(qe(e.description))}</div>`:""}
|
||
|
|
${aR.call(this,e.security)}
|
||
|
|
${p}
|
||
|
|
<div class='expanded-req-resp-container'>
|
||
|
|
<api-request
|
||
|
|
class = "${this.renderStyle}-mode"
|
||
|
|
style = "width:100%;"
|
||
|
|
method = "${e.method}"
|
||
|
|
path = "${e.path}"
|
||
|
|
.security = "${e.security}"
|
||
|
|
.parameters = "${e.parameters}"
|
||
|
|
.request_body = "${e.requestBody}"
|
||
|
|
.api_keys = "${l}"
|
||
|
|
.servers = "${e.servers}"
|
||
|
|
server-url = "${(null===(n=e.servers)||void 0===n||null===(o=n[0])||void 0===o?void 0:o.url)||this.selectedServer.computedUrl}"
|
||
|
|
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
|
||
|
|
allow-try = "${this.allowTry}"
|
||
|
|
accept = "${s}"
|
||
|
|
render-style="${this.renderStyle}"
|
||
|
|
schema-style = "${this.schemaStyle}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
|
||
|
|
schema-hide-read-only = "${this.schemaHideReadOnly}"
|
||
|
|
fetch-credentials = "${this.fetchCredentials}"
|
||
|
|
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
|
||
|
|
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
|
||
|
|
anchor:anchor, anchor-param-example:anchor-param-example"
|
||
|
|
> </api-request>
|
||
|
|
|
||
|
|
${e.callbacks?sR.call(this,e.callbacks):""}
|
||
|
|
|
||
|
|
<api-response
|
||
|
|
class = "${this.renderStyle}-mode"
|
||
|
|
style = "width:100%;"
|
||
|
|
.responses = "${e.responses}"
|
||
|
|
render-style = "${this.renderStyle}"
|
||
|
|
schema-style = "${this.schemaStyle}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
selected-status = "${Object.keys(e.responses||{})[0]||""}"
|
||
|
|
exportparts = "btn:btn, btn-response-status:btn-response-status, btn-selected-response-status:btn-selected-response-status, btn-fill:btn-fill, btn-copy:btn-copy"
|
||
|
|
> </api-response>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}function IR(){return this.resolvedSpec?F`
|
||
|
|
${this.resolvedSpec.tags.map((e=>F`
|
||
|
|
<section id="${e.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style="border-top:1px solid var(--primary-color);">
|
||
|
|
<div class="title tag" part="label-tag-title">${e.name}</div>
|
||
|
|
<slot name="${e.elementId}"></slot>
|
||
|
|
<div class="regular-font-size">
|
||
|
|
${HP(`\n <div class="m-markdown regular-font">\n ${qe(e.description||"","true"===this.infoDescriptionHeadingsInNavBar?{renderer:_R(e.elementId)}:void 0)}\n </div>`)}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class='regular-font section-gap--read-mode' part="section-operations-in-tag">
|
||
|
|
${e.paths.map((e=>jR.call(this,e,"BBB")))}
|
||
|
|
</section>
|
||
|
|
`))}
|
||
|
|
`:""}function PR(e){return F`
|
||
|
|
<div class='divider'></div>
|
||
|
|
<div class='expanded-endpoint-body observe-me ${e.name}' id='cmp--${e.id}' >
|
||
|
|
<div style="font-weight:bold"> ${e.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400;"> Schema </span></div>
|
||
|
|
${"table"===this.schemaStyle?F`
|
||
|
|
<schema-table
|
||
|
|
render-style = '${this.renderStyle}'
|
||
|
|
.data = '${AR(e.component,{})}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "false"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
> </schema-tree> `:F`
|
||
|
|
<schema-tree
|
||
|
|
render-style = '${this.renderStyle}'
|
||
|
|
.data = '${AR(e.component,{})}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "false"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
> </schema-tree>`}
|
||
|
|
</div>`}function RR(e,t){return-1!==e.id.indexOf("schemas-")?PR.call(this,e):F`
|
||
|
|
<div class='divider'></div>
|
||
|
|
<div class='expanded-endpoint-body observe-me ${e.name}' id='cmp--${e.id}' >
|
||
|
|
${F`
|
||
|
|
<div style="font-weight:bold"> ${e.name} <span style="color:var(--light-fg); font-size:var(--font-size-small); font-weight:400"> ${t} </span> </div>
|
||
|
|
${e.component?F`
|
||
|
|
<div class='mono-font regular-font-size' style='padding: 8px 0; color:var(--fg2)'>
|
||
|
|
<json-tree class="border tree" render-style='${this.renderStyle}' .data="${e.component}"> </json-tree>
|
||
|
|
</div>`:""}
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
`}function LR(){return this.resolvedSpec?F`
|
||
|
|
${this.resolvedSpec.components.map((e=>F`
|
||
|
|
<div id="cmp--${e.name.toLowerCase()}" class='regular-font section-gap--read-mode observe-me' style="border-top:1px solid var(--primary-color);">
|
||
|
|
<div class="title tag">${e.name}</div>
|
||
|
|
<div class="regular-font-size">
|
||
|
|
${HP(`<div class='m-markdown regular-font'>${qe(e.description?e.description:"")}</div>`)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class='regular-font section-gap--read-mode'>
|
||
|
|
${e.subComponents.filter((e=>!1!==e.expanded)).map((t=>RR.call(this,t,e.name)))}
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
`:""}function DR(){const e=new qe.Renderer;return e.heading=(e,t,r,n)=>`<h${t} class="observe-me" id="overview--${n.slug(r)}">${e}</h${t}>`,e}function FR(){var e,t,r,n;return F`
|
||
|
|
<section id="overview" part="section-overview"
|
||
|
|
class="observe-me ${"view"===this.renderStyle?"section-gap":"section-gap--read-mode"}">
|
||
|
|
${null!==(e=this.resolvedSpec)&&void 0!==e&&e.info?F`
|
||
|
|
<div id="api-title" part="label-overview-title" style="font-size:32px">
|
||
|
|
${this.resolvedSpec.info.title}
|
||
|
|
${this.resolvedSpec.info.version?F`
|
||
|
|
<span style = 'font-size:var(--font-size-small);font-weight:bold'>
|
||
|
|
${this.resolvedSpec.info.version}
|
||
|
|
</span>`:""}
|
||
|
|
</div>
|
||
|
|
<div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px); margin-top:8px;">
|
||
|
|
${null!==(t=this.resolvedSpec.info.contact)&&void 0!==t&&t.email?F`<span>${this.resolvedSpec.info.contact.name||"Email"}:
|
||
|
|
<a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a>
|
||
|
|
</span>`:""}
|
||
|
|
${null!==(r=this.resolvedSpec.info.contact)&&void 0!==r&&r.url?F`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>`:""}
|
||
|
|
${this.resolvedSpec.info.license?F`<span>License:
|
||
|
|
${this.resolvedSpec.info.license.url?F`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>`:this.resolvedSpec.info.license.name} </span>`:""}
|
||
|
|
${this.resolvedSpec.info.termsOfService?F`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">Terms of Service</a></span>`:""}
|
||
|
|
${this.specUrl&&"true"===this.allowSpecFileDownload?F`
|
||
|
|
<div style="display:flex; margin:12px 0; gap:8px; justify-content: start;">
|
||
|
|
<button class="m-btn thin-border" style="width:170px" part="btn btn-outline" @click='${e=>{st(this.specUrl,"openapi-spec")}}'>Download OpenAPI spec</button>
|
||
|
|
${null!==(n=this.specUrl)&&void 0!==n&&n.trim().toLowerCase().endsWith("json")?F`<button class="m-btn thin-border" style="width:200px" part="btn btn-outline" @click='${e=>{lt(this.specUrl)}}'>View OpenAPI spec (New Tab)</button>`:""}
|
||
|
|
</div>`:""}
|
||
|
|
</div>
|
||
|
|
<slot name="overview"></slot>
|
||
|
|
<div id="api-description">
|
||
|
|
${this.resolvedSpec.info.description?F`${HP(`\n <div class="m-markdown regular-font">\n ${qe(this.resolvedSpec.info.description,"true"===this.infoDescriptionHeadingsInNavBar?{renderer:DR()}:void 0)}\n </div>`)}`:""}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
</section>
|
||
|
|
`}function BR(e){var t;const r=null===(t=this.resolvedSpec)||void 0===t?void 0:t.servers.find((t=>t.url===e));return!!r&&(this.selectedServer=r,this.requestUpdate(),this.dispatchEvent(new CustomEvent("api-server-change",{bubbles:!0,composed:!0,detail:{selectedServer:r}})),!0)}function NR(e,t){const r=[...e.currentTarget.closest("table").querySelectorAll("input, select")];let n=t.url;r.forEach((e=>{const t=new RegExp(`{${e.dataset.var}}`,"g");n=n.replace(t,e.value)})),t.computedUrl=n,this.requestUpdate()}function zR(){return this.selectedServer&&this.selectedServer.variables?F`
|
||
|
|
<div class="table-title"> SERVER VARIABLES</div>
|
||
|
|
<table class='m-table'>
|
||
|
|
${Object.entries(this.selectedServer.variables).map((e=>F`
|
||
|
|
<tr>
|
||
|
|
<td style="vertical-align: middle;" >${e[0]}</td>
|
||
|
|
<td>
|
||
|
|
${e[1].enum?F`
|
||
|
|
<select
|
||
|
|
data-var = "${e[0]}"
|
||
|
|
@input = ${e=>{NR.call(this,e,this.selectedServer)}}
|
||
|
|
>
|
||
|
|
${Object.entries(e[1].enum).map((t=>e[1].default===t[1]?F`
|
||
|
|
<option
|
||
|
|
selected
|
||
|
|
label = ${t[1]}
|
||
|
|
value = ${t[1]}
|
||
|
|
/>`:F`
|
||
|
|
<option
|
||
|
|
label = ${t[1]}
|
||
|
|
value = ${t[1]}
|
||
|
|
/>`))}
|
||
|
|
</select>`:F`
|
||
|
|
<input
|
||
|
|
type = "text"
|
||
|
|
part="textbox textbox-server-var"
|
||
|
|
spellcheck = "false"
|
||
|
|
data-var = "${e[0]}"
|
||
|
|
value = "${e[1].default}"
|
||
|
|
@input = ${e=>{NR.call(this,e,this.selectedServer)}}
|
||
|
|
/>`}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
${e[1].description?F`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${HP(qe(e[1].description))} </span></td></tr>`:""}
|
||
|
|
`))}
|
||
|
|
</table>
|
||
|
|
`:""}function UR(){var e,t,r;return!this.resolvedSpec||this.resolvedSpec.specLoadError?"":F`
|
||
|
|
<section id = 'servers' part="section-servers" style="text-align:left; direction:ltr; margin-top:24px; margin-bottom:24px;" class='regular-font observe-me ${"read focused".includes(this.renderStyle)?"section-gap--read-mode":"section-gap"}'>
|
||
|
|
<div class = 'sub-title'>API SERVER</div>
|
||
|
|
<div class = 'mono-font' style='margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);'>
|
||
|
|
${this.resolvedSpec.servers&&0!==(null===(e=this.resolvedSpec.servers)||void 0===e?void 0:e.length)?F`
|
||
|
|
${null===(t=this.resolvedSpec)||void 0===t?void 0:t.servers.map(((e,t)=>F`
|
||
|
|
<input type = 'radio'
|
||
|
|
name = 'api_server'
|
||
|
|
id = 'srvr-opt-${t}'
|
||
|
|
value = '${e.url}'
|
||
|
|
@change = ${()=>{BR.call(this,e.url)}}
|
||
|
|
.checked = '${this.selectedServer.url===e.url}'
|
||
|
|
style = 'margin:4px 0; cursor:pointer'
|
||
|
|
/>
|
||
|
|
<label style='cursor:pointer' for='srvr-opt-${t}'>
|
||
|
|
${e.url} ${e.description?F`- <span class='regular-font'>${e.description} </span>`:""}
|
||
|
|
</label>
|
||
|
|
<br/>
|
||
|
|
`))}
|
||
|
|
`:""}
|
||
|
|
<div class="table-title primary-text" part="label-selected-server"> SELECTED: ${(null===(r=this.selectedServer)||void 0===r?void 0:r.computedUrl)||"none"}</div>
|
||
|
|
</div>
|
||
|
|
<slot name="servers"></slot>
|
||
|
|
${zR.call(this)}
|
||
|
|
</section>`}function qR(e,t="toggle"){const r=null==e?void 0:e.closest(".nav-bar-tag-and-paths");if(r){const e=r.classList.contains("expanded");!e||"toggle"!==t&&"collapse"!==t?e||"toggle"!==t&&"expand"!==t||r.classList.replace("collapsed","expanded"):r.classList.replace("expanded","collapsed")}}function MR(e){qR(e.target,"toggle")}function HR(e,t="expand-all"){!function(e,t="expand-all"){const r=[...e.querySelectorAll(".nav-bar-tag-and-paths")];"expand-all"===t?r.map((e=>{e.classList.replace("collapsed","expanded")})):r.map((e=>{e.classList.replace("expanded","collapsed")}))}(e.target.closest(".nav-scroll"),t)}function WR(){return!this.resolvedSpec||this.resolvedSpec.specLoadError?F`
|
||
|
|
<nav class='nav-bar' part="section-navbar">
|
||
|
|
<slot name="nav-logo" class="logo"></slot>
|
||
|
|
</nav>
|
||
|
|
`:F`
|
||
|
|
<nav class='nav-bar ${this.renderStyle}' part="section-navbar">
|
||
|
|
<slot name="nav-logo" class="logo"></slot>
|
||
|
|
${"false"===this.allowSearch&&"false"===this.allowAdvancedSearch?"":F`
|
||
|
|
<div style="display:flex; flex-direction:row; justify-content:center; align-items:center; padding:8px 24px 12px 24px; ${"false"===this.allowAdvancedSearch?"border-bottom: 1px solid var(--nav-hover-bg-color)":""}">
|
||
|
|
${"false"===this.allowSearch?"":F`
|
||
|
|
<div style="display:flex; flex:1; line-height:22px;">
|
||
|
|
<input id="nav-bar-search"
|
||
|
|
part = "textbox textbox-nav-filter"
|
||
|
|
style = "width:100%; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)"
|
||
|
|
type = "text"
|
||
|
|
placeholder = "Filter"
|
||
|
|
@change = "${this.onSearchChange}"
|
||
|
|
spellcheck = "false"
|
||
|
|
>
|
||
|
|
<div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">↩</div>
|
||
|
|
</div>
|
||
|
|
${this.matchPaths?F`
|
||
|
|
<div @click = '${this.onClearSearch}' style='margin-left:5px; cursor:pointer; align-self:center; color:var(--nav-text-color)' class='small-font-size primary-text bold-text'> CLEAR </div>`:""}
|
||
|
|
`}
|
||
|
|
${"false"===this.allowAdvancedSearch||this.matchPaths?"":F`
|
||
|
|
<button class="m-btn primary" part="btn btn-fill btn-search" style="margin-left:5px;" @click="${this.onShowSearchModalClicked}">
|
||
|
|
Search
|
||
|
|
</button>
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
`}
|
||
|
|
${F`<nav class='nav-scroll' part="section-navbar-scroll">
|
||
|
|
${"false"!==this.showInfo&&this.resolvedSpec.info?F`
|
||
|
|
${"true"===this.infoDescriptionHeadingsInNavBar?F`
|
||
|
|
${this.resolvedSpec.infoDescriptionHeaders.length>0?F`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${e=>this.scrollToEventTarget(e,!1)}' > Overview </div>`:""}
|
||
|
|
<div class="overview-headers">
|
||
|
|
${this.resolvedSpec.infoDescriptionHeaders.map((e=>F`
|
||
|
|
<div
|
||
|
|
class='nav-bar-h${e.depth}'
|
||
|
|
id="link-overview--${(new qe.Slugger).slug(e.text)}"
|
||
|
|
data-content-id='overview--${(new qe.Slugger).slug(e.text)}'
|
||
|
|
@click='${e=>this.scrollToEventTarget(e,!1)}'
|
||
|
|
>
|
||
|
|
${e.text}
|
||
|
|
</div>`))}
|
||
|
|
</div>
|
||
|
|
${this.resolvedSpec.infoDescriptionHeaders.length>0?F`<hr style='border-top: 1px solid var(--nav-hover-bg-color); border-width:1px 0 0 0; margin: 15px 0 0 0'/>`:""}
|
||
|
|
`:F`<div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = '${e=>this.scrollToEventTarget(e,!1)}'> Overview </div>`}
|
||
|
|
`:""}
|
||
|
|
|
||
|
|
${"false"===this.allowServerSelection?"":F`<div class='nav-bar-info' id='link-servers' data-content-id='servers' @click = '${e=>this.scrollToEventTarget(e,!1)}'> API Servers </div>`}
|
||
|
|
${"false"!==this.allowAuthentication&&this.resolvedSpec.securitySchemes?F`<div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = '${e=>this.scrollToEventTarget(e,!1)}'> Authentication </div>`:""}
|
||
|
|
|
||
|
|
<div id='link-operations-top' class='nav-bar-section operations' data-content-id='operations-top' @click = '${e=>this.scrollToEventTarget(e,!1)}'>
|
||
|
|
<div style="font-size:16px; display:flex; margin-left:10px;">
|
||
|
|
${"focused"===this.renderStyle?F`
|
||
|
|
<div @click="${e=>{HR.call(this,e,"expand-all")}}" title="Expand all" style="transform: rotate(90deg); cursor:pointer; margin-right:10px;">▸</div>
|
||
|
|
<div @click="${e=>{HR.call(this,e,"collapse-all")}}" title="Collapse all" style="transform: rotate(270deg); cursor:pointer;">▸</div>`:""}
|
||
|
|
</div>
|
||
|
|
<div class='nav-bar-section-title'> OPERATIONS </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TAGS AND PATHS-->
|
||
|
|
${this.resolvedSpec.tags.filter((e=>e.paths.filter((e=>at(this.matchPaths,e,this.matchType))).length)).map((e=>F`
|
||
|
|
<div class='nav-bar-tag-and-paths ${e.expanded?"expanded":"collapsed"}'>
|
||
|
|
${"General ⦂"===e.name?F`<hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.3; margin:-1px 0 0 0;"/>`:F`
|
||
|
|
<div
|
||
|
|
class='nav-bar-tag'
|
||
|
|
id="link-${e.elementId}"
|
||
|
|
data-content-id='${e.elementId}'
|
||
|
|
data-first-path-id='${e.firstPathId}'
|
||
|
|
@click='${e=>{"focused"===this.renderStyle&&"expand-collapse"===this.onNavTagClick?MR.call(this,e):this.scrollToEventTarget(e,!1)}}'
|
||
|
|
>
|
||
|
|
<div>${e.name}</div>
|
||
|
|
<div class="nav-bar-tag-icon" @click="${e=>{"focused"===this.renderStyle&&"show-description"===this.onNavTagClick&&MR.call(this,e)}}">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}
|
||
|
|
${"true"===this.infoDescriptionHeadingsInNavBar?F`
|
||
|
|
${"focused"===this.renderStyle&&"expand-collapse"===this.onNavTagClick?"":F`
|
||
|
|
<div class='tag-headers'>
|
||
|
|
${e.headers.map((t=>F`
|
||
|
|
<div
|
||
|
|
class='nav-bar-h${t.depth}'
|
||
|
|
id="link-${e.elementId}--${(new qe.Slugger).slug(t.text)}"
|
||
|
|
data-content-id='${e.elementId}--${(new qe.Slugger).slug(t.text)}'
|
||
|
|
@click='${e=>this.scrollToEventTarget(e,!1)}'
|
||
|
|
> ${t.text}</div>`))}
|
||
|
|
</div>`}`:""}
|
||
|
|
|
||
|
|
|
||
|
|
<div class='nav-bar-paths-under-tag'>
|
||
|
|
<!-- Paths in each tag (endpoints) -->
|
||
|
|
${e.paths.filter((e=>!this.matchPaths||at(this.matchPaths,e,this.matchType))).map((e=>F`
|
||
|
|
<div
|
||
|
|
class='nav-bar-path
|
||
|
|
${"true"===this.usePathInNavBar?"small-font":""}'
|
||
|
|
data-content-id='${e.elementId}'
|
||
|
|
id='link-${e.elementId}'
|
||
|
|
@click = '${e=>{this.scrollToEventTarget(e,!1)}}'
|
||
|
|
>
|
||
|
|
<span style = "${e.deprecated?"filter:opacity(0.5)":""}">
|
||
|
|
${e.isWebhook?F`<span style="font-weight:bold; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)">WEBHOOK</span>`:""}
|
||
|
|
${"true"===this.usePathInNavBar?F`<span class='mono-font'>${e.method.toUpperCase()} ${e.path}</span>`:e.summary||e.shortSummary}
|
||
|
|
</span>
|
||
|
|
</div>`))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
|
||
|
|
<!-- COMPONENTS -->
|
||
|
|
${this.resolvedSpec.components&&"true"===this.showComponents&&"focused"===this.renderStyle?F`
|
||
|
|
<div id='link-components' class='nav-bar-section components'>
|
||
|
|
<div></div>
|
||
|
|
<div class='nav-bar-section-title'>COMPONENTS</div>
|
||
|
|
</div>
|
||
|
|
${this.resolvedSpec.components.map((e=>e.subComponents.length?F`
|
||
|
|
<div class='nav-bar-tag'
|
||
|
|
data-content-id='cmp--${e.name.toLowerCase()}'
|
||
|
|
id='link-cmp--${e.name.toLowerCase()}'
|
||
|
|
@click='${e=>this.scrollToEventTarget(e,!1)}'>
|
||
|
|
${e.name}
|
||
|
|
</div>
|
||
|
|
${e.subComponents.filter((e=>!1!==e.expanded)).map((e=>F`
|
||
|
|
<div class='nav-bar-path' data-content-id='cmp--${e.id}' id='link-cmp--${e.id}' @click='${e=>this.scrollToEventTarget(e,!1)}'>
|
||
|
|
<span> ${e.name} </span>
|
||
|
|
</div>`))}`:""))}`:""}
|
||
|
|
</nav>`}
|
||
|
|
</nav>
|
||
|
|
`}function VR(e){const t=new qe.Renderer;return t.heading=(t,r,n,o)=>`<h${r} class="observe-me" id="${e}--${o.slug(n)}">${t}</h${r}>`,t}function GR(e){return F`
|
||
|
|
<div class='regular-font section-gap--focused-mode' part="section-operations-in-tag">
|
||
|
|
${e}
|
||
|
|
</div>`}function KR(){var e;if("true"===this.showInfo)return GR(FR.call(this));const t=this.resolvedSpec.tags[0],r=null===(e=this.resolvedSpec.tags[0])||void 0===e?void 0:e.paths[0];return GR(t&&r?jR.call(this,r,t.name):"")}function JR(e){return F`
|
||
|
|
<h1 id="${e.elementId}">${e.name}</h1>
|
||
|
|
${"show-description"===this.onNavTagClick&&e.description?F`
|
||
|
|
<div class="m-markdown">
|
||
|
|
${HP(`\n <div class="m-markdown regular-font">\n ${qe(e.description||"","true"===this.infoDescriptionHeadingsInNavBar?{renderer:VR(e.elementId)}:void 0)}\n </div>`)}
|
||
|
|
</div>`:""}
|
||
|
|
`}function YR(){if(!this.focusedElementId||!this.resolvedSpec)return;const e=this.focusedElementId;let t,r=null,n=null,o=0;if(e.startsWith("overview")&&"true"===this.showInfo)t=FR.call(this);else if("auth"===e&&"true"===this.allowAuthentication)t=oR.call(this);else if("servers"===e&&"true"===this.allowServerSelection)t=UR.call(this);else if("operations-top"===e)t=F`
|
||
|
|
<div id="operations-top" class="observe-me">
|
||
|
|
<slot name="operations-top"></slot>
|
||
|
|
</div>`;else if(e.startsWith("cmp--")&&"true"===this.showComponents)t=LR.call(this);else if(e.startsWith("tag--")){const r=e.indexOf("--",4)>0?e.substring(0,e.indexOf("--",5)):e;n=this.resolvedSpec.tags.find((e=>e.elementId===r)),t=n?GR.call(this,JR.call(this,n)):KR.call(this)}else{for(o=0;o<this.resolvedSpec.tags.length&&(n=this.resolvedSpec.tags[o],r=this.resolvedSpec.tags[o].paths.find((t=>`${t.elementId}`===e)),!r);o+=1);if(r){qR(this.shadowRoot.getElementById(`link-${e}`),"expand"),t=GR.call(this,jR.call(this,r,n.name))}else t=KR.call(this)}return t}function ZR(e){if(e.expanded)e.expanded=!1,"true"===this.updateRoute&&window.history.replaceState(null,null,`${window.location.href.split("#")[0]}${"#"===this.routePrefix?"":`${this.routePrefix}`}`);else if(e.expanded=!0,"true"===this.updateRoute){const t=`${this.routePrefix||"#"}${e.elementId}`;window.location.hash!==t&&window.history.replaceState(null,null,`${window.location.href.split("#")[0]}${t}`)}this.requestUpdate()}function QR(e,t="expand-all"){const r=[...e.querySelectorAll(".section-tag")];"expand-all"===t?r.map((e=>{e.classList.replace("collapsed","expanded")})):r.map((e=>{e.classList.replace("expanded","collapsed")}))}function XR(e,t="expand-all"){QR.call(this,e.target.closest(".operations-root"),t)}function eL(e,t=!1){return F`
|
||
|
|
<summary @click="${t=>{ZR.call(this,e,t)}}" class='endpoint-head ${e.method} ${e.deprecated?"deprecated":""} ${t||e.expanded?"expanded":"collapsed"}'>
|
||
|
|
<div class="method ${e.method} ${e.deprecated?"deprecated":""}"> ${e.method} </div>
|
||
|
|
<div class="path ${e.deprecated?"deprecated":""}">
|
||
|
|
${e.path}
|
||
|
|
${e.isWebhook?F`<span style="font-family: var(--font-regular); font-size: var(--); font-size: var(--font-size-small); color:var(--primary-color); margin-left: 16px"> Webhook</span>`:""}
|
||
|
|
</div>
|
||
|
|
${e.deprecated?F`
|
||
|
|
<span style="font-size:var(--font-size-small); text-transform:uppercase; font-weight:bold; color:var(--red); margin:2px 0 0 5px;">
|
||
|
|
deprecated
|
||
|
|
</span>`:""}
|
||
|
|
${this.showSummaryWhenCollapsed?F`
|
||
|
|
<div class="only-large-screen" style="min-width:60px; flex:1"></div>
|
||
|
|
<div class="descr">${e.summary||e.shortSummary} </div>`:""}
|
||
|
|
</summary>
|
||
|
|
`}function tL(e){var t;const r=new Set;for(const t in e.responses)for(const o in null===(n=e.responses[t])||void 0===n?void 0:n.content){var n;r.add(o.trim())}const o=[...r].join(", "),a=this.resolvedSpec.securitySchemes.filter((t=>{var r;return t.finalKeyValue&&(null===(r=e.security)||void 0===r?void 0:r.some((e=>t.securitySchemeId in e)))}))||[],i=this.resolvedSpec.securitySchemes.find((e=>e.securitySchemeId===rt&&"-"!==e.value));i&&a.push(i);const s=e.xCodeSamples?iR(e.xCodeSamples):"";return F`
|
||
|
|
<div class='endpoint-body ${e.method} ${e.deprecated?"deprecated":""}'>
|
||
|
|
<div class="summary">
|
||
|
|
${e.summary?F`<div class="title">${e.summary}<div>`:e.shortSummary!==e.description?F`<div class="title">${e.shortSummary}</div>`:""}
|
||
|
|
${e.xBadges&&(null===(t=e.xBadges)||void 0===t?void 0:t.length)>0?F`
|
||
|
|
<div style="display:flex; flex-wrap:wrap;font-size: var(--font-size-small);">
|
||
|
|
${e.xBadges.map((e=>F`<span style="margin:1px; margin-right:5px; padding:1px 8px; font-weight:bold; border-radius:12px; background-color: var(--light-${e.color}, var(--input-bg)); color:var(--${e.color}); border:1px solid var(--${e.color})">${e.label}</span>`))}
|
||
|
|
</div>
|
||
|
|
`:""}
|
||
|
|
|
||
|
|
${e.description?F`<div class="m-markdown"> ${HP(qe(e.description))}</div>`:""}
|
||
|
|
<slot name="${e.elementId}"></slot>
|
||
|
|
${aR.call(this,e.security)}
|
||
|
|
${s}
|
||
|
|
</div>
|
||
|
|
<div class='req-resp-container'>
|
||
|
|
<div style="display:flex; flex-direction:column" class="view-mode-request ${this.layout}-layout">
|
||
|
|
<api-request
|
||
|
|
class = "${this.renderStyle}-mode ${this.layout}-layout"
|
||
|
|
style = "width:100%;"
|
||
|
|
method = "${e.method}",
|
||
|
|
path = "${e.path}"
|
||
|
|
.security = "${e.security}"
|
||
|
|
.parameters = "${e.parameters}"
|
||
|
|
.request_body = "${e.requestBody}"
|
||
|
|
.api_keys = "${a}"
|
||
|
|
.servers = "${e.servers}"
|
||
|
|
server-url = "${e.servers&&e.servers.length>0?e.servers[0].url:this.selectedServer.computedUrl}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
fill-request-fields-with-example = "${this.fillRequestFieldsWithExample}"
|
||
|
|
allow-try = "${this.allowTry}"
|
||
|
|
accept = "${o}"
|
||
|
|
render-style="${this.renderStyle}"
|
||
|
|
schema-style = "${this.schemaStyle}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
|
||
|
|
schema-hide-read-only = "${this.schemaHideReadOnly}"
|
||
|
|
fetch-credentials = "${this.fetchCredentials}"
|
||
|
|
exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
|
||
|
|
file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param,
|
||
|
|
anchor:anchor, anchor-param-example:anchor-param-example"
|
||
|
|
> </api-request>
|
||
|
|
|
||
|
|
${e.callbacks?sR.call(this,e.callbacks):""}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<api-response
|
||
|
|
class = "${this.renderStyle}-mode"
|
||
|
|
style = "width:100%;"
|
||
|
|
.responses="${e.responses}"
|
||
|
|
active-schema-tab = "${this.defaultSchemaTab}"
|
||
|
|
render-style="${this.renderStyle}"
|
||
|
|
schema-style="${this.schemaStyle}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
selected-status = "${Object.keys(e.responses||{})[0]||""}"
|
||
|
|
exportparts =
|
||
|
|
"btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, anchor:anchor, anchor-param-example:anchor-param-example, btn-clear-resp:btn-clear-resp"
|
||
|
|
> </api-response>
|
||
|
|
</div>
|
||
|
|
</div>`}function rL(e=!0,t=!0,r=!1){return this.resolvedSpec?F`
|
||
|
|
${e?F`
|
||
|
|
<div style="display:flex; justify-content:flex-end;">
|
||
|
|
<span @click="${e=>XR(e,"expand-all")}" style="color:var(--primary-color); cursor:pointer;">
|
||
|
|
Expand all
|
||
|
|
</span>
|
||
|
|
|
|
||
|
|
<span @click="${e=>XR(e,"collapse-all")}" style="color:var(--primary-color); cursor:pointer;" >
|
||
|
|
Collapse all
|
||
|
|
</span>
|
||
|
|
sections
|
||
|
|
</div>`:""}
|
||
|
|
${this.resolvedSpec.tags.map((e=>F`
|
||
|
|
${t?F`
|
||
|
|
<div class='regular-font section-gap section-tag ${e.expanded?"expanded":"collapsed"}'>
|
||
|
|
<div class='section-tag-header' @click="${()=>{e.expanded=!e.expanded,this.requestUpdate()}}">
|
||
|
|
<div id='${e.elementId}' class="sub-title tag" style="color:var(--primary-color)">${e.name}</div>
|
||
|
|
</div>
|
||
|
|
<div class='section-tag-body'>
|
||
|
|
<slot name="${e.elementId}"></slot>
|
||
|
|
<div class="regular-font regular-font-size m-markdown" style="padding-bottom:12px">
|
||
|
|
${HP(qe(e.description||""))}
|
||
|
|
</div>
|
||
|
|
${e.paths.filter((e=>!this.matchPaths||at(this.matchPaths,e,this.matchType))).map((e=>F`
|
||
|
|
<section id='${e.elementId}' class='m-endpoint regular-font ${e.method} ${r||e.expanded?"expanded":"collapsed"}'>
|
||
|
|
${eL.call(this,e,r)}
|
||
|
|
${r||e.expanded?tL.call(this,e):""}
|
||
|
|
</section>`))}
|
||
|
|
</div>
|
||
|
|
</div>`:F`
|
||
|
|
<div class='section-tag-body'>
|
||
|
|
${e.paths.filter((e=>!this.matchPaths||at(this.matchPaths,e,this.matchType))).map((e=>F`
|
||
|
|
<section id='${e.elementId}' class='m-endpoint regular-font ${e.method} ${r||e.expanded?"expanded":"collapsed"}'>
|
||
|
|
${eL.call(this,e,r)}
|
||
|
|
${r||e.expanded?tL.call(this,e):""}
|
||
|
|
</section>`))}
|
||
|
|
</div>
|
||
|
|
`}
|
||
|
|
`))}`:""}function nL(){return F`
|
||
|
|
<header class="row header regular-font" part="section-header" style="padding:8px 4px 8px 4px;min-height:48px;">
|
||
|
|
<div class="only-large-screen-flex" style="align-items: center;">
|
||
|
|
<slot name="logo" class="logo" part="section-logo">
|
||
|
|
${e="height:36px;width:36px;margin-left:5px",F`
|
||
|
|
<div style=${e}>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1 0 511 512">
|
||
|
|
<path d="M351 411a202 202 0 01-350 0 203 203 0 01333-24 203 203 0 0117 24zm0 0" fill="#adc165"/>
|
||
|
|
<path d="M334 387a202 202 0 01-216-69 202 202 0 01216 69zm78 32H85a8 8 0 01-8-8 8 8 0 018-8h327a8 8 0 017 8 8 8 0 01-7 8zm0 0" fill="#99aa52"/>
|
||
|
|
<path d="M374 338l-5 30a202 202 0 01-248-248 203 203 0 01253 218zm0 0" fill="#ffc73b"/>
|
||
|
|
<path d="M374 338a202 202 0 01-100-197 203 203 0 01100 197zm38 81l-6-2-231-231a8 8 0 0111-11l231 230a8 8 0 01-5 14zm0 0" fill="#efb025"/>
|
||
|
|
<path d="M311 175c0 75 40 140 101 175a202 202 0 000-350 202 202 0 00-101 175zm0 0" fill="#ff903e"/>
|
||
|
|
<path d="M412 419a8 8 0 01-8-8V85a8 8 0 0115 0v326a8 8 0 01-7 8zm0 0" fill="#e87425"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
`}
|
||
|
|
<!-- m-logo style="height:36px;width:36px;margin-left:5px"></m-logo -->
|
||
|
|
</slot>
|
||
|
|
<div class="header-title" part="label-header-title">${this.headingText}</div>
|
||
|
|
</div>
|
||
|
|
<div style="margin: 0px 8px;display:flex;flex:1">
|
||
|
|
${"false"===this.allowSpecUrlLoad?"":F`
|
||
|
|
<input id="spec-url"
|
||
|
|
type="text"
|
||
|
|
style="font-size:var(--font-size-small)"
|
||
|
|
class="header-input mono-font"
|
||
|
|
part="textbox textbox-spec-url"
|
||
|
|
placeholder="Spec URL"
|
||
|
|
value="${this.specUrl||""}"
|
||
|
|
@change="${this.onSepcUrlChange}"
|
||
|
|
spellcheck="false"
|
||
|
|
>
|
||
|
|
<div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">↩</div>
|
||
|
|
`}
|
||
|
|
${"false"===this.allowSpecFileLoad?"":F`
|
||
|
|
<input id="spec-file"
|
||
|
|
part = "file-input"
|
||
|
|
type="file"
|
||
|
|
style="display:none"
|
||
|
|
value="${this.specFile||""}"
|
||
|
|
@change="${this.onSepcFileChange}"
|
||
|
|
spellcheck="false"
|
||
|
|
>
|
||
|
|
<button class="m-btn primary only-large-screen" style="margin-left:10px;" part="btn btn-fill" @click="${this.onFileLoadClick}"> LOCAL JSON FILE </button>
|
||
|
|
`}
|
||
|
|
<slot name="header"></slot>
|
||
|
|
${"false"===this.allowSearch||"read focused".includes(this.renderStyle)?"":F`
|
||
|
|
<input id="search" class="header-input" type="text" part="textbox textbox-header-filter" placeholder="Filter" @change="${this.onSearchChange}" style="max-width:130px;margin-left:10px;" spellcheck="false" >
|
||
|
|
<div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">↩</div>
|
||
|
|
`}
|
||
|
|
|
||
|
|
${"false"===this.allowAdvancedSearch||"read focused".includes(this.renderStyle)?"":F`
|
||
|
|
<button class="m-btn primary only-large-screen" part="btn btn-fill btn-search" style="margin-left:10px;" @click="${this.onShowSearchModalClicked}">
|
||
|
|
Search
|
||
|
|
</button>
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
</header>`;var e}customElements.define("api-response",class extends ne{constructor(){super(),this.selectedStatus="",this.headersForEachRespStatus={},this.mimeResponsesForEachStatus={},this.activeSchemaTab="schema"}static get properties(){return{callback:{type:String},responses:{type:Object},parser:{type:Object},schemaStyle:{type:String,attribute:"schema-style"},renderStyle:{type:String,attribute:"render-style"},selectedStatus:{type:String,attribute:"selected-status"},selectedMimeType:{type:String,attribute:"selected-mime-type"},activeSchemaTab:{type:String,attribute:"active-schema-tab"},schemaExpandLevel:{type:Number,attribute:"schema-expand-level"},schemaDescriptionExpanded:{type:String,attribute:"schema-description-expanded"},allowSchemaDescriptionExpandToggle:{type:String,attribute:"allow-schema-description-expand-toggle"},schemaHideWriteOnly:{type:String,attribute:"schema-hide-write-only"}}}static get styles(){return[We,Ge,Ze,Ke,Ve,hR,l`
|
||
|
|
.resp-head{
|
||
|
|
vertical-align: middle;
|
||
|
|
padding:16px 0 8px;
|
||
|
|
}
|
||
|
|
.resp-head.divider{
|
||
|
|
border-top: 1px solid var(--border-color);
|
||
|
|
margin-top:10px;
|
||
|
|
}
|
||
|
|
.resp-status{
|
||
|
|
font-weight:bold;
|
||
|
|
font-size:calc(var(--font-size-small) + 1px);
|
||
|
|
}
|
||
|
|
.resp-descr{
|
||
|
|
font-size:calc(var(--font-size-small) + 1px);
|
||
|
|
color:var(--light-fg);
|
||
|
|
text-align:left;
|
||
|
|
}
|
||
|
|
.top-gap{margin-top:16px;}
|
||
|
|
.example-panel{
|
||
|
|
font-size:var(--font-size-small);
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
.focused-mode,
|
||
|
|
.read-mode {
|
||
|
|
padding-top:24px;
|
||
|
|
margin-top:12px;
|
||
|
|
border-top: 1px dashed var(--border-color);
|
||
|
|
}`,et]}render(){return F`
|
||
|
|
<div class="col regular-font response-panel ${this.renderStyle}-mode">
|
||
|
|
<div class=" ${"true"===this.callback?"tiny-title":"req-res-title"} ">
|
||
|
|
${"true"===this.callback?"CALLBACK RESPONSE":"RESPONSE"}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
${this.responseTemplate()}
|
||
|
|
<div>
|
||
|
|
</div>
|
||
|
|
`}resetSelection(){this.selectedStatus="",this.selectedMimeType=""}responseTemplate(){if(!this.responses)return"";for(const n in this.responses){this.selectedStatus||(this.selectedStatus=n);const o={};for(const r in null===(e=this.responses[n])||void 0===e?void 0:e.content){var e,t;const a=this.responses[n].content[r];this.selectedMimeType||(this.selectedMimeType=r);const i=AR(a.schema,{}),s=ER(a.schema,r,a.examples,a.example,!0,!1,r.includes("json")?"json":"text");o[r]={description:this.responses[n].description,examples:s,selectedExample:(null===(t=s[0])||void 0===t?void 0:t.exampleId)||"",schemaTree:i}}const a=[];for(const e in null===(r=this.responses[n])||void 0===r?void 0:r.headers){var r;a.push({name:e,...this.responses[n].headers[e]})}this.headersForEachRespStatus[n]=a,this.mimeResponsesForEachStatus[n]=o}return F`
|
||
|
|
${Object.keys(this.responses).length>1?F`<div class='row' style='flex-wrap:wrap'>
|
||
|
|
${Object.keys(this.responses).map((e=>F`
|
||
|
|
${"$$ref"===e?"":F`
|
||
|
|
<button
|
||
|
|
@click="${()=>{this.selectedStatus=e,this.responses[e].content&&Object.keys(this.responses[e].content)[0]?this.selectedMimeType=Object.keys(this.responses[e].content)[0]:this.selectedMimeType=void 0}}"
|
||
|
|
class='m-btn small ${this.selectedStatus===e?"primary":""}'
|
||
|
|
part="btn ${this.selectedStatus===e?"btn-response-status btn-selected-response-status":" btn-response-status"}"
|
||
|
|
style='margin: 8px 4px 0 0'
|
||
|
|
>
|
||
|
|
${e}
|
||
|
|
</button>`}`))}`:F`<span>${Object.keys(this.responses)[0]}</span>`}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
${Object.keys(this.responses).map((e=>{var t,r;return F`
|
||
|
|
<div style = 'display: ${e===this.selectedStatus?"block":"none"}' >
|
||
|
|
<div class="top-gap">
|
||
|
|
<span class="resp-descr m-markdown ">${HP(qe((null===(t=this.responses[e])||void 0===t?void 0:t.description)||""))}</span>
|
||
|
|
${this.headersForEachRespStatus[e]&&(null===(r=this.headersForEachRespStatus[e])||void 0===r?void 0:r.length)>0?F`${this.responseHeaderListTemplate(this.headersForEachRespStatus[e])}`:""}
|
||
|
|
</div>
|
||
|
|
${0===Object.keys(this.mimeResponsesForEachStatus[e]).length?"":F`
|
||
|
|
<div class="tab-panel col">
|
||
|
|
<div class="tab-buttons row" @click="${e=>{"button"===e.target.tagName.toLowerCase()&&(this.activeSchemaTab=e.target.dataset.tab)}}" >
|
||
|
|
<button class="tab-btn ${"example"===this.activeSchemaTab?"active":""}" data-tab = 'example'>EXAMPLE </button>
|
||
|
|
<button class="tab-btn ${"example"!==this.activeSchemaTab?"active":""}" data-tab = 'schema' >SCHEMA</button>
|
||
|
|
<div style="flex:1"></div>
|
||
|
|
${1===Object.keys(this.mimeResponsesForEachStatus[e]).length?F`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[e])[0]} </span>`:F`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[e]))}`}
|
||
|
|
</div>
|
||
|
|
${"example"===this.activeSchemaTab?F`<div class ='tab-content col' style = 'flex:1;'>
|
||
|
|
${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[e][this.selectedMimeType])}
|
||
|
|
</div>`:F`<div class ='tab-content col' style = 'flex:1;'>
|
||
|
|
${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[e][this.selectedMimeType])}
|
||
|
|
</div>`}
|
||
|
|
</div>
|
||
|
|
`}`}))}
|
||
|
|
`}responseHeaderListTemplate(e){return F`
|
||
|
|
<div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">RESPONSE HEADERS</div>
|
||
|
|
<table style="border-collapse: collapse; margin-bottom:16px; border:1px solid var(--border-color); border-radius: var(--border-radius)" class="small-font-size mono-font">
|
||
|
|
${e.map((e=>F`
|
||
|
|
<tr>
|
||
|
|
<td style="padding:8px; vertical-align: baseline; min-width:120px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
|
||
|
|
${e.name||""}
|
||
|
|
</td>
|
||
|
|
<td style="padding:4px; vertical-align: baseline; padding:0 5px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
|
||
|
|
${e.schema.type||""}
|
||
|
|
</td>
|
||
|
|
<td style="padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color);text-overflow: ellipsis;">
|
||
|
|
<div class="m-markdown-small regular-font" >${HP(qe(e.description||""))}</div>
|
||
|
|
</td>
|
||
|
|
<td style="padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;">
|
||
|
|
${e.schema.example||""}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`))}
|
||
|
|
</table>`}mimeTypeDropdownTemplate(e){return F`
|
||
|
|
<select @change="${e=>{this.selectedMimeType=e.target.value}}" style='margin-bottom: -1px; z-index:1'>
|
||
|
|
${e.map((e=>F`<option value='${e}' ?selected = '${e===this.selectedMimeType}'> ${e} </option>`))}
|
||
|
|
</select>`}onSelectExample(e){[...e.target.closest(".example-panel").querySelectorAll(".example")].forEach((t=>{t.style.display=t.dataset.example===e.target.value?"block":"none"}))}mimeExampleTemplate(e){return e?F`
|
||
|
|
${1===e.examples.length?F`
|
||
|
|
${"json"===e.examples[0].exampleFormat?F`
|
||
|
|
${e.examples[0].exampleSummary&&e.examples[0].exampleSummary.length>80?F`<div style="padding: 4px 0"> ${e.examples[0].exampleSummary} </div>`:""}
|
||
|
|
${e.examples[0].exampleDescription?F`<div class="m-markdown-small" style="padding: 4px 0"> ${HP(qe(e.examples[0].exampleDescription||""))} </div>`:""}
|
||
|
|
<json-tree
|
||
|
|
render-style = '${this.renderStyle}'
|
||
|
|
.data="${e.examples[0].exampleValue}"
|
||
|
|
class = 'example-panel ${"read"===this.renderStyle?"border pad-8-16":"border-top pad-top-8"}'
|
||
|
|
exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy"
|
||
|
|
></json-tree>`:F`
|
||
|
|
${e.examples[0].exampleSummary&&e.examples[0].exampleSummary.length>80?F`<div style="padding: 4px 0"> ${e.examples[0].exampleSummary} </div>`:""}
|
||
|
|
${e.examples[0].exampleDescription?F`<div class="m-markdown-small" style="padding: 4px 0"> ${HP(qe(e.examples[0].exampleDescription||""))} </div>`:""}
|
||
|
|
<pre class = 'example-panel ${"read"===this.renderStyle?"border pad-8-16":"border-top pad-top-8"}'>${e.examples[0].exampleValue}</pre>
|
||
|
|
`}`:F`
|
||
|
|
<span class = 'example-panel ${"read"===this.renderStyle?"border pad-8-16":"border-top pad-top-8"}'>
|
||
|
|
<select style="min-width:100px; max-width:100%" @change='${e=>this.onSelectExample(e)}'>
|
||
|
|
${e.examples.map((t=>F`<option value="${t.exampleId}" ?selected=${t.exampleId===e.selectedExample} >
|
||
|
|
${t.exampleSummary.length>80?t.exampleId:t.exampleSummary}
|
||
|
|
</option>`))}
|
||
|
|
</select>
|
||
|
|
${e.examples.map((t=>F`
|
||
|
|
<div class="example" data-example = '${t.exampleId}' style = "display: ${t.exampleId===e.selectedExample?"block":"none"}">
|
||
|
|
${t.exampleSummary&&t.exampleSummary.length>80?F`<div style="padding: 4px 0"> ${t.exampleSummary} </div>`:""}
|
||
|
|
${t.exampleDescription?F`<div class="m-markdown-small" style="padding: 4px 0"> ${HP(qe(t.exampleDescription||""))} </div>`:""}
|
||
|
|
${"json"===t.exampleFormat?F`
|
||
|
|
<json-tree
|
||
|
|
render-style = '${this.renderStyle}'
|
||
|
|
.data = '${t.exampleValue}'
|
||
|
|
exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy"
|
||
|
|
></json-tree>`:F`<pre>${t.exampleValue}</pre>`}
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
</span>
|
||
|
|
`}
|
||
|
|
`:F`
|
||
|
|
<pre style='color:var(--red)' class = '${"read"===this.renderStyle?"read example-panel border pad-8-16":"example-panel border-top"}'> No example provided </pre>
|
||
|
|
`}mimeSchemaTemplate(e){return e?F`
|
||
|
|
${"table"===this.schemaStyle?F`
|
||
|
|
<schema-table
|
||
|
|
render-style = "${this.renderStyle}"
|
||
|
|
.data = "${e.schemaTree}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "false"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
> </schema-tree> `:F`
|
||
|
|
<schema-tree
|
||
|
|
render-style = "${this.renderStyle}"
|
||
|
|
.data = '${e.schemaTree}'
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "false"
|
||
|
|
schema-hide-write-only = "${this.schemaHideWriteOnly}"
|
||
|
|
> </schema-tree>`}`:F`
|
||
|
|
<pre style='color:var(--red)' class = '${"read"===this.renderStyle?"border pad-8-16":"border-top"}'> Schema not found</pre>
|
||
|
|
`}});const oL=l`
|
||
|
|
*, *:before, *:after { box-sizing: border-box; }
|
||
|
|
|
||
|
|
.dialog-box-overlay {
|
||
|
|
background-color: var(--overlay-bg);
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: var(--dialog-z-index);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-box {
|
||
|
|
position: fixed;
|
||
|
|
top: 100px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, 0%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: 70vw;
|
||
|
|
background-color: var(--bg2);
|
||
|
|
color: var(--fg2);
|
||
|
|
border-radius: 4px;
|
||
|
|
max-height: 500px;
|
||
|
|
overflow: hidden;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-box-header {
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
align-self: stretch;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0px 16px;
|
||
|
|
min-height: 60px;
|
||
|
|
max-height: 60px;
|
||
|
|
border-bottom: 1px solid var(--light-border-color);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-box-header button {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1;
|
||
|
|
color: var(--fg);
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
background-color: transparent;
|
||
|
|
cursor:pointer;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: -8px;
|
||
|
|
}
|
||
|
|
.dialog-box-header button:hover {
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-box-content {
|
||
|
|
padding: 16px;
|
||
|
|
display:block;
|
||
|
|
overflow: auto;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog-box-title {
|
||
|
|
flex-grow: 1;
|
||
|
|
font-size:24px;
|
||
|
|
}
|
||
|
|
`;function aL(){var e;return document.addEventListener("close",(()=>{this.showAdvancedSearchDialog=!1})),document.addEventListener("open",this.onOpenSearchDialog),F`
|
||
|
|
<dialog-box
|
||
|
|
heading="Search"
|
||
|
|
show="${!!this.showAdvancedSearchDialog}"
|
||
|
|
>
|
||
|
|
<span class="advanced-search-options">
|
||
|
|
<input
|
||
|
|
style="width:100%; padding-right:20px;"
|
||
|
|
type="text"
|
||
|
|
part="textbox textbox-search-dialog"
|
||
|
|
placeholder="search text..."
|
||
|
|
spellcheck="false"
|
||
|
|
@keyup = "${e=>this.onAdvancedSearch(e,400)}"
|
||
|
|
>
|
||
|
|
<div style="display:flex; margin:8px 0 24px;">
|
||
|
|
<div>
|
||
|
|
<input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-path" checked @change = "${e=>this.onAdvancedSearch(e,0)}">
|
||
|
|
<label for="search-api-path" style="cursor:pointer;"> API Path </label>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 16px;">
|
||
|
|
<input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-descr" checked @change = "${e=>this.onAdvancedSearch(e,0)}">
|
||
|
|
<label style="cursor:pointer;" for="search-api-descr"> API Description </label>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 16px;">
|
||
|
|
<input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-params" @change = "${e=>this.onAdvancedSearch(e,0)}">
|
||
|
|
<label style="cursor:pointer;" for="search-api-params"> API Parameters </label>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 16px;">
|
||
|
|
<input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-request-body" @change = "${e=>this.onAdvancedSearch(e,0)}">
|
||
|
|
<label style="cursor:pointer;" for="search-api-request-body"> Request Body Parameters </label>
|
||
|
|
</div>
|
||
|
|
<div style="margin-left: 16px;">
|
||
|
|
<input style="cursor:pointer;" type="checkbox" part="checkbox checkbox-search-dialog" id="search-api-resp-descr" @change = "${e=>this.onAdvancedSearch(e,0)}">
|
||
|
|
<label style="cursor:pointer;" for="search-api-resp-descr"> Response Description </label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
${null===(e=this.advancedSearchMatches)||void 0===e?void 0:e.map((e=>F`
|
||
|
|
<div
|
||
|
|
class="mono-font small-font-size hover-bg"
|
||
|
|
style='padding: 5px; cursor: pointer; border-bottom: 1px solid var(--light-border-color); ${e.deprecated?"filter:opacity(0.5);":""}'
|
||
|
|
data-content-id='${e.elementId}'
|
||
|
|
tabindex = '0'
|
||
|
|
@click="${e=>{this.matchPaths="",this.showAdvancedSearchDialog=!1,this.requestUpdate(),this.scrollToEventTarget(e,!0)}}"
|
||
|
|
>
|
||
|
|
<span class="upper bold-text method-fg ${e.method}">${e.method}</span>
|
||
|
|
<span>${e.path}</span>
|
||
|
|
<span class="regular-font gray-text">${e.summary}</span>
|
||
|
|
</div>
|
||
|
|
`))}
|
||
|
|
</dialog-box>
|
||
|
|
`}customElements.define("dialog-box",class extends ne{static get properties(){return{heading:{type:String,attribute:"heading"},show:{type:String,attribute:"show"}}}static get styles(){return[oL]}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",(e=>{"Escape"===e.code&&this.onClose()}))}attributeChangedCallback(e,t,r){t!==r&&("heading"===e&&(this.heading=r),"show"===e&&(this.show=r,"true"===r&&document.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0,detail:this})))),super.attributeChangedCallback(e,t,r)}render(){return F`
|
||
|
|
${"true"===this.show?F`
|
||
|
|
<div class="dialog-box-overlay">
|
||
|
|
<div class="dialog-box">
|
||
|
|
<header class="dialog-box-header">
|
||
|
|
<span class="dialog-box-title">${this.heading}</span>
|
||
|
|
<button type="button" @click="${this.onClose}">×</button>
|
||
|
|
</header>
|
||
|
|
<div class="dialog-box-content">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>`:""}`}onClose(){document.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}});const iL={color:{inputReverseFg:"#fff",inputReverseBg:"#333",headerBg:"#444",getRgb(e){if(0===e.indexOf("#")&&(e=e.slice(1,7)),3!==e.length&&4!==e.length||(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),6!==e.length)throw new Error("Invalid HEX color.");return{r:parseInt(e.slice(0,2),16),g:parseInt(e.slice(2,4),16),b:parseInt(e.slice(4,6),16)}},luminanace(e){const t=this.getRgb(e);return.299*t.r+.587*t.g+.114*t.b},invert(e){return this.luminanace(e)>135?"#000":"#fff"},opacity(e,t){const r=this.getRgb(e);return`rgba(${r.r}, ${r.g}, ${r.b}, ${t})`},brightness(e,t){const r=this.getRgb(e);return r.r+=t,r.g+=t,r.b+=t,r.r>255?r.r=255:r.r<0&&(r.r=0),r.g>255?r.g=255:r.g<0&&(r.g=0),r.b>255?r.b=255:r.b<0&&(r.b=0),`#${r.r.toString(16).padStart(2,"0")}${r.g.toString(16).padStart(2,"0")}${r.b.toString(16).padStart(2,"0")}`},hasGoodContrast(e,t){return this.luminanace(e)-this.luminanace(t)}}};function sL(e){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/i.test(e)}function lL(e,t={}){let r={};const n=t.primaryColor?t.primaryColor:"dark"===e?"#f76b39":"#ff591e",o=iL.color.invert(n),a=iL.color.opacity(n,"0.8");if("dark"===e){const e=t.bg1?t.bg1:"#333",i=t.fg1?t.fg1:"#bbb",s=t.bg2?t.bg2:iL.color.brightness(e,5),l=t.bg3?t.bg3:iL.color.brightness(e,17),c=t.bg3?t.bg3:iL.color.brightness(e,35),p=t.fg2?t.fg2:iL.color.brightness(i,-15),u=t.fg3?t.fg3:iL.color.brightness(i,-20),d=t.fg3?t.fg3:iL.color.brightness(i,-65),h=t.inlineCodeFg?t.inlineCodeFg:"#aaa",f="#bbb",m="#eee",y=t.headerColor?t.headerColor:iL.color.brightness(e,10),g=t.navBgColor?t.navBgColor:iL.color.brightness(e,10);r={bg1:e,bg2:s,bg3:l,lightBg:c,fg1:i,fg2:p,fg3:u,lightFg:d,inlineCodeFg:h,primaryColor:n,primaryColorTrans:a,primaryColorInvert:o,selectionBg:f,selectionFg:m,overlayBg:"rgba(80, 80, 80, 0.4)",navBgColor:g,navTextColor:t.navTextColor?t.navTextColor:iL.color.opacity(iL.color.invert(g),"0.65"),navHoverBgColor:t.navHoverBgColor?t.navHoverBgColor:iL.color.brightness(g,-15),navHoverTextColor:t.navHoverTextColor?t.navHoverTextColor:iL.color.invert(g),navAccentColor:t.navAccentColor?t.navAccentColor:iL.color.brightness(n,25),headerColor:y,headerColorInvert:iL.color.invert(y),headerColorDarker:iL.color.brightness(y,-20),headerColorBorder:iL.color.brightness(y,10),borderColor:t.borderColor||iL.color.brightness(e,20),lightBorderColor:t.lightBorderColor||iL.color.brightness(e,15),codeBorderColor:t.codeBorderColor||iL.color.brightness(e,30),inputBg:t.inputBg||iL.color.brightness(e,-5),placeHolder:t.placeHolder||iL.color.opacity(i,"0.3"),hoverColor:t.hoverColor||iL.color.brightness(e,-10),red:t.red?t.red:"#F06560",lightRed:t.lightRed?t.lightRed:iL.color.brightness(e,-10),pink:t.pink?t.pink:"#ffb2b2",lightPink:t.lightPink||iL.color.brightness(e,-10),green:t.green||"#7ec699",lightGreen:t.lightGreen||iL.color.brightness(e,-10),blue:t.blue||"#71b7ff",lightBlue:t.lightBlue||iL.color.brightness(e,-10),orange:t.orange?t.orange:"#f08d49",lightOrange:t.lightOrange||iL.color.brightness(e,-10),yellow:t.yellow||"#827717",lightYellow:t.lightYellow||iL.color.brightness(e,-10),purple:t.purple||"#786FF1",brown:t.brown||"#D4AC0D",codeBg:t.codeBg||iL.color.opacity(iL.color.brightness(e,-15),.7),codeFg:t.codeFg||"#aaa",codePropertyColor:t.codePropertyColor||"#f8c555",codeKeywordColor:t.codeKeywordColor||"#cc99cd",codeOperatorColor:t.codeOperatorColor||"#67cdcc"}}else{const e=t.bg1?t.bg1:"#ffffff",i=t.fg1?t.fg1:"#444444",s=t.bg2?t.bg2:iL.color.brightness(e,-5),l=t.bg3?t.bg3:iL.color.brightness(e,-15),c=t.bg3?t.bg3:iL.color.brightness(e,-45),p=t.fg2?t.fg2:iL.color.brightness(i,17),u=t.fg3?t.fg3:iL.color.brightness(i,30),d=t.fg3?t.fg3:iL.color.brightness(i,70),h=t.inlineCodeFg?t.inlineCodeFg:"brown",f="#444",m="#eee",y=t.headerColor?t.headerColor:iL.color.brightness(e,-180),g=t.navBgColor?t.navBgColor:iL.color.brightness(e,-180);r={bg1:e,bg2:s,bg3:l,lightBg:c,fg1:i,fg2:p,fg3:u,lightFg:d,inlineCodeFg:h,primaryColor:n,primaryColorTrans:a,primaryColorInvert:o,selectionBg:f,selectionFg:m,ov
|
||
|
|
<style>
|
||
|
|
*, *:before, *:after { box-sizing: border-box; }
|
||
|
|
|
||
|
|
:host {
|
||
|
|
/* Common Styles - irrespective of themes */
|
||
|
|
--border-radius: 2px;
|
||
|
|
--layout: ${this.layout||"row"};
|
||
|
|
--font-mono: ${this.monoFont||'Monaco, "Andale Mono", "Roboto Mono", Consolas, monospace'};
|
||
|
|
--font-regular: ${this.regularFont||'"Open Sans", Avenir, "Segoe UI", Arial, sans-serif'};
|
||
|
|
--scroll-bar-width: 8px;
|
||
|
|
--nav-item-padding: ${"relaxed"===this.navItemSpacing?"10px 16px 10px 10px":"compact"===this.navItemSpacing?"5px 16px 5px 10px":"7px 16px 7px 10px"};
|
||
|
|
|
||
|
|
--resp-area-height: ${this.responseAreaHeight};
|
||
|
|
--font-size-small: ${"default"===this.fontSize?"12px":"large"===this.fontSize?"13px":"14px"};
|
||
|
|
--font-size-mono: ${"default"===this.fontSize?"13px":"large"===this.fontSize?"14px":"15px"};
|
||
|
|
--font-size-regular: ${"default"===this.fontSize?"14px":"large"===this.fontSize?"15px":"16px"};
|
||
|
|
--dialog-z-index: 1000;
|
||
|
|
|
||
|
|
/* Theme specific styles */
|
||
|
|
--bg:${r.bg1};
|
||
|
|
--bg2:${r.bg2};
|
||
|
|
--bg3:${r.bg3};
|
||
|
|
--light-bg:${r.lightBg};
|
||
|
|
--fg:${r.fg1};
|
||
|
|
--fg2:${r.fg2};
|
||
|
|
--fg3:${r.fg3};
|
||
|
|
--light-fg:${r.lightFg};
|
||
|
|
--selection-bg:${r.selectionBg};
|
||
|
|
--selection-fg:${r.selectionFg};
|
||
|
|
--overlay-bg:${r.overlayBg};
|
||
|
|
|
||
|
|
/* Border Colors */
|
||
|
|
--border-color:${r.borderColor};
|
||
|
|
--light-border-color:${r.lightBorderColor};
|
||
|
|
--code-border-color:${r.codeBorderColor};
|
||
|
|
|
||
|
|
--input-bg:${r.inputBg};
|
||
|
|
--placeholder-color:${r.placeHolder};
|
||
|
|
--hover-color:${r.hoverColor};
|
||
|
|
--red:${r.red};
|
||
|
|
--light-red:${r.lightRed};
|
||
|
|
--pink:${r.pink};
|
||
|
|
--light-pink:${r.lightPink};
|
||
|
|
--green:${r.green};
|
||
|
|
--light-green:${r.lightGreen};
|
||
|
|
--blue:${r.blue};
|
||
|
|
--light-blue:${r.lightBlue};
|
||
|
|
--orange:${r.orange};
|
||
|
|
--light-orange:${r.lightOrange};
|
||
|
|
--yellow:${r.yellow};
|
||
|
|
--light-yellow:${r.lightYellow};
|
||
|
|
--purple:${r.purple};
|
||
|
|
--brown:${r.brown};
|
||
|
|
|
||
|
|
/* Header Color */
|
||
|
|
--header-bg:${r.headerColor};
|
||
|
|
--header-fg:${r.headerColorInvert};
|
||
|
|
--header-color-darker:${r.headerColorDarker};
|
||
|
|
--header-color-border:${r.headerColorBorder};
|
||
|
|
|
||
|
|
/* Nav Colors */
|
||
|
|
--nav-bg-color:${r.navBgColor};
|
||
|
|
--nav-text-color:${r.navTextColor};
|
||
|
|
--nav-hover-bg-color:${r.navHoverBgColor};
|
||
|
|
--nav-hover-text-color:${r.navHoverTextColor};
|
||
|
|
--nav-accent-color:${r.navAccentColor};
|
||
|
|
|
||
|
|
/* Primary Colors */
|
||
|
|
--primary-color:${r.primaryColor};
|
||
|
|
--primary-color-invert:${r.primaryColorInvert};
|
||
|
|
--primary-color-trans:${r.primaryColorTrans};
|
||
|
|
|
||
|
|
/*Code Syntax Color*/
|
||
|
|
--code-bg:${r.codeBg};
|
||
|
|
--code-fg:${r.codeFg};
|
||
|
|
--inline-code-fg:${r.inlineCodeFg};
|
||
|
|
--code-property-color:${r.codePropertyColor};
|
||
|
|
--code-keyword-color:${r.codeKeywordColor};
|
||
|
|
--code-operator-color:${r.codeOperatorColor};
|
||
|
|
}
|
||
|
|
</style>`}function cL(e=!1,t=!0,r=!0,n=!1){if(!this.resolvedSpec)return"";"true"===this.persistAuth&&YP.call(this);const o={bg1:sL(this.bgColor)?this.bgColor:"",fg1:sL(this.textColor)?this.textColor:"",headerColor:sL(this.headerColor)?this.headerColor:"",primaryColor:sL(this.primaryColor)?this.primaryColor:"",navBgColor:sL(this.navBgColor)?this.navBgColor:"",navTextColor:sL(this.navTextColor)?this.navTextColor:"",navHoverBgColor:sL(this.navHoverBgColor)?this.navHoverBgColor:"",navHoverTextColor:sL(this.navHoverTextColor)?this.navHoverTextColor:"",navAccentColor:sL(this.navAccentColor)?this.navAccentColor:""};return this.resolvedSpec.specLoadError?e?F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",o):lL.call(this,"light",o)}
|
||
|
|
<div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
|
||
|
|
`:F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",o):lL.call(this,"light",o)}
|
||
|
|
<!-- Header -->
|
||
|
|
${nL.call(this)}
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div style="margin:24px; text-align: center;">
|
||
|
|
<h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
|
||
|
|
<div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
`:this.resolvedSpec.isSpecLoading?F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",o):lL.call(this,"light",o)}
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div class="main-content-inner--${this.renderStyle}-mode">
|
||
|
|
<div class="loader"></div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
`:F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",o):lL.call(this,"light",o)}
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
${"false"===this.showHeader?"":nL.call(this)}
|
||
|
|
|
||
|
|
<!-- Advanced Search -->
|
||
|
|
${"false"===this.allowAdvancedSearch?"":aL.call(this)}
|
||
|
|
|
||
|
|
<div id='the-main-body' class="body" dir= ${this.pageDirection}>
|
||
|
|
<!-- Side Nav -->
|
||
|
|
${"read"!==this.renderStyle&&"focused"!==this.renderStyle||"true"!==this.showSideNav||!this.resolvedSpec?"":WR.call(this)}
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div class="main-content-inner--${this.renderStyle}-mode">
|
||
|
|
${!0===this.loading?F`<div class="loader"></div>`:F`
|
||
|
|
${!0===this.loadFailed?F`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`:F`
|
||
|
|
<div class="operations-root" @click="${e=>{this.handleHref(e)}}">
|
||
|
|
${"focused"===this.renderStyle?F`${YR.call(this)}`:F`
|
||
|
|
${"true"===this.showInfo?FR.call(this):""}
|
||
|
|
${"true"===this.allowServerSelection?UR.call(this):""}
|
||
|
|
${"true"===this.allowAuthentication?oR.call(this):""}
|
||
|
|
<div id="operations-top" class="observe-me">
|
||
|
|
<slot name="operations-top"></slot>
|
||
|
|
</div>
|
||
|
|
${"read"===this.renderStyle?IR.call(this):rL.call(this,t,r,n)}
|
||
|
|
`}
|
||
|
|
</div>
|
||
|
|
`}`}
|
||
|
|
</div>
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
`}class pL extends ne{constructor(){super();const e={root:this.getRootNode().host,rootMargin:"-50px 0px -50px 0px",threshold:0};this.showSummaryWhenCollapsed=!0,this.isIntersectionObserverActive=!0,this.intersectionObserver=new IntersectionObserver((e=>{this.onIntersect(e)}),e)}static get properties(){return{headingText:{type:String,attribute:"heading-text"},gotoPath:{type:String,attribute:"goto-path"},updateRoute:{type:String,attribute:"update-route"},routePrefix:{type:String,attribute:"route-prefix"},specUrl:{type:String,attribute:"spec-url"},sortTags:{type:String,attribute:"sort-tags"},generateMissingTags:{type:String,attribute:"generate-missing-tags"},sortEndpointsBy:{type:String,attribute:"sort-endpoints-by"},specFile:{type:String,attribute:!1},layout:{type:String},renderStyle:{type:String,attribute:"render-style"},defaultSchemaTab:{type:String,attribute:"default-schema-tab"},responseAreaHeight:{type:String,attribute:"response-area-height"},fillRequestFieldsWithExample:{type:String,attribute:"fill-request-fields-with-example"},persistAuth:{type:String,attribute:"persist-auth"},onNavTagClick:{type:String,attribute:"on-nav-tag-click"},schemaStyle:{type:String,attribute:"schema-style"},schemaExpandLevel:{type:Number,attribute:"schema-expand-level"},schemaDescriptionExpanded:{type:String,attribute:"schema-description-expanded"},schemaHideReadOnly:{type:String,attribute:"schema-hide-read-only"},schemaHideWriteOnly:{type:String,attribute:"schema-hide-write-only"},apiKeyName:{type:String,attribute:"api-key-name"},apiKeyLocation:{type:String,attribute:"api-key-location"},apiKeyValue:{type:String,attribute:"api-key-value"},defaultApiServerUrl:{type:String,attribute:"default-api-server"},serverUrl:{type:String,attribute:"server-url"},oauthReceiver:{type:String,attribute:"oauth-receiver"},showHeader:{type:String,attribute:"show-header"},showSideNav:{type:String,attribute:"show-side-nav"},showInfo:{type:String,attribute:"show-info"},allowAuthentication:{type:String,attribute:"allow-authentication"},allowTry:{type:String,attribute:"allow-try"},allowSpecUrlLoad:{type:String,attribute:"allow-spec-url-load"},allowSpecFileLoad:{type:String,attribute:"allow-spec-file-load"},allowSpecFileDownload:{type:String,attribute:"allow-spec-file-download"},allowSearch:{type:String,attribute:"allow-search"},allowAdvancedSearch:{type:String,attribute:"allow-advanced-search"},allowServerSelection:{type:String,attribute:"allow-server-selection"},allowSchemaDescriptionExpandToggle:{type:String,attribute:"allow-schema-description-expand-toggle"},showComponents:{type:String,attribute:"show-components"},pageDirection:{type:String,attribute:"page-direction"},theme:{type:String},bgColor:{type:String,attribute:"bg-color"},textColor:{type:String,attribute:"text-color"},headerColor:{type:String,attribute:"header-color"},primaryColor:{type:String,attribute:"primary-color"},fontSize:{type:String,attribute:"font-size"},regularFont:{type:String,attribute:"regular-font"},monoFont:{type:String,attribute:"mono-font"},loadFonts:{type:String,attribute:"load-fonts"},navBgColor:{type:String,attribute:"nav-bg-color"},navTextColor:{type:String,attribute:"nav-text-color"},navHoverBgColor:{type:String,attribute:"nav-hover-bg-color"},navHoverTextColor:{type:String,attribute:"nav-hover-text-color"},navAccentColor:{type:String,attribute:"nav-accent-color"},navItemSpacing:{type:String,attribute:"nav-item-spacing"},usePathInNavBar:{type:String,attribute:"use-path-in-nav-bar"},infoDescriptionHeadingsInNavBar:{type:String,attribute:"info-description-headings-in-navbar"},fetchCredentials:{type:String,attribute:"fetch-credentials"},matchPaths:{type:String,attribute:"match-paths"},matchType:{type:String,attribute:"match-type"},loading:{type:Boolean},focusedElementId:{type:String},showAdvancedSearchDialog:{type:Boolean},advancedSearchMatches:{type:Object}}}static get styles(){return[We,Ve,Ge,Ke,Je,Ye,Ze,Qe,Xe,l`
|
||
|
|
:host {
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width:360px;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
overflow: hidden;
|
||
|
|
letter-spacing:normal;
|
||
|
|
color:var(--fg);
|
||
|
|
background-color:var(--bg);
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
}
|
||
|
|
.body {
|
||
|
|
display:flex;
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
margin:0;
|
||
|
|
padding: 0;
|
||
|
|
display:block;
|
||
|
|
flex:1;
|
||
|
|
height:100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: var(--border-color) transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content-inner--view-mode {
|
||
|
|
padding: 0 8px;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar-track {
|
||
|
|
background:transparent;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--border-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-gap.section-tag {
|
||
|
|
border-bottom:1px solid var(--border-color);
|
||
|
|
}
|
||
|
|
.section-gap,
|
||
|
|
.section-gap--focused-mode,
|
||
|
|
.section-gap--read-mode {
|
||
|
|
padding: 0px 4px;
|
||
|
|
}
|
||
|
|
.section-tag-header {
|
||
|
|
position:relative;
|
||
|
|
cursor: n-resize;
|
||
|
|
padding: 12px 0;
|
||
|
|
}
|
||
|
|
.collapsed .section-tag-header:hover{
|
||
|
|
cursor: s-resize;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-tag-header:hover{
|
||
|
|
background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-tag-header:hover::after {
|
||
|
|
position:absolute;
|
||
|
|
margin-left:-24px;
|
||
|
|
font-size:20px;
|
||
|
|
top: calc(50% - 14px);
|
||
|
|
color:var(--primary-color);
|
||
|
|
content: '⬆';
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsed .section-tag-header::after {
|
||
|
|
position:absolute;
|
||
|
|
margin-left:-24px;
|
||
|
|
font-size:20px;
|
||
|
|
top: calc(50% - 14px);
|
||
|
|
color: var(--border-color);
|
||
|
|
content: '⬇';
|
||
|
|
}
|
||
|
|
.collapsed .section-tag-header:hover::after {
|
||
|
|
color:var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.collapsed .section-tag-body {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
height:36px;
|
||
|
|
width:36px;
|
||
|
|
margin-left:5px;
|
||
|
|
}
|
||
|
|
.only-large-screen-flex,
|
||
|
|
.only-large-screen{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.tag.title {
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
background-color:var(--header-bg);
|
||
|
|
color:var(--header-fg);
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.header-title {
|
||
|
|
font-size:calc(var(--font-size-regular) + 8px);
|
||
|
|
padding:0 8px;
|
||
|
|
}
|
||
|
|
input.header-input{
|
||
|
|
background:var(--header-color-darker);
|
||
|
|
color:var(--header-fg);
|
||
|
|
border:1px solid var(--header-color-border);
|
||
|
|
flex:1;
|
||
|
|
padding-right:24px;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
input.header-input::placeholder {
|
||
|
|
opacity:0.4;
|
||
|
|
}
|
||
|
|
.loader {
|
||
|
|
margin: 16px auto 16px auto;
|
||
|
|
border: 4px solid var(--bg3);
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top: 4px solid var(--primary-color);
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
animation: spin 2s linear infinite;
|
||
|
|
}
|
||
|
|
.expanded-endpoint-body{
|
||
|
|
position: relative;
|
||
|
|
padding: 6px 0px;
|
||
|
|
}
|
||
|
|
.expanded-endpoint-body.deprecated{ filter:opacity(0.6); }
|
||
|
|
.divider {
|
||
|
|
border-top: 2px solid var(--border-color);
|
||
|
|
margin: 24px 0;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip {
|
||
|
|
cursor:pointer;
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-left-width: 4px;
|
||
|
|
margin-left:2px;
|
||
|
|
}
|
||
|
|
.tooltip a {
|
||
|
|
color: var(--fg2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.tooltip-text {
|
||
|
|
color: var(--fg2);
|
||
|
|
max-width: 400px;
|
||
|
|
position: absolute;
|
||
|
|
z-index:1;
|
||
|
|
background-color: var(--bg2);
|
||
|
|
visibility: hidden;
|
||
|
|
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
}
|
||
|
|
.tooltip:hover {
|
||
|
|
color: var(--primary-color);
|
||
|
|
border-color: var(--primary-color);
|
||
|
|
}
|
||
|
|
.tooltip:hover a:hover {
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip:hover .tooltip-text {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.nav-bar {
|
||
|
|
width: 260px;
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
.only-large-screen{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.only-large-screen-flex{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
.section-gap {
|
||
|
|
padding: 0 0 0 24px;
|
||
|
|
}
|
||
|
|
.section-gap--focused-mode {
|
||
|
|
padding: 24px 8px;
|
||
|
|
}
|
||
|
|
.section-gap--read-mode {
|
||
|
|
padding: 24px 8px;
|
||
|
|
}
|
||
|
|
.endpoint-body {
|
||
|
|
position: relative;
|
||
|
|
padding:36px 0 48px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 1024px) {
|
||
|
|
.nav-bar {
|
||
|
|
width: ${s("default"===this.fontSize?"300px":"large"===this.fontSize?"315px":"330px")};
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
.section-gap--focused-mode {
|
||
|
|
padding: 12px 80px 12px 80px;
|
||
|
|
}
|
||
|
|
.section-gap--read-mode {
|
||
|
|
padding: 24px 80px 12px 80px;
|
||
|
|
}
|
||
|
|
}`,et]}connectedCallback(){super.connectedCallback();const e=this.parentElement;if(e&&(0===e.offsetWidth&&""===e.style.width&&(e.style.width="100vw"),0===e.offsetHeight&&""===e.style.height&&(e.style.height="100vh"),"BODY"===e.tagName&&(e.style.marginTop||(e.style.marginTop="0"),e.style.marginRight||(e.style.marginRight="0"),e.style.marginBottom||(e.style.marginBottom="0"),e.style.marginLeft||(e.style.marginLeft="0"))),"false"!==this.loadFonts){const e={family:"Open Sans",style:"normal",weight:"300",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"},t=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')",e);e.weight="600";const r=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')",e);t.load().then((e=>{document.fonts.add(e)})),r.load().then((e=>{document.fonts.add(e)}))}this.layout&&"row, column,".includes(`${this.layout},`)||(this.layout="row"),this.renderStyle&&"read, view, focused,".includes(`${this.renderStyle},`)||(this.renderStyle="read"),this.schemaStyle&&"tree, table,".includes(`${this.schemaStyle},`)||(this.schemaStyle="tree"),this.theme&&"light, dark,".includes(`${this.theme},`)||(this.theme=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"),this.defaultSchemaTab&&"example, schema, model,".includes(`${this.defaultSchemaTab},`)?"model"===this.defaultSchemaTab&&(this.defaultSchemaTab="schema"):this.defaultSchemaTab="example",(!this.schemaExpandLevel||this.schemaExpandLevel<1)&&(this.schemaExpandLevel=99999),this.schemaDescriptionExpanded&&"true, false,".includes(`${this.schemaDescriptionExpanded},`)||(this.schemaDescriptionExpanded="false");const t=["post","put","patch"];this.schemaHideReadOnly?"never"!==this.schemaHideReadOnly&&(this.schemaHideReadOnly=t.filter((e=>this.schemaHideReadOnly.includes(e))),0===this.schemaHideReadOnly.length&&(this.schemaHideReadOnly=t)):this.schemaHideReadOnly=t,this.schemaHideReadOnly+=["get","head","delete","options"],this.schemaHideWriteOnly="never"!==this.schemaHideWriteOnly,this.fillRequestFieldsWithExample&&"true, false,".includes(`${this.fillRequestFieldsWithExample},`)||(this.fillRequestFieldsWithExample="true"),this.persistAuth&&"true, false,".includes(`${this.persistAuth},`)||(this.persistAuth="false"),this.onNavTagClick&&"expand-collapse, show-description,".includes(`${this.onNavTagClick},`)||(this.onNavTagClick="expand-collapse"),this.responseAreaHeight||(this.responseAreaHeight="300px"),this.allowSearch&&"true, false,".includes(`${this.allowSearch},`)||(this.allowSearch="true"),this.allowAdvancedSearch&&"true, false,".includes(`${this.allowAdvancedSearch},`)||(this.allowAdvancedSearch="true"),this.allowTry&&"true, false,".includes(`${this.allowTry},`)||(this.allowTry="true"),this.apiKeyValue||(this.apiKeyValue="-"),this.apiKeyLocation||(this.apiKeyLocation="header"),this.apiKeyName||(this.apiKeyName=""),this.oauthReceiver||(this.oauthReceiver="oauth-receiver.html"),this.updateRoute&&"true, false,".includes(`${this.updateRoute},`)||(this.updateRoute="true"),this.routePrefix||(this.routePrefix="#"),this.sortTags&&"true, false,".includes(`${this.sortTags},`)||(this.sortTags="false"),this.generateMissingTags&&"true, false,".includes(`${this.generateMissingTags},`)||(this.generateMissingTags="false"),this.sortEndpointsBy&&"method, path, summary, none,".includes(`${this.sortEndpointsBy},`)||(this.sortEndpointsBy="path"),this.navItemSpacing&&"compact, relaxed, default,".includes(`${this.navItemSpacing},`)||(this.navItemSpacing="default"),this.usePathInNavBar&&"true, false,".includes(`${this.usePathInNavBar},`)||(this.usePathInNavBar="false"),this.fontSize&&"default, large, largest,".includes(`${this.fontSize},`)||(this.fontSize="default"),this.showInfo&&"true, false,".includes(`${this.showInfo},`)||(this.showInfo="true"),this.allowServerSelection&&"true, fals
|
||
|
|
:host {
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width:360px;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
overflow: hidden;
|
||
|
|
letter-spacing:normal;
|
||
|
|
color:var(--fg);
|
||
|
|
background-color:var(--bg);
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.only-large-screen{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.only-large-screen-flex{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
}`]}connectedCallback(){if(super.connectedCallback(),"false"!==this.loadFonts){const e={family:"Open Sans",style:"normal",weight:"300",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"},t=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')",e);e.weight="600";const r=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')",e);t.load().then((e=>{document.fonts.add(e)})),r.load().then((e=>{document.fonts.add(e)}))}this.showSummaryWhenCollapsed&&"true, false,".includes(`${this.showSummaryWhenCollapsed},`)||(this.showSummaryWhenCollapsed="true"),this.layout&&"row, column,".includes(`${this.layout},`)||(this.layout="row"),this.schemaStyle&&"tree, table,".includes(`${this.schemaStyle},`)||(this.schemaStyle="tree"),this.theme&&"light, dark,".includes(`${this.theme},`)||(this.theme=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"),this.defaultSchemaTab&&"example, schema, model,".includes(`${this.defaultSchemaTab},`)?"model"===this.defaultSchemaTab&&(this.defaultSchemaTab="schema"):this.defaultSchemaTab="example",this.pathsExpanded="true"===this.pathsExpanded,(!this.schemaExpandLevel||this.schemaExpandLevel<1)&&(this.schemaExpandLevel=99999),this.schemaDescriptionExpanded&&"true, false,".includes(`${this.schemaDescriptionExpanded},`)||(this.schemaDescriptionExpanded="false"),this.fillRequestFieldsWithExample&&"true, false,".includes(`${this.fillRequestFieldsWithExample},`)||(this.fillRequestFieldsWithExample="true"),this.persistAuth&&"true, false,".includes(`${this.persistAuth},`)||(this.persistAuth="false"),this.responseAreaHeight||(this.responseAreaHeight="300px"),this.allowTry&&"true, false,".includes(`${this.allowTry},`)||(this.allowTry="true"),this.apiKeyValue||(this.apiKeyValue="-"),this.apiKeyLocation||(this.apiKeyLocation="header"),this.apiKeyName||(this.apiKeyName=""),this.oauthReceiver||(this.oauthReceiver="oauth-receiver.html"),this.sortTags&&"true, false,".includes(`${this.sortTags},`)||(this.sortTags="false"),this.sortEndpointsBy&&"method, path, summary,".includes(`${this.sortEndpointsBy},`)||(this.sortEndpointsBy="path"),this.fontSize&&"default, large, largest,".includes(`${this.fontSize},`)||(this.fontSize="default"),this.matchType&&"includes regex".includes(this.matchType)||(this.matchType="includes"),this.allowSchemaDescriptionExpandToggle&&"true, false,".includes(`${this.allowSchemaDescriptionExpandToggle},`)||(this.allowSchemaDescriptionExpandToggle="true"),this.fetchCredentials&&"omit, same-origin, include,".includes(`${this.fetchCredentials},`)||(this.fetchCredentials=""),qe.setOptions({highlight:(e,t)=>He().languages[t]?He().highlight(e,He().languages[t],t):e})}render(){return cL.call(this,!0,!1,!1,this.pathsExpanded)}attributeChangedCallback(e,t,r){if("spec-url"===e&&t!==r&&window.setTimeout((async()=>{await this.loadSpec(r)}),0),"api-key-name"===e||"api-key-location"===e||"api-key-value"===e){let t=!1,n="",o="",a="";if("api-key-name"===e?this.getAttribute("api-key-location")&&this.getAttribute("api-key-value")&&(n=r,o=this.getAttribute("api-key-location"),a=this.getAttribute("api-key-value"),t=!0):"api-key-location"===e?this.getAttribute("api-key-name")&&this.getAttribute("api-key-value")&&(o=r,n=this.getAttribute("api-key-name"),a=this.getAttribute("api-key-value"),t=!0):"api-key-value"===e&&this.getAttribute("api-key-name")&&this.getAttribute("api-key-location")&&(a=r,o=this.getAttribute("api-key-location"),n=this.getAttribute("api-key-name"),t=!0),t&&this.resolvedSpec){const e=this.resolvedSpec.securitySchemes.find((e=>e.securitySchemeId===rt));e?(e.name=n,e.in=o,e.value=a,e.finalKeyValue=a):this.resolvedSpec.securitySchemes.push({apiKeyId:rt,description:"api-key provided in rapidoc element attributes",type:"apiKey",name:n,in:o,value:a,finalKeyValue:a}),this.requestUpdate()}}super.attribut
|
||
|
|
<nav class='nav-bar' part="section-navbar">
|
||
|
|
<slot name="nav-logo" class="logo"></slot>
|
||
|
|
<div style="display:flex;line-height:22px; padding:8px">
|
||
|
|
<input id="nav-bar-search"
|
||
|
|
part = "textbox textbox-nav-filter"
|
||
|
|
style = "width:100%; height: 26px; padding-right:20px; color:var(--nav-hover-text-color); border-color:var(--nav-accent-color); background-color:var(--nav-hover-bg-color)"
|
||
|
|
type = "text"
|
||
|
|
placeholder = "Filter"
|
||
|
|
@change = "${this.onSearchChange}"
|
||
|
|
spellcheck = "false"
|
||
|
|
>
|
||
|
|
<div style="margin: 6px 5px 0 -24px; font-size:var(--font-size-regular); cursor:pointer;">↩</div>
|
||
|
|
</div>
|
||
|
|
<nav style="flex:1" class='nav-scroll' part="section-navbar-scroll">
|
||
|
|
${this.resolvedSpec.schemaAndExamples.map((e=>F`
|
||
|
|
<div class='nav-bar-path' data-content-id='${e.elementId}' id='link-${e.elementId}'
|
||
|
|
@click = '${e=>{this.scrollToEventTarget(e,!1)}}'
|
||
|
|
>
|
||
|
|
${e.name}
|
||
|
|
</div>`))}
|
||
|
|
</nav>
|
||
|
|
</nav>
|
||
|
|
`}function hL(){return F`
|
||
|
|
${"true"===this.showInfo?FR.call(this):""}
|
||
|
|
<div style="font-size:var(--font-size-regular);">
|
||
|
|
${this.resolvedSpec.schemaAndExamples.map((e=>{var t;const r=ER(e.schema,"json",e.examples,e.example,!0,!1,"json",!0);return e.selectedExample=null===(t=r[0])||void 0===t?void 0:t.exampleId,F`
|
||
|
|
<section id='${e.elementId}' class='json-schema-and-example regular-font' style="display:flex; flex-direction: column; border:1px solid var(--border-color); margin-bottom:32px; border-top: 5px solid var(--border-color)">
|
||
|
|
<div style="padding:16px; border-bottom: 1px solid var(--border-color)">
|
||
|
|
<div style="font-size:var(--font-size-small); font-weight:bold">${e.name}</div>
|
||
|
|
<span class="json-schema-description m-markdown ">${HP(qe(e.description||""))}</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex; flex-direction: row; gap:16px;">
|
||
|
|
<div class="json-schema-def" style="flex:1; padding:16px 0 16px 16px; ">
|
||
|
|
<schema-tree
|
||
|
|
.data = "${AR(e.schema,{})}"
|
||
|
|
schema-expand-level = "${this.schemaExpandLevel}"
|
||
|
|
schema-description-expanded = "${this.schemaDescriptionExpanded}"
|
||
|
|
allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
|
||
|
|
schema-hide-read-only = "false"
|
||
|
|
schema-hide-write-only = "false"
|
||
|
|
> </schema-tree>
|
||
|
|
</div>
|
||
|
|
<div class="json-schema-example-panel" style="width:400px; background-color: var(--input-bg); padding:16px 0 16px 16px; border-left: 1px dashed var(--border-color);">
|
||
|
|
${r.length>1?F`<select style="min-width:100px; max-width:100%" @change='${t=>this.onSelectExample(t,e)}'>
|
||
|
|
${r.map((t=>F`
|
||
|
|
<option value="${t.exampleId}" ?selected=${t.exampleId===e.selectedExample}>
|
||
|
|
${t.exampleSummary.length>80?t.exampleId:t.exampleSummary}
|
||
|
|
</option>`))}
|
||
|
|
</select>`:F`<div style="font-size: var(--font-size-small);font-weight:700; margin:5px 0"> ${r[0].exampleSummary}</div>`}
|
||
|
|
${r.map((t=>F`
|
||
|
|
<json-tree
|
||
|
|
.data = "${t.exampleValue}"
|
||
|
|
data-example = "${t.exampleId}"
|
||
|
|
class = "example"
|
||
|
|
style = "margin-top:16px; display: ${t.exampleId===e.selectedExample?"flex":"none"}"
|
||
|
|
></json-tree>`))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>`}))}
|
||
|
|
</div>
|
||
|
|
`}function fL(e=!1){if(!this.resolvedSpec)return"";const t={bg1:sL(this.bgColor)?this.bgColor:"",fg1:sL(this.textColor)?this.textColor:"",headerColor:sL(this.headerColor)?this.headerColor:"",primaryColor:sL(this.primaryColor)?this.primaryColor:"",navBgColor:sL(this.navBgColor)?this.navBgColor:"",navTextColor:sL(this.navTextColor)?this.navTextColor:"",navHoverBgColor:sL(this.navHoverBgColor)?this.navHoverBgColor:"",navHoverTextColor:sL(this.navHoverTextColor)?this.navHoverTextColor:"",navAccentColor:sL(this.navAccentColor)?this.navAccentColor:""};return this.resolvedSpec.specLoadError?e?F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",t):lL.call(this,"light",t)}
|
||
|
|
<div style="display:flex; align-items:center; border:1px dashed var(--border-color); height:42px; padding:5px; font-size:var(--font-size-small); color:var(--red); font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
|
||
|
|
`:F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",t):lL.call(this,"light",t)}
|
||
|
|
<!-- Header -->
|
||
|
|
${nL.call(this)}
|
||
|
|
<h1> Header </h1>
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div style="margin:24px; text-align: center;">
|
||
|
|
<h1 style="color: var(--red)"> ${this.resolvedSpec.info.title} </h1>
|
||
|
|
<div style="font-family:var(--font-mono)"> ${this.resolvedSpec.info.description} </div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
`:this.resolvedSpec.isSpecLoading?F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",t):lL.call(this,"light",t)}
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div class="main-content-inner--${this.renderStyle}-mode">
|
||
|
|
<div class="loader"></div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
`:F`
|
||
|
|
${"dark"===this.theme?lL.call(this,"dark",t):lL.call(this,"light",t)}
|
||
|
|
|
||
|
|
<!-- Header -->
|
||
|
|
${"false"===this.showHeader?"":nL.call(this)}
|
||
|
|
|
||
|
|
<div id='the-main-body' class="body" dir= ${this.pageDirection}>
|
||
|
|
|
||
|
|
<!-- Side Nav -->
|
||
|
|
${dL.call(this)}
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="main-content regular-font" part="section-main-content">
|
||
|
|
<slot></slot>
|
||
|
|
<div class="main-content-inner--${this.renderStyle}-mode">
|
||
|
|
${!0===this.loading?F`<div class="loader"></div>`:F`
|
||
|
|
${!0===this.loadFailed?F`<div style="text-align: center;margin: 16px;"> Unable to load the Spec</div>`:F`
|
||
|
|
<div class="operations-root" @click="${e=>{this.handleHref(e)}}">
|
||
|
|
${hL.call(this)}
|
||
|
|
</div>
|
||
|
|
`}`}
|
||
|
|
</div>
|
||
|
|
<slot name="footer"></slot>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
`}customElements.define("oauth-receiver",uL);customElements.define("json-schema-viewer",class extends ne{constructor(){super(),this.isMini=!1,this.updateRoute="false",this.renderStyle="focused",this.showHeader="true",this.allowAdvancedSearch="false",this.selectedExampleForEachSchema={}}static get properties(){return{specUrl:{type:String,attribute:"spec-url"},schemaStyle:{type:String,attribute:"schema-style"},schemaExpandLevel:{type:Number,attribute:"schema-expand-level"},schemaDescriptionExpanded:{type:String,attribute:"schema-description-expanded"},allowSchemaDescriptionExpandToggle:{type:String,attribute:"allow-schema-description-expand-toggle"},showHeader:{type:String,attribute:"show-header"},showSideNav:{type:String,attribute:"show-side-nav"},showInfo:{type:String,attribute:"show-info"},allowSpecUrlLoad:{type:String,attribute:"allow-spec-url-load"},allowSpecFileLoad:{type:String,attribute:"allow-spec-file-load"},allowSpecFileDownload:{type:String,attribute:"allow-spec-file-download"},allowSearch:{type:String,attribute:"allow-search"},theme:{type:String},bgColor:{type:String,attribute:"bg-color"},textColor:{type:String,attribute:"text-color"},primaryColor:{type:String,attribute:"primary-color"},fontSize:{type:String,attribute:"font-size"},regularFont:{type:String,attribute:"regular-font"},monoFont:{type:String,attribute:"mono-font"},loadFonts:{type:String,attribute:"load-fonts"},loading:{type:Boolean}}}static get styles(){return[We,Ve,Ge,Ke,Je,Ye,Ze,Qe,Xe,l`
|
||
|
|
:host {
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
min-width:360px;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
overflow: hidden;
|
||
|
|
letter-spacing:normal;
|
||
|
|
color:var(--fg);
|
||
|
|
background-color:var(--bg);
|
||
|
|
font-family:var(--font-regular);
|
||
|
|
}
|
||
|
|
.body {
|
||
|
|
display:flex;
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.nav-bar {
|
||
|
|
width: 230px;
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-content {
|
||
|
|
margin:0;
|
||
|
|
padding: 16px;
|
||
|
|
display:block;
|
||
|
|
flex:1;
|
||
|
|
height:100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
scrollbar-width: thin;
|
||
|
|
scrollbar-color: var(--border-color) transparent;
|
||
|
|
}
|
||
|
|
.main-content-inner--view-mode {
|
||
|
|
padding: 0 8px;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar-track {
|
||
|
|
background:transparent;
|
||
|
|
}
|
||
|
|
.main-content::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--border-color);
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
background-color:var(--header-bg);
|
||
|
|
color:var(--header-fg);
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.header-title {
|
||
|
|
font-size:calc(var(--font-size-regular) + 8px);
|
||
|
|
padding:0 8px;
|
||
|
|
}
|
||
|
|
input.header-input{
|
||
|
|
background:var(--header-color-darker);
|
||
|
|
color:var(--header-fg);
|
||
|
|
border:1px solid var(--header-color-border);
|
||
|
|
flex:1;
|
||
|
|
padding-right:24px;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
input.header-input::placeholder {
|
||
|
|
opacity:0.4;
|
||
|
|
}
|
||
|
|
.loader {
|
||
|
|
margin: 16px auto 16px auto;
|
||
|
|
border: 4px solid var(--bg3);
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top: 4px solid var(--primary-color);
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
animation: spin 2s linear infinite;
|
||
|
|
}
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
.only-large-screen{
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.only-large-screen-flex{
|
||
|
|
display:flex;
|
||
|
|
}
|
||
|
|
}`]}connectedCallback(){super.connectedCallback();const e=this.parentElement;if(e&&(0===e.offsetWidth&&""===e.style.width&&(e.style.width="100vw"),0===e.offsetHeight&&""===e.style.height&&(e.style.height="100vh"),"BODY"===e.tagName&&(e.style.marginTop||(e.style.marginTop="0"),e.style.marginRight||(e.style.marginRight="0"),e.style.marginBottom||(e.style.marginBottom="0"),e.style.marginLeft||(e.style.marginLeft="0"))),"false"!==this.loadFonts){const e={family:"Open Sans",style:"normal",weight:"300",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"},t=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OUuhpKKSTjw.woff2) format('woff2')",e);e.weight="600";const r=new FontFace("Open Sans","url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOUuhpKKSTjw.woff2) format('woff2')",e);t.load().then((e=>{document.fonts.add(e)})),r.load().then((e=>{document.fonts.add(e)}))}this.renderStyle="focused",this.pathsExpanded="true"===this.pathsExpanded,this.showInfo&&"true, false,".includes(`${this.showInfo},`)||(this.showInfo="true"),this.showSideNav&&"true false".includes(this.showSideNav)||(this.showSideNav="true"),this.showHeader&&"true, false,".includes(`${this.showHeader},`)||(this.showHeader="true"),this.schemaStyle&&"tree, table,".includes(`${this.schemaStyle},`)||(this.schemaStyle="tree"),this.theme&&"light, dark,".includes(`${this.theme},`)||(this.theme=window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark"),this.allowSearch&&"true, false,".includes(`${this.allowSearch},`)||(this.allowSearch="true"),(!this.schemaExpandLevel||this.schemaExpandLevel<1)&&(this.schemaExpandLevel=99999),this.schemaDescriptionExpanded&&"true, false,".includes(`${this.schemaDescriptionExpanded},`)||(this.schemaDescriptionExpanded="false"),this.responseAreaHeight||(this.responseAreaHeight="300px"),this.fontSize&&"default, large, largest,".includes(`${this.fontSize},`)||(this.fontSize="default"),this.matchType&&"includes regex".includes(this.matchType)||(this.matchType="includes"),this.allowSchemaDescriptionExpandToggle&&"true, false,".includes(`${this.allowSchemaDescriptionExpandToggle},`)||(this.allowSchemaDescriptionExpandToggle="true"),qe.setOptions({highlight:(e,t)=>He().languages[t]?He().highlight(e,He().languages[t],t):e})}render(){return fL.call(this,!0,!1,!1,this.pathsExpanded)}attributeChangedCallback(e,t,r){"spec-url"===e&&t!==r&&window.setTimeout((async()=>{await this.loadSpec(r)}),0),super.attributeChangedCallback(e,t,r)}onSepcUrlChange(){this.setAttribute("spec-url",this.shadowRoot.getElementById("spec-url").value)}onSearchChange(e){this.matchPaths=e.target.value}async loadSpec(e){if(e)try{this.resolvedSpec={specLoadError:!1,isSpecLoading:!0,tags:[]},this.loading=!0,this.loadFailed=!1,this.requestUpdate();const t=await LP.call(this,e,"true"===this.generateMissingTags,"true"===this.sortTags,this.getAttribute("sort-endpoints-by"));this.loading=!1,this.afterSpecParsedAndValidated(t)}catch(e){this.loading=!1,this.loadFailed=!0,this.resolvedSpec=null,console.error(`RapiDoc: Unable to resolve the API spec.. ${e.message}`)}}async afterSpecParsedAndValidated(e){this.resolvedSpec=e;const t=new CustomEvent("spec-loaded",{detail:e});this.dispatchEvent(t)}handleHref(e){if("a"===e.target.tagName.toLowerCase()&&e.target.getAttribute("href").startsWith("#")){const t=this.shadowRoot.getElementById(e.target.getAttribute("href").replace("#",""));t&&t.scrollIntoView({behavior:"auto",block:"start"})}}onSelectExample(e){[...e.target.closest(".json-schema-example-panel").querySelectorAll(".example")].forEach((t=>{t.style.display=t.dataset.example===e.target.value?"flex":"none"}))}async scrollToEventTarget(e){const t=e.currentTarget;if(!t.dataset.contentId)return;const r=this.shadowRoot.getElementById(t.dataset.contentId);r&&r.scrollIntoView({behavior:"auto",block:"start"})}})},742:(e,t)=>{"use strict";t.byteLength=function(e){var t=l(e),r=t[0]
|
||
|
|
//# sourceMappingURL=rapidoc-min.js.map
|