@idds/js 1.0.53 → 1.0.54

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.
@@ -82,95 +82,166 @@ var InaUI = (() => {
82
82
  });
83
83
  }
84
84
 
85
- // src/js/components/stateless/accordion.js
86
- function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
87
- const accordionGroups = document.querySelectorAll(rootSelector);
88
- accordionGroups.forEach((group) => {
89
- const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
90
- const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
91
- accordions.forEach((accordion, _index) => {
92
- const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
93
- const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
94
- const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
95
- if (!toggle || !content || !body) return;
96
- toggle.addEventListener("click", (e) => {
97
- e.stopPropagation();
98
- const isOpen = accordion.classList.contains(
99
- `${PREFIX}-accordion--open`
100
- );
101
- const nextState = !isOpen;
102
- if (isMultiple) {
103
- if (nextState) {
104
- openItem(accordion, toggle, content, body);
105
- } else {
106
- closeItem(accordion, toggle, content, body);
107
- }
108
- } else {
109
- if (nextState) {
110
- accordions.forEach((otherAcc) => {
111
- if (otherAcc !== accordion) {
112
- const otherToggle = otherAcc.querySelector(
113
- `.${PREFIX}-accordion__toggle`
114
- );
115
- const otherContent = otherAcc.querySelector(
116
- `.${PREFIX}-accordion__content`
117
- );
118
- const otherBody = otherAcc.querySelector(
119
- `.${PREFIX}-accordion__body`
120
- );
121
- if (otherToggle && otherContent && otherBody) {
122
- closeItem(otherAcc, otherToggle, otherContent, otherBody);
123
- }
124
- }
125
- });
126
- openItem(accordion, toggle, content, body);
127
- } else {
128
- closeItem(accordion, toggle, content, body);
129
- }
85
+ // src/js/components/stateless/accordion-group.js
86
+ var AccordionGroup = class {
87
+ constructor(element) {
88
+ this.element = element;
89
+ this.items = /* @__PURE__ */ new Map();
90
+ this.itemsArray = [];
91
+ this.isMultiple = element.getAttribute("data-multiple-open") === "true" || element.getAttribute("data-behavior") === "multiple";
92
+ this.openIndexes = [];
93
+ this.element.__inaAccordionGroup = this;
94
+ }
95
+ registerItem(item) {
96
+ const index = this.items.size;
97
+ this.items.set(item.id, index);
98
+ this.itemsArray.push(item);
99
+ if (item.defaultOpen) {
100
+ if (this.isMultiple) {
101
+ if (!this.openIndexes.includes(index)) {
102
+ this.openIndexes.push(index);
130
103
  }
104
+ } else {
105
+ if (this.openIndexes.length === 0) {
106
+ this.openIndexes.push(index);
107
+ }
108
+ }
109
+ }
110
+ return index;
111
+ }
112
+ unregisterItem(item) {
113
+ const index = this.items.get(item.id);
114
+ if (index !== void 0) {
115
+ this.items.delete(item.id);
116
+ this.itemsArray = this.itemsArray.filter((i) => i !== item);
117
+ this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
118
+ const newMap = /* @__PURE__ */ new Map();
119
+ this.itemsArray.forEach((itm, newIdx) => {
120
+ newMap.set(itm.id, newIdx);
131
121
  });
132
- });
133
- });
134
- const standaloneAccordions = document.querySelectorAll(
135
- `.${PREFIX}-accordion:not(.${PREFIX}-accordion-group .${PREFIX}-accordion)`
136
- );
137
- standaloneAccordions.forEach((accordion) => {
138
- const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
139
- const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
140
- const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
141
- if (!toggle || !content || !body) return;
142
- toggle.addEventListener("click", (e) => {
143
- e.stopPropagation();
144
- const isOpen = accordion.classList.contains(`${PREFIX}-accordion--open`);
122
+ this.items = newMap;
123
+ }
124
+ }
125
+ handleItemToggle(index, isOpen) {
126
+ const prevIndexes = [...this.openIndexes];
127
+ let nextIndexes = [];
128
+ if (this.isMultiple) {
145
129
  if (isOpen) {
146
- closeItem(accordion, toggle, content, body);
130
+ if (!prevIndexes.includes(index)) {
131
+ nextIndexes = [...prevIndexes, index];
132
+ } else {
133
+ nextIndexes = prevIndexes;
134
+ }
147
135
  } else {
148
- openItem(accordion, toggle, content, body);
136
+ nextIndexes = prevIndexes.filter((idx) => idx !== index);
149
137
  }
138
+ } else {
139
+ if (isOpen) {
140
+ nextIndexes = [index];
141
+ } else {
142
+ nextIndexes = [];
143
+ }
144
+ }
145
+ this.openIndexes = nextIndexes;
146
+ this.notifyItems();
147
+ }
148
+ isItemOpen(index) {
149
+ return this.openIndexes.includes(index);
150
+ }
151
+ getItemIndex(itemId) {
152
+ return this.items.get(itemId);
153
+ }
154
+ // Notify all children to update their visual state based on new openIndexes
155
+ notifyItems() {
156
+ this.itemsArray.forEach((item, index) => {
157
+ const isOpen = this.openIndexes.includes(index);
158
+ item.setOpenState(isOpen);
150
159
  });
151
- });
152
- }
153
- function openItem(accordion, toggle, content, body) {
154
- accordion.classList.add(`${PREFIX}-accordion--open`);
155
- toggle.setAttribute("aria-expanded", "true");
156
- const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
157
- if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
158
- content.classList.add(`${PREFIX}-accordion__content--open`);
159
- body.classList.add(`${PREFIX}-accordion__body--open`);
160
- if (body) {
161
- body.style.maxHeight = `${body.scrollHeight}px`;
162
160
  }
163
- }
164
- function closeItem(accordion, toggle, content, body) {
165
- accordion.classList.remove(`${PREFIX}-accordion--open`);
166
- toggle.setAttribute("aria-expanded", "false");
167
- const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
168
- if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
169
- content.classList.remove(`${PREFIX}-accordion__content--open`);
170
- body.classList.remove(`${PREFIX}-accordion__body--open`);
171
- if (body) {
172
- body.style.maxHeight = null;
161
+ };
162
+
163
+ // src/js/components/stateless/accordion.js
164
+ var Accordion = class {
165
+ constructor(element) {
166
+ this.element = element;
167
+ this.toggle = element.querySelector(`.${PREFIX}-accordion__toggle`);
168
+ this.content = element.querySelector(`.${PREFIX}-accordion__content`);
169
+ this.body = element.querySelector(`.${PREFIX}-accordion__body`);
170
+ this.icon = element.querySelector(`.${PREFIX}-accordion__icon`);
171
+ if (!this.toggle || !this.content || !this.body) {
172
+ console.warn("[InaUI] Accordion missing required elements", element);
173
+ return;
174
+ }
175
+ this.id = element.id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
176
+ this.defaultOpen = element.getAttribute("data-default-open") === "true" || element.classList.contains(`${PREFIX}-accordion--open`);
177
+ this.isDisabled = element.classList.contains(`${PREFIX}-accordion--disabled`) || this.toggle.hasAttribute("disabled");
178
+ this.group = this.findParentGroup();
179
+ this.index = -1;
180
+ if (this.group) {
181
+ this.index = this.group.registerItem(this);
182
+ }
183
+ this.toggle.addEventListener("click", (e) => this.handleClick(e));
184
+ if (this.group) {
185
+ const isOpen = this.group.isItemOpen(this.index);
186
+ this.setOpenState(isOpen);
187
+ } else {
188
+ this.setOpenState(this.defaultOpen);
189
+ }
173
190
  }
191
+ findParentGroup() {
192
+ let parent = this.element.parentElement;
193
+ while (parent) {
194
+ if (parent.classList.contains(`${PREFIX}-accordion-group`) && parent.__inaAccordionGroup) {
195
+ return parent.__inaAccordionGroup;
196
+ }
197
+ parent = parent.parentElement;
198
+ }
199
+ return null;
200
+ }
201
+ handleClick(e) {
202
+ if (this.isDisabled) return;
203
+ e.stopPropagation();
204
+ const isOpen = this.element.classList.contains(`${PREFIX}-accordion--open`);
205
+ const nextState = !isOpen;
206
+ if (this.group) {
207
+ this.group.handleItemToggle(this.index, nextState);
208
+ } else {
209
+ this.setOpenState(nextState);
210
+ }
211
+ }
212
+ setOpenState(isOpen) {
213
+ if (isOpen) {
214
+ this.element.classList.add(`${PREFIX}-accordion--open`);
215
+ this.toggle.setAttribute("aria-expanded", "true");
216
+ if (this.icon) this.icon.classList.add(`${PREFIX}-accordion__icon--open`);
217
+ this.content.classList.add(`${PREFIX}-accordion__content--open`);
218
+ this.body.classList.add(`${PREFIX}-accordion__body--open`);
219
+ this.body.style.maxHeight = `${this.body.scrollHeight}px`;
220
+ } else {
221
+ this.element.classList.remove(`${PREFIX}-accordion--open`);
222
+ this.toggle.setAttribute("aria-expanded", "false");
223
+ if (this.icon)
224
+ this.icon.classList.remove(`${PREFIX}-accordion__icon--open`);
225
+ this.content.classList.remove(`${PREFIX}-accordion__content--open`);
226
+ this.body.classList.remove(`${PREFIX}-accordion__body--open`);
227
+ this.body.style.maxHeight = null;
228
+ }
229
+ }
230
+ };
231
+ function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
232
+ const accordionGroups = document.querySelectorAll(rootSelector);
233
+ accordionGroups.forEach((groupEl) => {
234
+ if (!groupEl.__inaAccordionGroup) {
235
+ new AccordionGroup(groupEl);
236
+ }
237
+ });
238
+ const accordions = document.querySelectorAll(`.${PREFIX}-accordion`);
239
+ accordions.forEach((accEl) => {
240
+ if (!accEl.__inaAccordion) {
241
+ const acc = new Accordion(accEl);
242
+ accEl.__inaAccordion = acc;
243
+ }
244
+ });
174
245
  }
175
246
 
176
247
  // src/js/components/stateful/datepicker.js
package/dist/index.js CHANGED
@@ -70,95 +70,166 @@ function initToggle(rootSelector = `.${PREFIX}-toggle`) {
70
70
  });
71
71
  }
72
72
 
73
- // src/js/components/stateless/accordion.js
74
- function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
75
- const accordionGroups = document.querySelectorAll(rootSelector);
76
- accordionGroups.forEach((group) => {
77
- const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
78
- const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
79
- accordions.forEach((accordion, _index) => {
80
- const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
81
- const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
82
- const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
83
- if (!toggle || !content || !body) return;
84
- toggle.addEventListener("click", (e) => {
85
- e.stopPropagation();
86
- const isOpen = accordion.classList.contains(
87
- `${PREFIX}-accordion--open`
88
- );
89
- const nextState = !isOpen;
90
- if (isMultiple) {
91
- if (nextState) {
92
- openItem(accordion, toggle, content, body);
93
- } else {
94
- closeItem(accordion, toggle, content, body);
95
- }
96
- } else {
97
- if (nextState) {
98
- accordions.forEach((otherAcc) => {
99
- if (otherAcc !== accordion) {
100
- const otherToggle = otherAcc.querySelector(
101
- `.${PREFIX}-accordion__toggle`
102
- );
103
- const otherContent = otherAcc.querySelector(
104
- `.${PREFIX}-accordion__content`
105
- );
106
- const otherBody = otherAcc.querySelector(
107
- `.${PREFIX}-accordion__body`
108
- );
109
- if (otherToggle && otherContent && otherBody) {
110
- closeItem(otherAcc, otherToggle, otherContent, otherBody);
111
- }
112
- }
113
- });
114
- openItem(accordion, toggle, content, body);
115
- } else {
116
- closeItem(accordion, toggle, content, body);
117
- }
73
+ // src/js/components/stateless/accordion-group.js
74
+ var AccordionGroup = class {
75
+ constructor(element) {
76
+ this.element = element;
77
+ this.items = /* @__PURE__ */ new Map();
78
+ this.itemsArray = [];
79
+ this.isMultiple = element.getAttribute("data-multiple-open") === "true" || element.getAttribute("data-behavior") === "multiple";
80
+ this.openIndexes = [];
81
+ this.element.__inaAccordionGroup = this;
82
+ }
83
+ registerItem(item) {
84
+ const index = this.items.size;
85
+ this.items.set(item.id, index);
86
+ this.itemsArray.push(item);
87
+ if (item.defaultOpen) {
88
+ if (this.isMultiple) {
89
+ if (!this.openIndexes.includes(index)) {
90
+ this.openIndexes.push(index);
118
91
  }
92
+ } else {
93
+ if (this.openIndexes.length === 0) {
94
+ this.openIndexes.push(index);
95
+ }
96
+ }
97
+ }
98
+ return index;
99
+ }
100
+ unregisterItem(item) {
101
+ const index = this.items.get(item.id);
102
+ if (index !== void 0) {
103
+ this.items.delete(item.id);
104
+ this.itemsArray = this.itemsArray.filter((i) => i !== item);
105
+ this.openIndexes = this.openIndexes.filter((idx) => idx !== index).map((idx) => idx > index ? idx - 1 : idx);
106
+ const newMap = /* @__PURE__ */ new Map();
107
+ this.itemsArray.forEach((itm, newIdx) => {
108
+ newMap.set(itm.id, newIdx);
119
109
  });
120
- });
121
- });
122
- const standaloneAccordions = document.querySelectorAll(
123
- `.${PREFIX}-accordion:not(.${PREFIX}-accordion-group .${PREFIX}-accordion)`
124
- );
125
- standaloneAccordions.forEach((accordion) => {
126
- const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
127
- const content = accordion.querySelector(`.${PREFIX}-accordion__content`);
128
- const body = accordion.querySelector(`.${PREFIX}-accordion__body`);
129
- if (!toggle || !content || !body) return;
130
- toggle.addEventListener("click", (e) => {
131
- e.stopPropagation();
132
- const isOpen = accordion.classList.contains(`${PREFIX}-accordion--open`);
110
+ this.items = newMap;
111
+ }
112
+ }
113
+ handleItemToggle(index, isOpen) {
114
+ const prevIndexes = [...this.openIndexes];
115
+ let nextIndexes = [];
116
+ if (this.isMultiple) {
133
117
  if (isOpen) {
134
- closeItem(accordion, toggle, content, body);
118
+ if (!prevIndexes.includes(index)) {
119
+ nextIndexes = [...prevIndexes, index];
120
+ } else {
121
+ nextIndexes = prevIndexes;
122
+ }
135
123
  } else {
136
- openItem(accordion, toggle, content, body);
124
+ nextIndexes = prevIndexes.filter((idx) => idx !== index);
137
125
  }
126
+ } else {
127
+ if (isOpen) {
128
+ nextIndexes = [index];
129
+ } else {
130
+ nextIndexes = [];
131
+ }
132
+ }
133
+ this.openIndexes = nextIndexes;
134
+ this.notifyItems();
135
+ }
136
+ isItemOpen(index) {
137
+ return this.openIndexes.includes(index);
138
+ }
139
+ getItemIndex(itemId) {
140
+ return this.items.get(itemId);
141
+ }
142
+ // Notify all children to update their visual state based on new openIndexes
143
+ notifyItems() {
144
+ this.itemsArray.forEach((item, index) => {
145
+ const isOpen = this.openIndexes.includes(index);
146
+ item.setOpenState(isOpen);
138
147
  });
139
- });
140
- }
141
- function openItem(accordion, toggle, content, body) {
142
- accordion.classList.add(`${PREFIX}-accordion--open`);
143
- toggle.setAttribute("aria-expanded", "true");
144
- const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
145
- if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
146
- content.classList.add(`${PREFIX}-accordion__content--open`);
147
- body.classList.add(`${PREFIX}-accordion__body--open`);
148
- if (body) {
149
- body.style.maxHeight = `${body.scrollHeight}px`;
150
148
  }
151
- }
152
- function closeItem(accordion, toggle, content, body) {
153
- accordion.classList.remove(`${PREFIX}-accordion--open`);
154
- toggle.setAttribute("aria-expanded", "false");
155
- const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
156
- if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
157
- content.classList.remove(`${PREFIX}-accordion__content--open`);
158
- body.classList.remove(`${PREFIX}-accordion__body--open`);
159
- if (body) {
160
- body.style.maxHeight = null;
149
+ };
150
+
151
+ // src/js/components/stateless/accordion.js
152
+ var Accordion = class {
153
+ constructor(element) {
154
+ this.element = element;
155
+ this.toggle = element.querySelector(`.${PREFIX}-accordion__toggle`);
156
+ this.content = element.querySelector(`.${PREFIX}-accordion__content`);
157
+ this.body = element.querySelector(`.${PREFIX}-accordion__body`);
158
+ this.icon = element.querySelector(`.${PREFIX}-accordion__icon`);
159
+ if (!this.toggle || !this.content || !this.body) {
160
+ console.warn("[InaUI] Accordion missing required elements", element);
161
+ return;
162
+ }
163
+ this.id = element.id || `accordion-${Math.random().toString(36).substr(2, 9)}`;
164
+ this.defaultOpen = element.getAttribute("data-default-open") === "true" || element.classList.contains(`${PREFIX}-accordion--open`);
165
+ this.isDisabled = element.classList.contains(`${PREFIX}-accordion--disabled`) || this.toggle.hasAttribute("disabled");
166
+ this.group = this.findParentGroup();
167
+ this.index = -1;
168
+ if (this.group) {
169
+ this.index = this.group.registerItem(this);
170
+ }
171
+ this.toggle.addEventListener("click", (e) => this.handleClick(e));
172
+ if (this.group) {
173
+ const isOpen = this.group.isItemOpen(this.index);
174
+ this.setOpenState(isOpen);
175
+ } else {
176
+ this.setOpenState(this.defaultOpen);
177
+ }
161
178
  }
179
+ findParentGroup() {
180
+ let parent = this.element.parentElement;
181
+ while (parent) {
182
+ if (parent.classList.contains(`${PREFIX}-accordion-group`) && parent.__inaAccordionGroup) {
183
+ return parent.__inaAccordionGroup;
184
+ }
185
+ parent = parent.parentElement;
186
+ }
187
+ return null;
188
+ }
189
+ handleClick(e) {
190
+ if (this.isDisabled) return;
191
+ e.stopPropagation();
192
+ const isOpen = this.element.classList.contains(`${PREFIX}-accordion--open`);
193
+ const nextState = !isOpen;
194
+ if (this.group) {
195
+ this.group.handleItemToggle(this.index, nextState);
196
+ } else {
197
+ this.setOpenState(nextState);
198
+ }
199
+ }
200
+ setOpenState(isOpen) {
201
+ if (isOpen) {
202
+ this.element.classList.add(`${PREFIX}-accordion--open`);
203
+ this.toggle.setAttribute("aria-expanded", "true");
204
+ if (this.icon) this.icon.classList.add(`${PREFIX}-accordion__icon--open`);
205
+ this.content.classList.add(`${PREFIX}-accordion__content--open`);
206
+ this.body.classList.add(`${PREFIX}-accordion__body--open`);
207
+ this.body.style.maxHeight = `${this.body.scrollHeight}px`;
208
+ } else {
209
+ this.element.classList.remove(`${PREFIX}-accordion--open`);
210
+ this.toggle.setAttribute("aria-expanded", "false");
211
+ if (this.icon)
212
+ this.icon.classList.remove(`${PREFIX}-accordion__icon--open`);
213
+ this.content.classList.remove(`${PREFIX}-accordion__content--open`);
214
+ this.body.classList.remove(`${PREFIX}-accordion__body--open`);
215
+ this.body.style.maxHeight = null;
216
+ }
217
+ }
218
+ };
219
+ function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
220
+ const accordionGroups = document.querySelectorAll(rootSelector);
221
+ accordionGroups.forEach((groupEl) => {
222
+ if (!groupEl.__inaAccordionGroup) {
223
+ new AccordionGroup(groupEl);
224
+ }
225
+ });
226
+ const accordions = document.querySelectorAll(`.${PREFIX}-accordion`);
227
+ accordions.forEach((accEl) => {
228
+ if (!accEl.__inaAccordion) {
229
+ const acc = new Accordion(accEl);
230
+ accEl.__inaAccordion = acc;
231
+ }
232
+ });
162
233
  }
163
234
 
164
235
  // src/js/components/stateful/datepicker.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.53",
3
+ "version": "1.0.54",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },