@nanoporetech-digital/components 8.4.3 → 8.5.0
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/loader.cjs.js +1 -1
- package/dist/cjs/{local-logged-in-CLtc2TZa.js → local-logged-in-AF3ywQXV.js} +1 -1
- package/dist/cjs/{local-logged-out-Ao69_vQl.js → local-logged-out-DYEfc64n.js} +1 -1
- package/dist/cjs/nano-components.cjs.js +1 -1
- package/dist/cjs/nano-global-nav.cjs.entry.js +2 -2
- package/dist/cjs/nano-in-page-nav.cjs.entry.js +92 -13
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/global-nav/assets/local-logged-in.json +2 -2
- package/dist/collection/components/global-nav/assets/local-logged-out.json +2 -2
- package/dist/collection/components/in-page-nav/in-page-nav.css +12 -0
- package/dist/collection/components/in-page-nav/in-page-nav.js +125 -18
- package/dist/components/local-logged-in.js +1 -1
- package/dist/components/local-logged-out.js +1 -1
- package/dist/components/nano-in-page-nav.js +100 -15
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{local-logged-in-Bh5fOkeO.js → local-logged-in-B3A7tw10.js} +1 -1
- package/dist/esm/{local-logged-out-BQyUtSml.js → local-logged-out-BuucpKxf.js} +1 -1
- package/dist/esm/nano-components.js +1 -1
- package/dist/esm/nano-global-nav.entry.js +2 -2
- package/dist/esm/nano-in-page-nav.entry.js +92 -13
- package/dist/nano-assets/hash.txt +1 -1
- package/dist/nano-assets/local-logged-in.json +2 -2
- package/dist/nano-assets/local-logged-out.json +2 -2
- package/dist/nano-components/assets/local-logged-in.json +2 -2
- package/dist/nano-components/assets/local-logged-out.json +2 -2
- package/dist/nano-components/{local-logged-in-Bh5fOkeO.js → local-logged-in-B3A7tw10.js} +1 -1
- package/dist/nano-components/{local-logged-out-BQyUtSml.js → local-logged-out-BuucpKxf.js} +1 -1
- package/dist/nano-components/nano-components.css +11 -0
- package/dist/nano-components/nano-components.esm.js +1 -1
- package/dist/nano-components/nano-global-nav.entry.js +1 -1
- 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 +13 -5
- package/dist/types/components.d.ts +14 -4
- package/docs-json.json +38 -13
- package/docs-vscode.json +11 -2
- package/hydrate/index.js +94 -17
- package/hydrate/index.mjs +94 -17
- package/package.json +2 -2
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{sN_eAsgS → hHVyLZ9F}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -7,26 +7,26 @@ var index = require('./index-DGttnXif.js');
|
|
|
7
7
|
var renderer = require('./renderer-B9M1kXq8.js');
|
|
8
8
|
var slot = require('./slot-CJgcluNw.js');
|
|
9
9
|
var dom = require('./dom-Dxk5vXYq.js');
|
|
10
|
+
var scroll = require('./scroll-C6pO9RvO.js');
|
|
10
11
|
|
|
11
|
-
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}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.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 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)}";
|
|
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 <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.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) 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)}";
|
|
12
13
|
|
|
13
14
|
const NanoInPageNav = class {
|
|
14
15
|
constructor(hostRef) {
|
|
15
16
|
index.registerInstance(this, hostRef);
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
// private stuckClass: string = 'stuck';
|
|
22
|
-
// private stickyObserver!: IntersectionObserver;
|
|
18
|
+
scrollElement;
|
|
19
|
+
get host() { return index.getElement(this); }
|
|
20
|
+
autoExternalLinks = false;
|
|
21
|
+
io;
|
|
23
22
|
mobileNavWrapper;
|
|
24
|
-
slotCtrl = new slot.HasSlotController(this, '[default]', '
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
slotCtrl = new slot.HasSlotController(this, '[default]', 'back', 'accessory');
|
|
24
|
+
/** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
|
|
25
|
+
autoActive = true;
|
|
26
|
+
/** Menus that contain links to external pages should have different styling from in-page anchors */
|
|
27
|
+
externalLinks = 'auto';
|
|
28
28
|
createMobileMenu() {
|
|
29
|
-
const ul = dom.getDirectChildren(this.
|
|
29
|
+
const ul = dom.getDirectChildren(this.host, 'ul')[0];
|
|
30
30
|
if (!ul)
|
|
31
31
|
return;
|
|
32
32
|
const cloned = ul.cloneNode(true);
|
|
@@ -52,8 +52,87 @@ const NanoInPageNav = class {
|
|
|
52
52
|
node.appendChild(submenu);
|
|
53
53
|
return node;
|
|
54
54
|
}
|
|
55
|
+
assessLinks() {
|
|
56
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
57
|
+
if (this.externalLinks === 'auto') {
|
|
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;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
if (!this.autoActive)
|
|
67
|
+
return;
|
|
68
|
+
const sections = [];
|
|
69
|
+
anchors.forEach((link) => {
|
|
70
|
+
const id = link.getAttribute('href')?.substring(1);
|
|
71
|
+
if (!id)
|
|
72
|
+
return;
|
|
73
|
+
const section = document.getElementById(id);
|
|
74
|
+
if (section)
|
|
75
|
+
sections.push(section);
|
|
76
|
+
});
|
|
77
|
+
if (this.io)
|
|
78
|
+
this.io.disconnect();
|
|
79
|
+
this.io = new IntersectionObserver((entries) => {
|
|
80
|
+
entries.forEach((entry) => {
|
|
81
|
+
const id = entry.target.getAttribute('id');
|
|
82
|
+
if (!id)
|
|
83
|
+
return;
|
|
84
|
+
const link = this.host.querySelector(`a[href="#${id}"]`);
|
|
85
|
+
if (!link)
|
|
86
|
+
return;
|
|
87
|
+
if (entry.isIntersecting) {
|
|
88
|
+
entry.target.classList.add('in-view');
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
entry.target.classList.remove('in-view');
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
// pick the section nearest to the top
|
|
95
|
+
const visible = sections.filter((s) => s.classList.contains('in-view'));
|
|
96
|
+
if (visible.length) {
|
|
97
|
+
// sort by boundingClientRect.top
|
|
98
|
+
visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
|
|
99
|
+
anchors.forEach((l) => l.classList.remove('is-active'));
|
|
100
|
+
const topId = visible[0].getAttribute('id');
|
|
101
|
+
const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
|
|
102
|
+
activeLink?.classList.add('is-active');
|
|
103
|
+
}
|
|
104
|
+
}, {
|
|
105
|
+
root: this.scrollElement === document.documentElement
|
|
106
|
+
? null
|
|
107
|
+
: this.scrollElement,
|
|
108
|
+
rootMargin: '0px 0px -60% 0px',
|
|
109
|
+
threshold: 0,
|
|
110
|
+
});
|
|
111
|
+
sections.forEach((section) => this.io.observe(section));
|
|
112
|
+
}
|
|
113
|
+
handleSlotChange = () => {
|
|
114
|
+
this.assessLinks();
|
|
115
|
+
this.createMobileMenu();
|
|
116
|
+
};
|
|
117
|
+
componentDidLoad() {
|
|
118
|
+
this.createMobileMenu();
|
|
119
|
+
}
|
|
120
|
+
connectedCallback() {
|
|
121
|
+
this.scrollElement = scroll.findScrollParent(this.host);
|
|
122
|
+
this.assessLinks();
|
|
123
|
+
}
|
|
124
|
+
disconnectedCallback() {
|
|
125
|
+
if (this.io) {
|
|
126
|
+
this.io.disconnect();
|
|
127
|
+
this.io = null;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
55
130
|
render() {
|
|
56
|
-
return (renderer.h(index.Host, { key: '
|
|
131
|
+
return (renderer.h(index.Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
|
|
132
|
+
'nano-in-page-nav': true,
|
|
133
|
+
'external-links': this.externalLinks === true ||
|
|
134
|
+
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
135
|
+
} }, renderer.h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (renderer.h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, renderer.h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), renderer.h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), renderer.h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, renderer.h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), renderer.h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
57
136
|
}
|
|
58
137
|
};
|
|
59
138
|
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/hHVyLZ9F/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
},
|
|
97
97
|
"search": {
|
|
98
98
|
"app_id": "N8NZI5A47F",
|
|
99
|
-
"api_key": "
|
|
99
|
+
"api_key": "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
|
|
100
100
|
"indeces": [
|
|
101
101
|
{
|
|
102
102
|
"index": "ont_prod_en_v3",
|
|
@@ -199,4 +199,4 @@
|
|
|
199
199
|
}
|
|
200
200
|
]
|
|
201
201
|
}
|
|
202
|
-
}
|
|
202
|
+
}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
},
|
|
93
93
|
"search": {
|
|
94
94
|
"app_id": "N8NZI5A47F",
|
|
95
|
-
"api_key": "
|
|
95
|
+
"api_key": "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
|
|
96
96
|
"indeces": [
|
|
97
97
|
{
|
|
98
98
|
"index": "ont_prod_en_v3",
|
|
@@ -195,4 +195,4 @@
|
|
|
195
195
|
}
|
|
196
196
|
]
|
|
197
197
|
}
|
|
198
|
-
}
|
|
198
|
+
}
|
|
@@ -53,6 +53,10 @@
|
|
|
53
53
|
display: block;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
:host(.external-links) {
|
|
57
|
+
--color-bg: var(--nano-color-base-0) !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
56
60
|
.desktop-nav {
|
|
57
61
|
display: block;
|
|
58
62
|
}
|
|
@@ -141,6 +145,14 @@ nav:has(.details-wrapper[open]) {
|
|
|
141
145
|
box-shadow: var(--nano-shadow-l1);
|
|
142
146
|
padding: var(--spacing-l2);
|
|
143
147
|
}
|
|
148
|
+
.details-wrapper :host(.external-links),
|
|
149
|
+
.details-wrapper .external-links {
|
|
150
|
+
--color-bg: var(--nano-color-base-0) !important;
|
|
151
|
+
}
|
|
152
|
+
.details-wrapper :host(.external-links) ul ul,
|
|
153
|
+
.details-wrapper .external-links ul ul {
|
|
154
|
+
--color-border-active: var(--nano-color-neutral-1200) !important;
|
|
155
|
+
}
|
|
144
156
|
.details-wrapper a,
|
|
145
157
|
.details-wrapper ul,
|
|
146
158
|
.details-wrapper li {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { Host, } from "@stencil/core";
|
|
4
|
+
import { Host, Build, } from "@stencil/core";
|
|
5
5
|
import { h } from "../../utils/renderer";
|
|
6
6
|
import { HasSlotController } from "../../utils/slot";
|
|
7
7
|
import { getDirectChildren } from "../../utils/dom";
|
|
8
|
+
import { findScrollParent } from "../../utils/scroll";
|
|
8
9
|
/**
|
|
9
10
|
* In-page navigation allows users to quickly find different sections on a page.
|
|
10
11
|
*
|
|
@@ -12,26 +13,24 @@ import { getDirectChildren } from "../../utils/dom";
|
|
|
12
13
|
* @version 8.0.0
|
|
13
14
|
*
|
|
14
15
|
* @slot default - The default slot.
|
|
15
|
-
* @slot mobile - An escape hatch to add a custom mobile nav to override the provided one.
|
|
16
16
|
* @slot back - For a link to navigate back to the previous section.
|
|
17
17
|
* @slot accessory - To add nav accessories, such as a text input.
|
|
18
18
|
*
|
|
19
19
|
* @part root - The root element of the navigation.
|
|
20
20
|
*/
|
|
21
21
|
export class NanoInPageNav {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
// private stuckClass: string = 'stuck';
|
|
27
|
-
// private stickyObserver!: IntersectionObserver;
|
|
22
|
+
scrollElement;
|
|
23
|
+
host;
|
|
24
|
+
autoExternalLinks = false;
|
|
25
|
+
io;
|
|
28
26
|
mobileNavWrapper;
|
|
29
|
-
slotCtrl = new HasSlotController(this, '[default]', '
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
slotCtrl = new HasSlotController(this, '[default]', 'back', 'accessory');
|
|
28
|
+
/** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
|
|
29
|
+
autoActive = true;
|
|
30
|
+
/** Menus that contain links to external pages should have different styling from in-page anchors */
|
|
31
|
+
externalLinks = 'auto';
|
|
33
32
|
createMobileMenu() {
|
|
34
|
-
const ul = getDirectChildren(this.
|
|
33
|
+
const ul = getDirectChildren(this.host, 'ul')[0];
|
|
35
34
|
if (!ul)
|
|
36
35
|
return;
|
|
37
36
|
const cloned = ul.cloneNode(true);
|
|
@@ -57,8 +56,91 @@ export class NanoInPageNav {
|
|
|
57
56
|
node.appendChild(submenu);
|
|
58
57
|
return node;
|
|
59
58
|
}
|
|
59
|
+
assessLinks() {
|
|
60
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
61
|
+
if (this.externalLinks === 'auto') {
|
|
62
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
63
|
+
if (anchors.length > allLinks.length / 2) {
|
|
64
|
+
this.autoExternalLinks = false;
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
this.autoExternalLinks = true;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
if (!this.autoActive)
|
|
71
|
+
return;
|
|
72
|
+
const sections = [];
|
|
73
|
+
anchors.forEach((link) => {
|
|
74
|
+
const id = link.getAttribute('href')?.substring(1);
|
|
75
|
+
if (!id)
|
|
76
|
+
return;
|
|
77
|
+
const section = document.getElementById(id);
|
|
78
|
+
if (section)
|
|
79
|
+
sections.push(section);
|
|
80
|
+
});
|
|
81
|
+
if (this.io)
|
|
82
|
+
this.io.disconnect();
|
|
83
|
+
this.io = new IntersectionObserver((entries) => {
|
|
84
|
+
entries.forEach((entry) => {
|
|
85
|
+
const id = entry.target.getAttribute('id');
|
|
86
|
+
if (!id)
|
|
87
|
+
return;
|
|
88
|
+
const link = this.host.querySelector(`a[href="#${id}"]`);
|
|
89
|
+
if (!link)
|
|
90
|
+
return;
|
|
91
|
+
if (entry.isIntersecting) {
|
|
92
|
+
entry.target.classList.add('in-view');
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
entry.target.classList.remove('in-view');
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
// pick the section nearest to the top
|
|
99
|
+
const visible = sections.filter((s) => s.classList.contains('in-view'));
|
|
100
|
+
if (visible.length) {
|
|
101
|
+
// sort by boundingClientRect.top
|
|
102
|
+
visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
|
|
103
|
+
anchors.forEach((l) => l.classList.remove('is-active'));
|
|
104
|
+
const topId = visible[0].getAttribute('id');
|
|
105
|
+
const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
|
|
106
|
+
activeLink?.classList.add('is-active');
|
|
107
|
+
}
|
|
108
|
+
}, {
|
|
109
|
+
root: this.scrollElement === document.documentElement
|
|
110
|
+
? null
|
|
111
|
+
: this.scrollElement,
|
|
112
|
+
rootMargin: '0px 0px -60% 0px',
|
|
113
|
+
threshold: 0,
|
|
114
|
+
});
|
|
115
|
+
sections.forEach((section) => this.io.observe(section));
|
|
116
|
+
}
|
|
117
|
+
handleSlotChange = () => {
|
|
118
|
+
if (Build.isServer)
|
|
119
|
+
return;
|
|
120
|
+
this.assessLinks();
|
|
121
|
+
this.createMobileMenu();
|
|
122
|
+
};
|
|
123
|
+
componentDidLoad() {
|
|
124
|
+
this.createMobileMenu();
|
|
125
|
+
}
|
|
126
|
+
connectedCallback() {
|
|
127
|
+
if (Build.isServer)
|
|
128
|
+
return;
|
|
129
|
+
this.scrollElement = findScrollParent(this.host);
|
|
130
|
+
this.assessLinks();
|
|
131
|
+
}
|
|
132
|
+
disconnectedCallback() {
|
|
133
|
+
if (this.io) {
|
|
134
|
+
this.io.disconnect();
|
|
135
|
+
this.io = null;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
60
138
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
139
|
+
return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
|
|
140
|
+
'nano-in-page-nav': true,
|
|
141
|
+
'external-links': this.externalLinks === true ||
|
|
142
|
+
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
143
|
+
} }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
62
144
|
}
|
|
63
145
|
static get is() { return "nano-in-page-nav"; }
|
|
64
146
|
static get encapsulation() { return "shadow"; }
|
|
@@ -74,9 +156,9 @@ export class NanoInPageNav {
|
|
|
74
156
|
}
|
|
75
157
|
static get properties() {
|
|
76
158
|
return {
|
|
77
|
-
"
|
|
159
|
+
"autoActive": {
|
|
78
160
|
"type": "boolean",
|
|
79
|
-
"attribute": "
|
|
161
|
+
"attribute": "auto-active",
|
|
80
162
|
"mutable": false,
|
|
81
163
|
"complexType": {
|
|
82
164
|
"original": "boolean",
|
|
@@ -87,14 +169,39 @@ export class NanoInPageNav {
|
|
|
87
169
|
"optional": true,
|
|
88
170
|
"docs": {
|
|
89
171
|
"tags": [],
|
|
90
|
-
"text": "Whether the
|
|
172
|
+
"text": "Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true"
|
|
91
173
|
},
|
|
92
174
|
"getter": false,
|
|
93
175
|
"setter": false,
|
|
94
176
|
"reflect": false,
|
|
95
177
|
"defaultValue": "true"
|
|
178
|
+
},
|
|
179
|
+
"externalLinks": {
|
|
180
|
+
"type": "any",
|
|
181
|
+
"attribute": "external-links",
|
|
182
|
+
"mutable": false,
|
|
183
|
+
"complexType": {
|
|
184
|
+
"original": "true | false | 'auto'",
|
|
185
|
+
"resolved": "\"auto\" | boolean",
|
|
186
|
+
"references": {}
|
|
187
|
+
},
|
|
188
|
+
"required": false,
|
|
189
|
+
"optional": true,
|
|
190
|
+
"docs": {
|
|
191
|
+
"tags": [],
|
|
192
|
+
"text": "Menus that contain links to external pages should have different styling from in-page anchors"
|
|
193
|
+
},
|
|
194
|
+
"getter": false,
|
|
195
|
+
"setter": false,
|
|
196
|
+
"reflect": false,
|
|
197
|
+
"defaultValue": "'auto'"
|
|
96
198
|
}
|
|
97
199
|
};
|
|
98
200
|
}
|
|
99
|
-
static get
|
|
201
|
+
static get states() {
|
|
202
|
+
return {
|
|
203
|
+
"autoExternalLinks": {}
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
static get elementRef() { return "host"; }
|
|
100
207
|
}
|
|
@@ -98,7 +98,7 @@ const urls = {
|
|
|
98
98
|
};
|
|
99
99
|
const search = {
|
|
100
100
|
app_id: "N8NZI5A47F",
|
|
101
|
-
api_key: "
|
|
101
|
+
api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
|
|
102
102
|
indeces: [
|
|
103
103
|
{
|
|
104
104
|
index: "ont_prod_en_v3",
|
|
@@ -94,7 +94,7 @@ const urls = {
|
|
|
94
94
|
};
|
|
95
95
|
const search = {
|
|
96
96
|
app_id: "N8NZI5A47F",
|
|
97
|
-
api_key: "
|
|
97
|
+
api_key: "MDRhNGI1ZjFkMDU3MjAyNTQ2ZDA4MmQ2ZTBjODBhM2ViODZjMWNhYTFjZmI5YjM3ODljYWUyNTY0MDAyZGJmOWZpbHRlcnM9JTI4JTI3cmVnaW9uJTI3JTNBJTI3dXMlMjcrT1IrJTI3cmVnaW9uJTI3JTNBJTI3YW55JTI3JTI5K0FORCslMjhOT1QrJTI3dHlwZSUyNyUzQSUyN3doaXRlX3BhcGVyJTI3JTI5K0FORCslMjhOT1QrJTI3b3JpZ2luJTI3JTNBJTI3Y29tbXVuaXR5JTI3JTI5JnZhbGlkVW50aWw9MjA3MTkwOTQ0MA==",
|
|
98
98
|
indeces: [
|
|
99
99
|
{
|
|
100
100
|
index: "ont_prod_en_v3",
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Custom elements for Nanopore-Digital Web applications
|
|
3
3
|
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
|
|
4
|
+
import { proxyCustomElement, HTMLElement, Build, Host } from '@stencil/core/internal/client';
|
|
5
5
|
import { h } from './renderer.js';
|
|
6
6
|
import { H as HasSlotController } from './slot.js';
|
|
7
7
|
import { g as getDirectChildren } from './dom.js';
|
|
8
|
+
import { f as findScrollParent } from './scroll.js';
|
|
8
9
|
import { d as defineCustomElement$3 } from './details.js';
|
|
9
10
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
10
11
|
|
|
11
|
-
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}.desktop-nav{display:block}@media (width <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.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 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)}";
|
|
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 <= 767px){.desktop-nav{display:none}}.mobile-nav{display:none}@media (width <= 767px){.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) 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)}";
|
|
12
13
|
|
|
13
14
|
const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav extends HTMLElement {
|
|
14
15
|
constructor() {
|
|
@@ -16,19 +17,18 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
16
17
|
this.__registerHost();
|
|
17
18
|
this.__attachShadow();
|
|
18
19
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
// private stuckClass: string = 'stuck';
|
|
24
|
-
// private stickyObserver!: IntersectionObserver;
|
|
20
|
+
scrollElement;
|
|
21
|
+
get host() { return this; }
|
|
22
|
+
autoExternalLinks = false;
|
|
23
|
+
io;
|
|
25
24
|
mobileNavWrapper;
|
|
26
|
-
slotCtrl = new HasSlotController(this, '[default]', '
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
slotCtrl = new HasSlotController(this, '[default]', 'back', 'accessory');
|
|
26
|
+
/** Whether the active link should be automatically set based on when a corresponding #id is in view. Defaults to true */
|
|
27
|
+
autoActive = true;
|
|
28
|
+
/** Menus that contain links to external pages should have different styling from in-page anchors */
|
|
29
|
+
externalLinks = 'auto';
|
|
30
30
|
createMobileMenu() {
|
|
31
|
-
const ul = getDirectChildren(this.
|
|
31
|
+
const ul = getDirectChildren(this.host, 'ul')[0];
|
|
32
32
|
if (!ul)
|
|
33
33
|
return;
|
|
34
34
|
const cloned = ul.cloneNode(true);
|
|
@@ -54,12 +54,97 @@ const NanoInPageNav$1 = /*@__PURE__*/ proxyCustomElement(class NanoInPageNav ext
|
|
|
54
54
|
node.appendChild(submenu);
|
|
55
55
|
return node;
|
|
56
56
|
}
|
|
57
|
+
assessLinks() {
|
|
58
|
+
const anchors = this.host.querySelectorAll('a[href^="#"]');
|
|
59
|
+
if (this.externalLinks === 'auto') {
|
|
60
|
+
const allLinks = this.host.querySelectorAll('a[href]');
|
|
61
|
+
if (anchors.length > allLinks.length / 2) {
|
|
62
|
+
this.autoExternalLinks = false;
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
this.autoExternalLinks = true;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
if (!this.autoActive)
|
|
69
|
+
return;
|
|
70
|
+
const sections = [];
|
|
71
|
+
anchors.forEach((link) => {
|
|
72
|
+
const id = link.getAttribute('href')?.substring(1);
|
|
73
|
+
if (!id)
|
|
74
|
+
return;
|
|
75
|
+
const section = document.getElementById(id);
|
|
76
|
+
if (section)
|
|
77
|
+
sections.push(section);
|
|
78
|
+
});
|
|
79
|
+
if (this.io)
|
|
80
|
+
this.io.disconnect();
|
|
81
|
+
this.io = new IntersectionObserver((entries) => {
|
|
82
|
+
entries.forEach((entry) => {
|
|
83
|
+
const id = entry.target.getAttribute('id');
|
|
84
|
+
if (!id)
|
|
85
|
+
return;
|
|
86
|
+
const link = this.host.querySelector(`a[href="#${id}"]`);
|
|
87
|
+
if (!link)
|
|
88
|
+
return;
|
|
89
|
+
if (entry.isIntersecting) {
|
|
90
|
+
entry.target.classList.add('in-view');
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
entry.target.classList.remove('in-view');
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
// pick the section nearest to the top
|
|
97
|
+
const visible = sections.filter((s) => s.classList.contains('in-view'));
|
|
98
|
+
if (visible.length) {
|
|
99
|
+
// sort by boundingClientRect.top
|
|
100
|
+
visible.sort((a, b) => b.getBoundingClientRect().top - a.getBoundingClientRect().top);
|
|
101
|
+
anchors.forEach((l) => l.classList.remove('is-active'));
|
|
102
|
+
const topId = visible[0].getAttribute('id');
|
|
103
|
+
const activeLink = this.host.querySelector(`a[href="#${topId}"]`);
|
|
104
|
+
activeLink?.classList.add('is-active');
|
|
105
|
+
}
|
|
106
|
+
}, {
|
|
107
|
+
root: this.scrollElement === document.documentElement
|
|
108
|
+
? null
|
|
109
|
+
: this.scrollElement,
|
|
110
|
+
rootMargin: '0px 0px -60% 0px',
|
|
111
|
+
threshold: 0,
|
|
112
|
+
});
|
|
113
|
+
sections.forEach((section) => this.io.observe(section));
|
|
114
|
+
}
|
|
115
|
+
handleSlotChange = () => {
|
|
116
|
+
if (Build.isServer)
|
|
117
|
+
return;
|
|
118
|
+
this.assessLinks();
|
|
119
|
+
this.createMobileMenu();
|
|
120
|
+
};
|
|
121
|
+
componentDidLoad() {
|
|
122
|
+
this.createMobileMenu();
|
|
123
|
+
}
|
|
124
|
+
connectedCallback() {
|
|
125
|
+
if (Build.isServer)
|
|
126
|
+
return;
|
|
127
|
+
this.scrollElement = findScrollParent(this.host);
|
|
128
|
+
this.assessLinks();
|
|
129
|
+
}
|
|
130
|
+
disconnectedCallback() {
|
|
131
|
+
if (this.io) {
|
|
132
|
+
this.io.disconnect();
|
|
133
|
+
this.io = null;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
57
136
|
render() {
|
|
58
|
-
return (h(Host, { key: '
|
|
137
|
+
return (h(Host, { key: 'ea33348437e8e117df2e7ffff285ca60d8caf98b', class: {
|
|
138
|
+
'nano-in-page-nav': true,
|
|
139
|
+
'external-links': this.externalLinks === true ||
|
|
140
|
+
(this.externalLinks === 'auto' && this.autoExternalLinks),
|
|
141
|
+
} }, h("nav", { key: '4d4647bafee9aff8902dd988eb941bb89e02b0ed', part: "root" }, (this.slotCtrl.has('back') || this.slotCtrl.has('accessory')) && (h("div", { key: '26c306537b6188b822b714c0df1d49b8ba060cf3', class: "header" }, h("slot", { key: 'f9319b724393e10d0cd789ddf58a0e006f829afd', name: "back" }), h("slot", { key: '2c6bf0022d52af8710d6086beb558b9069557eb2', name: "accessory" }))), h("div", { key: '6c82ddaf8d25319ed7a0a46637047e4e750c5834', class: "desktop-nav" }, h("slot", { key: '4f01aa6544750860aae61cdb9309c62b37f45ef6', onSlotchange: () => this.handleSlotChange })), h("nano-details", { key: 'ff9b16866753cb24279c5bfc83ca637803333101', label: "Menu", class: "details-wrapper mobile-nav", ref: (el) => (this.mobileNavWrapper = el) }))));
|
|
59
142
|
}
|
|
60
143
|
static get style() { return inPageNavCss; }
|
|
61
144
|
}, [257, "nano-in-page-nav", {
|
|
62
|
-
"
|
|
145
|
+
"autoActive": [4, "auto-active"],
|
|
146
|
+
"externalLinks": [8, "external-links"],
|
|
147
|
+
"autoExternalLinks": [32]
|
|
63
148
|
}]);
|
|
64
149
|
function defineCustomElement$1() {
|
|
65
150
|
if (typeof customElements === "undefined") {
|