@nextrap/nte-nav 1.1.33 → 1.1.35
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 +20 -0
- package/components/nte-nav-brand-relocator/nte-nav-brand-relocator.d.ts +1 -2
- package/index.css +1 -1
- package/index.js +53 -50
- package/lib/nte-nav.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
## 1.1.35 (2026-03-12)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- use aliasesExclude to avoid internal relative paths ([6b8123e](https://github.com/nextrap/nextrap-monorepo/commit/6b8123e))
|
|
6
|
+
|
|
7
|
+
### ❤️ Thank You
|
|
8
|
+
|
|
9
|
+
- Enzo Volkmann @evolkmann
|
|
10
|
+
|
|
11
|
+
## 1.1.34 (2026-03-12)
|
|
12
|
+
|
|
13
|
+
### 🩹 Fixes
|
|
14
|
+
|
|
15
|
+
- use aliasesExclude to avoid internal relative paths ([6b8123e](https://github.com/nextrap/nextrap-monorepo/commit/6b8123e))
|
|
16
|
+
|
|
17
|
+
### ❤️ Thank You
|
|
18
|
+
|
|
19
|
+
- Enzo Volkmann @evolkmann
|
|
20
|
+
|
|
1
21
|
## 1.1.33 (2026-03-03)
|
|
2
22
|
|
|
3
23
|
### 🩹 Fixes
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
declare const NteNavBrandRelocator_base: typeof LitElement & (abstract new (...args: any[]) => import('@trunkjs/browser-utils').LoggerMixinInterface);
|
|
1
|
+
declare const NteNavBrandRelocator_base: any;
|
|
3
2
|
export declare class NteNavBrandRelocator extends NteNavBrandRelocator_base {
|
|
4
3
|
#private;
|
|
5
4
|
static styles: import('lit').CSSResult[];
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.nav-vertical{--border-color: none;--text-color: var(--nt-text);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary)}.nav-vertical.style-primary{--border-color: var(--nt-white);--text-color: var(--nt-text-on-primary);--hover-color: var(--nt-primary-emphasis);--hover-text-color: var(--nt-white)}.nav-vertical.style-primary ul>li{border-top:1px solid var(--border-color)}.nav-vertical.style-primary ul>li:last-child{border-bottom:1px solid var(--border-color)}.nav-vertical{width:100%}.nav-vertical ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;gap:.15rem;position:relative}.nav-vertical ul>li{position:relative;display:block}.nav-vertical ul>li>a{display:block;padding:.65em 1.1em;color:var(--text-color);text-decoration:none;transition:background var(--transition),color var(--transition);font-weight:500}.nav-vertical ul>li>a.active,.nav-vertical ul>li>a:active{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:hover{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:after{content:"";display:inline-block;margin-left:.47em;margin-bottom:.08em;border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) scale(.8);opacity:0;transition:opacity var(--transition),transform var(--transition)}.nav-vertical ul>li:has(ul)>a:after{opacity:.55}.nav-vertical ul>li:active>a:after,.nav-vertical ul>li:focus-within>a:after{transform:rotate(135deg) scale(.85)}.nav-vertical ul>li:focus-within>ul{display:flex}.nav-vertical ul>li>ul{list-style:none;margin:0;padding:0 0 0 .7em;display:none;flex-direction:column}li>.nav-vertical ul>li>ul,.nav-vertical ul>li>ul:focus
|
|
1
|
+
@charset "UTF-8";.nav-vertical{--border-color: none;--text-color: var(--nt-text);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary)}.nav-vertical.style-primary{--border-color: var(--nt-white);--text-color: var(--nt-text-on-primary);--hover-color: var(--nt-primary-emphasis);--hover-text-color: var(--nt-white)}.nav-vertical.style-primary ul>li{border-top:1px solid var(--border-color)}.nav-vertical.style-primary ul>li:last-child{border-bottom:1px solid var(--border-color)}.nav-vertical{width:100%}.nav-vertical ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;width:100%;gap:.15rem;position:relative}.nav-vertical ul>li{position:relative;display:block}.nav-vertical ul>li>a{display:block;padding:.65em 1.1em;color:var(--text-color);text-decoration:none;transition:background var(--transition),color var(--transition);font-weight:500}.nav-vertical ul>li>a.active,.nav-vertical ul>li>a:active{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:hover{background-color:var(--hover-color);color:var(--hover-text-color)}.nav-vertical ul>li>a:after{content:"";display:inline-block;margin-left:.47em;margin-bottom:.08em;border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) scale(.8);opacity:0;transition:opacity var(--transition),transform var(--transition)}.nav-vertical ul>li:has(ul)>a:after{opacity:.55}.nav-vertical ul>li:active>a:after,.nav-vertical ul>li:focus-within>a:after{transform:rotate(135deg) scale(.85)}.nav-vertical ul>li:focus-within>ul{display:flex}.nav-vertical ul>li>ul{list-style:none;margin:0;padding:0 0 0 .7em;display:none;flex-direction:column}li>.nav-vertical ul>li>ul,.nav-vertical ul>li>ul:has(a:focus){display:flex}.nav-vertical ul>li>ul>li>a{padding:.55em 1.1em;font-size:.95em;font-weight:400;color:var(--text-color);transition:background var(--transition),color var(--transition)}.nav-vertical ul>li>ul>li>a:hover{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal.pos-start{--justify-content: flex-start}.nav-horizontal.pos-end{--justify-content: flex-end}.nav-horizontal.pos-center{--justify-content: center}.nav-horizontal.pos-stretch>ul{display:flex}.nav-horizontal.pos-stretch>ul>li{flex-grow:1}.nav-horizontal.pos-stretch>ul>li>a{width:100%;justify-content:center}.nav-horizontal{--item-padding: .65em 1.1em;--padding: 0}.nav-horizontal.size-sm{--item-padding: 2px 15px;--item-margin: 2px .2em;--font-size: .6rem}.nav-horizontal.style-pills{--pill-background: rgba(var(--nt-primary-rgb), .8);--pill-radius: .5em;--pill-text-color: var(--nt-text-on-primary);--pill-hover-background: rgba(var(--nt-primary-rgb), 1)}.nav-horizontal.style-pills>ul>li>a{background:var(--pill-background);border-radius:var(--pill-radius);--text-color: var(--pill-text-color);transition:background var(--transition),color var(--transition)}.nav-horizontal.style-pills>ul>li>a:hover,.nav-horizontal.style-pills>ul>li>a:focus{background:var(--pill-hover-background);--font-color: var(--pill-text-color)}.nav-horizontal.style-pills>ul>li>a.active,.nav-horizontal.style-pills>ul>li>a:active{background:var(--pill-hover-background);--font-color: var(--pill-text-color)}.nav-horizontal.style-undecorated{--item-padding: .65em 1.1em;--item-margin: 0;--text-color: var(--nt-text);--hover-color: transparent;--submenu-hover-color: var(--nt-primary);--hover-text-color: var(--nt-text);--submenu-hover-text-color: var(--nt-primary);--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text)}.nav-horizontal.style-undecorated a,.nav-horizontal.style-undecorated a>*{color:rgb(from var(--text-color) r g b/var(--default-alpha));transition:color var(--transition)}.nav-horizontal.style-undecorated a:hover,.nav-horizontal.style-undecorated a:hover>*{color:rgb(from var(--text-color) r g b/1)}.nav-horizontal ul{list-style:none;padding:var(--padding);margin:0;display:flex;flex-direction:row;align-items:center;position:relative;height:100%;justify-content:var(--justify-content)}.nav-horizontal ul>li,.nav-horizontal ul li{position:relative;display:flex;align-items:center;height:inherit}.nav-horizontal ul>li>a,.nav-horizontal ul li>a{display:flex;align-items:center;margin:var(--item-margin, 0);height:100%;padding:var(--item-padding);gap:.5em;text-decoration:none;color:var(--text-color);transition:background var(--transition),color var(--transition);font-weight:500}.nav-horizontal ul>li>a.active,.nav-horizontal ul>li>a:active,.nav-horizontal ul li>a.active,.nav-horizontal ul li>a:active{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal ul>li>a:hover,li:hover>.nav-horizontal ul>li>a,.nav-horizontal ul li>a:hover,li:hover>.nav-horizontal ul li>a{background:var(--hover-color);color:var(--hover-text-color)}.nav-horizontal ul>li>a:after,.nav-horizontal ul li>a:after{content:"";display:none;margin-left:.47em;margin-bottom:.08em;border:solid currentColor;border-width:0 2px 2px 0;padding:3px;transform:rotate(45deg) scale(.8);opacity:0;transition:opacity var(--transition),transform var(--transition)}.nav-horizontal ul>li:has(ul)>a:after,.nav-horizontal ul li:has(ul)>a:after{opacity:.55;display:inline-block}.nav-horizontal ul>li:active>a:after,.nav-horizontal ul>li:has(a:focus)>a:after,.nav-horizontal ul li:active>a:after,.nav-horizontal ul li:has(a:focus)>a:after{transform:rotate(-135deg) scale(.85)}.nav-horizontal ul>li>ul,.nav-horizontal ul li>ul{display:block;visibility:hidden;opacity:0;pointer-events:none;min-width:11rem;background:var(--submenu-bg)!important;position:absolute;top:100%;left:0}.nav-horizontal ul>li>ul:last-child,.nav-horizontal ul li>ul:last-child{right:0;left:auto}.nav-horizontal ul>li>ul,.nav-horizontal ul li>ul{margin-top:.3em;flex-direction:column;z-index:3;transition:opacity var(--transition),transform var(--transition),visibility var(--transition);transform:translateY(-.7em)}.nav-horizontal ul>li>ul:hover,.nav-horizontal ul>li>ul:has(a:focus),.nav-horizontal ul li>ul:hover,.nav-horizontal ul li>ul:has(a:focus){visibility:visible;opacity:1;pointer-events:all;transform:translateY(0)}.nav-horizontal ul>li>ul>li,.nav-horizontal ul li>ul>li{display:flex;height:auto;background:var(--submenu-bg)}.nav-horizontal ul>li>ul>li>a,.nav-horizontal ul li>ul>li>a{display:block;width:100%;color:var(--text-color);padding:.63em 1.3em;font-size:.99em;font-weight:400;height:auto;transition:background var(--transition),color var(--transition)}.nav-horizontal ul>li>ul>li>a:hover,.nav-horizontal ul li>ul>li>a:hover{background:var(--submenu-hover-color);color:var(--submenu-hover-text-color)}.nav-horizontal ul>li:has(a:focus)>ul,.nav-horizontal ul li:has(a:focus)>ul{visibility:visible;opacity:1;pointer-events:all;transform:translateY(0)}nte-navbar.is-scrolled{--bg: rgb(from var(--nt-white) r g b / 1)}nte-navbar.autoborder{--border-color: var(--nt-light)}nte-navbar.autoborder.is-scrolled::part(navbar){border-bottom:1px solid rgb(from var(--border-color) r g b/.1)}nte-navbar.autoshadow{--shadow-color: var(--nt-dark);--shadow: 0 2px 4px rgb(from var(--shadow-color) r g b / .1)}nte-navbar.autoshadow::part(navbar){transition:box-shadow .5s ease-in-out}nte-navbar.autoshadow.is-scrolled::part(navbar){box-shadow:var(--shadow)}nte-navbar.fixed::part(navbar){position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar.autohide::part(navbar){transition:transform .3s ease-in-out}nte-navbar.autohide.state-pre-scrolled.state-scrolling-down::part(navbar){transform:translateY(-100%)}nte-navbar.autohide.state-pre-scrolled.state-scrolling-up::part(navbar){transform:translateY(0);position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar.autohide.state-scrolled::part(navbar){position:fixed;top:0;left:0;opacity:1;width:100%;transform:translateY(-100%)}nte-navbar.autohide.state-scrolled.state-scrolling-up::part(navbar){transform:translateY(0);position:fixed;top:0;left:0;opacity:1;width:100%}nte-navbar-line [slot=brand]{height:100%;display:flex;align-items:center}nte-navbar-line [slot=brand] img{height:var(--brand-height);max-height:100%;max-width:100%;width:auto;object-fit:contain}nte-navbar-line [slot=brand] a,nte-navbar-line [slot=brand] div{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-decoration:none;width:100%}nte-navbar-line.zoom-brand{--brand-zoom-level: 1.7;--brand-translate: 20px}nte-navbar-line.zoom-brand [slot=brand] img{transition:transform .2s ease-in-out;transform:scale(var(--brand-zoom-level)) translateY(var(--brand-translate))}nte-navbar-line.zoom-brand.is-scrolled [slot=brand] img{transform:translateY(0) scale(1)}
|
package/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isBiggerThanBreakpoint as St, waitForDomContentLoaded as j, Debouncer as oe, SlotTool as Pt } from "@nextrap/nt-framework";
|
|
2
2
|
import "@nextrap/nte-offcanvas";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { sleep as q, EventBindingsMixin as se, LoggingMixin as le, Listen as de, waitForLoad as ce, create_element as he } from "@trunkjs/browser-utils";
|
|
4
|
+
import { html as Y, unsafeCSS as H, LitElement as J } from "lit";
|
|
5
|
+
import { customElement as K, property as z, state as Q } from "lit/decorators.js";
|
|
5
6
|
import { createRef as $t, ref as xt } from "lit/directives/ref.js";
|
|
6
|
-
import { EventBindingsMixin as se, LoggingMixin as le, Listen as de, waitForLoad as ce, sleep as K, create_element as he } from "@trunkjs/browser-utils";
|
|
7
7
|
import { styleMap as pe } from "lit/directives/style-map.js";
|
|
8
8
|
import "@nextrap/nte-burger";
|
|
9
9
|
const ve = ":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);--submenu-hover-text-color: var(--nt-primary);--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)}";
|
|
@@ -23,8 +23,8 @@ var ue = Object.create, rt = Object.defineProperty, fe = Object.getOwnPropertyDe
|
|
|
23
23
|
p = be(i, r, m = {}, t[3], I), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => we(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? Et : ye)(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 ? A(s) && (i > 4 ? E.unshift(s) : i ? d ? n = s : c[k] = s : a = s) : typeof s != "object" || s === null ? M("Object expected") : (A(h = s.get) && (c.get = h), A(h = s.set) && (c.set = h), A(h = s.init) && E.unshift(h));
|
|
24
24
|
return i || me(t, a), c && rt(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
25
25
|
}, it = (t, e, r) => e.has(t) || M("Cannot " + r), we = (t, e) => Object(e) !== e ? M('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)), R = (t, e, r) => e.has(t) ? M("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), ye = (t, e, r) => (it(t, e, "access private method"), r), Lt, Bt, It, Rt, At, V, Dt, u, at, nt, ot, st, lt;
|
|
26
|
-
Dt = [
|
|
27
|
-
class x extends (V =
|
|
26
|
+
Dt = [K("nte-nav")];
|
|
27
|
+
class x extends (V = J, At = [z({ type: String, reflect: !0 })], Rt = [z({ type: String, reflect: !0 })], It = [z({ type: String, reflect: !0, attribute: "transfer-to" })], Bt = [z({ type: String, reflect: !1, attribute: "data-group-name" })], Lt = [Q()], V) {
|
|
28
28
|
constructor() {
|
|
29
29
|
super(), R(this, at, S(u, 8, this, "slave")), S(u, 11, this), R(this, nt, S(u, 12, this, "99999px")), S(u, 15, this), R(this, ot, S(u, 16, this, "")), S(u, 19, this), R(this, st, S(u, 20, this, "")), S(u, 23, this), R(this, lt, S(u, 24, this, !1)), S(u, 27, this);
|
|
30
30
|
}
|
|
@@ -90,10 +90,13 @@ class x extends (V = H, At = [z({ type: String, reflect: !0 })], Rt = [z({ type:
|
|
|
90
90
|
const r = this.classList;
|
|
91
91
|
!r.contains("nav-vertical") && !r.contains("nav-horizontal") && r.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
|
|
92
92
|
}
|
|
93
|
+
updateTransferState() {
|
|
94
|
+
St(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
95
|
+
}
|
|
93
96
|
async connectedCallback() {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
})));
|
|
97
|
+
super.connectedCallback(), this.mode !== "slave" && (this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (St(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (e) => {
|
|
98
|
+
this.updateTransferState();
|
|
99
|
+
}))), await j(), this.updateTransferState(), await q(3e3), this.updateTransferState());
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
u = ge(V);
|
|
@@ -108,29 +111,29 @@ W(u, 4, "transferTo", It, x, ot);
|
|
|
108
111
|
W(u, 4, "dataGroupName", Bt, x, st);
|
|
109
112
|
W(u, 4, "_isTransferred", Lt, x, lt);
|
|
110
113
|
x = W(u, 0, "NteNav", Dt, x);
|
|
111
|
-
x.styles = [
|
|
114
|
+
x.styles = [H(ve)];
|
|
112
115
|
S(u, 1, x);
|
|
113
116
|
const Se = "*,*: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}";
|
|
114
117
|
var $e = Object.create, dt = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, Ft = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), L = (t) => {
|
|
115
118
|
throw TypeError(t);
|
|
116
|
-
}, ke = (t, e, r) => e in t ? dt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r,
|
|
119
|
+
}, ke = (t, e, r) => e in t ? dt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Tt = (t, e) => dt(t, "name", { value: e, configurable: !0 }), Ee = (t) => [, , , $e((t == null ? void 0 : t[Ft("metadata")]) ?? null)], Yt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], D = (t) => t !== void 0 && typeof t != "function" ? L("Function expected") : t, ze = (t, e, r, o, a) => ({ kind: Yt[t], name: e, metadata: o, addInitializer: (n) => r._ ? L("Already initialized") : a.push(D(n || null)) }), Te = (t, e) => ke(e, Ft("metadata"), t[3]), X = (t, e, r, o) => {
|
|
117
120
|
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);
|
|
118
121
|
return o;
|
|
119
122
|
}, Gt = (t, e, r, o, a, n) => {
|
|
120
123
|
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] = []), I = t[f] || (t[f] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && xe(i < 4 ? a : { get [r]() {
|
|
121
|
-
return
|
|
124
|
+
return Ct(this, n);
|
|
122
125
|
}, set [r](l) {
|
|
123
|
-
return
|
|
126
|
+
return Ot(this, n, l);
|
|
124
127
|
} }, r));
|
|
125
|
-
i ? d && i < 4 &&
|
|
128
|
+
i ? d && i < 4 && Tt(n, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Tt(a, r);
|
|
126
129
|
for (var w = o.length - 1; w >= 0; w--)
|
|
127
|
-
p = ze(i, r, m = {}, t[3], I), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) =>
|
|
128
|
-
return i ||
|
|
129
|
-
}, ct = (t, e, r) => e.has(t) || L("Cannot " + r),
|
|
130
|
-
qt = [
|
|
131
|
-
class G extends (Z =
|
|
130
|
+
p = ze(i, r, m = {}, t[3], I), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Ce(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? Ct : Ne)(l, a, i ^ 4 ? n : c.get) : (l) => l[r]), i > 2 && (_.set = d ? (l, y) => Ot(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));
|
|
131
|
+
return i || Te(t, a), c && dt(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
132
|
+
}, ct = (t, e, r) => e.has(t) || L("Cannot " + r), Ce = (t, e) => Object(e) !== e ? L('Cannot use the "in" operator on this value') : t.has(e), Ct = (t, e, r) => (ct(t, e, "read from private field"), r ? r.call(t) : e.get(t)), Oe = (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), Ot = (t, e, r, o) => (ct(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r), Ne = (t, e, r) => (ct(t, e, "access private method"), r), Ut, Z, qt, P, ht;
|
|
133
|
+
qt = [K("nte-navbar")];
|
|
134
|
+
class G extends (Z = J, Ut = [z({ type: Number, attribute: "scroll-threshold", reflect: !0 })], Z) {
|
|
132
135
|
constructor() {
|
|
133
|
-
super(), this.navbarRef = $t(), this.spacerRef = $t(),
|
|
136
|
+
super(), this.navbarRef = $t(), this.spacerRef = $t(), Oe(this, ht, X(P, 8, this, 0)), X(P, 11, this), this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = void 0, this._debouncer = new oe(100, 300), document.addEventListener(
|
|
134
137
|
"scroll",
|
|
135
138
|
async () => {
|
|
136
139
|
this.updateScrollState();
|
|
@@ -146,11 +149,11 @@ class G extends (Z = H, Ut = [z({ type: Number, attribute: "scroll-threshold", r
|
|
|
146
149
|
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;
|
|
147
150
|
}
|
|
148
151
|
async connectedCallback() {
|
|
149
|
-
this.updateScrollState(), await
|
|
152
|
+
this.updateScrollState(), await j(), super.connectedCallback();
|
|
150
153
|
}
|
|
151
154
|
// Adjust the spacer height on every render
|
|
152
155
|
async updated(e) {
|
|
153
|
-
await
|
|
156
|
+
await j(), super.updated(e);
|
|
154
157
|
}
|
|
155
158
|
firstUpdated(e) {
|
|
156
159
|
Pt.observeEmptySlots(this);
|
|
@@ -175,7 +178,7 @@ P = Ee(Z);
|
|
|
175
178
|
ht = /* @__PURE__ */ new WeakMap();
|
|
176
179
|
Gt(P, 4, "scrollThreshold", Ut, G, ht);
|
|
177
180
|
G = Gt(P, 0, "NteNavbar", qt, G);
|
|
178
|
-
G.styles = [
|
|
181
|
+
G.styles = [H(Se)];
|
|
179
182
|
X(P, 1, G);
|
|
180
183
|
const Pe = "*,*: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}:host(.brand-center) #container{justify-content:space-between;position:relative}:host(.brand-center) #container #brand{justify-content:center;width:100%}:host(.brand-center) #container #nav{position:absolute;right:0;top:0;bottom:0}#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}";
|
|
181
184
|
var Me = Object.create, pt = Object.defineProperty, We = Object.getOwnPropertyDescriptor, jt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), Ht = (t) => {
|
|
@@ -190,8 +193,8 @@ var Me = Object.create, pt = Object.defineProperty, We = Object.getOwnPropertyDe
|
|
|
190
193
|
m = Ae(p, r, s = {}, t[3], g), h = (0, o[f])(a, m), s._ = 1, Jt(h) && (a = h);
|
|
191
194
|
return De(t, a), d && pt(a, r, d), _ ? p ^ 4 ? n : d : a;
|
|
192
195
|
}, Kt, vt, Qt;
|
|
193
|
-
Kt = [
|
|
194
|
-
const yt = class yt extends (Qt =
|
|
196
|
+
Kt = [K("nte-navbar-line")];
|
|
197
|
+
const yt = class yt extends (Qt = J) {
|
|
195
198
|
constructor() {
|
|
196
199
|
super(...arguments), this._isScrolled = !1;
|
|
197
200
|
}
|
|
@@ -223,7 +226,7 @@ const yt = class yt extends (Qt = H) {
|
|
|
223
226
|
`;
|
|
224
227
|
}
|
|
225
228
|
};
|
|
226
|
-
yt.styles = [
|
|
229
|
+
yt.styles = [H(Pe)];
|
|
227
230
|
let U = yt;
|
|
228
231
|
vt = Ie(Qt);
|
|
229
232
|
U = Ye(vt, 0, "NteNavbarLine", Kt, U);
|
|
@@ -231,24 +234,24 @@ Fe(vt, 1, U);
|
|
|
231
234
|
const Ge = ":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}";
|
|
232
235
|
var Ue = Object.create, ut = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, Vt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), B = (t) => {
|
|
233
236
|
throw TypeError(t);
|
|
234
|
-
}, je = (t, e, r) => e in t ? ut(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r,
|
|
237
|
+
}, je = (t, e, r) => e in t ? ut(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Nt = (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"], F = (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(F(n || null)) }), Ke = (t, e) => je(e, Vt("metadata"), t[3]), b = (t, e, r, o) => {
|
|
235
238
|
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);
|
|
236
239
|
return o;
|
|
237
|
-
},
|
|
240
|
+
}, C = (t, e, r, o, a, n) => {
|
|
238
241
|
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] = []), I = t[f] || (t[f] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && qe(i < 4 ? a : { get [r]() {
|
|
239
|
-
return
|
|
242
|
+
return N(this, n);
|
|
240
243
|
}, set [r](l) {
|
|
241
244
|
return tt(this, n, l);
|
|
242
245
|
} }, r));
|
|
243
|
-
i ? d && i < 4 &&
|
|
246
|
+
i ? d && i < 4 && Nt(n, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Nt(a, r);
|
|
244
247
|
for (var w = o.length - 1; w >= 0; w--)
|
|
245
|
-
p = Je(i, r, m = {}, t[3], I), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Qe(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ?
|
|
248
|
+
p = Je(i, r, m = {}, t[3], I), i && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Qe(a, l) : (l) => r in l }, i ^ 3 && (_.get = d ? (l) => (i ^ 1 ? N : Ve)(l, a, i ^ 4 ? n : c.get) : (l) => l[r]), i > 2 && (_.set = d ? (l, y) => tt(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 ? B("Object expected") : (F(h = s.get) && (c.get = h), F(h = s.set) && (c.set = h), F(h = s.init) && E.unshift(h));
|
|
246
249
|
return i || Ke(t, a), c && ut(a, r, c), d ? i ^ 4 ? n : c : a;
|
|
247
|
-
}, ft = (t, e, r) => e.has(t) || B("Cannot " + r), Qe = (t, e) => Object(e) !== e ? B('Cannot use the "in" operator on this value') : t.has(e),
|
|
248
|
-
ne = [
|
|
249
|
-
class $ extends (et = se(le(
|
|
250
|
+
}, ft = (t, e, r) => e.has(t) || B("Cannot " + r), Qe = (t, e) => Object(e) !== e ? B('Cannot use the "in" operator on this value') : t.has(e), N = (t, e, r) => (ft(t, e, "read from private field"), r ? r.call(t) : e.get(t)), O = (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), tt = (t, e, r, o) => (ft(t, e, "write to private field"), o ? o.call(t, r) : e.set(t, r), r), Ve = (t, e, r) => (ft(t, e, "access private method"), r), Zt, te, ee, re, ie, ae, et, ne, v, _t, gt, bt, mt, wt, T;
|
|
251
|
+
ne = [K("nte-nav-brand-relocator")];
|
|
252
|
+
class $ extends (et = se(le(J)), ae = [z({ type: String, reflect: !0 })], ie = [z({ type: Boolean, reflect: !0 })], re = [z({ type: String, reflect: !0 })], ee = [Q()], te = [Q()], Zt = [de("scroll", { target: "window", options: { passive: !0 } })], et) {
|
|
250
253
|
constructor() {
|
|
251
|
-
super(...arguments), b(v, 5, this),
|
|
254
|
+
super(...arguments), b(v, 5, this), O(this, _t, b(v, 8, this, ".brand-image")), b(v, 11, this), O(this, gt, b(v, 12, this, null)), b(v, 15, this), O(this, bt, b(v, 16, this, "auto")), b(v, 19, this), O(this, mt, b(v, 20, this, !1)), b(v, 23, this), O(this, wt, b(v, 24, this, !1)), b(v, 27, this), O(this, T, null);
|
|
252
255
|
}
|
|
253
256
|
onScroll() {
|
|
254
257
|
if (this.mode !== "auto") {
|
|
@@ -262,7 +265,7 @@ class $ extends (et = se(le(H)), ae = [z({ type: String, reflect: !0 })], ie = [
|
|
|
262
265
|
this.log("Animation ended - finalizing state"), this.active || (this.brandElement.style.visibility = "visible", this.done = !0);
|
|
263
266
|
}
|
|
264
267
|
get brandElement() {
|
|
265
|
-
return
|
|
268
|
+
return N(this, T) || (tt(this, T, document.querySelector(this.brandSelector)), N(this, T) || this.warn(`Brand element not found using selector: ${this.brandSelector}`)), N(this, T);
|
|
266
269
|
}
|
|
267
270
|
render() {
|
|
268
271
|
var a;
|
|
@@ -289,7 +292,7 @@ class $ extends (et = se(le(H)), ae = [z({ type: String, reflect: !0 })], ie = [
|
|
|
289
292
|
}
|
|
290
293
|
update(e) {
|
|
291
294
|
var r;
|
|
292
|
-
e.has("active") && this.active === !0 && ((r =
|
|
295
|
+
e.has("active") && this.active === !0 && ((r = N(this, T)) == null || r.style.setProperty("visibility", "hidden"), this.done = !1), super.update(e);
|
|
293
296
|
}
|
|
294
297
|
get ghostElement() {
|
|
295
298
|
return this.querySelector("img");
|
|
@@ -300,15 +303,15 @@ class $ extends (et = se(le(H)), ae = [z({ type: String, reflect: !0 })], ie = [
|
|
|
300
303
|
this.warn(`Brand element not found using selector: ${this.brandSelector}`);
|
|
301
304
|
return;
|
|
302
305
|
}
|
|
303
|
-
for (this.log("Waiting for Ghost element loading...", this.ghostElement), await ce(this.ghostElement), await
|
|
304
|
-
this.log("Waiting for Ghost element to have naturalWidth...", this.ghostElement), await
|
|
306
|
+
for (this.log("Waiting for Ghost element loading...", this.ghostElement), await ce(this.ghostElement), await q(10); !((r = this.ghostElement) != null && r.naturalWidth); )
|
|
307
|
+
this.log("Waiting for Ghost element to have naturalWidth...", this.ghostElement), await q(100);
|
|
305
308
|
for (; this.brandElement && !this.brandElement.getBoundingClientRect().width; )
|
|
306
|
-
this.log("Waiting for Brand element to have width...", this.brandElement), await
|
|
309
|
+
this.log("Waiting for Brand element to have width...", this.brandElement), await q(100);
|
|
307
310
|
const e = ((o = this.ghostElement) == null ? void 0 : o.naturalWidth) / ((a = this.ghostElement) == null ? void 0 : a.naturalHeight);
|
|
308
311
|
this.log("Setting Aspect ratio:", e), this.style.setProperty("--auto-aspect-ratio", e.toString()), this.log("Brand element is now loaded:", this.brandElement), this.initialized = !0, this.onScroll();
|
|
309
312
|
}
|
|
310
313
|
async connectedCallback() {
|
|
311
|
-
if (await
|
|
314
|
+
if (await j(), this.ghostElement === null) {
|
|
312
315
|
const e = this.brandElement;
|
|
313
316
|
if (this.log("first connectedCallback() on Brand element:", e), !e) {
|
|
314
317
|
this.warn(`Brand element not found using selector: ${this.brandSelector}`);
|
|
@@ -328,15 +331,15 @@ gt = /* @__PURE__ */ new WeakMap();
|
|
|
328
331
|
bt = /* @__PURE__ */ new WeakMap();
|
|
329
332
|
mt = /* @__PURE__ */ new WeakMap();
|
|
330
333
|
wt = /* @__PURE__ */ new WeakMap();
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
$ =
|
|
339
|
-
$.styles = [
|
|
334
|
+
T = /* @__PURE__ */ new WeakMap();
|
|
335
|
+
C(v, 4, "brandSelector", ae, $, _t);
|
|
336
|
+
C(v, 4, "active", ie, $, gt);
|
|
337
|
+
C(v, 4, "mode", re, $, bt);
|
|
338
|
+
C(v, 4, "done", ee, $, mt);
|
|
339
|
+
C(v, 4, "initialized", te, $, wt);
|
|
340
|
+
C(v, 1, "onScroll", Zt, $);
|
|
341
|
+
$ = C(v, 0, "NteNavBrandRelocator", ne, $);
|
|
342
|
+
$.styles = [H(Ge)];
|
|
340
343
|
b(v, 1, $);
|
|
341
344
|
console.log("Loading nte-nav...");
|
|
342
345
|
export {
|
package/lib/nte-nav.d.ts
CHANGED
|
@@ -21,5 +21,6 @@ export declare class NteNav extends LitElement {
|
|
|
21
21
|
transferToElement(targetElement: NteNav): void;
|
|
22
22
|
protected updated(_changedProperties: PropertyValues): void;
|
|
23
23
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
24
|
+
private updateTransferState;
|
|
24
25
|
connectedCallback(): Promise<void>;
|
|
25
26
|
}
|