wcs-core 7.4.1 → 7.5.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.
Files changed (70) hide show
  1. package/bundle/p-30d83d3d.js +2 -0
  2. package/bundle/{p-8bfdf6f6.js → p-9c2aa87a.js} +2 -2
  3. package/bundle/{p-6bc981dd.js → p-cdc6f6c2.js} +5 -5
  4. package/bundle/p-cdc6f6c2.js.map +1 -0
  5. package/bundle/wcs-accordion.js +1 -1
  6. package/bundle/wcs-accordion.js.map +1 -1
  7. package/bundle/wcs-alert-drawer.js +1 -1
  8. package/bundle/wcs-alert.js +1 -1
  9. package/bundle/wcs-breadcrumb.js +1 -1
  10. package/bundle/wcs-button.js +1 -1
  11. package/bundle/wcs-counter.js +1 -1
  12. package/bundle/wcs-dropdown.js +1 -1
  13. package/bundle/wcs-grid-pagination.js +1 -1
  14. package/bundle/wcs-grid.js +1 -1
  15. package/bundle/wcs-horizontal-stepper.js +1 -1
  16. package/bundle/wcs-modal.js +1 -1
  17. package/composite-elements/{p-a14aec19.js → p-2a51c239.js} +2 -2
  18. package/composite-elements/{p-6dd2b564.js → p-51517fda.js} +2 -2
  19. package/composite-elements/p-51517fda.js.map +1 -0
  20. package/composite-elements/{p-fe1f9cc5.js → p-bc4c736d.js} +2 -2
  21. package/{bundle/p-38e45350.js.map → composite-elements/p-bc4c736d.js.map} +1 -1
  22. package/composite-elements/wcs-accordion.js +1 -1
  23. package/composite-elements/wcs-accordion.js.map +1 -1
  24. package/composite-elements/wcs-alert-drawer.js +1 -1
  25. package/composite-elements/wcs-alert.js +1 -1
  26. package/composite-elements/wcs-breadcrumb.js +1 -1
  27. package/composite-elements/wcs-button.js +1 -1
  28. package/composite-elements/wcs-counter.js +1 -1
  29. package/composite-elements/wcs-dropdown.js +1 -1
  30. package/composite-elements/wcs-grid-pagination.js +1 -1
  31. package/composite-elements/wcs-grid.js +1 -1
  32. package/composite-elements/wcs-horizontal-stepper.js +1 -1
  33. package/composite-elements/wcs-modal.js +1 -1
  34. package/dist/cjs/loader.cjs.js +1 -1
  35. package/dist/cjs/wcs-accordion.cjs.entry.js +3 -2
  36. package/dist/cjs/wcs-accordion.cjs.entry.js.map +1 -1
  37. package/dist/cjs/wcs-button_2.cjs.entry.js +5 -12
  38. package/dist/cjs/wcs-button_2.cjs.entry.js.map +1 -1
  39. package/dist/cjs/wcs.cjs.js +1 -1
  40. package/dist/collection/components/accordion/accordion.e2e.playwright.js +398 -234
  41. package/dist/collection/components/accordion/accordion.e2e.playwright.js.map +1 -1
  42. package/dist/collection/components/accordion/accordion.js +21 -2
  43. package/dist/collection/components/accordion/accordion.js.map +1 -1
  44. package/dist/collection/components/button/button.js +5 -12
  45. package/dist/collection/components/button/button.js.map +1 -1
  46. package/dist/esm/loader.js +1 -1
  47. package/dist/esm/wcs-accordion.entry.js +3 -2
  48. package/dist/esm/wcs-accordion.entry.js.map +1 -1
  49. package/dist/esm/wcs-button_2.entry.js +5 -12
  50. package/dist/esm/wcs-button_2.entry.js.map +1 -1
  51. package/dist/esm/wcs.js +1 -1
  52. package/dist/types/components/accordion/accordion.d.ts +5 -0
  53. package/dist/types/components/button/button.d.ts +1 -2
  54. package/dist/types/components.d.ts +8 -0
  55. package/dist/wcs/{p-204f2722.entry.js → p-450942b1.entry.js} +7 -7
  56. package/dist/wcs/p-450942b1.entry.js.map +1 -0
  57. package/dist/wcs/p-a07381f2.entry.js +2 -0
  58. package/dist/wcs/p-a07381f2.entry.js.map +1 -0
  59. package/dist/wcs/wcs.esm.js +1 -1
  60. package/dist/wcs/wcs.esm.js.map +1 -1
  61. package/package.json +1 -1
  62. package/bundle/p-38e45350.js +0 -2
  63. package/bundle/p-6bc981dd.js.map +0 -1
  64. package/composite-elements/p-6dd2b564.js.map +0 -1
  65. package/dist/wcs/p-204f2722.entry.js.map +0 -1
  66. package/dist/wcs/p-5d598d35.entry.js +0 -2
  67. package/dist/wcs/p-5d598d35.entry.js.map +0 -1
  68. /package/{composite-elements/p-fe1f9cc5.js.map → bundle/p-30d83d3d.js.map} +0 -0
  69. /package/bundle/{p-8bfdf6f6.js.map → p-9c2aa87a.js.map} +0 -0
  70. /package/composite-elements/{p-a14aec19.js.map → p-2a51c239.js.map} +0 -0
package/dist/collection/components/accordion/accordion.e2e.playwright.js CHANGED
@@ -2,244 +2,408 @@ import { setWcsContent } from "../../utils/playwright/test";
2
2
  import { test } from "@stencil/playwright";
3
3
  import { expect } from "@playwright/test";
4
4
  test.describe('accordion', () => {
5
- test('should open and close accordion panels', async ({ page }) => {
6
- // Given
7
- await setWcsContent(page, `
8
- <wcs-accordion>
9
- <wcs-accordion-panel>
10
- <wcs-accordion-header>Panel 1</wcs-accordion-header>
11
- <wcs-accordion-content>Content 1</wcs-accordion-content>
12
- </wcs-accordion-panel>
13
- <wcs-accordion-panel>
14
- <wcs-accordion-header>Panel 2</wcs-accordion-header>
15
- <wcs-accordion-content>Content 2</wcs-accordion-content>
16
- </wcs-accordion-panel>
17
- </wcs-accordion>
18
- `);
19
- const panels = page.locator('wcs-accordion-panel');
20
- // When
21
- await panels.nth(0).click();
22
- await page.waitForChanges();
23
- // Then
24
- await expect(panels.nth(0)).toHaveJSProperty('open', true);
25
- await expect(panels.nth(1)).toHaveJSProperty('open', false);
26
- });
27
- test('should close other panels when opening a new one at the same level', async ({ page }) => {
28
- // Given
29
- await setWcsContent(page, `
30
- <wcs-accordion>
31
- <wcs-accordion-panel>
32
- <wcs-accordion-header>Panel 1</wcs-accordion-header>
33
- <wcs-accordion-content>Content 1</wcs-accordion-content>
34
- </wcs-accordion-panel>
35
- <wcs-accordion-panel>
36
- <wcs-accordion-header>Panel 2</wcs-accordion-header>
37
- <wcs-accordion-content>Content 2</wcs-accordion-content>
38
- </wcs-accordion-panel>
39
- </wcs-accordion>
40
- `);
41
- const panels = page.locator('wcs-accordion-panel');
42
- // When - Open first panel
43
- await panels.nth(0).click();
44
- await page.waitForChanges();
45
- // Then
46
- await expect(panels.nth(0)).toHaveJSProperty('open', true);
47
- await expect(panels.nth(1)).toHaveJSProperty('open', false);
48
- // When - Open second panel
49
- await panels.nth(1).click();
50
- await page.waitForChanges();
51
- // Then - First panel should be closed
52
- await expect(panels.nth(0)).toHaveJSProperty('open', false);
53
- await expect(panels.nth(1)).toHaveJSProperty('open', true);
54
- });
55
- test('should not close parent accordion when opening nested accordion', async ({ page }) => {
56
- // Given
57
- await setWcsContent(page, `
58
- <wcs-accordion>
59
- <wcs-accordion-panel>
60
- <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
61
- <wcs-accordion-content>
62
- <p>Parent content</p>
63
- <wcs-accordion>
64
- <wcs-accordion-panel>
65
- <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
66
- <wcs-accordion-content>Child content 1</wcs-accordion-content>
67
- </wcs-accordion-panel>
68
- <wcs-accordion-panel>
69
- <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
70
- <wcs-accordion-content>Child content 2</wcs-accordion-content>
71
- </wcs-accordion-panel>
72
- </wcs-accordion>
73
- </wcs-accordion-content>
74
- </wcs-accordion-panel>
75
- <wcs-accordion-panel>
76
- <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
77
- <wcs-accordion-content>Parent content 2</wcs-accordion-content>
78
- </wcs-accordion-panel>
79
- </wcs-accordion>
80
- `);
81
- const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');
82
- // When - Open parent panel first
83
- await parentPanels.nth(0).click();
84
- await page.waitForChanges();
85
- // Then
86
- await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
87
- // When - Open nested accordion panel
88
- const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');
89
- await nestedPanels.nth(0).click();
90
- await page.waitForChanges();
91
- // Then - Parent should remain open, nested panel should be open
92
- await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
93
- await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);
94
- });
95
- test('should not close nested accordions when opening another parent panel', async ({ page }) => {
96
- // Given
97
- await setWcsContent(page, `
98
- <wcs-accordion id="parent-accordion">
99
- <wcs-accordion-panel>
100
- <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
101
- <wcs-accordion-content>
102
- <wcs-accordion>
103
- <wcs-accordion-panel>
104
- <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
105
- <wcs-accordion-content>Child content 1</wcs-accordion-content>
106
- </wcs-accordion-panel>
107
- </wcs-accordion>
108
- </wcs-accordion-content>
109
- </wcs-accordion-panel>
110
- <wcs-accordion-panel>
111
- <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
112
- <wcs-accordion-content>
113
- <wcs-accordion>
114
- <wcs-accordion-panel>
115
- <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
116
- <wcs-accordion-content>Child content 2</wcs-accordion-content>
117
- </wcs-accordion-panel>
118
- </wcs-accordion>
119
- </wcs-accordion-content>
120
- </wcs-accordion-panel>
121
- </wcs-accordion>
122
- `);
123
- const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');
124
- // When - Open first parent and its nested panel
125
- await parentPanels.nth(0).click();
126
- await page.waitForChanges();
127
- const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
128
- await firstNestedPanel.click();
129
- await page.waitForChanges();
130
- // Then
131
- await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
132
- await expect(firstNestedPanel).toHaveJSProperty('open', true);
133
- // When - Open second parent
134
- await parentPanels.nth(1).click();
135
- await page.waitForChanges();
136
- const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');
137
- // Then - First parent should close but nested panel state should be preserved
138
- await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);
139
- await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);
140
- await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state
141
- await expect(secondNestedPanel).toHaveJSProperty('open', false);
5
+ test.describe('common behavior', () => {
6
+ test('should open and close accordion panels', async ({ page }) => {
7
+ // Given
8
+ await setWcsContent(page, `
9
+ <wcs-accordion>
10
+ <wcs-accordion-panel>
11
+ <wcs-accordion-header>Panel 1</wcs-accordion-header>
12
+ <wcs-accordion-content>Content 1</wcs-accordion-content>
13
+ </wcs-accordion-panel>
14
+ <wcs-accordion-panel>
15
+ <wcs-accordion-header>Panel 2</wcs-accordion-header>
16
+ <wcs-accordion-content>Content 2</wcs-accordion-content>
17
+ </wcs-accordion-panel>
18
+ </wcs-accordion>
19
+ `);
20
+ const panels = page.locator('wcs-accordion-panel');
21
+ // When
22
+ await panels.nth(0).click();
23
+ await page.waitForChanges();
24
+ // Then
25
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
26
+ await expect(panels.nth(1)).toHaveJSProperty('open', false);
27
+ });
28
+ test('should handle deeply nested accordions independently', async ({ page }) => {
29
+ // Given
30
+ await setWcsContent(page, `
31
+ <wcs-accordion id="level1-accordion">
32
+ <wcs-accordion-panel id="level1-panel">
33
+ <wcs-accordion-header>Level 1</wcs-accordion-header>
34
+ <wcs-accordion-content>
35
+ <wcs-accordion id="level2-accordion">
36
+ <wcs-accordion-panel id="level2-panel">
37
+ <wcs-accordion-header>Level 2</wcs-accordion-header>
38
+ <wcs-accordion-content>
39
+ <wcs-accordion id="level3-accordion">
40
+ <wcs-accordion-panel id="level3-panel">
41
+ <wcs-accordion-header>Level 3</wcs-accordion-header>
42
+ <wcs-accordion-content>Deep content</wcs-accordion-content>
43
+ </wcs-accordion-panel>
44
+ </wcs-accordion>
45
+ </wcs-accordion-content>
46
+ </wcs-accordion-panel>
47
+ </wcs-accordion>
48
+ </wcs-accordion-content>
49
+ </wcs-accordion-panel>
50
+ </wcs-accordion>
51
+ `);
52
+ // When - Open all levels progressively
53
+ const level1Panel = page.locator('#level1-panel');
54
+ await level1Panel.click();
55
+ await page.waitForChanges();
56
+ const level2Panel = page.locator('#level2-panel');
57
+ await level2Panel.click();
58
+ await page.waitForChanges();
59
+ const level3Panel = page.locator('#level3-panel');
60
+ await level3Panel.click();
61
+ await page.waitForChanges();
62
+ // Then - All levels should be open
63
+ await expect(level1Panel).toHaveJSProperty('open', true);
64
+ await expect(level2Panel).toHaveJSProperty('open', true);
65
+ await expect(level3Panel).toHaveJSProperty('open', true);
66
+ });
142
67
  });
143
- test('should handle deeply nested accordions independently', async ({ page, }) => {
144
- // Given
145
- await setWcsContent(page, `
146
- <wcs-accordion id="level1-accordion">
147
- <wcs-accordion-panel id="level1-panel">
148
- <wcs-accordion-header>Level 1</wcs-accordion-header>
149
- <wcs-accordion-content>
150
- <wcs-accordion id="level2-accordion">
151
- <wcs-accordion-panel id="level2-panel">
152
- <wcs-accordion-header>Level 2</wcs-accordion-header>
153
- <wcs-accordion-content>
154
- <wcs-accordion id="level3-accordion">
155
- <wcs-accordion-panel id="level3-panel">
156
- <wcs-accordion-header>Level 3</wcs-accordion-header>
157
- <wcs-accordion-content>Deep content</wcs-accordion-content>
158
- </wcs-accordion-panel>
159
- </wcs-accordion>
160
- </wcs-accordion-content>
161
- </wcs-accordion-panel>
162
- </wcs-accordion>
163
- </wcs-accordion-content>
164
- </wcs-accordion-panel>
165
- </wcs-accordion>
166
- `);
167
- // When - Open all levels progressively
168
- const level1Panel = page.locator('#level1-panel');
169
- await level1Panel.click();
170
- await page.waitForChanges();
171
- const level2Panel = page.locator('#level2-panel');
172
- await level2Panel.click();
173
- await page.waitForChanges();
174
- const level3Panel = page.locator('#level3-panel');
175
- await level3Panel.click();
176
- await page.waitForChanges();
177
- // Then - All levels should be open
178
- await expect(level1Panel).toHaveJSProperty('open', true);
179
- await expect(level2Panel).toHaveJSProperty('open', true);
180
- await expect(level3Panel).toHaveJSProperty('open', true);
68
+ test.describe('single expansion mode (default)', () => {
69
+ test('should close other panels when opening a new one at the same level', async ({ page }) => {
70
+ // Given
71
+ await setWcsContent(page, `
72
+ <wcs-accordion>
73
+ <wcs-accordion-panel>
74
+ <wcs-accordion-header>Panel 1</wcs-accordion-header>
75
+ <wcs-accordion-content>Content 1</wcs-accordion-content>
76
+ </wcs-accordion-panel>
77
+ <wcs-accordion-panel>
78
+ <wcs-accordion-header>Panel 2</wcs-accordion-header>
79
+ <wcs-accordion-content>Content 2</wcs-accordion-content>
80
+ </wcs-accordion-panel>
81
+ </wcs-accordion>
82
+ `);
83
+ const panels = page.locator('wcs-accordion-panel');
84
+ // When - Open first panel
85
+ await panels.nth(0).click();
86
+ await page.waitForChanges();
87
+ // Then
88
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
89
+ await expect(panels.nth(1)).toHaveJSProperty('open', false);
90
+ // When - Open second panel
91
+ await panels.nth(1).click();
92
+ await page.waitForChanges();
93
+ // Then - First panel should be closed
94
+ await expect(panels.nth(0)).toHaveJSProperty('open', false);
95
+ await expect(panels.nth(1)).toHaveJSProperty('open', true);
96
+ });
97
+ test('should not close parent accordion when opening nested accordion', async ({ page }) => {
98
+ // Given
99
+ await setWcsContent(page, `
100
+ <wcs-accordion>
101
+ <wcs-accordion-panel>
102
+ <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
103
+ <wcs-accordion-content>
104
+ <p>Parent content</p>
105
+ <wcs-accordion>
106
+ <wcs-accordion-panel>
107
+ <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
108
+ <wcs-accordion-content>Child content 1</wcs-accordion-content>
109
+ </wcs-accordion-panel>
110
+ <wcs-accordion-panel>
111
+ <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
112
+ <wcs-accordion-content>Child content 2</wcs-accordion-content>
113
+ </wcs-accordion-panel>
114
+ </wcs-accordion>
115
+ </wcs-accordion-content>
116
+ </wcs-accordion-panel>
117
+ <wcs-accordion-panel>
118
+ <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
119
+ <wcs-accordion-content>Parent content 2</wcs-accordion-content>
120
+ </wcs-accordion-panel>
121
+ </wcs-accordion>
122
+ `);
123
+ const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');
124
+ // When - Open parent panel first
125
+ await parentPanels.nth(0).click();
126
+ await page.waitForChanges();
127
+ // Then
128
+ await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
129
+ // When - Open nested accordion panel
130
+ const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');
131
+ await nestedPanels.nth(0).click();
132
+ await page.waitForChanges();
133
+ // Then - Parent should remain open, nested panel should be open
134
+ await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
135
+ await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);
136
+ });
137
+ test('should not close nested accordions when opening another parent panel', async ({ page }) => {
138
+ // Given
139
+ await setWcsContent(page, `
140
+ <wcs-accordion id="parent-accordion">
141
+ <wcs-accordion-panel>
142
+ <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
143
+ <wcs-accordion-content>
144
+ <wcs-accordion>
145
+ <wcs-accordion-panel>
146
+ <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
147
+ <wcs-accordion-content>Child content 1</wcs-accordion-content>
148
+ </wcs-accordion-panel>
149
+ </wcs-accordion>
150
+ </wcs-accordion-content>
151
+ </wcs-accordion-panel>
152
+ <wcs-accordion-panel>
153
+ <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
154
+ <wcs-accordion-content>
155
+ <wcs-accordion>
156
+ <wcs-accordion-panel>
157
+ <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
158
+ <wcs-accordion-content>Child content 2</wcs-accordion-content>
159
+ </wcs-accordion-panel>
160
+ </wcs-accordion>
161
+ </wcs-accordion-content>
162
+ </wcs-accordion-panel>
163
+ </wcs-accordion>
164
+ `);
165
+ const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');
166
+ // When - Open first parent and its nested panel
167
+ await parentPanels.nth(0).click();
168
+ await page.waitForChanges();
169
+ const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
170
+ await firstNestedPanel.click();
171
+ await page.waitForChanges();
172
+ // Then
173
+ await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
174
+ await expect(firstNestedPanel).toHaveJSProperty('open', true);
175
+ // When - Open second parent
176
+ await parentPanels.nth(1).click();
177
+ await page.waitForChanges();
178
+ const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');
179
+ // Then - First parent should close but nested panel state should be preserved
180
+ await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);
181
+ await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);
182
+ await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state
183
+ await expect(secondNestedPanel).toHaveJSProperty('open', false);
184
+ });
185
+ test('should close other panels when dynamically adding a new open panel', async ({ page }) => {
186
+ // Given
187
+ await setWcsContent(page, `
188
+ <wcs-accordion id="parent-accordion">
189
+ <wcs-accordion-panel id="parent-panel">
190
+ <wcs-accordion-header>Configuration générale</wcs-accordion-header>
191
+ <wcs-accordion-content>
192
+ <wcs-accordion id="nested-accordion">
193
+ <wcs-accordion-panel id="static-panel">
194
+ <wcs-accordion-header>Paramètres utilisateur</wcs-accordion-header>
195
+ <wcs-accordion-content>Gestion des préférences utilisateur</wcs-accordion-content>
196
+ </wcs-accordion-panel>
197
+ </wcs-accordion>
198
+ </wcs-accordion-content>
199
+ </wcs-accordion-panel>
200
+ </wcs-accordion>
201
+ `);
202
+ // When - Open parent panel first
203
+ const parentPanel = page.locator('#parent-panel');
204
+ await parentPanel.click();
205
+ await page.waitForChanges();
206
+ // Then
207
+ await expect(parentPanel).toHaveJSProperty('open', true);
208
+ // When - Add first dynamic panel with open=true
209
+ await page.evaluate(() => {
210
+ const nestedAccordion = document.querySelector('#nested-accordion');
211
+ const dynamicPanel1 = document.createElement('wcs-accordion-panel');
212
+ dynamicPanel1.id = 'dynamic-panel-1';
213
+ dynamicPanel1.setAttribute('open', 'true');
214
+ dynamicPanel1.innerHTML = `
215
+ <wcs-accordion-header>Panel dynamique #1</wcs-accordion-header>
216
+ <wcs-accordion-content>Contenu dynamique 1</wcs-accordion-content>
217
+ `;
218
+ nestedAccordion.appendChild(dynamicPanel1);
219
+ });
220
+ await page.waitForChanges();
221
+ const staticPanel = page.locator('#static-panel');
222
+ const dynamicPanel1 = page.locator('#dynamic-panel-1');
223
+ // Then - Static panel should be closed, dynamic panel 1 should be open
224
+ await expect(staticPanel).toHaveJSProperty('open', false);
225
+ await expect(dynamicPanel1).toHaveJSProperty('open', true);
226
+ // When - Add second dynamic panel with open=true
227
+ await page.evaluate(() => {
228
+ const nestedAccordion = document.querySelector('#nested-accordion');
229
+ const dynamicPanel2 = document.createElement('wcs-accordion-panel');
230
+ dynamicPanel2.id = 'dynamic-panel-2';
231
+ dynamicPanel2.setAttribute('open', 'true');
232
+ dynamicPanel2.innerHTML = `
233
+ <wcs-accordion-header>Panel dynamique #2</wcs-accordion-header>
234
+ <wcs-accordion-content>Contenu dynamique 2</wcs-accordion-content>
235
+ `;
236
+ nestedAccordion.appendChild(dynamicPanel2);
237
+ });
238
+ await page.waitForChanges();
239
+ const dynamicPanel2 = page.locator('#dynamic-panel-2');
240
+ // Then - Dynamic panel 1 should be closed, dynamic panel 2 should be open
241
+ await expect(staticPanel).toHaveJSProperty('open', false);
242
+ await expect(dynamicPanel1).toHaveJSProperty('open', false);
243
+ await expect(dynamicPanel2).toHaveJSProperty('open', true);
244
+ // And - Parent panel should remain open (different accordion level)
245
+ await expect(parentPanel).toHaveJSProperty('open', true);
246
+ });
181
247
  });
182
- test('should close other panels when dynamically adding a new open panel', async ({ page }) => {
183
- // Given
184
- await setWcsContent(page, `
185
- <wcs-accordion id="parent-accordion">
186
- <wcs-accordion-panel id="parent-panel">
187
- <wcs-accordion-header>Configuration générale</wcs-accordion-header>
188
- <wcs-accordion-content>
189
- <wcs-accordion id="nested-accordion">
190
- <wcs-accordion-panel id="static-panel">
191
- <wcs-accordion-header>Paramètres utilisateur</wcs-accordion-header>
192
- <wcs-accordion-content>Gestion des préférences utilisateur</wcs-accordion-content>
193
- </wcs-accordion-panel>
194
- </wcs-accordion>
195
- </wcs-accordion-content>
196
- </wcs-accordion-panel>
197
- </wcs-accordion>
198
- `);
199
- // When - Open parent panel first
200
- const parentPanel = page.locator('#parent-panel');
201
- await parentPanel.click();
202
- await page.waitForChanges();
203
- // Then
204
- await expect(parentPanel).toHaveJSProperty('open', true);
205
- // When - Add first dynamic panel with open=true
206
- await page.evaluate(() => {
207
- const nestedAccordion = document.querySelector('#nested-accordion');
208
- const dynamicPanel1 = document.createElement('wcs-accordion-panel');
209
- dynamicPanel1.id = 'dynamic-panel-1';
210
- dynamicPanel1.setAttribute('open', 'true');
211
- dynamicPanel1.innerHTML = `
212
- <wcs-accordion-header>Panel dynamique #1</wcs-accordion-header>
213
- <wcs-accordion-content>Contenu dynamique 1</wcs-accordion-content>
214
- `;
215
- nestedAccordion.appendChild(dynamicPanel1);
248
+ test.describe('multiple expansion mode', () => {
249
+ test('should keep other panels open when opening a new one', async ({ page }) => {
250
+ // Given
251
+ await setWcsContent(page, `
252
+ <wcs-accordion multi-expandable>
253
+ <wcs-accordion-panel>
254
+ <wcs-accordion-header>Panel 1</wcs-accordion-header>
255
+ <wcs-accordion-content>Content 1</wcs-accordion-content>
256
+ </wcs-accordion-panel>
257
+ <wcs-accordion-panel>
258
+ <wcs-accordion-header>Panel 2</wcs-accordion-header>
259
+ <wcs-accordion-content>Content 2</wcs-accordion-content>
260
+ </wcs-accordion-panel>
261
+ <wcs-accordion-panel>
262
+ <wcs-accordion-header>Panel 3</wcs-accordion-header>
263
+ <wcs-accordion-content>Content 3</wcs-accordion-content>
264
+ </wcs-accordion-panel>
265
+ </wcs-accordion>
266
+ `);
267
+ const panels = page.locator('wcs-accordion-panel');
268
+ // When - Open first panel
269
+ await panels.nth(0).click();
270
+ await page.waitForChanges();
271
+ // Then
272
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
273
+ await expect(panels.nth(1)).toHaveJSProperty('open', false);
274
+ await expect(panels.nth(2)).toHaveJSProperty('open', false);
275
+ // When - Open second panel
276
+ await panels.nth(1).click();
277
+ await page.waitForChanges();
278
+ // Then - Both panels should be open
279
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
280
+ await expect(panels.nth(1)).toHaveJSProperty('open', true);
281
+ await expect(panels.nth(2)).toHaveJSProperty('open', false);
282
+ // When - Open third panel
283
+ await panels.nth(2).click();
284
+ await page.waitForChanges();
285
+ // Then - All panels should be open
286
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
287
+ await expect(panels.nth(1)).toHaveJSProperty('open', true);
288
+ await expect(panels.nth(2)).toHaveJSProperty('open', true);
289
+ });
290
+ test('should allow closing individual panels independently', async ({ page }) => {
291
+ // Given
292
+ await setWcsContent(page, `
293
+ <wcs-accordion multi-expandable>
294
+ <wcs-accordion-panel open="true">
295
+ <wcs-accordion-header>Panel 1</wcs-accordion-header>
296
+ <wcs-accordion-content>Content 1</wcs-accordion-content>
297
+ </wcs-accordion-panel>
298
+ <wcs-accordion-panel open="true">
299
+ <wcs-accordion-header>Panel 2</wcs-accordion-header>
300
+ <wcs-accordion-content>Content 2</wcs-accordion-content>
301
+ </wcs-accordion-panel>
302
+ <wcs-accordion-panel open="true">
303
+ <wcs-accordion-header>Panel 3</wcs-accordion-header>
304
+ <wcs-accordion-content>Content 3</wcs-accordion-content>
305
+ </wcs-accordion-panel>
306
+ </wcs-accordion>
307
+ `);
308
+ const panels = page.locator('wcs-accordion-panel');
309
+ // All panels should start open
310
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
311
+ await expect(panels.nth(1)).toHaveJSProperty('open', true);
312
+ await expect(panels.nth(2)).toHaveJSProperty('open', true);
313
+ // When - Close second panel
314
+ await panels.nth(1).click();
315
+ await page.waitForChanges();
316
+ // Then - Only second panel should be closed
317
+ await expect(panels.nth(0)).toHaveJSProperty('open', true);
318
+ await expect(panels.nth(1)).toHaveJSProperty('open', false);
319
+ await expect(panels.nth(2)).toHaveJSProperty('open', true);
320
+ });
321
+ test('should not close other panels when dynamically adding a new open panel', async ({ page }) => {
322
+ // Given
323
+ await setWcsContent(page, `
324
+ <wcs-accordion multi-expandable id="multi-accordion">
325
+ <wcs-accordion-panel id="panel-1" open="true">
326
+ <wcs-accordion-header>Panel 1</wcs-accordion-header>
327
+ <wcs-accordion-content>Content 1</wcs-accordion-content>
328
+ </wcs-accordion-panel>
329
+ <wcs-accordion-panel id="panel-2">
330
+ <wcs-accordion-header>Panel 2</wcs-accordion-header>
331
+ <wcs-accordion-content>Content 2</wcs-accordion-content>
332
+ </wcs-accordion-panel>
333
+ </wcs-accordion>
334
+ `);
335
+ const panel1 = page.locator('#panel-1');
336
+ const panel2 = page.locator('#panel-2');
337
+ // Then - Panel 1 should be open
338
+ await expect(panel1).toHaveJSProperty('open', true);
339
+ await expect(panel2).toHaveJSProperty('open', false);
340
+ // When - Add dynamic panel with open=true
341
+ await page.evaluate(() => {
342
+ const accordion = document.querySelector('#multi-accordion');
343
+ const dynamicPanel = document.createElement('wcs-accordion-panel');
344
+ dynamicPanel.id = 'dynamic-panel';
345
+ dynamicPanel.setAttribute('open', 'true');
346
+ dynamicPanel.innerHTML = `
347
+ <wcs-accordion-header>Panel dynamique</wcs-accordion-header>
348
+ <wcs-accordion-content>Contenu dynamique</wcs-accordion-content>
349
+ `;
350
+ accordion.appendChild(dynamicPanel);
351
+ });
352
+ await page.waitForChanges();
353
+ const dynamicPanel = page.locator('#dynamic-panel');
354
+ // Then - Panel 1 should remain open, dynamic panel should also be open
355
+ await expect(panel1).toHaveJSProperty('open', true);
356
+ await expect(panel2).toHaveJSProperty('open', false);
357
+ await expect(dynamicPanel).toHaveJSProperty('open', true);
216
358
  });
217
- await page.waitForChanges();
218
- const staticPanel = page.locator('#static-panel');
219
- const dynamicPanel1 = page.locator('#dynamic-panel-1');
220
- // Then - Static panel should be closed, dynamic panel 1 should be open
221
- await expect(staticPanel).toHaveJSProperty('open', false);
222
- await expect(dynamicPanel1).toHaveJSProperty('open', true);
223
- // When - Add second dynamic panel with open=true
224
- await page.evaluate(() => {
225
- const nestedAccordion = document.querySelector('#nested-accordion');
226
- const dynamicPanel2 = document.createElement('wcs-accordion-panel');
227
- dynamicPanel2.id = 'dynamic-panel-2';
228
- dynamicPanel2.setAttribute('open', 'true');
229
- dynamicPanel2.innerHTML = `
230
- <wcs-accordion-header>Panel dynamique #2</wcs-accordion-header>
231
- <wcs-accordion-content>Contenu dynamique 2</wcs-accordion-content>
232
- `;
233
- nestedAccordion.appendChild(dynamicPanel2);
359
+ test('should work with nested accordions in multi-expandable mode', async ({ page }) => {
360
+ // Given
361
+ await setWcsContent(page, `
362
+ <wcs-accordion multi-expandable>
363
+ <wcs-accordion-panel id="parent-1">
364
+ <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
365
+ <wcs-accordion-content>
366
+ <wcs-accordion multi-expandable>
367
+ <wcs-accordion-panel id="child-1-1">
368
+ <wcs-accordion-header>Child Panel 1.1</wcs-accordion-header>
369
+ <wcs-accordion-content>Child content 1.1</wcs-accordion-content>
370
+ </wcs-accordion-panel>
371
+ <wcs-accordion-panel id="child-1-2">
372
+ <wcs-accordion-header>Child Panel 1.2</wcs-accordion-header>
373
+ <wcs-accordion-content>Child content 1.2</wcs-accordion-content>
374
+ </wcs-accordion-panel>
375
+ </wcs-accordion>
376
+ </wcs-accordion-content>
377
+ </wcs-accordion-panel>
378
+ <wcs-accordion-panel id="parent-2">
379
+ <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
380
+ <wcs-accordion-content>Parent content 2</wcs-accordion-content>
381
+ </wcs-accordion-panel>
382
+ </wcs-accordion>
383
+ `);
384
+ const parent1 = page.locator('#parent-1');
385
+ const parent2 = page.locator('#parent-2');
386
+ // When - Open both parent panels
387
+ await parent1.click();
388
+ await page.waitForChanges();
389
+ await parent2.click();
390
+ await page.waitForChanges();
391
+ // Then - Both parents should be open
392
+ await expect(parent1).toHaveJSProperty('open', true);
393
+ await expect(parent2).toHaveJSProperty('open', true);
394
+ // When - Open both nested panels
395
+ const child11 = page.locator('#child-1-1');
396
+ const child12 = page.locator('#child-1-2');
397
+ await child11.click();
398
+ await page.waitForChanges();
399
+ await child12.click();
400
+ await page.waitForChanges();
401
+ // Then - All panels should be open
402
+ await expect(parent1).toHaveJSProperty('open', true);
403
+ await expect(parent2).toHaveJSProperty('open', true);
404
+ await expect(child11).toHaveJSProperty('open', true);
405
+ await expect(child12).toHaveJSProperty('open', true);
234
406
  });
235
- await page.waitForChanges();
236
- const dynamicPanel2 = page.locator('#dynamic-panel-2');
237
- // Then - Dynamic panel 1 should be closed, dynamic panel 2 should be open
238
- await expect(staticPanel).toHaveJSProperty('open', false);
239
- await expect(dynamicPanel1).toHaveJSProperty('open', false);
240
- await expect(dynamicPanel2).toHaveJSProperty('open', true);
241
- // And - Parent panel should remain open (different accordion level)
242
- await expect(parentPanel).toHaveJSProperty('open', true);
243
407
  });
244
408
  });
245
409
  //# sourceMappingURL=accordion.e2e.playwright.js.map