openapi-explorer 0.10.419 → 0.10.421

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

@@ -3,11 +3,11 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
 var _marked = require("marked");
 
-var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
+var _unsafeHtml = require("lit/directives/unsafe-html.js");
 
 var _schemaUtils = require("../utils/schema-utils");
 
@@ -31,7 +31,7 @@ require("./schema-table");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class ApiResponse extends _litElement.LitElement {
+class ApiResponse extends _lit.LitElement {
   constructor() {
     super();
     this.selectedStatus = '';
@@ -91,12 +91,12 @@ class ApiResponse extends _litElement.LitElement {
     };
   }
 
-  static get styles() {
-    return [_fontStyles.default, _flexStyles.default, _tabStyles.default, _tableStyles.default, _inputStyles.default, _borderStyles.default, (0, _litElement.css)`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:#333;color:#fff}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
+  static finalizeStyles() {
+    return [_fontStyles.default, _flexStyles.default, _tabStyles.default, _tableStyles.default, _inputStyles.default, _borderStyles.default, (0, _lit.css)`.resp-head{vertical-align:middle;padding:16px 0 8px}.resp-head.divider{border-top:1px solid var(--border-color);margin-top:10px}.resp-status{font-weight:700;font-size:calc(var(--font-size-small) + 1px)}.resp-descr{font-size:calc(var(--font-size-small) + 1px)}.top-gap{margin-top:16px}.example-panel{font-size:var(--font-size-small);margin:0}.generic-tree{background:#333;color:#fff}.example-panel.generic-tree{margin-top:8px}pre.generic-tree{border:none;padding:8px 10px 10px}.example-panel select{margin-left:8px;padding-top:8px;min-width:100px;max-width:100%}.example-panel .example{padding:0 12px}.focused-mode,.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}`];
   }
 
   render() {
-    return (0, _litElement.html)` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : (0, _languages.getI18nText)('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
+    return (0, _lit.html)` <div class="col regular-font response-panel ${this.renderStyle}-mode"> <div class="${this.callback === 'true' ? 'tiny-title' : 'req-res-title'}"> ${this.callback === 'true' ? 'CALLBACK RESPONSE' : (0, _languages.getI18nText)('operations.response')} </div> <div> ${this.responseTemplate()} <div> </div> </div></div>`;
   }
 
   resetSelection() {
@@ -153,8 +153,8 @@ class ApiResponse extends _litElement.LitElement {
       this.mimeResponsesForEachStatus[statusCode] = allMimeResp;
     }
 
-    return (0, _litElement.html)`<div class="row" style="flex-wrap:wrap"> ${Object.keys(this.responses).map(respStatus => (0, _litElement.html)` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
-    ? '' : (0, _litElement.html)` <button @click="${() => {
+    return (0, _lit.html)`<div class="row" style="flex-wrap:wrap"> ${Object.keys(this.responses).map(respStatus => (0, _lit.html)` ${respStatus === '$$ref' // Swagger-Client parser creates '$$ref' object if JSON references are used to create responses - this should be ignored
+    ? '' : (0, _lit.html)` <button @click="${() => {
       this.selectedStatus = respStatus;
 
       if (this.responses[respStatus].content && Object.keys(this.responses[respStatus].content)[0]) {
@@ -162,25 +162,25 @@ class ApiResponse extends _litElement.LitElement {
       } else {
         this.selectedMimeType = undefined;
       }
-    }}" class="m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}" part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style="margin:8px 4px 0 0"> ${respStatus} </button>`}`)} </div> ${Object.keys(this.responses).map(status => (0, _litElement.html)` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.responses[status] && this.responses[status].description || ''))}</span> ${this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0 ? (0, _litElement.html)`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}` : ''} </div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0 ? '' : (0, _litElement.html)` <div class="tab-panel col"> <div class="tab-buttons row" @click="${e => {
+    }}" class="m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}" part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style="margin:8px 4px 0 0"> ${respStatus} </button>`}`)} </div> ${Object.keys(this.responses).map(status => (0, _lit.html)` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.responses[status] && this.responses[status].description || ''))}</span> ${this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0 ? (0, _lit.html)`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}` : ''} </div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0 ? '' : (0, _lit.html)` <div class="tab-panel col"> <div class="tab-buttons row" @click="${e => {
       if (e.target.tagName.toLowerCase() === 'button') {
         this.activeSchemaTab = e.target.dataset.tab;
       }
-    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _litElement.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _litElement.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _litElement.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
+    }}"> <button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab="model">${(0, _languages.getI18nText)('operations.model')}</button> <button class="tab-btn ${this.activeSchemaTab === 'body' ? 'active' : ''}" data-tab="body">${(0, _languages.getI18nText)('operations.example')}</button> <div style="flex:1"></div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1 ? (0, _lit.html)`<span class="small-font-size gray-text" style="align-self:center;margin-top:8px"> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>` : (0, _lit.html)`${this.mimeTypeDropdownTemplate(Object.keys(this.mimeResponsesForEachStatus[status]))}`} </div> ${this.activeSchemaTab === 'body' ? (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>` : (0, _lit.html)`<div class="tab-content col" style="flex:1"> ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])} </div>`} </div> `}</div>`)} `;
   }
 
   responseHeaderListTemplate(respHeaders) {
-    return (0, _litElement.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _languages.getI18nText)('operations.response-headers')}</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => {
+    return (0, _lit.html)` <div style="padding:16px 0 8px 0" class="resp-headers small-font-size bold-text">${(0, _languages.getI18nText)('operations.response-headers')}</div> <table role="presentation" style="border-collapse:collapse;margin-bottom:16px;border:1px solid var(--border-color);border-radius:var(--border-radius)" class="small-font-size mono-font"> ${respHeaders.map(v => {
       var _v$schema, _v$schema2;
 
-      return (0, _litElement.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:120px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td style="padding:4px;vertical-align:baseline;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${((_v$schema = v.schema) === null || _v$schema === void 0 ? void 0 : _v$schema.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${((_v$schema2 = v.schema) === null || _v$schema2 === void 0 ? void 0 : _v$schema2.example) || ''} </td> </tr> `;
+      return (0, _lit.html)` <tr> <td style="padding:8px;vertical-align:baseline;min-width:120px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td style="padding:4px;vertical-align:baseline;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${((_v$schema = v.schema) === null || _v$schema === void 0 ? void 0 : _v$schema.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${((_v$schema2 = v.schema) === null || _v$schema2 === void 0 ? void 0 : _v$schema2.example) || ''} </td> </tr> `;
     })} </table>`;
   }
 
   mimeTypeDropdownTemplate(mimeTypes) {
-    return (0, _litElement.html)` <select aria-label="mime type" @change="${e => {
+    return (0, _lit.html)` <select aria-label="mime type" @change="${e => {
       this.selectedMimeType = e.target.value;
-    }}" style="margin-bottom:-1px;z-index:1"> ${mimeTypes.map(mimeType => (0, _litElement.html)`<option value="${mimeType}" ?selected="${mimeType === this.selectedMimeType}"> ${mimeType} </option>`)} </select>`;
+    }}" style="margin-bottom:-1px;z-index:1"> ${mimeTypes.map(mimeType => (0, _lit.html)`<option value="${mimeType}" ?selected="${mimeType === this.selectedMimeType}"> ${mimeType} </option>`)} </select>`;
   }
 
   onSelectExample(e) {
@@ -193,18 +193,18 @@ class ApiResponse extends _litElement.LitElement {
 
   mimeExampleTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
-      return (0, _litElement.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
+      return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
     }
 
-    return (0, _litElement.html)` ${mimeRespDetails.examples.length === 1 ? (0, _litElement.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _litElement.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _litElement.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} ${mimeRespDetails.examples[0].exampleFormat === 'json' ? (0, _litElement.html)` <json-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.examples[0].exampleValue}" class="example-panel pad-top-8"></json-tree>` : (0, _litElement.html)` <pre class="example-panel generic-tree border-top pad-top-8">${mimeRespDetails.examples[0].exampleValue}</pre> `}` : (0, _litElement.html)` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => (0, _litElement.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _litElement.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _litElement.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _litElement.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} ${v.exampleFormat === 'json' ? (0, _litElement.html)` <json-tree render-style="${this.renderStyle}" .data="${v.exampleValue}"></json-tree>` : (0, _litElement.html)`<pre class="generic-tree">${v.exampleValue}</pre>`} </div> `)} </span> `} `;
+    return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} ${mimeRespDetails.examples[0].exampleFormat === 'json' ? (0, _lit.html)` <json-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.examples[0].exampleValue}" class="example-panel pad-top-8"></json-tree>` : (0, _lit.html)` <pre class="example-panel generic-tree border-top pad-top-8">${mimeRespDetails.examples[0].exampleValue}</pre> `}` : (0, _lit.html)` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => (0, _lit.html)`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(v.exampleDescription || ''))} </div>` : ''} ${v.exampleFormat === 'json' ? (0, _lit.html)` <json-tree render-style="${this.renderStyle}" .data="${v.exampleValue}"></json-tree>` : (0, _lit.html)`<pre class="generic-tree">${v.exampleValue}</pre>`} </div> `)} </span> `} `;
   }
 
   mimeSchemaTemplate(mimeRespDetails) {
     if (!mimeRespDetails) {
-      return (0, _litElement.html)` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
+      return (0, _lit.html)` <pre style="color:var(--red)" class="${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top'}"> Schema not found</pre> `;
     }
 
-    return (0, _litElement.html)` ${this.schemaStyle === 'table' ? (0, _litElement.html)` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : (0, _litElement.html)` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
+    return (0, _lit.html)` ${this.schemaStyle === 'table' ? (0, _lit.html)` <schema-table render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-table> ` : (0, _lit.html)` <schema-tree render-style="${this.renderStyle}" .data="${mimeRespDetails.schemaTree}" class="example-panel ${this.renderStyle === 'read' ? 'border pad-8-16' : 'pad-top-8'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="false" schema-hide-write-only="${this.schemaHideWriteOnly}"> </schema-tree>`}`;
   }
   /* eslint-enable indent */
 

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

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
 var _commonUtils = require("../utils/common-utils");
 
@@ -17,7 +17,7 @@ var _inputStyles = _interopRequireDefault(require("../styles/input-styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class JsonTree extends _litElement.LitElement {
+class JsonTree extends _lit.LitElement {
   static get properties() {
     return {
       data: {
@@ -30,34 +30,34 @@ class JsonTree extends _litElement.LitElement {
     };
   }
 
-  static get styles() {
-    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, (0, _litElement.css)`:host{display:flex}.json-tree{background:#333;color:#fff;padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{max-height:10000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.open-bracket.collapsed+.inside-bracket-wrapper{transition:max-height 1.2s ease-in-out -1.1s;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
+  static finalizeStyles() {
+    return [_fontStyles.default, _borderStyles.default, _inputStyles.default, (0, _lit.css)`:host{display:flex}.json-tree{background:#333;color:#fff;padding:12px;min-height:30px;font-family:var(--font-mono);font-size:var(--font-size-small);overflow:hidden;word-break:break-all;flex:1;line-height:calc(var(--font-size-small) + 6px)}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed.open-bracket{padding-right:0}.tree>.open-bracket{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.inside-bracket-wrapper{max-height:10000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.open-bracket.collapsed+.inside-bracket-wrapper{transition:max-height 1.2s ease-in-out -1.1s;max-height:0}.inside-bracket{padding-left:16px;border-left:1px dotted var(--border-color)}.string{color:var(--green)}.number{color:var(--blue)}.null{color:var(--red)}.boolean{color:var(--orange)}.object{color:#fff}.toolbar{display:none}.tree .toolbar{display:flex;justify-content:space-between;width:100%}.tree .item{border-bottom:1px dotted transparent}.toolbar-item{cursor:pointer;padding:5px 0 5px 1rem;margin:0 1rem!important;color:#38b3f9;flex-shrink:0}.tree .toolbar .toolbar-item{display:none}.inside-bracket.xxx-of{padding:5px 0;border-style:dotted;border-width:0 0 1px 0;border-color:var(--primary-color)}.schema-root-type.xxx-of{display:none}.toolbar-item:first-of-type{margin:0 2px 0 0}@media only screen and (min-width:576px){.key-descr{display:block}.tree .toolbar .toolbar-item{display:block}.toolbar{display:flex}}.toolbar-backup{position:absolute;right:6px;display:flex;align-items:center}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
+    return (0, _lit.html)` <div class="json-tree tree"> <div class="toolbar"> <div>&nbsp;</div> <div class="toolbar-item"> <button class="toolbar-copy-btn" part="btn btn-fill" @click="${e => {
       (0, _commonUtils.copyToClipboard)(JSON.stringify(this.data, null, 2), e);
     }}">${(0, _languages.getI18nText)('operations.copy')}</button> </div> </div> ${this.generateTree(this.data, true)} </div> `;
   }
 
   generateTree(data, isLast = false) {
     if (data === null) {
-      return (0, _litElement.html)`<div class="null" style="display:inline">null</div>`;
+      return (0, _lit.html)`<div class="null" style="display:inline">null</div>`;
     }
 
     if (typeof data === 'object' && data instanceof Date === false) {
       const detailType = Array.isArray(data) ? 'array' : 'pure_object';
 
       if (Object.keys(data).length === 0) {
-        return (0, _litElement.html)`${Array.isArray(data) ? '[ ],' : '{ },'}`;
+        return (0, _lit.html)`${Array.isArray(data) ? '[ ],' : '{ },'}`;
       }
 
-      return (0, _litElement.html)` <div class="open-bracket ${detailType === 'array' ? 'array' : 'object'}" @click="${this.toggleExpand}"> ${detailType === 'array' ? '[' : '{'}</div> <div class="inside-bracket-wrapper"> <div class="inside-bracket"> ${Object.keys(data).map((key, i, a) => (0, _litElement.html)` <div class="item"> ${detailType === 'pure_object' ? (0, _litElement.html)`"${key}":` : ''} ${this.generateTree(data[key], i === a.length - 1)} </div>`)} </div> <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div> </div> `;
+      return (0, _lit.html)` <div class="open-bracket ${detailType === 'array' ? 'array' : 'object'}" @click="${this.toggleExpand}"> ${detailType === 'array' ? '[' : '{'}</div> <div class="inside-bracket-wrapper"> <div class="inside-bracket"> ${Object.keys(data).map((key, i, a) => (0, _lit.html)` <div class="item"> ${detailType === 'pure_object' ? (0, _lit.html)`"${key}":` : ''} ${this.generateTree(data[key], i === a.length - 1)} </div>`)} </div> <div class="close-bracket">${detailType === 'array' ? ']' : '}'}${isLast ? '' : ','}</div> </div> `;
     }
 
-    return typeof data === 'string' || data instanceof Date ? (0, _litElement.html)`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}` : (0, _litElement.html)`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
+    return typeof data === 'string' || data instanceof Date ? (0, _lit.html)`<span class="${typeof data}">"${data}"</span>${isLast ? '' : ','}` : (0, _lit.html)`<span class="${typeof data}">${data}</span>${isLast ? '' : ','}`;
   }
   /* eslint-enable indent */
 

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

@@ -3,11 +3,11 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
 var _marked = require("marked");
 
-var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
+var _unsafeHtml = require("lit/directives/unsafe-html.js");
 
 var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
 
@@ -15,7 +15,7 @@ var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class SchemaTable extends _litElement.LitElement {
+class SchemaTable extends _lit.LitElement {
   static get properties() {
     return {
       schemaExpandLevel: {
@@ -57,14 +57,14 @@ class SchemaTable extends _litElement.LitElement {
     }
   }
 
-  static get styles() {
-    return [_fontStyles.default, _schemaStyles.default, (0, _litElement.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
+  static finalizeStyles() {
+    return [_fontStyles.default, _schemaStyles.default, (0, _lit.css)`.table{font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.table .tr{width:calc(100% - 5px);padding:0 0 0 5px;border-bottom:1px dotted var(--light-border-color)}.table .td{padding:4px 0}.table .key{width:240px}.key.deprecated .key-label{text-decoration:line-through}.table .key-type{white-space:normal;width:150px}.obj-toggle{padding:0 2px;border-radius:2px;border:1px solid transparent;display:inline-block;margin-left:-16px;color:var(--primary-color);cursor:pointer;font-size:calc(var(--font-size-small) + 4px);font-family:var(--font-mono);background-clip:border-box}.obj-toggle:hover{border-color:var(--primary-color)}.tr.expanded+.object-body{display:block}.tr.collapsed+.object-body{display:none}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div class="table"> <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:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
+    return (0, _lit.html)` ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : ''} <div class="table"> <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:700;color:var(--fg)"> Field </div> <div class="key-type" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}` : ''} </div> </div> `;
   }
 
   generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
@@ -73,11 +73,11 @@ class SchemaTable extends _litElement.LitElement {
     const leftPadding = 16 * newIndentLevel; // 2 space indentation at each level
 
     if (!data) {
-      return (0, _litElement.html)`<div class="null" style="display:inline">null</div>`;
+      return (0, _lit.html)`<div class="null" style="display:inline">null</div>`;
     }
 
     if (Object.keys(data).length === 0) {
-      return (0, _litElement.html)`<span class="td key object" style="padding-left:${leftPadding}px">${key}</span>`;
+      return (0, _lit.html)`<span class="td key object" style="padding-left:${leftPadding}px">${key}</span>`;
     }
 
     let keyLabel = '';
@@ -123,7 +123,7 @@ class SchemaTable extends _litElement.LitElement {
       }
 
       const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
-      return (0, _litElement.html)` ${newSchemaLevel >= 0 && key ? (0, _litElement.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? (0, _litElement.html)` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : (0, _litElement.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _litElement.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</div> </div>` : (0, _litElement.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _litElement.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? (0, _litElement.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} <div> </div></div>`;
+      return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.html)` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel || keyDescr ? (0, _lit.html)` <span class="obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}" data-obj="${keyLabel}" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> ${schemaLevel < this.schemaExpandLevel ? '-' : '+'} </span>` : ''} ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px"> ${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} ${data['::type'] === 'xxx-of' && dataType === 'array' ? (0, _lit.html)`<span style="color:var(--primary-color)">ARRAY</span>` : ''} </div> <div class="td key-type">${(data['::type'] || '').includes('xxx-of') ? '' : detailObjType}</div> <div class="td key-descr m-markdown-small" style="line-height:1.7">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))}</div> </div>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? (0, _lit.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} <div> </div></div>`;
     } // For Primitive Data types
 
 
@@ -150,7 +150,7 @@ class SchemaTable extends _litElement.LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _litElement.html)`${keyLabel ? (0, _litElement.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _litElement.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type"> <span>${dataType === 'array' ? '[' : ''}<span class="${dataTypeCss}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> <span class="${dataTypeCss}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? (0, _litElement.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</span>` : ''} <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _litElement.html)` ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
+    return (0, _lit.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="padding-left:${leftPadding}px"> ${keyLabel && keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.html)`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type"> <span>${dataType === 'array' ? '[' : ''}<span class="${dataTypeCss}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> <span class="${dataTypeCss}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${readOrWriteOnly} </span> </div> <div class="td key-descr"> ${dataType === 'array' ? (0, _lit.html)`<span class="m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(description))}</span>` : ''} <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${constraint ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

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

@@ -3,11 +3,11 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
 var _marked = require("marked");
 
-var _unsafeHtml = require("lit-html/directives/unsafe-html.js");
+var _unsafeHtml = require("lit/directives/unsafe-html.js");
 
 var _languages = require("../languages");
 
@@ -19,7 +19,7 @@ var _borderStyles = _interopRequireDefault(require("../styles/border-styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class SchemaTree extends _litElement.LitElement {
+class SchemaTree extends _lit.LitElement {
   static get properties() {
     return {
       data: {
@@ -61,14 +61,14 @@ class SchemaTree extends _litElement.LitElement {
     }
   }
 
-  static get styles() {
-    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, (0, _litElement.css)`.tree{min-height:30px;background:#333;padding:12px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.inside-bracket-wrapper{max-height:10000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.tr.collapsed+.inside-bracket-wrapper{transition:max-height 1.2s ease-in-out -1.1s;max-height:0}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of.option{border-left:1px solid transparent}`];
+  static finalizeStyles() {
+    return [_fontStyles.default, _schemaStyles.default, _borderStyles.default, (0, _lit.css)`.tree{min-height:30px;background:#333;padding:12px;color:#fff;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.key.deprecated .key-label{text-decoration:line-through}.open-bracket{display:inline-block;padding:0 20px 0 0;cursor:pointer;border:1px solid transparent;border-radius:3px}.collapsed .open-bracket{padding-right:0}.td.key>.open-bracket:first-child{margin-left:-2px}.open-bracket:hover{color:var(--primary-color);background-color:var(--hover-color);border:1px solid var(--border-color)}.close-bracket{display:inline-block;font-family:var(--font-mono)}.inside-bracket-wrapper{max-height:10000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.tr.collapsed+.inside-bracket-wrapper{transition:max-height 1.2s ease-in-out -1.1s;max-height:0}.inside-bracket.array,.inside-bracket.object{border-left:1px dotted var(--border-color)}.inside-bracket.xxx-of.option{border-left:1px solid transparent}`];
   }
   /* eslint-disable indent */
 
 
   render() {
-    return (0, _litElement.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _litElement.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _litElement.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _languages.getI18nText)('schemas.collapse-desc') : (0, _languages.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _litElement.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _litElement.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _languages.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
+    return (0, _lit.html)` <div class="tree"> <div class="toolbar"> ${this.data && this.data['::description'] ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(this.data['::description'] || ''))}</span>` : (0, _lit.html)`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _languages.getI18nText)('schemas.collapse-desc') : (0, _languages.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _languages.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
   }
 
   toggleSchemaDescription() {
@@ -78,11 +78,11 @@ class SchemaTree extends _litElement.LitElement {
 
   generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', description = '', schemaLevel = 0, indentLevel = 0) {
     if (!data) {
-      return (0, _litElement.html)`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' ? (0, _litElement.html)`<span class="mono-font"> [ ] </span>` : dataType === 'object' ? (0, _litElement.html)`<span class="mono-font"> { } </span>` : (0, _litElement.html)`<span class="mono-font"> schema undefined </span>`} </div>`;
+      return (0, _lit.html)`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' ? (0, _lit.html)`<span class="mono-font"> [ ] </span>` : dataType === 'object' ? (0, _lit.html)`<span class="mono-font"> { } </span>` : (0, _lit.html)`<span class="mono-font"> schema undefined </span>`} </div>`;
     }
 
     if (Object.keys(data).length === 0) {
-      return (0, _litElement.html)`<span class="key object">${key}:{ }</span>`;
+      return (0, _lit.html)`<span class="key object">${key}:{ }</span>`;
     }
 
     let keyLabel = '';
@@ -109,17 +109,17 @@ class SchemaTree extends _litElement.LitElement {
     if (data['::type'] === 'object') {
       if (dataType === 'array') {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
         } else {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
         }
 
         closeBracket = '}]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _litElement.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
         } else {
-          openBracket = (0, _litElement.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
         }
 
         closeBracket = '}';
@@ -129,26 +129,26 @@ class SchemaTree extends _litElement.LitElement {
         const arrType = arrayType !== 'object' ? arrayType : '';
 
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
         } else {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
         }
 
         closeBracket = ']]';
       } else {
         if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
         } else {
-          openBracket = (0, _litElement.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+          openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
         }
 
         closeBracket = ']';
       }
     } else if (data['::type'] === 'xxx-of' && dataType === 'array') {
       if (schemaLevel < this.schemaExpandLevel) {
-        openBracket = (0, _litElement.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
+        openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
       } else {
-        openBracket = (0, _litElement.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
+        openBracket = (0, _lit.html)`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
       }
 
       closeBracket = ']';
@@ -164,7 +164,7 @@ class SchemaTree extends _litElement.LitElement {
       }
 
       const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
-      return (0, _litElement.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _litElement.html)`<span style="color:var(--red)">*</span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _litElement.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _litElement.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? (0, _litElement.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _litElement.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
+      return (0, _lit.html)` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' || key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.html)`<span style="color:var(--red)">*</span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(displayLine))} </span> </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' || data['::type'] === 'xxx-of-array' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => !['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || data[dataKey]['::type'] === 'array' && data[dataKey]['::type'] === 'object' ? (0, _lit.html)`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
     } // For Primitive Data types
 
 
@@ -191,7 +191,7 @@ class SchemaTree extends _litElement.LitElement {
     }
 
     const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return (0, _litElement.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _litElement.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? (0, _litElement.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _litElement.html)`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${dataTypeCss}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _litElement.html)` ${constraint ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _litElement.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
+    return (0, _lit.html)` <div class="tr primitive"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style="color:var(--red)">*</span>:` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${dataTypeCss}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="font-family:var(--font-mono);vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _marked.marked)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${constraint ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraint}</div><br>` : ''} ${defaultValue ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
   }
   /* eslint-enable indent */
 

package/dist/lib/components/tag-input.js

@@ -3,12 +3,12 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
-class TagInput extends _litElement.LitElement {
+class TagInput extends _lit.LitElement {
   render() {
-    const tagItemTemplate = (0, _litElement.html)`${(this.value || []).filter(v => v.trim()).map(v => (0, _litElement.html)`<span class="tag">${v}</span>`)}`;
-    return (0, _litElement.html)` <div class="tags" tabindex="0"> ${tagItemTemplate} <input type="text" class="editor" @paste="${e => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}"> </div> `;
+    const tagItemTemplate = (0, _lit.html)`${(this.value || []).filter(v => v.trim()).map(v => (0, _lit.html)`<span class="tag">${v}</span>`)}`;
+    return (0, _lit.html)` <div class="tags" tabindex="0"> ${tagItemTemplate} <input type="text" class="editor" @paste="${e => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}"> </div> `;
   }
 
   static get properties() {
@@ -62,8 +62,8 @@ class TagInput extends _litElement.LitElement {
     }
   }
 
-  static get styles() {
-    return [(0, _litElement.css)`.tags{display:flex;flex-wrap:wrap;outline:0;padding:0;border-radius:var(--border-radius);border:1px solid var(--border-color);cursor:text;overflow:hidden;background:var(--input-bg)}.editor,.tag{padding:3px;margin:2px}.tag{border:1px solid var(--border-color);background-color:var(--bg3);color:var(--fg3);border-radius:var(--border-radius);word-break:break-all;font-size:var(--font-size-small)}.tag:hover~#cursor{display:block}.editor{flex:1;border:1px solid transparent;color:var(--fg);min-width:60px;outline:0;line-height:inherit;font-family:inherit;background:0 0;font-size:calc(var(--font-size-small) + 1px)}.editor::placeholder{color:var(--placeholder-color);opacity:1}`];
+  static finalizeStyles() {
+    return [(0, _lit.css)`.tags{display:flex;flex-wrap:wrap;outline:0;padding:0;border-radius:var(--border-radius);border:1px solid var(--border-color);cursor:text;overflow:hidden;background:var(--input-bg)}.editor,.tag{padding:3px;margin:2px}.tag{border:1px solid var(--border-color);background-color:var(--bg3);color:var(--fg3);border-radius:var(--border-radius);word-break:break-all;font-size:var(--font-size-small)}.tag:hover~#cursor{display:block}.editor{flex:1;border:1px solid transparent;color:var(--fg);min-width:60px;outline:0;line-height:inherit;font-family:inherit;background:0 0;font-size:calc(var(--font-size-small) + 1px)}.editor::placeholder{color:var(--placeholder-color);opacity:1}`];
   }
 
 } // Register the element with the browser

package/dist/lib/openapi-explorer.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
 var _marked = require("marked");
 
@@ -67,7 +67,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // It's possible none of these imports are actually necessary and should just be removed
 // Styles
-class OpenApiExplorer extends _litElement.LitElement {
+class OpenApiExplorer extends _lit.LitElement {
   constructor() {
     super();
     this.isV1 = false;
@@ -257,8 +257,8 @@ class OpenApiExplorer extends _litElement.LitElement {
     };
   }
 
-  static get styles() {
-    return [_fontStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _litElement.css)`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{padding:24px 8px 0 4px}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:${(0, _litElement.unsafeCSS)(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
+  static finalizeStyles() {
+    return [_fontStyles.default, _inputStyles.default, _flexStyles.default, _tableStyles.default, _endpointStyles.default, _prismStyles.default, _tabStyles.default, _navStyles.default, _infoStyles.default, _advancedSearchStyles.default, _apiRequestStyles.default, (0, _lit.css)`:not(:defined){display:none}:host{display:flex;flex-direction:column;width:100%;height:100%;margin:0;padding:0;overflow:hidden;letter-spacing:normal;color:var(--fg);background-color:var(--bg);font-family:var(--font-regular)}.body{display:flex;height:100%;width:100%;overflow:hidden}.main-content{margin:0;padding:0;display:block;flex:1;height:100%;overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.main-content::-webkit-scrollbar{width:8px;height:8px}.main-content::-webkit-scrollbar-track{background:0 0}.main-content::-webkit-scrollbar-thumb{background-color:var(--border-color)}.section-gap.section-tag{border-bottom:1px solid var(--border-color)}.method-section-gap{padding:24px 8px 0 4px}.section-gap{padding:24px 0 0}.section-tag-header{position:relative;cursor:n-resize;padding:12px 0}.collapsed .section-tag-header:hover{cursor:s-resize}.section-tag-header:hover{background-image:linear-gradient(to right,rgba(0,0,0,0),var(--border-color),rgba(0,0,0,0))}.collapsed .section-tag-header:hover::after{color:var(--primary-color)}.collapsed .section-tag-body{display:none}.logo{height:36px;width:36px;margin-left:5px}.only-large-screen,.only-large-screen-flex{display:none}.header-title{font-size:calc(var(--font-size-regular) + 8px);padding:0 8px}.tag.title{text-transform:uppercase}.header{background-color:var(--header-bg);color:var(--header-fg);width:100%}input.header-input{background:var(--header-color-darker);color:var(--header-fg);border:1px solid var(--header-color-border);flex:1;padding-right:24px;border-radius:3px}input.header-input::placeholder{opacity:.4}input:disabled{cursor:not-allowed}.loader{margin:16px auto 16px auto;border:4px solid var(--bg3);border-radius:50%;border-top:4px solid var(--primary-color);width:36px;height:36px;animation:spin 2s linear infinite}.expanded-endpoint-body{position:relative;padding:6px 0}.divider{border-top:2px solid var(--border-color);margin:24px 0;width:100%}.tooltip{border:1px solid var(--border-color);border-left-width:4px;margin-left:2px}.tooltip a{color:var(--fg2);text-decoration:none}.tooltip-text{color:var(--fg2);background-color:var(--bg2);visibility:hidden;overflow-wrap:break-word}.tooltip:hover{color:var(--primary-color);border-color:var(--primary-color)}.tooltip:hover a:hover{color:var(--primary-color)}.tooltip:hover .tooltip-text{visibility:visible;opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@media only screen and (max-width:767.98px){.section-padding{margin:1rem}.sub-title.tag{margin-left:1rem}.section-tag-body .description{margin-left:1rem;margin-right:1rem}}@media only screen and (min-width:768px){.nav-bar{width:260px;display:flex}.only-large-screen{display:block}.only-large-screen-flex{display:flex}.section-gap{padding:24px 24px}.section-gap--read-mode{padding:24px 8px}.section-gap--focused-mode{padding:1.5rem}.endpoint-body{position:relative;padding:36px 0 48px 0}}@media only screen and (min-width:1024px){.nav-bar{width:${(0, _lit.unsafeCSS)(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};display:flex}.section-gap--read-mode{padding:24px 24px 12px}.main-content-inner{padding:24px}}`];
   } // Startup
 
 

package/dist/lib/styles/advanced-search-styles.js

@@ -3,8 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
-var _default = (0, _litElement.css)`*,:after,:before{box-sizing:border-box}.dialog-box-overlay{background-color:var(--overlay-bg);position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;z-index:var(--dialog-z-index)}.dialog-box{position:fixed;top:100px;left:50%;transform:translate(-50%,0);display:flex;flex-direction:column;width:50vw;background-color:var(--bg2);color:var(--fg2);border-radius:4px;overflow:hidden;border:1px solid var(--border-color);box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.dialog-box-header{position:sticky;top:0;align-self:stretch;display:flex;align-items:center;padding:0 16px;min-height:60px;max-height:60px;border-bottom:1px solid var(--light-border-color);overflow:hidden}.dialog-box .m-btn{padding:1px 6px}.dialog-box-content{padding:16px;display:block}.dialog-box-title{flex-grow:1;font-size:20px}.advanced-search-dialog-input{width:100%}#advanced-search-dialog-input{width:100%}.advanced-search-locations{display:flex;flex-direction:column;margin:8px 0 24px}.advanced-search-locations label{font-size:var(--font-size-small)}.advanced-search-results{max-height:400px;overflow:auto}`;
+var _default = (0, _lit.css)`*,:after,:before{box-sizing:border-box}.dialog-box-overlay{background-color:var(--overlay-bg);position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;z-index:var(--dialog-z-index)}.dialog-box{position:fixed;top:100px;left:50%;transform:translate(-50%,0);display:flex;flex-direction:column;width:50vw;background-color:var(--bg2);color:var(--fg2);border-radius:4px;overflow:hidden;border:1px solid var(--border-color);box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.dialog-box-header{position:sticky;top:0;align-self:stretch;display:flex;align-items:center;padding:0 16px;min-height:60px;max-height:60px;border-bottom:1px solid var(--light-border-color);overflow:hidden}.dialog-box .m-btn{padding:1px 6px}.dialog-box-content{padding:16px;display:block}.dialog-box-title{flex-grow:1;font-size:20px}.advanced-search-dialog-input{width:100%}#advanced-search-dialog-input{width:100%}.advanced-search-locations{display:flex;flex-direction:column;margin:8px 0 24px}.advanced-search-locations label{font-size:var(--font-size-small)}.advanced-search-results{max-height:400px;overflow:auto}`;
 
 exports.default = _default;

package/dist/lib/styles/api-request-styles.js

@@ -3,8 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
-var _default = (0, _litElement.css)`.api-request,.api-request *,.api-request :after,.api-request :before,.api-request:after,.api-request:before{box-sizing:border-box}.api-request.focused-mode,.api-request.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}.api-request .param-name,.api-request .param-type{margin:1px 0;text-align:right;line-height:var(--font-size-small)}.api-request .param-name{color:var(--fg);font-family:var(--font-mono)}.api-request .param-name.deprecated{text-decoration:line-through}.api-request .param-type{color:var(--light-fg);font-family:var(--font-regular)}.api-request .param-constraint{min-width:100px}.api-request .param-constraint:empty{display:none}.api-request .top-gap{margin-top:24px}.api-request .textarea{min-height:220px;padding:5px;resize:vertical}.api-request .response-message{font-weight:700;text-overflow:ellipsis}.api-request .response-message.error{color:var(--red)}.api-request .response-message.success{color:var(--blue)}.api-request .file-input-container{align-items:flex-end}.api-request .file-input-container .input-set:first-child .file-input-remove-btn{visibility:hidden}.api-request .file-input-remove-btn{font-size:16px;color:var(--red);outline:0;border:none;background:0 0;cursor:pointer}.api-request .v-tab-btn{font-size:var(--smal-font-size);height:24px;border:none;background:0 0;opacity:.3;cursor:pointer;padding:4px 8px}.api-request .v-tab-btn.active{font-weight:700;background:var(--bg);opacity:1}.api-request .border-top{border-top:1px solid var(--border-color)}.api-request .border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.api-request .light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.api-request .pad-8-16{padding:8px 16px}.api-request .pad-top-8{padding-top:8px}.api-request .mar-top-8{margin-top:8px}@media only screen and (min-width:768px){.api-request .textarea{padding:8px}}`;
+var _default = (0, _lit.css)`.api-request,.api-request *,.api-request :after,.api-request :before,.api-request:after,.api-request:before{box-sizing:border-box}.api-request.focused-mode,.api-request.read-mode{padding-top:24px;margin-top:12px;border-top:1px dashed var(--border-color)}.api-request .param-name,.api-request .param-type{margin:1px 0;text-align:right;line-height:var(--font-size-small)}.api-request .param-name{color:var(--fg);font-family:var(--font-mono)}.api-request .param-name.deprecated{text-decoration:line-through}.api-request .param-type{color:var(--light-fg);font-family:var(--font-regular)}.api-request .param-constraint{min-width:100px}.api-request .param-constraint:empty{display:none}.api-request .top-gap{margin-top:24px}.api-request .textarea{min-height:220px;padding:5px;resize:vertical}.api-request .response-message{font-weight:700;text-overflow:ellipsis}.api-request .response-message.error{color:var(--red)}.api-request .response-message.success{color:var(--blue)}.api-request .file-input-container{align-items:flex-end}.api-request .file-input-container .input-set:first-child .file-input-remove-btn{visibility:hidden}.api-request .file-input-remove-btn{font-size:16px;color:var(--red);outline:0;border:none;background:0 0;cursor:pointer}.api-request .v-tab-btn{font-size:var(--smal-font-size);height:24px;border:none;background:0 0;opacity:.3;cursor:pointer;padding:4px 8px}.api-request .v-tab-btn.active{font-weight:700;background:var(--bg);opacity:1}.api-request .border-top{border-top:1px solid var(--border-color)}.api-request .border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.api-request .light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.api-request .pad-8-16{padding:8px 16px}.api-request .pad-top-8{padding-top:8px}.api-request .mar-top-8{margin-top:8px}@media only screen and (min-width:768px){.api-request .textarea{padding:8px}}`;
 
 exports.default = _default;

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

@@ -3,8 +3,8 @@
 exports.__esModule = true;
 exports.default = void 0;
 
-var _litElement = require("lit-element");
+var _lit = require("lit");
 
-var _default = (0, _litElement.css)`.border-top{border-top:1px solid var(--border-color)}.border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.pad-8-16{padding:8px 16px}.pad-top-8{padding-top:8px}.mar-top-8{margin-top:8px}`;
+var _default = (0, _lit.css)`.border-top{border-top:1px solid var(--border-color)}.border{border:1px solid var(--border-color);border-radius:var(--border-radius)}.light-border{border:1px solid var(--light-border-color);border-radius:var(--border-radius)}.pad-8-16{padding:8px 16px}.pad-top-8{padding-top:8px}.mar-top-8{margin-top:8px}`;
 
 exports.default = _default;