@nextrap/nte-nav 1.1.36 → 1.1.40
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 +40 -0
- package/components/nte-nav-brand-relocator/nte-nav-brand-relocator.d.ts +2 -1
- package/index.css +1 -1
- package/index.js +211 -190
- package/lib/nte-nav.d.ts +9 -4
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,43 @@
|
|
|
1
|
+
## 1.1.40 (2026-04-14)
|
|
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.39 (2026-03-13)
|
|
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
|
+
|
|
21
|
+
## 1.1.38 (2026-03-13)
|
|
22
|
+
|
|
23
|
+
### 🩹 Fixes
|
|
24
|
+
|
|
25
|
+
- use aliasesExclude to avoid internal relative paths ([6b8123e](https://github.com/nextrap/nextrap-monorepo/commit/6b8123e))
|
|
26
|
+
|
|
27
|
+
### ❤️ Thank You
|
|
28
|
+
|
|
29
|
+
- Enzo Volkmann @evolkmann
|
|
30
|
+
|
|
31
|
+
## 1.1.37 (2026-03-13)
|
|
32
|
+
|
|
33
|
+
### 🩹 Fixes
|
|
34
|
+
|
|
35
|
+
- use aliasesExclude to avoid internal relative paths ([6b8123e](https://github.com/nextrap/nextrap-monorepo/commit/6b8123e))
|
|
36
|
+
|
|
37
|
+
### ❤️ Thank You
|
|
38
|
+
|
|
39
|
+
- Enzo Volkmann @evolkmann
|
|
40
|
+
|
|
1
41
|
## 1.1.36 (2026-03-12)
|
|
2
42
|
|
|
3
43
|
### 🩹 Fixes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
declare const NteNavBrandRelocator_base: typeof LitElement & (abstract new (...args: any[]) => import('@trunkjs/browser-utils').LoggerMixinInterface);
|
|
2
3
|
export declare class NteNavBrandRelocator extends NteNavBrandRelocator_base {
|
|
3
4
|
#private;
|
|
4
5
|
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
|
|
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.is-open>a:after{transform:rotate(135deg) scale(.85)}.nav-vertical ul>li.is-open>ul{display:flex}.nav-vertical ul>li>ul{list-style:none;margin:0;padding:0 0 0 .7em;display:none;flex-direction:column}.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.is-open>a:after,.nav-horizontal ul li.is-open>a:after{transform:rotate(-135deg) scale(.85)}.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(.is-open)>a:after,.nav-horizontal ul li:active>a:after,.nav-horizontal ul li:has(.is-open)>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(.is-open),.nav-horizontal ul li>ul:hover,.nav-horizontal ul li>ul:has(.is-open){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.is-open>ul,.nav-horizontal ul li.is-open>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,42 +1,57 @@
|
|
|
1
|
-
import { isBiggerThanBreakpoint as
|
|
1
|
+
import { isBiggerThanBreakpoint as Et, Debouncer as he, waitForDomContentLoaded as V, SlotTool as Lt } from "@nextrap/nt-framework";
|
|
2
|
+
import { nextrap_element as pe } from "@nextrap/nte-core";
|
|
2
3
|
import "@nextrap/nte-offcanvas";
|
|
3
|
-
import {
|
|
4
|
-
import { html as
|
|
5
|
-
import { customElement as
|
|
6
|
-
import { createRef as
|
|
7
|
-
import { styleMap as
|
|
4
|
+
import { Listen as X, waitForLoad as Wt, sleep as J, EventBindingsMixin as ve, LoggingMixin as ue, create_element as fe } from "@trunkjs/browser-utils";
|
|
5
|
+
import { html as q, unsafeCSS as K, LitElement as nt } from "lit";
|
|
6
|
+
import { customElement as Q, property as O, state as Z } from "lit/decorators.js";
|
|
7
|
+
import { createRef as Ct, ref as Ot } from "lit/directives/ref.js";
|
|
8
|
+
import { styleMap as _e } from "lit/directives/style-map.js";
|
|
8
9
|
import "@nextrap/nte-burger";
|
|
9
|
-
const
|
|
10
|
-
var
|
|
11
|
-
throw TypeError(
|
|
12
|
-
},
|
|
13
|
-
for (var a = 0, n = t
|
|
14
|
-
return
|
|
15
|
-
},
|
|
16
|
-
var h,
|
|
17
|
-
return
|
|
18
|
-
}, set [
|
|
19
|
-
return
|
|
20
|
-
} },
|
|
21
|
-
|
|
22
|
-
for (var
|
|
23
|
-
p =
|
|
24
|
-
return
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
const ge = ":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)}";
|
|
11
|
+
var be = Object.create, st = Object.defineProperty, me = Object.getOwnPropertyDescriptor, Bt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), I = (e) => {
|
|
12
|
+
throw TypeError(e);
|
|
13
|
+
}, we = (e, t, i) => t in e ? st(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, zt = (e, t) => st(e, "name", { value: t, configurable: !0 }), ye = (e) => [, , , be((e == null ? void 0 : e[Bt("metadata")]) ?? null)], It = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], F = (e) => e !== void 0 && typeof e != "function" ? I("Function expected") : e, Se = (e, t, i, s, a) => ({ kind: It[e], name: t, metadata: s, addInitializer: (n) => i._ ? I("Already initialized") : a.push(F(n || null)) }), $e = (e, t) => we(t, Bt("metadata"), e[3]), b = (e, t, i, s) => {
|
|
14
|
+
for (var a = 0, n = e[t >> 1], h = n && n.length; a < h; a++) t & 1 ? n[a].call(i) : s = n[a].call(i, s);
|
|
15
|
+
return s;
|
|
16
|
+
}, z = (e, t, i, s, a, n) => {
|
|
17
|
+
var h, o, w, p, _, r = t & 7, g = !!(t & 8), d = !!(t & 16), f = r > 3 ? e.length + 1 : r ? g ? 1 : 2 : 0, E = It[r + 5], C = r > 3 && (e[f - 1] = []), D = e[f] || (e[f] = []), c = r && (!d && !g && (a = a.prototype), r < 5 && (r > 3 || !d) && me(r < 4 ? a : { get [i]() {
|
|
18
|
+
return N(this, n);
|
|
19
|
+
}, set [i](l) {
|
|
20
|
+
return U(this, n, l);
|
|
21
|
+
} }, i));
|
|
22
|
+
r ? d && r < 4 && zt(n, (r > 2 ? "set " : r > 1 ? "get " : "") + i) : zt(a, i);
|
|
23
|
+
for (var y = s.length - 1; y >= 0; y--)
|
|
24
|
+
p = Se(r, i, w = {}, e[3], D), r && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => ke(a, l) : (l) => i in l }, r ^ 3 && (_.get = d ? (l) => (r ^ 1 ? N : xe)(l, a, r ^ 4 ? n : c.get) : (l) => l[i]), r > 2 && (_.set = d ? (l, S) => U(l, a, S, r ^ 4 ? n : c.set) : (l, S) => l[i] = S)), o = (0, s[y])(r ? r < 4 ? d ? n : c[E] : r > 4 ? void 0 : { get: c.get, set: c.set } : a, p), w._ = 1, r ^ 4 || o === void 0 ? F(o) && (r > 4 ? C.unshift(o) : r ? d ? n = o : c[E] = o : a = o) : typeof o != "object" || o === null ? I("Object expected") : (F(h = o.get) && (c.get = h), F(h = o.set) && (c.set = h), F(h = o.init) && C.unshift(h));
|
|
25
|
+
return r || $e(e, a), c && st(a, i, c), d ? r ^ 4 ? n : c : a;
|
|
26
|
+
}, ot = (e, t, i) => t.has(e) || I("Cannot " + i), ke = (e, t) => Object(t) !== t ? I('Cannot use the "in" operator on this value') : e.has(t), N = (e, t, i) => (ot(e, t, "read from private field"), i ? i.call(e) : t.get(e)), M = (e, t, i) => t.has(e) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), U = (e, t, i, s) => (ot(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i), xe = (e, t, i) => (ot(e, t, "access private method"), i), Rt, At, Dt, Ft, Yt, Gt, Ut, tt, qt, v, lt, dt, ct, ht, pt, k;
|
|
27
|
+
const Ee = {
|
|
28
|
+
eventBinding: !0,
|
|
29
|
+
logging: !0
|
|
30
|
+
};
|
|
31
|
+
qt = [Q("nte-nav")];
|
|
32
|
+
class $ extends (tt = pe(Ee), Ut = [O({ type: String, reflect: !0 })], Gt = [O({ type: String, reflect: !0 })], Yt = [O({ type: String, reflect: !0, attribute: "transfer-to" })], Ft = [O({ type: String, reflect: !1, attribute: "data-group-name" })], Dt = [Z()], At = [X("click", { target: "host" })], Rt = [X("click", { target: "window" })], tt) {
|
|
28
33
|
constructor() {
|
|
29
|
-
super(),
|
|
34
|
+
super(), b(v, 5, this), M(this, lt, b(v, 8, this, "slave")), b(v, 11, this), M(this, dt, b(v, 12, this, "99999px")), b(v, 15, this), M(this, ct, b(v, 16, this, "")), b(v, 19, this), M(this, ht, b(v, 20, this, "")), b(v, 23, this), M(this, pt, b(v, 24, this, !1)), b(v, 27, this), M(this, k, null);
|
|
35
|
+
}
|
|
36
|
+
handleClickOnSubmenu(t) {
|
|
37
|
+
var s;
|
|
38
|
+
const i = (s = t.target) == null ? void 0 : s.closest("li:has(ul)");
|
|
39
|
+
N(this, k) && (N(this, k).classList.remove("is-open"), U(this, k, null)), i && (U(this, k, i), i.classList.add("is-open"));
|
|
40
|
+
}
|
|
41
|
+
handleClickOutside(t) {
|
|
42
|
+
if (!N(this, k))
|
|
43
|
+
return;
|
|
44
|
+
N(this, k).contains(t.target) || (N(this, k).classList.remove("is-open"), U(this, k, null));
|
|
30
45
|
}
|
|
31
46
|
getOffcanvas() {
|
|
32
47
|
return this.transferTo ? document.querySelector(this.transferTo) : null;
|
|
33
48
|
}
|
|
34
49
|
getOffcanvasNav() {
|
|
35
|
-
const
|
|
36
|
-
return
|
|
50
|
+
const t = this.getOffcanvas();
|
|
51
|
+
return t ? t.querySelector("nte-nav") : null;
|
|
37
52
|
}
|
|
38
53
|
render() {
|
|
39
|
-
return
|
|
54
|
+
return q` <nav>
|
|
40
55
|
<div id="burger-wrapper" ?hidden=${!this._isTransferred}>
|
|
41
56
|
<slot
|
|
42
57
|
name="burger"
|
|
@@ -45,16 +60,19 @@ class x extends (V = H, Dt = [z({ type: String, reflect: !0 })], At = [z({ type:
|
|
|
45
60
|
id="burger"
|
|
46
61
|
class="burger"
|
|
47
62
|
@click=${() => {
|
|
48
|
-
var
|
|
49
|
-
return (
|
|
63
|
+
var t;
|
|
64
|
+
return (t = this.getOffcanvas()) == null ? void 0 : t.open();
|
|
50
65
|
}}
|
|
51
66
|
>
|
|
52
67
|
<!-- fallback icon -->
|
|
53
|
-
${this._isTransferred ?
|
|
68
|
+
${this._isTransferred ? q`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
|
|
54
69
|
<div id="text" part="menutext"><slot name="menu-text"></slot></div>
|
|
55
70
|
<nte-burger
|
|
56
71
|
part="burger"
|
|
57
|
-
label="Menu"
|
|
72
|
+
aria-label="Menu"
|
|
73
|
+
role="button"
|
|
74
|
+
aria-haspopup="menu"
|
|
75
|
+
aria-controls="main-menu"
|
|
58
76
|
data-group-name="${this.dataGroupName}"
|
|
59
77
|
id="open-burger"
|
|
60
78
|
onclick="this.open = true"
|
|
@@ -68,72 +86,75 @@ class x extends (V = H, Dt = [z({ type: String, reflect: !0 })], At = [z({ type:
|
|
|
68
86
|
</div>
|
|
69
87
|
</nav>`;
|
|
70
88
|
}
|
|
71
|
-
transferToElement(
|
|
89
|
+
transferToElement(t) {
|
|
72
90
|
var a;
|
|
73
|
-
const
|
|
74
|
-
if (
|
|
91
|
+
const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("#main-slot");
|
|
92
|
+
if (i === null)
|
|
75
93
|
return;
|
|
76
|
-
Array.from(
|
|
77
|
-
n instanceof HTMLElement &&
|
|
94
|
+
Array.from(i.assignedElements({ flatten: !0 })).forEach((n) => {
|
|
95
|
+
n instanceof HTMLElement && t.appendChild(n);
|
|
78
96
|
});
|
|
79
97
|
}
|
|
80
|
-
updated(
|
|
81
|
-
var
|
|
82
|
-
super.updated(
|
|
98
|
+
updated(t) {
|
|
99
|
+
var i, s;
|
|
100
|
+
super.updated(t), this._isTransferred ? this.transferToElement(
|
|
83
101
|
this.getOffcanvasNav() ?? (() => {
|
|
84
102
|
throw new Error("No offcanvas nav found");
|
|
85
103
|
})()
|
|
86
|
-
) : ((
|
|
104
|
+
) : ((i = this.getOffcanvasNav()) == null || i.transferToElement(this), (s = this.getOffcanvas()) == null || s.close());
|
|
87
105
|
}
|
|
88
|
-
firstUpdated(
|
|
89
|
-
super.firstUpdated(
|
|
90
|
-
const
|
|
91
|
-
!
|
|
106
|
+
firstUpdated(t) {
|
|
107
|
+
super.firstUpdated(t);
|
|
108
|
+
const i = this.classList;
|
|
109
|
+
!i.contains("nav-vertical") && !i.contains("nav-horizontal") && i.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
|
|
92
110
|
}
|
|
93
111
|
updateTransferState() {
|
|
94
|
-
|
|
112
|
+
Et(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
|
|
95
113
|
}
|
|
96
114
|
async connectedCallback() {
|
|
97
|
-
super.connectedCallback(), this.mode !== "slave" && (this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (
|
|
115
|
+
super.connectedCallback(), this.mode !== "slave" && (this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (Et(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (t) => {
|
|
98
116
|
this.updateTransferState();
|
|
99
|
-
}))), await
|
|
117
|
+
}))), await Wt(), this.updateTransferState(), await J(3e3), this.updateTransferState());
|
|
100
118
|
}
|
|
101
119
|
}
|
|
102
|
-
|
|
103
|
-
at = /* @__PURE__ */ new WeakMap();
|
|
104
|
-
nt = /* @__PURE__ */ new WeakMap();
|
|
105
|
-
ot = /* @__PURE__ */ new WeakMap();
|
|
106
|
-
st = /* @__PURE__ */ new WeakMap();
|
|
120
|
+
v = ye(tt);
|
|
107
121
|
lt = /* @__PURE__ */ new WeakMap();
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
},
|
|
133
|
-
|
|
134
|
-
|
|
122
|
+
dt = /* @__PURE__ */ new WeakMap();
|
|
123
|
+
ct = /* @__PURE__ */ new WeakMap();
|
|
124
|
+
ht = /* @__PURE__ */ new WeakMap();
|
|
125
|
+
pt = /* @__PURE__ */ new WeakMap();
|
|
126
|
+
k = /* @__PURE__ */ new WeakMap();
|
|
127
|
+
z(v, 4, "mode", Ut, $, lt);
|
|
128
|
+
z(v, 4, "breakpoint", Gt, $, dt);
|
|
129
|
+
z(v, 4, "transferTo", Yt, $, ct);
|
|
130
|
+
z(v, 4, "dataGroupName", Ft, $, ht);
|
|
131
|
+
z(v, 4, "_isTransferred", Dt, $, pt);
|
|
132
|
+
z(v, 1, "handleClickOnSubmenu", At, $);
|
|
133
|
+
z(v, 1, "handleClickOutside", Rt, $);
|
|
134
|
+
$ = z(v, 0, "NteNav", qt, $);
|
|
135
|
+
$.styles = [K(ge)];
|
|
136
|
+
b(v, 1, $);
|
|
137
|
+
const Ce = "*,*: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}";
|
|
138
|
+
var Oe = Object.create, vt = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, jt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), R = (e) => {
|
|
139
|
+
throw TypeError(e);
|
|
140
|
+
}, Te = (e, t, i) => t in e ? vt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, Tt = (e, t) => vt(e, "name", { value: t, configurable: !0 }), Ne = (e) => [, , , Oe((e == null ? void 0 : e[jt("metadata")]) ?? null)], Ht = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (e) => e !== void 0 && typeof e != "function" ? R("Function expected") : e, Pe = (e, t, i, s, a) => ({ kind: Ht[e], name: t, metadata: s, addInitializer: (n) => i._ ? R("Already initialized") : a.push(Y(n || null)) }), Me = (e, t) => Te(t, jt("metadata"), e[3]), et = (e, t, i, s) => {
|
|
141
|
+
for (var a = 0, n = e[t >> 1], h = n && n.length; a < h; a++) t & 1 ? n[a].call(i) : s = n[a].call(i, s);
|
|
142
|
+
return s;
|
|
143
|
+
}, Jt = (e, t, i, s, a, n) => {
|
|
144
|
+
var h, o, w, p, _, r = t & 7, g = !!(t & 8), d = !!(t & 16), f = r > 3 ? e.length + 1 : r ? g ? 1 : 2 : 0, E = Ht[r + 5], C = r > 3 && (e[f - 1] = []), D = e[f] || (e[f] = []), c = r && (!d && !g && (a = a.prototype), r < 5 && (r > 3 || !d) && ze(r < 4 ? a : { get [i]() {
|
|
145
|
+
return Nt(this, n);
|
|
146
|
+
}, set [i](l) {
|
|
147
|
+
return Pt(this, n, l);
|
|
148
|
+
} }, i));
|
|
149
|
+
r ? d && r < 4 && Tt(n, (r > 2 ? "set " : r > 1 ? "get " : "") + i) : Tt(a, i);
|
|
150
|
+
for (var y = s.length - 1; y >= 0; y--)
|
|
151
|
+
p = Pe(r, i, w = {}, e[3], D), r && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => Le(a, l) : (l) => i in l }, r ^ 3 && (_.get = d ? (l) => (r ^ 1 ? Nt : Be)(l, a, r ^ 4 ? n : c.get) : (l) => l[i]), r > 2 && (_.set = d ? (l, S) => Pt(l, a, S, r ^ 4 ? n : c.set) : (l, S) => l[i] = S)), o = (0, s[y])(r ? r < 4 ? d ? n : c[E] : r > 4 ? void 0 : { get: c.get, set: c.set } : a, p), w._ = 1, r ^ 4 || o === void 0 ? Y(o) && (r > 4 ? C.unshift(o) : r ? d ? n = o : c[E] = o : a = o) : typeof o != "object" || o === null ? R("Object expected") : (Y(h = o.get) && (c.get = h), Y(h = o.set) && (c.set = h), Y(h = o.init) && C.unshift(h));
|
|
152
|
+
return r || Me(e, a), c && vt(a, i, c), d ? r ^ 4 ? n : c : a;
|
|
153
|
+
}, ut = (e, t, i) => t.has(e) || R("Cannot " + i), Le = (e, t) => Object(t) !== t ? R('Cannot use the "in" operator on this value') : e.has(t), Nt = (e, t, i) => (ut(e, t, "read from private field"), i ? i.call(e) : t.get(e)), We = (e, t, i) => t.has(e) ? R("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), Pt = (e, t, i, s) => (ut(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i), Be = (e, t, i) => (ut(e, t, "access private method"), i), Kt, it, Qt, B, ft;
|
|
154
|
+
Qt = [Q("nte-navbar")];
|
|
155
|
+
class j extends (it = nt, Kt = [O({ type: Number, attribute: "scroll-threshold", reflect: !0 })], it) {
|
|
135
156
|
constructor() {
|
|
136
|
-
super(), this.navbarRef =
|
|
157
|
+
super(), this.navbarRef = Ct(), this.spacerRef = Ct(), We(this, ft, et(B, 8, this, 0)), et(B, 11, this), this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = void 0, this._debouncer = new he(100, 300), document.addEventListener(
|
|
137
158
|
"scroll",
|
|
138
159
|
async () => {
|
|
139
160
|
this.updateScrollState();
|
|
@@ -145,24 +166,24 @@ class G extends (Z = H, qt = [z({ type: Number, attribute: "scroll-threshold", r
|
|
|
145
166
|
return "nte-navbar";
|
|
146
167
|
}
|
|
147
168
|
updateScrollState() {
|
|
148
|
-
const
|
|
149
|
-
|
|
169
|
+
const t = window.scrollY;
|
|
170
|
+
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;
|
|
150
171
|
}
|
|
151
172
|
async connectedCallback() {
|
|
152
|
-
this.updateScrollState(), await
|
|
173
|
+
this.updateScrollState(), await V(), super.connectedCallback();
|
|
153
174
|
}
|
|
154
175
|
// Adjust the spacer height on every render
|
|
155
|
-
async updated(
|
|
156
|
-
await
|
|
176
|
+
async updated(t) {
|
|
177
|
+
await V(), super.updated(t);
|
|
157
178
|
}
|
|
158
|
-
firstUpdated(
|
|
159
|
-
|
|
179
|
+
firstUpdated(t) {
|
|
180
|
+
Lt.observeEmptySlots(this);
|
|
160
181
|
}
|
|
161
182
|
render() {
|
|
162
|
-
return
|
|
183
|
+
return q`
|
|
163
184
|
<div id="wrapper" part="wrapper">
|
|
164
|
-
<div id="spacer" part="spacer" ${
|
|
165
|
-
<div id="navbar" part="navbar" ${
|
|
185
|
+
<div id="spacer" part="spacer" ${Ot(this.spacerRef)}></div>
|
|
186
|
+
<div id="navbar" part="navbar" ${Ot(this.navbarRef)}>
|
|
166
187
|
<div id="brand" part="brand">
|
|
167
188
|
<slot name="brand"></slot>
|
|
168
189
|
</div>
|
|
@@ -174,27 +195,27 @@ class G extends (Z = H, qt = [z({ type: Number, attribute: "scroll-threshold", r
|
|
|
174
195
|
`;
|
|
175
196
|
}
|
|
176
197
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
const
|
|
184
|
-
var
|
|
185
|
-
throw TypeError(
|
|
186
|
-
},
|
|
187
|
-
for (var a = 0, n = t
|
|
188
|
-
return
|
|
189
|
-
},
|
|
190
|
-
var h,
|
|
191
|
-
|
|
192
|
-
for (var f =
|
|
193
|
-
|
|
194
|
-
return
|
|
195
|
-
},
|
|
196
|
-
|
|
197
|
-
const
|
|
198
|
+
B = Ne(it);
|
|
199
|
+
ft = /* @__PURE__ */ new WeakMap();
|
|
200
|
+
Jt(B, 4, "scrollThreshold", Kt, j, ft);
|
|
201
|
+
j = Jt(B, 0, "NteNavbar", Qt, j);
|
|
202
|
+
j.styles = [K(Ce)];
|
|
203
|
+
et(B, 1, j);
|
|
204
|
+
const Ie = "*,*: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}";
|
|
205
|
+
var Re = Object.create, _t = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, Vt = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), Xt = (e) => {
|
|
206
|
+
throw TypeError(e);
|
|
207
|
+
}, De = (e, t, i) => t in e ? _t(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, Fe = (e, t) => _t(e, "name", { value: t, configurable: !0 }), Ye = (e) => [, , , Re((e == null ? void 0 : e[Vt("metadata")]) ?? null)], Ge = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Zt = (e) => e !== void 0 && typeof e != "function" ? Xt("Function expected") : e, Ue = (e, t, i, s, a) => ({ kind: Ge[e], name: t, metadata: s, addInitializer: (n) => i._ ? Xt("Already initialized") : a.push(Zt(n || null)) }), qe = (e, t) => De(t, Vt("metadata"), e[3]), je = (e, t, i, s) => {
|
|
208
|
+
for (var a = 0, n = e[t >> 1], h = n && n.length; a < h; a++) n[a].call(i);
|
|
209
|
+
return s;
|
|
210
|
+
}, He = (e, t, i, s, a, n) => {
|
|
211
|
+
var h, o, w, p = t & 7, _ = !1, r = 0, g = e[r] || (e[r] = []), d = p && (a = a.prototype, p < 5 && (p > 3 || !_) && Ae(a, i));
|
|
212
|
+
Fe(a, i);
|
|
213
|
+
for (var f = s.length - 1; f >= 0; f--)
|
|
214
|
+
w = Ue(p, i, o = {}, e[3], g), h = (0, s[f])(a, w), o._ = 1, Zt(h) && (a = h);
|
|
215
|
+
return qe(e, a), d && _t(a, i, d), _ ? p ^ 4 ? n : d : a;
|
|
216
|
+
}, te, gt, ee;
|
|
217
|
+
te = [Q("nte-navbar-line")];
|
|
218
|
+
const xt = class xt extends (ee = nt) {
|
|
198
219
|
constructor() {
|
|
199
220
|
super(...arguments), this._isScrolled = !1;
|
|
200
221
|
}
|
|
@@ -202,17 +223,17 @@ const yt = class yt extends (Vt = H) {
|
|
|
202
223
|
return "nte-navbar-line";
|
|
203
224
|
}
|
|
204
225
|
updateScrollState() {
|
|
205
|
-
const
|
|
206
|
-
|
|
226
|
+
const t = window.scrollY;
|
|
227
|
+
t > 1 && !this._isScrolled ? (this.classList.add("is-scrolled"), this._isScrolled = !0) : t <= 1 && this._isScrolled && (this.classList.remove("is-scrolled"), this._isScrolled = !1);
|
|
207
228
|
}
|
|
208
229
|
connectedCallback() {
|
|
209
230
|
super.connectedCallback(), window.addEventListener("scroll", () => this.updateScrollState(), { passive: !0 });
|
|
210
231
|
}
|
|
211
|
-
async firstUpdated(
|
|
212
|
-
|
|
232
|
+
async firstUpdated(t) {
|
|
233
|
+
Lt.observeEmptySlots(this), this.updateScrollState();
|
|
213
234
|
}
|
|
214
235
|
render() {
|
|
215
|
-
return
|
|
236
|
+
return q`
|
|
216
237
|
<div id="main" part="main">
|
|
217
238
|
<div id="container" part="container">
|
|
218
239
|
<div id="brand" part="brand">
|
|
@@ -226,124 +247,124 @@ const yt = class yt extends (Vt = H) {
|
|
|
226
247
|
`;
|
|
227
248
|
}
|
|
228
249
|
};
|
|
229
|
-
|
|
230
|
-
let
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
const
|
|
235
|
-
var
|
|
236
|
-
throw TypeError(
|
|
237
|
-
},
|
|
238
|
-
for (var a = 0, n = t
|
|
239
|
-
return
|
|
240
|
-
},
|
|
241
|
-
var h,
|
|
242
|
-
return
|
|
243
|
-
}, set [
|
|
244
|
-
return
|
|
245
|
-
} },
|
|
246
|
-
|
|
247
|
-
for (var
|
|
248
|
-
p =
|
|
249
|
-
return
|
|
250
|
-
},
|
|
251
|
-
|
|
252
|
-
class
|
|
250
|
+
xt.styles = [K(Ie)];
|
|
251
|
+
let H = xt;
|
|
252
|
+
gt = Ye(ee);
|
|
253
|
+
H = He(gt, 0, "NteNavbarLine", te, H);
|
|
254
|
+
je(gt, 1, H);
|
|
255
|
+
const Je = ":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}";
|
|
256
|
+
var Ke = Object.create, bt = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, ie = (e, t) => (t = Symbol[e]) ? t : Symbol.for("Symbol." + e), A = (e) => {
|
|
257
|
+
throw TypeError(e);
|
|
258
|
+
}, Ve = (e, t, i) => t in e ? bt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, Mt = (e, t) => bt(e, "name", { value: t, configurable: !0 }), Xe = (e) => [, , , Ke((e == null ? void 0 : e[ie("metadata")]) ?? null)], re = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], G = (e) => e !== void 0 && typeof e != "function" ? A("Function expected") : e, Ze = (e, t, i, s, a) => ({ kind: re[e], name: t, metadata: s, addInitializer: (n) => i._ ? A("Already initialized") : a.push(G(n || null)) }), ti = (e, t) => Ve(t, ie("metadata"), e[3]), m = (e, t, i, s) => {
|
|
259
|
+
for (var a = 0, n = e[t >> 1], h = n && n.length; a < h; a++) t & 1 ? n[a].call(i) : s = n[a].call(i, s);
|
|
260
|
+
return s;
|
|
261
|
+
}, P = (e, t, i, s, a, n) => {
|
|
262
|
+
var h, o, w, p, _, r = t & 7, g = !!(t & 8), d = !!(t & 16), f = r > 3 ? e.length + 1 : r ? g ? 1 : 2 : 0, E = re[r + 5], C = r > 3 && (e[f - 1] = []), D = e[f] || (e[f] = []), c = r && (!d && !g && (a = a.prototype), r < 5 && (r > 3 || !d) && Qe(r < 4 ? a : { get [i]() {
|
|
263
|
+
return W(this, n);
|
|
264
|
+
}, set [i](l) {
|
|
265
|
+
return rt(this, n, l);
|
|
266
|
+
} }, i));
|
|
267
|
+
r ? d && r < 4 && Mt(n, (r > 2 ? "set " : r > 1 ? "get " : "") + i) : Mt(a, i);
|
|
268
|
+
for (var y = s.length - 1; y >= 0; y--)
|
|
269
|
+
p = Ze(r, i, w = {}, e[3], D), r && (p.static = g, p.private = d, _ = p.access = { has: d ? (l) => ei(a, l) : (l) => i in l }, r ^ 3 && (_.get = d ? (l) => (r ^ 1 ? W : ii)(l, a, r ^ 4 ? n : c.get) : (l) => l[i]), r > 2 && (_.set = d ? (l, S) => rt(l, a, S, r ^ 4 ? n : c.set) : (l, S) => l[i] = S)), o = (0, s[y])(r ? r < 4 ? d ? n : c[E] : r > 4 ? void 0 : { get: c.get, set: c.set } : a, p), w._ = 1, r ^ 4 || o === void 0 ? G(o) && (r > 4 ? C.unshift(o) : r ? d ? n = o : c[E] = o : a = o) : typeof o != "object" || o === null ? A("Object expected") : (G(h = o.get) && (c.get = h), G(h = o.set) && (c.set = h), G(h = o.init) && C.unshift(h));
|
|
270
|
+
return r || ti(e, a), c && bt(a, i, c), d ? r ^ 4 ? n : c : a;
|
|
271
|
+
}, mt = (e, t, i) => t.has(e) || A("Cannot " + i), ei = (e, t) => Object(t) !== t ? A('Cannot use the "in" operator on this value') : e.has(t), W = (e, t, i) => (mt(e, t, "read from private field"), i ? i.call(e) : t.get(e)), L = (e, t, i) => t.has(e) ? A("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), rt = (e, t, i, s) => (mt(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i), ii = (e, t, i) => (mt(e, t, "access private method"), i), ae, ne, se, oe, le, de, at, ce, u, wt, yt, St, $t, kt, T;
|
|
272
|
+
ce = [Q("nte-nav-brand-relocator")];
|
|
273
|
+
class x extends (at = ve(ue(nt)), de = [O({ type: String, reflect: !0 })], le = [O({ type: Boolean, reflect: !0 })], oe = [O({ type: String, reflect: !0 })], se = [Z()], ne = [Z()], ae = [X("scroll", { target: "window", options: { passive: !0 } })], at) {
|
|
253
274
|
constructor() {
|
|
254
|
-
super(...arguments),
|
|
275
|
+
super(...arguments), m(u, 5, this), L(this, wt, m(u, 8, this, ".brand-image")), m(u, 11, this), L(this, yt, m(u, 12, this, null)), m(u, 15, this), L(this, St, m(u, 16, this, "auto")), m(u, 19, this), L(this, $t, m(u, 20, this, !1)), m(u, 23, this), L(this, kt, m(u, 24, this, !1)), m(u, 27, this), L(this, T, null);
|
|
255
276
|
}
|
|
256
277
|
onScroll() {
|
|
257
278
|
if (this.mode !== "auto") {
|
|
258
279
|
this.log("Mode is not auto, skipping scroll handling");
|
|
259
280
|
return;
|
|
260
281
|
}
|
|
261
|
-
const
|
|
262
|
-
|
|
282
|
+
const t = window.scrollY <= 2;
|
|
283
|
+
t !== this.active && (this.active = t);
|
|
263
284
|
}
|
|
264
285
|
onanimationEnd() {
|
|
265
286
|
this.log("Animation ended - finalizing state"), this.active || (this.brandElement.style.visibility = "visible", this.done = !0);
|
|
266
287
|
}
|
|
267
288
|
get brandElement() {
|
|
268
|
-
return
|
|
289
|
+
return W(this, T) || (rt(this, T, document.querySelector(this.brandSelector)), W(this, T) || this.warn(`Brand element not found using selector: ${this.brandSelector}`)), W(this, T);
|
|
269
290
|
}
|
|
270
291
|
render() {
|
|
271
292
|
var a;
|
|
272
|
-
const
|
|
273
|
-
if (!
|
|
293
|
+
const t = (a = this.brandElement) == null ? void 0 : a.getBoundingClientRect();
|
|
294
|
+
if (!t)
|
|
274
295
|
return null;
|
|
275
|
-
const
|
|
276
|
-
"--orig-top":
|
|
277
|
-
"--orig-left":
|
|
278
|
-
"--orig-width":
|
|
279
|
-
"--orig-height":
|
|
280
|
-
"--self-top":
|
|
281
|
-
"--self-left":
|
|
282
|
-
"--self-width":
|
|
283
|
-
"--self-height":
|
|
296
|
+
const i = this.getBoundingClientRect(), s = {
|
|
297
|
+
"--orig-top": t.top + "px",
|
|
298
|
+
"--orig-left": t.left + "px",
|
|
299
|
+
"--orig-width": t.width + "px",
|
|
300
|
+
"--orig-height": t.height + "px",
|
|
301
|
+
"--self-top": i.top + "px",
|
|
302
|
+
"--self-left": i.left + "px",
|
|
303
|
+
"--self-width": i.width + "px",
|
|
304
|
+
"--self-height": i.height + "px"
|
|
284
305
|
};
|
|
285
|
-
return
|
|
306
|
+
return q`<div
|
|
286
307
|
class="wrapper ${this.active ? "" : "inactive"} ${this.done ? "done" : ""} ${this.initialized ? "initialized" : ""}"
|
|
287
|
-
style=${
|
|
308
|
+
style=${_e(s)}
|
|
288
309
|
@transitionend=${() => this.onanimationEnd()}
|
|
289
310
|
>
|
|
290
311
|
<slot></slot>
|
|
291
312
|
</div>`;
|
|
292
313
|
}
|
|
293
|
-
update(
|
|
294
|
-
var
|
|
295
|
-
|
|
314
|
+
update(t) {
|
|
315
|
+
var i;
|
|
316
|
+
t.has("active") && this.active === !0 && ((i = W(this, T)) == null || i.style.setProperty("visibility", "hidden"), this.done = !1), super.update(t);
|
|
296
317
|
}
|
|
297
318
|
get ghostElement() {
|
|
298
319
|
return this.querySelector("img");
|
|
299
320
|
}
|
|
300
321
|
async firstUpdated() {
|
|
301
|
-
var
|
|
322
|
+
var i, s, a;
|
|
302
323
|
if (this.brandElement === null) {
|
|
303
324
|
this.warn(`Brand element not found using selector: ${this.brandSelector}`);
|
|
304
325
|
return;
|
|
305
326
|
}
|
|
306
|
-
for (this.log("Waiting for Ghost element loading...", this.ghostElement), await
|
|
307
|
-
this.log("Waiting for Ghost element to have naturalWidth...", this.ghostElement), await
|
|
327
|
+
for (this.log("Waiting for Ghost element loading...", this.ghostElement), await Wt(this.ghostElement), await J(10); !((i = this.ghostElement) != null && i.naturalWidth); )
|
|
328
|
+
this.log("Waiting for Ghost element to have naturalWidth...", this.ghostElement), await J(100);
|
|
308
329
|
for (; this.brandElement && !this.brandElement.getBoundingClientRect().width; )
|
|
309
|
-
this.log("Waiting for Brand element to have width...", this.brandElement), await
|
|
310
|
-
const
|
|
311
|
-
this.log("Setting Aspect ratio:",
|
|
330
|
+
this.log("Waiting for Brand element to have width...", this.brandElement), await J(100);
|
|
331
|
+
const t = ((s = this.ghostElement) == null ? void 0 : s.naturalWidth) / ((a = this.ghostElement) == null ? void 0 : a.naturalHeight);
|
|
332
|
+
this.log("Setting Aspect ratio:", t), this.style.setProperty("--auto-aspect-ratio", t.toString()), this.log("Brand element is now loaded:", this.brandElement), this.initialized = !0, this.onScroll();
|
|
312
333
|
}
|
|
313
334
|
async connectedCallback() {
|
|
314
|
-
if (await
|
|
315
|
-
const
|
|
316
|
-
if (this.log("first connectedCallback() on Brand element:",
|
|
335
|
+
if (await V(), this.ghostElement === null) {
|
|
336
|
+
const t = this.brandElement;
|
|
337
|
+
if (this.log("first connectedCallback() on Brand element:", t), !t) {
|
|
317
338
|
this.warn(`Brand element not found using selector: ${this.brandSelector}`);
|
|
318
339
|
return;
|
|
319
340
|
}
|
|
320
341
|
if (!this.hasChildNodes()) {
|
|
321
|
-
const
|
|
322
|
-
this.appendChild(
|
|
342
|
+
const i = fe("img", { src: t.getAttribute("src") });
|
|
343
|
+
this.appendChild(i), this.onScroll();
|
|
323
344
|
}
|
|
324
345
|
}
|
|
325
346
|
super.connectedCallback();
|
|
326
347
|
}
|
|
327
348
|
}
|
|
328
|
-
|
|
329
|
-
_t = /* @__PURE__ */ new WeakMap();
|
|
330
|
-
gt = /* @__PURE__ */ new WeakMap();
|
|
331
|
-
bt = /* @__PURE__ */ new WeakMap();
|
|
332
|
-
mt = /* @__PURE__ */ new WeakMap();
|
|
349
|
+
u = Xe(at);
|
|
333
350
|
wt = /* @__PURE__ */ new WeakMap();
|
|
351
|
+
yt = /* @__PURE__ */ new WeakMap();
|
|
352
|
+
St = /* @__PURE__ */ new WeakMap();
|
|
353
|
+
$t = /* @__PURE__ */ new WeakMap();
|
|
354
|
+
kt = /* @__PURE__ */ new WeakMap();
|
|
334
355
|
T = /* @__PURE__ */ new WeakMap();
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
356
|
+
P(u, 4, "brandSelector", de, x, wt);
|
|
357
|
+
P(u, 4, "active", le, x, yt);
|
|
358
|
+
P(u, 4, "mode", oe, x, St);
|
|
359
|
+
P(u, 4, "done", se, x, $t);
|
|
360
|
+
P(u, 4, "initialized", ne, x, kt);
|
|
361
|
+
P(u, 1, "onScroll", ae, x);
|
|
362
|
+
x = P(u, 0, "NteNavBrandRelocator", ce, x);
|
|
363
|
+
x.styles = [K(Je)];
|
|
364
|
+
m(u, 1, x);
|
|
344
365
|
console.log("Loading nte-nav...");
|
|
345
366
|
export {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
367
|
+
$ as NteNav,
|
|
368
|
+
x as NteNavBrandRelocator,
|
|
369
|
+
j as NteNavbar
|
|
349
370
|
};
|
package/lib/nte-nav.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
2
|
+
declare const NteNav_base: import('@nextrap/nte-core').InternalNextrapElementType;
|
|
2
3
|
/**
|
|
3
4
|
* <nte-nav>
|
|
4
5
|
* <span slot="brand">Brand</span>
|
|
@@ -7,20 +8,24 @@ import { LitElement, PropertyValues } from 'lit';
|
|
|
7
8
|
* [optionally:] <nte-burger slot="burger"></nte-burger>
|
|
8
9
|
* </nte-nav>
|
|
9
10
|
*/
|
|
10
|
-
export declare class NteNav extends
|
|
11
|
+
export declare class NteNav extends NteNav_base {
|
|
12
|
+
#private;
|
|
11
13
|
static styles: import('lit').CSSResult[];
|
|
12
14
|
accessor mode: 'master' | 'slave';
|
|
13
15
|
accessor breakpoint: string | number;
|
|
14
16
|
accessor transferTo: string;
|
|
15
17
|
accessor dataGroupName: string;
|
|
16
18
|
private accessor _isTransferred;
|
|
19
|
+
private handleClickOnSubmenu;
|
|
20
|
+
private handleClickOutside;
|
|
17
21
|
private getOffcanvas;
|
|
18
22
|
private getOffcanvasNav;
|
|
19
23
|
constructor();
|
|
20
24
|
render(): import('lit-html').TemplateResult<1>;
|
|
21
25
|
transferToElement(targetElement: NteNav): void;
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
updated(_changedProperties: PropertyValues): void;
|
|
27
|
+
firstUpdated(_changedProperties: PropertyValues): void;
|
|
24
28
|
private updateTransferState;
|
|
25
29
|
connectedCallback(): Promise<void>;
|
|
26
30
|
}
|
|
31
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nextrap/nte-nav",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.40",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@nextrap/nt-framework": "^1.1.1",
|
|
7
7
|
"@nextrap/nte-burger": "^1.1.7",
|
|
8
|
+
"@nextrap/nte-core": "^1.0.2",
|
|
8
9
|
"@nextrap/nte-offcanvas": "^1.0.16",
|
|
9
10
|
"@trunkjs/browser-utils": "^1.0.12"
|
|
10
11
|
},
|