rapidoc 9.3.6 → 9.3.8

package/src/components/api-response.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'; // eslint-disable-line import/extensions
 import { marked } from 'marked';
-import { schemaInObjectNotation, generateExample } from '~/utils/schema-utils';
+import { schemaInObjectNotation, generateExample, standardizeExample } from '~/utils/schema-utils';
 import FontStyles from '~/styles/font-styles';
 import FlexStyles from '~/styles/flex-styles';
 import TableStyles from '~/styles/table-styles';
@@ -92,7 +92,7 @@ export default class ApiResponse extends LitElement {
       </div>
       <div>
         ${this.responseTemplate()}
-      <div>  
+      </div>  
     </div>  
     `;
   }
@@ -121,8 +121,8 @@ export default class ApiResponse extends LitElement {
         const respExamples = generateExample(
           mimeRespObj.schema,
           mimeResp,
-          mimeRespObj.examples,
-          mimeRespObj.example,
+          standardizeExample(mimeRespObj.examples),
+          standardizeExample(mimeRespObj.example),
           this.callback === 'true' || this.webhook === 'true' ? false : true, // eslint-disable-line no-unneeded-ternary
           this.callback === 'true' || this.webhook === 'true' ? true : false, // eslint-disable-line no-unneeded-ternary
           mimeResp.includes('json') ? 'json' : 'text',
@@ -165,10 +165,9 @@ export default class ApiResponse extends LitElement {
                   ${respStatus} 
                 </button>`
               }`)
-          }`
+          }</div>`
         : html`<span>${Object.keys(this.responses)[0]}</span>`
       }
-      </div>
 
       ${Object.keys(this.responses).map((status) => html`
         <div style = 'display: ${status === this.selectedStatus ? 'block' : 'none'}' >
@@ -182,10 +181,10 @@ export default class ApiResponse extends LitElement {
           ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0
             ? ''
             : 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 === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
-                  <button class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
+              <div part="tab-panel" class="tab-panel col">
+                <div part="tab-btn-row" class="tab-buttons row" @click="${(e) => { if (e.target.tagName.toLowerCase() === 'button') { this.activeSchemaTab = e.target.dataset.tab; } }}" >
+                  <button part="tab-btn" class="tab-btn ${this.activeSchemaTab === 'example' ? 'active' : ''}" data-tab = 'example'>EXAMPLE </button>
+                  <button part="tab-btn" class="tab-btn ${this.activeSchemaTab !== 'example' ? 'active' : ''}" data-tab = 'schema' >SCHEMA</button>
                   <div style="flex:1"></div>
                   ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 1
                     ? html`<span class='small-font-size gray-text' style='align-self:center; margin-top:8px;'> ${Object.keys(this.mimeResponsesForEachStatus[status])[0]} </span>`
@@ -193,16 +192,16 @@ export default class ApiResponse extends LitElement {
                   }
                 </div>
                 ${this.activeSchemaTab === 'example'
-                  ? html`<div class ='tab-content col' style = 'flex:1;'>
+                  ? html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
                       ${this.mimeExampleTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
                     </div>`
-                  : html`<div class ='tab-content col' style = 'flex:1;'>
+                  : html`<div part="tab-content" class ='tab-content col' style = 'flex:1;'>
                       ${this.mimeSchemaTemplate(this.mimeResponsesForEachStatus[status][this.selectedMimeType])}
                     </div>`
                 }
               </div>
             `
-          }`)
+          }</div>`)
         }
     `;
   }

package/src/components/json-tree.js

@@ -102,7 +102,7 @@ export default class JsonTree extends LitElement {
 
   generateTree(data, isLast = false) {
     if (data === null) {
-      return html`<div class="null" style="display:inline;">null</div>`;
+      return html`<span class="null">null</span>${isLast ? '' : ','}`;
     }
     if (typeof data === 'object' && (data instanceof Date === false)) {
       const detailType = Array.isArray(data) ? 'array' : 'pure_object';

package/src/components/schema-table.js

@@ -199,7 +199,7 @@ export default class SchemaTable extends LitElement {
         ${newSchemaLevel >= 0 && key
           ? html`
             <div class='tr ${newSchemaLevel <= this.schemaExpandLevel ? 'expanded' : 'collapsed'} ${data['::type']}' data-obj='${keyLabel}' title="${isDeprecated || data['::deprecated'] ? 'Deprecated' : ''}">
-              <div class="td key ${isDeprecated || data['::deprecated'] ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
+              <div class="td key ${(isDeprecated || data['::deprecated']) ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
                 ${(keyLabel || keyDescr)
                   ? html`
                     <span class='obj-toggle ${newSchemaLevel < this.schemaExpandLevel ? 'expanded' : 'collapsed'}' data-obj='${keyLabel}'>
@@ -210,8 +210,14 @@ export default class SchemaTable extends LitElement {
                 ${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;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${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;">${isDeprecated || data['::deprecated'] ? '✗' : ''} ${keyLabel === '::props' ? '' : keyLabel}</span>`
+                    ? html`<span class="key-label" style="display:inline-block; margin-left:-6px;">${(isDeprecated || data['::deprecated'])
+                      ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+                      : ''
+                    } ${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;">${(isDeprecated || data['::deprecated'])
+                      ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+                      : ''
+                    } ${keyLabel === '::props' ? '' : keyLabel}</span>`
                 }
                 ${data['::type'] === 'xxx-of' && dataType === 'array' ? html`<span style="color:var(--primary-color)">ARRAY</span>` : ''} 
               </div>
@@ -250,6 +256,7 @@ export default class SchemaTable extends LitElement {
                       newSchemaLevel,
                       newIndentLevel,
                       data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                      (isDeprecated || data[dataKey]['::deprecated']),
                     )}`
                   : ''
                 : html`${this.generateTree(
@@ -261,13 +268,13 @@ export default class SchemaTable extends LitElement {
                   newSchemaLevel,
                   newIndentLevel,
                   data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
-                  isDeprecated || data[dataKey]['::deprecated'],
+                  (isDeprecated || data[dataKey]['::deprecated']),
                 )}`
               }
             `)}
           `
         }
-        <div>
+        </div>
       `;
     }
 
@@ -297,7 +304,10 @@ export default class SchemaTable extends LitElement {
     return html`
       <div class = "tr primitive" title="${isDeprecated || deprecated ? 'Deprecated' : ''}">
         <div class="td key ${isDeprecated || deprecated ? 'deprecated' : ''}" style='padding-left:${leftPadding}px'>
-          ${isDeprecated || deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+          ${isDeprecated || deprecated
+            ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+            : ''
+          }
           ${keyLabel?.endsWith('*')
             ? html`
               <span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span>

package/src/components/schema-tree.js

@@ -48,9 +48,6 @@ export default class SchemaTree extends LitElement {
       .tree .key {
         max-width: 300px;
       }
-      .key.deprecated .key-label {
-        color: var(--red);
-      }
       .tr.expanded:hover > .td.key > .open-bracket {
         color: var(--primary-color);
       }
@@ -121,7 +118,7 @@ export default class SchemaTree extends LitElement {
     `;
   }
 
-  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '') {
+  generateTree(data, dataType = 'object', arrayType = '', key = '', description = '', schemaLevel = 0, indentLevel = 0, readOrWrite = '', isDeprecated = false) {
     if (this.schemaHideReadOnly === 'true') {
       if (dataType === 'array') {
         if (readOrWrite === 'readonly') {
@@ -212,15 +209,18 @@ export default class SchemaTree extends LitElement {
     }
     if (typeof data === 'object') {
       return html`
-        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${data['::deprecated'] ? 'Deprecated' : ''}">
-          <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style='min-width:${minFieldColWidth}px'>
+        <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type']?.startsWith('xxx-of') ? 'expanded' : 'collapsed'} ${data['::type'] || 'no-type-info'}${data['::nullable'] ? ' nullable' : ''}" title="${(isDeprecated || data['::deprecated']) ? 'Deprecated' : ''}">
+          <div class="td key ${(isDeprecated || 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" title="${readOrWrite === 'readonly' ? 'Read-Only' : readOrWrite === 'writeonly' ? 'Write-Only' : ''}">
-                      ${data['::deprecated'] ? '✗' : ''}
+                      ${(isDeprecated || data['::deprecated'])
+                        ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+                        : ''
+                      }
                       ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span style="color:var(--red)">*</span>` : ''}${readOrWrite === 'readonly' ? html` 🆁` : readOrWrite === 'writeonly' ? html` 🆆` : readOrWrite}:
                     </span>`
                   : ''
@@ -231,7 +231,7 @@ export default class SchemaTree extends LitElement {
         </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, data[0]['::readwrite'])}`
+            ? html`${this.generateTree(data[0], 'xxx-of-option', '', '::ARRAY~OF', '', newSchemaLevel, newIndentLevel, data[0]['::readwrite'], (isDeprecated || data[0]['::deprecated']))}`
             : html`
               ${Object.keys(data).map((dataKey) => html`
                 ${['::title', '::description', '::type', '::props', '::deprecated', '::array-type', '::readwrite', '::dataTypeLabel', '::nullable'].includes(dataKey)
@@ -245,6 +245,7 @@ export default class SchemaTree extends LitElement {
                         newSchemaLevel,
                         newIndentLevel,
                         data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                        (isDeprecated || data[dataKey]['::deprecated']),
                       )}`
                     : ''
                   : html`${this.generateTree(
@@ -256,6 +257,7 @@ export default class SchemaTree extends LitElement {
                     newSchemaLevel,
                     newIndentLevel,
                     data[dataKey]['::readwrite'] ? data[dataKey]['::readwrite'] : '',
+                    (isDeprecated || data[dataKey]['::deprecated']),
                   )}`
                 }
               `)}
@@ -300,8 +302,11 @@ export default class SchemaTree extends LitElement {
 
     return html`
       <div class = "tr primitive" title="${deprecated ? 'Deprecated' : ''}">
-        <div class="td key ${deprecated}" style='min-width:${minFieldColWidth}px'>
-          ${deprecated ? html`<span style='color:var(--red);'>✗</span>` : ''}
+        <div class="td key ${isDeprecated || deprecated}" style='min-width:${minFieldColWidth}px'>
+          ${isDeprecated || deprecated
+            ? html`<svg viewBox="0 0 10 10" width="10" height="10" style="stroke:var(--red); margin-right:-6px"><path d="M2 2L8 8M2 8L8 2"/></svg>`
+            : ''
+          }
           ${keyLabel.endsWith('*')
             ? html`<span class="key-label">${keyLabel.substring(0, keyLabel.length - 1)}</span><span style='color:var(--red);'>*</span>:`
             : key.startsWith('::OPTION')

package/src/json-schema-viewer.js

@@ -86,6 +86,7 @@ export default class JsonSchemaViewer extends LitElement {
       InfoStyles,
       css`
       :host {
+        all: initial;
         display:flex;
         flex-direction: column;
         min-width:360px;
@@ -98,6 +99,7 @@ export default class JsonSchemaViewer extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
       .body {
         display:flex;
@@ -163,11 +165,11 @@ export default class JsonSchemaViewer extends LitElement {
         height: 36px;
         animation: spin 2s linear infinite;
       }
-      @media only screen and (min-width: 768px) {
+      @container (min-width: 768px) {
         .only-large-screen{
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
       }`,
@@ -289,6 +291,9 @@ export default class JsonSchemaViewer extends LitElement {
         this.sortTags === 'true',
         this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
+        this.getAttribute('match-paths'),
+        this.getAttribute('match-type'),
+        this.getAttribute('remove-endpoints-with-badge-label-as'),
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/rapidoc-mini.js

@@ -67,6 +67,7 @@ export default class RapiDocMini extends LitElement {
       oauthReceiver: { type: String, attribute: 'oauth-receiver' },
 
       allowTry: { type: String, attribute: 'allow-try' },
+      showCurlBeforeTry: { type: String, attribute: 'show-curl-before-try' },
 
       // Main Colors and Font
       theme: { type: String },
@@ -84,6 +85,7 @@ export default class RapiDocMini extends LitElement {
       // Filters
       matchPaths: { type: String, attribute: 'match-paths' },
       matchType: { type: String, attribute: 'match-type' },
+      removeEndpointsWithBadgeLabelAs: { type: String, attribute: 'remove-endpoints-with-badge-label-as' },
 
       // Internal Properties
       loading: { type: Boolean }, // indicates spec is being loaded
@@ -103,6 +105,7 @@ export default class RapiDocMini extends LitElement {
       InfoStyles,
       css`
       :host {
+        all: initial;
         display:flex;
         flex-direction: column;
         min-width:360px;
@@ -115,13 +118,14 @@ export default class RapiDocMini extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
 
-      @media only screen and (min-width: 768px) {
-        .only-large-screen{
+      @container (min-width: 768px) {
+        .only-large-screen {
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
       }`,
@@ -181,7 +185,10 @@ export default class RapiDocMini extends LitElement {
     if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
     if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
+
     if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
+    if (!this.matchPaths) { this.matchPaths = ''; }
+    if (!this.removeEndpointsWithBadgeLabelAs) { this.removeEndpointsWithBadgeLabelAs = ''; }
 
     if (!this.allowSchemaDescriptionExpandToggle || !'true, false,'.includes(`${this.allowSchemaDescriptionExpandToggle},`)) { this.allowSchemaDescriptionExpandToggle = 'true'; }
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
@@ -197,7 +204,7 @@ export default class RapiDocMini extends LitElement {
   }
 
   render() {
-    return mainBodyTemplate.call(this, true, false, false, this.pathsExpanded);
+    return mainBodyTemplate.call(this, true, this.pathsExpanded);
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -209,6 +216,13 @@ export default class RapiDocMini extends LitElement {
         }, 0);
       }
     }
+    if (name === 'match-paths' || name === 'match-type' || name === 'remove-endpoints-with-badge-label-as') {
+      if (oldVal !== newVal) {
+        window.setTimeout(async () => {
+          await this.loadSpec(this.specUrl);
+        }, 0);
+      }
+    }
     if (name === 'api-key-name' || name === 'api-key-location' || name === 'api-key-value') {
       let updateSelectedApiKey = false;
       let apiKeyName = '';
@@ -287,11 +301,15 @@ export default class RapiDocMini extends LitElement {
         specUrl,
         this.generateMissingTags === 'true',
         this.sortTags === 'true',
+        this.sortSchemas === 'true',
         this.getAttribute('sort-endpoints-by'),
         this.getAttribute('api-key-name'),
         this.getAttribute('api-key-location'),
         this.getAttribute('api-key-value'),
         this.getAttribute('server-url'),
+        this.matchPaths,
+        this.matchType,
+        this.removeEndpointsWithBadgeLabelAs,
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/rapidoc.js

@@ -23,7 +23,7 @@ import NavStyles from '~/styles/nav-styles';
 import InfoStyles from '~/styles/info-styles';
 import CustomStyles from '~/styles/custom-styles';
 // import { expandCollapseNavBarTag } from '@/templates/navbar-template';
-import { advancedSearch, pathIsInSearch, componentIsInSearch, rapidocApiKey, sleep } from '~/utils/common-utils';
+import { advancedSearch, getMatchedPaths, getMatchedComponents, rapidocApiKey, sleep } from '~/utils/common-utils';
 import ProcessSpec from '~/utils/spec-parser';
 import mainBodyTemplate from '~/templates/main-body-template';
 import { applyApiKey, onClearAllApiKeys } from '~/templates/security-scheme-template';
@@ -134,12 +134,14 @@ export default class RapiDoc extends LitElement {
       // Filters
       matchPaths: { type: String, attribute: 'match-paths' },
       matchType: { type: String, attribute: 'match-type' },
+      removeEndpointsWithBadgeLabelAs: { type: String, attribute: 'remove-endpoints-with-badge-label-as' },
 
       // Internal Properties
       loading: { type: Boolean }, // indicates spec is being loaded
       focusedElementId: { type: String }, // updating the focusedElementId will automatically render appropriate section in focused mode
       showAdvancedSearchDialog: { type: Boolean },
       advancedSearchMatches: { type: Object },
+      searchVal: { type: String },
     };
   }
 
@@ -156,6 +158,7 @@ export default class RapiDoc extends LitElement {
       InfoStyles,
       css`
       :host {
+        all: initial;
         display:flex;
         flex-direction: column;
         min-width:360px;
@@ -168,10 +171,11 @@ export default class RapiDoc extends LitElement {
         color:var(--fg);
         background-color:var(--bg);
         font-family:var(--font-regular);
+        container-type: inline-size;
       }
       :where(button, input[type="checkbox"], [tabindex="0"]):focus-visible { box-shadow: var(--focus-shadow); }
       :where(input[type="text"], input[type="password"], select, textarea):focus-visible { border-color: var(--primary-color); }
-    .body {
+      .body {
         display:flex;
         height:100%;
         width:100%;
@@ -216,11 +220,11 @@ export default class RapiDoc extends LitElement {
         cursor: n-resize;
         padding: 12px 0;
       }
-      .collapsed .section-tag-header:hover{
+      .collapsed .section-tag-header:hover {
         cursor: s-resize;
       }
 
-      .section-tag-header:hover{
+      .section-tag-header:hover {
         background-image: linear-gradient(to right, rgba(0,0,0,0), var(--border-color), rgba(0,0,0,0));
       }
 
@@ -255,7 +259,7 @@ export default class RapiDoc extends LitElement {
         margin-left:5px; 
       }
       .only-large-screen-flex,
-      .only-large-screen{
+      .only-large-screen {
         display:none;
       }
       .tag.title {
@@ -375,15 +379,15 @@ export default class RapiDoc extends LitElement {
         background-color: var(--yellow); 
       }
 
-      @media only screen and (min-width: 768px) {
+      @container (min-width: 768px) {
         .nav-bar {
           width: 260px;
           display:flex;
         }
-        .only-large-screen{
+        .only-large-screen {
           display:block;
         }
-        .only-large-screen-flex{
+        .only-large-screen-flex {
           display:flex;
         }
         .section-gap { 
@@ -401,7 +405,7 @@ export default class RapiDoc extends LitElement {
         }
       }
 
-      @media only screen and (min-width: 1024px) {
+      @container (min-width: 1024px) {
         .nav-bar {
           width: ${unsafeCSS(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};
           display:flex;
@@ -513,9 +517,11 @@ export default class RapiDoc extends LitElement {
     if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }
     if (!this.infoDescriptionHeadingsInNavBar || !'true, false,'.includes(`${this.infoDescriptionHeadingsInNavBar},`)) { this.infoDescriptionHeadingsInNavBar = 'false'; }
     if (!this.fetchCredentials || !'omit, same-origin, include,'.includes(`${this.fetchCredentials},`)) { this.fetchCredentials = ''; }
-    if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
     if (!this.scrollBehavior || !'smooth, auto,'.includes(`${this.scrollBehavior},`)) { this.scrollBehavior = 'auto'; }
 
+    if (!this.matchType || !'includes regex'.includes(this.matchType)) { this.matchType = 'includes'; }
+    if (!this.matchPaths) { this.matchPaths = ''; }
+    if (!this.removeEndpointsWithBadgeLabelAs) { this.removeEndpointsWithBadgeLabelAs = ''; }
     if (!this.showAdvancedSearchDialog) { this.showAdvancedSearchDialog = false; }
 
     if (!this.cssFile) { this.cssFile = null; }
@@ -580,6 +586,13 @@ export default class RapiDoc extends LitElement {
         }, 0);
       }
     }
+    if (name === 'match-paths' || name === 'match-type' || name === 'remove-endpoints-with-badge-label-as') {
+      if (oldVal !== newVal) {
+        window.setTimeout(async () => {
+          await this.loadSpec(this.specUrl);
+        }, 0);
+      }
+    }
     if (name === 'render-style') {
       if (newVal === 'read') {
         window.setTimeout(() => {
@@ -657,7 +670,7 @@ export default class RapiDoc extends LitElement {
         const specObj = JSON.parse(reader.result);
         this.loadSpec(specObj);
         this.shadowRoot.getElementById('spec-url').value = '';
-      } catch (err) {
+      } catch {
         console.error('RapiDoc: Unable to read or parse json'); // eslint-disable-line no-console
       }
     };
@@ -670,18 +683,18 @@ export default class RapiDoc extends LitElement {
   }
 
   onSearchChange(e) {
-    this.matchPaths = e.target.value;
-    this.resolvedSpec.tags.forEach((tag) => tag.paths.filter((v) => {
-      if (this.matchPaths) {
-        // v.expanded = false;
-        if (pathIsInSearch(this.matchPaths, v, this.matchType)) {
+    // this.matchPaths = e.target.value;
+    this.searchVal = e.target.value;
+    this.resolvedSpec.tags.forEach((tag) => tag.paths.filter((path) => {
+      if (this.searchVal) {
+        if (getMatchedPaths(this.searchVal, path, tag.name)) {
           tag.expanded = true;
         }
       }
     }));
     this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {
       v.expanded = false;
-      if (!this.matchPaths || componentIsInSearch(this.matchPaths, v)) {
+      if (getMatchedComponents(this.searchVal, v)) {
         v.expanded = true;
       }
     }));
@@ -691,7 +704,7 @@ export default class RapiDoc extends LitElement {
   onClearSearch() {
     const searchEl = this.shadowRoot.getElementById('nav-bar-search');
     searchEl.value = '';
-    this.matchPaths = '';
+    this.searchVal = '';
     this.resolvedSpec.components.forEach((component) => component.subComponents.filter((v) => {
       v.expanded = true;
     }));
@@ -716,7 +729,7 @@ export default class RapiDoc extends LitElement {
     if (!specUrl) {
       return;
     }
-    this.matchPaths = '';
+    this.searchVal = '';
     try {
       this.resolvedSpec = {
         specLoadError: false,
@@ -736,6 +749,9 @@ export default class RapiDoc extends LitElement {
         this.getAttribute('api-key-location'),
         this.getAttribute('api-key-value'),
         this.getAttribute('server-url'),
+        this.matchPaths,
+        this.matchType,
+        this.removeEndpointsWithBadgeLabelAs,
       );
       this.loading = false;
       this.afterSpecParsedAndValidated(spec);

package/src/styles/border-styles.js

@@ -15,10 +15,10 @@ export default css`
 .pad-8-16{
   padding: 8px 16px;
 }
-.pad-top-8{
+.pad-top-8 {
   padding-top: 8px;
 }
-.mar-top-8{
+.mar-top-8 {
   margin-top: 8px;
 }
 `;

package/src/styles/endpoint-styles.js

@@ -1,8 +1,11 @@
 import { css } from 'lit';
 
 export default css`
+:host {
+  container-type: inline-size;
+}
 .only-large-screen { display:none; }
-.endpoint-head .path{
+.endpoint-head .path {
   display: flex;
   font-family:var(--font-mono);
   font-size: var(--font-size-small);
@@ -21,7 +24,7 @@ export default css`
   display:none;
 }
 
-.m-endpoint.expanded{margin-bottom:16px; }
+.m-endpoint.expanded { margin-bottom:16px; }
 .m-endpoint > .endpoint-head{
   border-width:1px 1px 1px 5px;
   border-style:solid;
@@ -33,7 +36,7 @@ export default css`
   cursor: pointer;
 }
 .m-endpoint > .endpoint-head.put:hover,
-.m-endpoint > .endpoint-head.put.expanded{
+.m-endpoint > .endpoint-head.put.expanded {
   border-color:var(--orange); 
   background-color:var(--light-orange); 
 }
@@ -78,20 +81,20 @@ export default css`
 }
 .m-endpoint .endpoint-body.delete{ border-color:var(--red); }
 .m-endpoint .endpoint-body.put{ border-color:var(--orange); }
-.m-endpoint .endpoint-body.post{border-color:var(--green);}
-.m-endpoint .endpoint-body.get{ border-color:var(--blue); }
+.m-endpoint .endpoint-body.post { border-color:var(--green); }
+.m-endpoint .endpoint-body.get { border-color:var(--blue); }
 .m-endpoint .endpoint-body.head,
 .m-endpoint .endpoint-body.patch,
 .m-endpoint .endpoint-body.options { 
   border-color:var(--yellow); 
 }
 
-.m-endpoint .endpoint-body.deprecated{ 
+.m-endpoint .endpoint-body.deprecated { 
   border-color:var(--border-color);
   filter:opacity(0.6);
 }
 
-.endpoint-head .deprecated{
+.endpoint-head .deprecated {
   color: var(--light-fg);
   filter:opacity(0.6);
 }
@@ -99,13 +102,13 @@ export default css`
 .summary{
   padding:8px 8px;
 }
-.summary .title{
+.summary .title {
   font-size:calc(var(--font-size-regular) + 2px);
   margin-bottom: 6px;
   word-break: break-all;
 }
 
-.endpoint-head .method{
+.endpoint-head .method {
   padding:2px 5px;
   vertical-align: middle;
   font-size:var(--font-size-small);
@@ -169,7 +172,7 @@ api-response.view-mode {
   border-color:var(--red); 
 }
 
-@media only screen and (min-width: 1024px) {
+@container (min-width: 1024px) {
   .only-large-screen { display:block; }
   .endpoint-head .path{
     font-size: var(--font-size-regular);

package/src/styles/flex-styles.js

@@ -1,7 +1,7 @@
 import { css } from 'lit';
 
 export default css`
-.row, .col{
+.row, .col {
   display:flex;
 } 
 .row {