@nextrap/nte-nav 1.1.13 → 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 +4 -0
- package/index.js +96 -114
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/index.js
CHANGED
|
@@ -1,36 +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 n = (r, e, t) => O(r, typeof e != "symbol" ? e + "" : e, t);
|
|
4
|
-
import { waitForDomContentLoaded as u, isBiggerThanBreakpoint as m, Debouncer as $, SlotTool as x } from "@nextrap/nt-framework";
|
|
1
|
+
import { waitForDomContentLoaded as p, isBiggerThanBreakpoint as g, Debouncer as _, SlotTool as y } from "@nextrap/nt-framework";
|
|
5
2
|
import "@nextrap/nte-offcanvas";
|
|
6
|
-
import { unsafeCSS as v, LitElement as
|
|
7
|
-
import { property as
|
|
8
|
-
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";
|
|
9
6
|
import "@nextrap/nte-burger";
|
|
10
|
-
const
|
|
11
|
-
var
|
|
12
|
-
for (var
|
|
13
|
-
(o =
|
|
14
|
-
return
|
|
15
|
-
}
|
|
16
|
-
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 {
|
|
17
14
|
constructor() {
|
|
18
|
-
super();
|
|
19
|
-
n(this, "mode", "slave");
|
|
20
|
-
n(this, "breakpoint", "99999px");
|
|
21
|
-
n(this, "transferTo", "");
|
|
22
|
-
n(this, "dataGroupName", "");
|
|
23
|
-
n(this, "_isTransferred", !1);
|
|
15
|
+
super(), this.mode = "slave", this.breakpoint = "99999px", this.transferTo = "", this.dataGroupName = "", this._isTransferred = !1;
|
|
24
16
|
}
|
|
25
17
|
getOffcanvas() {
|
|
26
18
|
return this.transferTo ? document.querySelector(this.transferTo) : null;
|
|
27
19
|
}
|
|
28
20
|
getOffcanvasNav() {
|
|
29
|
-
const
|
|
30
|
-
return
|
|
21
|
+
const t = this.getOffcanvas();
|
|
22
|
+
return t ? t.querySelector("nte-nav") : null;
|
|
31
23
|
}
|
|
32
24
|
render() {
|
|
33
|
-
return
|
|
25
|
+
return c` <nav>
|
|
34
26
|
<div id="burger-wrapper" ?hidden=${!this._isTransferred}>
|
|
35
27
|
<slot
|
|
36
28
|
name="burger"
|
|
@@ -39,12 +31,12 @@ let l = class extends b {
|
|
|
39
31
|
id="burger"
|
|
40
32
|
class="burger"
|
|
41
33
|
@click=${() => {
|
|
42
|
-
var
|
|
43
|
-
return (
|
|
34
|
+
var t;
|
|
35
|
+
return (t = this.getOffcanvas()) == null ? void 0 : t.open();
|
|
44
36
|
}}
|
|
45
37
|
>
|
|
46
38
|
<!-- fallback icon -->
|
|
47
|
-
${this._isTransferred ?
|
|
39
|
+
${this._isTransferred ? c`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
|
|
48
40
|
<div id="text"><slot name="menu-text"></slot></div>
|
|
49
41
|
<nte-burger
|
|
50
42
|
data-group-name="${this.dataGroupName}"
|
|
@@ -60,71 +52,62 @@ let l = class extends b {
|
|
|
60
52
|
</div>
|
|
61
53
|
</nav>`;
|
|
62
54
|
}
|
|
63
|
-
transferToElement(
|
|
55
|
+
transferToElement(t) {
|
|
64
56
|
var a;
|
|
65
|
-
const
|
|
66
|
-
if (
|
|
57
|
+
const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#main-slot");
|
|
58
|
+
if (r === null)
|
|
67
59
|
return;
|
|
68
|
-
Array.from(
|
|
69
|
-
|
|
60
|
+
Array.from(r.assignedElements({ flatten: !0 })).forEach((e) => {
|
|
61
|
+
e instanceof HTMLElement && t.appendChild(e);
|
|
70
62
|
});
|
|
71
63
|
}
|
|
72
|
-
updated(
|
|
73
|
-
var
|
|
74
|
-
super.updated(
|
|
64
|
+
updated(t) {
|
|
65
|
+
var r, s;
|
|
66
|
+
super.updated(t), this._isTransferred ? this.transferToElement(
|
|
75
67
|
this.getOffcanvasNav() ?? (() => {
|
|
76
68
|
throw new Error("No offcanvas nav found");
|
|
77
69
|
})()
|
|
78
|
-
) : ((
|
|
70
|
+
) : ((r = this.getOffcanvasNav()) == null || r.transferToElement(this), (s = this.getOffcanvas()) == null || s.close());
|
|
79
71
|
}
|
|
80
|
-
firstUpdated(
|
|
81
|
-
super.firstUpdated(
|
|
82
|
-
const
|
|
83
|
-
!
|
|
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");
|
|
84
76
|
}
|
|
85
77
|
async connectedCallback() {
|
|
86
|
-
await
|
|
87
|
-
|
|
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) => {
|
|
79
|
+
g(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
88
80
|
})));
|
|
89
81
|
}
|
|
90
82
|
};
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
],
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
],
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
],
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
],
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
],
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
],
|
|
110
|
-
const
|
|
111
|
-
var
|
|
112
|
-
for (var
|
|
113
|
-
(o =
|
|
114
|
-
return
|
|
115
|
-
}
|
|
116
|
-
let
|
|
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([
|
|
100
|
+
b("nte-nav")
|
|
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 {
|
|
117
109
|
constructor() {
|
|
118
|
-
super()
|
|
119
|
-
// lit refs for navbar and spacer
|
|
120
|
-
n(this, "navbarRef", w());
|
|
121
|
-
n(this, "spacerRef", w());
|
|
122
|
-
n(this, "scrollThreshold", 0);
|
|
123
|
-
// Track last scroll position to detect scroll direction
|
|
124
|
-
n(this, "_lastScrollY", window.scrollY);
|
|
125
|
-
n(this, "_scrollUpPixels", 0);
|
|
126
|
-
n(this, "_debouncer");
|
|
127
|
-
this._debouncer = new $(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(
|
|
128
111
|
"scroll",
|
|
129
112
|
async () => {
|
|
130
113
|
this.updateScrollState();
|
|
@@ -136,24 +119,24 @@ let p = class extends b {
|
|
|
136
119
|
return "nte-navbar";
|
|
137
120
|
}
|
|
138
121
|
updateScrollState() {
|
|
139
|
-
const
|
|
140
|
-
|
|
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;
|
|
141
124
|
}
|
|
142
125
|
async connectedCallback() {
|
|
143
|
-
this.updateScrollState(), await
|
|
126
|
+
this.updateScrollState(), await p(), super.connectedCallback();
|
|
144
127
|
}
|
|
145
128
|
// Adjust the spacer height on every render
|
|
146
|
-
async updated(
|
|
147
|
-
await
|
|
129
|
+
async updated(t) {
|
|
130
|
+
await p(), super.updated(t);
|
|
148
131
|
}
|
|
149
|
-
firstUpdated(
|
|
150
|
-
|
|
132
|
+
firstUpdated(t) {
|
|
133
|
+
y.observeEmptySlots(this);
|
|
151
134
|
}
|
|
152
135
|
render() {
|
|
153
|
-
return
|
|
136
|
+
return c`
|
|
154
137
|
<div id="wrapper" part="wrapper">
|
|
155
|
-
<div id="spacer" part="spacer" ${
|
|
156
|
-
<div id="navbar" part="navbar" ${
|
|
138
|
+
<div id="spacer" part="spacer" ${w(this.spacerRef)}></div>
|
|
139
|
+
<div id="navbar" part="navbar" ${w(this.navbarRef)}>
|
|
157
140
|
<div id="brand" part="brand">
|
|
158
141
|
<slot name="brand"></slot>
|
|
159
142
|
</div>
|
|
@@ -165,39 +148,38 @@ let p = class extends b {
|
|
|
165
148
|
`;
|
|
166
149
|
}
|
|
167
150
|
};
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
],
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
],
|
|
175
|
-
const
|
|
176
|
-
var
|
|
177
|
-
for (var
|
|
178
|
-
(o =
|
|
179
|
-
return
|
|
180
|
-
}
|
|
181
|
-
let
|
|
151
|
+
h.styles = [v(L)];
|
|
152
|
+
x([
|
|
153
|
+
d({ type: Number, attribute: "scroll-threshold", reflect: !0 })
|
|
154
|
+
], h.prototype, "scrollThreshold", 2);
|
|
155
|
+
h = x([
|
|
156
|
+
b("nte-navbar")
|
|
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 {
|
|
182
165
|
constructor() {
|
|
183
|
-
super(...arguments);
|
|
184
|
-
n(this, "_isScrolled", !1);
|
|
166
|
+
super(...arguments), this._isScrolled = !1;
|
|
185
167
|
}
|
|
186
168
|
static get is() {
|
|
187
169
|
return "nte-navbar-line";
|
|
188
170
|
}
|
|
189
171
|
updateScrollState() {
|
|
190
|
-
const
|
|
191
|
-
|
|
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);
|
|
192
174
|
}
|
|
193
175
|
connectedCallback() {
|
|
194
176
|
super.connectedCallback(), window.addEventListener("scroll", () => this.updateScrollState(), { passive: !0 });
|
|
195
177
|
}
|
|
196
|
-
async firstUpdated(
|
|
197
|
-
|
|
178
|
+
async firstUpdated(t) {
|
|
179
|
+
y.observeEmptySlots(this), this.updateScrollState();
|
|
198
180
|
}
|
|
199
181
|
render() {
|
|
200
|
-
return
|
|
182
|
+
return c`
|
|
201
183
|
<div id="main" part="main">
|
|
202
184
|
<div id="container" part="container">
|
|
203
185
|
<div id="brand" part="brand">
|
|
@@ -211,12 +193,12 @@ let f = class extends b {
|
|
|
211
193
|
`;
|
|
212
194
|
}
|
|
213
195
|
};
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
],
|
|
196
|
+
u.styles = [v(N)];
|
|
197
|
+
u = C([
|
|
198
|
+
b("nte-navbar-line")
|
|
199
|
+
], u);
|
|
218
200
|
console.log("Loading nte-nav...");
|
|
219
201
|
export {
|
|
220
|
-
|
|
221
|
-
|
|
202
|
+
n as NteNav,
|
|
203
|
+
h as NteNavbar
|
|
222
204
|
};
|