@nysds/nys-accordion 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.
- package/dist/nys-accordion.js +19 -7
- package/dist/nys-accordion.js.map +1 -1
- package/package.json +2 -2
package/dist/nys-accordion.js
CHANGED
|
@@ -9,7 +9,10 @@ var m = Object.defineProperty, c = (d, e, o, l) => {
|
|
|
9
9
|
let x = 0;
|
|
10
10
|
const p = class p extends _ {
|
|
11
11
|
// Code NEED this, don't delete this. This is due to how the <nys-accordion> group is applying bordered to each individual <nys-accordionitem>
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Lifecycle methods
|
|
14
|
+
* --------------------------------------------------------------------------
|
|
15
|
+
*/
|
|
13
16
|
constructor() {
|
|
14
17
|
super(), this.id = "", this.heading = "", this.expanded = !1, this.bordered = !1;
|
|
15
18
|
}
|
|
@@ -25,7 +28,10 @@ const p = class p extends _ {
|
|
|
25
28
|
updated(e) {
|
|
26
29
|
e.has("expanded") && this._updateHeight();
|
|
27
30
|
}
|
|
28
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Functions
|
|
33
|
+
* --------------------------------------------------------------------------
|
|
34
|
+
*/
|
|
29
35
|
_generateUniqueId() {
|
|
30
36
|
return `nys-accordionitem-${Date.now()}-${x++}`;
|
|
31
37
|
}
|
|
@@ -103,7 +109,10 @@ var b = Object.defineProperty, y = (d, e, o, l) => {
|
|
|
103
109
|
};
|
|
104
110
|
let w = 0;
|
|
105
111
|
const h = class h extends _ {
|
|
106
|
-
|
|
112
|
+
/**
|
|
113
|
+
* Lifecycle methods
|
|
114
|
+
* --------------------------------------------------------------------------
|
|
115
|
+
*/
|
|
107
116
|
constructor() {
|
|
108
117
|
super(), this.id = "", this.singleSelect = !1, this.bordered = !1;
|
|
109
118
|
}
|
|
@@ -113,11 +122,14 @@ const h = class h extends _ {
|
|
|
113
122
|
updated(e) {
|
|
114
123
|
e.has("bordered") && this._applyBordered();
|
|
115
124
|
}
|
|
116
|
-
|
|
125
|
+
/**
|
|
126
|
+
* Functions
|
|
127
|
+
* --------------------------------------------------------------------------
|
|
128
|
+
*/
|
|
117
129
|
_generateUniqueId() {
|
|
118
130
|
return `nys-accordionitem-${Date.now()}-${w++}`;
|
|
119
131
|
}
|
|
120
|
-
|
|
132
|
+
_getAccordionItems() {
|
|
121
133
|
return (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
|
|
122
134
|
(l) => l.tagName.toLowerCase() === "nys-accordionitem"
|
|
123
135
|
);
|
|
@@ -125,12 +137,12 @@ const h = class h extends _ {
|
|
|
125
137
|
_onAccordionToggle(e) {
|
|
126
138
|
if (!this.singleSelect) return;
|
|
127
139
|
const o = e.detail.id;
|
|
128
|
-
e.detail.expanded && this.
|
|
140
|
+
e.detail.expanded && this._getAccordionItems().forEach((n) => {
|
|
129
141
|
n.id !== o && n.expanded && (n.expanded = !1);
|
|
130
142
|
});
|
|
131
143
|
}
|
|
132
144
|
_applyBordered() {
|
|
133
|
-
this.
|
|
145
|
+
this._getAccordionItems().forEach((e) => {
|
|
134
146
|
e.bordered = this.bordered;
|
|
135
147
|
});
|
|
136
148
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-accordion.js","sources":["../src/nys-accordionitem.ts","../src/nys-accordion.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-accordion.scss?inline\";\n\nlet accordionItemIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysAccordionItem extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) heading = \"\";\n @property({ type: Boolean, reflect: true }) expanded = false;\n @property({ type: Boolean, reflect: true }) bordered = false; // Code NEED this, don't delete this. This is due to how the <nys-accordion> group is applying bordered to each individual <nys-accordionitem>\n\n /**************** Lifecycle Methods ****************/\n constructor() {\n super();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n }\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n\n /**\n * When the accordion starts expanded but the slot is empty,\n * _updateHeight runs too early and calculates height as 0.\n * Listening for slotchange ensures we recalc after the slot’s\n * content is rendered so the final height is correct.\n */\n if (this.expanded && slot) {\n slot.addEventListener(\"slotchange\", () => {\n this._updateHeight();\n });\n }\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"expanded\")) {\n this._updateHeight();\n }\n }\n\n /******************** Functions ********************/\n private _generateUniqueId() {\n return `nys-accordionitem-${Date.now()}-${accordionItemIdCounter++}`;\n }\n\n private _dispatchEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-accordionitem-toggle\", {\n detail: { id: this.id, heading: this.heading, expanded: this.expanded },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleExpand() {\n this.expanded = !this.expanded;\n this._updateHeight();\n this._dispatchEvent();\n }\n\n private _handleKeydown(e: KeyboardEvent) {\n if (e.key === \" \" || e.key === \"Enter\") {\n e.preventDefault(); // prevent page scroll on space\n this._handleExpand();\n }\n }\n\n // Call this after first render and whenever expanded changes\n @query(\".nys-accordionitem__content\") private _contentContainer!: HTMLElement;\n private _updateHeight() {\n if (!this._contentContainer) return;\n\n if (this.expanded) {\n // Slide down the content by setting a calculated max-height, depending on the panel's height on different screen sizes\n const slotHeight = this._contentContainer.scrollHeight;\n this._contentContainer.style.height = `${slotHeight}px`;\n } else {\n // Collapse\n this._contentContainer.style.height = \"0\";\n this._contentContainer.style.overflow = \"hidden\";\n }\n }\n\n render() {\n const contentId = `${this.id}-content`;\n\n return html`\n <div class=\"nys-accordionitem\">\n <button\n class=\"nys-accordionitem__heading\"\n type=\"button\"\n @click=${this._handleExpand}\n @keydown=${this._handleKeydown}\n aria-expanded=${this.expanded ? \"true\" : \"false\"}\n aria-controls=${contentId}\n >\n <p class=\"nys-accordionitem__heading-title\">${this.heading}</p>\n <nys-icon class=\"expand-icon\" name=\"chevron_down\" size=\"24\"></nys-icon>\n </button>\n </div>\n <div id=${contentId} class=\"nys-accordionitem__content ${this.expanded ? \"expanded\" : \"collapsed\"}\" role=\"region\">\n <div class=\"nys-accordionitem__content-slot-container\">\n <div class=\"nys-accordionitem__content-slot-container-text\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-accordionitem\")) {\n customElements.define(\"nys-accordionitem\", NysAccordionItem);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-accordionitem\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-accordion.scss?inline\";\n\nlet accordionIdCounter = 0; // Counter for generating unique IDs\n\n/**\n * The \"nys-accordion\" is the wrapper that groups individual accordion items within it.\n * The items within is called \"nys-accordionitem\"\n */\nexport class NysAccordion extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: Boolean, reflect: true }) singleSelect = false;\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /**************** Lifecycle Methods ****************/\n constructor() {\n super();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"bordered\")) {\n this._applyBordered();\n }\n }\n\n /******************** Functions ********************/\n private _generateUniqueId() {\n return `nys-accordionitem-${Date.now()}-${accordionIdCounter++}`;\n }\n\n private _getAccordions() {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n const assigned = slot?.assignedElements() || [];\n\n return assigned.filter(\n (el) => el.tagName.toLowerCase() === \"nys-accordionitem\",\n );\n }\n\n private _onAccordionToggle(event: CustomEvent) {\n if (!this.singleSelect) return;\n\n const accordionId = event.detail.id;\n const accordionIsExpanded = event.detail.expanded;\n\n // All accordions that don't match the selected accordion's id is unexpanded.\n // If id match, it is up to the individual accordion to handle the expand logic\n if (accordionIsExpanded) {\n this._getAccordions().forEach((accordion: any) => {\n if (accordion.id !== accordionId && accordion.expanded) {\n accordion.expanded = false;\n }\n });\n }\n }\n\n private _applyBordered() {\n this._getAccordions().forEach((accordion: any) => {\n accordion.bordered = this.bordered;\n });\n }\n\n render() {\n return html`<div\n class=\"nys-accordion\"\n @nys-accordionitem-toggle=${this._onAccordionToggle}\n >\n <slot></slot>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-accordion\")) {\n customElements.define(\"nys-accordion\", NysAccordion);\n}\n"],"names":["accordionItemIdCounter","_NysAccordionItem","LitElement","slot","changedProperties","slotHeight","contentId","html","unsafeCSS","styles","NysAccordionItem","__decorateClass","property","query","accordionIdCounter","_NysAccordion","el","event","accordionId","accordion","NysAccordion"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nys-accordion.js","sources":["../src/nys-accordionitem.ts","../src/nys-accordion.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-accordion.scss?inline\";\n\nlet accordionItemIdCounter = 0;\n\n/**\n * `<nys-accordionitem>` represents a single collapsible item inside a `<nys-accordion>`.\n *\n * @slot - Default slot for the content inside the accordion panel.\n *\n * @event nys-accordionitem-toggle - Fired when the item is expanded or collapsed.\n * @type {CustomEvent<{id: string, heading: string, expanded: boolean}>}\n *\n * Features:\n * - Click or keyboard (Enter/Space) toggles expansion.\n * - Animates height changes when expanding/collapsing.\n */\n\nexport class NysAccordionItem extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) heading = \"\";\n @property({ type: Boolean, reflect: true }) expanded = false;\n @property({ type: Boolean, reflect: true }) bordered = false; // Code NEED this, don't delete this. This is due to how the <nys-accordion> group is applying bordered to each individual <nys-accordionitem>\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n }\n\n firstUpdated() {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n\n /**\n * When the accordion starts expanded, but the slot is empty\n * the _updateHeight() runs too early and calculates height as 0.\n * Listening for slotchange ensures we recalculate after the slot’s\n * content is rendered so the final height is correct.\n */\n if (this.expanded && slot) {\n slot.addEventListener(\"slotchange\", () => {\n this._updateHeight();\n });\n }\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"expanded\")) {\n this._updateHeight();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _generateUniqueId() {\n return `nys-accordionitem-${Date.now()}-${accordionItemIdCounter++}`;\n }\n\n private _dispatchEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-accordionitem-toggle\", {\n detail: { id: this.id, heading: this.heading, expanded: this.expanded },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleExpand() {\n this.expanded = !this.expanded;\n this._updateHeight();\n this._dispatchEvent();\n }\n\n private _handleKeydown(e: KeyboardEvent) {\n if (e.key === \" \" || e.key === \"Enter\") {\n e.preventDefault(); // prevent page scroll on space\n this._handleExpand();\n }\n }\n\n // Call this after first render and whenever expanded changes\n @query(\".nys-accordionitem__content\") private _contentContainer!: HTMLElement;\n private _updateHeight() {\n if (!this._contentContainer) return;\n\n if (this.expanded) {\n // Slide down the content by setting a calculated max-height, depending on the panel's height on different screen sizes\n const slotHeight = this._contentContainer.scrollHeight;\n this._contentContainer.style.height = `${slotHeight}px`;\n } else {\n // Collapse\n this._contentContainer.style.height = \"0\";\n this._contentContainer.style.overflow = \"hidden\";\n }\n }\n\n render() {\n const contentId = `${this.id}-content`;\n\n return html`\n <div class=\"nys-accordionitem\">\n <button\n class=\"nys-accordionitem__heading\"\n type=\"button\"\n @click=${this._handleExpand}\n @keydown=${this._handleKeydown}\n aria-expanded=${this.expanded ? \"true\" : \"false\"}\n aria-controls=${contentId}\n >\n <p class=\"nys-accordionitem__heading-title\">${this.heading}</p>\n <nys-icon class=\"expand-icon\" name=\"chevron_down\" size=\"24\"></nys-icon>\n </button>\n </div>\n <div id=${contentId} class=\"nys-accordionitem__content ${this.expanded ? \"expanded\" : \"collapsed\"}\" role=\"region\">\n <div class=\"nys-accordionitem__content-slot-container\">\n <div class=\"nys-accordionitem__content-slot-container-text\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-accordionitem\")) {\n customElements.define(\"nys-accordionitem\", NysAccordionItem);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-accordionitem\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-accordion.scss?inline\";\n\nlet accordionIdCounter = 0;\n\n/**\n * `<nys-accordion>` groups one or more `<nys-accordionitem>` elements.\n *\n * Features:\n * - Optionally enforces single-expanded-item behavior via `singleSelect`.\n * - Propagates shared visual `bordered` property to child items.\n * - Generates a stable unique identifier if none is provided.\n *\n * @slot default - Place one or more `<nys-accordionitem>` components here.\n *\n * @fires nys-accordionitem-toggle - Fired when a child `<nys-accordionitem>` is toggled.\n * Event detail includes `{ id: string, heading: string, expanded: boolean }`.\n */\n\nexport class NysAccordion extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: Boolean, reflect: true }) singleSelect = false;\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n }\n\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"bordered\")) {\n this._applyBordered();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _generateUniqueId() {\n return `nys-accordionitem-${Date.now()}-${accordionIdCounter++}`;\n }\n\n private _getAccordionItems() {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n const assigned = slot?.assignedElements() || [];\n\n return assigned.filter(\n (el) => el.tagName.toLowerCase() === \"nys-accordionitem\",\n );\n }\n\n private _onAccordionToggle(event: CustomEvent) {\n if (!this.singleSelect) return;\n\n const accordionId = event.detail.id;\n const accordionIsExpanded = event.detail.expanded;\n\n // All accordions that don't match the selected accordion's id is unexpanded.\n // If id match, it is up to the individual accordion to handle the expand logic\n if (accordionIsExpanded) {\n this._getAccordionItems().forEach((accordion: any) => {\n if (accordion.id !== accordionId && accordion.expanded) {\n accordion.expanded = false;\n }\n });\n }\n }\n\n private _applyBordered() {\n this._getAccordionItems().forEach((accordion: any) => {\n accordion.bordered = this.bordered;\n });\n }\n\n render() {\n return html`<div\n class=\"nys-accordion\"\n @nys-accordionitem-toggle=${this._onAccordionToggle}\n >\n <slot></slot>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-accordion\")) {\n customElements.define(\"nys-accordion\", NysAccordion);\n}\n"],"names":["accordionItemIdCounter","_NysAccordionItem","LitElement","slot","changedProperties","slotHeight","contentId","html","unsafeCSS","styles","NysAccordionItem","__decorateClass","property","query","accordionIdCounter","_NysAccordion","el","event","accordionId","accordion","NysAccordion"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-accordion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "The Accordion component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-accordion.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.
|
|
26
|
+
"@nysds/nys-icon": "^1.13.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|