@nysds/nys-globalfooter 1.19.2 → 1.19.4
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/dist/nys-globalfooter.js
CHANGED
|
@@ -5,7 +5,7 @@ import { property as f, state as m } from "lit/decorators.js";
|
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Global Footer Component v1.19.
|
|
8
|
+
* Global Footer Component v1.19.4
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-globalfooter.js","sources":["../src/nys-globalfooter.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } 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
|
|
1
|
+
{"version":3,"file":"nys-globalfooter.js","sources":["../src/nys-globalfooter.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS, nothing } 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 Basic\n * ```html\n * <nys-globalfooter agencyName=\"Office of Information Technology Services\"></nys-globalfooter>\n * ```\n *\n * @example Homepage Link\n * ```html\n * <nys-globalfooter\n * agencyName=\"Office of Information Technology Services\"\n * homepageLink=\"https://its.ny.gov\"\n * ></nys-globalfooter>\n * ```\n *\n * @example Menu Links\n * ```html\n * <nys-globalfooter agencyName=\"Office of Information Technology Services\">\n * <ul>\n * <li><a href=\"https://its.ny.gov\">ITS Home</a></li>\n * <li><a href=\"https://its.ny.gov/about-us\">About ITS</a></li>\n * </ul>\n * </nys-globalfooter>\n * ```\n *\n * @example Column Links\n * ```html\n * <nys-globalfooter agencyName=\"Office of Information Technology Services\">\n * <ul>\n * <li>\n * <span>About</span>\n * <ul>\n * <li><a href=\"https://its.ny.gov/about-us\">About ITS</a></li>\n * <li><a href=\"https://its.ny.gov/contact-us\">Contact</a></li>\n * <li><a href=\"https://its.ny.gov/policies\">Policies</a></li>\n * </ul>\n * </li>\n * <li>\n * <span>Resources</span>\n * <ul>\n * <li><a href=\"https://its.ny.gov/resources\">Developer Tools</a></li>\n * <li><a href=\"https://its.ny.gov/accessibility\">Accessibility</a></li>\n * <li><a href=\"https://its.ny.gov/privacy\">Privacy</a></li>\n * </ul>\n * </li>\n * </ul>\n * </nys-globalfooter>\n * ```\n *\n * @example Subheading\n * ```html\n * <nys-globalfooter\n * agencyName=\"Office of Information Technology Services\"\n * agencySubheading=\"Innovating Technology for a Better New York\"\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 /** Optional subheading displayed below the agency name. */\n @property({ type: String }) agencySubheading = \"\";\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 <div class=\"nys-globalfooter__heading-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.agencySubheading\n ? html`<p class=\"nys-globalfooter__subheading\">\n ${this.agencySubheading}\n </p>`\n : nothing}\n </div>\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","nothing","unsafeCSS","styles","NysGlobalFooter","__decorateClass","property","state"],"mappings":";;;;;;;;;;;;;;;;;;AAwEO,MAAMA,IAAN,MAAMA,UAAwBC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIuB,KAAA,aAAa,IAGb,KAAA,mBAAmB,IAGnB,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;AAAA,cAII,KAAK,cAAc,KAAA,IAElBA,YAAe,KAAK,cAAc,MAAM;AAAA,uDACD,KAAK,UAAU;AAAA,wBAFtDA,uCAA0C,KAAK,UAAU,OAGpD;AAAA,cACP,KAAK,mBACHA;AAAA,oBACI,KAAK,gBAAgB;AAAA,wBAEzBC,CAAO;AAAA;AAAA,YAEX,KAAK,iBACHD;AAAA;AAAA;AAAA,iCAGmB,KAAK,iBAAiB;AAAA;AAAA,wBAGzC,EAAE;AAAA;AAAA;AAAA;AAAA,EAId;AACF;AA/GEZ,EAAO,SAASc,EAAUC,CAAM;AAD3B,IAAMC,IAANhB;AAIuBiB,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,kBAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,cAAA;AACXC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAXIH,EAWM,WAAA,gBAAA;AAuGd,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.19.
|
|
3
|
+
"version": "1.19.4",
|
|
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.19.
|
|
26
|
+
"@nysds/nys-divider": "^1.19.4"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|
|
@@ -40,5 +40,8 @@
|
|
|
40
40
|
],
|
|
41
41
|
"author": "New York State Design System Team",
|
|
42
42
|
"license": "MIT",
|
|
43
|
-
"sideEffects": true
|
|
43
|
+
"sideEffects": true,
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"lit": "^3.3.1"
|
|
46
|
+
}
|
|
44
47
|
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
|
-
/**
|
|
3
|
-
* Agency-branded footer with agency name and slotted content sections. Auto-layouts based on content structure.
|
|
4
|
-
*
|
|
5
|
-
* Place above `nys-unavfooter`. Slot contact info, links, or other content. Use `<h4>` elements
|
|
6
|
-
* to create multi-column layouts; without `<h4>`, renders as compact single section.
|
|
7
|
-
*
|
|
8
|
-
* @summary Agency footer with auto-layout for contact info and link sections.
|
|
9
|
-
* @element nys-globalfooter
|
|
10
|
-
*
|
|
11
|
-
* @slot - Footer content (links, contact info). Use `<h4>` for column headings.
|
|
12
|
-
*
|
|
13
|
-
* @example Simple footer
|
|
14
|
-
* ```html
|
|
15
|
-
* <nys-globalfooter
|
|
16
|
-
* agencyName="Department of Health"
|
|
17
|
-
* homepageLink="/"
|
|
18
|
-
* agencySubheading="Protecting and Promoting the Health of New Yorkers"
|
|
19
|
-
* >
|
|
20
|
-
* <span>123 Main St, Albany NY</span>
|
|
21
|
-
* <span>info@health.ny.gov</span>
|
|
22
|
-
* </nys-globalfooter>
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
export declare class NysGlobalFooter extends LitElement {
|
|
26
|
-
static styles: import("lit").CSSResult;
|
|
27
|
-
/** Agency name displayed as the footer heading. */
|
|
28
|
-
agencyName: string;
|
|
29
|
-
/** Optional subheading displayed below the agency name. */
|
|
30
|
-
agencySubheading: string;
|
|
31
|
-
/** URL for the agency name link. If empty, name is not clickable. */
|
|
32
|
-
homepageLink: string;
|
|
33
|
-
private slotHasContent;
|
|
34
|
-
/**
|
|
35
|
-
* Lifecycle Methods
|
|
36
|
-
* --------------------------------------------------------------------------
|
|
37
|
-
*/
|
|
38
|
-
firstUpdated(): void;
|
|
39
|
-
/**
|
|
40
|
-
* Functions
|
|
41
|
-
* --------------------------------------------------------------------------
|
|
42
|
-
*/
|
|
43
|
-
private _handleSlotChange;
|
|
44
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
45
|
-
}
|