@nextrap/nte-nav 1.1.12 → 1.1.14
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/CHANGELOG.md +8 -0
- package/index.js +91 -110
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 1.1.14 (2025-08-28)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 1.1.13 (2025-08-28)
|
|
6
|
+
|
|
7
|
+
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
|
8
|
+
|
|
1
9
|
## 1.1.12 (2025-08-28)
|
|
2
10
|
|
|
3
11
|
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
package/index.js
CHANGED
|
@@ -1,37 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
var O = (r, e, t) => e in r ? P(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
|
|
3
|
-
var o = (r, e, t) => O(r, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
-
import { ka_dom_ready as $ } from "@kasimirjs/core";
|
|
5
|
-
import { isBiggerThanBreakpoint as g, Debouncer as L, waitForDomContentLoaded as m, SlotTool as x } from "@nextrap/nt-framework";
|
|
1
|
+
import { waitForDomContentLoaded as p, isBiggerThanBreakpoint as g, Debouncer as _, SlotTool as y } from "@nextrap/nt-framework";
|
|
6
2
|
import "@nextrap/nte-offcanvas";
|
|
7
|
-
import { unsafeCSS as
|
|
8
|
-
import { property as
|
|
9
|
-
import { createRef as
|
|
3
|
+
import { unsafeCSS as v, LitElement as f, html as c } from "lit";
|
|
4
|
+
import { property as d, state as S, customElement as b } from "lit/decorators.js";
|
|
5
|
+
import { createRef as m, ref as w } from "lit/directives/ref.js";
|
|
10
6
|
import "@nextrap/nte-burger";
|
|
11
|
-
const
|
|
12
|
-
var
|
|
13
|
-
for (var
|
|
14
|
-
(
|
|
15
|
-
return
|
|
16
|
-
}
|
|
17
|
-
let
|
|
7
|
+
const T = ":host{--container-width: var(--nt-container-width);--text-color: var(--nt-text);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary);--transition: .2s ease-in-out;--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text);--justify-content: center;--sidemenu-bg: var(--nt-primary-subtle);--justify-sidebar-burger: flex-end;--height: auto;--default-alpha: .7;height:var(--height);display:block}nav{height:100%}#main{height:100%}#burger-wrapper{padding:15px}#text{padding-right:10px}#burger-default{cursor:pointer}#burger-default slot::slotted(span){color:rgb(from var(--text-color) r g b/var(--default-alpha));transition:color var(--transition)}#burger-default nte-burger{--color: rgb(from var(--text-color) r g b / var(--default-alpha))}#burger-default:hover slot::slotted(span){color:rgb(from var(--text-color) r g b/1)}#burger-default:hover nte-burger{--color: rgb(from var(--text-color) r g b / 1)}";
|
|
8
|
+
var k = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (t, r, s, a) => {
|
|
9
|
+
for (var e = a > 1 ? void 0 : a ? O(r, s) : r, i = t.length - 1, o; i >= 0; i--)
|
|
10
|
+
(o = t[i]) && (e = (a ? o(r, s, e) : o(e)) || e);
|
|
11
|
+
return a && e && k(r, s, e), e;
|
|
12
|
+
};
|
|
13
|
+
let n = class extends f {
|
|
18
14
|
constructor() {
|
|
19
|
-
super();
|
|
20
|
-
o(this, "mode", "slave");
|
|
21
|
-
o(this, "breakpoint", "99999px");
|
|
22
|
-
o(this, "transferTo", "");
|
|
23
|
-
o(this, "dataGroupName", "");
|
|
24
|
-
o(this, "_isTransferred", !1);
|
|
15
|
+
super(), this.mode = "slave", this.breakpoint = "99999px", this.transferTo = "", this.dataGroupName = "", this._isTransferred = !1;
|
|
25
16
|
}
|
|
26
17
|
getOffcanvas() {
|
|
27
18
|
return this.transferTo ? document.querySelector(this.transferTo) : null;
|
|
28
19
|
}
|
|
29
20
|
getOffcanvasNav() {
|
|
30
|
-
const
|
|
31
|
-
return
|
|
21
|
+
const t = this.getOffcanvas();
|
|
22
|
+
return t ? t.querySelector("nte-nav") : null;
|
|
32
23
|
}
|
|
33
24
|
render() {
|
|
34
|
-
return
|
|
25
|
+
return c` <nav>
|
|
35
26
|
<div id="burger-wrapper" ?hidden=${!this._isTransferred}>
|
|
36
27
|
<slot
|
|
37
28
|
name="burger"
|
|
@@ -40,12 +31,12 @@ let l = class extends v {
|
|
|
40
31
|
id="burger"
|
|
41
32
|
class="burger"
|
|
42
33
|
@click=${() => {
|
|
43
|
-
var
|
|
44
|
-
return (
|
|
34
|
+
var t;
|
|
35
|
+
return (t = this.getOffcanvas()) == null ? void 0 : t.open();
|
|
45
36
|
}}
|
|
46
37
|
>
|
|
47
38
|
<!-- fallback icon -->
|
|
48
|
-
${this._isTransferred ?
|
|
39
|
+
${this._isTransferred ? c`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
|
|
49
40
|
<div id="text"><slot name="menu-text"></slot></div>
|
|
50
41
|
<nte-burger
|
|
51
42
|
data-group-name="${this.dataGroupName}"
|
|
@@ -61,71 +52,62 @@ let l = class extends v {
|
|
|
61
52
|
</div>
|
|
62
53
|
</nav>`;
|
|
63
54
|
}
|
|
64
|
-
transferToElement(
|
|
55
|
+
transferToElement(t) {
|
|
65
56
|
var a;
|
|
66
|
-
const
|
|
67
|
-
if (
|
|
57
|
+
const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#main-slot");
|
|
58
|
+
if (r === null)
|
|
68
59
|
return;
|
|
69
|
-
Array.from(
|
|
70
|
-
|
|
60
|
+
Array.from(r.assignedElements({ flatten: !0 })).forEach((e) => {
|
|
61
|
+
e instanceof HTMLElement && t.appendChild(e);
|
|
71
62
|
});
|
|
72
63
|
}
|
|
73
|
-
updated(
|
|
74
|
-
var
|
|
75
|
-
super.updated(
|
|
64
|
+
updated(t) {
|
|
65
|
+
var r, s;
|
|
66
|
+
super.updated(t), this._isTransferred ? this.transferToElement(
|
|
76
67
|
this.getOffcanvasNav() ?? (() => {
|
|
77
68
|
throw new Error("No offcanvas nav found");
|
|
78
69
|
})()
|
|
79
|
-
) : ((
|
|
70
|
+
) : ((r = this.getOffcanvasNav()) == null || r.transferToElement(this), (s = this.getOffcanvas()) == null || s.close());
|
|
80
71
|
}
|
|
81
|
-
firstUpdated(
|
|
82
|
-
super.firstUpdated(
|
|
83
|
-
const
|
|
84
|
-
!
|
|
72
|
+
firstUpdated(t) {
|
|
73
|
+
super.firstUpdated(t);
|
|
74
|
+
const r = this.classList;
|
|
75
|
+
!r.contains("nav-vertical") && !r.contains("nav-horizontal") && r.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
|
|
85
76
|
}
|
|
86
77
|
async connectedCallback() {
|
|
87
|
-
await
|
|
78
|
+
await p(), super.connectedCallback(), this.mode !== "slave" && this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (g(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (t) => {
|
|
88
79
|
g(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
89
80
|
})));
|
|
90
81
|
}
|
|
91
82
|
};
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
],
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
],
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
],
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
],
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
],
|
|
108
|
-
|
|
83
|
+
n.styles = [v(T)];
|
|
84
|
+
l([
|
|
85
|
+
d({ type: String, reflect: !0 })
|
|
86
|
+
], n.prototype, "mode", 2);
|
|
87
|
+
l([
|
|
88
|
+
d({ type: String, reflect: !0 })
|
|
89
|
+
], n.prototype, "breakpoint", 2);
|
|
90
|
+
l([
|
|
91
|
+
d({ type: String, reflect: !0, attribute: "transfer-to" })
|
|
92
|
+
], n.prototype, "transferTo", 2);
|
|
93
|
+
l([
|
|
94
|
+
d({ type: String, reflect: !1, attribute: "data-group-name" })
|
|
95
|
+
], n.prototype, "dataGroupName", 2);
|
|
96
|
+
l([
|
|
97
|
+
S()
|
|
98
|
+
], n.prototype, "_isTransferred", 2);
|
|
99
|
+
n = l([
|
|
109
100
|
b("nte-nav")
|
|
110
|
-
],
|
|
111
|
-
const
|
|
112
|
-
var
|
|
113
|
-
for (var
|
|
114
|
-
(
|
|
115
|
-
return
|
|
116
|
-
}
|
|
117
|
-
let
|
|
101
|
+
], n);
|
|
102
|
+
const L = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--bg: transparent;--spacer-bg: transparent;--container-width: var(--nt-container-width, 100%);--brand-height: 80px;--spacer-height: 80px;width:100vw;margin:0}:host(a){height:85px;width:auto}#wrapper{position:relative;left:0;top:0;right:0;width:100%}#spacer{position:relative;top:0;left:0;width:100%;transition:height .3s ease-in-out;height:var(--spacer-height);background-color:var(--spacer-bg)}#navbar{position:absolute;top:0;width:100vw;height:auto;background-color:var(--bg);z-index:1000}#main{width:100vw;display:block}";
|
|
103
|
+
var P = Object.defineProperty, E = Object.getOwnPropertyDescriptor, x = (t, r, s, a) => {
|
|
104
|
+
for (var e = a > 1 ? void 0 : a ? E(r, s) : r, i = t.length - 1, o; i >= 0; i--)
|
|
105
|
+
(o = t[i]) && (e = (a ? o(r, s, e) : o(e)) || e);
|
|
106
|
+
return a && e && P(r, s, e), e;
|
|
107
|
+
};
|
|
108
|
+
let h = class extends f {
|
|
118
109
|
constructor() {
|
|
119
|
-
super()
|
|
120
|
-
// lit refs for navbar and spacer
|
|
121
|
-
o(this, "navbarRef", w());
|
|
122
|
-
o(this, "spacerRef", w());
|
|
123
|
-
o(this, "scrollThreshold", 0);
|
|
124
|
-
// Track last scroll position to detect scroll direction
|
|
125
|
-
o(this, "_lastScrollY", window.scrollY);
|
|
126
|
-
o(this, "_scrollUpPixels", 0);
|
|
127
|
-
o(this, "_debouncer");
|
|
128
|
-
this._debouncer = new L(100, 300), document.addEventListener(
|
|
110
|
+
super(), this.navbarRef = m(), this.spacerRef = m(), this.scrollThreshold = 0, this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = new _(100, 300), document.addEventListener(
|
|
129
111
|
"scroll",
|
|
130
112
|
async () => {
|
|
131
113
|
this.updateScrollState();
|
|
@@ -137,24 +119,24 @@ let p = class extends v {
|
|
|
137
119
|
return "nte-navbar";
|
|
138
120
|
}
|
|
139
121
|
updateScrollState() {
|
|
140
|
-
const
|
|
141
|
-
|
|
122
|
+
const t = window.scrollY;
|
|
123
|
+
t > 1 ? this.classList.add("is-scrolled") : this.classList.remove("is-scrolled"), t < this._lastScrollY ? (this._scrollUpPixels += this._lastScrollY - t, this._scrollUpPixels > 10 && t < this.scrollThreshold && this.classList.add("is-scrolling-up")) : (this._scrollUpPixels = 0, this.classList.remove("is-scrolling-up")), t > this.scrollThreshold ? this.classList.add("is-below-threshold") : this.classList.remove("is-below-threshold"), this._lastScrollY = t;
|
|
142
124
|
}
|
|
143
125
|
async connectedCallback() {
|
|
144
|
-
this.updateScrollState(), await
|
|
126
|
+
this.updateScrollState(), await p(), super.connectedCallback();
|
|
145
127
|
}
|
|
146
128
|
// Adjust the spacer height on every render
|
|
147
|
-
async updated(
|
|
148
|
-
await
|
|
129
|
+
async updated(t) {
|
|
130
|
+
await p(), super.updated(t);
|
|
149
131
|
}
|
|
150
|
-
firstUpdated(
|
|
151
|
-
|
|
132
|
+
firstUpdated(t) {
|
|
133
|
+
y.observeEmptySlots(this);
|
|
152
134
|
}
|
|
153
135
|
render() {
|
|
154
|
-
return
|
|
136
|
+
return c`
|
|
155
137
|
<div id="wrapper" part="wrapper">
|
|
156
|
-
<div id="spacer" part="spacer" ${
|
|
157
|
-
<div id="navbar" part="navbar" ${
|
|
138
|
+
<div id="spacer" part="spacer" ${w(this.spacerRef)}></div>
|
|
139
|
+
<div id="navbar" part="navbar" ${w(this.navbarRef)}>
|
|
158
140
|
<div id="brand" part="brand">
|
|
159
141
|
<slot name="brand"></slot>
|
|
160
142
|
</div>
|
|
@@ -166,39 +148,38 @@ let p = class extends v {
|
|
|
166
148
|
`;
|
|
167
149
|
}
|
|
168
150
|
};
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
],
|
|
173
|
-
|
|
151
|
+
h.styles = [v(L)];
|
|
152
|
+
x([
|
|
153
|
+
d({ type: Number, attribute: "scroll-threshold", reflect: !0 })
|
|
154
|
+
], h.prototype, "scrollThreshold", 2);
|
|
155
|
+
h = x([
|
|
174
156
|
b("nte-navbar")
|
|
175
|
-
],
|
|
176
|
-
const
|
|
177
|
-
var
|
|
178
|
-
for (var
|
|
179
|
-
(
|
|
180
|
-
return
|
|
181
|
-
}
|
|
182
|
-
let u = class extends
|
|
157
|
+
], h);
|
|
158
|
+
const N = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--container-width: var(--nt-container-width, 100%);--background: transparent;--text-color: var(--nt-text);--height: auto;--brand-height: 80px;display:block;height:100%;width:100vw}:host(.hide-on-scroll){transition:max-height .3s ease-in-out;max-height:100px}:host(.hide-on-scroll.is-scrolled){max-height:0;overflow:hidden}#main{height:var(--height);transition:height .2s ease-in-out;overflow:visible;width:100%;display:flex;background:var(--background)}#container{width:var(--container-width);margin:0 auto;display:flex}#container #brand{min-width:0;flex-shrink:1;width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #brand:has(slot[empty]){display:none}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
|
|
159
|
+
var $ = Object.getOwnPropertyDescriptor, C = (t, r, s, a) => {
|
|
160
|
+
for (var e = a > 1 ? void 0 : a ? $(r, s) : r, i = t.length - 1, o; i >= 0; i--)
|
|
161
|
+
(o = t[i]) && (e = o(e) || e);
|
|
162
|
+
return e;
|
|
163
|
+
};
|
|
164
|
+
let u = class extends f {
|
|
183
165
|
constructor() {
|
|
184
|
-
super(...arguments);
|
|
185
|
-
o(this, "_isScrolled", !1);
|
|
166
|
+
super(...arguments), this._isScrolled = !1;
|
|
186
167
|
}
|
|
187
168
|
static get is() {
|
|
188
169
|
return "nte-navbar-line";
|
|
189
170
|
}
|
|
190
171
|
updateScrollState() {
|
|
191
|
-
const
|
|
192
|
-
|
|
172
|
+
const t = window.scrollY;
|
|
173
|
+
t > 1 && !this._isScrolled ? (this.classList.add("is-scrolled"), this._isScrolled = !0) : t <= 1 && this._isScrolled && (this.classList.remove("is-scrolled"), this._isScrolled = !1);
|
|
193
174
|
}
|
|
194
175
|
connectedCallback() {
|
|
195
176
|
super.connectedCallback(), window.addEventListener("scroll", () => this.updateScrollState(), { passive: !0 });
|
|
196
177
|
}
|
|
197
|
-
async firstUpdated(
|
|
198
|
-
|
|
178
|
+
async firstUpdated(t) {
|
|
179
|
+
y.observeEmptySlots(this), this.updateScrollState();
|
|
199
180
|
}
|
|
200
181
|
render() {
|
|
201
|
-
return
|
|
182
|
+
return c`
|
|
202
183
|
<div id="main" part="main">
|
|
203
184
|
<div id="container" part="container">
|
|
204
185
|
<div id="brand" part="brand">
|
|
@@ -212,12 +193,12 @@ let u = class extends v {
|
|
|
212
193
|
`;
|
|
213
194
|
}
|
|
214
195
|
};
|
|
215
|
-
|
|
216
|
-
u =
|
|
196
|
+
u.styles = [v(N)];
|
|
197
|
+
u = C([
|
|
217
198
|
b("nte-navbar-line")
|
|
218
199
|
], u);
|
|
219
200
|
console.log("Loading nte-nav...");
|
|
220
201
|
export {
|
|
221
|
-
|
|
222
|
-
|
|
202
|
+
n as NteNav,
|
|
203
|
+
h as NteNavbar
|
|
223
204
|
};
|