@nextrap/nte-nav 1.1.17 → 1.1.19
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
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 1.1.19 (2025-09-11)
|
|
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.18 (2025-09-11)
|
|
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.17 (2025-09-11)
|
|
2
10
|
|
|
3
11
|
This was a version bump only for nte-nav to align it with other projects, there were no code changes.
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
declare const NteNavBrandRelocator_base: (abstract new (...a: any[]) => {
|
|
3
|
-
"__#
|
|
3
|
+
"__#2347@#ac"?: AbortController;
|
|
4
4
|
connectedCallback(): void;
|
|
5
5
|
disconnectedCallback(): void;
|
|
6
|
-
"__#
|
|
6
|
+
"__#2347@#bindEventListeners"(): void;
|
|
7
7
|
}) & (abstract new (...args: any[]) => {
|
|
8
|
-
"__#
|
|
9
|
-
"__#
|
|
8
|
+
"__#2348@#debugCached": boolean | null;
|
|
9
|
+
"__#2348@#myElementId": number;
|
|
10
10
|
invalidateDebugCache(): void;
|
|
11
|
-
"__#
|
|
11
|
+
"__#2348@#myLoggerInstance": import('@trunkjs/browser-utils').Logger | null;
|
|
12
12
|
readonly _debug: boolean;
|
|
13
13
|
getLogger(instanceId?: string): import('@trunkjs/browser-utils').Logger;
|
|
14
14
|
log(...args: any[]): void;
|
|
@@ -23,11 +23,13 @@ export declare class NteNavBrandRelocator extends NteNavBrandRelocator_base {
|
|
|
23
23
|
accessor active: boolean | null;
|
|
24
24
|
accessor mode: string;
|
|
25
25
|
private accessor done;
|
|
26
|
+
private accessor initialized;
|
|
26
27
|
private onScroll;
|
|
27
28
|
private onanimationEnd;
|
|
28
29
|
private get brandElement();
|
|
29
30
|
render(): import('lit-html').TemplateResult<1>;
|
|
30
31
|
update(changedProperties: Map<string, any>): void;
|
|
31
32
|
firstUpdated(): Promise<void>;
|
|
33
|
+
connectedCallback(): Promise<void>;
|
|
32
34
|
}
|
|
33
35
|
export {};
|
package/index.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { waitForDomContentLoaded as
|
|
1
|
+
import { waitForDomContentLoaded as H, isBiggerThanBreakpoint as St, Debouncer as oe, SlotTool as Pt, waitForLoad as se } from "@nextrap/nt-framework";
|
|
2
2
|
import "@nextrap/nte-offcanvas";
|
|
3
|
-
import { html as
|
|
4
|
-
import { customElement as
|
|
5
|
-
import { createRef as
|
|
6
|
-
import { EventBindingsMixin as
|
|
7
|
-
import { styleMap as
|
|
3
|
+
import { html as P, unsafeCSS as J, LitElement as K } from "lit";
|
|
4
|
+
import { customElement as Q, property as z, state as V } from "lit/decorators.js";
|
|
5
|
+
import { createRef as $t, ref as xt } from "lit/directives/ref.js";
|
|
6
|
+
import { EventBindingsMixin as le, LoggingMixin as de, Listen as ce } from "@trunkjs/browser-utils";
|
|
7
|
+
import { styleMap as he } from "lit/directives/style-map.js";
|
|
8
8
|
import "@nextrap/nte-burger";
|
|
9
|
-
const
|
|
10
|
-
var
|
|
9
|
+
const pe = ":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)}";
|
|
10
|
+
var ve = Object.create, rt = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, Mt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), L = (t) => {
|
|
11
11
|
throw TypeError(t);
|
|
12
|
-
},
|
|
13
|
-
for (var a = 0,
|
|
14
|
-
return
|
|
15
|
-
},
|
|
16
|
-
var h, s,
|
|
17
|
-
return
|
|
12
|
+
}, fe = (t, e, r) => e in t ? rt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, kt = (t, e) => rt(t, "name", { value: e, configurable: !0 }), _e = (t) => [, , , ve((t == null ? void 0 : t[Mt("metadata")]) ?? null)], Lt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], D = (t) => t !== void 0 && typeof t != "function" ? L("Function expected") : t, ge = (t, e, r, o, a) => ({ kind: Lt[t], name: e, metadata: o, addInitializer: (n) => r._ ? L("Already initialized") : a.push(D(n || null)) }), be = (t, e) => fe(e, Mt("metadata"), t[3]), S = (t, e, r, o) => {
|
|
13
|
+
for (var a = 0, n = t[e >> 1], h = n && n.length; a < h; a++) e & 1 ? n[a].call(r) : o = n[a].call(r, o);
|
|
14
|
+
return o;
|
|
15
|
+
}, W = (t, e, r, o, a, n) => {
|
|
16
|
+
var h, s, m, p, _, i = e & 7, g = !!(e & 8), d = !!(e & 16), f = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Lt[i + 5], E = i > 3 && (t[f - 1] = []), R = t[f] || (t[f] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && ue(i < 4 ? a : { get [r]() {
|
|
17
|
+
return Et(this, n);
|
|
18
18
|
}, set [r](l) {
|
|
19
|
-
return
|
|
19
|
+
return zt(this, n, l);
|
|
20
20
|
} }, r));
|
|
21
|
-
i ? d && i < 4 &&
|
|
22
|
-
for (var
|
|
23
|
-
p =
|
|
24
|
-
return i ||
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
class
|
|
21
|
+
i ? d && i < 4 && kt(n, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : kt(a, r);
|
|
22
|
+
for (var w = o.length - 1; w >= 0; w--)
|
|
23
|
+
p = ge(i, r, m = {}, t[3], R), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => me(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? Et : we)(l, a, i ^ 4 ? n : c.get) : (l) => l[r]), i > 2 && (_.set = d ? (l, y) => zt(l, a, y, i ^ 4 ? n : c.set) : (l, y) => l[r] = y)), s = (0, o[w])(i ? i < 4 ? d ? n : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), m._ = 1, i ^ 4 || s === void 0 ? D(s) && (i > 4 ? E.unshift(s) : i ? d ? n = s : c[k] = s : a = s) : typeof s != "object" || s === null ? L("Object expected") : (D(h = s.get) && (c.get = h), D(h = s.set) && (c.set = h), D(h = s.init) && E.unshift(h));
|
|
24
|
+
return i || be(t, a), c && rt(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
25
|
+
}, it = (t, e, r) => e.has(t) || L("Cannot " + r), me = (t, e) => Object(e) !== e ? L('Cannot use the "in" operator on this value') : t.has(e), Et = (t, e, r) => (it(t, e, "read from private field"), r ? r.call(t) : e.get(t)), A = (t, e, r) => e.has(t) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), zt = (t, e, r, o) => (it(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r), we = (t, e, r) => (it(t, e, "access private method"), r), Wt, It, Bt, Rt, At, X, Dt, u, at, nt, ot, st, lt;
|
|
26
|
+
Dt = [Q("nte-nav")];
|
|
27
|
+
class x extends (X = K, At = [z({ type: String, reflect: !0 })], Rt = [z({ type: String, reflect: !0 })], Bt = [z({ type: String, reflect: !0, attribute: "transfer-to" })], It = [z({ type: String, reflect: !1, attribute: "data-group-name" })], Wt = [V()], X) {
|
|
28
28
|
constructor() {
|
|
29
|
-
super(),
|
|
29
|
+
super(), A(this, at, S(u, 8, this, "slave")), S(u, 11, this), A(this, nt, S(u, 12, this, "99999px")), S(u, 15, this), A(this, ot, S(u, 16, this, "")), S(u, 19, this), A(this, st, S(u, 20, this, "")), S(u, 23, this), A(this, lt, S(u, 24, this, !1)), S(u, 27, this);
|
|
30
30
|
}
|
|
31
31
|
getOffcanvas() {
|
|
32
32
|
return this.transferTo ? document.querySelector(this.transferTo) : null;
|
|
@@ -36,7 +36,7 @@ class $ extends (K = j, Wt = [N({ type: String, reflect: !0 })], Rt = [N({ type:
|
|
|
36
36
|
return e ? e.querySelector("nte-nav") : null;
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
|
-
return
|
|
39
|
+
return P` <nav>
|
|
40
40
|
<div id="burger-wrapper" ?hidden=${!this._isTransferred}>
|
|
41
41
|
<slot
|
|
42
42
|
name="burger"
|
|
@@ -50,7 +50,7 @@ class $ extends (K = j, Wt = [N({ type: String, reflect: !0 })], Rt = [N({ type:
|
|
|
50
50
|
}}
|
|
51
51
|
>
|
|
52
52
|
<!-- fallback icon -->
|
|
53
|
-
${this._isTransferred ?
|
|
53
|
+
${this._isTransferred ? P`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
|
|
54
54
|
<div id="text"><slot name="menu-text"></slot></div>
|
|
55
55
|
<nte-burger
|
|
56
56
|
data-group-name="${this.dataGroupName}"
|
|
@@ -71,17 +71,17 @@ class $ extends (K = j, Wt = [N({ type: String, reflect: !0 })], Rt = [N({ type:
|
|
|
71
71
|
const r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#main-slot");
|
|
72
72
|
if (r === null)
|
|
73
73
|
return;
|
|
74
|
-
Array.from(r.assignedElements({ flatten: !0 })).forEach((
|
|
75
|
-
|
|
74
|
+
Array.from(r.assignedElements({ flatten: !0 })).forEach((n) => {
|
|
75
|
+
n instanceof HTMLElement && e.appendChild(n);
|
|
76
76
|
});
|
|
77
77
|
}
|
|
78
78
|
updated(e) {
|
|
79
|
-
var r,
|
|
79
|
+
var r, o;
|
|
80
80
|
super.updated(e), this._isTransferred ? this.transferToElement(
|
|
81
81
|
this.getOffcanvasNav() ?? (() => {
|
|
82
82
|
throw new Error("No offcanvas nav found");
|
|
83
83
|
})()
|
|
84
|
-
) : ((r = this.getOffcanvasNav()) == null || r.transferToElement(this), (
|
|
84
|
+
) : ((r = this.getOffcanvasNav()) == null || r.transferToElement(this), (o = this.getOffcanvas()) == null || o.close());
|
|
85
85
|
}
|
|
86
86
|
firstUpdated(e) {
|
|
87
87
|
super.firstUpdated(e);
|
|
@@ -89,46 +89,46 @@ class $ extends (K = j, Wt = [N({ type: String, reflect: !0 })], Rt = [N({ type:
|
|
|
89
89
|
!r.contains("nav-vertical") && !r.contains("nav-horizontal") && r.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
|
|
90
90
|
}
|
|
91
91
|
async connectedCallback() {
|
|
92
|
-
await
|
|
93
|
-
|
|
92
|
+
await H(), super.connectedCallback(), this.mode !== "slave" && this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (St(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (e) => {
|
|
93
|
+
St(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
94
94
|
})));
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
-
|
|
98
|
-
rt = /* @__PURE__ */ new WeakMap();
|
|
99
|
-
it = /* @__PURE__ */ new WeakMap();
|
|
97
|
+
u = _e(X);
|
|
100
98
|
at = /* @__PURE__ */ new WeakMap();
|
|
101
|
-
ot = /* @__PURE__ */ new WeakMap();
|
|
102
99
|
nt = /* @__PURE__ */ new WeakMap();
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
100
|
+
ot = /* @__PURE__ */ new WeakMap();
|
|
101
|
+
st = /* @__PURE__ */ new WeakMap();
|
|
102
|
+
lt = /* @__PURE__ */ new WeakMap();
|
|
103
|
+
W(u, 4, "mode", At, x, at);
|
|
104
|
+
W(u, 4, "breakpoint", Rt, x, nt);
|
|
105
|
+
W(u, 4, "transferTo", Bt, x, ot);
|
|
106
|
+
W(u, 4, "dataGroupName", It, x, st);
|
|
107
|
+
W(u, 4, "_isTransferred", Wt, x, lt);
|
|
108
|
+
x = W(u, 0, "NteNav", Dt, x);
|
|
109
|
+
x.styles = [J(pe)];
|
|
110
|
+
S(u, 1, x);
|
|
111
|
+
const ye = "*,*: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}";
|
|
112
|
+
var Se = Object.create, dt = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, Ft = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), I = (t) => {
|
|
113
113
|
throw TypeError(t);
|
|
114
|
-
},
|
|
115
|
-
for (var a = 0,
|
|
116
|
-
return
|
|
117
|
-
},
|
|
118
|
-
var h, s,
|
|
119
|
-
return
|
|
114
|
+
}, xe = (t, e, r) => e in t ? dt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Nt = (t, e) => dt(t, "name", { value: e, configurable: !0 }), ke = (t) => [, , , Se((t == null ? void 0 : t[Ft("metadata")]) ?? null)], Yt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], F = (t) => t !== void 0 && typeof t != "function" ? I("Function expected") : t, Ee = (t, e, r, o, a) => ({ kind: Yt[t], name: e, metadata: o, addInitializer: (n) => r._ ? I("Already initialized") : a.push(F(n || null)) }), ze = (t, e) => xe(e, Ft("metadata"), t[3]), Z = (t, e, r, o) => {
|
|
115
|
+
for (var a = 0, n = t[e >> 1], h = n && n.length; a < h; a++) e & 1 ? n[a].call(r) : o = n[a].call(r, o);
|
|
116
|
+
return o;
|
|
117
|
+
}, Ut = (t, e, r, o, a, n) => {
|
|
118
|
+
var h, s, m, p, _, i = e & 7, g = !!(e & 8), d = !!(e & 16), f = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Yt[i + 5], E = i > 3 && (t[f - 1] = []), R = t[f] || (t[f] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && $e(i < 4 ? a : { get [r]() {
|
|
119
|
+
return Ot(this, n);
|
|
120
120
|
}, set [r](l) {
|
|
121
|
-
return
|
|
121
|
+
return Ct(this, n, l);
|
|
122
122
|
} }, r));
|
|
123
|
-
i ? d && i < 4 &&
|
|
124
|
-
for (var
|
|
125
|
-
p =
|
|
126
|
-
return i ||
|
|
127
|
-
},
|
|
128
|
-
|
|
129
|
-
class U extends (
|
|
123
|
+
i ? d && i < 4 && Nt(n, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Nt(a, r);
|
|
124
|
+
for (var w = o.length - 1; w >= 0; w--)
|
|
125
|
+
p = Ee(i, r, m = {}, t[3], R), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Ne(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? Ot : Ce)(l, a, i ^ 4 ? n : c.get) : (l) => l[r]), i > 2 && (_.set = d ? (l, y) => Ct(l, a, y, i ^ 4 ? n : c.set) : (l, y) => l[r] = y)), s = (0, o[w])(i ? i < 4 ? d ? n : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), m._ = 1, i ^ 4 || s === void 0 ? F(s) && (i > 4 ? E.unshift(s) : i ? d ? n = s : c[k] = s : a = s) : typeof s != "object" || s === null ? I("Object expected") : (F(h = s.get) && (c.get = h), F(h = s.set) && (c.set = h), F(h = s.init) && E.unshift(h));
|
|
126
|
+
return i || ze(t, a), c && dt(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
127
|
+
}, ct = (t, e, r) => e.has(t) || I("Cannot " + r), Ne = (t, e) => Object(e) !== e ? I('Cannot use the "in" operator on this value') : t.has(e), Ot = (t, e, r) => (ct(t, e, "read from private field"), r ? r.call(t) : e.get(t)), Oe = (t, e, r) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), Ct = (t, e, r, o) => (ct(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r), Ce = (t, e, r) => (ct(t, e, "access private method"), r), Gt, tt, qt, M, ht;
|
|
128
|
+
qt = [Q("nte-navbar")];
|
|
129
|
+
class U extends (tt = K, Gt = [z({ type: Number, attribute: "scroll-threshold", reflect: !0 })], tt) {
|
|
130
130
|
constructor() {
|
|
131
|
-
super(), this.navbarRef =
|
|
131
|
+
super(), this.navbarRef = $t(), this.spacerRef = $t(), Oe(this, ht, Z(M, 8, this, 0)), Z(M, 11, this), this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = void 0, this._debouncer = new oe(100, 300), document.addEventListener(
|
|
132
132
|
"scroll",
|
|
133
133
|
async () => {
|
|
134
134
|
this.updateScrollState();
|
|
@@ -144,20 +144,20 @@ class U extends (V = j, Ft = [N({ type: Number, attribute: "scroll-threshold", r
|
|
|
144
144
|
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;
|
|
145
145
|
}
|
|
146
146
|
async connectedCallback() {
|
|
147
|
-
this.updateScrollState(), await
|
|
147
|
+
this.updateScrollState(), await H(), super.connectedCallback();
|
|
148
148
|
}
|
|
149
149
|
// Adjust the spacer height on every render
|
|
150
150
|
async updated(e) {
|
|
151
|
-
await
|
|
151
|
+
await H(), super.updated(e);
|
|
152
152
|
}
|
|
153
153
|
firstUpdated(e) {
|
|
154
|
-
|
|
154
|
+
Pt.observeEmptySlots(this);
|
|
155
155
|
}
|
|
156
156
|
render() {
|
|
157
|
-
return
|
|
157
|
+
return P`
|
|
158
158
|
<div id="wrapper" part="wrapper">
|
|
159
|
-
<div id="spacer" part="spacer" ${
|
|
160
|
-
<div id="navbar" part="navbar" ${
|
|
159
|
+
<div id="spacer" part="spacer" ${xt(this.spacerRef)}></div>
|
|
160
|
+
<div id="navbar" part="navbar" ${xt(this.navbarRef)}>
|
|
161
161
|
<div id="brand" part="brand">
|
|
162
162
|
<slot name="brand"></slot>
|
|
163
163
|
</div>
|
|
@@ -169,27 +169,27 @@ class U extends (V = j, Ft = [N({ type: Number, attribute: "scroll-threshold", r
|
|
|
169
169
|
`;
|
|
170
170
|
}
|
|
171
171
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
U =
|
|
176
|
-
U.styles = [
|
|
177
|
-
|
|
178
|
-
const
|
|
179
|
-
var
|
|
172
|
+
M = ke(tt);
|
|
173
|
+
ht = /* @__PURE__ */ new WeakMap();
|
|
174
|
+
Ut(M, 4, "scrollThreshold", Gt, U, ht);
|
|
175
|
+
U = Ut(M, 0, "NteNavbar", qt, U);
|
|
176
|
+
U.styles = [J(ye)];
|
|
177
|
+
Z(M, 1, U);
|
|
178
|
+
const Te = "*,*: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:has(slot[empty]){display:none}#container #brand{min-width:0;flex-shrink:1;width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
|
|
179
|
+
var Pe = Object.create, pt = Object.defineProperty, Me = Object.getOwnPropertyDescriptor, Ht = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), jt = (t) => {
|
|
180
180
|
throw TypeError(t);
|
|
181
|
-
},
|
|
182
|
-
for (var a = 0,
|
|
183
|
-
return
|
|
184
|
-
},
|
|
185
|
-
var h, s,
|
|
186
|
-
|
|
187
|
-
for (var
|
|
188
|
-
|
|
189
|
-
return
|
|
190
|
-
},
|
|
191
|
-
|
|
192
|
-
const
|
|
181
|
+
}, Le = (t, e, r) => e in t ? pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, We = (t, e) => pt(t, "name", { value: e, configurable: !0 }), Ie = (t) => [, , , Pe((t == null ? void 0 : t[Ht("metadata")]) ?? null)], Be = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Jt = (t) => t !== void 0 && typeof t != "function" ? jt("Function expected") : t, Re = (t, e, r, o, a) => ({ kind: Be[t], name: e, metadata: o, addInitializer: (n) => r._ ? jt("Already initialized") : a.push(Jt(n || null)) }), Ae = (t, e) => Le(e, Ht("metadata"), t[3]), De = (t, e, r, o) => {
|
|
182
|
+
for (var a = 0, n = t[e >> 1], h = n && n.length; a < h; a++) n[a].call(r);
|
|
183
|
+
return o;
|
|
184
|
+
}, Fe = (t, e, r, o, a, n) => {
|
|
185
|
+
var h, s, m, p = e & 7, _ = !1, i = 0, g = t[i] || (t[i] = []), d = p && (a = a.prototype, p < 5 && (p > 3 || !_) && Me(a, r));
|
|
186
|
+
We(a, r);
|
|
187
|
+
for (var f = o.length - 1; f >= 0; f--)
|
|
188
|
+
m = Re(p, r, s = {}, t[3], g), h = (0, o[f])(a, m), s._ = 1, Jt(h) && (a = h);
|
|
189
|
+
return Ae(t, a), d && pt(a, r, d), _ ? p ^ 4 ? n : d : a;
|
|
190
|
+
}, Kt, vt, Qt;
|
|
191
|
+
Kt = [Q("nte-navbar-line")];
|
|
192
|
+
const yt = class yt extends (Qt = K) {
|
|
193
193
|
constructor() {
|
|
194
194
|
super(...arguments), this._isScrolled = !1;
|
|
195
195
|
}
|
|
@@ -204,10 +204,10 @@ const bt = class bt extends (Jt = j) {
|
|
|
204
204
|
super.connectedCallback(), window.addEventListener("scroll", () => this.updateScrollState(), { passive: !0 });
|
|
205
205
|
}
|
|
206
206
|
async firstUpdated(e) {
|
|
207
|
-
|
|
207
|
+
Pt.observeEmptySlots(this), this.updateScrollState();
|
|
208
208
|
}
|
|
209
209
|
render() {
|
|
210
|
-
return
|
|
210
|
+
return P`
|
|
211
211
|
<div id="main" part="main">
|
|
212
212
|
<div id="container" part="container">
|
|
213
213
|
<div id="brand" part="brand">
|
|
@@ -221,32 +221,32 @@ const bt = class bt extends (Jt = j) {
|
|
|
221
221
|
`;
|
|
222
222
|
}
|
|
223
223
|
};
|
|
224
|
-
|
|
225
|
-
let G =
|
|
226
|
-
|
|
227
|
-
G =
|
|
228
|
-
|
|
229
|
-
const
|
|
230
|
-
var
|
|
224
|
+
yt.styles = [J(Te)];
|
|
225
|
+
let G = yt;
|
|
226
|
+
vt = Ie(Qt);
|
|
227
|
+
G = Fe(vt, 0, "NteNavbarLine", Kt, G);
|
|
228
|
+
De(vt, 1, G);
|
|
229
|
+
const Ye = ":host{display:block;--animation-duration: .3s;--auto-aspect-ratio: unset;aspect-ratio:var(--auto-aspect-ratio);height:auto;width:auto}.wrapper{--orig-top: 0;--orig-left: 0;--orig-width: 0;--orig-height: 0;--self-top: 0;--self-left: 0;--self-width: 100%;--self-height: 100%;display:inline-block;width:var(--self-width);height:var(--self-height);object-fit:contain;overflow:visible;position:fixed;opacity:0}.wrapper.initialized{opacity:1}.wrapper{top:var(--self-top);left:var(--self-left);transition:all var(--animation-duration) ease-in-out}.wrapper.inactive{z-index:99999;top:calc(var(--orig-top));left:calc(var(--orig-left));width:var(--orig-width);height:var(--orig-height)}.wrapper.inactive.done{z-index:inherit;visibility:hidden}.wrapper>slot{display:contents}.wrapper ::slotted(*){width:100%;height:100%;object-fit:contain;transition:all .3s ease-in-out}";
|
|
230
|
+
var Ue = Object.create, ut = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, Vt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), B = (t) => {
|
|
231
231
|
throw TypeError(t);
|
|
232
|
-
},
|
|
233
|
-
for (var a = 0,
|
|
234
|
-
return
|
|
235
|
-
},
|
|
236
|
-
var h, s,
|
|
237
|
-
return
|
|
232
|
+
}, qe = (t, e, r) => e in t ? ut(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Tt = (t, e) => ut(t, "name", { value: e, configurable: !0 }), He = (t) => [, , , Ue((t == null ? void 0 : t[Vt("metadata")]) ?? null)], Xt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (t) => t !== void 0 && typeof t != "function" ? B("Function expected") : t, je = (t, e, r, o, a) => ({ kind: Xt[t], name: e, metadata: o, addInitializer: (n) => r._ ? B("Already initialized") : a.push(Y(n || null)) }), Je = (t, e) => qe(e, Vt("metadata"), t[3]), b = (t, e, r, o) => {
|
|
233
|
+
for (var a = 0, n = t[e >> 1], h = n && n.length; a < h; a++) e & 1 ? n[a].call(r) : o = n[a].call(r, o);
|
|
234
|
+
return o;
|
|
235
|
+
}, T = (t, e, r, o, a, n) => {
|
|
236
|
+
var h, s, m, p, _, i = e & 7, g = !!(e & 8), d = !!(e & 16), f = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Xt[i + 5], E = i > 3 && (t[f - 1] = []), R = t[f] || (t[f] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && Ge(i < 4 ? a : { get [r]() {
|
|
237
|
+
return C(this, n);
|
|
238
238
|
}, set [r](l) {
|
|
239
|
-
return
|
|
239
|
+
return j(this, n, l);
|
|
240
240
|
} }, r));
|
|
241
|
-
i ? d && i < 4 &&
|
|
242
|
-
for (var
|
|
243
|
-
p =
|
|
244
|
-
return i ||
|
|
245
|
-
},
|
|
246
|
-
|
|
247
|
-
class
|
|
241
|
+
i ? d && i < 4 && Tt(n, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Tt(a, r);
|
|
242
|
+
for (var w = o.length - 1; w >= 0; w--)
|
|
243
|
+
p = je(i, r, m = {}, t[3], R), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Ke(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? C : Qe)(l, a, i ^ 4 ? n : c.get) : (l) => l[r]), i > 2 && (_.set = d ? (l, y) => j(l, a, y, i ^ 4 ? n : c.set) : (l, y) => l[r] = y)), s = (0, o[w])(i ? i < 4 ? d ? n : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), m._ = 1, i ^ 4 || s === void 0 ? Y(s) && (i > 4 ? E.unshift(s) : i ? d ? n = s : c[k] = s : a = s) : typeof s != "object" || s === null ? B("Object expected") : (Y(h = s.get) && (c.get = h), Y(h = s.set) && (c.set = h), Y(h = s.init) && E.unshift(h));
|
|
244
|
+
return i || Je(t, a), c && ut(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
245
|
+
}, ft = (t, e, r) => e.has(t) || B("Cannot " + r), Ke = (t, e) => Object(e) !== e ? B('Cannot use the "in" operator on this value') : t.has(e), C = (t, e, r) => (ft(t, e, "read from private field"), r ? r.call(t) : e.get(t)), N = (t, e, r) => e.has(t) ? B("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), j = (t, e, r, o) => (ft(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r), Qe = (t, e, r) => (ft(t, e, "access private method"), r), Zt, te, ee, re, ie, ae, et, ne, v, _t, gt, bt, mt, wt, q, O;
|
|
246
|
+
ne = [Q("nte-nav-brand-relocator")];
|
|
247
|
+
class $ extends (et = le(de(K)), ae = [z({ type: String, reflect: !0 })], ie = [z({ type: Boolean, reflect: !0 })], re = [z({ type: String, reflect: !0 })], ee = [V()], te = [V()], Zt = [ce("scroll", { target: "window", options: { passive: !0 } })], et) {
|
|
248
248
|
constructor() {
|
|
249
|
-
super(...arguments),
|
|
249
|
+
super(...arguments), b(v, 5, this), N(this, _t, b(v, 8, this, ".brand-image")), b(v, 11, this), N(this, gt, b(v, 12, this, null)), b(v, 15, this), N(this, bt, b(v, 16, this, "auto")), b(v, 19, this), N(this, mt, b(v, 20, this, !1)), b(v, 23, this), N(this, wt, b(v, 24, this, !1)), b(v, 27, this), N(this, q, !0), N(this, O, null);
|
|
250
250
|
}
|
|
251
251
|
onScroll() {
|
|
252
252
|
if (this.mode !== "auto") {
|
|
@@ -260,27 +260,27 @@ class x extends (Z = ae(oe(j)), ee = [N({ type: String, reflect: !0 })], te = [N
|
|
|
260
260
|
this.log("Animation ended - finalizing state"), this.active || (this.brandElement.style.visibility = "visible", this.done = !0);
|
|
261
261
|
}
|
|
262
262
|
get brandElement() {
|
|
263
|
-
return
|
|
263
|
+
return C(this, O) || (j(this, O, document.querySelector(this.brandSelector)), C(this, O) || this.warn(`Brand element not found using selector: ${this.brandSelector}`)), C(this, O);
|
|
264
264
|
}
|
|
265
265
|
render() {
|
|
266
266
|
const e = this.brandElement.getBoundingClientRect(), r = e.width / e.height;
|
|
267
|
-
this.style.setProperty("--auto-aspect-ratio", r.toString());
|
|
268
|
-
const
|
|
267
|
+
this.log("Setting Aspect ratio:", r), this.style.setProperty("--auto-aspect-ratio", r.toString());
|
|
268
|
+
const o = this.getBoundingClientRect();
|
|
269
269
|
if (!e)
|
|
270
|
-
return
|
|
270
|
+
return P`<div>No brand element found</div>`;
|
|
271
271
|
const a = {
|
|
272
272
|
"--orig-top": e.top + "px",
|
|
273
273
|
"--orig-left": e.left + "px",
|
|
274
274
|
"--orig-width": e.width + "px",
|
|
275
275
|
"--orig-height": e.height + "px",
|
|
276
|
-
"--self-top":
|
|
277
|
-
"--self-left":
|
|
278
|
-
"--self-width":
|
|
279
|
-
"--self-height":
|
|
276
|
+
"--self-top": o.top + "px",
|
|
277
|
+
"--self-left": o.left + "px",
|
|
278
|
+
"--self-width": o.width + "px",
|
|
279
|
+
"--self-height": o.height + "px"
|
|
280
280
|
};
|
|
281
|
-
return
|
|
282
|
-
class="wrapper ${this.active ? "" : "inactive"} ${this.done ? "done" : ""}"
|
|
283
|
-
style=${
|
|
281
|
+
return P`<div
|
|
282
|
+
class="wrapper ${this.active ? "" : "inactive"} ${this.done ? "done" : ""} ${this.initialized ? "initialized" : ""}"
|
|
283
|
+
style=${he(a)}
|
|
284
284
|
@transitionend=${() => this.onanimationEnd()}
|
|
285
285
|
>
|
|
286
286
|
<slot></slot>
|
|
@@ -288,36 +288,45 @@ class x extends (Z = ae(oe(j)), ee = [N({ type: String, reflect: !0 })], te = [N
|
|
|
288
288
|
}
|
|
289
289
|
update(e) {
|
|
290
290
|
var r;
|
|
291
|
-
e.has("active") && this.active === !0 && ((r =
|
|
291
|
+
e.has("active") && this.active === !0 && ((r = C(this, O)) == null || r.style.setProperty("visibility", "hidden"), this.done = !1), super.update(e);
|
|
292
292
|
}
|
|
293
293
|
async firstUpdated() {
|
|
294
|
-
await
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
294
|
+
this.log("Waiting for Brand element loading...", this.brandElement), await se(this.brandElement), this.log("Brand element loaded:", this.brandElement), this.initialized = !0;
|
|
295
|
+
}
|
|
296
|
+
async connectedCallback() {
|
|
297
|
+
if (await H(), super.connectedCallback(), C(this, q)) {
|
|
298
|
+
j(this, q, !1);
|
|
299
|
+
const e = this.brandElement;
|
|
300
|
+
if (this.log("first connectedCallback() on Brand element:", e), !e) {
|
|
301
|
+
this.warn(`Brand element not found using selector: ${this.brandSelector}`);
|
|
302
|
+
return;
|
|
303
|
+
}
|
|
304
|
+
const r = e.cloneNode(!0);
|
|
305
|
+
this.appendChild(r);
|
|
299
306
|
}
|
|
300
|
-
|
|
301
|
-
this.appendChild(r), this.onScroll();
|
|
307
|
+
this.onScroll();
|
|
302
308
|
}
|
|
303
309
|
}
|
|
304
|
-
|
|
305
|
-
ut = /* @__PURE__ */ new WeakMap();
|
|
310
|
+
v = He(et);
|
|
306
311
|
_t = /* @__PURE__ */ new WeakMap();
|
|
307
|
-
ft = /* @__PURE__ */ new WeakMap();
|
|
308
312
|
gt = /* @__PURE__ */ new WeakMap();
|
|
313
|
+
bt = /* @__PURE__ */ new WeakMap();
|
|
314
|
+
mt = /* @__PURE__ */ new WeakMap();
|
|
315
|
+
wt = /* @__PURE__ */ new WeakMap();
|
|
316
|
+
q = /* @__PURE__ */ new WeakMap();
|
|
309
317
|
O = /* @__PURE__ */ new WeakMap();
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
+
T(v, 4, "brandSelector", ae, $, _t);
|
|
319
|
+
T(v, 4, "active", ie, $, gt);
|
|
320
|
+
T(v, 4, "mode", re, $, bt);
|
|
321
|
+
T(v, 4, "done", ee, $, mt);
|
|
322
|
+
T(v, 4, "initialized", te, $, wt);
|
|
323
|
+
T(v, 1, "onScroll", Zt, $);
|
|
324
|
+
$ = T(v, 0, "NteNavBrandRelocator", ne, $);
|
|
325
|
+
$.styles = [J(Ye)];
|
|
326
|
+
b(v, 1, $);
|
|
318
327
|
console.log("Loading nte-nav...");
|
|
319
328
|
export {
|
|
320
|
-
|
|
321
|
-
|
|
329
|
+
x as NteNav,
|
|
330
|
+
$ as NteNavBrandRelocator,
|
|
322
331
|
U as NteNavbar
|
|
323
332
|
};
|