@nysds/nys-globalfooter 1.13.0 → 1.13.1
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-globalfooter.js","sources":["../src/nys-globalfooter.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-globalfooter.scss?inline\";\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"nys-globalfooter.js","sources":["../src/nys-globalfooter.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-globalfooter.scss?inline\";\n\n/**\n * Agency-branded footer with agency name and slotted content sections. Auto-layouts based on content structure.\n *\n * Place above `nys-unavfooter`. Slot contact info, links, or other content. Use `<h4>` elements\n * to create multi-column layouts; without `<h4>`, renders as compact single section.\n *\n * @summary Agency footer with auto-layout for contact info and link sections.\n * @element nys-globalfooter\n *\n * @slot - Footer content (links, contact info). Use `<h4>` for column headings.\n *\n * @example Simple footer\n * ```html\n * <nys-globalfooter agencyName=\"Department of Health\" homepageLink=\"/\">\n * <span>123 Main St, Albany NY</span>\n * <span>info@health.ny.gov</span>\n * </nys-globalfooter>\n * ```\n */\n\nexport class NysGlobalFooter extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Agency name displayed as the footer heading. */\n @property({ type: String }) agencyName = \"\";\n\n /** URL for the agency name link. If empty, name is not clickable. */\n @property({ type: String }) homepageLink = \"\";\n @state() private slotHasContent = true;\n\n /**\n * Lifecycle Methods\n * --------------------------------------------------------------------------\n */\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(); // Initial check\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\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 this.slotHasContent = assignedNodes.length > 0;\n\n // Determine layout based on content structure\n const container = this.shadowRoot?.querySelector(\n \".nys-globalfooter__content\",\n );\n const hasMultipleGroups = assignedNodes?.some(\n (node) => node.tagName === \"H4\",\n );\n\n // Toggle layout classes\n if (container) {\n container.classList.toggle(\"columns\", hasMultipleGroups);\n container.classList.toggle(\"small\", !hasMultipleGroups);\n\n container.innerHTML = \"\";\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);\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 container.appendChild(cleanNode);\n node.remove(); // Remove from light DOM to avoid duplication\n }\n });\n\n const spans = container.querySelectorAll(\"span\");\n spans.forEach((span) => {\n const divider = document.createElement(\"nys-divider\");\n divider.classList.add(\"divider\");\n span.insertAdjacentElement(\"afterend\", divider);\n });\n }\n }\n\n render() {\n return html`\n <footer class=\"nys-globalfooter\">\n <div class=\"nys-globalfooter__main-container\">\n ${!this.homepageLink?.trim()\n ? html`<h2 class=\"nys-globalfooter__name\">${this.agencyName}</h2>`\n : html`<a href=${this.homepageLink?.trim()}>\n <h2 class=\"nys-globalfooter__name\">${this.agencyName}</h2>\n </a>`}\n ${this.slotHasContent\n ? html`<div class=\"nys-globalfooter__content\">\n <slot\n style=\"display: hidden\"\n @slotchange=\"${this._handleSlotChange}\"\n ></slot>\n </div>`\n : \"\"}\n </div>\n </footer>\n `;\n }\n}\n\nif (!customElements.get(\"nys-globalfooter\")) {\n customElements.define(\"nys-globalfooter\", NysGlobalFooter);\n}\n"],"names":["_NysGlobalFooter","LitElement","slot","assignedNodes","node","container","hasMultipleGroups","cleanNode","tag","element","span","divider","html","unsafeCSS","styles","NysGlobalFooter","__decorateClass","property","state"],"mappings":";;;;;;;;AAyBO,MAAMA,IAAN,MAAMA,UAAwBC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIuB,KAAA,aAAa,IAGb,KAAA,eAAe,IAClC,KAAQ,iBAAiB;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOlC,eAAe;AAGb,IADa,KAAK,YAAY,cAA+B,MAAM,GAC7D,iBAAiB,cAAc,MAAM,KAAK,mBAAmB,GACnE,KAAK,kBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,MAAc,oBAAoB;AAChC,UAAMC,IAAO,KAAK,YAAY,cAA+B,MAAM;AACnE,QAAI,CAACA,EAAM;AAEX,UAAMC,IAAgBD,GAClB,cAAc,EAAE,SAAS,GAAA,CAAM,EAChC,OAAO,CAACE,MAASA,EAAK,aAAa,KAAK,YAAY;AAEvD,UAAM,QAAQ,QAAA,GAEd,KAAK,iBAAiBD,EAAc,SAAS;AAG7C,UAAME,IAAY,KAAK,YAAY;AAAA,MACjC;AAAA,IAAA,GAEIC,IAAoBH,GAAe;AAAA,MACvC,CAACC,MAASA,EAAK,YAAY;AAAA,IAAA;AAI7B,IAAIC,MACFA,EAAU,UAAU,OAAO,WAAWC,CAAiB,GACvDD,EAAU,UAAU,OAAO,SAAS,CAACC,CAAiB,GAEtDD,EAAU,YAAY,IAGtBF,EAAc,QAAQ,CAACC,MAAS;AAC9B,UAAIA,EAAK,aAAa,KAAK,cAAc;AACvC,cAAMG,IAAYH,EAAK,UAAU,EAAI;AAIrC,QADsB,CAAC,UAAU,UAAU,UAAU,SAAS,KAAK,EACrD,QAAQ,CAACI,MAAQ;AAC5B,UAAAD,EACE,iBAAiBC,CAAG,EACpB,QAAQ,CAACC,MAAYA,EAAQ,QAAQ;AAAA,QAC1C,CAAC,GACDJ,EAAU,YAAYE,CAAS,GAC/BH,EAAK,OAAA;AAAA,MACP;AAAA,IACF,CAAC,GAEaC,EAAU,iBAAiB,MAAM,EACzC,QAAQ,CAACK,MAAS;AACtB,YAAMC,IAAU,SAAS,cAAc,aAAa;AACpD,MAAAA,EAAQ,UAAU,IAAI,SAAS,GAC/BD,EAAK,sBAAsB,YAAYC,CAAO;AAAA,IAChD,CAAC;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,YAGE,KAAK,cAAc,KAAA,IAElBA,YAAe,KAAK,cAAc,MAAM;AAAA,qDACD,KAAK,UAAU;AAAA,sBAFtDA,uCAA0C,KAAK,UAAU,OAGpD;AAAA,YACP,KAAK,iBACHA;AAAA;AAAA;AAAA,iCAGmB,KAAK,iBAAiB;AAAA;AAAA,wBAGzC,EAAE;AAAA;AAAA;AAAA;AAAA,EAId;AACF;AArGEZ,EAAO,SAASa,EAAUC,CAAM;AAD3B,IAAMC,IAANf;AAIuBgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,YAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfF,EAOiB,WAAA,cAAA;AACXC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GARIH,EAQM,WAAA,gBAAA;AAgGd,eAAe,IAAI,kBAAkB,KACxC,eAAe,OAAO,oBAAoBA,CAAe;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-globalfooter",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.1",
|
|
4
4
|
"description": "The Globalfooter component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-globalfooter.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-divider": "^1.13.
|
|
26
|
+
"@nysds/nys-divider": "^1.13.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|