@nextrap/nte-nav 1.1.12 → 1.1.13
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 +48 -49
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/index.js
CHANGED
|
@@ -1,27 +1,26 @@
|
|
|
1
1
|
var P = Object.defineProperty;
|
|
2
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
|
|
4
|
-
import {
|
|
5
|
-
import { isBiggerThanBreakpoint as g, Debouncer as L, waitForDomContentLoaded as m, SlotTool as x } from "@nextrap/nt-framework";
|
|
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";
|
|
6
5
|
import "@nextrap/nte-offcanvas";
|
|
7
|
-
import { unsafeCSS as
|
|
8
|
-
import { property as c, state as
|
|
6
|
+
import { unsafeCSS as v, LitElement as b, html as h } from "lit";
|
|
7
|
+
import { property as c, state as L, customElement as g } from "lit/decorators.js";
|
|
9
8
|
import { createRef as w, ref as _ } from "lit/directives/ref.js";
|
|
10
9
|
import "@nextrap/nte-burger";
|
|
11
|
-
const
|
|
12
|
-
var y = Object.defineProperty,
|
|
13
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
14
|
-
(
|
|
10
|
+
const N = ":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)}";
|
|
11
|
+
var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, E = (r, e, t) => e in r ? y(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, d = (r, e, t, i) => {
|
|
12
|
+
for (var a = i > 1 ? void 0 : i ? k(e, t) : e, s = r.length - 1, o; s >= 0; s--)
|
|
13
|
+
(o = r[s]) && (a = (i ? o(e, t, a) : o(a)) || a);
|
|
15
14
|
return i && a && y(e, t, a), a;
|
|
16
|
-
},
|
|
17
|
-
let l = class extends
|
|
15
|
+
}, C = (r, e, t) => E(r, e + "", t);
|
|
16
|
+
let l = class extends b {
|
|
18
17
|
constructor() {
|
|
19
18
|
super();
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
n(this, "mode", "slave");
|
|
20
|
+
n(this, "breakpoint", "99999px");
|
|
21
|
+
n(this, "transferTo", "");
|
|
22
|
+
n(this, "dataGroupName", "");
|
|
23
|
+
n(this, "_isTransferred", !1);
|
|
25
24
|
}
|
|
26
25
|
getOffcanvas() {
|
|
27
26
|
return this.transferTo ? document.querySelector(this.transferTo) : null;
|
|
@@ -84,12 +83,12 @@ let l = class extends v {
|
|
|
84
83
|
!t.contains("nav-vertical") && !t.contains("nav-horizontal") && t.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
|
|
85
84
|
}
|
|
86
85
|
async connectedCallback() {
|
|
87
|
-
await
|
|
88
|
-
|
|
86
|
+
await u(), super.connectedCallback(), this.mode !== "slave" && this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (m(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (e) => {
|
|
87
|
+
m(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
89
88
|
})));
|
|
90
89
|
}
|
|
91
90
|
};
|
|
92
|
-
|
|
91
|
+
C(l, "styles", [v(N)]);
|
|
93
92
|
d([
|
|
94
93
|
c({ type: String, reflect: !0 })
|
|
95
94
|
], l.prototype, "mode", 2);
|
|
@@ -103,29 +102,29 @@ d([
|
|
|
103
102
|
c({ type: String, reflect: !1, attribute: "data-group-name" })
|
|
104
103
|
], l.prototype, "dataGroupName", 2);
|
|
105
104
|
d([
|
|
106
|
-
|
|
105
|
+
L()
|
|
107
106
|
], l.prototype, "_isTransferred", 2);
|
|
108
107
|
l = d([
|
|
109
|
-
|
|
108
|
+
g("nte-nav")
|
|
110
109
|
], l);
|
|
111
|
-
const
|
|
112
|
-
var S = Object.defineProperty,
|
|
113
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
114
|
-
(
|
|
110
|
+
const Y = "*,*: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}";
|
|
111
|
+
var S = Object.defineProperty, D = Object.getOwnPropertyDescriptor, U = (r, e, t) => e in r ? S(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, T = (r, e, t, i) => {
|
|
112
|
+
for (var a = i > 1 ? void 0 : i ? D(e, t) : e, s = r.length - 1, o; s >= 0; s--)
|
|
113
|
+
(o = r[s]) && (a = (i ? o(e, t, a) : o(a)) || a);
|
|
115
114
|
return i && a && S(e, t, a), a;
|
|
116
|
-
},
|
|
117
|
-
let p = class extends
|
|
115
|
+
}, z = (r, e, t) => U(r, e + "", t);
|
|
116
|
+
let p = class extends b {
|
|
118
117
|
constructor() {
|
|
119
118
|
super();
|
|
120
119
|
// lit refs for navbar and spacer
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
120
|
+
n(this, "navbarRef", w());
|
|
121
|
+
n(this, "spacerRef", w());
|
|
122
|
+
n(this, "scrollThreshold", 0);
|
|
124
123
|
// Track last scroll position to detect scroll direction
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
this._debouncer = new
|
|
124
|
+
n(this, "_lastScrollY", window.scrollY);
|
|
125
|
+
n(this, "_scrollUpPixels", 0);
|
|
126
|
+
n(this, "_debouncer");
|
|
127
|
+
this._debouncer = new $(100, 300), document.addEventListener(
|
|
129
128
|
"scroll",
|
|
130
129
|
async () => {
|
|
131
130
|
this.updateScrollState();
|
|
@@ -141,11 +140,11 @@ let p = class extends v {
|
|
|
141
140
|
e > 1 ? this.classList.add("is-scrolled") : this.classList.remove("is-scrolled"), e < this._lastScrollY ? (this._scrollUpPixels += this._lastScrollY - e, this._scrollUpPixels > 10 && e < this.scrollThreshold && this.classList.add("is-scrolling-up")) : (this._scrollUpPixels = 0, this.classList.remove("is-scrolling-up")), e > this.scrollThreshold ? this.classList.add("is-below-threshold") : this.classList.remove("is-below-threshold"), this._lastScrollY = e;
|
|
142
141
|
}
|
|
143
142
|
async connectedCallback() {
|
|
144
|
-
this.updateScrollState(), await
|
|
143
|
+
this.updateScrollState(), await u(), super.connectedCallback();
|
|
145
144
|
}
|
|
146
145
|
// Adjust the spacer height on every render
|
|
147
146
|
async updated(e) {
|
|
148
|
-
await
|
|
147
|
+
await u(), super.updated(e);
|
|
149
148
|
}
|
|
150
149
|
firstUpdated(e) {
|
|
151
150
|
x.observeEmptySlots(this);
|
|
@@ -166,23 +165,23 @@ let p = class extends v {
|
|
|
166
165
|
`;
|
|
167
166
|
}
|
|
168
167
|
};
|
|
169
|
-
|
|
168
|
+
z(p, "styles", [v(Y)]);
|
|
170
169
|
T([
|
|
171
170
|
c({ type: Number, attribute: "scroll-threshold", reflect: !0 })
|
|
172
171
|
], p.prototype, "scrollThreshold", 2);
|
|
173
172
|
p = T([
|
|
174
|
-
|
|
173
|
+
g("nte-navbar")
|
|
175
174
|
], p);
|
|
176
|
-
const
|
|
177
|
-
var
|
|
178
|
-
for (var a = i > 1 ? void 0 : i ?
|
|
179
|
-
(
|
|
175
|
+
const R = "*,*: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}";
|
|
176
|
+
var j = Object.defineProperty, F = Object.getOwnPropertyDescriptor, q = (r, e, t) => e in r ? j(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, G = (r, e, t, i) => {
|
|
177
|
+
for (var a = i > 1 ? void 0 : i ? F(e, t) : e, s = r.length - 1, o; s >= 0; s--)
|
|
178
|
+
(o = r[s]) && (a = o(a) || a);
|
|
180
179
|
return a;
|
|
181
|
-
},
|
|
182
|
-
let
|
|
180
|
+
}, B = (r, e, t) => q(r, e + "", t);
|
|
181
|
+
let f = class extends b {
|
|
183
182
|
constructor() {
|
|
184
183
|
super(...arguments);
|
|
185
|
-
|
|
184
|
+
n(this, "_isScrolled", !1);
|
|
186
185
|
}
|
|
187
186
|
static get is() {
|
|
188
187
|
return "nte-navbar-line";
|
|
@@ -212,10 +211,10 @@ let u = class extends v {
|
|
|
212
211
|
`;
|
|
213
212
|
}
|
|
214
213
|
};
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
],
|
|
214
|
+
B(f, "styles", [v(R)]);
|
|
215
|
+
f = G([
|
|
216
|
+
g("nte-navbar-line")
|
|
217
|
+
], f);
|
|
219
218
|
console.log("Loading nte-nav...");
|
|
220
219
|
export {
|
|
221
220
|
l as NteNav,
|