openapi-explorer 2.1.656 → 2.1.659

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/browser/openapi-explorer.min.js +2 -2
  2. package/dist/es/components/api-request.js +58 -140
  3. package/dist/es/components/api-response.js +9 -34
  4. package/dist/es/components/json-tree.js +4 -18
  5. package/dist/es/components/request-form-table.js +13 -36
  6. package/dist/es/components/schema-table.js +28 -42
  7. package/dist/es/components/schema-tree.js +31 -61
  8. package/dist/es/components/syntax-highlighter.js +7 -26
  9. package/dist/es/components/tag-input.js +2 -14
  10. package/dist/es/openapi-explorer-oauth-handler.js +0 -2
  11. package/dist/es/openapi-explorer.js +62 -174
  12. package/dist/es/react.js +4 -4
  13. package/dist/es/styles/input-styles.js +1 -1
  14. package/dist/es/styles/schema-styles.js +1 -1
  15. package/dist/es/templates/advance-search-template.js +1 -5
  16. package/dist/es/templates/callback-template.js +2 -2
  17. package/dist/es/templates/code-samples-template.js +1 -3
  18. package/dist/es/templates/components-template.js +41 -4
  19. package/dist/es/templates/endpoint-template.js +6 -17
  20. package/dist/es/templates/expanded-endpoint-template.js +4 -7
  21. package/dist/es/templates/focused-endpoint-template.js +0 -10
  22. package/dist/es/templates/mainBodyTemplate.js +3 -2
  23. package/dist/es/templates/navbar-template.js +9 -12
  24. package/dist/es/templates/overview-template.js +1 -1
  25. package/dist/es/templates/security-scheme-template.js +12 -73
  26. package/dist/es/templates/server-template.js +1 -8
  27. package/dist/es/utils/color-utils.js +2 -21
  28. package/dist/es/utils/common-utils.js +3 -20
  29. package/dist/es/utils/schema-utils.js +35 -132
  30. package/dist/es/utils/spec-parser.js +35 -120
  31. package/dist/es/utils/theme.js +3 -6
  32. package/dist/es/utils/xml/xml.js +1 -40
  33. package/dist/lib/components/api-request.js +58 -157
  34. package/dist/lib/components/api-response.js +9 -54
  35. package/dist/lib/components/json-tree.js +4 -27
  36. package/dist/lib/components/request-form-table.js +14 -42
  37. package/dist/lib/components/schema-table.js +28 -52
  38. package/dist/lib/components/schema-tree.js +31 -72
  39. package/dist/lib/components/syntax-highlighter.js +6 -49
  40. package/dist/lib/components/tag-input.js +2 -18
  41. package/dist/lib/languages/en.js +2 -3
  42. package/dist/lib/languages/fr.js +2 -3
  43. package/dist/lib/languages/index.js +0 -6
  44. package/dist/lib/openapi-explorer-oauth-handler.js +0 -6
  45. package/dist/lib/openapi-explorer.js +61 -197
  46. package/dist/lib/react.js +4 -5
  47. package/dist/lib/styles/advanced-search-styles.js +1 -5
  48. package/dist/lib/styles/api-request-styles.js +1 -5
  49. package/dist/lib/styles/border-styles.js +1 -5
  50. package/dist/lib/styles/endpoint-styles.js +1 -5
  51. package/dist/lib/styles/flex-styles.js +1 -5
  52. package/dist/lib/styles/font-styles.js +1 -5
  53. package/dist/lib/styles/info-styles.js +1 -5
  54. package/dist/lib/styles/input-styles.js +1 -5
  55. package/dist/lib/styles/key-frame-styles.js +1 -5
  56. package/dist/lib/styles/nav-styles.js +1 -5
  57. package/dist/lib/styles/prism-styles.js +1 -5
  58. package/dist/lib/styles/schema-styles.js +1 -5
  59. package/dist/lib/styles/tab-styles.js +1 -5
  60. package/dist/lib/styles/table-styles.js +1 -5
  61. package/dist/lib/styles/tag-input-styles.js +1 -5
  62. package/dist/lib/templates/advance-search-template.js +0 -6
  63. package/dist/lib/templates/callback-template.js +1 -3
  64. package/dist/lib/templates/code-samples-template.js +0 -4
  65. package/dist/lib/templates/components-template.js +43 -9
  66. package/dist/lib/templates/endpoint-template.js +6 -29
  67. package/dist/lib/templates/expanded-endpoint-template.js +3 -17
  68. package/dist/lib/templates/focused-endpoint-template.js +0 -19
  69. package/dist/lib/templates/mainBodyTemplate.js +2 -13
  70. package/dist/lib/templates/navbar-template.js +9 -20
  71. package/dist/lib/templates/overview-template.js +0 -5
  72. package/dist/lib/templates/security-scheme-template.js +12 -79
  73. package/dist/lib/templates/server-template.js +1 -12
  74. package/dist/lib/utils/color-utils.js +4 -25
  75. package/dist/lib/utils/common-utils.js +3 -33
  76. package/dist/lib/utils/schema-utils.js +33 -141
  77. package/dist/lib/utils/spec-parser.js +35 -128
  78. package/dist/lib/utils/theme.js +3 -16
  79. package/dist/lib/utils/xml/xml.js +1 -42
  80. package/package.json +2 -2
@@ -29,68 +29,55 @@ export default class SchemaTree extends LitElement {
29
29
  }
30
30
  };
31
31
  }
32
-
33
32
  connectedCallback() {
34
33
  super.connectedCallback();
35
-
36
34
  if (!this.schemaExpandLevel || this.schemaExpandLevel < 1) {
37
35
  this.schemaExpandLevel = 99999;
38
36
  }
39
-
40
37
  this.schemaDescriptionExpanded = true;
41
-
42
38
  if (!this.schemaHideReadOnly || !'true false'.includes(this.schemaHideReadOnly)) {
43
39
  this.schemaHideReadOnly = 'true';
44
40
  }
45
-
46
41
  if (!this.schemaHideWriteOnly || !'true false'.includes(this.schemaHideWriteOnly)) {
47
42
  this.schemaHideWriteOnly = 'true';
48
43
  }
49
44
  }
45
+
50
46
  /**
51
47
  * @param {Map<string, object>} changedProperties Changed Properties
52
48
  */
53
-
54
-
55
49
  update(changedProperties) {
56
50
  if (changedProperties.has('data')) {
57
51
  this.interactive = false;
58
52
  }
59
-
60
53
  super.update(changedProperties);
61
54
  }
62
-
63
55
  updated() {
64
56
  this.interactive = true; // Note: interactive is not a reactive property
65
57
  }
66
-
67
58
  static finalizeStyles() {
68
59
  return [FontStyles, SchemaStyles, BorderStyles, KeyFrameStyles, css`.tree{min-height:30px;background:var(--bg2);padding:12px;font-size:var(--font-size-small);text-align:left;line-height:calc(var(--font-size-small) + 6px)}.tree .key{max-width:300px}.requiredStar::after{content:'*';color:var(--red);font-size:larger}.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{overflow:hidden}.tree:not(.interactive) .inside-bracket-wrapper{animation-duration:0s!important}.tr:not(.collapsed)+.inside-bracket-wrapper{animation:linear .2s expand-height}.tr.collapsed+.inside-bracket-wrapper{animation:linear .2s collapse-height;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}`];
69
60
  }
70
- /* eslint-disable indent */
71
-
72
61
 
62
+ /* eslint-disable indent */
73
63
  render() {
74
- return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <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.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
64
+ var _this$data, _this$data2;
65
+ const displayLine = [(_this$data = this.data) === null || _this$data === void 0 ? void 0 : _this$data['::title'], (_this$data2 = this.data) === null || _this$data2 === void 0 ? void 0 : _this$data2['::description']].filter(d => d).join(' - ');
66
+ return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(marked(displayLine))}</span>` : html`<div>&nbsp;</div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
75
67
  }
76
-
77
68
  toggleSchemaDescription() {
78
69
  this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
79
70
  this.requestUpdate();
80
71
  }
81
-
82
72
  generateTree(data, dataType = 'object', arrayType = '', flags = {}, key = '', title = '', description = '', schemaLevel = 0, indentLevel = 0) {
83
73
  if (!data) {
84
- return html`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' ? html`<span class="mono-font"> [ ] </span>` : dataType === 'object' ? html`<span class="mono-font"> { } </span>` : html`<span class="mono-font"> schema undefined </span>`} </div>`;
74
+ return html`<div class="null" style="display:inline"> <span class="key-label xxx-of-key"> ${key.replace('::OPTION~', '')}</span> ${dataType === 'array' && html`<span class="mono-font"> [ ] </span>` || dataType === 'object' && html`<span class="mono-font"> { } </span>` || html`<span class="mono-font"> ${dataType} </span>`} </div>`;
85
75
  }
86
-
87
76
  if (Object.keys(data).length === 0) {
88
77
  return html`<span class="key object">${key}:{ }</span>`;
89
78
  }
90
-
91
79
  let keyLabel = '';
92
80
  let keyDescr = '';
93
-
94
81
  if (key.startsWith('::ONE~OF') || key.startsWith('::ANY~OF')) {
95
82
  keyLabel = key.replace('::', '').replace('~', ' ');
96
83
  } else if (key.startsWith('::OPTION')) {
@@ -100,43 +87,21 @@ export default class SchemaTree extends LitElement {
100
87
  } else {
101
88
  keyLabel = key;
102
89
  }
103
-
104
- const leftPadding = 16; // Min-width used for model keys: `td key `
105
-
90
+ const leftPadding = 16;
91
+ // Min-width used for model keys: `td key `
106
92
  const minFieldColWidth = 300 - indentLevel * leftPadding;
107
93
  let openBracket = '';
108
94
  let closeBracket = '';
109
95
  const newSchemaLevel = data['::type'] && data['::type'].startsWith('xxx-of') ? schemaLevel : schemaLevel + 1;
110
96
  const newIndentLevel = dataType === 'xxx-of-option' || data['::type'] === 'xxx-of-option' ? indentLevel : indentLevel + 1;
111
-
112
- if (data['::type'] === 'object') {
113
- if (dataType === 'array') {
114
- if (schemaLevel < this.schemaExpandLevel) {
115
- openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
116
- } else {
117
- openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
118
- }
119
-
120
- closeBracket = '}]';
121
- } else {
122
- if (schemaLevel < this.schemaExpandLevel) {
123
- openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
124
- } else {
125
- openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
126
- }
127
-
128
- closeBracket = '}';
129
- }
130
- } else if (data['::type'] === 'array') {
97
+ if (data['::type'] === 'array') {
131
98
  if (dataType === 'array') {
132
99
  const arrType = arrayType !== 'object' ? arrayType : '';
133
-
134
100
  if (schemaLevel < this.schemaExpandLevel) {
135
101
  openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[ ${arrType} </span>`;
136
102
  } else {
137
103
  openBracket = html`<span class="open-bracket array-of-array" data-array-type="${arrType}" @click="${this.toggleObjectExpand}">[[...]]</span>`;
138
104
  }
139
-
140
105
  closeBracket = ']]';
141
106
  } else {
142
107
  if (schemaLevel < this.schemaExpandLevel) {
@@ -144,7 +109,6 @@ export default class SchemaTree extends LitElement {
144
109
  } else {
145
110
  openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
146
111
  }
147
-
148
112
  closeBracket = ']';
149
113
  }
150
114
  } else if (data['::type'] === 'xxx-of' && dataType === 'array') {
@@ -153,26 +117,40 @@ export default class SchemaTree extends LitElement {
153
117
  } else {
154
118
  openBracket = html`<span class="open-bracket array" @click="${this.toggleObjectExpand}">[...]</span>`;
155
119
  }
156
-
157
120
  closeBracket = ']';
121
+ } else if (data['::type']) {
122
+ if (dataType === 'array') {
123
+ if (schemaLevel < this.schemaExpandLevel) {
124
+ openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{</span>`;
125
+ } else {
126
+ openBracket = html`<span class="open-bracket array-of-object" @click="${this.toggleObjectExpand}">[{...}]</span>`;
127
+ }
128
+ closeBracket = '}]';
129
+ } else {
130
+ if (schemaLevel < this.schemaExpandLevel) {
131
+ openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{</span>`;
132
+ } else {
133
+ openBracket = html`<span class="open-bracket object" @click="${this.toggleObjectExpand}">{...}</span>`;
134
+ }
135
+ closeBracket = '}';
136
+ }
158
137
  }
159
-
160
138
  if (typeof data === 'object') {
161
139
  var _data$Metadata, _data$Metadata$constr;
162
-
163
140
  if (flags['🆁'] && this.schemaHideReadOnly === 'true') {
164
141
  return undefined;
165
142
  }
166
-
167
143
  if (flags['🆆'] && this.schemaHideWriteOnly === 'true') {
168
144
  return undefined;
169
145
  }
170
-
171
146
  const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
172
- return 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') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? html`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(marked(displayLine))} </span> ${this.schemaDescriptionExpanded ? html` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </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] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => !['::metadata', '::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].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'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '')}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
173
- } // For Primitive Data types
174
-
147
+ return 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') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? html`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(marked(displayLine))} </span> ${this.schemaDescriptionExpanded ? html` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </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] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => {
148
+ var _data$dataKey;
149
+ return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? 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]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
150
+ })}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
151
+ }
175
152
 
153
+ // For Primitive Data types
176
154
  const {
177
155
  type,
178
156
  cssType,
@@ -187,37 +165,29 @@ export default class SchemaTree extends LitElement {
187
165
  schemaTitle,
188
166
  deprecated
189
167
  } = JSON.parse(data);
190
-
191
168
  if (readOrWriteOnly === '🆁' && this.schemaHideReadOnly === 'true') {
192
169
  return undefined;
193
170
  }
194
-
195
171
  if (readOrWriteOnly === '🆆' && this.schemaHideWriteOnly === 'true') {
196
172
  return undefined;
197
173
  }
198
-
199
174
  const titleString = schemaTitle || title;
200
175
  const descriptionString = schemaDescription || description;
201
176
  return html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</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>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(marked(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${titleString ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraints.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
202
177
  }
203
178
  /* eslint-enable indent */
204
179
 
205
-
206
180
  toggleObjectExpand(e) {
207
181
  const rowEl = e.target.closest('.tr');
208
182
  rowEl.classList.toggle('collapsed');
209
-
210
183
  if (rowEl.classList.contains('collapsed')) {
211
184
  e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{...}]' : e.target.classList.contains('array-of-array') ? '[[...]]' : e.target.classList.contains('array') ? '[...]' : '{...}';
212
185
  } else {
213
186
  e.target.innerHTML = e.target.classList.contains('array-of-object') ? '[{' : e.target.classList.contains('array-of-array') ? '[[' : e.target.classList.contains('object') ? '{' : '[';
214
187
  }
215
-
216
188
  this.requestUpdate();
217
189
  }
218
-
219
190
  }
220
-
221
191
  if (!customElements.get('openapi-explorer')) {
222
192
  customElements.define('schema-tree', SchemaTree);
223
193
  }
@@ -21,10 +21,10 @@ import FontStyle from '../styles/font-styles.js';
21
21
  import InputStyle from '../styles/input-styles.js';
22
22
  import { getI18nText } from '../languages/index.js';
23
23
  import { copyToClipboard } from '../utils/common-utils.js';
24
+
24
25
  /**
25
26
  * Mapping mime-type => prism language
26
27
  */
27
-
28
28
  const LANGUAGES = [{
29
29
  pattern: /json/,
30
30
  language: 'json'
@@ -32,10 +32,10 @@ const LANGUAGES = [{
32
32
  pattern: /xml/,
33
33
  language: 'html'
34
34
  }];
35
+
35
36
  /**
36
37
  * Syntax Highlighter component.
37
38
  */
38
-
39
39
  class SyntaxHighlighter extends LitElement {
40
40
  static get properties() {
41
41
  return {
@@ -52,96 +52,77 @@ class SyntaxHighlighter extends LitElement {
52
52
  }
53
53
  };
54
54
  }
55
-
56
55
  static finalizeStyles() {
57
56
  return [PrismStyles, FontStyle, InputStyle, css`:host{font-weight:400}div{position:relative;display:flex;flex-direction:column}.toolbar-copy-btn{position:absolute;top:0;right:0;margin-right:8px}.toolbar-copy-btn+pre{white-space:pre;max-height:400px;overflow:auto;display:flex;padding-right:70px}`];
58
57
  }
58
+
59
59
  /**
60
60
  * Returns the prism language to use based on language/content type
61
61
  * @returns {string} The language to use
62
62
  */
63
-
64
-
65
63
  detectLanguage() {
66
64
  if (this.language) {
67
65
  var _this$language;
68
-
69
66
  return (_this$language = this.language) === null || _this$language === void 0 ? void 0 : _this$language.toLowerCase();
70
67
  }
71
-
72
68
  if (this.mimeType) {
73
69
  var _this$mimeType, _LANGUAGES$find;
74
-
75
70
  const lcMimeType = (_this$mimeType = this.mimeType) === null || _this$mimeType === void 0 ? void 0 : _this$mimeType.toLowerCase();
76
71
  return (_LANGUAGES$find = LANGUAGES.find(def => def.pattern.test(lcMimeType))) === null || _LANGUAGES$find === void 0 ? void 0 : _LANGUAGES$find.language;
77
72
  }
78
-
79
73
  return null;
80
74
  }
81
-
82
75
  render() {
83
76
  return this.renderCopyWrapper(this.renderHighlight());
84
77
  }
78
+
85
79
  /**
86
80
  * Render the highlighted content.
87
81
  * @returns Highlighter
88
82
  */
89
-
90
-
91
83
  renderHighlight() {
92
84
  var _this$content;
93
-
94
85
  const lang = this.detectLanguage();
95
86
  const grammar = Prism.languages[lang];
96
-
97
87
  if (typeof this.content !== 'string') {
98
88
  return html`<json-tree .data="${this.content}">`;
99
89
  }
100
-
101
90
  const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString()) || '';
102
91
  const increasedSpaceContent = lang !== 'python' && lang !== 'yaml' && lang !== 'toml' ? stringContent.split('\n').map(line => line.replace(/^\s{2}/g, ' ')).join('\n') : stringContent;
103
92
  return grammar ? html`<pre><code>${unsafeHTML(Prism.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : html`<pre>${increasedSpaceContent}</pre>`;
104
93
  }
94
+
105
95
  /**
106
96
  * Render a copy-to-clipboard button.
107
97
  * @param {*} content Content
108
98
  * @returns Content
109
99
  */
110
-
111
-
112
100
  renderCopyWrapper(content) {
113
101
  return html`<div> <button class="m-btn outline-primary toolbar-copy-btn" @click="${this.copyToClipboard}" part="btn btn-fill btn-copy">${getI18nText('operations.copy')}</button> ${content} </div>`;
114
102
  }
103
+
115
104
  /**
116
105
  * Copy to clipboard.
117
106
  * @param {Event} e Event
118
107
  */
119
-
120
-
121
108
  copyToClipboard(e) {
122
109
  var _this$content2;
123
-
124
110
  const data = this.detectLanguage() === 'json' && typeof this.content !== 'string' ? JSON.stringify(this.content, null, 2) : (_this$content2 = this.content) === null || _this$content2 === void 0 ? void 0 : _this$content2.toString();
125
111
  copyToClipboard(data, e);
126
112
  }
127
-
128
113
  }
114
+
129
115
  /*
130
116
  * Configure marked globally.
131
117
  */
132
-
133
-
134
118
  marked.setOptions({
135
119
  highlight(code, lang) {
136
120
  if (Prism.languages[lang]) {
137
121
  return Prism.highlight(code, Prism.languages[lang], lang);
138
122
  }
139
-
140
123
  return code;
141
124
  }
142
-
143
125
  });
144
-
145
126
  if (!customElements.get('openapi-explorer')) {
146
127
  customElements.define('syntax-highlighter', SyntaxHighlighter);
147
128
  }
@@ -3,12 +3,10 @@ export default class TagInput extends LitElement {
3
3
  createRenderRoot() {
4
4
  return this;
5
5
  }
6
-
7
6
  render() {
8
7
  const tagItemTemplate = html`${(this.value || []).filter(v => v.trim()).map(v => html`<span class="tag">${v}</span>`)}`;
9
8
  return html` <div class="tags" tabindex="0"> ${tagItemTemplate} <input type="text" class="editor" @change="${this.handleLeave}" @paste="${e => this.afterPaste(e)}" @keydown="${this.afterKeyDown}" placeholder="${this.placeholder || ''}"> </div> `;
10
9
  }
11
-
12
10
  static get properties() {
13
11
  return {
14
12
  placeholder: {
@@ -20,25 +18,20 @@ export default class TagInput extends LitElement {
20
18
  }
21
19
  };
22
20
  }
23
-
24
21
  connectedCallback() {
25
22
  super.connectedCallback();
26
-
27
23
  if (!Array.isArray(this.value)) {
28
24
  this.value = this.value !== '' ? [this.value] : [];
29
25
  }
30
26
  }
31
-
32
27
  attributeChangedCallback(name, oldVal, newVal) {
33
28
  if (name === 'value') {
34
29
  if (newVal && oldVal !== newVal) {
35
30
  this.value = newVal.split(',').filter(v => v.trim());
36
31
  }
37
32
  }
38
-
39
33
  super.attributeChangedCallback(name, oldVal, newVal);
40
34
  }
41
-
42
35
  afterPaste(e) {
43
36
  const clipboardData = e.clipboardData || window.clipboardData;
44
37
  const pastedData = clipboardData.getData('Text');
@@ -47,7 +40,6 @@ export default class TagInput extends LitElement {
47
40
  e.preventDefault();
48
41
  this.emitChanged();
49
42
  }
50
-
51
43
  afterKeyDown(e) {
52
44
  if (e.keyCode === 13) {
53
45
  e.stopPropagation();
@@ -59,17 +51,14 @@ export default class TagInput extends LitElement {
59
51
  this.value = this.value.slice(0, -1);
60
52
  }
61
53
  }
62
-
63
54
  this.emitChanged();
64
55
  }
65
-
66
56
  handleLeave(e) {
67
57
  e.stopPropagation();
68
58
  this.value = this.value.concat((e.target.value || '').split(',')).filter(v => v !== '');
69
59
  e.target.value = '';
70
60
  this.emitChanged();
71
61
  }
72
-
73
62
  emitChanged() {
74
63
  this.dispatchEvent(new CustomEvent('change', {
75
64
  detail: {
@@ -82,9 +71,8 @@ export default class TagInput extends LitElement {
82
71
  }
83
72
  }));
84
73
  }
85
-
86
- } // Register the element with the browser
87
-
74
+ }
75
+ // Register the element with the browser
88
76
  if (!customElements.get('openapi-explorer')) {
89
77
  customElements.define('tag-input', TagInput);
90
78
  }
@@ -4,9 +4,7 @@ export default class OpenapiExplorerOauthHandler extends LitElement {
4
4
  connectedCallback() {
5
5
  checkForAuthToken(true);
6
6
  }
7
-
8
7
  }
9
-
10
8
  if (!customElements.get('openapi-explorer-oauth-handler')) {
11
9
  customElements.define('openapi-explorer-oauth-handler', OpenapiExplorerOauthHandler);
12
10
  }