rapidoc 9.3.3 → 9.3.4

package/src/rapidoc.js

@@ -38,7 +38,9 @@ export default class RapiDoc extends LitElement {
       threshold: 0,
     };
     this.showSummaryWhenCollapsed = true;
-    this.isIntersectionObserverActive = true;
+    // Will activate intersection observer only after spec load and hash analyze
+    // to scroll to the proper element without being reverted by observer behavior
+    this.isIntersectionObserverActive = false;
     this.intersectionObserver = new IntersectionObserver((entries) => { this.onIntersect(entries); }, intersectionObserverOptions);
   }
 
@@ -87,6 +89,7 @@ export default class RapiDoc extends LitElement {
       showInfo: { type: String, attribute: 'show-info' },
       allowAuthentication: { type: String, attribute: 'allow-authentication' },
       allowTry: { type: String, attribute: 'allow-try' },
+      showCurlBeforeTry: { type: String, attribute: 'show-curl-before-try' },
       allowSpecUrlLoad: { type: String, attribute: 'allow-spec-url-load' },
       allowSpecFileLoad: { type: String, attribute: 'allow-spec-file-load' },
       allowSpecFileDownload: { type: String, attribute: 'allow-spec-file-download' },
@@ -116,6 +119,8 @@ export default class RapiDoc extends LitElement {
       navHoverBgColor: { type: String, attribute: 'nav-hover-bg-color' },
       navHoverTextColor: { type: String, attribute: 'nav-hover-text-color' },
       navAccentColor: { type: String, attribute: 'nav-accent-color' },
+      navAccentTextColor: { type: String, attribute: 'nav-accent-text-color' },
+      navActiveItemMarker: { type: String, attribute: 'nav-active-item-marker' },
       navItemSpacing: { type: String, attribute: 'nav-item-spacing' },
       showMethodInNavBar: { type: String, attribute: 'show-method-in-nav-bar' },
       usePathInNavBar: { type: String, attribute: 'use-path-in-nav-bar' },
@@ -162,13 +167,14 @@ export default class RapiDoc extends LitElement {
         background-color:var(--bg);
         font-family:var(--font-regular);
       }
-      .body {
+      :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 {
         display:flex;
         height:100%;
         width:100%;
         overflow:hidden;
       }
-
       .main-content { 
         margin:0;
         padding: 0; 
@@ -282,11 +288,21 @@ export default class RapiDoc extends LitElement {
         height: 36px;
         animation: spin 2s linear infinite;
       }
-      .expanded-endpoint-body{ 
+      .expanded-endpoint-body { 
         position: relative;
         padding: 6px 0px; 
       }
-      .expanded-endpoint-body.deprecated{ filter:opacity(0.6); }
+      .expanded-endpoint-body .tag-description {
+        background: var(--code-bg);
+        border-radius: var(--border-radius);
+        transition: max-height .2s ease-out;
+      }
+      .expanded-endpoint-body .tag-icon {
+        transition: transform .2s ease-out;
+      }
+      .expanded-endpoint-body .tag-icon.expanded {
+        transform: rotate(180deg);
+      }
       .divider { 
         border-top: 2px solid var(--border-color);
         margin: 24px 0;
@@ -345,6 +361,9 @@ export default class RapiDoc extends LitElement {
         border-radius: 4px 0 0 4px;
         color: #000;
       }
+      .colored-block .nav-method.as-colored-block {
+        outline: 1px solid;
+      }
 
       .nav-method.as-colored-block.get { background-color: var(--blue); }
       .nav-method.as-colored-block.put { background-color: var(--orange); }
@@ -438,7 +457,7 @@ export default class RapiDoc extends LitElement {
     }
 
     if (!this.layout || !'row, column,'.includes(`${this.layout},`)) { this.layout = 'row'; }
-    if (!this.renderStyle || !'read, view, focused,'.includes(`${this.renderStyle},`)) { this.renderStyle = 'read'; }
+    if (!this.renderStyle || !'read, view, focused,'.includes(`${this.renderStyle},`)) { this.renderStyle = 'focused'; }
     if (!this.schemaStyle || !'tree, table,'.includes(`${this.schemaStyle},`)) { this.schemaStyle = 'tree'; }
     if (!this.theme || !'light, dark,'.includes(`${this.theme},`)) {
       this.theme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) ? 'light' : 'dark';
@@ -456,7 +475,6 @@ export default class RapiDoc extends LitElement {
 
     if (!this.fillRequestFieldsWithExample || !'true, false,'.includes(`${this.fillRequestFieldsWithExample},`)) { this.fillRequestFieldsWithExample = 'true'; }
     if (!this.persistAuth || !'true, false,'.includes(`${this.persistAuth},`)) { this.persistAuth = 'false'; }
-    if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.responseAreaHeight) {
       this.responseAreaHeight = '400px';
     }
@@ -475,11 +493,14 @@ export default class RapiDoc extends LitElement {
     if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
     if (!this.generateMissingTags || !'true, false,'.includes(`${this.generateMissingTags},`)) { this.generateMissingTags = 'false'; }
     if (!this.sortEndpointsBy || !'method, path, summary, none,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
+
+    if (!this.onNavTagClick || !'expand-collapse, show-description,'.includes(`${this.onNavTagClick},`)) { this.onNavTagClick = 'expand-collapse'; }
     if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }
     if (!this.showMethodInNavBar || !'false, as-plain-text, as-colored-text, as-colored-block,'.includes(`${this.showMethodInNavBar},`)) { this.showMethodInNavBar = 'false'; }
     if (!this.usePathInNavBar || !'true, false,'.includes(`${this.usePathInNavBar},`)) { this.usePathInNavBar = 'false'; }
-    if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
+    if (!this.navActiveItemMarker || !'left-bar, colored-block'.includes(`${this.navActiveItemMarker},`)) { this.navActiveItemMarker = 'left-bar'; }
 
+    if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
     if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
     if (!this.allowServerSelection || !'true, false,'.includes(`${this.allowServerSelection},`)) { this.allowServerSelection = 'true'; }
     if (!this.allowAuthentication || !'true, false,'.includes(`${this.allowAuthentication},`)) { this.allowAuthentication = 'true'; }
@@ -506,9 +527,7 @@ export default class RapiDoc extends LitElement {
     });
 
     window.addEventListener('hashchange', () => {
-      const regEx = new RegExp(`^${this.routePrefix}`, 'i');
-      const elementId = window.location.hash.replace(regEx, '');
-      this.scrollTo(elementId);
+      this.scrollToPath(this.getElementIDFromURL());
     }, true);
   }
 
@@ -552,7 +571,7 @@ export default class RapiDoc extends LitElement {
           await this.loadSpec(newVal);
           // If goto-path is provided and no location-hash is present then try to scroll there
           if (this.gotoPath && !window.location.hash) {
-            this.scrollTo(this.gotoPath);
+            this.scrollToPath(this.gotoPath);
           }
         }, 0);
       }
@@ -621,11 +640,11 @@ export default class RapiDoc extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-  onSepcUrlChange() {
+  onSpecUrlChange() {
     this.setAttribute('spec-url', this.shadowRoot.getElementById('spec-url').value);
   }
 
-  onSepcFileChange(e) {
+  onSpecFileChange(e) {
     this.setAttribute('spec-file', this.shadowRoot.getElementById('spec-file').value);
     const specFile = e.target.files[0];
     const reader = new FileReader();
@@ -754,25 +773,62 @@ export default class RapiDoc extends LitElement {
       this.observeExpandedContent(); // This will auto-highlight the selected nav-item in read-mode
     }
 
+    this.isIntersectionObserverActive = true;
+
     // On first time Spec load, try to navigate to location hash if provided
-    const locationHash = window.location.hash?.substring(1);
-    if (locationHash) {
-      const regEx = new RegExp(`^${this.routePrefix}`, 'i');
-      const elementId = window.location.hash.replace(regEx, '');
+    const elementId = this.getElementIDFromURL();
+
+    if (elementId) {
       if (this.renderStyle === 'view') {
         this.expandAndGotoOperation(elementId, true, true);
       } else {
-        this.scrollTo(elementId);
+        this.scrollToPath(elementId);
       }
     } else if (this.renderStyle === 'focused') {
       // If goto-path is provided and no location-hash is present then try to scroll to default element
       if (!this.gotoPath) {
         const defaultElementId = this.showInfo ? 'overview' : this.resolvedSpec.tags[0]?.paths[0];
-        this.scrollTo(defaultElementId);
+        this.scrollToPath(defaultElementId);
       }
     }
   }
 
+  /**
+   * Return the URL from where is served the RapiDoc component, removing any hash and route prefix
+   */
+  getComponentBaseURL() {
+    const { href } = window.location;
+
+    // Remove end of string # or /
+    const cleanRouterPrefix = this.routePrefix.replace(/(#|\/)$/, '');
+
+    if (!cleanRouterPrefix) {
+      return href.split('#')[0];
+    }
+
+    const indexOfRoutePrefix = href.lastIndexOf(cleanRouterPrefix);
+
+    if (indexOfRoutePrefix === -1) {
+      return href;
+    }
+
+    return href.slice(0, indexOfRoutePrefix);
+  }
+
+  /**
+   * From the URL return the ID of the element whether it is in the hash or if used a router prefix without a hash
+   */
+  getElementIDFromURL() {
+    const baseURL = this.getComponentBaseURL();
+    const elementId = window.location.href.replace(baseURL + this.routePrefix, '');
+    return elementId;
+  }
+
+  replaceHistoryState(hashId) {
+    const baseURL = this.getComponentBaseURL();
+    window.history.replaceState(null, null, `${baseURL}${this.routePrefix || '#'}${hashId}`);
+  }
+
   expandAndGotoOperation(elementId, scrollToElement = true) {
     if (!this.resolvedSpec) {
       return;
@@ -806,7 +862,7 @@ export default class RapiDoc extends LitElement {
         if (gotoEl) {
           gotoEl.scrollIntoView({ behavior: 'auto', block: 'start' });
           if (this.updateRoute === 'true') {
-            window.history.replaceState(null, null, `${this.routePrefix || '#'}${tmpElementId}`);
+            this.replaceHistoryState(tmpElementId);
           }
         }
       }, isExpandingNeeded ? 150 : 0);
@@ -837,6 +893,7 @@ export default class RapiDoc extends LitElement {
     if (this.isIntersectionObserverActive === false) {
       return;
     }
+
     entries.forEach((entry) => {
       if (entry.isIntersecting && entry.intersectionRatio > 0) {
         const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');
@@ -845,14 +902,18 @@ export default class RapiDoc extends LitElement {
         // Add active class in the new element
         if (newNavEl) {
           if (this.updateRoute === 'true') {
-            window.history.replaceState(null, null, `${window.location.href.split('#')[0]}${this.routePrefix || '#'}${entry.target.id}`);
+            this.replaceHistoryState(entry.target.id);
           }
           newNavEl.scrollIntoView({ behavior: 'auto', block: 'center' });
           newNavEl.classList.add('active');
+          newNavEl.part.add('section-navbar-active-item');
         }
+
         // Remove active class from previous element
-        if (oldNavEl) {
+        // if it is different from the new one (edge case on loading in read render style)
+        if (oldNavEl && oldNavEl !== newNavEl) {
           oldNavEl.classList.remove('active');
+          oldNavEl.part.remove('section-navbar-active-item');
         }
       }
     });
@@ -882,7 +943,10 @@ export default class RapiDoc extends LitElement {
    *
   */
   async scrollToEventTarget(event, scrollNavItemToView = true) {
-    const navEl = event.currentTarget;
+    if (!(event.type === 'click' || (event.type === 'keyup' && event.keyCode === 13))) {
+      return;
+    }
+    const navEl = event.target;
     if (!navEl.dataset.contentId) {
       return;
     }
@@ -890,21 +954,22 @@ export default class RapiDoc extends LitElement {
     if (this.renderStyle === 'focused') {
       const requestEl = this.shadowRoot.querySelector('api-request');
       if (requestEl) {
-        requestEl.beforerNavigationFocusedMode();
+        requestEl.beforeNavigationFocusedMode();
       }
     }
-    this.scrollTo(navEl.dataset.contentId, true, scrollNavItemToView);
+    this.scrollToPath(navEl.dataset.contentId, true, scrollNavItemToView);
     setTimeout(() => {
       this.isIntersectionObserverActive = true;
     }, 300);
   }
 
   // Public Method (scrolls to a given path and highlights the left-nav selection)
-  async scrollTo(elementId, expandPath = true, scrollNavItemToView = true) {
+  async scrollToPath(elementId, expandPath = true, scrollNavItemToView = true) {
     if (this.renderStyle === 'focused') {
       // for focused mode update this.focusedElementId to update the rendering, else it wont find the needed html elements
       // focusedElementId will get validated in the template
       this.focusedElementId = elementId;
+      await sleep(0);
     }
     if (this.renderStyle === 'view') {
       this.expandAndGotoOperation(elementId, expandPath, true);
@@ -932,7 +997,7 @@ export default class RapiDoc extends LitElement {
 
         // Update Location Hash
         if (this.updateRoute === 'true') {
-          window.history.replaceState(null, null, `${this.routePrefix || '#'}${elementId}`);
+          this.replaceHistoryState(elementId);
         }
 
         // Update NavBar View and Styles
@@ -946,8 +1011,11 @@ export default class RapiDoc extends LitElement {
           const oldNavEl = this.shadowRoot.querySelector('.nav-bar-tag.active, .nav-bar-path.active, .nav-bar-info.active, .nav-bar-h1.active, .nav-bar-h2.active, .operations.active');
           if (oldNavEl) {
             oldNavEl.classList.remove('active');
+            oldNavEl.part.remove('active');
+            oldNavEl.part.remove('section-navbar-active-item');
           }
           newNavEl.classList.add('active'); // must add the class after scrolling
+          newNavEl.part.add('section-navbar-active-item');
           // this.requestUpdate();
         }
       }
@@ -986,8 +1054,8 @@ export default class RapiDoc extends LitElement {
       } else {
         searchInputEl = eventTargetEl.closest('.advanced-search-options').querySelector('input[type=text]');
       }
-      const searcOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map((v) => v.id);
-      this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searcOptions);
+      const searchOptions = [...eventTargetEl.closest('.advanced-search-options').querySelectorAll('input:checked')].map((v) => v.id);
+      this.advancedSearchMatches = advancedSearch(searchInputEl.value, this.resolvedSpec.tags, searchOptions);
     }, delay);
   }
 }

package/src/styles/endpoint-styles.js

@@ -130,7 +130,7 @@ export default css`
   border: 2px solid var(--yellow); 
 }
 
-.req-resp-container{
+.req-resp-container {
   display: flex;
   margin-top:16px;
   align-items: stretch;

package/src/styles/info-styles.js

@@ -2,7 +2,8 @@ import { css } from 'lit';
 
 export default css`
 #api-info {
-  font-size:calc(var(--font-size-regular) - 1px);margin-top:8px
+  font-size: calc(var(--font-size-regular) - 1px);
+  margin-top: 8px;
   margin-left: -15px;
 }
 

package/src/styles/input-styles.js

@@ -105,15 +105,6 @@ input[type="password"]::placeholder {
   opacity:1;
 }
 
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-textarea:active,
-input[type="text"]:active,
-input[type="password"]:active {
-  border:1px solid var(--primary-color);
-}
 
 input[type="file"]{
   font-family: var(--font-regular);
@@ -167,10 +158,6 @@ textarea::-webkit-scrollbar-thumb {
   margin-bottom:2px;
 }
 
-input[type="checkbox"]:focus{
-  outline:0;
-}
-
 /* Toggle Body */
 input[type="checkbox"] {
   appearance: none;
@@ -203,7 +190,7 @@ input[type="checkbox"]:after {
 
 /* Toggle Body - Checked */
 input[type="checkbox"]:checked {
-  box-shadow: inset 0 0 0 13px var(--green);
+  background-color: var(--green);
   border-color: var(--green);
 }
 /* Toggle Thumb - Checked*/
@@ -212,5 +199,4 @@ input[type="checkbox"]:checked:after {
   left: 16px;
   right: 1px;
   transition: border .25s, left .15s .25s, right .25s .175s;
-}
-`;
+}`;

package/src/styles/nav-styles.js

@@ -1,6 +1,20 @@
 import { css } from 'lit';
 
 export default css`
+.nav-bar-info:focus-visible,
+.nav-bar-tag:focus-visible,
+.nav-bar-path:focus-visible {
+  outline: 1px solid;
+  box-shadow: none;
+  outline-offset: -4px;
+}
+.nav-bar-expand-all:focus-visible,
+.nav-bar-collapse-all:focus-visible,
+.nav-bar-tag-icon:focus-visible {
+  outline: 1px solid;
+  box-shadow: none;
+  outline-offset: 2px;
+}
 .nav-bar {
   width:0;
   height:100%;
@@ -35,6 +49,26 @@ export default css`
 .nav-bar.read .nav-bar-tag-icon {
   display:none;
 }
+.nav-bar-paths-under-tag {
+  overflow:hidden;
+  transition: max-height .2s ease-out, visibility .3s;
+}
+.collapsed .nav-bar-paths-under-tag {
+  visibility: hidden;
+}
+
+.nav-bar-expand-all {
+  transform: rotate(90deg); 
+  cursor:pointer; 
+  margin-right:10px;
+}
+.nav-bar-collapse-all {
+  transform: rotate(270deg); 
+  cursor:pointer;
+}
+.nav-bar-expand-all:hover, .nav-bar-collapse-all:hover {
+  color: var(--primary-color);
+}
 
 .nav-bar-tag-icon {
   color: var(--nav-text-color);
@@ -43,9 +77,6 @@ export default css`
 .nav-bar-tag-icon:hover {
   color:var(--nav-hover-text-color);
 }
-.nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-paths-under-tag {
-  display:none;
-}
 .nav-bar.focused .nav-bar-tag-and-paths.collapsed .nav-bar-tag-icon::after {
   content: '⌵';
   width:16px;
@@ -89,7 +120,12 @@ export default css`
 .nav-bar-tag,
 .nav-bar-path {
   display:flex;
-  cursor:pointer;
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  border-radius:4px; 
+  color: var(--nav-text-color);
+  background: transparent;
   border-left:4px solid transparent;
 }
 
@@ -130,16 +166,27 @@ export default css`
 }
 .nav-bar-h2 {margin-left:12px;}
 
-.nav-bar-h1.active,
-.nav-bar-h2.active,
-.nav-bar-info.active,
-.nav-bar-tag.active,
-.nav-bar-path.active,
-.nav-bar-section.operations.active {
+.nav-bar-h1.left-bar.active,
+.nav-bar-h2.left-bar.active,
+.nav-bar-info.left-bar.active,
+.nav-bar-tag.left-bar.active,
+.nav-bar-path.left-bar.active,
+.nav-bar-section.left-bar.operations.active {
   border-left:4px solid var(--nav-accent-color);
   color:var(--nav-hover-text-color);
 }
 
+.nav-bar-h1.colored-block.active,
+.nav-bar-h2.colored-block.active,
+.nav-bar-info.colored-block.active,
+.nav-bar-tag.colored-block.active,
+.nav-bar-path.colored-block.active,
+.nav-bar-section.colored-block.operations.active {
+  background-color: var(--nav-accent-color);
+  color: var(--nav-accent-text-color);
+  border-radius: 0;
+}
+
 .nav-bar-h1:hover,
 .nav-bar-h2:hover,
 .nav-bar-info:hover,

package/src/styles/schema-styles.js

@@ -10,6 +10,7 @@ export default css`
   width: 100%;
   box-sizing: content-box;
   border-bottom: 1px dotted transparent;
+  transition: max-height 0.3s ease-out;
 }
 .td {
   display: block;
@@ -21,9 +22,29 @@ export default css`
   word-break: break-all;
 }
 
-.collapsed-descr .key {
+.collapsed-all-descr .key {
   overflow:hidden;
 }
+.expanded-all-descr .key-descr .descr-expand-toggle {
+  display:none;
+}
+
+.key-descr .descr-expand-toggle {
+  display:inline-block;
+  user-select:none;
+  color: var(--fg);
+  cursor: pointer;
+  transform: rotate(45deg);
+  transition: transform .2s ease;
+}
+
+.expanded-descr .key-descr .descr-expand-toggle {
+  transform: rotate(270deg)
+}
+
+.key-descr .descr-expand-toggle:hover {
+  color: var(--primary-color);
+}
 
 .expanded-descr .more-content { display:none; }
 
@@ -40,13 +61,6 @@ export default css`
   overflow:hidden;
   display: none;
 }
-.collapsed-descr .tr {
-  max-height:20px;
-}
-
-.tr.xxx-of{
-  border-top: 1px dotted var(--primary-color);
-}
 
 .xxx-of-key {
   font-size: calc(var(--font-size-small) - 2px); 
@@ -61,10 +75,10 @@ export default css`
 }
 
 .xxx-of-descr {
-    font-family: var(--font-regular);
-    color: var(--primary-color);
-    font-size: calc(var(--font-size-small) - 1px);
-    margin-left: 2px;
+  font-family: var(--font-regular);
+  color: var(--primary-color);
+  font-size: calc(var(--font-size-small) - 1px);
+  margin-left: 2px;
 }
 
 .stri, .string, .uri, .url, .byte, .bina, .date, .pass, .ipv4, .ipv4, .uuid, .emai, .host {color:var(--green);}
@@ -72,6 +86,7 @@ export default css`
 .null {color:var(--red);}
 .bool, .boolean{color:var(--orange)}
 .enum {color:var(--purple)}
+.cons {color:var(--purple)}
 .recu {color:var(--brown)}
 .toolbar {
   display:flex;
@@ -90,9 +105,6 @@ export default css`
   font-weight: bold;
   text-transform: uppercase;
 }
-.schema-root-type.xxx-of {
-  display:none;
-}
 .toolbar-item:first-of-type { margin:0 2px 0 0;}
 
 @media only screen and (min-width: 500px) {

package/src/styles/tab-styles.js

@@ -6,6 +6,7 @@ export default css`
 }
 .tab-buttons {
   height:30px;
+  padding: 4px 4px 0 4px;
   border-bottom: 1px solid var(--light-border-color) ;
   align-items: stretch;
   overflow-y: hidden;

package/src/templates/callback-template.js

@@ -35,14 +35,14 @@ export default function callbackTemplate(callbacks) {
                       active-schema-tab = "${this.defaultSchemaTab}"
                       schema-expand-level = "${this.schemaExpandLevel}"
                       schema-description-expanded = "${this.schemaDescriptionExpanded}"
-                      allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+                      allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
                       schema-hide-read-only = "false"
                       schema-hide-write-only = "${this.schemaHideWriteOnly === 'never' ? 'false' : 'true'}"
                       fetch-credentials = "${this.fetchCredentials}"
-                      exportparts = "btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
+                      exportparts = "wrap-request-btn:wrap-request-btn, btn:btn, btn-fill:btn-fill, btn-outline:btn-outline, btn-try:btn-try, btn-clear:btn-clear, btn-clear-resp:btn-clear-resp,
                         file-input:file-input, textbox:textbox, textbox-param:textbox-param, textarea:textarea, textarea-param:textarea-param, 
                         anchor:anchor, anchor-param-example:anchor-param-example, schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-                    > </api-request>
+                      > </api-request>
 
                     <api-response
                       style = "width:100%;"

package/src/templates/code-samples-template.js

@@ -28,6 +28,7 @@ export default function codeSamplesTemplate(xCodeSamples) {
         <pre><code class="language">${Prism.languages[v.lang?.toLowerCase()] ? unsafeHTML(Prism.highlight(v.source, Prism.languages[v.lang?.toLowerCase()], v.lang?.toLowerCase())) : v.source}</code></pre>
       </div>`)
     }
+  </div>  
   </section>`;
 }
 /* eslint-enable indent */

package/src/templates/components-template.js

@@ -14,22 +14,20 @@ function schemaBodyTemplate(sComponent) {
   ${this.schemaStyle === 'table'
     ? html`
       <schema-table
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"
-      > </schema-tree> `
+      > </schema-table>`
     : html`
       <schema-tree
-        render-style = '${this.renderStyle}'
         .data = '${schemaInObjectNotation(sComponent.component, {})}'
         schema-expand-level = "${this.schemaExpandLevel}"
         schema-description-expanded = "${this.schemaDescriptionExpanded}"
-        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}",
+        allow-schema-description-expand-toggle = "${this.allowSchemaDescriptionExpandToggle}"
         schema-hide-read-only = "false"
         schema-hide-write-only = "${this.schemaHideWriteOnly}"
         exportparts = "schema-description:schema-description, schema-multiline-toggle:schema-multiline-toggle"