2022-06-06 20:13:19 +00:00
/*! RapiDoc 9.3.2 | 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 , a = Symbol ( ) , o = new Map ; class i { constructor ( e , t ) { if ( this . _$cssResult$ = ! 0 , t !== a ) throw Error ( "CSSResult is not constructable. Use `unsafeCSS` or `css` instead." ) ; this . cssText = e } get styleSheet ( ) { let e = o . get ( this . cssText ) ; return n && void 0 === e && ( o . 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 + "" , a ) , 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 , a ) } , 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 a = this [ e ] ; this [ t ] = n , this . requestUpdate ( e , a , 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
2022-03-27 16:42:11 +00:00
. 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 ) + 18 px ) ;
font - weight : normal
}
. sub - title { font - size : 20 px ; }
. req - res - title {
font - family : var ( -- font - regular ) ;
font - size : calc ( var ( -- font - size - small ) + 4 px ) ;
font - weight : bold ;
margin - bottom : 8 px ;
text - align : left ;
}
. tiny - title {
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
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 , 300 px ) ;
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 : 28 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h2 { font - family : var ( -- font - regular ) ; font - size : 24 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h3 { font - family : var ( -- font - regular ) ; font - size : 18 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h4 { font - family : var ( -- font - regular ) ; font - size : 16 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h5 { font - family : var ( -- font - regular ) ; font - size : 14 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h6 { font - family : var ( -- font - regular ) ; font - size : 14 px ; padding - top : 10 px ; letter - spacing : normal ; font - weight : normal ; }
h1 , h2 , h3 , h4 , h5 , h5 {
margin - block - end : 0.2 em ;
}
p { margin - block - start : 0.5 em ; }
a { color : var ( -- blue ) ; cursor : pointer ; }
a . inactive - link {
color : var ( -- fg ) ;
text - decoration : none ;
cursor : text ;
}
code ,
pre {
margin : 0 px ;
font - family : var ( -- font - mono ) ;
font - size : calc ( var ( -- font - size - mono ) - 1 px ) ;
}
. 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 ) + 8 px ) ;
}
. m - markdown li {
font - size : var ( -- font - size - regular ) ;
line - height : calc ( var ( -- font - size - regular ) + 10 px ) ;
}
. 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 ) + 6 px ) ;
}
. m - markdown - small li {
line - height : calc ( var ( -- font - size - small ) + 8 px ) ;
}
. m - markdown p : not ( : first - child ) {
margin - block - start : 24 px ;
}
. m - markdown - small p : not ( : first - child ) {
margin - block - start : 12 px ;
}
. 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 : 1 px 6 px ;
border - radius : 2 px ;
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 ) - 1 px ) ;
}
. m - markdown - small pre ,
. m - markdown pre {
white - space : pre - wrap ;
overflow - x : auto ;
line - height : normal ;
border - radius : 2 px ;
border : 1 px solid var ( -- code - border - color ) ;
}
. m - markdown pre {
padding : 12 px ;
background - color : var ( -- code - bg ) ;
color : var ( -- code - fg ) ;
}
. m - markdown - small pre {
margin - top : 4 px ;
padding : 2 px 4 px ;
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 : 30 px ;
}
. m - markdown - small ul ,
. m - markdown - small ol {
padding - inline - start : 20 px ;
}
. 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 : 10 px 0 ;
border - collapse : separate ;
border : 1 px solid var ( -- border - color ) ;
border - radius : var ( -- border - radius ) ;
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
line - height : calc ( var ( -- font - size - small ) + 4 px ) ;
max - width : 100 % ;
}
. m - markdown - small table {
font - size : var ( -- font - size - small ) ;
line - height : calc ( var ( -- font - size - small ) + 2 px ) ;
margin : 8 px 0 ;
}
. m - markdown - small td ,
. m - markdown - small th ,
. m - markdown td ,
. m - markdown th {
vertical - align : top ;
border - top : 1 px solid var ( -- border - color ) ;
line - height : calc ( var ( -- font - size - small ) + 4 px ) ;
}
. m - markdown - small tr : first - child th ,
. m - markdown tr : first - child th {
border - top : 0 none ;
}
. m - markdown th ,
. m - markdown td {
padding : 10 px 12 px ;
}
. m - markdown - small th ,
. m - markdown - small td {
padding : 8 px 8 px ;
}
. 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 ) - 2 px ) ;
}
. m - markdown table code {
font - size : calc ( var ( -- font - size - mono ) - 1 px ) ;
}
. m - markdown blockquote ,
. m - markdown - small blockquote {
margin - inline - start : 0 ;
margin - inline - end : 0 ;
border - left : 3 px solid var ( -- border - color ) ;
padding : 6 px 0 6 px 6 px ;
}
. m - markdown hr {
border : 1 px solid var ( -- border - color ) ;
}
` ,Ve=l `
/* Button */
. m - btn {
border - radius : var ( -- border - radius ) ;
font - weight : 600 ;
display : inline - block ;
padding : 6 px 16 px ;
font - size : var ( -- font - size - small ) ;
outline : 0 ;
line - height : 1 ;
text - align : center ;
white - space : nowrap ;
border : 2 px solid var ( -- primary - color ) ;
background - color : transparent ;
transition : background - color 0.2 s ;
user - select : none ;
cursor : pointer ;
box - shadow : 0 1 px 3 px rgba ( 0 , 0 , 0 , 0.12 ) , 0 1 px 2 px 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 : 1 px ; }
. m - btn . large { padding : 8 px 14 px ; }
. m - btn . small { padding : 5 px 12 px ; }
. m - btn . tiny { padding : 5 px 6 px ; }
. m - btn . circle { border - radius : 50 % ; }
. m - btn : hover {
background - color : var ( -- primary - color ) ;
color : var ( -- primary - color - invert ) ;
}
. m - btn . nav { border : 2 px 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 : 4 px ;
margin : 0 2 px ;
font - size : var ( -- font - size - small ) ;
min - width : 50 px ;
color : var ( -- primary - color - invert ) ;
border - radius : 2 px ;
border : none ;
background - color : var ( -- primary - color ) ;
}
input , textarea , select , button , pre {
color : var ( -- fg ) ;
outline : none ;
background - color : var ( -- input - bg ) ;
border : 1 px 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 . 2 s ;
padding : 6 px 5 px ;
}
select {
font - family : var ( -- font - regular ) ;
padding : 5 px 30 px 5 px 5 px ;
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 % - 5 px ) center ;
background - repeat : no - repeat ;
background - size : 10 px ;
- 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 : 1 px solid var ( -- primary - color ) ;
}
input [ type = "file" ] {
font - family : var ( -- font - regular ) ;
padding : 2 px ;
cursor : pointer ;
border : 1 px solid var ( -- primary - color ) ;
min - height : calc ( var ( -- font - size - small ) + 18 px ) ;
}
input [ type = "file" ] : : - webkit - file - upload - button {
font - family : var ( -- font - regular ) ;
font - size : var ( -- font - size - small ) ;
outline : none ;
cursor : pointer ;
padding : 3 px 8 px ;
border : 1 px 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 : 8 px ;
height : 8 px ;
}
pre : : - webkit - scrollbar - track ,
textarea : : - webkit - scrollbar - track {
background : var ( -- input - bg ) ;
}
pre : : - webkit - scrollbar - thumb ,
textarea : : - webkit - scrollbar - thumb {
border - radius : 2 px ;
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 : 2 px ;
}
input [ type = "checkbox" ] : focus {
outline : 0 ;
}
/* Toggle Body */
input [ type = "checkbox" ] {
appearance : none ;
display : inline - block ;
background - color : var ( -- light - bg ) ;
border : 1 px solid var ( -- light - bg ) ;
border - radius : 9 px ;
cursor : pointer ;
height : 18 px ;
position : relative ;
transition : border . 25 s . 15 s , box - shadow . 25 s . 3 s , padding . 25 s ;
min - width : 36 px ;
width : 36 px ;
vertical - align : top ;
}
/* Toggle Thumb */
input [ type = "checkbox" ] : after {
position : absolute ;
background - color : var ( -- bg ) ;
border : 1 px solid var ( -- light - bg ) ;
border - radius : 8 px ;
content : '' ;
top : 0 px ;
left : 0 px ;
right : 16 px ;
display : block ;
height : 16 px ;
transition : border . 25 s . 15 s , left . 25 s . 1 s , right . 15 s . 175 s ;
}
/* Toggle Body - Checked */
input [ type = "checkbox" ] : checked {
box - shadow : inset 0 0 0 13 px var ( -- green ) ;
border - color : var ( -- green ) ;
}
/* Toggle Thumb - Checked*/
input [ type = "checkbox" ] : checked : after {
border : 1 px solid var ( -- green ) ;
left : 16 px ;
right : 1 px ;
transition : border . 25 s , left . 15 s . 25 s , right . 25 s . 175 s ;
}
` ,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 : 1 px 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 ) + 4 px ) ;
padding : 4 px 5 px 4 px ;
vertical - align : top ;
}
. m - table . padded - 12 td ,
. m - table . padded - 12 th {
padding : 12 px ;
}
. 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 ) + 18 px ) ;
font - weight : 600 ;
letter - spacing : normal ;
background - color : var ( -- bg2 ) ;
vertical - align : bottom ;
border - bottom : 1 px solid var ( -- light - border - color ) ;
}
. m - table > tbody > tr > td ,
. m - table > tr > td {
border - top : 1 px 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 : 12 px 0 4 px 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 : 16 px ; }
. m - endpoint > . endpoint - head {
border - width : 1 px 1 px 1 px 5 px ;
border - style : solid ;
border - color : transparent ;
border - top - color : var ( -- light - border - color ) ;
display : flex ;
padding : 6 px 16 px ;
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 : 16 px 0 px 0 0 px ;
border - width : 0 px 1 px 1 px 5 px ;
border - style : solid ;
box - shadow : 0 px 4 px 3 px - 3 px 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 : 8 px 8 px ;
}
. summary . title {
font - size : calc ( var ( -- font - size - regular ) + 2 px ) ;
margin - bottom : 6 px ;
word - break : break - all ;
}
2022-06-06 20:13:19 +00:00
. endpoint - head . method {
2022-03-27 16:42:11 +00:00
padding : 2 px 5 px ;
vertical - align : middle ;
font - size : var ( -- font - size - small ) ;
height : calc ( var ( -- font - size - small ) + 16 px ) ;
line - height : calc ( var ( -- font - size - small ) + 8 px ) ;
width : 60 px ;
border - radius : 2 px ;
display : inline - block ;
text - align : center ;
font - weight : bold ;
text - transform : uppercase ;
margin - right : 5 px ;
}
2022-06-06 20:13:19 +00:00
. endpoint - head . method . delete { border : 2 px solid var ( -- red ) ; }
. endpoint - head . method . put { border : 2 px solid var ( -- orange ) ; }
. endpoint - head . method . post { border : 2 px solid var ( -- green ) ; }
. endpoint - head . method . get { border : 2 px solid var ( -- blue ) ; }
. endpoint - head . method . get . deprecated { border : 2 px solid var ( -- border - color ) ; }
. endpoint - head . method . head ,
. endpoint - head . method . patch ,
. endpoint - head . method . options {
2022-03-27 16:42:11 +00:00
border : 2 px solid var ( -- yellow ) ;
}
. req - resp - container {
display : flex ;
margin - top : 16 px ;
align - items : stretch ;
flex - wrap : wrap ;
flex - direction : column ;
border - top : 1 px solid var ( -- light - border - color ) ;
}
. view - mode - request ,
api - response . view - mode {
flex : 1 ;
min - height : 100 px ;
padding : 16 px 8 px ;
overflow : hidden ;
}
. view - mode - request {
border - width : 0 0 1 px 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 : 1024 px ) {
. 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 : 16 px ;
}
. view - mode - request . row - layout {
border - width : 0 1 px 0 0 ;
padding : 16 px ;
}
. summary {
padding : 8 px 16 px ;
}
}
` ,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 : 1 em ;
margin : . 5 em 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 : 30 px ;
border - bottom : 1 px solid var ( -- light - border - color ) ;
align - items : stretch ;
overflow - y : hidden ;
overflow - x : auto ;
scrollbar - width : thin ;
}
. tab - buttons : : - webkit - scrollbar {
height : 1 px ;
background - color : var ( -- border - color ) ;
}
. tab - btn {
border : none ;
border - bottom : 3 px 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 : 16 px ;
padding : 1 px ;
}
. tab - btn . active {
border - bottom : 3 px solid var ( -- primary - color ) ;
font - weight : bold ;
color : var ( -- primary - color ) ;
}
. tab - btn : hover {
color : var ( -- primary - color ) ;
}
. tab - content {
margin : - 1 px 0 0 0 ;
position : relative ;
2022-06-06 20:13:19 +00:00
min - height : 50 px ;
2022-03-27 16:42:11 +00:00
}
` ,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 ) + 4 px ) ;
display : none ;
position : relative ;
flex - direction : column ;
flex - wrap : nowrap ;
word - break : break - word ;
}
: : slotted ( [ slot = nav - logo ] ) {
padding : 16 px 16 px 0 16 px ;
}
. 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 : 20 px ;
}
. 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 : 16 px ;
height : 16 px ;
text - align : center ;
display : inline - block ;
2022-06-06 20:13:19 +00:00
transform : rotate ( - 90 deg ) ;
transition : transform 0.2 s ease - out 0 s ;
2022-03-27 16:42:11 +00:00
}
. nav - bar . focused . nav - bar - tag - and - paths . expanded . nav - bar - tag - icon : : after {
content : '⌵' ;
width : 16 px ;
height : 16 px ;
text - align : center ;
display : inline - block ;
2022-06-06 20:13:19 +00:00
transition : transform 0.2 s ease - out 0 s ;
2022-03-27 16:42:11 +00:00
}
. nav - scroll : : - webkit - scrollbar {
width : var ( -- scroll - bar - width , 8 px ) ;
}
. 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 : 4 px solid transparent ;
font - weight : bold ;
padding : 15 px 15 px 15 px 10 px ;
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 : 4 px solid transparent ;
}
. nav - bar - h1 ,
. nav - bar - h2 ,
. nav - bar - path {
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
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 : 16 px 10 px ;
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 : 12 px ; }
. 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 : 4 px 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 ) - 1 px ) ; margin - top : 8 px
margin - left : - 15 px ;
}
# api - info span : before {
content : "|" ;
display : inline - block ;
opacity : 0.5 ;
width : 15 px ;
text - align : center ;
}
# api - info span : first - child : before {
content : "" ;
width : 0 px ;
}
` ,et=l `
2022-06-06 20:13:19 +00:00
` ;const tt=/[ \s #:?&={}]/g,rt="_rapidoc_api_key";function nt(e){return new Promise((t=>setTimeout(t,e)))}function at(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 ot(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 a;it(null===(a=e[r].items)||void 0===a?void 0:a.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,Bt,Ft=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,ar=dt,or=Et,ir=function(e){return or(e)?e:void 0},sr=function(e,t){return arguments.length<2?ir(nr[e])||ir(ar[e]):nr[e]&&nr[e][t]||ar[e]&&ar[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&&(Bt=(Dt=mr.split("."))[0]>0&&Dt[0]<4?1:+(Dt[0]+Dt[1])),!Bt&&ur&&(!(Dt=ur.match(/Edge \/ ( \d +)/))||Dt[1]>=74)&&(Dt=ur.match(/Chrome \/ ( \d +)/))&&(Bt=+Dt[1]);var yr=Bt,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=
2022-03-27 16:42:11 +00:00
< div class = "oauth-flow ${e}" style = "padding: 12px 0; margin-bottom:12px;" >
2022-06-06 20:13:19 +00:00
< div class = "tiny-title upper" style = "margin-bottom:8px;" > $ { u } < / d i v >
$ { s ? B ` <div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Auth URL</span> <span class="mono-font"> ${ s } </span></div> ` : "" }
$ { l ? B ` <div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Token URL</span> <span class="mono-font"> ${ l } </span></div> ` : "" }
$ { c ? B ` <div style="margin-bottom:5px"><span style="width:75px; display: inline-block;">Refresh URL</span> <span class="mono-font"> ${ c } </span></div> ` : "" }
$ { "authorizationCode" === e || "clientCredentials" === e || "implicit" === e || "password" === e ? B `
$ { a . scopes ? B `
2022-03-27 16:42:11 +00:00
< span > Scopes < / s p a n >
< div class = "oauth-scopes" part = "section-auth-scopes" style = "width:100%; display:flex; flex-direction:column; flex-wrap:wrap; margin:0 0 10px 24px" >
2022-06-06 20:13:19 +00:00
$ { Object . entries ( a . scopes ) . map ( ( ( t , r ) => B `
2022-03-27 16:42:11 +00:00
< div class = "m-checkbox" style = "display:inline-flex; align-items:center" >
2022-06-06 20:13:19 +00:00
< input type = "checkbox" part = "checkbox checkbox-auth-scope" class = "scope-checkbox" id = "${n}${e}${r}" ? checked = "${o.includes(t[0])}" value = "${t[0]}" >
2022-03-27 16:42:11 +00:00
< label for = "${n}${e}${r}" style = "margin-left:5px; cursor:pointer" >
< span class = "mono-font" > $ { t [ 0 ] } < / s p a n >
$ { t [ 0 ] !== t [ 1 ] ? ` - ${ t [ 1 ] || "" } ` : "" }
< / l a b e l >
< / d i v >
` ))}
< / d i v >
` :""}
2022-06-06 20:13:19 +00:00
$ { "password" === e ? B `
2022-03-27 16:42:11 +00:00
< 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" >
< / d i v > ` : " " }
< div >
2022-06-06 20:13:19 +00:00
$ { "authorizationCode" === e ? B `
2022-03-27 16:42:11 +00:00
< 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 )
< / l a b e l >
< / d i v >
` :""}
< input type = "text" part = "textbox textbox-auth-client-id" value = "${t||" "}" placeholder = "client-id" spellcheck = "false" class = "oauth2 ${e} ${n} oauth-client-id" >
2022-06-06 20:13:19 +00:00
$ { "authorizationCode" === e || "clientCredentials" === e || "password" === e ? B `
2022-03-27 16:42:11 +00:00
< 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;" >
2022-06-06 20:13:19 +00:00
$ { "authorizationCode" === e || "clientCredentials" === e || "password" === e ? B `
2022-03-27 16:42:11 +00:00
< select style = "margin-right:5px;" class = "${e} ${n} oauth-send-client-secret-in" >
2022-06-06 20:13:19 +00:00
< option value = 'header' . selected = $ { "header" === i } > Authorization Header < / o p t i o n >
< option value = 'request-body' . selected = $ { "request-body" === i } > Request Body < / o p t i o n >
2022-03-27 16:42:11 +00:00
< / s e l e c t > ` : " " } ` : " " }
2022-06-06 20:13:19 +00:00
$ { "authorizationCode" === e || "clientCredentials" === e || "implicit" === e || "password" === e ? B `
2022-03-27 16:42:11 +00:00
< button class = "m-btn thin-border" part = "btn btn-outline"
2022-06-06 20:13:19 +00:00
@ click = "${t=>{tR.call(this,n,e,s,l,t)}}"
2022-03-27 16:42:11 +00:00
> GET TOKEN < / b u t t o n > ` : " " }
< / d i v >
< div class = "oauth-resp-display red-text small-font-size" > < / d i v >
` :""}
< / d i v >
2022-06-06 20:13:19 +00:00
` }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 aR(){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?B `
2022-03-27 16:42:11 +00:00
< 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 < / d i v >
< div class = "small-font-size" style = "display:flex; align-items: center; min-height:30px" >
2022-06-06 20:13:19 +00:00
$ { t . length > 0 ? B `
2022-03-27 16:42:11 +00:00
< div class = "blue-text" > $ { t . length } API key applied < / d i v >
< div style = "flex:1" > < / d i v >
2022-06-06 20:13:19 +00:00
< button class = "m-btn thin-border" part = "btn btn-outline" @ click = $ { ( ) => { GP . call ( this ) } } > CLEAR ALL API KEYS < / b u t t o n > ` : B ` < d i v c l a s s = " r e d - t e x t " > N o A P I k e y a p p l i e d < / d i v > ` }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . securitySchemes && this . resolvedSpec . securitySchemes . length > 0 ? B `
2022-03-27 16:42:11 +00:00
< table id = "auth-table" class = 'm-table padded-12' style = "width:100%;" >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . securitySchemes . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 } < / s p a n >
2022-06-06 20:13:19 +00:00
$ { e . finalKeyValue ? B `
2022-03-27 16:42:11 +00:00
< span class = 'blue-text' > $ { e . finalKeyValue ? "Key Applied" : "" } < / s p a n >
< button class = "m-btn thin-border small" part = "btn btn-outline" @ click = $ { ( ) => { nR . call ( this , e . securitySchemeId ) } } > REMOVE < / b u t t o n >
` :""}
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e . description ? B `
2022-03-27 16:42:11 +00:00
< div class = "m-markdown" >
$ { HP ( qe ( e . description || "" ) ) }
< / d i v > ` : " " }
2022-06-06 20:13:19 +00:00
$ { "apikey" === e . type . toLowerCase ( ) || "http" === e . type . toLowerCase ( ) && "bearer" === e . scheme . toLowerCase ( ) ? B `
2022-03-27 16:42:11 +00:00
< div style = "margin-bottom:5px" >
2022-06-06 20:13:19 +00:00
$ { "apikey" === e . type . toLowerCase ( ) ? B ` Send <code> ${ e . name } </code> in <code> ${ e . in } </code> ` : B ` Send <code>Authorization</code> in <code>header</code> containing the word <code>Bearer</code> followed by a space and a Token String. ` }
2022-03-27 16:42:11 +00:00
< / d i v >
< div style = "max-height:28px;" >
2022-06-06 20:13:19 +00:00
$ { "cookie" !== e . in ? B `
2022-03-27 16:42:11 +00:00
< 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" }
2022-06-06 20:13:19 +00:00
< / b u t t o n > ` : B ` < s p a n c l a s s = " g r a y - t e x t " s t y l e = " f o n t - s i z e : : v a r ( - - f o n t - s i z e - s m a l l ) " > c o o k i e s c a n n o t b e s e t f r o m h e r e < / s p a n > ` }
2022-03-27 16:42:11 +00:00
< / d i v > ` : " " }
2022-06-06 20:13:19 +00:00
$ { "http" === e . type . toLowerCase ( ) && "basic" === e . scheme . toLowerCase ( ) ? B `
2022-03-27 16:42:11 +00:00
< div style = "margin-bottom:5px" >
Send < code > Authorization < / c o d e > i n < c o d e > h e a d e r < / c o d e > c o n t a i n i n g t h e w o r d < c o d e > B a s i c < / c o d e > f o l l o w e d b y a s p a c e a n d a b a s e 6 4 e n c o d e d s t r i n g o f < c o d e > u s e r n a m e : p a s s w o r d < / c o d e > .
< / d i v >
< 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" }
< / b u t t o n >
< / d i v > ` : " " }
< / t d >
< / t r >
2022-06-06 20:13:19 +00:00
$ { "oauth2" === e . type . toLowerCase ( ) ? B `
2022-03-27 16:42:11 +00:00
< tr >
< td style = "border:none; padding-left:48px" >
2022-06-06 20:13:19 +00:00
$ { 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" ] , e [ "x-receive-token-in" ] ) ) ) }
2022-03-27 16:42:11 +00:00
< / t d >
< / t r >
` :""}
` ))}
< / t a b l e > ` : " " }
< slot name = "auth" > < / s l o t >
< / s e c t i o n >
2022-06-06 20:13:19 +00:00
` :void 0}function oR(e){if(this.resolvedSpec.securitySchemes&&e){const t=[];return e.forEach((e=>{const r=[],n=[];0===Object.keys(e).length?t.push({securityTypes:"None",securityDefs:[]}):(Object.keys(e).forEach((t=>{let a="";const o=this.resolvedSpec.securitySchemes.find((e=>e.securitySchemeId===t));e[t]&&Array.isArray(e[t])&&(a=e[t].join(", ")),o&&(n.push(o.typeDisplay),r.push({...o,scopes:a}))})),t.push({securityTypes:n.length>1? ` $ { n [ 0 ] } + $ { n . length - 1 } more ` :n[0],securityDefs:r}))})),B ` < div style = "position:absolute; top:3px; right:2px; font-size:var(--font-size-small); line-height: 1.5;" >
2022-03-27 16:42:11 +00:00
< 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 >
< / s v g >
2022-06-06 20:13:19 +00:00
$ { t . map ( ( ( e , t ) => B `
2022-03-27 16:42:11 +00:00
2022-06-06 20:13:19 +00:00
$ { e . securityTypes ? B `
$ { 0 !== t ? B ` <div style="padding:3px 4px;"> OR </div> ` : "" }
2022-03-27 16:42:11 +00:00
< div class = "tooltip" >
< div style = "padding:2px 4px; white-space:nowrap; text-overflow:ellipsis;max-width:150px; overflow:hidden;" >
2022-06-06 20:13:19 +00:00
$ { "true" === this . updateRoute && "true" === this . allowAuthentication ? B ` <a part="anchor anchor-operation-security" href="#auth"> ${ e . securityTypes } </a> ` : B ` ${ e . securityTypes } ` }
2022-03-27 16:42:11 +00:00
< / d i v >
< 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;" >
2022-06-06 20:13:19 +00:00
$ { e . securityDefs . length > 1 ? B ` <div>Requires <b>all</b> of the following </div> ` : "" }
2022-03-27 16:42:11 +00:00
< div style = "padding-left: 8px" >
2022-06-06 20:13:19 +00:00
$ { e . securityDefs . map ( ( ( t , r ) => { const n = B ` ${ "" !== t . scopes ? B `
2022-03-27 16:42:11 +00:00
< div >
< b > Required scopes : < / b >
< br / >
< div style = "margin-left:8px" >
2022-06-06 20:13:19 +00:00
$ { t . scopes . split ( "," ) . map ( ( ( e , t ) => B ` ${ 0 === t ? "" : "┃" } <span> ${ e } </span> ` ) ) }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
< / d i v > ` : " " } ` ; r e t u r n B `
$ { "oauth2" === t . type ? B `
2022-03-27 16:42:11 +00:00
< div >
2022-06-06 20:13:19 +00:00
$ { e . securityDefs . length > 1 ? B ` <b> ${ r + 1 } .</b> ` : "Needs" }
2022-03-27 16:42:11 +00:00
OAuth Token < span style = "font-family:var(--font-mono); color:var(--primary-color);" > $ { t . securitySchemeId } < / s p a n > i n < b > A u t h o r i z a t i o n h e a d e r < / b >
$ { n }
2022-06-06 20:13:19 +00:00
< / d i v > ` : " h t t p " = = = t . t y p e ? B `
2022-03-27 16:42:11 +00:00
< div >
2022-06-06 20:13:19 +00:00
$ { e . securityDefs . length > 1 ? B ` <b> ${ r + 1 } .</b> ` : B ` Requires ` }
2022-03-27 16:42:11 +00:00
$ { "basic" === t . scheme ? "Base 64 encoded username:password" : "Bearer Token" } in < b > Authorization header < / b >
$ { n }
2022-06-06 20:13:19 +00:00
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
< div >
2022-06-06 20:13:19 +00:00
$ { e . securityDefs . length > 1 ? B ` <b> ${ r + 1 } .</b> ` : B ` Requires ` }
2022-03-27 16:42:11 +00:00
Token in < b > $ { t . name } $ { t . in } < / b >
$ { n }
< / d i v > ` } ` } ) ) }
< / d i v >
< / d i v >
< / d i v >
` :""}
` ))}
< / d i v >
2022-06-06 20:13:19 +00:00
` }return""}function iR(e){return B `
2022-03-27 16:42:11 +00:00
< section class = "table-title" style = "margin-top:24px;" > CODE SAMPLES < / d i v >
< 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" >
2022-06-06 20:13:19 +00:00
$ { e . map ( ( ( e , t ) => B ` <button class="tab-btn ${ 0 === t ? "active" : "" } " data-tab = ' ${ e . lang } ${ t } '> ${ e . label || e . lang } </button> ` ) ) }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e . map ( ( ( e , t ) => { var r , n , a ; return B `
2022-03-27 16:42:11 +00:00
< div class = "tab-content m-markdown" style = "display:${0===t?" block ":" none "}" data - tab = '${e.lang}${t}' >
2022-06-06 20:13:19 +00:00
< button class = "toolbar-btn" style = "position:absolute; top:12px; right:8px" @ click = '${t=>{at(e.source,t)}}' > Copy < / b u t t o n >
< 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 === ( a = e . lang ) || void 0 === a ? void 0 : a . toLowerCase ( ) ) ) : e . source } < / c o d e > < / p r e >
2022-03-27 16:42:11 +00:00
< / d i v > ` } ) ) }
2022-06-06 20:13:19 +00:00
< / s e c t i o n > ` } f u n c t i o n s R ( e ) { r e t u r n B `
2022-03-27 16:42:11 +00:00
< div class = "req-res-title" style = "margin-top:12px" > CALLBACKS < / d i v >
2022-06-06 20:13:19 +00:00
$ { Object . entries ( e ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< div class = "tiny-title" style = "padding: 12px; border:1px solid var(--light-border-color)" >
$ { e [ 0 ] }
2022-06-06 20:13:19 +00:00
$ { Object . entries ( e [ 1 ] ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< div class = "mono-font small-font-size" style = "display:flex; margin-left:16px;" >
< div >
2022-06-06 20:13:19 +00:00
$ { Object . entries ( e [ 1 ] ) . map ( ( t => { var r , n , a ; return B `
2022-03-27 16:42:11 +00:00
< 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;" > & # x2944 ; < / s p a n >
$ { t [ 0 ] }
< / d i v >
< span style = "line-height:20px; vertical-align: baseline;" > $ { e [ 0 ] } < / s p a n >
< / d i v >
< 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}"
2022-06-06 20:13:19 +00:00
use - summary - to - list - example = "${this.useSummaryToListExamples}"
2022-03-27 16:42:11 +00:00
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}" ,
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "false"
schema - hide - write - only = "${this.schemaHideWriteOnly}"
2022-03-27 16:42:11 +00:00
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 ,
2022-06-06 20:13:19 +00:00
anchor : anchor , anchor - param - example : anchor - param - example , schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
2022-03-27 16:42:11 +00:00
> < / a p i - r e q u e s t >
< api - response
style = "width:100%;"
class = "${this.renderStyle}-mode"
callback = "true"
2022-06-06 20:13:19 +00:00
. responses = "${null===(a=t[1])||void 0===a?void 0:a.responses}"
2022-03-27 16:42:11 +00:00
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}"
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${this.schemaHideReadOnly}"
schema - hide - write - only = "false"
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 ,
schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
2022-03-27 16:42:11 +00:00
> < / a p i - r e s p o n s e >
< / d i v >
< / d i v >
` }))}
< / d i v >
< / d i v >
` ))}
< / d i v >
` ))}
2022-06-06 20:13:19 +00:00
` }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 F}else if(this.nt===t)return F;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!==BP&&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===F||t===N)return t;const r=e.element,n=e.name;if(e.type===NP){if(t===r[n])return F}else if(e.type===zP){if(!!t===r.hasAttribute(n))return F}else if(e.type===BP&&r.getAttribute(n)===t+"")return F;return((e,t=uR)=>{e._ $ AH=t})(e),t}}),hR=l `
2022-03-27 16:42:11 +00:00
. border - top {
border - top : 1 px solid var ( -- border - color ) ;
}
. border {
border : 1 px solid var ( -- border - color ) ;
border - radius : var ( -- border - radius ) ;
}
. light - border {
border : 1 px solid var ( -- light - border - color ) ;
border - radius : var ( -- border - radius ) ;
}
. pad - 8 - 16 {
padding : 8 px 16 px ;
}
. pad - top - 8 {
padding - top : 8 px ;
}
. mar - top - 8 {
margin - top : 8 px ;
}
2022-06-06 20:13:19 +00:00
` ;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(2===e.length?" or ":"┃"):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 a,o,i;const t=null===(a=e.items)||void 0===a?void 0:a.type,r=void 0!==(null===(o=e.items)||void 0===o?void 0:o.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),a=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>=a?t:a%t==0?a:Math.ceil(a/t)*t:a}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"
2022-03-27 16:42:11 +00:00
: 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 ) + 6 px ) ;
direction : ltr ;
text - align : left ;
}
2022-06-06 20:13:19 +00:00
. open - bracket {
2022-03-27 16:42:11 +00:00
display : inline - block ;
padding : 0 20 px 0 0 ;
cursor : pointer ;
border : 1 px solid transparent ;
border - radius : 3 px ;
}
2022-06-06 20:13:19 +00:00
. close - bracket {
border : 1 px solid transparent ;
border - radius : 3 px ;
display : inline - block ;
}
. open - bracket : hover {
2022-03-27 16:42:11 +00:00
color : var ( -- primary - color ) ;
background - color : var ( -- hover - color ) ;
border : 1 px solid var ( -- border - color ) ;
}
2022-06-06 20:13:19 +00:00
. open - bracket . expanded : hover ~ . inside - bracket {
border - left : 1 px solid var ( -- fg3 ) ;
}
. open - bracket . expanded : hover ~ . close - bracket {
color : var ( -- primary - color ) ;
}
2022-03-27 16:42:11 +00:00
. inside - bracket {
padding - left : 12 px ;
border - left : 1 px 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 : 5 px ;
right : 6 px ;
display : flex ;
padding : 2 px ;
align - items : center ;
2022-06-06 20:13:19 +00:00
} ` ,et]}render(){return B `
2022-03-27 16:42:11 +00:00
< div class = "json-tree" >
< div class = 'toolbar' >
2022-06-06 20:13:19 +00:00
< button class = "toolbar-btn" part = "btn btn-fill btn-copy" @ click = '${e=>{at(JSON.stringify(this.data,null,2),e)}}' > Copy < / b u t t o n >
2022-03-27 16:42:11 +00:00
< / d i v >
$ { this . generateTree ( this . data , ! 0 ) }
< / d i v >
2022-06-06 20:13:19 +00:00
` }generateTree(e,t=!1){if(null===e)return B ` < div class = "null" style = "display:inline;" > null < / d i v > ` ; i f ( " o b j e c t " = = t y p e o f e & & e i n s t a n c e o f D a t e = = ! 1 ) { c o n s t r = A r r a y . i s A r r a y ( e ) ? " a r r a y " : " p u r e _ o b j e c t " ; r e t u r n 0 = = = O b j e c t . k e y s ( e ) . l e n g t h ? B ` $ { A r r a y . i s A r r a y ( e ) ? " [ ] , " : " { } , " } ` : B `
2022-03-27 16:42:11 +00:00
< div class = "open-bracket expanded ${" array "===r?" array ":" object "} " @ click = "${this.toggleExpand}" > $ { "array" === r ? "[" : "{" } < / d i v >
< div class = "inside-bracket" >
2022-06-06 20:13:19 +00:00
$ { Object . keys ( e ) . map ( ( ( t , n , a ) => B `
2022-03-27 16:42:11 +00:00
< div class = "item" >
2022-06-06 20:13:19 +00:00
$ { "pure_object" === r ? B ` " ${ t } ": ` : "" }
$ { this . generateTree ( e [ t ] , n === a . length - 1 ) }
2022-03-27 16:42:11 +00:00
< / d i v > ` ) ) }
< / d i v >
< div class = "close-bracket" > $ { "array" === r ? "]" : "}" } $ { t ? "" : "," } < / d i v >
2022-06-06 20:13:19 +00:00
` }return"string"==typeof e||e instanceof Date?B ` < span class = "${typeof e}" > "${e}" < / s p a n > $ { t ? " " : " , " } ` : B ` < s p a n c l a s s = " $ { t y p e o f e } " > $ { e } < / s p a n > $ { t ? " " : " , " } ` } t o g g l e E x p a n d ( e ) { c o n s t t = e . t a r g e t ; t . c l a s s L i s t . c o n t a i n s ( " e x p a n d e d " ) ? ( t . c l a s s L i s t . r e p l a c e ( " e x p a n d e d " , " c o l l a p s e d " ) , e . t a r g e t . i n n e r H T M L = e . t a r g e t . c l a s s L i s t . c o n t a i n s ( " a r r a y " ) ? " [ . . . ] " : " { . . . } " ) : ( t . c l a s s L i s t . r e p l a c e ( " c o l l a p s e d " , " e x p a n d e d " ) , e . t a r g e t . i n n e r H T M L = e . t a r g e t . c l a s s L i s t . c o n t a i n s ( " a r r a y " ) ? " [ " : " { " ) } } ) ; c o n s t C R = l `
2022-03-27 16:42:11 +00:00
* , * : before , * : after { box - sizing : border - box ; }
. tr {
display : flex ;
flex : none ;
width : 100 % ;
box - sizing : content - box ;
border - bottom : 1 px dotted transparent ;
}
. td {
display : block ;
flex : 0 0 auto ;
}
. key {
font - family : var ( -- font - mono ) ;
white - space : normal ;
word - break : break - all ;
}
2022-06-06 20:13:19 +00:00
. collapsed - descr . key {
2022-03-27 16:42:11 +00:00
overflow : hidden ;
}
2022-06-06 20:13:19 +00:00
. expanded - descr . more - content { display : none ; }
2022-03-27 16:42:11 +00:00
. 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 : 20 px ;
}
. tr . xxx - of {
border - top : 1 px dotted var ( -- primary - color ) ;
}
. xxx - of - key {
font - size : calc ( var ( -- font - size - small ) - 2 px ) ;
font - weight : bold ;
background - color : var ( -- primary - color ) ;
color : var ( -- primary - color - invert ) ;
border - radius : 2 px ;
line - height : calc ( var ( -- font - size - small ) + 6 px ) ;
padding : 0 px 5 px ;
margin - bottom : 1 px ;
display : inline - block ;
}
. xxx - of - descr {
font - family : var ( -- font - regular ) ;
color : var ( -- primary - color ) ;
font - size : calc ( var ( -- font - size - small ) - 1 px ) ;
margin - left : 2 px ;
}
. 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 : 2 px 0 ;
color : var ( -- primary - color ) ;
}
. toolbar - item {
cursor : pointer ;
padding : 5 px 0 ;
margin : 0 2 px ;
}
. 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 2 px 0 0 ; }
@ media only screen and ( min - width : 500 px ) {
. 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 ) + 6 px ) ;
}
. tree . tr : hover {
background - color : var ( -- hover - color ) ;
}
. collapsed - descr . tr {
max - height : calc ( var ( -- font - size - small ) + 8 px ) ;
}
. collapsed - descr . m - markdown - small p {
line - height : calc ( var ( -- font - size - small ) + 6 px ) ;
}
. tree . key {
max - width : 300 px ;
}
. key . deprecated . key - label {
2022-06-06 20:13:19 +00:00
color : var ( -- red ) ;
}
. tr . expanded : hover > . td . key > . open - bracket {
color : var ( -- primary - color ) ;
}
. tr . expanded : hover + . inside - bracket {
border - left : 1 px solid var ( -- fg3 ) ;
}
. tr . expanded : hover + . inside - bracket + . close - bracket {
color : var ( -- primary - color ) ;
2022-03-27 16:42:11 +00:00
}
. open - bracket {
display : inline - block ;
padding : 0 20 px 0 0 ;
cursor : pointer ;
border : 1 px solid transparent ;
border - radius : 3 px ;
}
. open - bracket : hover {
color : var ( -- primary - color ) ;
background - color : var ( -- hover - color ) ;
border : 1 px 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 : 1 px dotted var ( -- border - color ) ;
}
. inside - bracket . xxx - of {
padding : 5 px 0 px ;
border - style : dotted ;
border - width : 0 0 1 px 0 ;
border - color : var ( -- primary - color ) ;
2022-06-06 20:13:19 +00:00
} ` ,et]}render(){var e,t,r;return B `
2022-03-27 16:42:11 +00:00
< 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" ] ) || "" } < / d i v >
2022-06-06 20:13:19 +00:00
$ { "true" === this . allowSchemaDescriptionExpandToggle ? B `
2022-03-27 16:42:11 +00:00
< div style = "flex:1" > < / d i v >
2022-06-06 20:13:19 +00:00
< div part = "schema-toolbar-item schema-multiline-toggle" class = 'toolbar-item' @ click = '${()=>{this.schemaDescriptionExpanded="true"===this.schemaDescriptionExpanded?"false":"true"}}' >
2022-03-27 16:42:11 +00:00
$ { "true" === this . schemaDescriptionExpanded ? "Single line description" : "Multiline description" }
< / d i v >
` :""}
< / d i v >
2022-06-06 20:13:19 +00:00
$ { null !== ( r = this . data ) && void 0 !== r && r [ "::description" ] ? B ` <span part="schema-description" class='m-markdown'> ${ HP ( qe ( this . data [ "::description" ] || "" ) ) } </span> ` : "" }
$ { this . data ? B `
$ { this . generateTree ( "array" === this . data [ "::type" ] ? this . data [ "::props" ] : this . data , this . data [ "::type" ] , this . data [ "::array-type" ] || "" ) } ` :B ` < span class = 'mono-font' style = 'color:var(--red)' > Schema not found < / s p a n > ` }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
` }generateTree(e,t="object",r="",n="",a="",o=0,i=0,s=""){var l;if("true"===this.schemaHideReadOnly){if("array"===t&&"readonly"===s)return;if(e&&"readonly"===e["::readwrite"])return}if("true"===this.schemaHideWriteOnly){if("array"===t&&"writeonly"===s)return;if(e&&"writeonly"===e["::readwrite"])return}if(!e)return B ` < div class = "null" style = "display:inline;" >
< span class = "key-label xxx-of-key" > $ { n . replace ( "::OPTION~" , "" ) } < / s p a n >
$ { "array" === t ? B ` <span class='mono-font'> [ ] </span> ` : "object" === t ? B ` <span class='mono-font'> { } </span> ` : B ` <span class='mono-font'> schema undefined </span> ` }
< / d i v > ` ; i f ( 0 = = = O b j e c t . k e y s ( e ) . l e n g t h ) r e t u r n B ` < s p a n c l a s s = " k e y o b j e c t " > $ { n } : { } < / s p a n > ` ; l e t c = " " , p = " " ; i f ( n . s t a r t s W i t h ( " : : O N E ~ O F " ) | | n . s t a r t s W i t h ( " : : A N Y ~ O F " ) ) c = n . r e p l a c e ( " : : " , " " ) . r e p l a c e ( " ~ " , " " ) ; e l s e i f ( n . s t a r t s W i t h ( " : : O P T I O N " ) ) { c o n s t e = n . s p l i t ( " ~ " ) ; c = e [ 1 ] , p = e [ 2 ] } e l s e c = n ; c o n s t u = 4 0 0 - 1 2 * i ; l e t d = " " , h = " " ; c o n s t f = n u l l ! = = ( l = e [ " : : t y p e " ] ) & & v o i d 0 ! = = l & & l . s t a r t s W i t h ( " x x x - o f " ) ? o : o + 1 , m = " x x x - o f - o p t i o n " = = = t | | " x x x - o f - o p t i o n " = = = e [ " : : t y p e " ] | | n . s t a r t s W i t h ( " : : O P T I O N " ) ? i : i + 1 ; i f ( " o b j e c t " = = = e [ " : : t y p e " ] ) " a r r a y " = = = t ? ( d = o < t h i s . s c h e m a E x p a n d L e v e l ? B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y - o f - o b j e c t " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ { < / s p a n > ` : B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y - o f - o b j e c t " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ { . . . } ] < / s p a n > ` , h = " } ] " ) : ( d = o < t h i s . s c h e m a E x p a n d L e v e l ? B ` < s p a n c l a s s = " o p e n - b r a c k e t o b j e c t " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > { < / s p a n > ` : B ` < s p a n c l a s s = " o p e n - b r a c k e t o b j e c t " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > { . . . } < / s p a n > ` , h = " } " ) ; e l s e i f ( " a r r a y " = = = e [ " : : t y p e " ] ) i f ( " a r r a y " = = = t ) { c o n s t e = " o b j e c t " ! = = r ? r : " " ; d = o < t h i s . s c h e m a E x p a n d L e v e l ? B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y - o f - a r r a y " d a t a - a r r a y - t y p e = " $ { e } " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ [ $ { e } < / s p a n > ` : B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y - o f - a r r a y " d a t a - a r r a y - t y p e = " $ { e } " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ [ . . . ] ] < / s p a n > ` , h = " ] ] " } e l s e d = o < t h i s . s c h e m a E x p a n d L e v e l ? B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ < / s p a n > ` : B ` < s p a n c l a s s = " o p e n - b r a c k e t a r r a y " @ c l i c k = " $ { t h i s . t o g g l e O b j e c t E x p a n d } " > [ . . . ] < / s p a n > ` , h = " ] " ; v a r y ; i f ( " o b j e c t " = = t y p e o f e ) r e t u r n B `
< div class = "tr ${o<this.schemaExpandLevel||null!==(y=e[" : : type "])&&void 0!==y&&y.startsWith(" xxx - of ")?" expanded ":" collapsed "} ${e[" : : type "]||" no - type - info "}" title = "${e[" : : deprecated "]?" Deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
< div class = "td key ${e[" : : deprecated "]?" deprecated ":" "}" style = 'min-width:${u}px' >
2022-06-06 20:13:19 +00:00
$ { "xxx-of-option" === e [ "::type" ] || "xxx-of-array" === e [ "::type" ] || n . startsWith ( "::OPTION" ) ? B ` <span class='key-label xxx-of-key'> ${ c } </span><span class="xxx-of-descr"> ${ p } </span> ` : "::props" === c || "::ARRAY~OF" === c ? "" : o > 0 ? B ` <span class="key-label" title=" ${ "readonly" === s ? "Read-Only" : "writeonly" === s ? "Write-Only" : "" } ">
$ { e [ "::deprecated" ] ? "✗" : "" }
$ { c . replace ( /\*$/ , "" ) } $ { c . endsWith ( "*" ) ? B ` <span style="color:var(--red)">*</span> ` : "" } $ { "readonly" === s ? B ` 🆁 ` : "writeonly" === s ? B ` 🆆 ` : s } :
2022-03-27 16:42:11 +00:00
< / s p a n > ` : " " }
2022-06-06 20:13:19 +00:00
$ { "xxx-of" === e [ "::type" ] && "array" === t ? B ` <span style="color:var(--primary-color)">ARRAY</span> ` : "" }
2022-03-27 16:42:11 +00:00
$ { d }
< / d i v >
2022-06-06 20:13:19 +00:00
< div class = 'td key-descr m-markdown-small' > $ { HP ( qe ( a || "" ) ) } < / d i v >
2022-03-27 16:42:11 +00:00
< / d i v >
< 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;' >
2022-06-06 20:13:19 +00:00
$ { Array . isArray ( e ) && e [ 0 ] ? B ` ${ this . generateTree ( e [ 0 ] , "xxx-of-option" , "" , "::ARRAY~OF" , "" , f , m , e [ 0 ] [ "::readwrite" ] ) } ` : B `
$ { Object . keys ( e ) . map ( ( t => B `
$ { [ "::title" , "::description" , "::type" , "::props" , "::deprecated" , "::array-type" , "::readwrite" ] . includes ( t ) ? "array" === e [ t ] [ "::type" ] || "object" === e [ t ] [ "::type" ] ? B ` ${ 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" ] : "" ) } ` : "" : B ` ${ 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" ] : "" ) } ` }
2022-03-27 16:42:11 +00:00
` ))}
` }
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e [ "::type" ] && e [ "::type" ] . includes ( "xxx-of" ) ? "" : B ` <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"),B `
< div class = "tr primitive" title = "${A?" Deprecated ":" "}" >
< div class = "td key ${A}" style = 'min-width:${u}px' >
$ { A ? B ` <span style='color:var(--red);'>✗</span> ` : "" }
$ { c . endsWith ( "*" ) ? B ` <span class="key-label"> ${ c . substring ( 0 , c . length - 1 ) } </span><span style='color:var(--red);'>*</span>: ` : n . startsWith ( "::OPTION" ) ? B ` <span class='key-label xxx-of-key'> ${ c } </span><span class="xxx-of-descr"> ${ p } </span> ` : B ` <span class="key-label"> ${ c } :</span> ` }
2022-03-27 16:42:11 +00:00
< span class = "${E}" title = "${T}" >
$ { "array" === t ? ` [ ${ g } ] ` : ` ${ g } ` }
$ { O }
< / s p a n >
< / d i v >
< div class = 'td key-descr' >
2022-06-06 20:13:19 +00:00
$ { "array" === t ? B ` <span class="m-markdown-small"> ${ HP ( qe ( a ) ) } </span> ` : "" }
$ { k ? B ` <span class="m-markdown-small">
$ { HP ( qe ( ` ${ S ? ` ** ${ S } :** ` : "" } ${ k } ${ b || x || w || $ ? '<span class="more-content">⤵</span>' : "" } ` ) ) }
< / s p a n > ` : S ? B ` $ { S } $ { b | | x | | w | | $ ? B ` < s p a n c l a s s = " m o r e - c o n t e n t " > ⤵ < / s p a n > ` : " " } ` : " " }
$ { b ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span> ${ b } </div> ` : "" }
$ { x ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span> ${ x } </div> ` : "" }
$ { w ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span> ${ w } </div> ` : "" }
$ { $ ? B ` <div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span> ${ $ } </div> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
` }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=B ` $ { this . value . filter ( ( e => "" !== e . trim ( ) ) ) . map ( ( e => B ` <span class='tag'> ${ e } </span> ` ) ) } ` ),B `
2022-03-27 16:42:11 +00:00
< 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||" "}" >
< / d i v >
` }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 : 1 px solid var ( -- border - color ) ;
cursor : text ;
overflow : hidden ;
background : var ( -- input - bg ) ;
}
. tag , . editor {
padding : 3 px ;
margin : 2 px ;
}
. tag {
border : 1 px 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 : 1 px solid transparent ;
color : var ( -- fg ) ;
min - width : 60 px ;
outline : none ;
line - height : inherit ;
font - family : inherit ;
background : transparent ;
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
}
. editor : : placeholder {
color : var ( -- placeholder - color ) ;
opacity : 1 ;
}
2022-06-06 20:13:19 +00:00
` ]}});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"},useSummaryToListExamples:{type:String,attribute:"use-summary-to-list-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"},schemaHideWriteOnly:{type:String,attribute:"schema-hide-write-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 `
2022-03-27 16:42:11 +00:00
* , * : before , * : after { box - sizing : border - box ; }
. read - mode {
margin - top : 24 px ;
}
. param - name ,
. param - type {
margin : 1 px 0 ;
text - align : right ;
line - height : var ( -- font - size - small ) ;
}
2022-06-06 20:13:19 +00:00
. param - name {
2022-03-27 16:42:11 +00:00
color : var ( -- fg ) ;
font - family : var ( -- font - mono ) ;
}
. param - name . deprecated {
2022-06-06 20:13:19 +00:00
color : var ( -- red ) ;
2022-03-27 16:42:11 +00:00
}
. param - type {
color : var ( -- light - fg ) ;
font - family : var ( -- font - regular ) ;
}
. param - constraint {
min - width : 100 px ;
}
. param - constraint : empty {
display : none ;
}
. top - gap { margin - top : 24 px ; }
. textarea {
min - height : 220 px ;
padding : 5 px ;
resize : vertical ;
direction : ltr ;
}
. example : first - child {
margin - top : - 9 px ;
}
. 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 : 16 px ;
color : var ( -- red ) ;
outline : none ;
border : none ;
background : none ;
cursor : pointer ;
}
. v - tab - btn {
font - size : var ( -- smal - font - size ) ;
height : 24 px ;
border : none ;
background : none ;
opacity : 0.3 ;
cursor : pointer ;
padding : 4 px 8 px ;
}
. v - tab - btn . active {
font - weight : bold ;
background : var ( -- bg ) ;
opacity : 1 ;
}
@ media only screen and ( min - width : 768 px ) {
. textarea {
padding : 8 px ;
}
}
@ media only screen and ( max - width : 470 px ) {
. hide - in - small - screen {
display : none ;
}
}
2022-06-06 20:13:19 +00:00
` ,et]}render(){return B `
2022-03-27 16:42:11 +00:00
< 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" }
< / d i v >
< 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" ) ) ) }
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowTry ? "" : B ` ${ this . apiCallTemplate ( ) } ` }
2022-03-27 16:42:11 +00:00
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
` }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 B `
$ { r . length > 0 ? B ` <span style="font-weight:bold">Example: </span>
$ { r . map ( ( ( r , n ) => { var a , o , i ; return B `
2022-03-27 16:42:11 +00:00
$ { 0 === n ? "" : "┃" }
$ { "array" === t ? "[" : "" }
< a part = "anchor anchor-param-example" class = "${" true "===this.allowTry?" ":" inactive - link "}"
data - example - type = "${" array "===t?t:" string "}"
2022-06-06 20:13:19 +00:00
data - example = "${r.value&&Array.isArray(r.value)?null===(a=r.value)||void 0===a?void 0:a.join(" ~ | ~ "):r.value||" "}"
2022-03-27 16:42:11 +00:00
@ 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)}}"
2022-06-06 20:13:19 +00:00
>
$ { "true" === this . useSummaryToListExamples ? r . description || r . summary || ( r . value && Array . isArray ( r . value ) ? null === ( o = r . value ) || void 0 === o ? void 0 : o . join ( ", " ) : r . value || "" ) : r . value && Array . isArray ( r . value ) ? null === ( i = r . value ) || void 0 === i ? void 0 : i . join ( ", " ) : r . value || "" }
< / a >
2022-03-27 16:42:11 +00:00
$ { "array" === t ? "] " : "" }
` }))}
2022-06-06 20:13:19 +00:00
` :""} ` } 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 , a , o ] = 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 : a && ( l = a ) , "boolean" == typeof r . explode && ( c = r . explode ) , "boolean" == typeof r . allowReserved && ( p = r . allowReserved ) ) ; const u = yR ( r . examples || mR ( r . example ) || mR ( null == o ? void 0 : o . example ) || ( null == o ? void 0 : o . examples ) || i . examples || mR ( i . example ) , i . type ) ; u . exampleVal || "object" !== i . type || ( u . exampleVal = ER ( t , a || "json" , "" , "" , ! ( this . schemaHideReadOnly && ( this . schemaHideReadOnly . includes ( this . method ) || "true" === this . schemaHideReadOnly ) ) , ! ( this . schemaHideWriteOnly && ( this . schemaHideWriteOnly . includes ( this . method ) || "true" === this . schemaHideWriteOnly ) ) , "text" , ! 1 ) [ 0 ] . exampleValue ) ; const d = "read focused" . includes ( this . renderStyle ) ? "200px" : "160px" ; n . push ( B `
< tr title = "${r.deprecated?" Deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
< td rowspan = "${" true "===this.allowTry?" 1 ":" 2 "}" style = "width:${d}; min-width:100px;" >
2022-06-06 20:13:19 +00:00
< div class = "param-name ${r.deprecated?" deprecated ":" "}" >
$ { r . deprecated ? B ` <span style='color:var(--red);'>✗</span> ` : "" }
$ { r . required ? B ` <span style='color:var(--red)'>*</span> ` : "" }
$ { r . name }
2022-03-27 16:42:11 +00:00
< / d i v >
< div class = "param-type" >
$ { "array" === i . type ? ` ${ i . arrayType } ` : ` ${ i . format ? i . format : i . type } ` }
< / d i v >
< / t d >
2022-06-06 20:13:19 +00:00
$ { "true" === this . allowTry ? B `
< td style = "min-width:100px;" colspan = "${i.default||i.constrain||i.allowedValues||i.pattern?" 1 ":" 2 "}" >
$ { "array" === i . type ? B `
2022-03-27 16:42:11 +00:00
< 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}"
>
2022-06-06 20:13:19 +00:00
< / t a g - i n p u t > ` : " o b j e c t " = = = i . t y p e ? B `
2022-03-27 16:42:11 +00:00
< 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 < / b u t t o n >
< button class = "tab-btn ${" example "!==this.activeParameterSchemaTabs[r.name]?" active ":" "}" data - tab = 'schema' > SCHEMA < / b u t t o n >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { "example" === this . activeParameterSchemaTabs [ r . name ] ? B ` <div class="tab-content col">
2022-03-27 16:42:11 +00:00
< 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)?" 180 px ":" 120 px "};"
> < / t e x t a r e a >
2022-06-06 20:13:19 +00:00
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
< 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)}"
2022-06-06 20:13:19 +00:00
schema - hide - write - only = "${this.schemaHideWriteOnly.includes(this.method)}"
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 "
2022-03-27 16:42:11 +00:00
> < / s c h e m a - t r e e >
< / d i v > ` }
2022-06-06 20:13:19 +00:00
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
< 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}"
2022-06-06 20:13:19 +00:00
data - x - fill - example = "${r[" x - fill - example "]||" yes "}"
2022-03-27 16:42:11 +00:00
data - array = "false"
2022-06-06 20:13:19 +00:00
. value = "${" no "===r[" x - fill - example "]?" ":dR(" true "===this.fillRequestFieldsWithExample?u.exampleVal:" ")}"
2022-03-27 16:42:11 +00:00
/ > ` }
< / t d > ` : " " }
2022-06-06 20:13:19 +00:00
$ { i . default || i . constrain || i . allowedValues || i . pattern ? B `
2022-03-27 16:42:11 +00:00
< td colspan = "${" true "===this.allowTry?" 1 ":" 2 "}" >
< div class = "param-constraint" >
2022-06-06 20:13:19 +00:00
$ { i . default ? B ` <span style="font-weight:bold">Default: </span> ${ i . default } <br/> ` : "" }
$ { i . pattern ? B ` <span style="font-weight:bold">Pattern: </span> ${ i . pattern } <br/> ` : "" }
$ { i . constrain ? B ` ${ i . constrain } <br/> ` : "" }
$ { i . allowedValues && i . allowedValues . split ( "┃" ) . map ( ( ( e , t ) => B `
$ { t > 0 ? "┃" : B ` <span style="font-weight:bold">Allowed: </span> ` }
$ { B `
2022-03-27 16:42:11 +00:00
< 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 > ` } ` ) ) }
< / d i v >
2022-06-06 20:13:19 +00:00
< / t d > ` : B ` < t d > < / t d > ` }
2022-03-27 16:42:11 +00:00
< / t r >
< tr >
2022-06-06 20:13:19 +00:00
$ { "true" === this . allowTry ? B ` <td style="border:none"> </td> ` : "" }
< td colspan = "2" style = "border:none" >
2022-03-27 16:42:11 +00:00
< span class = "m-markdown-small" > $ { HP ( qe ( r . description || "" ) ) } < / s p a n >
$ { this . exampleListTemplate . call ( this , r . name , i . type , u . exampleList ) }
< / t d >
< / t r >
2022-06-06 20:13:19 +00:00
` )}return B `
2022-03-27 16:42:11 +00:00
< div class = "table-title top-gap" > $ { r } < / d i v >
< div style = "display:block; overflow-x:auto; max-width:100%;" >
< table class = "m-table" style = "width:100%; word-break:break-word;" >
$ { n }
< / t a b l e >
2022-06-06 20:13:19 +00:00
< / d i v > ` } r e s e t R e q u e s t B o d y S e l e c t i o n ( ) { t h i s . s e l e c t e d R e q u e s t B o d y T y p e = " " , t h i s . s e l e c t e d R e q u e s t B o d y E x a m p l e = " " , t h i s . c l e a r R e s p o n s e D a t a ( ) } o n S e l e c t E x a m p l e ( e ) { t h i s . s e l e c t e d R e q u e s t B o d y E x a m p l e = e . t a r g e t . v a l u e ; c o n s t t = e . t a r g e t ; w i n d o w . s e t T i m e o u t ( ( e = > { c o n s t t = e . c l o s e s t ( " . e x a m p l e - p a n e l " ) . q u e r y S e l e c t o r ( " . r e q u e s t - b o d y - p a r a m " ) ; e . c l o s e s t ( " . e x a m p l e - p a n e l " ) . q u e r y S e l e c t o r ( " . r e q u e s t - b o d y - p a r a m - u s e r - i n p u t " ) . v a l u e = t . i n n e r T e x t } ) , 0 , t ) } o n M i m e T y p e C h a n g e ( e ) { t h i s . s e l e c t e d R e q u e s t B o d y T y p e = e . t a r g e t . v a l u e ; c o n s t t = e . t a r g e t ; t h i s . s e l e c t e d R e q u e s t B o d y E x a m p l e = " " , w i n d o w . s e t T i m e o u t ( ( e = > { c o n s t t = e . c l o s e s t ( " . r e q u e s t - b o d y - c o n t a i n e r " ) . q u e r y S e l e c t o r ( " . r e q u e s t - b o d y - p a r a m " ) ; i f ( t ) { e . c l o s e s t ( " . r e q u e s t - b o d y - c o n t a i n e r " ) . q u e r y S e l e c t o r ( " . r e q u e s t - b o d y - p a r a m - u s e r - i n p u t " ) . v a l u e = t . i n n e r T e x t } } ) , 0 , t ) } r e q u e s t B o d y T e m p l a t e ( ) { i f ( ! t h i s . r e q u e s t _ b o d y ) r e t u r n " " ; i f ( 0 = = = O b j e c t . k e y s ( t h i s . r e q u e s t _ b o d y ) . l e n g t h ) r e t u r n " " ; l e t e = " " , t = " " , r = " " , n = " " , a = " " ; c o n s t o = [ ] , { c o n t e n t : i } = t h i s . r e q u e s t _ b o d y ; f o r ( c o n s t e i n i ) o . p u s h ( { m i m e T y p e : e , s c h e m a : i [ e ] . s c h e m a , e x a m p l e : i [ e ] . e x a m p l e , e x a m p l e s : i [ e ] . e x a m p l e s } ) , t h i s . s e l e c t e d R e q u e s t B o d y T y p e | | ( t h i s . s e l e c t e d R e q u e s t B o d y T y p e = e ) ; r e t u r n e = 1 = = = o . l e n g t h ? " " : B `
2022-03-27 16:42:11 +00:00
< select style = "min-width:100px; max-width:100%; margin-bottom:-1px;" @ change = '${e=>this.onMimeTypeChange(e)}' >
2022-06-06 20:13:19 +00:00
$ { o . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< option value = '${e.mimeType}' ? selected = '${e.mimeType===this.selectedRequestBodyType}' >
$ { e . mimeType }
< / o p t i o n > ` ) ) }
< / s e l e c t >
2022-06-06 20:13:19 +00:00
` ,o.forEach((e=>{let o,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,!(this.schemaHideReadOnly&&(this.schemaHideReadOnly.includes(this.method)||"true"===this.schemaHideReadOnly)),!(this.schemaHideWriteOnly&&(this.schemaHideWriteOnly.includes(this.method)||"true"===this.schemaHideWriteOnly)),"text",!1),this.selectedRequestBodyExample||(this.selectedRequestBodyExample=i.length>0?i[0].exampleId:""),a=B `
$ { a }
2022-03-27 16:42:11 +00:00
< div class = 'example-panel border-top pad-top-8' >
2022-06-06 20:13:19 +00:00
$ { 1 === i . length ? "" : B `
2022-03-27 16:42:11 +00:00
< select style = "min-width:100px; max-width:100%; margin-bottom:-1px;" @ change = '${e=>this.onSelectExample(e)}' >
2022-06-06 20:13:19 +00:00
$ { i . map ( ( e => B ` <option value=" ${ e . exampleId } " ?selected= ${ e . exampleId === this . selectedRequestBodyExample } >
2022-03-27 16:42:11 +00:00
$ { e . exampleSummary . length > 80 ? e . exampleId : e . exampleSummary ? e . exampleSummary : e . exampleId }
< / o p t i o n > ` ) ) }
< / s e l e c t >
` }
2022-06-06 20:13:19 +00:00
$ { i . filter ( ( e => e . exampleId === this . selectedRequestBodyExample ) ) . map ( ( t => B `
2022-03-27 16:42:11 +00:00
< div class = "example ${t.exampleId===this.selectedRequestBodyExample?" example - selected ":" "}" data - example = '${t.exampleId}' >
2022-06-06 20:13:19 +00:00
$ { t . exampleSummary && t . exampleSummary . length > 80 ? B ` <div style="padding: 4px 0"> ${ t . exampleSummary } </div> ` : "" }
$ { t . exampleDescription ? B ` <div class="m-markdown-small" style="padding: 4px 0"> ${ HP ( qe ( t . exampleDescription || "" ) ) } </div> ` : "" }
2022-03-27 16:42:11 +00:00
<!-- 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 ) } < / p r e >
<!-- 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):" "}"
> < / t e x t a r e a >
< / d i v >
` ))}
< / d i v >
2022-06-06 20:13:19 +00:00
` );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,!(this.schemaHideReadOnly&&(this.schemaHideReadOnly.includes(this.method)||"true"===this.schemaHideReadOnly)),!(this.schemaHideWriteOnly&&(this.schemaHideWriteOnly.includes(this.method)||"true"===this.schemaHideWriteOnly)),"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=B `
2022-03-27 16:42:11 +00:00
< 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" / >
< / d i v >
2022-06-06 20:13:19 +00:00
` );(e.mimeType.includes("json")||e.mimeType.includes("xml")||e.mimeType.includes("text")||this.selectedRequestBodyType.includes("jose"))&&(o=AR(e.schema,{}),"table"===this.schemaStyle?n=B `
2022-03-27 16:42:11 +00:00
$ { n }
< schema - table
class = '${e.mimeType.substring(e.mimeType.indexOf("/")+1)}'
style = 'display: ${this.selectedRequestBodyType===e.mimeType?"block":"none"};'
2022-06-06 20:13:19 +00:00
. data = '${o}'
2022-03-27 16:42:11 +00:00
schema - expand - level = "${this.schemaExpandLevel}"
schema - description - expanded = "${this.schemaDescriptionExpanded}"
allow - schema - description - expand - toggle = "${this.allowSchemaDescriptionExpandToggle}" ,
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${this.schemaHideReadOnly}"
schema - hide - write - only = "${this.schemaHideWriteOnly}"
exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
2022-03-27 16:42:11 +00:00
> < / s c h e m a - t a b l e >
2022-06-06 20:13:19 +00:00
` :"tree"===this.schemaStyle&&(n=B `
2022-03-27 16:42:11 +00:00
$ { n }
< schema - tree
class = "${e.mimeType.substring(e.mimeType.indexOf(" / ")+1)}"
style = "display: ${this.selectedRequestBodyType===e.mimeType?" block ":" none "};"
2022-06-06 20:13:19 +00:00
. data = "${o}"
2022-03-27 16:42:11 +00:00
schema - expand - level = "${this.schemaExpandLevel}"
schema - description - expanded = "${this.schemaDescriptionExpanded}"
allow - schema - description - expand - toggle = "${this.allowSchemaDescriptionExpandToggle}" ,
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${this.schemaHideReadOnly}"
schema - hide - write - only = "${this.schemaHideWriteOnly}"
exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
2022-03-27 16:42:11 +00:00
> < / s c h e m a - t r e e >
2022-06-06 20:13:19 +00:00
` ))})),B `
2022-03-27 16:42:11 +00:00
< div class = 'request-body-container' data - selected - request - body - type = "${this.selectedRequestBodyType}" >
< div class = "table-title top-gap row" >
2022-06-06 20:13:19 +00:00
REQUEST BODY $ { this . request _body . required ? B ` <span class="mono-font" style='color:var(--red)'>*</span> ` : "" }
2022-03-27 16:42:11 +00:00
< span style = "font-weight:normal; margin-left:5px" > $ { this . selectedRequestBodyType } < / s p a n >
< span style = "flex:1" > < / s p a n >
$ { e }
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . request _body . description ? B ` <div class="m-markdown" style="margin-bottom:12px"> ${ HP ( qe ( this . request _body . description ) ) } </div> ` : "" }
2022-03-27 16:42:11 +00:00
2022-06-06 20:13:19 +00:00
$ { this . selectedRequestBodyType . includes ( "json" ) || this . selectedRequestBodyType . includes ( "xml" ) || this . selectedRequestBodyType . includes ( "text" ) || this . selectedRequestBodyType . includes ( "jose" ) ? B `
2022-03-27 16:42:11 +00:00
< 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 < / b u t t o n >
< button class = "tab-btn ${" example "!==this.activeSchemaTab?" active ":" "}" data - tab = 'schema' > SCHEMA < / b u t t o n >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { "example" === this . activeSchemaTab ? B ` <div class="tab-content col"> ${ a } </div> ` : B ` <div class="tab-content col"> ${ n } </div> ` }
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
$ { t }
$ { r } ` }
< / d i v >
2022-06-06 20:13:19 +00:00
` }formDataParamAsObjectTemplate(e,t,r){var n;const a=AR(t,{}),o=ER(t,"json",t.examples,t.example,!(this.schemaHideReadOnly&&(this.schemaHideReadOnly.includes(this.method)||"true"===this.schemaHideReadOnly)),!(this.schemaHideWriteOnly&&(this.schemaHideWriteOnly.includes(this.method)||"true"===this.schemaHideWriteOnly)),"text",!1);return B `
2022-03-27 16:42:11 +00:00
< 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)" >
2022-06-06 20:13:19 +00:00
< 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 } "]`),a=[...r.querySelectorAll(`.v-tab-btn:not([data-tab=" $ { t } "])`)],o=r.querySelector(`.tab-content[data-tab=" $ { t } "]`),i=[...r.querySelectorAll(`.tab-content:not([data-tab=" $ { t } "])`)];n.classList.add(" active "),o.style.display=" block ",a.forEach((e=>{e.classList.remove(" active ")})),i.forEach((e=>{e.style.display=" none "}))}}" button "===e.target.tagName.toLowerCase()&&(this.activeSchemaTab=e.target.dataset.tab)}}" >
2022-03-27 16:42:11 +00:00
< button class = "v-tab-btn ${" example "===this.activeSchemaTab?" active ":" "}" data - tab = 'example' > EXAMPLE < / b u t t o n >
< button class = "v-tab-btn ${" example "!==this.activeSchemaTab?" active ":" "}" data - tab = 'schema' > SCHEMA < / b u t t o n >
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { B `
2022-03-27 16:42:11 +00:00
< 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}"
2022-06-06 20:13:19 +00:00
data - example = "${(null===(n=o[0])||void 0===n?void 0:n.exampleValue)||" "}"
. textContent = "${" true "===this.fillRequestFieldsWithExample?o[0].exampleValue:" "}"
2022-03-27 16:42:11 +00:00
spellcheck = "false"
> < / t e x t a r e a >
<!-- This textarea ( hidden ) is to store the original example value , in focused mode on navbar change it is used to update the example text -- >
2022-06-06 20:13:19 +00:00
< textarea data - pname = "hidden-${e}" data - ptype = "${r.includes(" form - urlencode ")?" hidden - form - urlencode ":" hidden - form - data "}" class = "is-hidden" style = "display:none" > $ { o [ 0 ] . exampleValue } < / t e x t a r e a >
2022-03-27 16:42:11 +00:00
< / d i v > ` }
2022-06-06 20:13:19 +00:00
$ { B `
2022-03-27 16:42:11 +00:00
< div class = "tab-content col" data - tab = 'schema' style = "display:${" example "!==this.activeSchemaTab?" block ":" none "}; padding-left:5px; width:100%;" >
< schema - tree
2022-06-06 20:13:19 +00:00
. data = '${a}'
2022-03-27 16:42:11 +00:00
schema - expand - level = "${this.schemaExpandLevel}"
schema - description - expanded = "${this.schemaDescriptionExpanded}"
allow - schema - description - expand - toggle = "${this.allowSchemaDescriptionExpandToggle}" ,
> < / s c h e m a - t r e e >
< / d i v > ` }
< / d i v >
2022-06-06 20:13:19 +00:00
` }formDataTemplate(e,t,r=""){const n=[];if(e.properties){for(const r in e.properties){var a,o;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(B `
< tr title = "${i.deprecated?" Deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
< td style = "width:${p}; min-width:100px;" >
< div class = "param-name ${i.deprecated?" deprecated ":" "}" >
2022-06-06 20:13:19 +00:00
$ { r } $ { null !== ( a = e . required ) && void 0 !== a && a . includes ( r ) || i . required ? B ` <span style='color:var(--red);'>*</span> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
< div class = "param-type" > $ { c . type } < / d i v >
< / t d >
< td
style = "${" object "===l?" width : 100 % ; padding : 0 ; ":" true "===this.allowTry?" ":" display : none ; "} min-width:100px;"
colspan = "${" object "===l?2:1}" >
2022-06-06 20:13:19 +00:00
$ { "array" === l ? "binary" === ( null === ( o = i . items ) || void 0 === o ? void 0 : o . format ) ? B `
2022-03-27 16:42:11 +00:00
< 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" > & # x2715 ; < / b u t t o n >
< / d i v >
< button class = "m-btn primary file-input-add-btn" part = "btn btn-fill" style = "margin:2px 25px 0 0; padding:2px 6px;" > ADD < / b u t t o n >
< / d i v >
2022-06-06 20:13:19 +00:00
` :B `
2022-03-27 16:42:11 +00:00
< 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]}"
>
< / t a g - i n p u t >
2022-06-06 20:13:19 +00:00
` :B `
$ { "object" === l ? this . formDataParamAsObjectTemplate . call ( this , r , i , t ) : B `
$ { "true" === this . allowTry ? B ` <input
2022-03-27 16:42:11 +00:00
. 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"
/ > ` : " " }
` } ` }
< / t d >
2022-06-06 20:13:19 +00:00
$ { "object" === l ? "" : B `
2022-03-27 16:42:11 +00:00
< td >
2022-06-06 20:13:19 +00:00
$ { c . default || c . constrain || c . allowedValues || c . pattern ? B `
2022-03-27 16:42:11 +00:00
< div class = "param-constraint" >
2022-06-06 20:13:19 +00:00
$ { c . default ? B ` <span style="font-weight:bold">Default: </span> ${ c . default } <br/> ` : "" }
$ { c . pattern ? B ` <span style="font-weight:bold">Pattern: </span> ${ c . pattern } <br/> ` : "" }
$ { c . constrain ? B ` ${ c . constrain } <br/> ` : "" }
$ { c . allowedValues && c . allowedValues . split ( "┃" ) . map ( ( ( e , t ) => B `
$ { t > 0 ? "┃" : B ` <span style="font-weight:bold">Allowed: </span> ` }
$ { B `
2022-03-27 16:42:11 +00:00
< 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 > ` } ` ) ) }
< / d i v > ` : " " }
< / t d > ` }
< / t r >
2022-06-06 20:13:19 +00:00
$ { "object" === l ? "" : B `
2022-03-27 16:42:11 +00:00
< tr >
< td style = "border:none" > < / t d >
< td colspan = "2" style = "border:none; margin-top:0; padding:0 5px 8px 5px;" >
< span class = "m-markdown-small" > $ { HP ( qe ( i . description || "" ) ) } < / s p a n >
$ { this . exampleListTemplate . call ( this , r , c . type , u . exampleList ) }
< / t d >
< / t r >
2022-06-06 20:13:19 +00:00
` } ` ) } return B `
2022-03-27 16:42:11 +00:00
< table style = "width:100%;" class = "m-table" >
$ { n }
< / t a b l e >
2022-06-06 20:13:19 +00:00
` }return B `
2022-03-27 16:42:11 +00:00
< 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%"
> < / t e x t a r e a >
2022-06-06 20:13:19 +00:00
$ { e . description ? B ` <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 B `
2022-03-27 16:42:11 +00:00
< div class = "row" style = "font-size:var(--font-size-small); margin:5px 0" >
< div class = "response-message ${this.responseStatus}" > Response Status : $ { this . responseMessage } < / d i v >
< div style = "flex:1" > < / d i v >
< button class = "m-btn" part = "btn btn-outline btn-clear-response" @ click = "${this.clearResponseData}" > CLEAR RESPONSE < / b u t t o n >
< / d i v >
< 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 < / b u t t o n >
< button class = "tab-btn ${" headers "===this.activeResponseTab?" active ":" "}" data - tab = 'headers' > RESPONSE HEADERS < / b u t t o n >
< button class = "tab-btn ${" curl "===this.activeResponseTab?" active ":" "}" data - tab = 'curl' > CURL < / b u t t o n >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . responseIsBlob ? B `
2022-03-27 16:42:11 +00:00
< 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
< / b u t t o n >
2022-06-06 20:13:19 +00:00
$ { "view" === this . responseBlobType ? B ` <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> ` : "" }
< / d i v > ` : B `
< 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=>{at(this.responseText,e)}}' part = "btn btn-fill" > Copy < / b u t t o n >
< pre style = "white-space:pre; min-height:50px; height:400px; resize:vertical; overflow:auto" > $ { e ? B ` <code> ${ HP ( He ( ) . highlight ( this . responseText , He ( ) . languages [ e ] , e ) ) } </code> ` : ` ${ this . responseText } ` } < / p r e >
2022-03-27 16:42:11 +00:00
< / d i v > ` }
2022-06-06 20:13:19 +00:00
< 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=>{at(this.responseHeaders,e)}}' part = "btn btn-fill" > Copy < / b u t t o n >
2022-03-27 16:42:11 +00:00
< pre style = "white-space:pre" > < code > $ { HP ( He ( ) . highlight ( this . responseHeaders , He ( ) . languages . css , "css" ) ) } < / c o d e > < / p r e >
< / d i v >
2022-06-06 20:13:19 +00:00
< 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=>{at(this.curlSyntax.replace(/\\$/,""),e)}}' part = "btn btn-fill" > Copy < / b u t t o n >
2022-03-27 16:42:11 +00:00
< pre style = "white-space:pre" > < code > $ { HP ( He ( ) . highlight ( this . curlSyntax . trim ( ) . replace ( /\\$/ , "" ) , He ( ) . languages . shell , "shell" ) ) } < / c o d e > < / p r e >
< / d i v >
2022-06-06 20:13:19 +00:00
< / d i v > ` } a p i C a l l T e m p l a t e ( ) { v a r e , t ; l e t r = " " ; t h i s . s e r v e r s & & t h i s . s e r v e r s . l e n g t h > 0 & & ( r = B `
2022-03-27 16:42:11 +00:00
< select style = "min-width:100px;" @ change = '${e=>{this.serverUrl=e.target.value}}' >
2022-06-06 20:13:19 +00:00
$ { this . servers . map ( ( e => B ` <option value = " ${ e . url } "> ${ e . url } - ${ e . description } </option> ` ) ) }
2022-03-27 16:42:11 +00:00
< / s e l e c t >
2022-06-06 20:13:19 +00:00
` );const n=B `
2022-03-27 16:42:11 +00:00
< div style = "display:flex; flex-direction:column;" >
$ { r }
2022-06-06 20:13:19 +00:00
$ { this . serverUrl ? B `
2022-03-27 16:42:11 +00:00
< div style = "display:flex; align-items:baseline;" >
< div style = "font-weight:bold; padding-right:5px;" > API Server < / d i v >
< span class = "gray-text" > $ { this . serverUrl } < / s p a n >
< / d i v >
` :""}
< / d i v >
2022-06-06 20:13:19 +00:00
` ;return B `
2022-03-27 16:42:11 +00:00
< 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 }
< / d i v >
< div style = "display:flex;" >
< div style = "font-weight:bold; padding-right:5px;" > Authentication < / d i v >
2022-06-06 20:13:19 +00:00
$ { ( null === ( e = this . security ) || void 0 === e ? void 0 : e . length ) > 0 ? B `
$ { this . api _keys . length > 0 ? B ` <div style="color:var(--blue); overflow:hidden;">
2022-03-27 16:42:11 +00:00
$ { 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 ` }
2022-06-06 20:13:19 +00:00
< / d i v > ` : B ` < d i v c l a s s = " g r a y - t e x t " > R e q u i r e d < s p a n s t y l e = " c o l o r : v a r ( - - r e d ) " > ( N o n e A p p l i e d ) < / s p a n > ` } ` : B ` < s p a n c l a s s = " g r a y - t e x t " > N o t R e q u i r e d < / s p a n > ` }
2022-03-27 16:42:11 +00:00
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . parameters . length > 0 || this . request _body ? B `
2022-03-27 16:42:11 +00:00
< 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
< / b u t t o n >
< button class = "m-btn thin-border" part = "btn btn-outline btn-clear" style = "margin-right:5px;" @ click = "${this.onClearRequestData}" >
CLEAR
< / b u t t o n > ` : " " }
< button class = "m-btn primary thin-border" part = "btn btn-try" @ click = "${this.onTryClick}" > TRY < / b u t t o n >
< / d i v >
$ { "" === this . responseMessage ? "" : this . apiResponseTabTemplate ( ) }
2022-06-06 20:13:19 +00:00
` }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,a,o="",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 a=e.value&&Array.isArray(e.value)?e.value:[];a=Array.isArray(a)?a.filter((e=>""!==e)):[],a.length>0&&("spaceDelimited"===r?t.append(e.dataset.pname,a.join(" ").replace(/^ \s | \s $ /g,"")):"pipeDelimited"===r?t.append(e.dataset.pname,a.join("|").replace(/^ \| | \| $ /g,"")):"true"===n?a.forEach((r=>{t.append(e.dataset.pname,r)})):t.append(e.dataset.pname,a.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:a}=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"===a?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")){a=new URL(n,window.location.href).href}else a=n;o= ` curl - X $ { this . method . toUpperCase ( ) } "${a}" \ \ \ 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,a=!0;if(t)try{n=JSON.parse(t)}catch(e){a=!1,console.warn("RapiDoc: Invalid JSON provided",e)}else a=!1;if(a){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
2022-03-27 16:42:11 +00:00
. table {
font - size : var ( -- font - size - small ) ;
text - align : left ;
line - height : calc ( var ( -- font - size - small ) + 6 px ) ;
}
. table . tr {
width : calc ( 100 % - 5 px ) ;
padding : 0 0 0 5 px ;
border - bottom : 1 px dotted var ( -- light - border - color ) ;
}
. table . td {
padding : 4 px 0 ;
}
. table . key {
width : 240 px ;
}
. key . deprecated . key - label {
2022-06-06 20:13:19 +00:00
color : var ( -- red ) ;
2022-03-27 16:42:11 +00:00
}
. table . key - type {
white - space : normal ;
width : 150 px ;
}
. collapsed - descr . tr {
max - height : calc ( var ( -- font - size - small ) + var ( -- font - size - small ) + 4 px ) ;
}
. obj - toggle {
padding : 0 2 px ;
border - radius : 2 px ;
border : 1 px solid transparent ;
display : inline - block ;
margin - left : - 16 px ;
color : var ( -- primary - color ) ;
cursor : pointer ;
font - size : calc ( var ( -- font - size - small ) + 4 px ) ;
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 ;
2022-06-06 20:13:19 +00:00
} ` ,et]}render(){var e,t,r;return B `
2022-03-27 16:42:11 +00:00
< 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" ] ) || "" } < / d i v >
2022-06-06 20:13:19 +00:00
$ { "true" === this . allowSchemaDescriptionExpandToggle ? B `
2022-03-27 16:42:11 +00:00
< div style = "flex:1" > < / d i v >
2022-06-06 20:13:19 +00:00
< div part = "schema-multiline-toggle" class = 'toolbar-item' @ click = '${()=>{this.schemaDescriptionExpanded="true"===this.schemaDescriptionExpanded?"false":"true"}}' >
2022-03-27 16:42:11 +00:00
$ { "true" === this . schemaDescriptionExpanded ? "Single line description" : "Multiline description" }
< / d i v >
` :""}
< / d i v >
2022-06-06 20:13:19 +00:00
$ { null !== ( r = this . data ) && void 0 !== r && r [ "::description" ] ? B ` <span part="schema-description" class='m-markdown'> ${ HP ( qe ( this . data [ "::description" ] || "" ) ) } </span> ` : "" }
2022-03-27 16:42:11 +00:00
< 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 < / d i v >
< div class = 'key-type' style = 'font-family:var(--font-regular); font-weight:bold; color:var(--fg);' > Type < / d i v >
< div class = 'key-descr' style = 'font-family:var(--font-regular); font-weight:bold; color:var(--fg);' > Description < / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . data ? B `
2022-03-27 16:42:11 +00:00
$ { this . generateTree ( "array" === this . data [ "::type" ] ? this . data [ "::props" ] : this . data , this . data [ "::type" ] , this . data [ "::array-type" ] ) } ` :""}
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
` }generateTree(e,t="object",r="",n="",a="",o=0,i=0,s=""){var l,c;if("true"===this.schemaHideReadOnly){if("array"===t&&"readonly"===s)return;if(e&&"readonly"===e["::readwrite"])return}if("true"===this.schemaHideWriteOnly){if("array"===t&&"writeonly"===s)return;if(e&&"writeonly"===e["::readwrite"])return}if(!e)return B ` < div class = "null" style = "display:inline;" >
< span style = 'margin-left:${16*(o+1)}px' > & nbsp ; < / s p a n >
< span class = "key-label xxx-of-key" > $ { n . replace ( "::OPTION~" , "" ) } < / s p a n >
$ { "array" === t ? B ` <span class='mono-font'> [ ] </span> ` : "object" === t ? B ` <span class='mono-font'> { } </span> ` : B ` <span class='mono-font'> schema undefined </span> ` }
< / d i v > ` ; c o n s t p = n u l l ! = = ( l = e [ " : : t y p e " ] ) & & v o i d 0 ! = = l & & l . s t a r t s W i t h ( " x x x - o f " ) ? o : o + 1 , u = " x x x - o f - o p t i o n " = = = t | | " x x x - o f - o p t i o n " = = = e [ " : : t y p e " ] | | n . s t a r t s W i t h ( " : : O P T I O N " ) ? i : i + 1 , d = 1 6 * u ; i f ( 0 = = = O b j e c t . k e y s ( e ) . l e n g t h ) r e t u r n B ` < s p a n c l a s s = " t d k e y o b j e c t " s t y l e = ' p a d d i n g - l e f t : $ { d } p x ' > $ { n } < / s p a n > ` ; l e t h = " " , f = " " , m = ! 1 ; i f ( n . s t a r t s W i t h ( " : : O N E ~ O F " ) | | n . s t a r t s W i t h ( " : : A N Y ~ O F " ) ) h = n . r e p l a c e ( " : : " , " " ) . r e p l a c e ( " ~ " , " " ) , m = ! 0 ; e l s e i f ( n . s t a r t s W i t h ( " : : O P T I O N " ) ) { c o n s t e = n . s p l i t ( " ~ " ) ; h = e [ 1 ] , f = e [ 2 ] } e l s e h = n ; l e t y = " " ; i f ( " o b j e c t " = = = e [ " : : t y p e " ] ? y = " a r r a y " = = = t ? " a r r a y o f o b j e c t " : " o b j e c t " : " a r r a y " = = = e [ " : : t y p e " ] & & ( y = " a r r a y " = = = t ? " a r r a y o f a r r a y " + ( " o b j e c t " ! = = r ? ` o f $ { r } ` : " " ) : " a r r a y " ) , " o b j e c t " = = t y p e o f e ) r e t u r n B `
$ { p >= 0 && n ? B `
< div class = 'tr ${p<=this.schemaExpandLevel?"expanded":"collapsed"} ${e["::type"]}' data - obj = '${h}' title = "${e[" : : deprecated "]?" Deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
< div class = "td key ${e[" : : deprecated "]?" deprecated ":" "}" style = 'padding-left:${d}px' >
2022-06-06 20:13:19 +00:00
$ { h || f ? B `
2022-03-27 16:42:11 +00:00
< span
class = 'obj-toggle ${p<this.schemaExpandLevel?"expanded":"collapsed"}'
data - obj = '${h}'
@ click = $ { e => this . toggleObjectExpand ( e , h ) }
>
2022-06-06 20:13:19 +00:00
$ { o < this . schemaExpandLevel ? "-" : "+" }
2022-03-27 16:42:11 +00:00
< / s p a n > ` : " " }
2022-06-06 20:13:19 +00:00
$ { "xxx-of-option" === e [ "::type" ] || "xxx-of-array" === e [ "::type" ] || n . startsWith ( "::OPTION" ) ? B ` <span class="xxx-of-key" style="margin-left:-6px"> ${ h } </span><span class=" ${ m ? "xxx-of-key" : "xxx-of-descr" } "> ${ f } </span> ` : h . endsWith ( "*" ) ? B ` <span class="key-label" style="display:inline-block; margin-left:-6px;"> ${ e [ "::deprecated" ] ? "✗" : "" } ${ h . substring ( 0 , h . length - 1 ) } </span><span style='color:var(--red);'>*</span> ` : B ` <span class="key-label" style="display:inline-block; margin-left:-6px;"> ${ e [ "::deprecated" ] ? "✗" : "" } ${ "::props" === h ? "" : h } </span> ` }
$ { "xxx-of" === e [ "::type" ] && "array" === t ? B ` <span style="color:var(--primary-color)">ARRAY</span> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
< 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" ] ? " 🆆" : "" }
< / d i v >
2022-06-06 20:13:19 +00:00
< div class = 'td key-descr m-markdown-small' style = 'line-height:1.7' > $ { HP ( qe ( a || "" ) ) } < / d i v >
< / d i v > ` : B `
$ { "array" === e [ "::type" ] && "array" === t ? B `
2022-03-27 16:42:11 +00:00
< div class = 'tr' >
< div class = 'td key' > < / d i v >
< div class = 'td key-type' >
$ { r && "object" !== r ? ` ${ t } of ${ r } ` : t }
< / d i v >
< div class = 'td key-descr' > < / d i v >
< / d i v > ` : " " }
` }
< div class = 'object-body' >
2022-06-06 20:13:19 +00:00
$ { Array . isArray ( e ) && e [ 0 ] ? B ` ${ this . generateTree ( e [ 0 ] , "xxx-of-option" , "" , "::ARRAY~OF" , "" , p , u , "" ) } ` : B `
$ { Object . keys ( e ) . map ( ( t => B `
$ { [ "::title" , "::description" , "::type" , "::props" , "::deprecated" , "::array-type" , "::readwrite" ] . includes ( t ) ? "array" === e [ t ] [ "::type" ] || "object" === e [ t ] [ "::type" ] ? B ` ${ 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" ] : "" ) } ` : "" : B ` ${ 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" ] : "" ) } ` }
2022-03-27 16:42:11 +00:00
` ))}
` }
< div >
2022-06-06 20:13:19 +00:00
` ;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?B `
2022-03-27 16:42:11 +00:00
< div class = 'td key-type ${E}' title = "${" readonly "===s?" Read - Only ":" writeonly "===v?" Write - Only ":" "}" >
[ $ { g } ] $ { "readonly" === s ? "🆁" : "writeonly" === s ? "🆆" : "" }
2022-06-06 20:13:19 +00:00
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
< div class = 'td key-type ${E}' title = "${" 🆁 "===v?" Read - Only ":" 🆆 "===v?" Write - Only ":" "}" >
$ { g } $ { v }
2022-06-06 20:13:19 +00:00
< / d i v > ` , B `
< div class = "tr primitive" title = "${A?" Deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
< div class = "td key ${A}" style = 'padding-left:${d}px' >
2022-06-06 20:13:19 +00:00
$ { A ? B ` <span style='color:var(--red);'>✗</span> ` : "" }
$ { null !== ( c = h ) && void 0 !== c && c . endsWith ( "*" ) ? B `
< span class = "key-label" > $ { h . substring ( 0 , h . length - 1 ) } < / s p a n >
< span style = 'color:var(--red);' > * < / s p a n > ` : n . s t a r t s W i t h ( " : : O P T I O N " ) ? B ` < s p a n c l a s s = ' x x x - o f - k e y ' > $ { h } < / s p a n > < s p a n c l a s s = " x x x - o f - d e s c r " > $ { f } < / s p a n > ` : B ` $ { h ? B ` < s p a n c l a s s = " k e y - l a b e l " > $ { h } < / s p a n > ` : B ` < s p a n c l a s s = " x x x - o f - d e s c r " > $ { S } < / s p a n > ` } ` }
2022-03-27 16:42:11 +00:00
< / d i v >
$ { O }
2022-06-06 20:13:19 +00:00
< div class = 'td key-descr' @ click = "${()=>{this.schemaDescriptionExpanded=" true "}}" >
$ { "array" === t ? B ` <span class="m-markdown-small"> ${ HP ( qe ( a ) ) } </span> ` : "" }
$ { k ? B ` <span class="m-markdown-small">
$ { HP ( qe ( ` ${ S ? ` ** ${ S } :** ` : "" } ${ k } ${ b || x || w || $ ? '<span class="more-content">⤵</span>' : "" } ` ) ) }
< / s p a n > ` : S ? B ` $ { S } $ { b | | x | | w | | $ ? B ` < s p a n c l a s s = " m o r e - c o n t e n t " > ⤵ < / s p a n > ` : " " } ` : " " }
$ { b ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${ b } </div> ` : "" }
$ { x ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span> ${ x } </div> ` : "" }
$ { w ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span> ${ w } </div> ` : "" }
$ { $ ? B ` <div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span> ${ $ } </div> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
` }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,a)=> ` < h$ { r } class = "observe-me" id = "${e}--${a.slug(n)}" > $ { t } < / h $ { r } > ` , t } f u n c t i o n j R ( e , t = " " ) { v a r r , n , a ; c o n s t o = n e w S e t ; f o r ( c o n s t t i n e . r e s p o n s e s ) f o r ( c o n s t r i n n u l l = = = ( i = e . r e s p o n s e s [ t ] ) | | v o i d 0 = = = i ? v o i d 0 : i . c o n t e n t ) { v a r i ; o . a d d ( r . t r i m ( ) ) } c o n s t s = [ . . . o ] . j o i n ( " , " ) , l = t h i s . r e s o l v e d S p e c . s e c u r i t y S c h e m e s . f i l t e r ( ( t = > { v a r r ; r e t u r n t . f i n a l K e y V a l u e & & ( n u l l = = = ( r = e . s e c u r i t y ) | | v o i d 0 = = = r ? v o i d 0 : r . s o m e ( ( e = > t . s e c u r i t y S c h e m e I d i n e ) ) ) } ) ) | | [ ] , c = t h i s . r e s o l v e d S p e c . s e c u r i t y S c h e m e s . f i n d ( ( e = > e . s e c u r i t y S c h e m e I d = = = r t & & " - " ! = = e . v a l u e ) ) ; c & & l . p u s h ( c ) ; c o n s t p = e . x C o d e S a m p l e s ? i R . c a l l ( t h i s , e . x C o d e S a m p l e s ) : " " ; r e t u r n B `
$ { "read" === this . renderStyle ? B ` <div class='divider' part="operation-divider"></div> ` : "" }
2022-03-27 16:42:11 +00:00
< div class = 'expanded-endpoint-body observe-me ${e.method} ${e.deprecated?"deprecated":""} ' part = "section-operation ${e.elementId}" id = '${e.elementId}' >
2022-06-06 20:13:19 +00:00
$ { "focused" === this . renderStyle && "General ⦂" !== t ? B ` <h3 class="upper" style="font-weight:bold" part="section-operation-tag"> ${ t } </h3> ` : "" }
$ { e . deprecated ? B ` <div class="bold-text red-text"> DEPRECATED </div> ` : "" }
$ { B `
$ { e . xBadges && ( null === ( r = e . xBadges ) || void 0 === r ? void 0 : r . length ) > 0 ? B `
< div style = "display:flex; flex-wrap:wrap; margin-bottom: -24px; font-size: var(--font-size-small);" >
$ { e . xBadges . map ( ( e => B ` <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> ` ) ) }
< / d i v >
` :""}
< h2 part = "section-operation-summary" > $ { e . shortSummary || ` ${ e . method . toUpperCase ( ) } ${ e . path } ` } < / h 2 >
$ { e . isWebhook ? B ` <span part="section-operation-webhook style="color:var(--primary-color); font-weight:bold; font-size: var(--font-size-regular);"> WEBHOOK </span> ` : B `
< div class = 'mono-font part="section-operation-webhook-method" 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 } < / s p a n >
< span part = "label-operation-path" > $ { e . path } < / s p a n >
< / d i v >
` }
< slot name = "${e.elementId}" > < / s l o t > ` }
$ { e . description ? B ` <div class="m-markdown"> ${ HP ( qe ( e . description ) ) } </div> ` : "" }
$ { oR . 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===(a=n[0])||void 0===a?void 0:a.url)||this.selectedServer.computedUrl}"
fill - request - fields - with - example = "${this.fillRequestFieldsWithExample}"
use - summary - to - list - example = "${this.useSummaryToListExamples}"
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 = "${!e.isWebhook&&this.schemaHideReadOnly}"
schema - hide - write - only = "${!!e.isWebhook&&this.schemaHideWriteOnly}"
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 , schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
> < / a p i - r e q u e s t >
2022-03-27 16:42:11 +00:00
2022-06-06 20:13:19 +00:00
$ { e . callbacks ? sR . call ( this , e . callbacks ) : "" }
2022-03-27 16:42:11 +00:00
2022-06-06 20:13:19 +00:00
< 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 - read - only = "${!!e.isWebhook&&this.schemaHideReadOnly}"
schema - hide - write - only = "${!e.isWebhook&&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 ,
schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
> < / a p i - r e s p o n s e >
< / d i v >
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
` }function IR(){return this.resolvedSpec?B `
$ { this . resolvedSpec . tags . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< section id = "${e.elementId}" part = "section-tag" class = "regular-font section-gap--read-mode observe-me" style = "border-top:1px solid var(--primary-color);" >
2022-06-06 20:13:19 +00:00
< div class = "title tag" part = "section-tag-title label-tag-title" > $ { e . name } < / d i v >
2022-03-27 16:42:11 +00:00
< slot name = "${e.elementId}" > < / s l o t >
< 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> ` ) }
< / d i v >
< / s e c t i o n >
< section class = 'regular-font section-gap--read-mode' part = "section-operations-in-tag" >
$ { e . paths . map ( ( e => jR . call ( this , e , "BBB" ) ) ) }
< / s e c t i o n >
` ))}
2022-06-06 20:13:19 +00:00
` :""}function PR(e){return B `
2022-03-27 16:42:11 +00:00
< div class = 'divider' > < / d i v >
< 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 < / s p a n > < / d i v >
2022-06-06 20:13:19 +00:00
$ { "table" === this . schemaStyle ? B `
2022-03-27 16:42:11 +00:00
< 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}"
2022-06-06 20:13:19 +00:00
exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
> < / s c h e m a - t r e e > ` : B `
2022-03-27 16:42:11 +00:00
< 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}"
2022-06-06 20:13:19 +00:00
exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
2022-03-27 16:42:11 +00:00
> < / s c h e m a - t r e e > ` }
2022-06-06 20:13:19 +00:00
< / d i v > ` } f u n c t i o n R R ( e , t ) { r e t u r n - 1 ! = = e . i d . i n d e x O f ( " s c h e m a s - " ) ? P R . c a l l ( t h i s , e ) : B `
2022-03-27 16:42:11 +00:00
< div class = 'divider' > < / d i v >
< div class = 'expanded-endpoint-body observe-me ${e.name}' id = 'cmp--${e.id}' >
2022-06-06 20:13:19 +00:00
$ { B `
2022-03-27 16:42:11 +00:00
< div style = "font-weight:bold" > $ { e . name } < span style = "color:var(--light-fg); font-size:var(--font-size-small); font-weight:400" > $ { t } < / s p a n > < / d i v >
2022-06-06 20:13:19 +00:00
$ { e . component ? B `
2022-03-27 16:42:11 +00:00
< 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}" > < / j s o n - t r e e >
< / d i v > ` : " " }
` }
< / d i v >
2022-06-06 20:13:19 +00:00
` }function LR(){return this.resolvedSpec?B `
$ { this . resolvedSpec . components . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 } < / d i v >
< div class = "regular-font-size" >
$ { HP ( ` <div class='m-markdown regular-font'> ${ qe ( e . description ? e . description : "" ) } </div> ` ) }
< / d i v >
< / d i v >
< div class = 'regular-font section-gap--read-mode' >
$ { e . subComponents . filter ( ( e => ! 1 !== e . expanded ) ) . map ( ( t => RR . call ( this , t , e . name ) ) ) }
< / d i v >
` ))}
2022-06-06 20:13:19 +00:00
` :""}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 } f u n c t i o n B R ( ) { v a r e , t , r , n ; r e t u r n B `
2022-03-27 16:42:11 +00:00
< section id = "overview" part = "section-overview"
class = "observe-me ${" view "===this.renderStyle?" section - gap ":" section - gap -- read - mode "}" >
2022-06-06 20:13:19 +00:00
$ { null !== ( e = this . resolvedSpec ) && void 0 !== e && e . info ? B `
< div id = "api-title" part = "section-overview-title" style = "font-size:32px" >
2022-03-27 16:42:11 +00:00
$ { this . resolvedSpec . info . title }
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . info . version ? B `
2022-03-27 16:42:11 +00:00
< span style = 'font-size:var(--font-size-small);font-weight:bold' >
$ { this . resolvedSpec . info . version }
< / s p a n > ` : " " }
< / d i v >
< div id = "api-info" style = "font-size:calc(var(--font-size-regular) - 1px); margin-top:8px;" >
2022-06-06 20:13:19 +00:00
$ { null !== ( t = this . resolvedSpec . info . contact ) && void 0 !== t && t . email ? B ` <span> ${ this . resolvedSpec . info . contact . name || "Email" } :
2022-03-27 16:42:11 +00:00
< a href = "mailto:${this.resolvedSpec.info.contact.email}" part = "anchor anchor-overview" > $ { this . resolvedSpec . info . contact . email } < / a >
< / s p a n > ` : " " }
2022-06-06 20:13:19 +00:00
$ { null !== ( r = this . resolvedSpec . info . contact ) && void 0 !== r && r . url ? B ` <span>URL: <a href=" ${ this . resolvedSpec . info . contact . url } " part="anchor anchor-overview"> ${ this . resolvedSpec . info . contact . url } </a></span> ` : "" }
$ { this . resolvedSpec . info . license ? B ` <span>License:
$ { this . resolvedSpec . info . license . url ? B ` <a href=" ${ this . resolvedSpec . info . license . url } " part="anchor anchor-overview"> ${ this . resolvedSpec . info . license . name } </a> ` : this . resolvedSpec . info . license . name } < / s p a n > ` : " " }
$ { this . resolvedSpec . info . termsOfService ? B ` <span><a href=" ${ this . resolvedSpec . info . termsOfService } " part="anchor anchor-overview">Terms of Service</a></span> ` : "" }
$ { this . specUrl && "true" === this . allowSpecFileDownload ? B `
2022-03-27 16:42:11 +00:00
< 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 < / b u t t o n >
2022-06-06 20:13:19 +00:00
$ { null !== ( n = this . specUrl ) && void 0 !== n && n . trim ( ) . toLowerCase ( ) . endsWith ( "json" ) ? B ` <button class="m-btn thin-border" style="width:200px" part="btn btn-outline" @click=' ${ e => { lt ( this . specUrl ) } }'>View OpenAPI spec (New Tab)</button> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v > ` : " " }
< / d i v >
< slot name = "overview" > < / s l o t >
< div id = "api-description" >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . info . description ? B ` ${ HP ( ` \n <div class="m-markdown regular-font"> \n ${ qe ( this . resolvedSpec . info . description , "true" === this . infoDescriptionHeadingsInNavBar ? { renderer : DR ( ) } :void 0)} \n </div> ` ) } ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
` :""}
< / s e c t i o n >
2022-06-06 20:13:19 +00:00
` }function FR(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?B `
< div class = "table-title" > SERVER VARIABLES < / d i v >
2022-03-27 16:42:11 +00:00
< table class = 'm-table' >
2022-06-06 20:13:19 +00:00
$ { Object . entries ( this . selectedServer . variables ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< tr >
< td style = "vertical-align: middle;" > $ { e [ 0 ] } < / t d >
< td >
2022-06-06 20:13:19 +00:00
$ { e [ 1 ] . enum ? B `
2022-03-27 16:42:11 +00:00
< select
data - var = "${e[0]}"
@ input = $ { e => { NR . call ( this , e , this . selectedServer ) } }
>
2022-06-06 20:13:19 +00:00
$ { Object . entries ( e [ 1 ] . enum ) . map ( ( t => e [ 1 ] . default === t [ 1 ] ? B `
2022-03-27 16:42:11 +00:00
< option
selected
label = $ { t [ 1 ] }
value = $ { t [ 1 ] }
2022-06-06 20:13:19 +00:00
/ > ` : B `
2022-03-27 16:42:11 +00:00
< option
label = $ { t [ 1 ] }
value = $ { t [ 1 ] }
/ > ` ) ) }
2022-06-06 20:13:19 +00:00
< / s e l e c t > ` : B `
2022-03-27 16:42:11 +00:00
< 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 ) } }
/ > ` }
< / t d >
< / t r >
2022-06-06 20:13:19 +00:00
$ { e [ 1 ] . description ? B ` <tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${ HP ( qe ( e [ 1 ] . description ) ) } </span></td></tr> ` : "" }
2022-03-27 16:42:11 +00:00
` ))}
< / t a b l e >
2022-06-06 20:13:19 +00:00
` :""}function UR(){var e,t,r;return!this.resolvedSpec||this.resolvedSpec.specLoadError?"":B `
2022-03-27 16:42:11 +00:00
< 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"}' >
2022-06-06 20:13:19 +00:00
< div part = "section-servers-title" class = "sub-title" > API SERVER < / d i v >
2022-03-27 16:42:11 +00:00
< div class = 'mono-font' style = 'margin: 12px 0; font-size:calc(var(--font-size-small) + 1px);' >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . servers && 0 !== ( null === ( e = this . resolvedSpec . servers ) || void 0 === e ? void 0 : e . length ) ? B `
$ { null === ( t = this . resolvedSpec ) || void 0 === t ? void 0 : t . servers . map ( ( ( e , t ) => B `
2022-03-27 16:42:11 +00:00
< input type = 'radio'
name = 'api_server'
id = 'srvr-opt-${t}'
value = '${e.url}'
2022-06-06 20:13:19 +00:00
@ change = $ { ( ) => { FR . call ( this , e . url ) } }
2022-03-27 16:42:11 +00:00
. checked = '${this.selectedServer.url===e.url}'
style = 'margin:4px 0; cursor:pointer'
/ >
< label style = 'cursor:pointer' for = 'srvr-opt-${t}' >
2022-06-06 20:13:19 +00:00
$ { e . url } $ { e . description ? B ` - <span class='regular-font'> ${ e . description } </span> ` : "" }
2022-03-27 16:42:11 +00:00
< / l a b e l >
< br / >
` ))}
` :""}
< div class = "table-title primary-text" part = "label-selected-server" > SELECTED : $ { ( null === ( r = this . selectedServer ) || void 0 === r ? void 0 : r . computedUrl ) || "none" } < / d i v >
< / d i v >
< slot name = "servers" > < / s l o t >
$ { zR . call ( this ) }
2022-06-06 20:13:19 +00:00
< / s e c t i o n > ` } f u n c t i o n q R ( e , t = " t o g g l e " ) { c o n s t r = n u l l = = e ? v o i d 0 : e . c l o s e s t ( " . n a v - b a r - t a g - a n d - p a t h s " ) ; i f ( r ) { c o n s t e = r . c l a s s L i s t . c o n t a i n s ( " e x p a n d e d " ) ; ! e | | " t o g g l e " ! = = t & & " c o l l a p s e " ! = = t ? e | | " t o g g l e " ! = = t & & " e x p a n d " ! = = t | | r . c l a s s L i s t . r e p l a c e ( " c o l l a p s e d " , " e x p a n d e d " ) : r . c l a s s L i s t . r e p l a c e ( " e x p a n d e d " , " c o l l a p s e d " ) } } f u n c t i o n M R ( e ) { q R ( e . t a r g e t , " t o g g l e " ) } f u n c t i o n H R ( e , t = " e x p a n d - a l l " ) { ! f u n c t i o n ( e , t = " e x p a n d - a l l " ) { c o n s t r = [ . . . e . q u e r y S e l e c t o r A l l ( " . n a v - b a r - t a g - a n d - p a t h s " ) ] ; " e x p a n d - a l l " = = = t ? r . m a p ( ( e = > { e . c l a s s L i s t . r e p l a c e ( " c o l l a p s e d " , " e x p a n d e d " ) } ) ) : r . m a p ( ( e = > { e . c l a s s L i s t . r e p l a c e ( " e x p a n d e d " , " c o l l a p s e d " ) } ) ) } ( e . t a r g e t . c l o s e s t ( " . n a v - s c r o l l " ) , t ) } f u n c t i o n W R ( ) { v a r e , t , r , n ; r e t u r n ! t h i s . r e s o l v e d S p e c | | t h i s . r e s o l v e d S p e c . s p e c L o a d E r r o r ? B `
2022-03-27 16:42:11 +00:00
< nav class = 'nav-bar' part = "section-navbar" >
< slot name = "nav-logo" class = "logo" > < / s l o t >
< / n a v >
2022-06-06 20:13:19 +00:00
` :B `
2022-03-27 16:42:11 +00:00
< nav class = 'nav-bar ${this.renderStyle}' part = "section-navbar" >
< slot name = "nav-logo" class = "logo" > < / s l o t >
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowSearch && "false" === this . allowAdvancedSearch ? "" : B `
< div style = "display:flex; flex-direction:row; justify-content:center; align-items:stretch; padding:8px 24px 12px 24px; ${" false "===this.allowAdvancedSearch?" border - bottom : 1 px solid var ( -- nav - hover - bg - color ) ":" "}" >
$ { "false" === this . allowSearch ? "" : B `
2022-03-27 16:42:11 +00:00
< 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;" > & # x21a9 ; < / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . matchPaths ? B `
< button @ click = '${this.onClearSearch}' class = "m-btn thin-border" style = "margin-left:5px; color:var(--nav-text-color); width:75px; padding:6px 8px;" part = "btn btn-outline btn-clear-filter" >
CLEAR
< / b u t t o n > ` : " " }
2022-03-27 16:42:11 +00:00
` }
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowAdvancedSearch || this . matchPaths ? "" : B `
< button class = "m-btn primary" part = "btn btn-fill btn-search" style = "margin-left:5px; padding:6px 8px; width:75px" @ click = "${this.onShowSearchModalClicked}" >
SEARCH
2022-03-27 16:42:11 +00:00
< / b u t t o n >
` }
< / d i v >
` }
2022-06-06 20:13:19 +00:00
$ { B ` <nav class='nav-scroll' part="section-navbar-scroll">
$ { "false" !== this . showInfo && this . resolvedSpec . info ? B `
$ { "true" === this . infoDescriptionHeadingsInNavBar ? B `
$ { this . resolvedSpec . infoDescriptionHeaders . length > 0 ? B ` <div class='nav-bar-info' id='link-overview' data-content-id='overview' @click = ' ${ e => this . scrollToEventTarget ( e , ! 1 ) } '>
$ { ( null === ( e = this . resolvedSpec . info ) || void 0 === e || null === ( t = e . title ) || void 0 === t ? void 0 : t . trim ( ) ) || "Overview" }
< / d i v > ` : " " }
2022-03-27 16:42:11 +00:00
< div class = "overview-headers" >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . infoDescriptionHeaders . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 }
< / d i v > ` ) ) }
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . infoDescriptionHeaders . length > 0 ? B ` <hr style='border-top: 1px solid var(--nav-hover-bg-color); border-width:1px 0 0 0; margin: 15px 0 0 0'/> ` : "" }
` :B ` < div class = 'nav-bar-info' id = 'link-overview' data - content - id = 'overview' @ click = '${e=>this.scrollToEventTarget(e,!1)}' >
$ { ( null === ( r = this . resolvedSpec . info ) || void 0 === r || null === ( n = r . title ) || void 0 === n ? void 0 : n . trim ( ) ) || "Overview" }
< / d i v > ` }
2022-03-27 16:42:11 +00:00
` :""}
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowServerSelection ? "" : B ` <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 ? B ` <div class='nav-bar-info' id='link-auth' data-content-id='auth' @click = ' ${ e => this . scrollToEventTarget ( e , ! 1 ) } '> Authentication </div> ` : "" }
2022-03-27 16:42:11 +00:00
< 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;" >
2022-06-06 20:13:19 +00:00
$ { "focused" === this . renderStyle ? B `
2022-03-27 16:42:11 +00:00
< div @ click = "${e=>{HR.call(this,e," expand - all ")}}" title = "Expand all" style = "transform: rotate(90deg); cursor:pointer; margin-right:10px;" > ▸ < / d i v >
< div @ click = "${e=>{HR.call(this,e," collapse - all ")}}" title = "Collapse all" style = "transform: rotate(270deg); cursor:pointer;" > ▸ < / d i v > ` : " " }
< / d i v >
< div class = 'nav-bar-section-title' > OPERATIONS < / d i v >
< / d i v >
<!-- TAGS AND PATHS -- >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . tags . filter ( ( e => e . paths . filter ( ( e => ot ( this . matchPaths , e , this . matchType ) ) ) . length ) ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< div class = 'nav-bar-tag-and-paths ${e.expanded?"expanded":"collapsed"}' >
2022-06-06 20:13:19 +00:00
$ { "General ⦂" === e . name ? B ` <hr style="border:none; border-top: 1px dotted var(--nav-text-color); opacity:0.3; margin:-1px 0 0 0;"/> ` : B `
2022-03-27 16:42:11 +00:00
< 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 } < / d i v >
< div class = "nav-bar-tag-icon" @ click = "${e=>{" focused "===this.renderStyle&&" show - description "===this.onNavTagClick&&MR.call(this,e)}}" >
< / d i v >
< / d i v >
` }
2022-06-06 20:13:19 +00:00
$ { "true" === this . infoDescriptionHeadingsInNavBar ? B `
$ { "focused" === this . renderStyle && "expand-collapse" === this . onNavTagClick ? "" : B `
2022-03-27 16:42:11 +00:00
< div class = 'tag-headers' >
2022-06-06 20:13:19 +00:00
$ { e . headers . map ( ( t => B `
2022-03-27 16:42:11 +00:00
< 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 } < / d i v > ` ) ) }
< / d i v > ` } ` : " " }
< div class = 'nav-bar-paths-under-tag' >
<!-- Paths in each tag ( endpoints ) -- >
2022-06-06 20:13:19 +00:00
$ { e . paths . filter ( ( e => ! this . matchPaths || ot ( this . matchPaths , e , this . matchType ) ) ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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)}}'
>
2022-06-06 20:13:19 +00:00
< span style = "display:flex; align-items:start; ${e.deprecated?" filter : opacity ( 0.5 ) ":" "}" >
$ { B ` <span class="nav-method ${ this . showMethodInNavBar } ${ e . method } ">
$ { "as-colored-block" === this . showMethodInNavBar ? e . method . substring ( 0 , 3 ) . toUpperCase ( ) : e . method . toUpperCase ( ) }
< / s p a n > ` }
$ { e . isWebhook ? B ` <span style="font-weight:bold; margin-right:8px; font-size: calc(var(--font-size-small) - 2px)">WEBHOOK</span> ` : "" }
$ { "true" === this . usePathInNavBar ? B ` <span class='mono-font'> ${ e . path } </span> ` : e . summary || e . shortSummary }
2022-03-27 16:42:11 +00:00
< / s p a n >
< / d i v > ` ) ) }
< / d i v >
< / d i v >
` ))}
<!-- COMPONENTS -- >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . components && "true" === this . showComponents && "focused" === this . renderStyle ? B `
2022-03-27 16:42:11 +00:00
< div id = 'link-components' class = 'nav-bar-section components' >
< div > < / d i v >
< div class = 'nav-bar-section-title' > COMPONENTS < / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . components . map ( ( e => e . subComponents . length ? B `
2022-03-27 16:42:11 +00:00
< 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 }
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e . subComponents . filter ( ( e => ! 1 !== e . expanded ) ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 } < / s p a n >
< / d i v > ` ) ) } ` : " " ) ) } ` : " " }
< / n a v > ` }
< / n a v >
2022-06-06 20:13:19 +00:00
` }function VR(e){const t=new qe.Renderer;return t.heading=(t,r,n,a)=> ` < h$ { r } class = "observe-me" id = "${e}--${a.slug(n)}" > $ { t } < / h $ { r } > ` , t } f u n c t i o n G R ( e ) { r e t u r n B `
2022-03-27 16:42:11 +00:00
< div class = 'regular-font section-gap--focused-mode' part = "section-operations-in-tag" >
$ { e }
2022-06-06 20:13:19 +00:00
< / d i v > ` } f u n c t i o n K R ( ) { v a r e ; i f ( " t r u e " = = = t h i s . s h o w I n f o ) r e t u r n G R ( B R . c a l l ( t h i s ) ) ; c o n s t t = t h i s . r e s o l v e d S p e c . t a g s [ 0 ] , r = n u l l = = = ( e = t h i s . r e s o l v e d S p e c . t a g s [ 0 ] ) | | v o i d 0 = = = e ? v o i d 0 : e . p a t h s [ 0 ] ; r e t u r n G R ( t & & r ? j R . c a l l ( t h i s , r , t . n a m e ) : " " ) } f u n c t i o n J R ( e ) { r e t u r n B `
2022-03-27 16:42:11 +00:00
< h1 id = "${e.elementId}" > $ { e . name } < / h 1 >
2022-06-06 20:13:19 +00:00
$ { "show-description" === this . onNavTagClick && e . description ? B `
2022-03-27 16:42:11 +00:00
< 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> ` ) }
< / d i v > ` : " " }
2022-06-06 20:13:19 +00:00
` }function YR(){if(!this.focusedElementId||!this.resolvedSpec)return;const e=this.focusedElementId;let t,r=null,n=null,a=0;if(e.startsWith("overview")&&"true"===this.showInfo)t=BR.call(this);else if("auth"===e&&"true"===this.allowAuthentication)t=aR.call(this);else if("servers"===e&&"true"===this.allowServerSelection)t=UR.call(this);else if("operations-top"===e)t=B `
2022-03-27 16:42:11 +00:00
< div id = "operations-top" class = "observe-me" >
< slot name = "operations-top" > < / s l o t >
2022-06-06 20:13:19 +00:00
< / d i v > ` ; e l s e i f ( e . s t a r t s W i t h ( " c m p - - " ) & & " t r u e " = = = t h i s . s h o w C o m p o n e n t s ) t = L R . c a l l ( t h i s ) ; e l s e i f ( e . s t a r t s W i t h ( " t a g - - " ) ) { c o n s t r = e . i n d e x O f ( " - - " , 4 ) > 0 ? e . s u b s t r i n g ( 0 , e . i n d e x O f ( " - - " , 5 ) ) : e ; n = t h i s . r e s o l v e d S p e c . t a g s . f i n d ( ( e = > e . e l e m e n t I d = = = r ) ) , t = n ? G R . c a l l ( t h i s , J R . c a l l ( t h i s , n ) ) : K R . c a l l ( t h i s ) } e l s e { f o r ( a = 0 ; a < t h i s . r e s o l v e d S p e c . t a g s . l e n g t h & & ( n = t h i s . r e s o l v e d S p e c . t a g s [ a ] , r = t h i s . r e s o l v e d S p e c . t a g s [ a ] . p a t h s . f i n d ( ( t = > ` $ { t . e l e m e n t I d } ` = = = e ) ) , ! r ) ; a + = 1 ) ; i f ( r ) { q R ( t h i s . s h a d o w R o o t . g e t E l e m e n t B y I d ( ` l i n k - $ { e } ` ) , " e x p a n d " ) , t = G R . c a l l ( t h i s , j R . c a l l ( t h i s , r , n . n a m e ) ) } e l s e t = K R . c a l l ( t h i s ) } r e t u r n t } f u n c t i o n Z R ( e ) { i f ( e . e x p a n d e d ) e . e x p a n d e d = ! 1 , " t r u e " = = = t h i s . u p d a t e R o u t e & & w i n d o w . h i s t o r y . r e p l a c e S t a t e ( n u l l , n u l l , ` $ { w i n d o w . l o c a t i o n . h r e f . s p l i t ( " # " ) [ 0 ] } $ { " # " = = = t h i s . r o u t e P r e f i x ? " " : ` $ { t h i s . r o u t e P r e f i x } ` } ` ) ; e l s e i f ( e . e x p a n d e d = ! 0 , " t r u e " = = = t h i s . u p d a t e R o u t e ) { c o n s t t = ` $ { t h i s . r o u t e P r e f i x | | " # " } $ { e . e l e m e n t I d } ` ; w i n d o w . l o c a t i o n . h a s h ! = = t & & w i n d o w . h i s t o r y . r e p l a c e S t a t e ( n u l l , n u l l , ` $ { w i n d o w . l o c a t i o n . h r e f . s p l i t ( " # " ) [ 0 ] } $ { t } ` ) } t h i s . r e q u e s t U p d a t e ( ) } f u n c t i o n Q R ( e , t = " e x p a n d - a l l " ) { c o n s t r = [ . . . e . q u e r y S e l e c t o r A l l ( " . s e c t i o n - t a g " ) ] ; " e x p a n d - a l l " = = = t ? r . m a p ( ( e = > { e . c l a s s L i s t . r e p l a c e ( " c o l l a p s e d " , " e x p a n d e d " ) } ) ) : r . m a p ( ( e = > { e . c l a s s L i s t . r e p l a c e ( " e x p a n d e d " , " c o l l a p s e d " ) } ) ) } f u n c t i o n X R ( e , t = " e x p a n d - a l l " ) { Q R . c a l l ( t h i s , e . t a r g e t . c l o s e s t ( " . o p e r a t i o n s - r o o t " ) , t ) } f u n c t i o n e L ( e , t = ! 1 ) { r e t u r n B `
< summary @ click = "${t=>{ZR.call(this,e,t)}}" part = "section-endpoint-head-${e.expanded?" expanded ":" collapsed "}" class = 'endpoint-head ${e.method} ${e.deprecated?"deprecated":""} ${t||e.expanded?"expanded":"collapsed"}' >
< div part = "section-endpoint-head-method" class = "method ${e.method} ${e.deprecated?" deprecated ":" "}" > $ { e . method } < / d i v >
< div part = "section-endpoint-head-path" class = "path ${e.deprecated?" deprecated ":" "}" >
2022-03-27 16:42:11 +00:00
$ { e . path }
2022-06-06 20:13:19 +00:00
$ { e . isWebhook ? B ` <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> ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e . deprecated ? B `
2022-03-27 16:42:11 +00:00
< span style = "font-size:var(--font-size-small); text-transform:uppercase; font-weight:bold; color:var(--red); margin:2px 0 0 5px;" >
deprecated
< / s p a n > ` : " " }
2022-06-06 20:13:19 +00:00
$ { this . showSummaryWhenCollapsed ? B `
2022-03-27 16:42:11 +00:00
< div class = "only-large-screen" style = "min-width:60px; flex:1" > < / d i v >
2022-06-06 20:13:19 +00:00
< div part = "section-endpoint-head-description" class = "descr" > $ { e . summary || e . shortSummary } < / d i v > ` : " " }
2022-03-27 16:42:11 +00:00
< / s u m m a r y >
2022-06-06 20:13:19 +00:00
` }function tL(e){var t;const r=new Set;for(const t in e.responses)for(const a in null===(n=e.responses[t])||void 0===n?void 0:n.content){var n;r.add(a.trim())}const a=[...r].join(", "),o=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&&o.push(i);const s=e.xCodeSamples?iR(e.xCodeSamples):"";return B `
< div part = "section-endpoint-body-${e.expanded?" expanded ":" collapsed "}" class = 'endpoint-body ${e.method} ${e.deprecated?"deprecated":""}' >
2022-03-27 16:42:11 +00:00
< div class = "summary" >
2022-06-06 20:13:19 +00:00
$ { e . summary ? B ` <div class="title" part="section-endpoint-body-title"> ${ e . summary } <div> ` : e . shortSummary !== e . description ? B ` <div class="title" part="section-endpoint-body-title"> ${ e . shortSummary } </div> ` : "" }
$ { e . xBadges && ( null === ( t = e . xBadges ) || void 0 === t ? void 0 : t . length ) > 0 ? B `
2022-03-27 16:42:11 +00:00
< div style = "display:flex; flex-wrap:wrap;font-size: var(--font-size-small);" >
2022-06-06 20:13:19 +00:00
$ { e . xBadges . map ( ( e => B ` <span part="endpoint-badge" 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> ` ) ) }
2022-03-27 16:42:11 +00:00
< / d i v >
` :""}
2022-06-06 20:13:19 +00:00
$ { e . description ? B ` <div part="section-endpoint-body-description" class="m-markdown"> ${ HP ( qe ( e . description ) ) } </div> ` : "" }
2022-03-27 16:42:11 +00:00
< slot name = "${e.elementId}" > < / s l o t >
2022-06-06 20:13:19 +00:00
$ { oR . call ( this , e . security ) }
2022-03-27 16:42:11 +00:00
$ { s }
< / d i v >
< 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}"
2022-06-06 20:13:19 +00:00
. api _keys = "${o}"
2022-03-27 16:42:11 +00:00
. 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}"
2022-06-06 20:13:19 +00:00
use - summary - to - list - example = "${this.useSummaryToListExamples}"
2022-03-27 16:42:11 +00:00
allow - try = "${this.allowTry}"
2022-06-06 20:13:19 +00:00
accept = "${a}"
2022-03-27 16:42:11 +00:00
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}"
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${e.isWebhook?this.schemaHideWriteOnly:this.schemaHideReadOnly}"
schema - hide - write - only = "${e.isWebhook?this.schemaHideReadOnly:this.schemaHideWriteOnly}"
2022-03-27 16:42:11 +00:00
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 ,
2022-06-06 20:13:19 +00:00
anchor : anchor , anchor - param - example : anchor - param - example , schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
2022-03-27 16:42:11 +00:00
> < / a p i - r e q u e s t >
$ { e . callbacks ? sR . call ( this , e . callbacks ) : "" }
< / d i v >
< 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}"
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${e.isWebhook?this.schemaHideWriteOnly:this.schemaHideReadOnly}"
schema - hide - write - only = "${e.isWebhook?this.schemaHideReadOnly:this.schemaHideWriteOnly}"
2022-03-27 16:42:11 +00:00
selected - status = "${Object.keys(e.responses||{})[0]||" "}"
2022-06-06 20:13:19 +00:00
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 ,
schema - description : schema - description , schema - multiline - toggle : schema - multiline - toggle "
2022-03-27 16:42:11 +00:00
> < / a p i - r e s p o n s e >
< / d i v >
2022-06-06 20:13:19 +00:00
< / d i v > ` } f u n c t i o n r L ( e = ! 0 , t = ! 0 , r = ! 1 ) { r e t u r n t h i s . r e s o l v e d S p e c ? B `
$ { e ? B `
2022-03-27 16:42:11 +00:00
< div style = "display:flex; justify-content:flex-end;" >
< span @ click = "${e=>XR(e," expand - all ")}" style = "color:var(--primary-color); cursor:pointer;" >
Expand all
< / s p a n >
& nbsp ; | & nbsp ;
< span @ click = "${e=>XR(e," collapse - all ")}" style = "color:var(--primary-color); cursor:pointer;" >
Collapse all
< / s p a n >
& nbsp ; sections
< / d i v > ` : " " }
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . tags . map ( ( e => B `
$ { t ? B `
2022-03-27 16:42:11 +00:00
< 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 } < / d i v >
< / d i v >
< div class = 'section-tag-body' >
< slot name = "${e.elementId}" > < / s l o t >
< div class = "regular-font regular-font-size m-markdown" style = "padding-bottom:12px" >
$ { HP ( qe ( e . description || "" ) ) }
< / d i v >
2022-06-06 20:13:19 +00:00
$ { e . paths . filter ( ( e => ! this . matchPaths || ot ( this . matchPaths , e , this . matchType ) ) ) . map ( ( e => B `
< section part = "section-endpoint" id = '${e.elementId}' class = 'm-endpoint regular-font ${e.method} ${r||e.expanded?"expanded":"collapsed"}' >
2022-03-27 16:42:11 +00:00
$ { eL . call ( this , e , r ) }
$ { r || e . expanded ? tL . call ( this , e ) : "" }
< / s e c t i o n > ` ) ) }
< / d i v >
2022-06-06 20:13:19 +00:00
< / d i v > ` : B `
2022-03-27 16:42:11 +00:00
< div class = 'section-tag-body' >
2022-06-06 20:13:19 +00:00
$ { e . paths . filter ( ( e => ! this . matchPaths || ot ( this . matchPaths , e , this . matchType ) ) ) . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 ) : "" }
< / s e c t i o n > ` ) ) }
< / d i v >
` }
2022-06-06 20:13:19 +00:00
` ))} ` : "" } function nL ( ) { return B `
< header class = "row main-header regular-font" part = "section-header" style = "padding:8px 4px 8px 4px;min-height:48px;" >
2022-03-27 16:42:11 +00:00
< div class = "only-large-screen-flex" style = "align-items: center;" >
< slot name = "logo" class = "logo" part = "section-logo" >
2022-06-06 20:13:19 +00:00
$ { e = "height:36px;width:36px;margin-left:5px" , B `
2022-03-27 16:42:11 +00:00
< 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" / >
< / s v g >
< / d i v >
` }
<!-- m - logo style = "height:36px;width:36px;margin-left:5px" > < / m - l o g o - - >
< / s l o t >
< div class = "header-title" part = "label-header-title" > $ { this . headingText } < / d i v >
< / d i v >
< div style = "margin: 0px 8px;display:flex;flex:1" >
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowSpecUrlLoad ? "" : B `
2022-03-27 16:42:11 +00:00
< 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;" > & # x21a9 ; < / d i v >
` }
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowSpecFileLoad ? "" : B `
2022-03-27 16:42:11 +00:00
< 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 < / b u t t o n >
` }
< slot name = "header" > < / s l o t >
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowSearch || "read focused" . includes ( this . renderStyle ) ? "" : B `
2022-03-27 16:42:11 +00:00
< 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;" > & # x21a9 ; < / d i v >
` }
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowAdvancedSearch || "read focused" . includes ( this . renderStyle ) ? "" : B `
2022-03-27 16:42:11 +00:00
< button class = "m-btn primary only-large-screen" part = "btn btn-fill btn-search" style = "margin-left:10px;" @ click = "${this.onShowSearchModalClicked}" >
Search
< / b u t t o n >
` }
< / d i v >
2022-06-06 20:13:19 +00:00
< / h e a d e r > ` ; v a r e } c u s t o m E l e m e n t s . d e f i n e ( " a p i - r e s p o n s e " , c l a s s e x t e n d s n e { c o n s t r u c t o r ( ) { s u p e r ( ) , t h i s . s e l e c t e d S t a t u s = " " , t h i s . h e a d e r s F o r E a c h R e s p S t a t u s = { } , t h i s . m i m e R e s p o n s e s F o r E a c h S t a t u s = { } , t h i s . a c t i v e S c h e m a T a b = " s c h e m a " } s t a t i c g e t p r o p e r t i e s ( ) { r e t u r n { c a l l b a c k : { t y p e : S t r i n g } , r e s p o n s e s : { t y p e : O b j e c t } , p a r s e r : { t y p e : O b j e c t } , s c h e m a S t y l e : { t y p e : S t r i n g , a t t r i b u t e : " s c h e m a - s t y l e " } , r e n d e r S t y l e : { t y p e : S t r i n g , a t t r i b u t e : " r e n d e r - s t y l e " } , s e l e c t e d S t a t u s : { t y p e : S t r i n g , a t t r i b u t e : " s e l e c t e d - s t a t u s " } , s e l e c t e d M i m e T y p e : { t y p e : S t r i n g , a t t r i b u t e : " s e l e c t e d - m i m e - t y p e " } , a c t i v e S c h e m a T a b : { t y p e : S t r i n g , a t t r i b u t e : " a c t i v e - s c h e m a - t a b " } , s c h e m a E x p a n d L e v e l : { t y p e : N u m b e r , a t t r i b u t e : " s c h e m a - e x p a n d - l e v e l " } , s c h e m a D e s c r i p t i o n E x p a n d e d : { t y p e : S t r i n g , a t t r i b u t e : " s c h e m a - d e s c r i p t i o n - e x p a n d e d " } , a l l o w S c h e m a D e s c r i p t i o n E x p a n d T o g g l e : { t y p e : S t r i n g , a t t r i b u t e : " a l l o w - s c h e m a - d e s c r i p t i o n - e x p a n d - t o g g l e " } , s c h e m a H i d e R e a d O n l y : { t y p e : S t r i n g , a t t r i b u t e : " s c h e m a - h i d e - r e a d - o n l y " } , s c h e m a H i d e W r i t e O n l y : { t y p e : S t r i n g , a t t r i b u t e : " s c h e m a - h i d e - w r i t e - o n l y " } } } s t a t i c g e t s t y l e s ( ) { r e t u r n [ W e , G e , Z e , K e , V e , h R , l `
2022-03-27 16:42:11 +00:00
. resp - head {
vertical - align : middle ;
padding : 16 px 0 8 px ;
}
. resp - head . divider {
border - top : 1 px solid var ( -- border - color ) ;
margin - top : 10 px ;
}
. resp - status {
font - weight : bold ;
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
}
. resp - descr {
font - size : calc ( var ( -- font - size - small ) + 1 px ) ;
color : var ( -- light - fg ) ;
text - align : left ;
}
. top - gap { margin - top : 16 px ; }
. example - panel {
font - size : var ( -- font - size - small ) ;
margin : 0 ;
}
. focused - mode ,
. read - mode {
padding - top : 24 px ;
margin - top : 12 px ;
border - top : 1 px dashed var ( -- border - color ) ;
2022-06-06 20:13:19 +00:00
} ` ,et]}render(){return B `
2022-03-27 16:42:11 +00:00
< 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" }
< / d i v >
< div >
$ { this . responseTemplate ( ) }
< div >
< / d i v >
2022-06-06 20:13:19 +00:00
` }resetSelection(){this.selectedStatus="",this.selectedMimeType=""}responseTemplate(){if(!this.responses)return"";for(const n in this.responses){this.selectedStatus||(this.selectedStatus=n);const a={};for(const r in null===(e=this.responses[n])||void 0===e?void 0:e.content){var e,t;const o=this.responses[n].content[r];this.selectedMimeType||(this.selectedMimeType=r);const i=AR(o.schema,{}),s=ER(o.schema,r,o.examples,o.example,!(this.schemaHideReadOnly&&(this.schemaHideReadOnly.includes(this.method)||"true"===this.schemaHideReadOnly)),!(this.schemaHideWriteOnly&&(this.schemaHideWriteOnly.includes(this.method)||"true"===this.schemaHideWriteOnly)),r.includes("json")?"json":"text");a[r]={description:this.responses[n].description,examples:s,selectedExample:(null===(t=s[0])||void 0===t?void 0:t.exampleId)||"",schemaTree:i}}const o=[];for(const e in null===(r=this.responses[n])||void 0===r?void 0:r.headers){var r;o.push({name:e,...this.responses[n].headers[e]})}this.headersForEachRespStatus[n]=o,this.mimeResponsesForEachStatus[n]=a}return B `
$ { Object . keys ( this . responses ) . length > 1 ? B ` <div class='row' style='flex-wrap:wrap'>
$ { Object . keys ( this . responses ) . map ( ( e => B `
$ { "$$ref" === e ? "" : B `
2022-03-27 16:42:11 +00:00
< 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 }
2022-06-06 20:13:19 +00:00
< / b u t t o n > ` } ` ) ) } ` : B ` < s p a n > $ { O b j e c t . k e y s ( t h i s . r e s p o n s e s ) [ 0 ] } < / s p a n > ` }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { Object . keys ( this . responses ) . map ( ( e => { var t , r ; return B `
2022-03-27 16:42:11 +00:00
< 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 ) || "" ) ) } < / s p a n >
2022-06-06 20:13:19 +00:00
$ { this . headersForEachRespStatus [ e ] && ( null === ( r = this . headersForEachRespStatus [ e ] ) || void 0 === r ? void 0 : r . length ) > 0 ? B ` ${ this . responseHeaderListTemplate ( this . headersForEachRespStatus [ e ] ) } ` : "" }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { 0 === Object . keys ( this . mimeResponsesForEachStatus [ e ] ) . length ? "" : B `
2022-03-27 16:42:11 +00:00
< 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 < / b u t t o n >
< button class = "tab-btn ${" example "!==this.activeSchemaTab?" active ":" "}" data - tab = 'schema' > SCHEMA < / b u t t o n >
< div style = "flex:1" > < / d i v >
2022-06-06 20:13:19 +00:00
$ { 1 === Object . keys ( this . mimeResponsesForEachStatus [ e ] ) . length ? B ` <span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${ Object . keys ( this . mimeResponsesForEachStatus [ e ] ) [ 0 ] } </span> ` : B ` ${ this . mimeTypeDropdownTemplate ( Object . keys ( this . mimeResponsesForEachStatus [ e ] ) ) } ` }
2022-03-27 16:42:11 +00:00
< / d i v >
2022-06-06 20:13:19 +00:00
$ { "example" === this . activeSchemaTab ? B ` <div class ='tab-content col' style = 'flex:1;'>
2022-03-27 16:42:11 +00:00
$ { this . mimeExampleTemplate ( this . mimeResponsesForEachStatus [ e ] [ this . selectedMimeType ] ) }
2022-06-06 20:13:19 +00:00
< / d i v > ` : B ` < d i v c l a s s = ' t a b - c o n t e n t c o l ' s t y l e = ' f l e x : 1 ; ' >
2022-03-27 16:42:11 +00:00
$ { this . mimeSchemaTemplate ( this . mimeResponsesForEachStatus [ e ] [ this . selectedMimeType ] ) }
< / d i v > ` }
< / d i v >
` } ` } ) ) }
2022-06-06 20:13:19 +00:00
` }responseHeaderListTemplate(e){return B `
2022-03-27 16:42:11 +00:00
< div style = "padding:16px 0 8px 0" class = "resp-headers small-font-size bold-text" > RESPONSE HEADERS < / d i v >
< 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" >
2022-06-06 20:13:19 +00:00
$ { e . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< tr >
< td style = "padding:8px; vertical-align: baseline; min-width:120px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;" >
$ { e . name || "" }
< / t d >
< td style = "padding:4px; vertical-align: baseline; padding:0 5px; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;" >
$ { e . schema . type || "" }
< / t d >
< 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 || "" ) ) } < / d i v >
< / t d >
< td style = "padding:8px; vertical-align: baseline; border-top: 1px solid var(--light-border-color); text-overflow: ellipsis;" >
$ { e . schema . example || "" }
< / t d >
< / t r >
` ))}
2022-06-06 20:13:19 +00:00
< / t a b l e > ` } m i m e T y p e D r o p d o w n T e m p l a t e ( e ) { r e t u r n B `
2022-03-27 16:42:11 +00:00
< select @ change = "${e=>{this.selectedMimeType=e.target.value}}" style = 'margin-bottom: -1px; z-index:1' >
2022-06-06 20:13:19 +00:00
$ { e . map ( ( e => B ` <option value=' ${ e } ' ?selected = ' ${ e === this . selectedMimeType } '> ${ e } </option> ` ) ) }
< / s e l e c t > ` } o n S e l e c t E x a m p l e ( e ) { [ . . . e . t a r g e t . c l o s e s t ( " . e x a m p l e - p a n e l " ) . q u e r y S e l e c t o r A l l ( " . e x a m p l e " ) ] . f o r E a c h ( ( t = > { t . s t y l e . d i s p l a y = t . d a t a s e t . e x a m p l e = = = e . t a r g e t . v a l u e ? " b l o c k " : " n o n e " } ) ) } m i m e E x a m p l e T e m p l a t e ( e ) { r e t u r n e ? B `
$ { 1 === e . examples . length ? B `
$ { "json" === e . examples [ 0 ] . exampleFormat ? B `
$ { e . examples [ 0 ] . exampleSummary && e . examples [ 0 ] . exampleSummary . length > 80 ? B ` <div style="padding: 4px 0"> ${ e . examples [ 0 ] . exampleSummary } </div> ` : "" }
$ { e . examples [ 0 ] . exampleDescription ? B ` <div class="m-markdown-small" style="padding: 4px 0"> ${ HP ( qe ( e . examples [ 0 ] . exampleDescription || "" ) ) } </div> ` : "" }
2022-03-27 16:42:11 +00:00
< 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"
2022-06-06 20:13:19 +00:00
> < / j s o n - t r e e > ` : B `
$ { e . examples [ 0 ] . exampleSummary && e . examples [ 0 ] . exampleSummary . length > 80 ? B ` <div style="padding: 4px 0"> ${ e . examples [ 0 ] . exampleSummary } </div> ` : "" }
$ { e . examples [ 0 ] . exampleDescription ? B ` <div class="m-markdown-small" style="padding: 4px 0"> ${ HP ( qe ( e . examples [ 0 ] . exampleDescription || "" ) ) } </div> ` : "" }
2022-03-27 16:42:11 +00:00
< pre class = 'example-panel ${"read"===this.renderStyle?"border pad-8-16":"border-top pad-top-8"}' > $ { e . examples [ 0 ] . exampleValue } < / p r e >
2022-06-06 20:13:19 +00:00
` } ` : B `
2022-03-27 16:42:11 +00:00
< 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)}' >
2022-06-06 20:13:19 +00:00
$ { e . examples . map ( ( t => B ` <option value=" ${ t . exampleId } " ?selected= ${ t . exampleId === e . selectedExample } >
2022-03-27 16:42:11 +00:00
$ { t . exampleSummary . length > 80 ? t . exampleId : t . exampleSummary }
< / o p t i o n > ` ) ) }
< / s e l e c t >
2022-06-06 20:13:19 +00:00
$ { e . examples . map ( ( t => B `
2022-03-27 16:42:11 +00:00
< div class = "example" data - example = '${t.exampleId}' style = "display: ${t.exampleId===e.selectedExample?" block ":" none "}" >
2022-06-06 20:13:19 +00:00
$ { t . exampleSummary && t . exampleSummary . length > 80 ? B ` <div style="padding: 4px 0"> ${ t . exampleSummary } </div> ` : "" }
$ { t . exampleDescription ? B ` <div class="m-markdown-small" style="padding: 4px 0"> ${ HP ( qe ( t . exampleDescription || "" ) ) } </div> ` : "" }
$ { "json" === t . exampleFormat ? B `
2022-03-27 16:42:11 +00:00
< json - tree
render - style = '${this.renderStyle}'
. data = '${t.exampleValue}'
exportparts = "btn:btn, btn-fill:btn-fill, btn-copy:btn-copy"
2022-06-06 20:13:19 +00:00
> < / j s o n - t r e e > ` : B ` < p r e > $ { t . e x a m p l e V a l u e } < / p r e > ` }
2022-03-27 16:42:11 +00:00
< / d i v >
` ))}
< / s p a n >
` }
2022-06-06 20:13:19 +00:00
` :B `
2022-03-27 16:42:11 +00:00
< pre style = 'color:var(--red)' class = '${"read"===this.renderStyle?"read example-panel border pad-8-16":"example-panel border-top"}' > No example provided < / p r e >
2022-06-06 20:13:19 +00:00
` }mimeSchemaTemplate(e){return e?B `
$ { "table" === this . schemaStyle ? B `
2022-03-27 16:42:11 +00:00
< 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}" ,
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${this.schemaHideReadOnly}"
2022-03-27 16:42:11 +00:00
schema - hide - write - only = "${this.schemaHideWriteOnly}"
2022-06-06 20:13:19 +00:00
> < / s c h e m a - t r e e > ` : B `
2022-03-27 16:42:11 +00:00
< 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}" ,
2022-06-06 20:13:19 +00:00
schema - hide - read - only = "${this.schemaHideReadOnly}"
2022-03-27 16:42:11 +00:00
schema - hide - write - only = "${this.schemaHideWriteOnly}"
2022-06-06 20:13:19 +00:00
> < / s c h e m a - t r e e > ` } ` : B `
2022-03-27 16:42:11 +00:00
< pre style = 'color:var(--red)' class = '${"read"===this.renderStyle?"border pad-8-16":"border-top"}' > Schema not found < / p r e >
2022-06-06 20:13:19 +00:00
` }});const aL=l `
2022-03-27 16:42:11 +00:00
* , * : before , * : after { box - sizing : border - box ; }
. dialog - box - overlay {
background - color : var ( -- overlay - bg ) ;
position : fixed ;
left : 0 ;
top : 0 ;
width : 100 vw ;
height : 100 vh ;
overflow : hidden ;
z - index : var ( -- dialog - z - index ) ;
}
. dialog - box {
position : fixed ;
top : 100 px ;
left : 50 % ;
transform : translate ( - 50 % , 0 % ) ;
display : flex ;
flex - direction : column ;
width : 70 vw ;
background - color : var ( -- bg2 ) ;
color : var ( -- fg2 ) ;
border - radius : 4 px ;
max - height : 500 px ;
overflow : hidden ;
border : 1 px solid var ( -- border - color ) ;
box - shadow : 0 14 px 28 px rgba ( 0 , 0 , 0 , 0.25 ) , 0 10 px 10 px rgba ( 0 , 0 , 0 , 0.22 ) ;
}
. dialog - box - header {
position : sticky ;
top : 0 ;
align - self : stretch ;
display : flex ;
align - items : center ;
padding : 0 px 16 px ;
min - height : 60 px ;
max - height : 60 px ;
border - bottom : 1 px solid var ( -- light - border - color ) ;
overflow : hidden ;
}
. dialog - box - header button {
font - size : 1.5 rem ;
font - weight : 700 ;
line - height : 1 ;
color : var ( -- fg ) ;
border : none ;
outline : none ;
background - color : transparent ;
cursor : pointer ;
border : 1 px solid transparent ;
border - radius : 50 % ;
margin - right : - 8 px ;
}
. dialog - box - header button : hover {
border - color : var ( -- primary - color ) ;
}
. dialog - box - content {
padding : 16 px ;
display : block ;
overflow : auto ;
height : 100 % ;
}
. dialog - box - title {
flex - grow : 1 ;
font - size : 24 px ;
}
2022-06-06 20:13:19 +00:00
` ;function oL(){var e;return document.addEventListener("close",(()=>{this.showAdvancedSearchDialog=!1})),document.addEventListener("open",this.onOpenSearchDialog),B `
2022-03-27 16:42:11 +00:00
< 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 < / l a b e l >
< / d i v >
< 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 < / l a b e l >
< / d i v >
< 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 < / l a b e l >
< / d i v >
< 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 < / l a b e l >
< / d i v >
< 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 < / l a b e l >
< / d i v >
< / d i v >
< / s p a n >
2022-06-06 20:13:19 +00:00
$ { null === ( e = this . advancedSearchMatches ) || void 0 === e ? void 0 : e . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< 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 } < / s p a n >
< span > $ { e . path } < / s p a n >
< span class = "regular-font gray-text" > $ { e . summary } < / s p a n >
< / d i v >
` ))}
< / d i a l o g - b o x >
2022-06-06 20:13:19 +00:00
` }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[aL]}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 B `
$ { "true" === this . show ? B `
2022-03-27 16:42:11 +00:00
< div class = "dialog-box-overlay" >
< div class = "dialog-box" >
< header class = "dialog-box-header" >
< span class = "dialog-box-title" > $ { this . heading } < / s p a n >
< button type = "button" @ click = "${this.onClose}" > & times ; < / b u t t o n >
< / h e a d e r >
< div class = "dialog-box-content" >
< slot > < / s l o t >
< / d i v >
< / d i v >
2022-06-06 20:13:19 +00:00
< /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" , a = iL . color . invert ( n ) , o = iL . color . opacity ( n , "0.8" ) ; if ( "dark" === e ) { const e = t . bg1 ? t . bg1 : "#2a2b2c" , 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 : o , primaryColorInvert : a , 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.50" ) , 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 : "#fafbfc" , 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 , - 200 ) ; r = { bg1 : e , bg2 : s , bg3 : l , lightBg : c , fg1 : i , fg2 : p , fg3 : u , lightFg : d , inlineCodeFg : h , primaryColor : n , primaryColorTrans : o , primaryColorInvert : a , selectionBg : f , selectionFg : m
2022-03-27 16:42:11 +00:00
< style >
* , * : before , * : after { box - sizing : border - box ; }
: host {
/* Common Styles - irrespective of themes */
-- border - radius : 2 px ;
-- 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 : 8 px ;
-- 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 } ;
2022-06-06 20:13:19 +00:00
/* Nav API Method Colors*/
-- nav - get - color : $ { r . blue } ;
-- nav - put - color : $ { r . orange } ;
-- nav - post - color : $ { r . green } ;
-- nav - delete - color : $ { r . red } ;
-- nav - head - color : $ { r . yellow } ;
2022-03-27 16:42:11 +00:00
/* 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 } ;
}
2022-06-06 20:13:19 +00:00
< / s t y l e > ` } f u n c t i o n c L ( e = ! 1 , t = ! 0 , r = ! 0 , n = ! 1 ) { i f ( ! t h i s . r e s o l v e d S p e c ) r e t u r n " " ; " t r u e " = = = t h i s . p e r s i s t A u t h & & Y P . c a l l ( t h i s ) ; c o n s t a = { b g 1 : s L ( t h i s . b g C o l o r ) ? t h i s . b g C o l o r : " " , f g 1 : s L ( t h i s . t e x t C o l o r ) ? t h i s . t e x t C o l o r : " " , h e a d e r C o l o r : s L ( t h i s . h e a d e r C o l o r ) ? t h i s . h e a d e r C o l o r : " " , p r i m a r y C o l o r : s L ( t h i s . p r i m a r y C o l o r ) ? t h i s . p r i m a r y C o l o r : " " , n a v B g C o l o r : s L ( t h i s . n a v B g C o l o r ) ? t h i s . n a v B g C o l o r : " " , n a v T e x t C o l o r : s L ( t h i s . n a v T e x t C o l o r ) ? t h i s . n a v T e x t C o l o r : " " , n a v H o v e r B g C o l o r : s L ( t h i s . n a v H o v e r B g C o l o r ) ? t h i s . n a v H o v e r B g C o l o r : " " , n a v H o v e r T e x t C o l o r : s L ( t h i s . n a v H o v e r T e x t C o l o r ) ? t h i s . n a v H o v e r T e x t C o l o r : " " , n a v A c c e n t C o l o r : s L ( t h i s . n a v A c c e n t C o l o r ) ? t h i s . n a v A c c e n t C o l o r : " " } ; r e t u r n t h i s . r e s o l v e d S p e c . s p e c L o a d E r r o r ? e ? B `
$ { "dark" === this . theme ? lL . call ( this , "dark" , a ) : lL . call ( this , "light" , a ) }
2022-03-27 16:42:11 +00:00
< 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 } < / d i v >
2022-06-06 20:13:19 +00:00
` :B `
$ { "dark" === this . theme ? lL . call ( this , "dark" , a ) : lL . call ( this , "light" , a ) }
2022-03-27 16:42:11 +00:00
<!-- Header -- >
$ { nL . call ( this ) }
< main class = "main-content regular-font" part = "section-main-content" >
< slot > < / s l o t >
< div style = "margin:24px; text-align: center;" >
< h1 style = "color: var(--red)" > $ { this . resolvedSpec . info . title } < / h 1 >
< div style = "font-family:var(--font-mono)" > $ { this . resolvedSpec . info . description } < / d i v >
< / d i v >
< / m a i n >
2022-06-06 20:13:19 +00:00
` :this.resolvedSpec.isSpecLoading?B `
$ { "dark" === this . theme ? lL . call ( this , "dark" , a ) : lL . call ( this , "light" , a ) }
2022-03-27 16:42:11 +00:00
< main class = "main-content regular-font" part = "section-main-content" >
< slot > < / s l o t >
< div class = "main-content-inner--${this.renderStyle}-mode" >
< div class = "loader" > < / d i v >
< / d i v >
< / m a i n >
2022-06-06 20:13:19 +00:00
` :B `
$ { "dark" === this . theme ? lL . call ( this , "dark" , a ) : lL . call ( this , "light" , a ) }
2022-03-27 16:42:11 +00:00
<!-- Header -- >
$ { "false" === this . showHeader ? "" : nL . call ( this ) }
<!-- Advanced Search -- >
2022-06-06 20:13:19 +00:00
$ { "false" === this . allowAdvancedSearch ? "" : oL . call ( this ) }
2022-03-27 16:42:11 +00:00
2022-06-06 20:13:19 +00:00
< div id = 'the-main-body' class = "body ${this.cssClasses}" dir = $ { this . pageDirection } >
2022-03-27 16:42:11 +00:00
<!-- 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 > < / s l o t >
< div class = "main-content-inner--${this.renderStyle}-mode" >
2022-06-06 20:13:19 +00:00
$ { ! 0 === this . loading ? B ` <div class="loader"></div> ` : B `
$ { ! 0 === this . loadFailed ? B ` <div style="text-align: center;margin: 16px;"> Unable to load the Spec</div> ` : B `
2022-03-27 16:42:11 +00:00
< div class = "operations-root" @ click = "${e=>{this.handleHref(e)}}" >
2022-06-06 20:13:19 +00:00
$ { "focused" === this . renderStyle ? B ` ${ YR . call ( this ) } ` : B `
$ { "true" === this . showInfo ? BR . call ( this ) : "" }
2022-03-27 16:42:11 +00:00
$ { "true" === this . allowServerSelection ? UR . call ( this ) : "" }
2022-06-06 20:13:19 +00:00
$ { "true" === this . allowAuthentication ? aR . call ( this ) : "" }
2022-03-27 16:42:11 +00:00
< div id = "operations-top" class = "observe-me" >
< slot name = "operations-top" > < / s l o t >
< / d i v >
$ { "read" === this . renderStyle ? IR . call ( this ) : rL . call ( this , t , r , n ) }
` }
< / d i v >
` } ` }
< / d i v >
< slot name = "footer" > < / s l o t >
< / m a i n >
< / d i v >
2022-06-06 20:13:19 +00:00
` }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"},useSummaryToListExamples:{type:String,attribute:"use-summary-to-list-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"},cssFile:{type:String,attribute:"css-file"},cssClasses:{type:String,attribute:"css-classes"},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"},showMethodInNavBar:{type:String,attribute:"show-method-in-nav-bar"},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:{ty
2022-03-27 16:42:11 +00:00
: host {
display : flex ;
flex - direction : column ;
min - width : 360 px ;
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 8 px ;
}
. main - content : : - webkit - scrollbar {
width : 8 px ;
height : 8 px ;
}
. main - content : : - webkit - scrollbar - track {
background : transparent ;
}
. main - content : : - webkit - scrollbar - thumb {
background - color : var ( -- border - color ) ;
}
. section - gap . section - tag {
border - bottom : 1 px solid var ( -- border - color ) ;
}
. section - gap ,
. section - gap -- focused - mode ,
. section - gap -- read - mode {
padding : 0 px 4 px ;
}
. section - tag - header {
position : relative ;
cursor : n - resize ;
padding : 12 px 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 : - 24 px ;
font - size : 20 px ;
top : calc ( 50 % - 14 px ) ;
color : var ( -- primary - color ) ;
content : '⬆' ;
}
. collapsed . section - tag - header : : after {
position : absolute ;
margin - left : - 24 px ;
font - size : 20 px ;
top : calc ( 50 % - 14 px ) ;
color : var ( -- border - color ) ;
content : '⬇' ;
}
. collapsed . section - tag - header : hover : : after {
color : var ( -- primary - color ) ;
}
. collapsed . section - tag - body {
display : none ;
}
. logo {
height : 36 px ;
width : 36 px ;
margin - left : 5 px ;
}
. only - large - screen - flex ,
. only - large - screen {
display : none ;
}
. tag . title {
text - transform : uppercase ;
}
2022-06-06 20:13:19 +00:00
. main - header {
2022-03-27 16:42:11 +00:00
background - color : var ( -- header - bg ) ;
color : var ( -- header - fg ) ;
width : 100 % ;
}
. header - title {
font - size : calc ( var ( -- font - size - regular ) + 8 px ) ;
padding : 0 8 px ;
}
input . header - input {
background : var ( -- header - color - darker ) ;
color : var ( -- header - fg ) ;
border : 1 px solid var ( -- header - color - border ) ;
flex : 1 ;
padding - right : 24 px ;
border - radius : 3 px ;
}
input . header - input : : placeholder {
opacity : 0.4 ;
}
. loader {
margin : 16 px auto 16 px auto ;
border : 4 px solid var ( -- bg3 ) ;
border - radius : 50 % ;
border - top : 4 px solid var ( -- primary - color ) ;
width : 36 px ;
height : 36 px ;
animation : spin 2 s linear infinite ;
}
. expanded - endpoint - body {
position : relative ;
padding : 6 px 0 px ;
}
. expanded - endpoint - body . deprecated { filter : opacity ( 0.6 ) ; }
. divider {
border - top : 2 px solid var ( -- border - color ) ;
margin : 24 px 0 ;
width : 100 % ;
}
. tooltip {
cursor : pointer ;
border : 1 px solid var ( -- border - color ) ;
border - left - width : 4 px ;
margin - left : 2 px ;
}
. tooltip a {
color : var ( -- fg2 ) ;
text - decoration : none ;
}
. tooltip - text {
color : var ( -- fg2 ) ;
max - width : 400 px ;
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 ( 0 deg ) ; }
100 % { transform : rotate ( 360 deg ) ; }
}
2022-06-06 20:13:19 +00:00
. nav - method { font - weight : bold ; margin - right : 4 px ; font - size : calc ( var ( -- font - size - small ) - 2 px ) ; white - space : nowrap ; }
. nav - method . false { display : none ; }
. nav - method . as - colored - text . get { color : var ( -- nav - get - color ) ; }
. nav - method . as - colored - text . put { color : var ( -- nav - put - color ) ; }
. nav - method . as - colored - text . post { color : var ( -- nav - post - color ) ; }
. nav - method . as - colored - text . delete { color : var ( -- nav - delete - color ) ; }
. nav - method . as - colored - text . head , . nav - method . as - colored - text . patch , . nav - method . as - colored - text . options { color : var ( -- nav - head - color ) ; }
. nav - method . as - colored - block {
padding : 1 px 4 px ;
min - width : 30 px ;
border - radius : 4 px 0 0 4 px ;
color : # 000 ;
}
. nav - method . as - colored - block . get { background - color : var ( -- blue ) ; }
. nav - method . as - colored - block . put { background - color : var ( -- orange ) ; }
. nav - method . as - colored - block . post { background - color : var ( -- green ) ; }
. nav - method . as - colored - block . delete { background - color : var ( -- red ) ; }
. nav - method . as - colored - block . head , . nav - method . as - colored - block . patch , . nav - method . as - colored - block . options {
background - color : var ( -- yellow ) ;
}
2022-03-27 16:42:11 +00:00
@ media only screen and ( min - width : 768 px ) {
. nav - bar {
width : 260 px ;
display : flex ;
}
. only - large - screen {
display : block ;
}
. only - large - screen - flex {
display : flex ;
}
. section - gap {
padding : 0 0 0 24 px ;
}
. section - gap -- focused - mode {
padding : 24 px 8 px ;
}
. section - gap -- read - mode {
padding : 24 px 8 px ;
}
. endpoint - body {
position : relative ;
padding : 36 px 0 48 px 0 ;
}
}
@ media only screen and ( min - width : 1024 px ) {
. nav - bar {
width : $ { s ( "default" === this . fontSize ? "300px" : "large" === this . fontSize ? "315px" : "330px" ) } ;
display : flex ;
}
. section - gap -- focused - mode {
padding : 12 px 80 px 12 px 80 px ;
}
. section - gap -- read - mode {
padding : 24 px 80 px 12 px 80 px ;
}
2022-06-06 20:13:19 +00:00
} ` ,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.useSummaryToListExamples&&"true, false,".includes( ` $ { this . useSummaryToListExamples } , ` )||(this.useSummaryToListExamples="false"),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.showMethodInNavBar&&"false, as-plain-text, as-colored-text, as-colored-block,".includes( ` $ { this . showMethodInNavBar } , ` )||(this.showMethodInNavBar="false"),this.usePathInNavBar&&"true, false,
2022-03-27 16:42:11 +00:00
: host {
display : flex ;
flex - direction : column ;
min - width : 360 px ;
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 : 768 px ) {
. only - large - screen {
display : block ;
}
. only - large - screen - flex {
display : flex ;
}
2022-06-06 20:13:19 +00:00
} ` ]}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.useSummaryToListExamples&&"true, false,".includes( ` $ { this . useSummaryToListExamples } , ` )||(this.useSummaryToListExamples="false"),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="",a="",o="";if("api-key-name"===e?this.getAttribute("api-key-location")&&this.getAttribute("api-key-value")&&(n=r,a=this.getAttribute("api-key-location"),o=this.getAttribute("api-key-value"),t=!0):"api-key-location"===e?this.getAttribute("api-key-name")&&this.getAttribute("api-key-value")&&(a=r,n=this.getAttribute("api-key-name"),o=this.getAttribute("api-key-value"),t=!0):"api-key-value"===e&&this.getAttribute("api-key-name")&&this.getAttribute("api-key-location")&&(o=r,a=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=a,e.value=o,e.finalKeyValue=o):this.resolvedSpec.securitySchemes.push({apiKeyId:rt,description:"api
2022-03-27 16:42:11 +00:00
< nav class = 'nav-bar' part = "section-navbar" >
< slot name = "nav-logo" class = "logo" > < / s l o t >
< 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;" > & # x21a9 ; < / d i v >
< / d i v >
< nav style = "flex:1" class = 'nav-scroll' part = "section-navbar-scroll" >
2022-06-06 20:13:19 +00:00
$ { this . resolvedSpec . schemaAndExamples . map ( ( e => B `
2022-03-27 16:42:11 +00:00
< div class = 'nav-bar-path' data - content - id = '${e.elementId}' id = 'link-${e.elementId}'
@ click = '${e=>{this.scrollToEventTarget(e,!1)}}'
>
$ { e . name }
< / d i v > ` ) ) }
< / n a v >
< / n a v >
2022-06-06 20:13:19 +00:00
` }function hL(){return B `
$ { "true" === this . showInfo ? BR . call ( this ) : "" }
2022-03-27 16:42:11 +00:00
< div style = "font-size:var(--font-size-regular);" >
2022-06-06 20:13:19 +00:00
$ { 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 , B `
2022-03-27 16:42:11 +00:00
< 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 } < / d i v >
< span class = "json-schema-description m-markdown " > $ { HP ( qe ( e . description || "" ) ) } < / s p a n >
< / d i v >
< 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"
> < / s c h e m a - t r e e >
< / d i v >
< 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);" >
2022-06-06 20:13:19 +00:00
$ { r . length > 1 ? B ` <select style="min-width:100px; max-width:100%" @change=' ${ t => this . onSelectExample ( t , e ) } '>
$ { r . map ( ( t => B `
2022-03-27 16:42:11 +00:00
< option value = "${t.exampleId}" ? selected = $ { t . exampleId === e . selectedExample } >
$ { t . exampleSummary . length > 80 ? t . exampleId : t . exampleSummary }
< / o p t i o n > ` ) ) }
2022-06-06 20:13:19 +00:00
< / s e l e c t > ` : B ` < d i v s t y l e = " f o n t - s i z e : v a r ( - - f o n t - s i z e - s m a l l ) ; f o n t - w e i g h t : 7 0 0 ; m a r g i n : 5 p x 0 " > $ { r [ 0 ] . e x a m p l e S u m m a r y } < / d i v > ` }
$ { r . map ( ( t => B `
2022-03-27 16:42:11 +00:00
< json - tree
. data = "${t.exampleValue}"
data - example = "${t.exampleId}"
class = "example"
style = "margin-top:16px; display: ${t.exampleId===e.selectedExample?" flex ":" none "}"
> < / j s o n - t r e e > ` ) ) }
< / d i v >
< / d i v >
< / s e c t i o n > ` } ) ) }
< / d i v >
2022-06-06 20:13:19 +00:00
` }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?B `
2022-03-27 16:42:11 +00:00
$ { "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 } < / d i v >
2022-06-06 20:13:19 +00:00
` :B `
2022-03-27 16:42:11 +00:00
$ { "dark" === this . theme ? lL . call ( this , "dark" , t ) : lL . call ( this , "light" , t ) }
<!-- Header -- >
$ { nL . call ( this ) }
< h1 > Header < / h 1 >
< main class = "main-content regular-font" part = "section-main-content" >
< slot > < / s l o t >
< div style = "margin:24px; text-align: center;" >
< h1 style = "color: var(--red)" > $ { this . resolvedSpec . info . title } < / h 1 >
< div style = "font-family:var(--font-mono)" > $ { this . resolvedSpec . info . description } < / d i v >
< / d i v >
< / m a i n >
2022-06-06 20:13:19 +00:00
` :this.resolvedSpec.isSpecLoading?B `
2022-03-27 16:42:11 +00:00
$ { "dark" === this . theme ? lL . call ( this , "dark" , t ) : lL . call ( this , "light" , t ) }
< main class = "main-content regular-font" part = "section-main-content" >
< slot > < / s l o t >
< div class = "main-content-inner--${this.renderStyle}-mode" >
< div class = "loader" > < / d i v >
< / d i v >
< / m a i n >
2022-06-06 20:13:19 +00:00
` :B `
2022-03-27 16:42:11 +00:00
$ { "dark" === this . theme ? lL . call ( this , "dark" , t ) : lL . call ( this , "light" , t ) }
<!-- Header -- >
$ { "false" === this . showHeader ? "" : nL . call ( this ) }
2022-06-06 20:13:19 +00:00
< div id = 'the-main-body' class = "body ${this.cssClasses}" dir = $ { this . pageDirection } >
2022-03-27 16:42:11 +00:00
<!-- Side Nav -- >
$ { dL . call ( this ) }
<!-- Main Content -- >
< main class = "main-content regular-font" part = "section-main-content" >
< slot > < / s l o t >
< div class = "main-content-inner--${this.renderStyle}-mode" >
2022-06-06 20:13:19 +00:00
$ { ! 0 === this . loading ? B ` <div class="loader"></div> ` : B `
$ { ! 0 === this . loadFailed ? B ` <div style="text-align: center;margin: 16px;"> Unable to load the Spec</div> ` : B `
2022-03-27 16:42:11 +00:00
< div class = "operations-root" @ click = "${e=>{this.handleHref(e)}}" >
$ { hL . call ( this ) }
< / d i v >
` } ` }
< / d i v >
< slot name = "footer" > < / s l o t >
< / m a i n >
< / d i v >
` }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 : 360 px ;
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 : 230 px ;
display : flex ;
}
. main - content {
margin : 0 ;
padding : 16 px ;
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 8 px ;
}
. main - content : : - webkit - scrollbar {
width : 8 px ;
height : 8 px ;
}
. main - content : : - webkit - scrollbar - track {
background : transparent ;
}
. main - content : : - webkit - scrollbar - thumb {
background - color : var ( -- border - color ) ;
}
2022-06-06 20:13:19 +00:00
. main - header {
2022-03-27 16:42:11 +00:00
background - color : var ( -- header - bg ) ;
color : var ( -- header - fg ) ;
width : 100 % ;
}
. header - title {
font - size : calc ( var ( -- font - size - regular ) + 8 px ) ;
padding : 0 8 px ;
}
input . header - input {
background : var ( -- header - color - darker ) ;
color : var ( -- header - fg ) ;
border : 1 px solid var ( -- header - color - border ) ;
flex : 1 ;
padding - right : 24 px ;
border - radius : 3 px ;
}
input . header - input : : placeholder {
opacity : 0.4 ;
}
. loader {
margin : 16 px auto 16 px auto ;
border : 4 px solid var ( -- bg3 ) ;
border - radius : 50 % ;
border - top : 4 px solid var ( -- primary - color ) ;
width : 36 px ;
height : 36 px ;
animation : spin 2 s linear infinite ;
}
@ media only screen and ( min - width : 768 px ) {
. only - large - screen {
display : block ;
}
. only - large - screen - flex {
display : flex ;
}
2022-06-06 20:13:19 +00:00
} ` ]}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]
2022-03-27 16:42:11 +00:00
//# sourceMappingURL=rapidoc-min.js.map