@nanoporetech-digital/components 8.5.5 → 8.5.6
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.
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +20 -16
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/in-page-nav/in-page-nav.css +6 -2
- package/dist/collection/components/in-page-nav/in-page-nav.js +19 -17
- package/dist/components/nano-in-page-nav.js +20 -18
- package/dist/esm/nano-in-page-nav.entry.js +20 -16
- package/dist/nano-components/nano-components.css +7 -0
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/style/components.css +1 -1
- package/dist/style/components.css.map +1 -1
- package/dist/style/nano.css +1 -1
- package/dist/style/nano.css.map +1 -1
- package/dist/types/components/in-page-nav/in-page-nav.d.ts +1 -1
- package/docs-json.json +2 -2
- package/hydrate/index.js +17 -16
- package/hydrate/index.mjs +17 -16
- package/package.json +2 -2
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → sN_eAsgS}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -9,13 +9,12 @@ var slot = require('./slot-CJgcluNw.js');
|
|
|
9
9
|
var dom = require('./dom-Dxk5vXYq.js');
|
|
10
10
|
var scroll = require('./scroll-C6pO9RvO.js');
|
|
11
11
|
|
|
12
|
-
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <=
|
|
12
|
+
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
|
|
13
13
|
|
|
14
14
|
const NanoInPageNav = class {
|
|
15
15
|
constructor(hostRef) {
|
|
16
16
|
index.registerInstance(this, hostRef);
|
|
17
17
|
}
|
|
18
|
-
scrollElement;
|
|
19
18
|
get host() { return index.getElement(this); }
|
|
20
19
|
autoExternalLinks = false;
|
|
21
20
|
io;
|
|
@@ -53,19 +52,23 @@ const NanoInPageNav = class {
|
|
|
53
52
|
return node;
|
|
54
53
|
}
|
|
55
54
|
assessLinks() {
|
|
55
|
+
if (this.externalLinks !== 'auto')
|
|
56
|
+
return;
|
|
56
57
|
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
this.autoExternalLinks = true;
|
|
64
|
-
}
|
|
58
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
59
|
+
if (anchors.length > allLinks.length / 2) {
|
|
60
|
+
this.autoExternalLinks = false;
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
this.autoExternalLinks = true;
|
|
65
64
|
}
|
|
65
|
+
}
|
|
66
|
+
setupIntersectionObserver() {
|
|
66
67
|
if (!this.autoActive)
|
|
67
68
|
return;
|
|
69
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
68
70
|
const sections = [];
|
|
71
|
+
const scrollElement = scroll.findScrollParent(this.host);
|
|
69
72
|
anchors.forEach((link) => {
|
|
70
73
|
const id = link.getAttribute('href')?.substring(1);
|
|
71
74
|
if (!id)
|
|
@@ -102,9 +105,7 @@ const NanoInPageNav = class {
|
|
|
102
105
|
activeLink?.classList.add('is-active');
|
|
103
106
|
}
|
|
104
107
|
}, {
|
|
105
|
-
root:
|
|
106
|
-
? null
|
|
107
|
-
: this.scrollElement,
|
|
108
|
+
root: scrollElement === document.documentElement ? null : scrollElement,
|
|
108
109
|
rootMargin: '0px 0px -60% 0px',
|
|
109
110
|
threshold: 0,
|
|
110
111
|
});
|
|
@@ -113,13 +114,16 @@ const NanoInPageNav = class {
|
|
|
113
114
|
handleSlotChange = () => {
|
|
114
115
|
this.assessLinks();
|
|
115
116
|
this.createMobileMenu();
|
|
117
|
+
this.setupIntersectionObserver();
|
|
116
118
|
};
|
|
117
119
|
componentDidLoad() {
|
|
118
120
|
this.createMobileMenu();
|
|
119
121
|
}
|
|
120
122
|
connectedCallback() {
|
|
121
|
-
this.scrollElement = scroll.findScrollParent(this.host);
|
|
122
123
|
this.assessLinks();
|
|
124
|
+
{
|
|
125
|
+
this.setupIntersectionObserver();
|
|
126
|
+
}
|
|
123
127
|
}
|
|
124
128
|
disconnectedCallback() {
|
|
125
129
|
if (this.io) {
|
|
@@ -128,11 +132,11 @@ const NanoInPageNav = class {
|
|
|
128
132
|
}
|
|
129
133
|
}
|
|
130
134
|
render() {
|
|
131
|
-
return (renderer.h(index.Host, { key: '
|
|
135
|
+
return (renderer.h(index.Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
|
|
132
136
|
'nano-in-page-nav': true,
|
|
133
137
|
'external-links': this.externalLinks === true ||
|
|
134
138
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
135
|
-
} }, renderer.h("nav", { key: '
|
|
139
|
+
} }, renderer.h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, renderer.h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), renderer.h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), renderer.h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, renderer.h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), renderer.h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
136
140
|
}
|
|
137
141
|
};
|
|
138
142
|
NanoInPageNav.style = inPageNavCss;
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds/
|
|
92
|
+
"path": "/builds/sN_eAsgS/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
.desktop-nav {
|
|
61
61
|
display: block;
|
|
62
62
|
}
|
|
63
|
-
@media (width <=
|
|
63
|
+
@media (width <= 730px) {
|
|
64
64
|
.desktop-nav {
|
|
65
65
|
display: none;
|
|
66
66
|
}
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
.mobile-nav {
|
|
70
70
|
display: none;
|
|
71
71
|
}
|
|
72
|
-
@media (width <=
|
|
72
|
+
@media (width <= 730px) {
|
|
73
73
|
.mobile-nav {
|
|
74
74
|
display: block;
|
|
75
75
|
}
|
|
@@ -149,6 +149,10 @@ nav:has(.details-wrapper[open]) {
|
|
|
149
149
|
.details-wrapper .external-links {
|
|
150
150
|
--color-bg: var(--nano-color-base-0) !important;
|
|
151
151
|
}
|
|
152
|
+
.details-wrapper :host(.external-links) nav,
|
|
153
|
+
.details-wrapper .external-links nav {
|
|
154
|
+
border-block: 1px solid var(--nano-color-neutral-200);
|
|
155
|
+
}
|
|
152
156
|
.details-wrapper :host(.external-links) ul ul,
|
|
153
157
|
.details-wrapper .external-links ul ul {
|
|
154
158
|
--color-border-active: var(--nano-color-neutral-1200) !important;
|
|
@@ -19,7 +19,6 @@ import { findScrollParent } from "../../utils/scroll";
|
|
|
19
19
|
* @part root - The root element of the navigation.
|
|
20
20
|
*/
|
|
21
21
|
export class NanoInPageNav {
|
|
22
|
-
scrollElement;
|
|
23
22
|
host;
|
|
24
23
|
autoExternalLinks = false;
|
|
25
24
|
io;
|
|
@@ -57,19 +56,23 @@ export class NanoInPageNav {
|
|
|
57
56
|
return node;
|
|
58
57
|
}
|
|
59
58
|
assessLinks() {
|
|
59
|
+
if (this.externalLinks !== 'auto')
|
|
60
|
+
return;
|
|
60
61
|
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
this.autoExternalLinks = false;
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
this.autoExternalLinks = true;
|
|
68
|
-
}
|
|
62
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
63
|
+
if (anchors.length > allLinks.length / 2) {
|
|
64
|
+
this.autoExternalLinks = false;
|
|
69
65
|
}
|
|
66
|
+
else {
|
|
67
|
+
this.autoExternalLinks = true;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
setupIntersectionObserver() {
|
|
70
71
|
if (!this.autoActive)
|
|
71
72
|
return;
|
|
73
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
72
74
|
const sections = [];
|
|
75
|
+
const scrollElement = findScrollParent(this.host);
|
|
73
76
|
anchors.forEach((link) => {
|
|
74
77
|
const id = link.getAttribute('href')?.substring(1);
|
|
75
78
|
if (!id)
|
|
@@ -106,9 +109,7 @@ export class NanoInPageNav {
|
|
|
106
109
|
activeLink?.classList.add('is-active');
|
|
107
110
|
}
|
|
108
111
|
}, {
|
|
109
|
-
root:
|
|
110
|
-
? null
|
|
111
|
-
: this.scrollElement,
|
|
112
|
+
root: scrollElement === document.documentElement ? null : scrollElement,
|
|
112
113
|
rootMargin: '0px 0px -60% 0px',
|
|
113
114
|
threshold: 0,
|
|
114
115
|
});
|
|
@@ -119,15 +120,16 @@ export class NanoInPageNav {
|
|
|
119
120
|
return;
|
|
120
121
|
this.assessLinks();
|
|
121
122
|
this.createMobileMenu();
|
|
123
|
+
this.setupIntersectionObserver();
|
|
122
124
|
};
|
|
123
125
|
componentDidLoad() {
|
|
124
126
|
this.createMobileMenu();
|
|
125
127
|
}
|
|
126
128
|
connectedCallback() {
|
|
127
|
-
if (Build.isServer)
|
|
128
|
-
return;
|
|
129
|
-
this.scrollElement = findScrollParent(this.host);
|
|
130
129
|
this.assessLinks();
|
|
130
|
+
if (Build.isBrowser) {
|
|
131
|
+
this.setupIntersectionObserver();
|
|
132
|
+
}
|
|
131
133
|
}
|
|
132
134
|
disconnectedCallback() {
|
|
133
135
|
if (this.io) {
|
|
@@ -136,11 +138,11 @@ export class NanoInPageNav {
|
|
|
136
138
|
}
|
|
137
139
|
}
|
|
138
140
|
render() {
|
|
139
|
-
return (h(Host, { key: '
|
|
141
|
+
return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
|
|
140
142
|
'nano-in-page-nav': true,
|
|
141
143
|
'external-links': this.externalLinks === true ||
|
|
142
144
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
143
|
-
} }, h("nav", { key: '
|
|
145
|
+
} }, h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
144
146
|
}
|
|
145
147
|
static get is() { return "nano-in-page-nav"; }
|
|
146
148
|
static get encapsulation() { return "shadow"; }
|
|
@@ -9,7 +9,7 @@ import { f as findScrollParent } from './scroll.js';
|
|
|
9
9
|
import { d as defineCustomElement$3 } from './details.js';
|
|
10
10
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
11
11
|
|
|
12
|
-
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <=
|
|
12
|
+
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
|
|
13
13
|
|
|
14
14
|
const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav extends HTMLElement {
|
|
15
15
|
constructor() {
|
|
@@ -17,7 +17,6 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
17
17
|
this.__registerHost();
|
|
18
18
|
this.__attachShadow();
|
|
19
19
|
}
|
|
20
|
-
scrollElement;
|
|
21
20
|
get host() { return this; }
|
|
22
21
|
autoExternalLinks = false;
|
|
23
22
|
io;
|
|
@@ -55,19 +54,23 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
55
54
|
return node;
|
|
56
55
|
}
|
|
57
56
|
assessLinks() {
|
|
57
|
+
if (this.externalLinks !== 'auto')
|
|
58
|
+
return;
|
|
58
59
|
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
this.autoExternalLinks = false;
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
this.autoExternalLinks = true;
|
|
66
|
-
}
|
|
60
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
61
|
+
if (anchors.length > allLinks.length / 2) {
|
|
62
|
+
this.autoExternalLinks = false;
|
|
67
63
|
}
|
|
64
|
+
else {
|
|
65
|
+
this.autoExternalLinks = true;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
setupIntersectionObserver() {
|
|
68
69
|
if (!this.autoActive)
|
|
69
70
|
return;
|
|
71
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
70
72
|
const sections = [];
|
|
73
|
+
const scrollElement = findScrollParent(this.host);
|
|
71
74
|
anchors.forEach((link) => {
|
|
72
75
|
const id = link.getAttribute('href')?.substring(1);
|
|
73
76
|
if (!id)
|
|
@@ -104,9 +107,7 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
104
107
|
activeLink?.classList.add('is-active');
|
|
105
108
|
}
|
|
106
109
|
}, {
|
|
107
|
-
root:
|
|
108
|
-
? null
|
|
109
|
-
: this.scrollElement,
|
|
110
|
+
root: scrollElement === document.documentElement ? null : scrollElement,
|
|
110
111
|
rootMargin: '0px 0px -60% 0px',
|
|
111
112
|
threshold: 0,
|
|
112
113
|
});
|
|
@@ -117,15 +118,16 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
117
118
|
return;
|
|
118
119
|
this.assessLinks();
|
|
119
120
|
this.createMobileMenu();
|
|
121
|
+
this.setupIntersectionObserver();
|
|
120
122
|
};
|
|
121
123
|
componentDidLoad() {
|
|
122
124
|
this.createMobileMenu();
|
|
123
125
|
}
|
|
124
126
|
connectedCallback() {
|
|
125
|
-
if (Build.isServer)
|
|
126
|
-
return;
|
|
127
|
-
this.scrollElement = findScrollParent(this.host);
|
|
128
127
|
this.assessLinks();
|
|
128
|
+
if (Build.isBrowser) {
|
|
129
|
+
this.setupIntersectionObserver();
|
|
130
|
+
}
|
|
129
131
|
}
|
|
130
132
|
disconnectedCallback() {
|
|
131
133
|
if (this.io) {
|
|
@@ -134,11 +136,11 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
134
136
|
}
|
|
135
137
|
}
|
|
136
138
|
render() {
|
|
137
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
|
|
138
140
|
'nano-in-page-nav': true,
|
|
139
141
|
'external-links': this.externalLinks === true ||
|
|
140
142
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
141
|
-
} }, h("nav", { key: '
|
|
143
|
+
} }, h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
142
144
|
}
|
|
143
145
|
static get style() { return inPageNavCss; }
|
|
144
146
|
}, [257, "nano-in-page-nav", {
|
|
@@ -7,13 +7,12 @@ import { H as HasSlotController } from './slot-CFTP7C_Z.js';
|
|
|
7
7
|
import { g as getDirectChildren } from './dom-dlicJTEJ.js';
|
|
8
8
|
import { f as findScrollParent } from './scroll-1nFw8CNk.js';
|
|
9
9
|
|
|
10
|
-
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <=
|
|
10
|
+
const inPageNavCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:\"\";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}";
|
|
11
11
|
|
|
12
12
|
const NanoInPageNav = class {
|
|
13
13
|
constructor(hostRef) {
|
|
14
14
|
registerInstance(this, hostRef);
|
|
15
15
|
}
|
|
16
|
-
scrollElement;
|
|
17
16
|
get host() { return getElement(this); }
|
|
18
17
|
autoExternalLinks = false;
|
|
19
18
|
io;
|
|
@@ -51,19 +50,23 @@ const NanoInPageNav = class {
|
|
|
51
50
|
return node;
|
|
52
51
|
}
|
|
53
52
|
assessLinks() {
|
|
53
|
+
if (this.externalLinks !== 'auto')
|
|
54
|
+
return;
|
|
54
55
|
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
this.autoExternalLinks = true;
|
|
62
|
-
}
|
|
56
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
57
|
+
if (anchors.length > allLinks.length / 2) {
|
|
58
|
+
this.autoExternalLinks = false;
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
this.autoExternalLinks = true;
|
|
63
62
|
}
|
|
63
|
+
}
|
|
64
|
+
setupIntersectionObserver() {
|
|
64
65
|
if (!this.autoActive)
|
|
65
66
|
return;
|
|
67
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
66
68
|
const sections = [];
|
|
69
|
+
const scrollElement = findScrollParent(this.host);
|
|
67
70
|
anchors.forEach((link) => {
|
|
68
71
|
const id = link.getAttribute('href')?.substring(1);
|
|
69
72
|
if (!id)
|
|
@@ -100,9 +103,7 @@ const NanoInPageNav = class {
|
|
|
100
103
|
activeLink?.classList.add('is-active');
|
|
101
104
|
}
|
|
102
105
|
}, {
|
|
103
|
-
root:
|
|
104
|
-
? null
|
|
105
|
-
: this.scrollElement,
|
|
106
|
+
root: scrollElement === document.documentElement ? null : scrollElement,
|
|
106
107
|
rootMargin: '0px 0px -60% 0px',
|
|
107
108
|
threshold: 0,
|
|
108
109
|
});
|
|
@@ -111,13 +112,16 @@ const NanoInPageNav = class {
|
|
|
111
112
|
handleSlotChange = () => {
|
|
112
113
|
this.assessLinks();
|
|
113
114
|
this.createMobileMenu();
|
|
115
|
+
this.setupIntersectionObserver();
|
|
114
116
|
};
|
|
115
117
|
componentDidLoad() {
|
|
116
118
|
this.createMobileMenu();
|
|
117
119
|
}
|
|
118
120
|
connectedCallback() {
|
|
119
|
-
this.scrollElement = findScrollParent(this.host);
|
|
120
121
|
this.assessLinks();
|
|
122
|
+
{
|
|
123
|
+
this.setupIntersectionObserver();
|
|
124
|
+
}
|
|
121
125
|
}
|
|
122
126
|
disconnectedCallback() {
|
|
123
127
|
if (this.io) {
|
|
@@ -126,11 +130,11 @@ const NanoInPageNav = class {
|
|
|
126
130
|
}
|
|
127
131
|
}
|
|
128
132
|
render() {
|
|
129
|
-
return (h(Host, { key: '
|
|
133
|
+
return (h(Host, { key: 'a975c3e0b58fe39d504281784dd2f16e086eb0a1', class: {
|
|
130
134
|
'nano-in-page-nav': true,
|
|
131
135
|
'external-links': this.externalLinks === true ||
|
|
132
136
|
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
133
|
-
} }, h("nav", { key: '
|
|
137
|
+
} }, h("nav", { key: '26a999b2b5282f8e39f8e07e6e4190374e3c68c9', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '507955a2092b3c1c5bfcaefe4debb97ba8ce1063', class: "header" }, h("slot", { key: '5e3cd2413baf55b8905912316a1a17358e8597b5', name: "back" }), h("slot", { key: 'ea39a03ba015a9bd2d031e839ae379699ba96d1a', name: "accessory" }))), h("div", { key: 'e6db628b6f4d1dc036a945554cfd8c90e8308307', class: "desktop-nav" }, h("slot", { key: '1adc8091b920e22b54d8b83e0b60200f2ff1d45d', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: '61fe2ef173d090faed09515c16df421cda50c11c', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
134
138
|
}
|
|
135
139
|
};
|
|
136
140
|
NanoInPageNav.style = inPageNavCss;
|
|
@@ -592,6 +592,7 @@
|
|
|
592
592
|
}
|
|
593
593
|
nano-card:not([layout=landscape]) [slot] {
|
|
594
594
|
grid-column: 1/-1 !important;
|
|
595
|
+
inline-size: calc(100% - var(--gap)) !important;
|
|
595
596
|
}
|
|
596
597
|
nano-card[layout=landscape] [slot] {
|
|
597
598
|
grid-column: 2;
|
|
@@ -607,9 +608,11 @@
|
|
|
607
608
|
@container (width < 417px) {
|
|
608
609
|
nano-card[layout=landscape] [slot] {
|
|
609
610
|
grid-column: 1/-1 !important;
|
|
611
|
+
inline-size: calc(100% - var(--gap)) !important;
|
|
610
612
|
}
|
|
611
613
|
nano-card[layout=landscape] [slot=img] {
|
|
612
614
|
grid-column: 1/-1 !important;
|
|
615
|
+
inline-size: calc(100% - var(--gap)) !important;
|
|
613
616
|
}
|
|
614
617
|
}
|
|
615
618
|
nano-card[variant=product] [slot=title] {
|
|
@@ -1344,6 +1347,10 @@
|
|
|
1344
1347
|
.nano-in-page-nav .external-links {
|
|
1345
1348
|
--color-bg: var(--nano-color-base-0) !important;
|
|
1346
1349
|
}
|
|
1350
|
+
.nano-in-page-nav :host(.external-links) nav,
|
|
1351
|
+
.nano-in-page-nav .external-links nav {
|
|
1352
|
+
border-block: 1px solid var(--nano-color-neutral-200);
|
|
1353
|
+
}
|
|
1347
1354
|
.nano-in-page-nav :host(.external-links) ul ul,
|
|
1348
1355
|
.nano-in-page-nav .external-links ul ul {
|
|
1349
1356
|
--color-border-active: var(--nano-color-neutral-1200) !important;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import{r as a,g as e,a as
|
|
4
|
+
import{r as a,g as e,a as r}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-BaP2L8CT.js";import{H as i}from"./slot-CFTP7C_Z.js";import{g as n}from"./dom-dlicJTEJ.js";import{f as o}from"./scroll-1nFw8CNk.js";const l=class{constructor(e){a(this,e)}get host(){return e(this)}autoExternalLinks=!1;io;mobileNavWrapper;slotCtrl=new i(this,"[default]","back","accessory");autoActive=!0;externalLinks="auto";createMobileMenu(){const a=n(this.host,"ul")[0];if(!a)return;const e=a.cloneNode(!0);n(e,"li",!0).forEach((a=>{const e=n(a,"a",!0)[0],r=n(a,"ul",!0)[0];if(e&&r){const t=this.createDetails(e.textContent?.trim()||"",r);e.remove(),a.prepend(t)}})),this.mobileNavWrapper.appendChild(e)}createDetails(a,e){const r=document.createElement("nano-details");return r.setAttribute("label",a),r.classList.add("nav-details"),r.appendChild(e),r}assessLinks(){if("auto"!==this.externalLinks)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=this.host.querySelectorAll("a[href]");this.autoExternalLinks=!(a.length>e.length/2)}setupIntersectionObserver(){if(!this.autoActive)return;const a=this.host.querySelectorAll('a[href^="#"]'),e=[],r=o(this.host);a.forEach((a=>{const r=a.getAttribute("href")?.substring(1);if(!r)return;const t=document.getElementById(r);t&&e.push(t)})),this.io&&this.io.disconnect(),this.io=new IntersectionObserver((r=>{r.forEach((a=>{const e=a.target.getAttribute("id");e&&this.host.querySelector(`a[href="#${e}"]`)&&(a.isIntersecting?a.target.classList.add("in-view"):a.target.classList.remove("in-view"))}));const t=e.filter((a=>a.classList.contains("in-view")));if(t.length){t.sort(((a,e)=>e.getBoundingClientRect().top-a.getBoundingClientRect().top)),a.forEach((a=>a.classList.remove("is-active")));const e=t[0].getAttribute("id"),r=this.host.querySelector(`a[href="#${e}"]`);r?.classList.add("is-active")}}),{root:r===document.documentElement?null:r,rootMargin:"0px 0px -60% 0px",threshold:0}),e.forEach((a=>this.io.observe(a)))}handleSlotChange=()=>{this.assessLinks(),this.createMobileMenu(),this.setupIntersectionObserver()};componentDidLoad(){this.createMobileMenu()}connectedCallback(){this.assessLinks(),this.setupIntersectionObserver()}disconnectedCallback(){this.io&&(this.io.disconnect(),this.io=null)}render(){return t(r,{key:"a975c3e0b58fe39d504281784dd2f16e086eb0a1",class:{"nano-in-page-nav":!0,"external-links":!0===this.externalLinks||"auto"===this.externalLinks&&this.autoExternalLinks}},t("nav",{key:"26a999b2b5282f8e39f8e07e6e4190374e3c68c9",part:"root"},(this.slotCtrl.has("back")||this.slotCtrl.has("accessory"))&&t("div",{key:"507955a2092b3c1c5bfcaefe4debb97ba8ce1063",class:"header"},t("slot",{key:"5e3cd2413baf55b8905912316a1a17358e8597b5",name:"back"}),t("slot",{key:"ea39a03ba015a9bd2d031e839ae379699ba96d1a",name:"accessory"})),t("div",{key:"e6db628b6f4d1dc036a945554cfd8c90e8308307",class:"desktop-nav"},t("slot",{key:"1adc8091b920e22b54d8b83e0b60200f2ff1d45d",onSlotchange:()=>this.handleSlotChange})),t("nano-details",{key:"61fe2ef173d090faed09515c16df421cda50c11c",label:"Menu",class:"details-wrapper mobile-nav",ref:a=>this.mobileNavWrapper=a})))}};l.style=':host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:block}:host(.external-links){--color-bg:var(--nano-color-base-0) !important}.desktop-nav{display:block}@media (width <= 730px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 730px){.mobile-nav{display:block}}nav{background-color:var(--color-bg);padding:0}nav:has(.details-wrapper[open]){box-shadow:var(--nano-shadow-l1)}.header{padding:var(--spacing-l2) var(--spacing-l2) 0;display:flex;flex-direction:column;gap:var(--spacing-l2);font-size:var(--font-size)}.header ::slotted(a[slot=back]),.header::slotted(a[slot=back]){display:flex !important;align-items:center !important;padding:0 !important;margin:0;gap:var(--spacing-l3) !important;cursor:pointer}.header ::slotted(a[slot=back])::before,.header::slotted(a[slot=back])::before{content:"";display:inline-block;background-size:cover;inline-size:1rem;block-size:1rem;background-color:var(--color-primary);-webkit-mask-image:var(--nano-component-icon-chevron);mask-image:var(--nano-component-icon-chevron);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transform-origin:center;rotate:calc(180deg * var(--flip-icon-ltr))}.details-wrapper{--padding:0;--btn-bg-color:transparent;--btn-bg-color--hover:transparent;--btn-text-color:var(--color-text);border:none}.details-wrapper::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing);padding:var(--spacing-l2)}.details-wrapper[open]::part(header){background-color:var(--nano-color-primary-75)}.details-wrapper::part(content){padding:0}.details-wrapper::part(body){padding:0}.details-wrapper.sticky.stuck[open]::part(header){z-index:var(--nano-z-index-menubar);inset-block-start:0;position:sticky;box-shadow:var(--nano-shadow-l1);padding:var(--spacing-l2)}.details-wrapper :host(.external-links),.details-wrapper .external-links{--color-bg:var(--nano-color-base-0) !important}.details-wrapper :host(.external-links) nav,.details-wrapper .external-links nav{border-block:1px solid var(--nano-color-neutral-200)}.details-wrapper :host(.external-links) ul ul,.details-wrapper .external-links ul ul{--color-border-active:var(--nano-color-neutral-1200) !important}.details-wrapper a,.details-wrapper ul,.details-wrapper li{all:unset}.details-wrapper ul{display:flex;flex-direction:column;list-style:none}.details-wrapper ul:not(ul ul){padding:0 var(--spacing-l2) 0 var(--spacing-l2)}.details-wrapper a{cursor:pointer}.details-wrapper a:hover{text-decoration:underline}.details-wrapper a:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.details-wrapper ul>li:not(ul>li li){margin:0;padding:var(--spacing-l2) 0;display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;inline-size:100%}.details-wrapper ul>li:not(ul>li li):not(:last-of-type){border-block-end:1px solid var(--color-bottom-border)}.details-wrapper ul>li:not(ul>li li) a{color:var(--color-text)}.details-wrapper ul>li:not(ul>li li) a.is-active{border-inline-start:var(--border-active);padding-inline-start:1rem}.details-wrapper ul>li:not(ul>li li) a:hover{color:var(--color-text-hover)}.details-wrapper ul>li>ul,.details-wrapper ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--spacing-l2);gap:var(--list-gap)}.details-wrapper ul>li>ul a,.details-wrapper ul>li>.nano-details>ul a{color:var(--color-primary) !important}.details-wrapper ul>li>ul>li>.nano-details>ul,.details-wrapper ul>li>.nano-details>ul>li>.nano-details>ul{padding:var(--list-gap) 0 0 var(--nano-spacing-xl)}.details-wrapper .nano-details .nano-details:not(.nano-details .nano-details .nano-details){color:var(--color-text)}.details-wrapper .nano-details{--padding:0;--btn-bg-color:transparent;--btn-bg-color--open:var(--nano-color-primary-75);--btn-bg-color--hover:transparent;border:none;color:var(--color-primary)}.details-wrapper .nano-details .is-active::part(header){border-inline-start:var(--border-active);padding-inline-start:1rem !important;color:var(--color-primary)}.details-wrapper .nano-details[open]>[slot=icon-start]{rotate:90deg}.details-wrapper .nano-details::part(icon--start){margin-inline-end:var(--spacing-l3)}.details-wrapper .nano-details::part(header){font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);letter-spacing:var(--letter-spacing)}.details-wrapper .nano-details::part(header):hover{text-decoration:underline}.details-wrapper .nano-details:not(.nav-details){color:var(--color-primary)}';export{l as nano_in_page_nav}
|