@nysds/nys-globalheader 1.11.4 → 1.13.0

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.
@@ -1,89 +1,92 @@
1
- import { LitElement as w, unsafeCSS as N, html as o } from "lit";
2
- import { property as _, state as v } from "lit/decorators.js";
3
- const M = ':host{--_nys-globalheader-color: var( --nys-color-text-reverse, var(--nys-color-white, #ffffff) );--_nys-globalheader-link-color: var( --nys-color-link-reverse-neutral, var(--nys-color-white, #fff) );--_nys-globalheader-background-color: var( --nys-color-theme, var(--nys-color-state-blue-700, #154973) );--_nys-globalheader-gap: var(--nys-space-300, 24px);--_nys-globalheader-padding: var(--nys-space-250, 20px);--_nys-globalheader-font-family--menu: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-globalheader-line-height: normal;--_nys-globalheader-letter-spacing: normal;--_nys-globalheader-font-weight: var(--nys-font-weight-semibold, 600);--_nys-globalheader-max-width: var(--nys-max-content-width, 1280px);--_nys-globalheader-gap--text: var(--nys-space-100, 8px);--_nys-globalheader-font-size--heading: var( --nys-font-size-agency-xl, var(--nys-font-size-2xl, 22px) );--_nys-globalheader-font-size--subheading: var( --nys-font-size-agency-md, var(--nys-font-size-md, 16px) );--_nys-globalheader-font-family--headings: var( --nys-font-family-agency, "D Sari", Arial, sans-serif );--_nys-globalheader-line-height--menu: var( --nys-font-lineheight-ui-md, 24px );--_nys-globalheader-letter-spacing--menu: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) );--_nys-globalheader-text-decoration-thickness--menu: var( --nys-size-2px, 2px );--_nys-globalheader-link-padding: var(--nys-space-300, 24px) var(--nys-space-200, 16px);--_nys-globalheader-font-size--menu-btn: var(--nys-type-size-ui-xs, 12px);--_nys-globalheader-line-height--menu-btn: var( --nys-font-lineheight-ui-xs, 20px );--_nys-globalheader-letter-spacing--menu-btn: var( --nys-font-letterspacing-ui-xs, .057px );--_nys-globalheader-border-color--menu: var(--nys-color-theme-mid, #457aa5);--_nys-globalheader-background-color--menu--hover: var( --nys-color-theme-strong, #0e324f );--_nys-globalheader-background-color--menu--active: var( --nys-color-theme-stronger, #081b2b )}ul{list-style-type:none;padding:0;margin:0}li{display:block;margin:0;padding:0;box-sizing:border-box}a{color:var(--_nys-globalheader-color);text-decoration:none;font-family:var(--_nys-globalheader-font-family--menu);font-style:normal;font-weight:400;line-height:var(--_nys-globalheader-line-height--menu);letter-spacing:var(--_nys-globalheader-letter-spacing--menu)}.nys-globalheader{display:flex;justify-content:center;padding:var(--_nys-globalheader-padding);background-color:var(--_nys-globalheader-background-color);color:var(--_nys-globalheader-color);width:100%;min-height:76px;box-sizing:border-box}.nys-globalheader__main-container{display:flex;gap:var(--_nys-globalheader-gap);max-width:var(--_nys-globalheader-max-width);width:100%}.nys-globalheader__name-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--_nys-globalheader-gap--text)}.nys-globalheader__name{margin:0;color:var(--_nys-globalheader-color);font-family:var(--_nys-globalheader-font-family--headings);font-size:var(--_nys-globalheader-font-size--heading);font-style:normal;font-weight:var(--_nys-globalheader-font-weight);line-height:var(--_nys-globalheader-line-height);letter-spacing:var(--_nys-globalheader-letter-spacing);overflow-wrap:break-word}.nys-globalheader__agencyName{font-size:var(--_nys-globalheader-font-size--subheading)}.nys-globalheader__agencyName.main{font-size:var(--_nys-globalheader-font-size--heading)}.nys-globalheader__content{display:none;font-family:var(--_nys-globalheader-font-family--menu)}.nys-globalheader__content ul{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap}.nys-globalheader__content ul a:hover{text-decoration:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:auto;text-underline-position:from-font}.nys-globalheader__content ul a:active{text-decoration-thickness:var(--_nys-globalheader-text-decoration-thickness--menu)}.nys-globalheader__content li.active a,.nys-globalheader__content-mobile li.active a{font-weight:700}.nys-globalheader__content li.active{border-bottom:8px solid var(--nys-color-theme-weak, #cddde9)}.nys-globalheader__content li.active a{margin-bottom:calc(-1 * var(--nys-space-100, 8px))}.nys-globalheader__content-mobile li.active a{border-left:8px solid var(--nys-color-theme-weak, #cddde9);border-bottom:1px solid var(--_nys-globalheader-border-color--menu)}.nys-globalheader__content ul li.active a:hover{text-decoration:none}.nys-globalheader__content-mobile{position:absolute;z-index:10;display:flex;flex-direction:column;justify-content:center;background-color:var(--_nys-globalheader-background-color);width:fit-content}.nys-globalheader__content-mobile.close{display:none}.nys-globalheader__content-mobile ul{display:flex;flex-direction:column}.nys-globalheader__content-mobile ul li:first-child a{border-top:1px solid var(--_nys-globalheader-color)}.nys-globalheader__content-mobile ul li a{display:flex;padding:24px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid var(--_nys-globalheader-border-color--menu);background-color:var(--_nys-globalheader-background-color)}.nys-globalheader__content-mobile ul li a:hover{background-color:var(--_nys-globalheader-background-color--menu--hover)}.nys-globalheader__content-mobile ul li a:active{background-color:var(--_nys-globalheader-background-color--menu--active)}.nys-globalheader__name-container-link{display:flex;flex-direction:column;justify-content:center}.nys-globalheader__button-container{display:flex;justify-content:center;align-items:center}.nys-globalheader__mobile-menu-button{flex-direction:column;gap:3px;width:50px;height:50px;background-color:var(--_nys-globalheader-background-color);border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0;color:var(--_nys-globalheader-color)}.nys-globalheader__mobile-menu-button-text{font-size:var(--_nys-globalheader-font-size--menu-btn);line-height:var(--_nys-globalheader-line-height--menu-btn);letter-spacing:var(--_nys-globalheader-letter-spacing--menu-btn)}@media(min-width:1024px){.nys-globalheader__content{display:flex}.nys-globalheader__content ul{flex-direction:row}.nys-globalheader__content-mobile,.nys-globalheader__button-container{display:none}li{display:flex;align-items:center;padding:var(--_nys-globalheader-link-padding)}:host{--_nys-globalheader-gap: var(--nys-space-500, 40px);--_nys-globalheader-padding: var(--nys-space-50, 4px) var(--nys-size-400, 32px) 0}}@media(min-width:1280px){:host{--_nys-globalheader-padding: var(--nys-space-50, 4px) var(--nys-space-800, 64px) 0}}';
4
- var z = Object.defineProperty, c = (p, e, t, r) => {
5
- for (var n = void 0, a = p.length - 1, l; a >= 0; a--)
6
- (l = p[a]) && (n = l(e, t, n) || n);
7
- return n && z(e, t, n), n;
1
+ import { LitElement as b, unsafeCSS as _, html as s } from "lit";
2
+ import { property as c, state as y } from "lit/decorators.js";
3
+ const m = ':host{--_nys-globalheader-color: var( --nys-color-text-reverse, var(--nys-color-white, #ffffff) );--_nys-globalheader-link-color: var( --nys-color-link-reverse-neutral, var(--nys-color-white, #fff) );--_nys-globalheader-background-color: var( --nys-color-theme, var(--nys-color-state-blue-700, #154973) );--_nys-globalheader-gap: var(--nys-space-300, 24px);--_nys-globalheader-padding: var(--nys-space-250, 20px);--_nys-globalheader-font-family--menu: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-globalheader-line-height: normal;--_nys-globalheader-letter-spacing: normal;--_nys-globalheader-font-weight: var(--nys-font-weight-semibold, 600);--_nys-globalheader-max-width: var(--nys-max-content-width, 1280px);--_nys-globalheader-gap--text: var(--nys-space-100, 8px);--_nys-globalheader-font-size--heading: var( --nys-font-size-agency-xl, var(--nys-font-size-2xl, 22px) );--_nys-globalheader-font-size--subheading: var( --nys-font-size-agency-md, var(--nys-font-size-md, 16px) );--_nys-globalheader-font-family--headings: var( --nys-font-family-agency, "D Sari", Arial, sans-serif );--_nys-globalheader-line-height--menu: var(--nys-font-lineheight-ui-md, 24px);--_nys-globalheader-letter-spacing--menu: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) );--_nys-globalheader-text-decoration-thickness--menu: var(--nys-size-2px, 2px);--_nys-globalheader-link-padding: var(--nys-space-300, 24px) var(--nys-space-200, 16px);--_nys-globalheader-font-size--menu-btn: var(--nys-type-size-ui-xs, 12px);--_nys-globalheader-line-height--menu-btn: var( --nys-font-lineheight-ui-xs, 20px );--_nys-globalheader-letter-spacing--menu-btn: var( --nys-font-letterspacing-ui-xs, .057px );--_nys-globalheader-border-color--menu: var(--nys-color-theme-mid, #457aa5);--_nys-globalheader-background-color--menu--hover: var( --nys-color-theme-strong, #0e324f );--_nys-globalheader-background-color--menu--active: var( --nys-color-theme-stronger, #081b2b )}ul{list-style-type:none;padding:0;margin:0}li{display:block;margin:0;padding:0;box-sizing:border-box}a{color:var(--_nys-globalheader-color);text-decoration:none;font-family:var(--_nys-globalheader-font-family--menu);font-style:normal;font-weight:400;line-height:var(--_nys-globalheader-line-height--menu);letter-spacing:var(--_nys-globalheader-letter-spacing--menu)}::slotted([slot=user-actions]){display:flex;align-items:center;margin-inline-start:auto;--_nys-button-outline-color: var( --nys-color-ink-reverse, var(--nys-color-white, #fff) )}.nys-globalheader{display:flex;justify-content:center;padding:var(--_nys-globalheader-padding);background-color:var(--_nys-globalheader-background-color);color:var(--_nys-globalheader-color);width:100%;min-height:76px;box-sizing:border-box}a#nys-globalheader__logolink{outline-offset:var(--nys-space-2px, 2px);outline-color:#fff;margin:auto 0}.nys-globalheader__logo svg{vertical-align:top;width:auto}.nys-globalheader__main-container{display:flex;gap:var(--_nys-globalheader-gap);max-width:var(--_nys-globalheader-max-width);width:100%}.nys-globalheader__name-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--_nys-globalheader-gap--text)}.nys-globalheader__name{margin:0;color:var(--_nys-globalheader-color);font-family:var(--_nys-globalheader-font-family--headings);font-size:var(--_nys-globalheader-font-size--heading);font-style:normal;font-weight:var(--_nys-globalheader-font-weight);line-height:var(--_nys-globalheader-line-height);letter-spacing:var(--_nys-globalheader-letter-spacing);overflow-wrap:break-word}.nys-globalheader__agencyName{font-size:var(--_nys-globalheader-font-size--subheading)}.nys-globalheader__agencyName.main{font-size:var(--_nys-globalheader-font-size--heading)}.nys-globalheader__content{display:none;font-family:var(--_nys-globalheader-font-family--menu)}.nys-globalheader__content ul{display:flex;flex-direction:column;align-items:center;flex-wrap:wrap}.nys-globalheader__content ul a:hover{text-decoration:underline;text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:auto;text-underline-position:from-font}.nys-globalheader__content ul a:active{text-decoration-thickness:var(--_nys-globalheader-text-decoration-thickness--menu)}.nys-globalheader__content li.active a,.nys-globalheader__content-mobile li.active a{font-weight:700}.nys-globalheader__content li.active{border-bottom:8px solid var(--nys-color-theme-weak, #cddde9)}.nys-globalheader__content li.active a{margin-bottom:calc(-1 * var(--nys-space-100, 8px))}.nys-globalheader__content-mobile li.active a{border-left:8px solid var(--nys-color-theme-weak, #cddde9);border-bottom:1px solid var(--_nys-globalheader-border-color--menu)}.nys-globalheader__content ul li.active a:hover{text-decoration:none}.nys-globalheader__content-mobile{position:absolute;z-index:10;display:flex;flex-direction:column;justify-content:center;background-color:var(--_nys-globalheader-background-color);width:fit-content}.nys-globalheader__content-mobile.close{display:none}.nys-globalheader__content-mobile ul{display:flex;flex-direction:column}.nys-globalheader__content-mobile ul li:first-child a{border-top:1px solid var(--_nys-globalheader-color)}.nys-globalheader__content-mobile ul li a{display:flex;padding:24px;align-items:center;gap:8px;align-self:stretch;border-bottom:1px solid var(--_nys-globalheader-border-color--menu);background-color:var(--_nys-globalheader-background-color)}.nys-globalheader__content-mobile ul li a:hover{background-color:var(--_nys-globalheader-background-color--menu--hover)}.nys-globalheader__content-mobile ul li a:active{background-color:var(--_nys-globalheader-background-color--menu--active)}.nys-globalheader__name-container-link{display:flex;flex-direction:column;justify-content:center}.nys-globalheader__button-container{display:flex;justify-content:center;align-items:center}.nys-globalheader__mobile-menu-button{flex-direction:column;gap:3px;width:50px;height:50px;background-color:var(--_nys-globalheader-background-color);border:none;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0;color:var(--_nys-globalheader-color)}.nys-globalheader__mobile-menu-button-text{font-size:var(--_nys-globalheader-font-size--menu-btn);line-height:var(--_nys-globalheader-line-height--menu-btn);letter-spacing:var(--_nys-globalheader-letter-spacing--menu-btn)}@media(min-width:1024px){.nys-globalheader__content{display:flex}.nys-globalheader__content ul{flex-direction:row}.nys-globalheader__content-mobile,.nys-globalheader__button-container{display:none}li{display:flex;align-items:center;padding:var(--_nys-globalheader-link-padding)}:host{--_nys-globalheader-gap: var(--nys-space-500, 40px);--_nys-globalheader-padding: var(--nys-space-50, 4px) var(--nys-size-400, 32px) 0}}@media(min-width:1280px){:host{--_nys-globalheader-padding: var(--nys-space-50, 4px) var(--nys-space-800, 64px) 0}}';
4
+ var p = Object.defineProperty, r = (g, l, o, t) => {
5
+ for (var n = void 0, e = g.length - 1, a; e >= 0; e--)
6
+ (a = g[e]) && (n = a(l, o, n) || n);
7
+ return n && p(l, o, n), n;
8
8
  };
9
- const m = class m extends w {
9
+ const h = class h extends b {
10
10
  constructor() {
11
- super(...arguments), this.appName = "", this.agencyName = "", this.homepageLink = "", this.slotHasContent = !0, this.isMobileMenuOpen = !1;
11
+ super(...arguments), this.appName = "", this.agencyName = "", this.homepageLink = "", this.isMobileMenuOpen = !1, this.hasLinkContent = !1;
12
12
  }
13
- /**************** Lifecycle Methods ****************/
13
+ /**
14
+ * Lifecycle Methods
15
+ * --------------------------------------------------------------------------
16
+ */
14
17
  firstUpdated() {
15
- this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", () => this._handleSlotChange()), this._handleSlotChange(), this._listenLinkClicks();
18
+ this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", () => this._handleListSlotChange()), this._handleListSlotChange(), this._listenLinkClicks();
19
+ }
20
+ /**
21
+ * Functions
22
+ * --------------------------------------------------------------------------
23
+ */
24
+ _highlightActiveLink(l) {
25
+ const o = Array.from(l.querySelectorAll("a")), t = window.location.pathname.replace(/\/+$/, "") || "/";
26
+ let n = {
27
+ li: null,
28
+ length: 0
29
+ };
30
+ o.forEach((e) => {
31
+ const a = this._normalizePath(e.getAttribute("href"));
32
+ a && (a === "/" && t === "/" ? n = { li: e.closest("li"), length: 1 } : t.startsWith(a) && a.length > n.length && (n = {
33
+ li: e.closest("li"),
34
+ length: a.length
35
+ }));
36
+ }), o.forEach((e) => e.closest("li")?.classList.remove("active")), n.li?.classList.add("active");
16
37
  }
17
- /******************** Functions ********************/
18
38
  // Gets called when the slot content changes and directly appends the slotted elements into the shadow DOM
19
- async _handleSlotChange() {
20
- const e = this.shadowRoot?.querySelector("slot");
21
- if (!e) return;
22
- const t = e?.assignedNodes({ flatten: !0 }).filter((a) => a.nodeType === Node.ELEMENT_NODE);
23
- await Promise.resolve(), this.slotHasContent = t.length > 0;
24
- const r = this.shadowRoot?.querySelector(
39
+ async _handleListSlotChange() {
40
+ const l = this.shadowRoot?.querySelector(
41
+ 'slot:not([name="user-actions"])'
42
+ );
43
+ if (!l) return;
44
+ const o = l.assignedNodes({ flatten: !0 }).filter((e) => e.nodeType === Node.ELEMENT_NODE);
45
+ this.hasLinkContent = o.length > 0, await Promise.resolve();
46
+ const t = this.shadowRoot?.querySelector(
25
47
  ".nys-globalheader__content"
26
48
  ), n = this.shadowRoot?.querySelector(
27
49
  ".nys-globalheader__content-mobile"
28
50
  );
29
- if (r && n) {
30
- r.innerHTML = "", n.innerHTML = "";
31
- const a = this._normalizePath(
32
- window.location.pathname + window.location.hash
33
- );
34
- t.forEach((l) => {
35
- if (l.nodeType === Node.ELEMENT_NODE) {
36
- const i = l.cloneNode(!0), f = l.cloneNode(!0);
37
- ["script", "iframe", "object", "embed, img"].forEach((y) => {
38
- i.querySelectorAll(y).forEach((h) => h.remove());
39
- });
40
- const u = (y) => {
41
- const h = Array.from(y.querySelectorAll("a"));
42
- let g = {
43
- li: null,
44
- length: 0
45
- };
46
- h.forEach((b) => {
47
- const x = b.getAttribute("href"), d = this._normalizePath(x);
48
- d && (d === "/" && a === "/" ? g = { li: b.closest("li"), length: 1 } : a?.startsWith(d) && d.length > g.length && (g = { li: b.closest("li"), length: d.length }), h.forEach((k) => k.closest("li")?.classList.remove("active")), g.li?.classList.add("active"));
49
- });
50
- };
51
- u(i), u(f), r.appendChild(i), n.appendChild(f), l.remove();
52
- }
53
- });
54
- }
51
+ !t || !n || (t.innerHTML = "", n.innerHTML = "", o.forEach((e) => {
52
+ if (e instanceof HTMLElement) {
53
+ const a = e.cloneNode(!0), d = e.cloneNode(!0);
54
+ t.appendChild(a), n.appendChild(d);
55
+ }
56
+ }), this._highlightActiveLink(t), this._highlightActiveLink(n));
55
57
  }
56
58
  // Normalize paths so that links like "name", "/name/", and "/" match window.location.pathname.
57
59
  // This ensures consistent active-link behavior regardless of how hrefs are written.
58
- _normalizePath(e) {
59
- if (e)
60
- return e.startsWith("/") || (e = "/" + e), e.length > 1 && e.endsWith("/") && (e = e.slice(0, -1)), e.toLowerCase();
60
+ _normalizePath(l) {
61
+ if (!l) return null;
62
+ try {
63
+ return new URL(l, window.location.origin).pathname.replace(/\/+$/, "") || "/";
64
+ } catch {
65
+ return null;
66
+ }
61
67
  }
62
68
  _toggleMobileMenu() {
63
69
  this.isMobileMenuOpen = !this.isMobileMenuOpen;
64
70
  }
65
- /**
66
- * Handles client-side navigation when links are clicked (no full page refresh).
67
- */
68
- // Ensures only the clicked link's <li> is marked active in both desktop and mobile menus.
71
+ // Listens for click events on links to mark them active
69
72
  _listenLinkClicks() {
70
73
  this.shadowRoot?.querySelectorAll(
71
74
  ".nys-globalheader__content, .nys-globalheader__content-mobile"
72
- )?.forEach((t) => {
73
- t?.addEventListener("click", (r) => {
74
- const a = r.target.closest("a");
75
- if (!a) return;
76
- t.querySelectorAll("li.active").forEach((i) => i.classList.remove("active"));
77
- const l = a.closest("li");
78
- l && l.classList.add("active");
75
+ )?.forEach((o) => {
76
+ o?.addEventListener("click", (t) => {
77
+ const e = t.target.closest("a");
78
+ if (!e) return;
79
+ o.querySelectorAll("li.active").forEach((d) => d.classList.remove("active"));
80
+ const a = e.closest("li");
81
+ a && a.classList.add("active");
79
82
  });
80
83
  });
81
84
  }
82
85
  render() {
83
- return o`
86
+ return s`
84
87
  <header class="nys-globalheader">
85
88
  <div class="nys-globalheader__main-container">
86
- ${this.slotHasContent ? o` <div class="nys-globalheader__button-container">
89
+ ${this.hasLinkContent ? s` <div class="nys-globalheader__button-container">
87
90
  <button
88
91
  class="nys-globalheader__mobile-menu-button"
89
92
  @click="${this._toggleMobileMenu}"
@@ -98,42 +101,42 @@ const m = class m extends w {
98
101
  >
99
102
  </button>
100
103
  </div>` : ""}
101
- ${this.homepageLink?.trim() ? o`<a
104
+ ${this.homepageLink?.trim() ? s`<a
102
105
  class="nys-globalheader__name-container-link"
103
106
  href=${this.homepageLink?.trim()}
104
107
  >
105
108
  <div class="nys-globalheader__name-container">
106
- ${this.appName?.trim().length > 0 ? o`<div
109
+ ${this.appName?.trim().length > 0 ? s`<div
107
110
  class="nys-globalheader__appName nys-globalheader__name"
108
111
  >
109
112
  ${this.appName}
110
113
  </div> ` : ""}
111
- ${this.agencyName?.trim().length > 0 ? o`<div
114
+ ${this.agencyName?.trim().length > 0 ? s`<div
112
115
  class="nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim().length > 0 ? "" : "main"}"
113
116
  >
114
117
  ${this.agencyName}
115
118
  </div> ` : ""}
116
119
  </div>
117
- </a>` : o`
120
+ </a>` : s`
118
121
  <div class="nys-globalheader__name-container">
119
- ${this.appName?.trim().length > 0 ? o`<div
122
+ ${this.appName?.trim().length > 0 ? s`<div
120
123
  class="nys-globalheader__appName nys-globalheader__name"
121
124
  >
122
125
  ${this.appName}
123
126
  </div> ` : ""}
124
- ${this.agencyName?.trim().length > 0 ? o`<div
127
+ ${this.agencyName?.trim().length > 0 ? s`<div
125
128
  class="nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim().length > 0 ? "" : "main"}"
126
129
  >
127
130
  ${this.agencyName}
128
131
  </div> ` : ""}
129
132
  </div>
130
133
  `}
131
- ${this.slotHasContent ? o`<div class="nys-globalheader__content">
132
- <slot
133
- style="display: hidden"
134
- @slotchange="${this._handleSlotChange}"
135
- ></slot>
136
- </div>` : ""}
134
+ <div class="nys-globalheader__content"></div>
135
+ <slot
136
+ style="display: none;"
137
+ @slotchange="${this._handleListSlotChange}"
138
+ ></slot>
139
+ <slot name="user-actions"></slot>
137
140
  </div>
138
141
  </header>
139
142
  <div
@@ -142,25 +145,25 @@ const m = class m extends w {
142
145
  `;
143
146
  }
144
147
  };
145
- m.styles = N(M);
146
- let s = m;
147
- c([
148
- _({ type: String })
149
- ], s.prototype, "appName");
150
- c([
151
- _({ type: String })
152
- ], s.prototype, "agencyName");
153
- c([
154
- _({ type: String })
155
- ], s.prototype, "homepageLink");
156
- c([
157
- v()
158
- ], s.prototype, "slotHasContent");
159
- c([
160
- v()
161
- ], s.prototype, "isMobileMenuOpen");
162
- customElements.get("nys-globalheader") || customElements.define("nys-globalheader", s);
148
+ h.styles = _(m);
149
+ let i = h;
150
+ r([
151
+ c({ type: String })
152
+ ], i.prototype, "appName");
153
+ r([
154
+ c({ type: String })
155
+ ], i.prototype, "agencyName");
156
+ r([
157
+ c({ type: String })
158
+ ], i.prototype, "homepageLink");
159
+ r([
160
+ y()
161
+ ], i.prototype, "isMobileMenuOpen");
162
+ r([
163
+ y()
164
+ ], i.prototype, "hasLinkContent");
165
+ customElements.get("nys-globalheader") || customElements.define("nys-globalheader", i);
163
166
  export {
164
- s as NysGlobalHeader
167
+ i as NysGlobalHeader
165
168
  };
166
169
  //# sourceMappingURL=nys-globalheader.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nys-globalheader.js","sources":["../src/nys-globalheader.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-globalheader.scss?inline\";\n\nexport class NysGlobalHeader extends LitElement {\n static styles = unsafeCSS(styles);\n\n /********************** Properties **********************/\n @property({ type: String }) appName = \"\";\n @property({ type: String }) agencyName = \"\";\n @property({ type: String }) homepageLink = \"\";\n @state() private slotHasContent = true;\n @state() private isMobileMenuOpen = false;\n\n /**************** Lifecycle Methods ****************/\n\n firstUpdated() {\n // Check for slot content after rendering\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n slot?.addEventListener(\"slotchange\", () => this._handleSlotChange());\n this._handleSlotChange(); // run once at startup\n\n this._listenLinkClicks();\n }\n\n /******************** Functions ********************/\n // Gets called when the slot content changes and directly appends the slotted elements into the shadow DOM\n private async _handleSlotChange() {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n if (!slot) return;\n\n const assignedNodes = slot\n ?.assignedNodes({ flatten: true })\n .filter((node) => node.nodeType === Node.ELEMENT_NODE) as Element[]; // Filter to elements only\n\n await Promise.resolve(); // Wait for current update cycle to complete before modifying reactive state (solves the lit issue \"scheduled an update\")\n\n // Update slotHasContent for styling content\n this.slotHasContent = assignedNodes.length > 0;\n\n // Get the container to append the slotted elements\n const container = this.shadowRoot?.querySelector(\n \".nys-globalheader__content\",\n );\n const containerMobile = this.shadowRoot?.querySelector(\n \".nys-globalheader__content-mobile\",\n );\n\n if (container && containerMobile) {\n // Clear existing children in the container\n container.innerHTML = \"\";\n containerMobile.innerHTML = \"\";\n\n const currentUrl = this._normalizePath(\n window.location.pathname + window.location.hash,\n );\n\n // Clone and append slotted elements into the shadow DOM container\n assignedNodes.forEach((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n const cleanNode = node.cloneNode(true) as HTMLElement;\n const cleanNodeMobile = node.cloneNode(true) as HTMLElement;\n\n // Remove <script>, <iframe>, <object>, and any potentially dangerous elements XSS\n const dangerousTags = [\"script\", \"iframe\", \"object\", \"embed, img\"];\n dangerousTags.forEach((tag) => {\n (cleanNode as Element)\n .querySelectorAll(tag)\n .forEach((element) => element.remove());\n });\n\n /**\n * Get all user slotted ahref links and for each link, determine the best matching link via the pattern of\n * prioritize the link with the longest match.\n * @param node\n */\n const highlightActiveLink = (node: HTMLElement) => {\n const links = Array.from(node.querySelectorAll(\"a\"));\n\n // Because we can only have one active link at all times, we\n let bestMatch: { li: HTMLElement | null; length: number } = {\n li: null,\n length: 0,\n };\n\n links.forEach((a) => {\n const hrefAttr = a.getAttribute(\"href\");\n const linkPath = this._normalizePath(hrefAttr);\n\n if (!linkPath) return;\n\n // Exact homepage match\n if (linkPath === \"/\" && currentUrl === \"/\") {\n bestMatch = { li: a.closest(\"li\"), length: 1 };\n } else if (\n currentUrl?.startsWith(linkPath) &&\n linkPath.length > bestMatch.length\n ) {\n bestMatch = { li: a.closest(\"li\"), length: linkPath.length };\n }\n\n // Clear old actives\n links.forEach((a) => a.closest(\"li\")?.classList.remove(\"active\"));\n\n // Set the best matched link to active\n bestMatch.li?.classList.add(\"active\");\n });\n };\n\n highlightActiveLink(cleanNode);\n highlightActiveLink(cleanNodeMobile);\n\n container.appendChild(cleanNode);\n containerMobile.appendChild(cleanNodeMobile);\n node.remove(); // Remove from light DOM to avoid duplication\n }\n });\n }\n }\n\n // Normalize paths so that links like \"name\", \"/name/\", and \"/\" match window.location.pathname.\n // This ensures consistent active-link behavior regardless of how hrefs are written.\n private _normalizePath(path: string | null) {\n if (!path) return;\n\n // Checks path always starts with \"/\"\n if (!path.startsWith(\"/\")) {\n path = \"/\" + path;\n }\n\n // Strip trailing slash except for root \"/\"\n if (path.length > 1 && path.endsWith(\"/\")) {\n path = path.slice(0, -1);\n }\n\n return path.toLowerCase();\n }\n\n private _toggleMobileMenu() {\n this.isMobileMenuOpen = !this.isMobileMenuOpen;\n }\n\n /**\n * Handles client-side navigation when links are clicked (no full page refresh).\n */\n // Ensures only the clicked link's <li> is marked active in both desktop and mobile menus.\n private _listenLinkClicks() {\n const containers = this.shadowRoot?.querySelectorAll(\n \".nys-globalheader__content, .nys-globalheader__content-mobile\",\n );\n\n containers?.forEach((container) => {\n container?.addEventListener(\"click\", (event) => {\n const target = event.target as HTMLElement;\n const a = target.closest(\"a\");\n\n if (!a) return;\n\n // Clear all existing active <li>\n container\n .querySelectorAll(\"li.active\")\n .forEach((li) => li.classList.remove(\"active\"));\n\n // Set active on the clicked link's <li>\n const li = a.closest(\"li\");\n if (li) li.classList.add(\"active\");\n });\n });\n }\n\n render() {\n return html`\n <header class=\"nys-globalheader\">\n <div class=\"nys-globalheader__main-container\">\n ${this.slotHasContent\n ? html` <div class=\"nys-globalheader__button-container\">\n <button\n class=\"nys-globalheader__mobile-menu-button\"\n @click=\"${this._toggleMobileMenu}\"\n >\n <nys-icon\n name=\"${this.isMobileMenuOpen ? \"close\" : \"menu\"}\"\n size=\"32\"\n label=\"${this.isMobileMenuOpen ? \"close\" : \"menu\"} icon\"\n ></nys-icon>\n <span class=\"nys-globalheader__mobile-menu-button-text\"\n >${this.isMobileMenuOpen ? \"CLOSE\" : \"MENU\"}</span\n >\n </button>\n </div>`\n : \"\"}\n ${!this.homepageLink?.trim()\n ? html`\n <div class=\"nys-globalheader__name-container\">\n ${this.appName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__appName nys-globalheader__name\"\n >\n ${this.appName}\n </div> `\n : \"\"}\n ${this.agencyName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim()\n .length > 0\n ? \"\"\n : \"main\"}\"\n >\n ${this.agencyName}\n </div> `\n : \"\"}\n </div>\n `\n : html`<a\n class=\"nys-globalheader__name-container-link\"\n href=${this.homepageLink?.trim()}\n >\n <div class=\"nys-globalheader__name-container\">\n ${this.appName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__appName nys-globalheader__name\"\n >\n ${this.appName}\n </div> `\n : \"\"}\n ${this.agencyName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim()\n .length > 0\n ? \"\"\n : \"main\"}\"\n >\n ${this.agencyName}\n </div> `\n : \"\"}\n </div>\n </a>`}\n ${this.slotHasContent\n ? html`<div class=\"nys-globalheader__content\">\n <slot\n style=\"display: hidden\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </div>`\n : \"\"}\n </div>\n </header>\n <div\n class=\"nys-globalheader__content-mobile ${this.isMobileMenuOpen\n ? \"\"\n : \"close\"}\"\n ></div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-globalheader\")) {\n customElements.define(\"nys-globalheader\", NysGlobalHeader);\n}\n"],"names":["_NysGlobalHeader","LitElement","slot","assignedNodes","node","container","containerMobile","currentUrl","cleanNode","cleanNodeMobile","tag","element","highlightActiveLink","links","bestMatch","a","hrefAttr","linkPath","path","event","li","html","unsafeCSS","styles","NysGlobalHeader","__decorateClass","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"nys-globalheader.js","sources":["../src/nys-globalheader.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-globalheader.scss?inline\";\n\n/**\n * `<nys-globalheader>` renders a New York State–style global header.\n *\n * Displays an optional application name, agency name, and homepage link.\n * Supports slotted navigation content with automatic active-link detection\n * and a responsive mobile menu.\n *\n * @slot default - Primary navigation list, typically a `<ul>` with links\n * @slot user-actions - Optional user action elements such as login or profile\n *\n * Behavior:\n * - Automatically highlights the best matching link based on the current URL\n * - Duplicates navigation content for desktop and mobile layouts\n * - Provides a toggleable mobile menu when navigation content exists\n */\n\nexport class NysGlobalHeader extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String }) appName = \"\";\n @property({ type: String }) agencyName = \"\";\n @property({ type: String }) homepageLink = \"\";\n @state() private isMobileMenuOpen = false;\n @state() private hasLinkContent = false;\n\n /**\n * Lifecycle Methods\n * --------------------------------------------------------------------------\n */\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n slot?.addEventListener(\"slotchange\", () => this._handleListSlotChange());\n this._handleListSlotChange(); // run once at startup\n\n this._listenLinkClicks();\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _highlightActiveLink(container: HTMLElement) {\n const links = Array.from(container.querySelectorAll(\"a\"));\n const currentUrl = window.location.pathname.replace(/\\/+$/, \"\") || \"/\";\n\n let bestMatch: { li: HTMLElement | null; length: number } = {\n li: null,\n length: 0,\n };\n\n links.forEach((a) => {\n const linkPath = this._normalizePath(a.getAttribute(\"href\"));\n if (!linkPath) return;\n\n if (linkPath === \"/\" && currentUrl === \"/\") {\n bestMatch = { li: a.closest(\"li\"), length: 1 };\n } else if (\n currentUrl.startsWith(linkPath) &&\n linkPath.length > bestMatch.length\n ) {\n bestMatch = {\n li: a.closest(\"li\"),\n length: linkPath.length,\n };\n }\n });\n\n // Clear all previous actives\n links.forEach((a) => a.closest(\"li\")?.classList.remove(\"active\"));\n\n // Apply best match\n bestMatch.li?.classList.add(\"active\");\n }\n\n // Gets called when the slot content changes and directly appends the slotted elements into the shadow DOM\n private async _handleListSlotChange() {\n const slot = this.shadowRoot?.querySelector(\n 'slot:not([name=\"user-actions\"])',\n ) as HTMLSlotElement | null;\n\n if (!slot) return;\n\n const assignedNodes = slot\n .assignedNodes({ flatten: true })\n .filter((node) => node.nodeType === Node.ELEMENT_NODE) as Element[]; // Filter to elements only\n\n this.hasLinkContent = assignedNodes.length > 0;\n\n await Promise.resolve(); // Wait for current update cycle to complete before modifying reactive state (solves the lit issue \"scheduled an update\")\n\n // Get the containers to append the slotted elements\n const container = this.shadowRoot?.querySelector(\n \".nys-globalheader__content\",\n ) as HTMLElement | null;\n\n const containerMobile = this.shadowRoot?.querySelector(\n \".nys-globalheader__content-mobile\",\n ) as HTMLElement | null;\n\n if (!container || !containerMobile) return;\n\n // Clear existing children in the container\n container.innerHTML = \"\";\n containerMobile.innerHTML = \"\";\n\n // Clone and append slotted elements into the shadow DOM container\n assignedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n // need to clone the node because cannot have same node in two places in DOM\n const nodeInline = node.cloneNode(true) as HTMLElement;\n const nodeMobile = node.cloneNode(true) as HTMLElement;\n\n container.appendChild(nodeInline);\n containerMobile.appendChild(nodeMobile);\n }\n });\n\n // Highlight active links AFTER DOM is finalized\n this._highlightActiveLink(container);\n this._highlightActiveLink(containerMobile);\n }\n\n // Normalize paths so that links like \"name\", \"/name/\", and \"/\" match window.location.pathname.\n // This ensures consistent active-link behavior regardless of how hrefs are written.\n private _normalizePath(href: string | null): string | null {\n if (!href) return null;\n\n try {\n const url = new URL(href, window.location.origin);\n return url.pathname.replace(/\\/+$/, \"\") || \"/\";\n } catch {\n return null;\n }\n }\n\n private _toggleMobileMenu() {\n this.isMobileMenuOpen = !this.isMobileMenuOpen;\n }\n\n // Listens for click events on links to mark them active\n private _listenLinkClicks() {\n const containers = this.shadowRoot?.querySelectorAll(\n \".nys-globalheader__content, .nys-globalheader__content-mobile\",\n );\n\n containers?.forEach((container) => {\n container?.addEventListener(\"click\", (event) => {\n const target = event.target as HTMLElement;\n const ahref = target.closest(\"a\");\n\n if (!ahref) return;\n\n // Clear all existing active <li>\n container\n .querySelectorAll(\"li.active\")\n .forEach((li) => li.classList.remove(\"active\"));\n\n // Set active on the clicked link's <li>\n const li = ahref.closest(\"li\");\n if (li) li.classList.add(\"active\");\n });\n });\n }\n\n render() {\n return html`\n <header class=\"nys-globalheader\">\n <div class=\"nys-globalheader__main-container\">\n ${this.hasLinkContent\n ? html` <div class=\"nys-globalheader__button-container\">\n <button\n class=\"nys-globalheader__mobile-menu-button\"\n @click=\"${this._toggleMobileMenu}\"\n >\n <nys-icon\n name=\"${this.isMobileMenuOpen ? \"close\" : \"menu\"}\"\n size=\"32\"\n label=\"${this.isMobileMenuOpen ? \"close\" : \"menu\"} icon\"\n ></nys-icon>\n <span class=\"nys-globalheader__mobile-menu-button-text\"\n >${this.isMobileMenuOpen ? \"CLOSE\" : \"MENU\"}</span\n >\n </button>\n </div>`\n : \"\"}\n ${!this.homepageLink?.trim()\n ? html`\n <div class=\"nys-globalheader__name-container\">\n ${this.appName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__appName nys-globalheader__name\"\n >\n ${this.appName}\n </div> `\n : \"\"}\n ${this.agencyName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim()\n .length > 0\n ? \"\"\n : \"main\"}\"\n >\n ${this.agencyName}\n </div> `\n : \"\"}\n </div>\n `\n : html`<a\n class=\"nys-globalheader__name-container-link\"\n href=${this.homepageLink?.trim()}\n >\n <div class=\"nys-globalheader__name-container\">\n ${this.appName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__appName nys-globalheader__name\"\n >\n ${this.appName}\n </div> `\n : \"\"}\n ${this.agencyName?.trim().length > 0\n ? html`<div\n class=\"nys-globalheader__agencyName nys-globalheader__name ${this.appName?.trim()\n .length > 0\n ? \"\"\n : \"main\"}\"\n >\n ${this.agencyName}\n </div> `\n : \"\"}\n </div>\n </a>`}\n <div class=\"nys-globalheader__content\"></div>\n <slot\n style=\"display: none;\"\n @slotchange=\"${this._handleListSlotChange}\"\n ></slot>\n <slot name=\"user-actions\"></slot>\n </div>\n </header>\n <div\n class=\"nys-globalheader__content-mobile ${this.isMobileMenuOpen\n ? \"\"\n : \"close\"}\"\n ></div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-globalheader\")) {\n customElements.define(\"nys-globalheader\", NysGlobalHeader);\n}\n"],"names":["_NysGlobalHeader","LitElement","container","links","currentUrl","bestMatch","a","linkPath","slot","assignedNodes","node","containerMobile","nodeInline","nodeMobile","href","event","ahref","li","html","unsafeCSS","styles","NysGlobalHeader","__decorateClass","property","state"],"mappings":";;;;;;;;AAqBO,MAAMA,IAAN,MAAMA,UAAwBC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAGuB,KAAA,UAAU,IACV,KAAA,aAAa,IACb,KAAA,eAAe,IAClC,KAAQ,mBAAmB,IAC3B,KAAQ,iBAAiB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOlC,eAAe;AAEb,IADa,KAAK,YAAY,cAA+B,MAAM,GAC7D,iBAAiB,cAAc,MAAM,KAAK,uBAAuB,GACvE,KAAK,sBAAA,GAEL,KAAK,kBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,qBAAqBC,GAAwB;AACnD,UAAMC,IAAQ,MAAM,KAAKD,EAAU,iBAAiB,GAAG,CAAC,GAClDE,IAAa,OAAO,SAAS,SAAS,QAAQ,QAAQ,EAAE,KAAK;AAEnE,QAAIC,IAAwD;AAAA,MAC1D,IAAI;AAAA,MACJ,QAAQ;AAAA,IAAA;AAGV,IAAAF,EAAM,QAAQ,CAACG,MAAM;AACnB,YAAMC,IAAW,KAAK,eAAeD,EAAE,aAAa,MAAM,CAAC;AAC3D,MAAKC,MAEDA,MAAa,OAAOH,MAAe,MACrCC,IAAY,EAAE,IAAIC,EAAE,QAAQ,IAAI,GAAG,QAAQ,EAAA,IAE3CF,EAAW,WAAWG,CAAQ,KAC9BA,EAAS,SAASF,EAAU,WAE5BA,IAAY;AAAA,QACV,IAAIC,EAAE,QAAQ,IAAI;AAAA,QAClB,QAAQC,EAAS;AAAA,MAAA;AAAA,IAGvB,CAAC,GAGDJ,EAAM,QAAQ,CAACG,MAAMA,EAAE,QAAQ,IAAI,GAAG,UAAU,OAAO,QAAQ,CAAC,GAGhED,EAAU,IAAI,UAAU,IAAI,QAAQ;AAAA,EACtC;AAAA;AAAA,EAGA,MAAc,wBAAwB;AACpC,UAAMG,IAAO,KAAK,YAAY;AAAA,MAC5B;AAAA,IAAA;AAGF,QAAI,CAACA,EAAM;AAEX,UAAMC,IAAgBD,EACnB,cAAc,EAAE,SAAS,GAAA,CAAM,EAC/B,OAAO,CAACE,MAASA,EAAK,aAAa,KAAK,YAAY;AAEvD,SAAK,iBAAiBD,EAAc,SAAS,GAE7C,MAAM,QAAQ,QAAA;AAGd,UAAMP,IAAY,KAAK,YAAY;AAAA,MACjC;AAAA,IAAA,GAGIS,IAAkB,KAAK,YAAY;AAAA,MACvC;AAAA,IAAA;AAGF,IAAI,CAACT,KAAa,CAACS,MAGnBT,EAAU,YAAY,IACtBS,EAAgB,YAAY,IAG5BF,EAAc,QAAQ,CAACC,MAAS;AAC9B,UAAIA,aAAgB,aAAa;AAE/B,cAAME,IAAaF,EAAK,UAAU,EAAI,GAChCG,IAAaH,EAAK,UAAU,EAAI;AAEtC,QAAAR,EAAU,YAAYU,CAAU,GAChCD,EAAgB,YAAYE,CAAU;AAAA,MACxC;AAAA,IACF,CAAC,GAGD,KAAK,qBAAqBX,CAAS,GACnC,KAAK,qBAAqBS,CAAe;AAAA,EAC3C;AAAA;AAAA;AAAA,EAIQ,eAAeG,GAAoC;AACzD,QAAI,CAACA,EAAM,QAAO;AAElB,QAAI;AAEF,aADY,IAAI,IAAIA,GAAM,OAAO,SAAS,MAAM,EACrC,SAAS,QAAQ,QAAQ,EAAE,KAAK;AAAA,IAC7C,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEQ,oBAAoB;AAC1B,SAAK,mBAAmB,CAAC,KAAK;AAAA,EAChC;AAAA;AAAA,EAGQ,oBAAoB;AAK1B,IAJmB,KAAK,YAAY;AAAA,MAClC;AAAA,IAAA,GAGU,QAAQ,CAACZ,MAAc;AACjC,MAAAA,GAAW,iBAAiB,SAAS,CAACa,MAAU;AAE9C,cAAMC,IADSD,EAAM,OACA,QAAQ,GAAG;AAEhC,YAAI,CAACC,EAAO;AAGZ,QAAAd,EACG,iBAAiB,WAAW,EAC5B,QAAQ,CAACe,MAAOA,EAAG,UAAU,OAAO,QAAQ,CAAC;AAGhD,cAAMA,IAAKD,EAAM,QAAQ,IAAI;AAC7B,QAAIC,KAAIA,EAAG,UAAU,IAAI,QAAQ;AAAA,MACnC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,YAGC,KAAK,iBACHA;AAAA;AAAA;AAAA,4BAGc,KAAK,iBAAiB;AAAA;AAAA;AAAA,4BAGtB,KAAK,mBAAmB,UAAU,MAAM;AAAA;AAAA,6BAEvC,KAAK,mBAAmB,UAAU,MAAM;AAAA;AAAA;AAAA,uBAG9C,KAAK,mBAAmB,UAAU,MAAM;AAAA;AAAA;AAAA,wBAIjD,EAAE;AAAA,YACH,KAAK,cAAc,KAAA,IAsBlBA;AAAA;AAAA,uBAES,KAAK,cAAc,KAAA,CAAM;AAAA;AAAA;AAAA,oBAG5B,KAAK,SAAS,KAAA,EAAO,SAAS,IAC5BA;AAAA;AAAA;AAAA,0BAGI,KAAK,OAAO;AAAA,iCAEhB,EAAE;AAAA,oBACJ,KAAK,YAAY,KAAA,EAAO,SAAS,IAC/BA;AAAA,qFAC+D,KAAK,SAAS,KAAA,EACxE,SAAS,IACR,KACA,MAAM;AAAA;AAAA,0BAER,KAAK,UAAU;AAAA,iCAEnB,EAAE;AAAA;AAAA,sBA1CVA;AAAA;AAAA,oBAEM,KAAK,SAAS,KAAA,EAAO,SAAS,IAC5BA;AAAA;AAAA;AAAA,0BAGI,KAAK,OAAO;AAAA,iCAEhB,EAAE;AAAA,oBACJ,KAAK,YAAY,KAAA,EAAO,SAAS,IAC/BA;AAAA,qFAC+D,KAAK,SAAS,KAAA,EACxE,SAAS,IACR,KACA,MAAM;AAAA;AAAA,0BAER,KAAK,UAAU;AAAA,iCAEnB,EAAE;AAAA;AAAA,eA0BL;AAAA;AAAA;AAAA;AAAA,2BAIQ,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kDAMH,KAAK,mBAC3C,KACA,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AAvOElB,EAAO,SAASmB,EAAUC,CAAM;AAD3B,IAAMC,IAANrB;AAGuBsB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfF,EAGiB,WAAA,SAAA;AACAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,YAAA;AACAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfF,EAKiB,WAAA,cAAA;AACXC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GANIH,EAMM,WAAA,kBAAA;AACAC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAPIH,EAOM,WAAA,gBAAA;AAmOd,eAAe,IAAI,kBAAkB,KACxC,eAAe,OAAO,oBAAoBA,CAAe;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-globalheader",
3
- "version": "1.11.4",
3
+ "version": "1.13.0",
4
4
  "description": "The Globalheader component from the NYS Design System.",
5
5
  "module": "dist/nys-globalheader.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.11.4"
26
+ "@nysds/nys-icon": "^1.13.0"
27
27
  },
28
28
  "devDependencies": {
29
29
  "lit": "^3.3.1",