@nanoporetech-digital/components 8.5.5 → 8.5.7
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/cjs/nano-tab.cjs.entry.js +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/collection/components/in-page-nav/in-page-nav.css +13 -12
- package/dist/collection/components/in-page-nav/in-page-nav.js +19 -17
- package/dist/collection/components/tabs/tab.css +1 -1
- package/dist/components/nano-in-page-nav.js +20 -18
- package/dist/components/nano-tab.js +1 -1
- package/dist/esm/nano-in-page-nav.entry.js +20 -16
- package/dist/esm/nano-tab.entry.js +1 -1
- package/dist/nano-components/nano-components.css +7 -21
- package/dist/nano-components/nano-in-page-nav.entry.js +1 -1
- package/dist/nano-components/nano-tab.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 +18 -17
- package/hydrate/index.mjs +18 -17
- package/package.json +2 -2
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/index.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/output-vue.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/plugin.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/types.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/plugins/stencil/vue-output/utils.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{sHPJkByK → uSGJX_GU}/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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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;display:block}.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;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-DGttnXif.js');
|
|
7
7
|
var renderer = require('./renderer-B9M1kXq8.js');
|
|
8
8
|
|
|
9
|
-
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-
|
|
9
|
+
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
|
|
10
10
|
|
|
11
11
|
let id = 0;
|
|
12
12
|
const NanoTab = class {
|
|
@@ -89,7 +89,7 @@ export class NanoBreadcrumb {
|
|
|
89
89
|
"references": {
|
|
90
90
|
"Breadcrumb": {
|
|
91
91
|
"location": "local",
|
|
92
|
-
"path": "/builds/
|
|
92
|
+
"path": "/builds/uSGJX_GU/0/Digital/nano-components/packages/components/src/components/breadcrumb/breadcrumb.tsx",
|
|
93
93
|
"id": "src/components/breadcrumb/breadcrumb.tsx::Breadcrumb"
|
|
94
94
|
}
|
|
95
95
|
}
|
|
@@ -56,11 +56,17 @@
|
|
|
56
56
|
:host(.external-links) {
|
|
57
57
|
--color-bg: var(--nano-color-base-0) !important;
|
|
58
58
|
}
|
|
59
|
+
:host(.external-links) .nano-details {
|
|
60
|
+
--border-active: 3px solid var(--nano-color-neutral-1200) !important;
|
|
61
|
+
}
|
|
62
|
+
:host(.external-links) nav {
|
|
63
|
+
border-block: 1px solid var(--nano-color-neutral-200);
|
|
64
|
+
}
|
|
59
65
|
|
|
60
66
|
.desktop-nav {
|
|
61
67
|
display: block;
|
|
62
68
|
}
|
|
63
|
-
@media (width <=
|
|
69
|
+
@media (width <= 730px) {
|
|
64
70
|
.desktop-nav {
|
|
65
71
|
display: none;
|
|
66
72
|
}
|
|
@@ -69,7 +75,7 @@
|
|
|
69
75
|
.mobile-nav {
|
|
70
76
|
display: none;
|
|
71
77
|
}
|
|
72
|
-
@media (width <=
|
|
78
|
+
@media (width <= 730px) {
|
|
73
79
|
.mobile-nav {
|
|
74
80
|
display: block;
|
|
75
81
|
}
|
|
@@ -79,8 +85,10 @@ nav {
|
|
|
79
85
|
background-color: var(--color-bg);
|
|
80
86
|
padding: 0;
|
|
81
87
|
}
|
|
82
|
-
|
|
83
|
-
|
|
88
|
+
@media (width <= 730px) {
|
|
89
|
+
nav:has(.details-wrapper[open]) {
|
|
90
|
+
box-shadow: var(--nano-shadow-l1);
|
|
91
|
+
}
|
|
84
92
|
}
|
|
85
93
|
|
|
86
94
|
.header {
|
|
@@ -145,14 +153,6 @@ nav:has(.details-wrapper[open]) {
|
|
|
145
153
|
box-shadow: var(--nano-shadow-l1);
|
|
146
154
|
padding: var(--spacing-l2);
|
|
147
155
|
}
|
|
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
|
-
}
|
|
156
156
|
.details-wrapper a,
|
|
157
157
|
.details-wrapper ul,
|
|
158
158
|
.details-wrapper li {
|
|
@@ -194,6 +194,7 @@ nav:has(.details-wrapper[open]) {
|
|
|
194
194
|
.details-wrapper ul > li:not(ul > li li) a.is-active {
|
|
195
195
|
border-inline-start: var(--border-active);
|
|
196
196
|
padding-inline-start: 1rem;
|
|
197
|
+
display: block;
|
|
197
198
|
}
|
|
198
199
|
.details-wrapper ul > li:not(ul > li li) a:hover {
|
|
199
200
|
color: var(--color-text-hover);
|
|
@@ -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"; }
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
--border-hover-color: var(--nano-color-primary-700);
|
|
51
51
|
--border-active-color: var(--nano-color-primary-1000);
|
|
52
52
|
--text-hover-color: var(--nano-color-primary-1000);
|
|
53
|
-
--text-active-color: var(--nano-color-primary-
|
|
53
|
+
--text-active-color: var(--nano-color-primary-1100);
|
|
54
54
|
--padding: var(--nano-spacing-md);
|
|
55
55
|
font-size: var(--nano-font-size-sm);
|
|
56
56
|
line-height: var(--nano-line-height-normal);
|
|
@@ -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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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;display:block}.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,7 +7,7 @@ import { d as defineCustomElement$4 } from './icon.js';
|
|
|
7
7
|
import { d as defineCustomElement$3 } from './icon-button.js';
|
|
8
8
|
import { d as defineCustomElement$2 } from './tooltip.js';
|
|
9
9
|
|
|
10
|
-
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-
|
|
10
|
+
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
|
|
11
11
|
|
|
12
12
|
let id = 0;
|
|
13
13
|
const NanoTab$1 = /*@__PURE__*/ proxyCustomElement(class NanoTab extends HTMLElement {
|
|
@@ -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}:host(.external-links) .nano-details{--border-active:3px solid var(--nano-color-neutral-1200) !important}:host(.external-links) nav{border-block:1px solid var(--nano-color-neutral-200)}.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}@media (width <= 730px){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;display:block}.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;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-BM3Om9WE.js';
|
|
5
5
|
import { h } from './renderer-BaP2L8CT.js';
|
|
6
6
|
|
|
7
|
-
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-
|
|
7
|
+
const tabCss = ":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{--border:2px solid var(--nano-color-neutral-300);--border-hover-color:var(--nano-color-primary-700);--border-active-color:var(--nano-color-primary-1000);--text-hover-color:var(--nano-color-primary-1000);--text-active-color:var(--nano-color-primary-1100);--padding:var(--nano-spacing-md);font-size:var(--nano-font-size-sm);line-height:var(--nano-line-height-normal);letter-spacing:var(--nano-letter-spacing-loose);display:inline-block;cursor:pointer;color:var(--nano-color-neutral-1400);border:var(--border);border-inline-end-width:0;border-inline-start-width:0;border-block-start-width:0;border-block-end:var(--border)}:host(:not([disabled]):hover){border-color:var(--border-hover-color);color:var(--text-hover-color)}:host(:not([disabled]):active),:host([active]){border-color:var(--border-active-color);color:var(--text-active-color)}:host(.nano-sortable__dragged){background:var(--nano-color-base-0);opacity:0.9 !important;box-shadow:var(--nano-shadow-l0) !important}.tab{padding:var(--padding);display:flex;white-space:nowrap;align-items:center;position:relative;gap:var(--nano-spacing-sm);justify-content:center}.tab.tab--disabled{opacity:0.5;cursor:not-allowed}.tab.tab--closable{padding-inline-end:calc(var(--padding) - var(--nano-spacing-sm))}.tab ::slotted(*),.tab::slotted(*){display:flex;align-items:center}.tab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;z-index:1}.tab:not(.tab--disabled):has(.tab__label:focus-visible){outline:var(--nano-focus-ring);outline-offset:-3px}.tab__label{display:flex;flex-direction:column;gap:var(--nano-spacing-sm);align-items:center}.tab__label:focus{outline:none}.tab__close-button{color:var(--nano-color-primary-1200);--hover-color:var(--nano-color-primary-700)}";
|
|
8
8
|
|
|
9
9
|
let id = 0;
|
|
10
10
|
const NanoTab = class {
|