@nysds/nys-globalheader 1.11.4 → 1.12.0

package/dist/nys-globalheader.js

@@ -10,11 +10,11 @@ const m = class m extends w {
   constructor() {
     super(...arguments), this.appName = "", this.agencyName = "", this.homepageLink = "", this.slotHasContent = !0, this.isMobileMenuOpen = !1;
   }
-  /**************** Lifecycle Methods ****************/
+  // Lifecycle Methods
   firstUpdated() {
     this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", () => this._handleSlotChange()), this._handleSlotChange(), this._listenLinkClicks();
   }
-  /******************** Functions ********************/
+  // Functions
   // Gets called when the slot content changes and directly appends the slotted elements into the shadow DOM
   async _handleSlotChange() {
     const e = this.shadowRoot?.querySelector("slot");

package/dist/nys-globalheader.js.map

@@ -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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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-globalheader",
-  "version": "1.11.4",
+  "version": "1.12.0",
   "description": "The Globalheader component from the NYS Design System.",
   "module": "dist/nys-globalheader.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.11.4"
+    "@nysds/nys-icon": "^1.12.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",