openapi-explorer 0.9.310 → 0.9.314

package/src/components/schema-table.js

@@ -1,250 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import FontStyles from '../styles/font-styles';
-import SchemaStyles from '../styles/schema-styles';
-
-export default class SchemaTable extends LitElement {
-  static get properties() {
-    return {
-      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' },
-      data: { type: Object },
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
-    if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'true'; }
-    if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) { this.schemaHideReadOnly = 'true'; }
-    if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) { this.schemaHideWriteOnly = 'true'; }
-  }
-
-  static get styles() {
-    return [
-      FontStyles,
-      SchemaStyles,
-      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;
-      }
-      .collapsed-descr .tr {
-        max-height: calc(var(--font-size-small) + var(--font-size-small) + 4px);
-      }
-
-      .obj-toggle {
-        padding: 0 2px;
-        border-radius:2px;
-        border: 1px solid transparent;
-        display: inline-block;
-        margin-left: -16px;
-        color:var(--primary-color);
-        cursor: pointer;
-        font-size: calc(var(--font-size-small) + 4px);
-        font-family: var(--font-mono);
-        background-clip: border-box;
-      }
-      .obj-toggle:hover {
-        border-color: var(--primary-color);
-      }
-      .tr.expanded + .object-body {
-        display:block;
-      }
-      .tr.collapsed + .object-body {
-        display:none;
-      }`,
-    ];
-  }
-
-  /* eslint-disable indent */
-  render() {
-    return html`
-      <div class="table ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
-        <div class='toolbar'>
-          <div style="flex:1"></div>
-          <div class='toolbar-item' @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
-            ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'}
-          </div>
-        </div>
-        ${this.data && this.data['::description']
-          ? html`<span class='m-markdown'> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>`
-          : ''
-        }
-        <div style = 'border:1px solid var(--light-border-color)'>
-          <div style='display:flex; background-color: var(--bg2); padding:8px 4px; border-bottom:1px solid var(--light-border-color);'>
-            <div class='key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Field </div>
-            <div class='key-type' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Type </div>
-            <div class='key-descr' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg);'> Description </div>
-          </div>
-          ${this.data ? 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) {
-    const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : (schemaLevel + 1);
-    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : (indentLevel + 1);
-    const leftPadding = 16 * newIndentLevel; // 2 space indentation at each level
-
-    if (!data) {
-      return html`<div class="null" style="display:inline;">null</div>`;
-    }
-    if (Object.keys(data).length === 0) {
-      return html`<span class="td key object" style='padding-left:${leftPadding}px'>${key}</span>`;
-    }
-    let keyLabel = '';
-    let keyDescr = '';
-    let isOneOfLabel = false;
-    if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
-      keyLabel = key.replace('::', '').replace('~', ' ');
-      isOneOfLabel = true;
-    } else if (key.startsWith('::OPTION')) {
-      const parts = key.split('~');
-      keyLabel = parts[1];
-      keyDescr = parts[2];
-    } else {
-      keyLabel = key;
-    }
-
-    let detailObjType = '';
-    if (data['::type'] === 'object') {
-      if (dataType === 'array') {
-        detailObjType = 'array'; // Array of Object
-      } else {
-        detailObjType = 'object';
-      }
-    } else if (data['::type'] === 'array') {
-      if (dataType === 'array') {
-        detailObjType = 'array of array'; // Array of array
-      } else {
-        detailObjType = 'array';
-      }
-    }
-
-    if (typeof data === 'object') {
-      return html`
-        ${newSchemaLevel >= 0 && key
-          ? 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)
-                  ? 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')
-                  ? 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('*')
-                    ? 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>`
-                    : html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${keyLabel === '::props' ? '' : keyLabel}</span>`
-                }
-                ${data['::type'] === 'xxx-of' && dataType === 'array' ? 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'>${unsafeHTML(marked(description || ''))}</div>
-            </div>`
-          : html`
-              ${data['::type'] === 'array' && dataType === 'array'
-                ? html`<div class='tr'> <div class='td'> ${dataType} </div> </div>`
-                : ''
-              }
-          `
-        }
-        <div class='object-body'>
-        ${Array.isArray(data) && data[0]
-          ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}`
-          : html`${Object.keys(data).map((dataKey) =>
-            ['::title', '::description', '::type', '::props', '::deprecated'].includes(dataKey) && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? ''
-            : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
-                data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`
-          )}`
-        }
-        <div>
-      `;
-    }
-
-    // For Primitive Data types
-    const { type, readOrWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated } = JSON.parse(data);
-    if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
-      return undefined;
-    }
-    if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
-      return undefined;
-    }
-    const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return html`
-      <div class = "tr primitive">
-        <div class="td key ${deprecated ? 'deprecated' : ''}" style='padding-left:${leftPadding}px' >
-          ${keyLabel && keyLabel.endsWith('*')
-            ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>`
-            : key.startsWith('::OPTION')
-              ? html`<span class='xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
-              : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`
-          }
-        </div>
-        <div class='td key-type ${dataTypeCss}'>
-          ${dataType === 'array' ? `${type}[]` : type}
-          <span 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' ? html`<span class="m-markdown-small">${unsafeHTML(marked(description))}</span>` : ''}
-          ${schemaTitle || schemaDescription ? html`<span class="m-markdown-small">${unsafeHTML(marked(`${schemaTitle ? `**${schemaTitle}:** ` : ''}${schemaDescription || ''}`))}</span>` : ''}
-          ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Constraints: </span> ${constraint}</div>` : ''}
-          ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
-          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
-          ${pattern ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px;'> <span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-        </div>
-      </div>
-    `;
-  }
-  /* eslint-enable indent */
-
-  toggleObjectExpand(e) {
-    const rowEl = e.target.closest('.tr');
-    if (rowEl.classList.contains('expanded')) {
-      rowEl.classList.add('collapsed');
-      rowEl.classList.remove('expanded');
-      e.target.innerText = '+';
-    } else {
-      rowEl.classList.remove('collapsed');
-      rowEl.classList.add('expanded');
-      e.target.innerText = '-';
-    }
-  }
-}
-if (!customElements.get('openapi-explorer')) {
-  customElements.define('schema-table', SchemaTable);
-}

package/src/components/schema-tree.js

@@ -1,280 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-import { marked } from 'marked';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
-import FontStyles from '../styles/font-styles';
-import SchemaStyles from '../styles/schema-styles';
-import BorderStyles from '../styles/border-styles';
-
-export default class SchemaTree extends LitElement {
-  static get properties() {
-    return {
-      data: { type: Object },
-      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' },
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) { this.schemaExpandLevel = 99999; }
-    if (!this.schemaDescriptionExpanded || !'true false'.includes(this.schemaDescriptionExpanded)) { this.schemaDescriptionExpanded = 'true'; }
-    if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) { this.schemaHideReadOnly = 'true'; }
-    if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) { this.schemaHideWriteOnly = 'true'; }
-  }
-
-  static get styles() {
-    return [
-      FontStyles,
-      SchemaStyles,
-      BorderStyles,
-      css`
-      .tree {
-        min-height: 30px;
-        background: rgb(51, 51, 51);
-        padding: 10px;
-        color: white;
-        font-size:var(--font-size-small);
-        text-align: left;
-        line-height:calc(var(--font-size-small) + 6px);
-      }
-      .collapsed-descr .tr {
-        max-height:calc(var(--font-size-small) + 8px);
-      }
-      .collapsed-descr .m-markdown-small p {
-        line-height:calc(var(--font-size-small) + 6px);
-      }
-
-      .tree .key {
-        max-width: 300px;
-      }
-      .key.deprecated .key-label {
-        text-decoration: line-through; 
-      }
-
-      .open-bracket{
-        display:inline-block;
-        padding: 0 20px 0 0;
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius:3px;
-      }
-      .open-bracket:hover {
-        color:var(--primary-color);
-        background-color:var(--hover-color);
-        border: 1px solid var(--border-color);
-      }
-      .close-bracket{
-        display:inline-block;
-        font-family: var(--font-mono);
-      }
-      .tr.collapsed + .inside-bracket,
-      .tr.collapsed + .inside-bracket + .close-bracket{
-        display:none;
-      }
-      .inside-bracket.object,
-      .inside-bracket.array {
-        border-left: 1px dotted var(--border-color);
-      }
-      .inside-bracket.xxx-of {
-        padding:5px 0px;
-        border-style: dotted;
-        border-width: 0 0 1px 0;
-        border-color:var(--primary-color);
-      }`,
-    ];
-  }
-
-  /* eslint-disable indent */
-  render() {
-    return html`
-      <div class="tree ${this.schemaDescriptionExpanded === 'true' ? 'expanded-descr' : 'collapsed-descr'}">
-        <div class="toolbar">
-          ${this.data && this.data['::description'] ? html`<span class='m-markdown' style="margin-block-start: 0"> ${unsafeHTML(marked(this.data['::description'] || ''))}</span>` : html`<div>&nbsp;</div>`}
-          <div class="toolbar-item" @click='${() => { this.schemaDescriptionExpanded = (this.schemaDescriptionExpanded === 'true' ? 'false' : 'true'); }}'> 
-            ${this.schemaDescriptionExpanded === 'true' ? 'Collapse descriptions' : 'Expand descriptions'}
-          </div>
-        </div>
-        ${this.data
-          ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'])}`
-          : html`<span class='mono-font' style='color:var(--red)'> Schema not found </span>`
-        }
-      </div>  
-    `;
-  }
-
-  generateTree(data, dataType = 'object', key = '', description = '', schemaLevel = 0, indentLevel = 0) {
-    if (!data) {
-      return html`<div class="null" style="display:inline;">null</div>`;
-    }
-    if (Object.keys(data).length === 0) {
-      return html`<span class="key object">${key}:{ }</span>`;
-    }
-    let keyLabel = '';
-    let keyDescr = '';
-    if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
-      keyLabel = key.replace('::', '').replace('~', ' ');
-    } else if (key.startsWith('::OPTION')) {
-      const parts = key.split('~');
-      keyLabel = parts[1];
-      keyDescr = parts[2];
-    } else {
-      keyLabel = key;
-    }
-
-    const leftPadding = 16;
-    // Min-width used for model keys: `td key `
-    const minFieldColWidth = 250 - (indentLevel * leftPadding);
-    let openBracket = '';
-    let closeBracket = '';
-    const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : (schemaLevel + 1);
-    // const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' ? indentLevel : (indentLevel + 1);
-    const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? indentLevel : (indentLevel + 1);
-    if (data['::type'] === 'object') {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
-        }
-        closeBracket = '}]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
-        }
-        closeBracket = '}';
-      }
-    } else if (data['::type'] === 'array') {
-      if (dataType === 'array') {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array-of-array" @click="${this.toggleObjectExpand}">[[</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array-of-array" @click="${this.toggleObjectExpand}">[[...]]</span>`;
-        }
-        closeBracket = ']]';
-      } else {
-        if (schemaLevel < this.schemaExpandLevel) {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[</span>`;
-        } else {
-          openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
-        }
-        closeBracket = ']';
-      }
-    }
-
-    if (typeof data === 'object') {
-      const flags = data['::flags'] || {};
-      if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
-        return undefined;
-      }
-      if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
-        return undefined;
-      }
-      const displayLine = [flags['🆁'] || flags['🆆'], description].filter(v => v).join(' ');
-      return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? 'expanded' : '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')
-              ? html`<span class='key-label xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
-              : keyLabel.endsWith('*')
-                ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
-                : keyLabel === '::props' || keyLabel === '::ARRAY~OF'
-                  ? ''
-                  : schemaLevel > 0
-                    ? html`<span class="key-label">${keyLabel}:</span>`
-                    : ''
-            }
-            ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</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' || ''}">
-              ${unsafeHTML(marked(displayLine))}
-            </span>
-          </div>
-        </div>
-        <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] ? html`${this.generateTree(data[0], 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel)}`
-            : html`
-              ${Object.keys(data).map((dataKey) =>
-                dataKey.startsWith('::') && data[dataKey]['::type'] !== 'array' && data[dataKey]['::type'] !== 'object' ? ''
-                : html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey],
-                      data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}`
-              )}`
-          }
-        </div>
-        ${data['::type'] && data['::type'].includes('xxx-of')
-          ? ''
-          : html`<div class='close-bracket'> ${closeBracket} </div>`
-        }
-      `;
-    }
-
-    // For Primitive Data types
-    const { type, readOrWriteOnly, constraint, defaultValue, allowedValues, pattern, schemaDescription, schemaTitle, deprecated } = JSON.parse(data);
-    if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
-      return undefined;
-    }
-    if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
-      return undefined;
-    }
-    const dataTypeCss = type.replace(/┃.*/g, '').replace(/[^a-zA-Z0-9+]/g, '').substring(0, 4).toLowerCase();
-    return html`
-      <div class="tr primitive">
-        <div class="td key ${deprecated ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px' >
-          ${keyLabel.endsWith('*')
-            ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
-            : key.startsWith('::OPTION')
-              ? html`<span class='key-label xxx-of-key'>${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>`
-              : schemaLevel > 0
-                ? html`<span class="key-label">${keyLabel}:</span>`
-                : ''
-          }
-          <span class="${dataTypeCss}">
-            ${dataType === 'array' ? `${type}[]` : `${type}`}
-          </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' || ''}">
-            ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${dataType === 'array' && description || `${schemaTitle ? `**${schemaTitle}:**` : ''} ${schemaDescription}` || ''}`))}
-          </span>
-          ${constraint ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Constraints: </span>${constraint}</div>` : ''}
-          ${defaultValue ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Default: </span>${defaultValue}</div>` : ''}
-          ${allowedValues ? html`<div style='display:inline-block; line-break:anywhere; margin-right:8px'><span class='bold-text'>Allowed: </span>${allowedValues}</div>` : ''}
-          ${pattern ? html`<div style='display:inline-block; line-break: anywhere; margin-right:8px'><span class='bold-text'>Pattern: </span>${pattern}</div>` : ''}
-        </div>
-      </div>
-    `;
-  }
-  /* eslint-enable indent */
-
-  toggleObjectExpand(e) {
-    const rowEl = e.target.closest('.tr');
-    if (rowEl.classList.contains('expanded')) {
-      rowEl.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')
-            ? '[...]'
-            : '{...}';
-    } else {
-      rowEl.classList.replace('collapsed', 'expanded');
-      e.target.innerHTML = e.target.classList.contains('array-of-object')
-        ? '[{'
-        : e.target.classList.contains('array-of-array')
-          ? '[['
-          : e.target.classList.contains('object')
-            ? '{'
-            : '[';
-    }
-  }
-}
-
-if (!customElements.get('openapi-explorer')) {
-  customElements.define('schema-tree', SchemaTree);
-}

package/src/components/tag-input.js

@@ -1,109 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-
-export default class TagInput extends LitElement {
-  render() {
-    const tagItemTemplate = html`${
-      (this.value || []).filter(v => v.trim()).map((v) => html`<span class='tag'>${v}</span>`)
-    }`;
-    return 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() {
-    return {
-      placeholder: { type: String },
-      value: { type: Array, attribute: 'value' },
-    };
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (!Array.isArray(this.value)) {
-      this.value = this.value !== '' ? [this.value] : [];
-    }
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (name === 'value') {
-      if (newVal && oldVal !== newVal) {
-        this.value = newVal.split(',').filter(v => v.trim());
-      }
-    }
-    super.attributeChangedCallback(name, oldVal, newVal);
-  }
-
-  afterPaste(e) {
-    const clipboardData = e.clipboardData || window.clipboardData;
-    const pastedData = clipboardData.getData('Text');
-    const pastedArray = pastedData && pastedData.split(',').filter(v => v.trim()) || [];
-    this.value = this.value.concat(pastedArray);
-    e.preventDefault();
-  }
-
-  afterKeyDown(e) {
-    if (e.keyCode === 13) {
-      e.stopPropagation();
-      e.preventDefault();
-      this.value = this.value.concat(e.target.value || []);
-      e.target.value = '';
-    } else if (e.keyCode === 8) {
-      if (e.target.value.length === 0) {
-        this.value = this.value.slice(0, -1);
-      }
-    }
-  }
-
-  static get styles() {
-    return [css`
-      .tags{
-        display:flex;
-        flex-wrap: wrap;
-        outline: none;
-        padding:0;
-        border-radius:var(--border-radius);
-        border:1px solid var(--border-color);
-        cursor:text;
-        overflow:hidden;
-        background:var(--input-bg);
-      }
-      .tag, .editor {
-        padding:3px;
-        margin:2px;
-      }
-      .tag{
-        border:1px solid var(--border-color);
-        background-color:var(--bg3);
-        color:var(--fg3);
-        border-radius:var(--border-radius);
-        word-break: break-all;
-        font-size: var(--font-size-small);
-      }
-      .tag:hover ~ #cursor {
-        display: block;
-      }
-      .editor{
-        flex:1;
-        border:1px solid transparent;
-        color:var(--fg);
-        min-width:60px;
-        outline: none;
-        line-height: inherit;
-        font-family:inherit;
-        background:transparent;
-        font-size: calc(var(--font-size-small) + 1px);
-      }
-      .editor::placeholder {
-        color: var(--placeholder-color);
-        opacity:1;
-      }
-    `];
-  }
-}
-// Register the element with the browser
-if (!customElements.get('openapi-explorer')) {
-  customElements.define('tag-input', TagInput);
-}