openapi-explorer 2.1.622 → 2.1.626

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 (12) hide show
  1. package/dist/browser/openapi-explorer.min.js +2 -2
  2. package/dist/es/components/syntax-highlighter.js +7 -5
  3. package/dist/es/openapi-explorer.js +45 -20
  4. package/dist/es/styles/nav-styles.js +1 -1
  5. package/dist/es/templates/code-samples-template.js +2 -1
  6. package/dist/es/templates/focused-endpoint-template.js +1 -1
  7. package/dist/lib/components/syntax-highlighter.js +7 -5
  8. package/dist/lib/openapi-explorer.js +45 -20
  9. package/dist/lib/styles/nav-styles.js +1 -1
  10. package/dist/lib/templates/code-samples-template.js +2 -1
  11. package/dist/lib/templates/focused-endpoint-template.js +1 -1
  12. package/package.json +1 -1
package/dist/es/components/syntax-highlighter.js CHANGED
@@ -87,16 +87,18 @@ class SyntaxHighlighter extends LitElement {
87
87
 
88
88
 
89
89
  renderHighlight() {
90
- var _this$content, _this$content2;
90
+ var _this$content;
91
91
 
92
92
  const lang = this.detectLanguage();
93
93
  const grammar = Prism.languages[lang];
94
94
 
95
- if (lang === 'json' && typeof this.content !== 'string') {
95
+ if (typeof this.content !== 'string') {
96
96
  return html`<json-tree .data="${this.content}">`;
97
97
  }
98
98
 
99
- return grammar ? html`<pre><code>${unsafeHTML(Prism.highlight((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString(), grammar, lang))}</code></pre>` : html`<pre>${(_this$content2 = this.content) === null || _this$content2 === void 0 ? void 0 : _this$content2.toString()}</pre>`;
99
+ const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString()) || '';
100
+ const increasedSpaceContent = lang !== 'python' && lang !== 'yaml' && lang !== 'toml' ? stringContent.split('\n').map(line => line.replace(/^\s{2}/g, ' ')).join('\n') : stringContent;
101
+ return grammar ? html`<pre><code>${unsafeHTML(Prism.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : html`<pre>${increasedSpaceContent}</pre>`;
100
102
  }
101
103
  /**
102
104
  * Render a copy-to-clipboard button.
@@ -115,9 +117,9 @@ class SyntaxHighlighter extends LitElement {
115
117
 
116
118
 
117
119
  copyToClipboard(e) {
118
- var _this$content3;
120
+ var _this$content2;
119
121
 
120
- const data = this.detectLanguage() === 'json' && typeof this.content !== 'string' ? JSON.stringify(this.content, null, 2) : (_this$content3 = this.content) === null || _this$content3 === void 0 ? void 0 : _this$content3.toString();
122
+ 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();
121
123
  copyToClipboard(data, e);
122
124
  }
123
125
 
package/dist/es/openapi-explorer.js CHANGED
@@ -690,7 +690,12 @@ export default class OpenApiExplorer extends LitElement {
690
690
  return node === event.target || node.children && [...node.children].some(c => hasChildNode(c));
691
691
  };
692
692
 
693
- const repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, slot => hasChildNode(slot));
693
+ let repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, slot => hasChildNode(slot));
694
+
695
+ if (repeatedElementIndex === -1 && navEl.dataset.contentId.match(/^section--\d+/)) {
696
+ repeatedElementIndex = Number(navEl.dataset.contentId.split('--')[1]) - 1;
697
+ }
698
+
694
699
  this.isIntersectionObserverActive = false;
695
700
  this.scrollTo(navEl.dataset.contentId, scrollNavItemToView, repeatedElementIndex);
696
701
  setTimeout(() => {
@@ -710,7 +715,7 @@ export default class OpenApiExplorer extends LitElement {
710
715
  }
711
716
  }
712
717
 
713
- async scrollToUnsafe(elementId, scrollNavItemToView = true, repeatedElementIndex) {
718
+ async scrollToUnsafe(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
714
719
  if (!this.resolvedSpec) {
715
720
  return;
716
721
  }
@@ -740,16 +745,50 @@ export default class OpenApiExplorer extends LitElement {
740
745
  } // For focused APIs, always scroll to the top of the component
741
746
 
742
747
 
743
- if (!elementId.match('cmp--') && !elementId.match('tag--')) {
748
+ let newNavEl;
749
+ const elementIndex = forcedRepeatedElementIndex || forcedRepeatedElementIndex === 0 ? forcedRepeatedElementIndex : Number(elementId.split('--')[1]) - 1;
750
+
751
+ if (elementId.match(/^section/)) {
752
+ const customSections = this.shadowRoot.querySelector('slot.custom-section');
753
+ const assignedNodesToCustomSections = customSections === null || customSections === void 0 ? void 0 : customSections.assignedNodes();
754
+
755
+ if (assignedNodesToCustomSections) {
756
+ try {
757
+ assignedNodesToCustomSections.map(customSection => {
758
+ customSection.classList.remove('active');
759
+ });
760
+ const newActiveCustomSection = assignedNodesToCustomSections[elementIndex];
761
+
762
+ if (newActiveCustomSection && !newActiveCustomSection.classList.contains('active')) {
763
+ newActiveCustomSection.classList.add('active');
764
+ }
765
+ } catch (error) {
766
+ // eslint-disable-next-line no-console
767
+ console.error('Failed to switch between custom sections, usually happens because the DOM is not ready and has not loaded these sections yet.', error);
768
+ }
769
+ }
770
+
771
+ const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
772
+ const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
773
+ newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[elementIndex]; // Update Location Hash
774
+
775
+ replaceState(`section--${elementIndex + 1}`);
776
+ } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
744
777
  this.shadowRoot.getElementById('operations-root').scrollIntoView({
745
778
  behavior: 'auto',
746
779
  block: 'start'
747
- });
780
+ }); // Update Location Hash
781
+
782
+ replaceState(elementId);
783
+ newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
748
784
  } else {
749
785
  contentEl.scrollIntoView({
750
786
  behavior: 'auto',
751
787
  block: 'start'
752
- });
788
+ }); // Update Location Hash
789
+
790
+ replaceState(elementId);
791
+ newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
753
792
  } // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
754
793
 
755
794
 
@@ -766,20 +805,6 @@ export default class OpenApiExplorer extends LitElement {
766
805
  } // Update NavBar View and Styles
767
806
 
768
807
 
769
- let newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
770
-
771
- if (elementId !== null && elementId !== void 0 && elementId.startsWith('section')) {
772
- const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
773
- const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
774
- const customSectionRepeatedElementIndex = (elementId.replace('section--', '') || 1) - 1;
775
- newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[customSectionRepeatedElementIndex || repeatedElementIndex || 0]; // Update Location Hash
776
-
777
- replaceState(`section--${repeatedElementIndex + 1 || 1}`);
778
- } else {
779
- // Update Location Hash
780
- replaceState(elementId);
781
- }
782
-
783
808
  if (!newNavEl) {
784
809
  return;
785
810
  }
@@ -800,7 +825,7 @@ export default class OpenApiExplorer extends LitElement {
800
825
 
801
826
  const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
802
827
  const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
803
- (assignedNodes || []).filter((n, nodeIndex) => nodeIndex !== repeatedElementIndex).forEach(node => {
828
+ (assignedNodes || []).filter((n, nodeIndex) => isNaN(elementIndex) || nodeIndex !== elementIndex).forEach(node => {
804
829
  node.classList.remove('active');
805
830
  });
806
831
  newNavEl.classList.add('active'); // must add the class after scrolling
package/dist/es/styles/nav-styles.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export default css`.nav-bar{width:0;height:100%;overflow:hidden;color:var(--nav-text-color);background-color:var(--nav-bg-color);background-blend-mode:multiply;line-height:calc(var(--font-size-small) + 4px);display:none;position:relative;flex-direction:column;flex-wrap:nowrap;word-break:break-word}.nav-scroll{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;scrollbar-width:thin;scrollbar-color:var(--nav-hover-scrollbar-color) transparent}.nav-bar-tag{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.toggle{font-size:16px;cursor:pointer;color:var(--nav-text-color);transform:translate(-5px,0) rotate(0);transition:transform .1s ease}.toggle:hover{color:var(--nav-hover-text-color)}.collapsed .toggle{transform:translate(-6px,0) rotate(-90deg)}.nav-bar-tag-and-paths>.nav-bar-section-wrapper{max-height:5000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.nav-bar-tag-and-paths.collapsed>.nav-bar-section-wrapper{transition:max-height 1.2s ease-in-out -1s;max-height:0}.nav-bar.focused,.nav-scroll{border-top:1px solid var(--secondary-color)}.nav-scroll::-webkit-scrollbar{width:10px}.nav-scroll::-webkit-scrollbar-track{background:0 0}.nav-scroll::-webkit-scrollbar-thumb{background-color:var(--nav-hover-scrollbar-color)}.nav-bar-tag{font-size:var(--font-size-regular);color:var(--secondary-color);border-left:4px solid transparent;font-weight:700;padding:15px 15px 15px 10px}.nav-bar-components,.nav-bar-h1,.nav-bar-h2,.nav-bar-info,.nav-bar-path,.nav-bar-tag,slot[name=nav-section]::slotted(*){display:flex;cursor:pointer;border-left:4px solid transparent}.nav-bar-h1,.nav-bar-h2,.nav-bar-path{font-size:calc(var(--font-size-regular) - 2px);padding:var(--nav-item-padding)}.nav-bar-path.small-font{font-size:var(--font-size-small)}.nav-bar-info,slot[name=nav-section]::slotted(*){font-size:var(--font-size-regular);padding:16px 10px;font-weight:700}.nav-bar-section{display:flex;flex-direction:row;justify-content:space-between;font-size:var(--font-size-small);color:var(--nav-text-color);padding:15px 15px 5px 5px;font-weight:700;border-bottom:1px solid var(--nav-text-color);background:var(--nav-bg-color)}.sticky-scroll-element{position:sticky;top:0;z-index:1;cursor:pointer}.nav-bar-h1{padding-left:20px}.nav-bar-h2{padding-left:30px}.nav-bar-h1.active,.nav-bar-h1.active:hover,.nav-bar-h2.active,.nav-bar-h2.active:hover,.nav-bar-info.active,.nav-bar-info.active:hover,.nav-bar-path.active,.nav-bar-path.active:hover,.nav-bar-tag.active,.nav-bar-tag.active:hover,slot[name=nav-section]::slotted(.active),slot[name=nav-section]::slotted(.active:hover){border-left:4px solid var(--secondary-color);color:var(--secondary-color);background-color:var(--nav-hover-bg-color)}.nav-bar-h1:hover,.nav-bar-h2:hover,.nav-bar-info:hover,.nav-bar-path:hover,.nav-bar-tag:hover,slot[name=nav-section]::slotted(:hover){color:var(--nav-hover-text-color);background-color:var(--nav-hover-bg-color)}`;
2
+ export default css`.nav-bar{width:0;height:100%;overflow:hidden;color:var(--nav-text-color);background-color:var(--nav-bg-color);background-blend-mode:multiply;line-height:calc(var(--font-size-small) + 4px);display:none;position:relative;flex-direction:column;flex-wrap:nowrap;word-break:break-word}.nav-scroll{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;scrollbar-width:thin;scrollbar-color:var(--nav-hover-scrollbar-color) transparent}.nav-bar-tag{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.toggle{font-size:16px;cursor:pointer;color:var(--nav-text-color);transform:translate(-5px,0) rotate(0);transition:transform .1s ease}.toggle:hover{color:var(--nav-hover-text-color)}.collapsed .toggle{transform:translate(-6px,0) rotate(-90deg)}.nav-bar-tag-and-paths>.nav-bar-section-wrapper{max-height:5000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.nav-bar-tag-and-paths.collapsed>.nav-bar-section-wrapper{transition:max-height 1.2s ease-in-out -1s;max-height:0}.nav-bar.focused,.nav-scroll{border-top:1px solid var(--secondary-color)}.nav-scroll::-webkit-scrollbar{width:10px}.nav-scroll::-webkit-scrollbar-track{background:0 0}.nav-scroll::-webkit-scrollbar-thumb{background-color:var(--nav-hover-scrollbar-color)}.nav-bar-tag{font-size:var(--font-size-regular);color:var(--secondary-color);border-left:4px solid transparent;font-weight:700;padding:15px 15px 15px 10px}.nav-bar-components,.nav-bar-h1,.nav-bar-h2,.nav-bar-info,.nav-bar-path,.nav-bar-tag,slot[name=nav-section]::slotted(*){display:flex;cursor:pointer;border-left:4px solid transparent}.nav-bar-h1,.nav-bar-h2,.nav-bar-path{font-size:calc(var(--font-size-regular) - 2px);padding:var(--nav-item-padding)}.nav-bar-path.small-font{font-size:var(--font-size-small)}.nav-bar-info,slot[name=nav-section]::slotted(*){font-size:var(--font-size-regular);padding:16px 10px;font-weight:700}.nav-bar-section{display:flex;flex-direction:row;justify-content:space-between;font-size:var(--font-size-small);color:var(--nav-text-color);padding:15px 15px 5px 5px;font-weight:700;border-bottom:1px solid var(--nav-text-color);background:var(--nav-bg-color)}.sticky-scroll-element{position:sticky;top:0;z-index:1;cursor:pointer}.nav-bar-h1{padding-left:20px}.nav-bar-h2{padding-left:30px}.nav-bar-h1.active,.nav-bar-h1.active:hover,.nav-bar-h2.active,.nav-bar-h2.active:hover,.nav-bar-info.active,.nav-bar-info.active:hover,.nav-bar-path.active,.nav-bar-path.active:hover,.nav-bar-tag.active,.nav-bar-tag.active:hover,slot[name=nav-section]::slotted(.active),slot[name=nav-section]::slotted(.active:hover){border-left:4px solid var(--secondary-color);color:var(--secondary-color);background-color:var(--nav-hover-bg-color)}.nav-bar-h1:hover,.nav-bar-h2:hover,.nav-bar-info:hover,.nav-bar-path:hover,.nav-bar-tag:hover,slot[name=nav-section]::slotted(:hover){color:var(--nav-hover-text-color);background-color:var(--nav-hover-bg-color)}.conditional-custom-section.custom-section::slotted(*){display:none}.conditional-custom-section.custom-section::slotted(.active){display:unset!important}`;
package/dist/es/templates/code-samples-template.js CHANGED
@@ -15,10 +15,11 @@ export default function codeSamplesTemplate(xCodeSamples) {
15
15
  tabBodyEl.style.display = tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none';
16
16
  });
17
17
  }}"> <div class="tab-buttons row" style="width:100"> ${xCodeSamples.map((v, i) => html`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab="${v.lang}${i}"> ${v.label || v.lang} </button>`)} </div> ${xCodeSamples.map((v, i) => {
18
+ // We skip the first line because it could be there is no padding there, but padding on the next lines which needs to be removed
18
19
  const paddingToRemove = Math.min(...v.source.split('\n').slice(1).map(l => {
19
20
  var _l$match;
20
21
 
21
- return (_l$match = l.match(/^(\s+).*$/)) === null || _l$match === void 0 ? void 0 : _l$match[1].length;
22
+ return (_l$match = l.match(/^(\s*).*$/m)) === null || _l$match === void 0 ? void 0 : _l$match[1].length;
22
23
  }).filter(l => typeof l !== 'undefined'));
23
24
  const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);
24
25
  const fullSource = sanitizedSource.join('\n');
package/dist/es/templates/focused-endpoint-template.js CHANGED
@@ -40,7 +40,7 @@ export default function focusedEndpointTemplate() {
40
40
  } else if (focusElId === 'servers' && !this.hideServerSelection) {
41
41
  focusedTemplate = serverTemplate.call(this);
42
42
  } else if (focusElId.startsWith('section')) {
43
- focusedTemplate = html` <section id="section" class="observe-me"> <slot name="custom-section"></slot> </section>`;
43
+ focusedTemplate = html` <section id="section" class="observe-me"> <slot class="conditional-custom-section custom-section" name="custom-section"></slot> </section>`;
44
44
  } else if (focusElId.startsWith('cmp--') && !this.hideComponents) {
45
45
  focusedTemplate = componentsTemplate.call(this);
46
46
  } else if (focusElId.startsWith('tag--')) {
package/dist/lib/components/syntax-highlighter.js CHANGED
@@ -111,16 +111,18 @@ class SyntaxHighlighter extends _lit.LitElement {
111
111
 
112
112
 
113
113
  renderHighlight() {
114
- var _this$content, _this$content2;
114
+ var _this$content;
115
115
 
116
116
  const lang = this.detectLanguage();
117
117
  const grammar = _prismjs.default.languages[lang];
118
118
 
119
- if (lang === 'json' && typeof this.content !== 'string') {
119
+ if (typeof this.content !== 'string') {
120
120
  return (0, _lit.html)`<json-tree .data="${this.content}">`;
121
121
  }
122
122
 
123
- return grammar ? (0, _lit.html)`<pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString(), grammar, lang))}</code></pre>` : (0, _lit.html)`<pre>${(_this$content2 = this.content) === null || _this$content2 === void 0 ? void 0 : _this$content2.toString()}</pre>`;
123
+ const stringContent = ((_this$content = this.content) === null || _this$content === void 0 ? void 0 : _this$content.toString()) || '';
124
+ const increasedSpaceContent = lang !== 'python' && lang !== 'yaml' && lang !== 'toml' ? stringContent.split('\n').map(line => line.replace(/^\s{2}/g, ' ')).join('\n') : stringContent;
125
+ return grammar ? (0, _lit.html)`<pre><code>${(0, _unsafeHtml.unsafeHTML)(_prismjs.default.highlight(increasedSpaceContent, grammar, lang))}</code></pre>` : (0, _lit.html)`<pre>${increasedSpaceContent}</pre>`;
124
126
  }
125
127
  /**
126
128
  * Render a copy-to-clipboard button.
@@ -139,9 +141,9 @@ class SyntaxHighlighter extends _lit.LitElement {
139
141
 
140
142
 
141
143
  copyToClipboard(e) {
142
- var _this$content3;
144
+ var _this$content2;
143
145
 
144
- const data = this.detectLanguage() === 'json' && typeof this.content !== 'string' ? JSON.stringify(this.content, null, 2) : (_this$content3 = this.content) === null || _this$content3 === void 0 ? void 0 : _this$content3.toString();
146
+ 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();
145
147
  (0, _commonUtils.copyToClipboard)(data, e);
146
148
  }
147
149
 
package/dist/lib/openapi-explorer.js CHANGED
@@ -720,7 +720,12 @@ class OpenApiExplorer extends _lit.LitElement {
720
720
  return node === event.target || node.children && [...node.children].some(c => hasChildNode(c));
721
721
  };
722
722
 
723
- const repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, slot => hasChildNode(slot));
723
+ let repeatedElementIndex = assignedNodes && [].findIndex.call(assignedNodes, slot => hasChildNode(slot));
724
+
725
+ if (repeatedElementIndex === -1 && navEl.dataset.contentId.match(/^section--\d+/)) {
726
+ repeatedElementIndex = Number(navEl.dataset.contentId.split('--')[1]) - 1;
727
+ }
728
+
724
729
  this.isIntersectionObserverActive = false;
725
730
  this.scrollTo(navEl.dataset.contentId, scrollNavItemToView, repeatedElementIndex);
726
731
  setTimeout(() => {
@@ -740,7 +745,7 @@ class OpenApiExplorer extends _lit.LitElement {
740
745
  }
741
746
  }
742
747
 
743
- async scrollToUnsafe(elementId, scrollNavItemToView = true, repeatedElementIndex) {
748
+ async scrollToUnsafe(elementId, scrollNavItemToView = true, forcedRepeatedElementIndex) {
744
749
  if (!this.resolvedSpec) {
745
750
  return;
746
751
  }
@@ -770,16 +775,50 @@ class OpenApiExplorer extends _lit.LitElement {
770
775
  } // For focused APIs, always scroll to the top of the component
771
776
 
772
777
 
773
- if (!elementId.match('cmp--') && !elementId.match('tag--')) {
778
+ let newNavEl;
779
+ const elementIndex = forcedRepeatedElementIndex || forcedRepeatedElementIndex === 0 ? forcedRepeatedElementIndex : Number(elementId.split('--')[1]) - 1;
780
+
781
+ if (elementId.match(/^section/)) {
782
+ const customSections = this.shadowRoot.querySelector('slot.custom-section');
783
+ const assignedNodesToCustomSections = customSections === null || customSections === void 0 ? void 0 : customSections.assignedNodes();
784
+
785
+ if (assignedNodesToCustomSections) {
786
+ try {
787
+ assignedNodesToCustomSections.map(customSection => {
788
+ customSection.classList.remove('active');
789
+ });
790
+ const newActiveCustomSection = assignedNodesToCustomSections[elementIndex];
791
+
792
+ if (newActiveCustomSection && !newActiveCustomSection.classList.contains('active')) {
793
+ newActiveCustomSection.classList.add('active');
794
+ }
795
+ } catch (error) {
796
+ // eslint-disable-next-line no-console
797
+ console.error('Failed to switch between custom sections, usually happens because the DOM is not ready and has not loaded these sections yet.', error);
798
+ }
799
+ }
800
+
801
+ const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
802
+ const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
803
+ newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[elementIndex]; // Update Location Hash
804
+
805
+ (0, _commonUtils.replaceState)(`section--${elementIndex + 1}`);
806
+ } else if (!elementId.match('cmp--') && !elementId.match('tag--')) {
774
807
  this.shadowRoot.getElementById('operations-root').scrollIntoView({
775
808
  behavior: 'auto',
776
809
  block: 'start'
777
- });
810
+ }); // Update Location Hash
811
+
812
+ (0, _commonUtils.replaceState)(elementId);
813
+ newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
778
814
  } else {
779
815
  contentEl.scrollIntoView({
780
816
  behavior: 'auto',
781
817
  block: 'start'
782
- });
818
+ }); // Update Location Hash
819
+
820
+ (0, _commonUtils.replaceState)(elementId);
821
+ newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
783
822
  } // for focused style it is important to reset request-body-selection and response selection which maintains the state for in case of multiple req-body or multiple response mime-type
784
823
 
785
824
 
@@ -796,20 +835,6 @@ class OpenApiExplorer extends _lit.LitElement {
796
835
  } // Update NavBar View and Styles
797
836
 
798
837
 
799
- let newNavEl = this.shadowRoot.getElementById(`link-${elementId}`);
800
-
801
- if (elementId !== null && elementId !== void 0 && elementId.startsWith('section')) {
802
- const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
803
- const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
804
- const customSectionRepeatedElementIndex = (elementId.replace('section--', '') || 1) - 1;
805
- newNavEl = assignedNodes === null || assignedNodes === void 0 ? void 0 : assignedNodes[customSectionRepeatedElementIndex || repeatedElementIndex || 0]; // Update Location Hash
806
-
807
- (0, _commonUtils.replaceState)(`section--${repeatedElementIndex + 1 || 1}`);
808
- } else {
809
- // Update Location Hash
810
- (0, _commonUtils.replaceState)(elementId);
811
- }
812
-
813
838
  if (!newNavEl) {
814
839
  return;
815
840
  }
@@ -830,7 +855,7 @@ class OpenApiExplorer extends _lit.LitElement {
830
855
 
831
856
  const navSectionSlot = this.shadowRoot.querySelector('slot.custom-nav-section');
832
857
  const assignedNodes = navSectionSlot === null || navSectionSlot === void 0 ? void 0 : navSectionSlot.assignedNodes();
833
- (assignedNodes || []).filter((n, nodeIndex) => nodeIndex !== repeatedElementIndex).forEach(node => {
858
+ (assignedNodes || []).filter((n, nodeIndex) => isNaN(elementIndex) || nodeIndex !== elementIndex).forEach(node => {
834
859
  node.classList.remove('active');
835
860
  });
836
861
  newNavEl.classList.add('active'); // must add the class after scrolling
package/dist/lib/styles/nav-styles.js CHANGED
@@ -5,6 +5,6 @@ exports.default = void 0;
5
5
 
6
6
  var _lit = require("lit");
7
7
 
8
- var _default = (0, _lit.css)`.nav-bar{width:0;height:100%;overflow:hidden;color:var(--nav-text-color);background-color:var(--nav-bg-color);background-blend-mode:multiply;line-height:calc(var(--font-size-small) + 4px);display:none;position:relative;flex-direction:column;flex-wrap:nowrap;word-break:break-word}.nav-scroll{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;scrollbar-width:thin;scrollbar-color:var(--nav-hover-scrollbar-color) transparent}.nav-bar-tag{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.toggle{font-size:16px;cursor:pointer;color:var(--nav-text-color);transform:translate(-5px,0) rotate(0);transition:transform .1s ease}.toggle:hover{color:var(--nav-hover-text-color)}.collapsed .toggle{transform:translate(-6px,0) rotate(-90deg)}.nav-bar-tag-and-paths>.nav-bar-section-wrapper{max-height:5000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.nav-bar-tag-and-paths.collapsed>.nav-bar-section-wrapper{transition:max-height 1.2s ease-in-out -1s;max-height:0}.nav-bar.focused,.nav-scroll{border-top:1px solid var(--secondary-color)}.nav-scroll::-webkit-scrollbar{width:10px}.nav-scroll::-webkit-scrollbar-track{background:0 0}.nav-scroll::-webkit-scrollbar-thumb{background-color:var(--nav-hover-scrollbar-color)}.nav-bar-tag{font-size:var(--font-size-regular);color:var(--secondary-color);border-left:4px solid transparent;font-weight:700;padding:15px 15px 15px 10px}.nav-bar-components,.nav-bar-h1,.nav-bar-h2,.nav-bar-info,.nav-bar-path,.nav-bar-tag,slot[name=nav-section]::slotted(*){display:flex;cursor:pointer;border-left:4px solid transparent}.nav-bar-h1,.nav-bar-h2,.nav-bar-path{font-size:calc(var(--font-size-regular) - 2px);padding:var(--nav-item-padding)}.nav-bar-path.small-font{font-size:var(--font-size-small)}.nav-bar-info,slot[name=nav-section]::slotted(*){font-size:var(--font-size-regular);padding:16px 10px;font-weight:700}.nav-bar-section{display:flex;flex-direction:row;justify-content:space-between;font-size:var(--font-size-small);color:var(--nav-text-color);padding:15px 15px 5px 5px;font-weight:700;border-bottom:1px solid var(--nav-text-color);background:var(--nav-bg-color)}.sticky-scroll-element{position:sticky;top:0;z-index:1;cursor:pointer}.nav-bar-h1{padding-left:20px}.nav-bar-h2{padding-left:30px}.nav-bar-h1.active,.nav-bar-h1.active:hover,.nav-bar-h2.active,.nav-bar-h2.active:hover,.nav-bar-info.active,.nav-bar-info.active:hover,.nav-bar-path.active,.nav-bar-path.active:hover,.nav-bar-tag.active,.nav-bar-tag.active:hover,slot[name=nav-section]::slotted(.active),slot[name=nav-section]::slotted(.active:hover){border-left:4px solid var(--secondary-color);color:var(--secondary-color);background-color:var(--nav-hover-bg-color)}.nav-bar-h1:hover,.nav-bar-h2:hover,.nav-bar-info:hover,.nav-bar-path:hover,.nav-bar-tag:hover,slot[name=nav-section]::slotted(:hover){color:var(--nav-hover-text-color);background-color:var(--nav-hover-bg-color)}`;
8
+ var _default = (0, _lit.css)`.nav-bar{width:0;height:100%;overflow:hidden;color:var(--nav-text-color);background-color:var(--nav-bg-color);background-blend-mode:multiply;line-height:calc(var(--font-size-small) + 4px);display:none;position:relative;flex-direction:column;flex-wrap:nowrap;word-break:break-word}.nav-scroll{overflow-x:hidden;overflow-y:auto;overflow-y:overlay;scrollbar-width:thin;scrollbar-color:var(--nav-hover-scrollbar-color) transparent}.nav-bar-tag{display:flex;align-items:center;justify-content:space-between;flex-direction:row}.toggle{font-size:16px;cursor:pointer;color:var(--nav-text-color);transform:translate(-5px,0) rotate(0);transition:transform .1s ease}.toggle:hover{color:var(--nav-hover-text-color)}.collapsed .toggle{transform:translate(-6px,0) rotate(-90deg)}.nav-bar-tag-and-paths>.nav-bar-section-wrapper{max-height:5000px;transition:max-height 1.2s ease-in-out;overflow:hidden}.nav-bar-tag-and-paths.collapsed>.nav-bar-section-wrapper{transition:max-height 1.2s ease-in-out -1s;max-height:0}.nav-bar.focused,.nav-scroll{border-top:1px solid var(--secondary-color)}.nav-scroll::-webkit-scrollbar{width:10px}.nav-scroll::-webkit-scrollbar-track{background:0 0}.nav-scroll::-webkit-scrollbar-thumb{background-color:var(--nav-hover-scrollbar-color)}.nav-bar-tag{font-size:var(--font-size-regular);color:var(--secondary-color);border-left:4px solid transparent;font-weight:700;padding:15px 15px 15px 10px}.nav-bar-components,.nav-bar-h1,.nav-bar-h2,.nav-bar-info,.nav-bar-path,.nav-bar-tag,slot[name=nav-section]::slotted(*){display:flex;cursor:pointer;border-left:4px solid transparent}.nav-bar-h1,.nav-bar-h2,.nav-bar-path{font-size:calc(var(--font-size-regular) - 2px);padding:var(--nav-item-padding)}.nav-bar-path.small-font{font-size:var(--font-size-small)}.nav-bar-info,slot[name=nav-section]::slotted(*){font-size:var(--font-size-regular);padding:16px 10px;font-weight:700}.nav-bar-section{display:flex;flex-direction:row;justify-content:space-between;font-size:var(--font-size-small);color:var(--nav-text-color);padding:15px 15px 5px 5px;font-weight:700;border-bottom:1px solid var(--nav-text-color);background:var(--nav-bg-color)}.sticky-scroll-element{position:sticky;top:0;z-index:1;cursor:pointer}.nav-bar-h1{padding-left:20px}.nav-bar-h2{padding-left:30px}.nav-bar-h1.active,.nav-bar-h1.active:hover,.nav-bar-h2.active,.nav-bar-h2.active:hover,.nav-bar-info.active,.nav-bar-info.active:hover,.nav-bar-path.active,.nav-bar-path.active:hover,.nav-bar-tag.active,.nav-bar-tag.active:hover,slot[name=nav-section]::slotted(.active),slot[name=nav-section]::slotted(.active:hover){border-left:4px solid var(--secondary-color);color:var(--secondary-color);background-color:var(--nav-hover-bg-color)}.nav-bar-h1:hover,.nav-bar-h2:hover,.nav-bar-info:hover,.nav-bar-path:hover,.nav-bar-tag:hover,slot[name=nav-section]::slotted(:hover){color:var(--nav-hover-text-color);background-color:var(--nav-hover-bg-color)}.conditional-custom-section.custom-section::slotted(*){display:none}.conditional-custom-section.custom-section::slotted(.active){display:unset!important}`;
9
9
 
10
10
  exports.default = _default;
package/dist/lib/templates/code-samples-template.js CHANGED
@@ -20,10 +20,11 @@ function codeSamplesTemplate(xCodeSamples) {
20
20
  tabBodyEl.style.display = tabBodyEl.dataset.tab === clickedTab ? 'block' : 'none';
21
21
  });
22
22
  }}"> <div class="tab-buttons row" style="width:100"> ${xCodeSamples.map((v, i) => (0, _lit.html)`<button class="tab-btn ${i === 0 ? 'active' : ''}" data-tab="${v.lang}${i}"> ${v.label || v.lang} </button>`)} </div> ${xCodeSamples.map((v, i) => {
23
+ // We skip the first line because it could be there is no padding there, but padding on the next lines which needs to be removed
23
24
  const paddingToRemove = Math.min(...v.source.split('\n').slice(1).map(l => {
24
25
  var _l$match;
25
26
 
26
- return (_l$match = l.match(/^(\s+).*$/)) === null || _l$match === void 0 ? void 0 : _l$match[1].length;
27
+ return (_l$match = l.match(/^(\s*).*$/m)) === null || _l$match === void 0 ? void 0 : _l$match[1].length;
27
28
  }).filter(l => typeof l !== 'undefined'));
28
29
  const sanitizedSource = v.source.split('\n').map(s => s.substring(0, paddingToRemove).match(/^\s+$/) ? s.substring(paddingToRemove) : s);
29
30
  const fullSource = sanitizedSource.join('\n');
package/dist/lib/templates/focused-endpoint-template.js CHANGED
@@ -54,7 +54,7 @@ function focusedEndpointTemplate() {
54
54
  } else if (focusElId === 'servers' && !this.hideServerSelection) {
55
55
  focusedTemplate = _serverTemplate.default.call(this);
56
56
  } else if (focusElId.startsWith('section')) {
57
- focusedTemplate = (0, _lit.html)` <section id="section" class="observe-me"> <slot name="custom-section"></slot> </section>`;
57
+ focusedTemplate = (0, _lit.html)` <section id="section" class="observe-me"> <slot class="conditional-custom-section custom-section" name="custom-section"></slot> </section>`;
58
58
  } else if (focusElId.startsWith('cmp--') && !this.hideComponents) {
59
59
  focusedTemplate = _componentsTemplate.default.call(this);
60
60
  } else if (focusElId.startsWith('tag--')) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "openapi-explorer",
3
- "version": "2.1.622",
3
+ "version": "2.1.626",
4
4
  "description": "OpenAPI Explorer - API viewer with dynamically generated components, documentation, and interaction console",
5
5
  "author": "Rhosys Developers <developers@rhosys.ch>",
6
6
  "type": "module",