wcs-core 7.4.0 → 7.5.0

package/dist/collection/components/accordion/accordion.e2e.playwright.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\nimport { expect } from \"@playwright/test\";\n\ntest.describe('accordion', () => {\n    test('should open and close accordion panels', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>Content 1</wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const panels = page.locator('wcs-accordion-panel');\n\n        // When\n        await panels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(panels.nth(0)).toHaveJSProperty('open', true);\n        await expect(panels.nth(1)).toHaveJSProperty('open', false);\n    });\n\n    test('should close other panels when opening a new one at the same level', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>Content 1</wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const panels = page.locator('wcs-accordion-panel');\n\n        // When - Open first panel\n        await panels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(panels.nth(0)).toHaveJSProperty('open', true);\n        await expect(panels.nth(1)).toHaveJSProperty('open', false);\n\n        // When - Open second panel\n        await panels.nth(1).click();\n        await page.waitForChanges();\n\n        // Then - First panel should be closed\n        await expect(panels.nth(0)).toHaveJSProperty('open', false);\n        await expect(panels.nth(1)).toHaveJSProperty('open', true);\n    });\n\n    test('should not close parent accordion when opening nested accordion', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <p>Parent content</p>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Parent content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');\n\n        // When - Open parent panel first\n        await parentPanels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n\n        // When - Open nested accordion panel\n        const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');\n        await nestedPanels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then - Parent should remain open, nested panel should be open\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n        await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);\n    });\n\n    test('should not close nested accordions when opening another parent panel', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion id=\"parent-accordion\">\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');\n\n        // When - Open first parent and its nested panel\n        await parentPanels.nth(0).click();\n        await page.waitForChanges();\n\n        const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');\n        await firstNestedPanel.click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n        await expect(firstNestedPanel).toHaveJSProperty('open', true);\n\n        // When - Open second parent\n        await parentPanels.nth(1).click();\n        await page.waitForChanges();\n\n        const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');\n\n        // Then - First parent should close but nested panel state should be preserved\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);\n        await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);\n        await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state\n        await expect(secondNestedPanel).toHaveJSProperty('open', false);\n    });\n\n    test('should handle deeply nested accordions independently', async ({ page,  }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion id=\"level1-accordion\">\n                <wcs-accordion-panel id=\"level1-panel\">\n                    <wcs-accordion-header>Level 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion id=\"level2-accordion\">\n                            <wcs-accordion-panel id=\"level2-panel\">\n                                <wcs-accordion-header>Level 2</wcs-accordion-header>\n                                <wcs-accordion-content>\n                                    <wcs-accordion id=\"level3-accordion\">\n                                        <wcs-accordion-panel id=\"level3-panel\">\n                                            <wcs-accordion-header>Level 3</wcs-accordion-header>\n                                            <wcs-accordion-content>Deep content</wcs-accordion-content>\n                                        </wcs-accordion-panel>\n                                    </wcs-accordion>\n                                </wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        // When - Open all levels progressively\n        const level1Panel = page.locator('#level1-panel');\n        await level1Panel.click();\n        await page.waitForChanges();\n\n        const level2Panel = page.locator('#level2-panel');\n        await level2Panel.click();\n        await page.waitForChanges();\n\n        const level3Panel = page.locator('#level3-panel');\n        await level3Panel.click();\n        await page.waitForChanges();\n\n        // Then - All levels should be open\n        await expect(level1Panel).toHaveJSProperty('open', true);\n        await expect(level2Panel).toHaveJSProperty('open', true);\n        await expect(level3Panel).toHaveJSProperty('open', true);\n    });\n});\n"]}
+{"version":3,"file":"accordion.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\nimport { expect } from \"@playwright/test\";\n\ntest.describe('accordion', () => {\n    \n    test.describe('common behavior', () => {\n        test('should open and close accordion panels', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>Content 1</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const panels = page.locator('wcs-accordion-panel');\n\n            // When\n            await panels.nth(0).click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', false);\n        });\n\n        test('should handle deeply nested accordions independently', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion id=\"level1-accordion\">\n                    <wcs-accordion-panel id=\"level1-panel\">\n                        <wcs-accordion-header>Level 1</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <wcs-accordion id=\"level2-accordion\">\n                                <wcs-accordion-panel id=\"level2-panel\">\n                                    <wcs-accordion-header>Level 2</wcs-accordion-header>\n                                    <wcs-accordion-content>\n                                        <wcs-accordion id=\"level3-accordion\">\n                                            <wcs-accordion-panel id=\"level3-panel\">\n                                                <wcs-accordion-header>Level 3</wcs-accordion-header>\n                                                <wcs-accordion-content>Deep content</wcs-accordion-content>\n                                            </wcs-accordion-panel>\n                                        </wcs-accordion>\n                                    </wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            // When - Open all levels progressively\n            const level1Panel = page.locator('#level1-panel');\n            await level1Panel.click();\n            await page.waitForChanges();\n\n            const level2Panel = page.locator('#level2-panel');\n            await level2Panel.click();\n            await page.waitForChanges();\n\n            const level3Panel = page.locator('#level3-panel');\n            await level3Panel.click();\n            await page.waitForChanges();\n\n            // Then - All levels should be open\n            await expect(level1Panel).toHaveJSProperty('open', true);\n            await expect(level2Panel).toHaveJSProperty('open', true);\n            await expect(level3Panel).toHaveJSProperty('open', true);\n        });\n    });\n\n    test.describe('single expansion mode (default)', () => {\n        test('should close other panels when opening a new one at the same level', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>Content 1</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const panels = page.locator('wcs-accordion-panel');\n\n            // When - Open first panel\n            await panels.nth(0).click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', false);\n\n            // When - Open second panel\n            await panels.nth(1).click();\n            await page.waitForChanges();\n\n            // Then - First panel should be closed\n            await expect(panels.nth(0)).toHaveJSProperty('open', false);\n            await expect(panels.nth(1)).toHaveJSProperty('open', true);\n        });\n\n        test('should not close parent accordion when opening nested accordion', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <p>Parent content</p>\n                            <wcs-accordion>\n                                <wcs-accordion-panel>\n                                    <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                                <wcs-accordion-panel>\n                                    <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Parent content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');\n\n            // When - Open parent panel first\n            await parentPanels.nth(0).click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n\n            // When - Open nested accordion panel\n            const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');\n            await nestedPanels.nth(0).click();\n            await page.waitForChanges();\n\n            // Then - Parent should remain open, nested panel should be open\n            await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n            await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);\n        });\n\n        test('should not close nested accordions when opening another parent panel', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion id=\"parent-accordion\">\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <wcs-accordion>\n                                <wcs-accordion-panel>\n                                    <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <wcs-accordion>\n                                <wcs-accordion-panel>\n                                    <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');\n\n            // When - Open first parent and its nested panel\n            await parentPanels.nth(0).click();\n            await page.waitForChanges();\n\n            const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');\n            await firstNestedPanel.click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n            await expect(firstNestedPanel).toHaveJSProperty('open', true);\n\n            // When - Open second parent\n            await parentPanels.nth(1).click();\n            await page.waitForChanges();\n\n            const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');\n\n            // Then - First parent should close but nested panel state should be preserved\n            await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);\n            await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);\n            await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state\n            await expect(secondNestedPanel).toHaveJSProperty('open', false);\n        });\n\n        test('should close other panels when dynamically adding a new open panel', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion id=\"parent-accordion\">\n                    <wcs-accordion-panel id=\"parent-panel\">\n                        <wcs-accordion-header>Configuration générale</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <wcs-accordion id=\"nested-accordion\">\n                                <wcs-accordion-panel id=\"static-panel\">\n                                    <wcs-accordion-header>Paramètres utilisateur</wcs-accordion-header>\n                                    <wcs-accordion-content>Gestion des préférences utilisateur</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            // When - Open parent panel first\n            const parentPanel = page.locator('#parent-panel');\n            await parentPanel.click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(parentPanel).toHaveJSProperty('open', true);\n\n            // When - Add first dynamic panel with open=true\n            await page.evaluate(() => {\n                const nestedAccordion = document.querySelector('#nested-accordion');\n                const dynamicPanel1 = document.createElement('wcs-accordion-panel');\n                dynamicPanel1.id = 'dynamic-panel-1';\n                dynamicPanel1.setAttribute('open', 'true');\n                dynamicPanel1.innerHTML = `\n                    <wcs-accordion-header>Panel dynamique #1</wcs-accordion-header>\n                    <wcs-accordion-content>Contenu dynamique 1</wcs-accordion-content>\n                `;\n                nestedAccordion.appendChild(dynamicPanel1);\n            });\n            await page.waitForChanges();\n\n            const staticPanel = page.locator('#static-panel');\n            const dynamicPanel1 = page.locator('#dynamic-panel-1');\n\n            // Then - Static panel should be closed, dynamic panel 1 should be open\n            await expect(staticPanel).toHaveJSProperty('open', false);\n            await expect(dynamicPanel1).toHaveJSProperty('open', true);\n\n            // When - Add second dynamic panel with open=true\n            await page.evaluate(() => {\n                const nestedAccordion = document.querySelector('#nested-accordion');\n                const dynamicPanel2 = document.createElement('wcs-accordion-panel');\n                dynamicPanel2.id = 'dynamic-panel-2';\n                dynamicPanel2.setAttribute('open', 'true');\n                dynamicPanel2.innerHTML = `\n                    <wcs-accordion-header>Panel dynamique #2</wcs-accordion-header>\n                    <wcs-accordion-content>Contenu dynamique 2</wcs-accordion-content>\n                `;\n                nestedAccordion.appendChild(dynamicPanel2);\n            });\n            await page.waitForChanges();\n\n            const dynamicPanel2 = page.locator('#dynamic-panel-2');\n\n            // Then - Dynamic panel 1 should be closed, dynamic panel 2 should be open\n            await expect(staticPanel).toHaveJSProperty('open', false);\n            await expect(dynamicPanel1).toHaveJSProperty('open', false);\n            await expect(dynamicPanel2).toHaveJSProperty('open', true);\n\n            // And - Parent panel should remain open (different accordion level)\n            await expect(parentPanel).toHaveJSProperty('open', true);\n        });\n    });\n\n    test.describe('multiple expansion mode', () => {\n        test('should keep other panels open when opening a new one', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion multi-expandable>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>Content 1</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel>\n                        <wcs-accordion-header>Panel 3</wcs-accordion-header>\n                        <wcs-accordion-content>Content 3</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const panels = page.locator('wcs-accordion-panel');\n\n            // When - Open first panel\n            await panels.nth(0).click();\n            await page.waitForChanges();\n\n            // Then\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', false);\n            await expect(panels.nth(2)).toHaveJSProperty('open', false);\n\n            // When - Open second panel\n            await panels.nth(1).click();\n            await page.waitForChanges();\n\n            // Then - Both panels should be open\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', true);\n            await expect(panels.nth(2)).toHaveJSProperty('open', false);\n\n            // When - Open third panel\n            await panels.nth(2).click();\n            await page.waitForChanges();\n\n            // Then - All panels should be open\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', true);\n            await expect(panels.nth(2)).toHaveJSProperty('open', true);\n        });\n\n        test('should allow closing individual panels independently', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion multi-expandable>\n                    <wcs-accordion-panel open=\"true\">\n                        <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>Content 1</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel open=\"true\">\n                        <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel open=\"true\">\n                        <wcs-accordion-header>Panel 3</wcs-accordion-header>\n                        <wcs-accordion-content>Content 3</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const panels = page.locator('wcs-accordion-panel');\n\n            // All panels should start open\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', true);\n            await expect(panels.nth(2)).toHaveJSProperty('open', true);\n\n            // When - Close second panel\n            await panels.nth(1).click();\n            await page.waitForChanges();\n\n            // Then - Only second panel should be closed\n            await expect(panels.nth(0)).toHaveJSProperty('open', true);\n            await expect(panels.nth(1)).toHaveJSProperty('open', false);\n            await expect(panels.nth(2)).toHaveJSProperty('open', true);\n        });\n\n        test('should not close other panels when dynamically adding a new open panel', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion multi-expandable id=\"multi-accordion\">\n                    <wcs-accordion-panel id=\"panel-1\" open=\"true\">\n                        <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>Content 1</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel id=\"panel-2\">\n                        <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const panel1 = page.locator('#panel-1');\n            const panel2 = page.locator('#panel-2');\n\n            // Then - Panel 1 should be open\n            await expect(panel1).toHaveJSProperty('open', true);\n            await expect(panel2).toHaveJSProperty('open', false);\n\n            // When - Add dynamic panel with open=true\n            await page.evaluate(() => {\n                const accordion = document.querySelector('#multi-accordion');\n                const dynamicPanel = document.createElement('wcs-accordion-panel');\n                dynamicPanel.id = 'dynamic-panel';\n                dynamicPanel.setAttribute('open', 'true');\n                dynamicPanel.innerHTML = `\n                    <wcs-accordion-header>Panel dynamique</wcs-accordion-header>\n                    <wcs-accordion-content>Contenu dynamique</wcs-accordion-content>\n                `;\n                accordion.appendChild(dynamicPanel);\n            });\n            await page.waitForChanges();\n\n            const dynamicPanel = page.locator('#dynamic-panel');\n\n            // Then - Panel 1 should remain open, dynamic panel should also be open\n            await expect(panel1).toHaveJSProperty('open', true);\n            await expect(panel2).toHaveJSProperty('open', false);\n            await expect(dynamicPanel).toHaveJSProperty('open', true);\n        });\n\n        test('should work with nested accordions in multi-expandable mode', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-accordion multi-expandable>\n                    <wcs-accordion-panel id=\"parent-1\">\n                        <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                        <wcs-accordion-content>\n                            <wcs-accordion multi-expandable>\n                                <wcs-accordion-panel id=\"child-1-1\">\n                                    <wcs-accordion-header>Child Panel 1.1</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 1.1</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                                <wcs-accordion-panel id=\"child-1-2\">\n                                    <wcs-accordion-header>Child Panel 1.2</wcs-accordion-header>\n                                    <wcs-accordion-content>Child content 1.2</wcs-accordion-content>\n                                </wcs-accordion-panel>\n                            </wcs-accordion>\n                        </wcs-accordion-content>\n                    </wcs-accordion-panel>\n                    <wcs-accordion-panel id=\"parent-2\">\n                        <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                        <wcs-accordion-content>Parent content 2</wcs-accordion-content>\n                    </wcs-accordion-panel>\n                </wcs-accordion>\n            `);\n\n            const parent1 = page.locator('#parent-1');\n            const parent2 = page.locator('#parent-2');\n\n            // When - Open both parent panels\n            await parent1.click();\n            await page.waitForChanges();\n            await parent2.click();\n            await page.waitForChanges();\n\n            // Then - Both parents should be open\n            await expect(parent1).toHaveJSProperty('open', true);\n            await expect(parent2).toHaveJSProperty('open', true);\n\n            // When - Open both nested panels\n            const child11 = page.locator('#child-1-1');\n            const child12 = page.locator('#child-1-2');\n            await child11.click();\n            await page.waitForChanges();\n            await child12.click();\n            await page.waitForChanges();\n\n            // Then - All panels should be open\n            await expect(parent1).toHaveJSProperty('open', true);\n            await expect(parent2).toHaveJSProperty('open', true);\n            await expect(child11).toHaveJSProperty('open', true);\n            await expect(child12).toHaveJSProperty('open', true);\n        });\n    });\n});\n"]}

package/dist/collection/components/accordion/accordion.js

@@ -10,6 +10,7 @@ export class Accordion {
         this.hideActionText = true;
         this.highlight = false;
         this.groupContentWithHeader = false;
+        this.multiExpandable = false;
     }
     componentWillLoad() {
         this.accordionPanels = this.getAllAccordionPanelsFromHostElement();
@@ -19,7 +20,7 @@ export class Accordion {
     }
     wcsOpenChangeHandler(event) {
         event.stopImmediatePropagation();
-        if (event.detail) {
+        if (!this.multiExpandable && event.detail) {
             this.closeAllAccordionsExcept(event.target);
         }
     }
@@ -38,8 +39,12 @@ export class Accordion {
             opt.groupContentWithHeader = this.groupContentWithHeader;
         });
     }
+    handleSlotChange() {
+        // Refresh the list of accordion panels to include dynamically added ones
+        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();
+    }
     render() {
-        return (h(Host, { key: '0f1933aeff3cc2d73e6fc5051bac74656e418a02' }, h("slot", { key: 'effc61fd6ac1edcb598d9bc4053363030a1fc2e9' })));
+        return (h(Host, { key: '3d4b5df74c659c9c7b0f29989fb1c100a893e2a2' }, h("slot", { key: '6d6ce20faf1d9e2f93d11373eb97de0806167576', onSlotchange: this.handleSlotChange.bind(this) })));
     }
     getAllAccordionPanelsFromHostElement() {
         return Array.from(this.el.children)
@@ -121,6 +126,24 @@ export class Accordion {
                 "attribute": "group-content-with-header",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "multiExpandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies whether multiple wcs-accordion-panel can be expanded at the same time.\nDefault to false, meaning only one panel can be expanded at a time"
+                },
+                "attribute": "multi-expandable",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAGD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAO,CACJ,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n\n    render() {\n        return (\n            <Host>\n                <slot/>\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;+BAM3B,KAAK;;IAExC,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,gBAAgB;QACpB,yEAAyE;QACzE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;IACvE,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACrD,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Specifies whether multiple wcs-accordion-panel can be expanded at the same time.\n     * Default to false, meaning only one panel can be expanded at a time\n     */\n    @Prop() multiExpandable: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (!this.multiExpandable && event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n    private handleSlotChange() {\n        // Refresh the list of accordion panels to include dynamically added ones\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot onSlotchange={this.handleSlotChange.bind(this)} />\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"]}

package/dist/collection/components/accordion-panel/accordion-panel.js

@@ -45,6 +45,7 @@ export class AccordionPanel {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS));
+        this.openChange(this.open);
     }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeButton, attr, value);
@@ -53,7 +54,7 @@ export class AccordionPanel {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'bcd77b8240481d974555978566472aa28fd374d4' }, h("button", Object.assign({ key: '5fde3c3d7fe95a9a685ef3b9f03b0344fdf7d1be', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '05bd17435fa8821e26d7df49305f2dd331783fb4', name: "header" }), h("span", { key: 'a25b3acc00d4c00675fadfdbabb3c6173d0b9efa', class: "header-action" }, !this.hideActionText && (h("span", { key: '5979042236883a5181471bad831dbe90d7518047' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '8f918ddaef3b7d01c271ce39e0ffe614af33fe8e', up: this.open }))), h("div", { key: '594f012cfe62aa5eb1d8cd2184af7a87ff9f3adb', class: "content", id: "content" }, h("slot", { key: '040d3ba0ec7d879341fc3c7a563f1b3b84659564', name: "content" }))));
+        return (h(Host, { key: 'e8a0d26ab4355bad7a351a672de03a9be460db41' }, h("button", Object.assign({ key: '8a8b6657ffe8508fa8051e836289e262c248e20d', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '7addb6db5a516834dc2f27b7b00b655aa228548e', name: "header" }), h("span", { key: 'f97d43a2c46ea36fb19aacc35744f60abf3467ce', class: "header-action" }, !this.hideActionText && (h("span", { key: 'f40a6b43deccc8a4436d8f267b5763cb75a8c074' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '28f6eb62c4e99c4d5c82afffc222c07e65ac30a2', up: this.open }))), h("div", { key: '7950a5031c2b6319054bb237be7b5b5a709158cd', class: "content", id: "content" }, h("slot", { key: 'bddb7506e586b90552ce6211418d7d2852a431f1', name: "content" }))));
     }
     static get is() { return "wcs-accordion-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/accordion-panel/accordion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAGD,KAAK,CAAC,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QAIF,OAAO,CACH,EAAC,IAAI;YACD,8FAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB;gBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE;gBACrB,6DAAM,KAAK,EAAC,eAAe;oBACtB,CAAC,IAAI,CAAC,cAAc,IAAI,CACrB,+DAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAQ,CAAC;oBAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF;YACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS;gBAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;QACF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAGD,KAAK,CAAC,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QAIF,OAAO,CACH,EAAC,IAAI;YACD,8FAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB;gBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE;gBACrB,6DAAM,KAAK,EAAC,eAAe;oBACtB,CAAC,IAAI,CAAC,cAAc,IAAI,CACrB,+DAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAQ,CAAC;oBAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF;YACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS;gBAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n        this.openChange(this.open);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/button/button.js

@@ -95,33 +95,26 @@ export class Button {
     }
     componentDidLoad() {
         this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
+        this.updateRippleState();
     }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeButton, attr, value);
     }
-    enabledRippleEffect() {
-        this.mdcRipple.disabled = false;
-    }
-    disabledRippleEffect() {
-        this.mdcRipple.disabled = true;
+    updateRippleState() {
+        this.mdcRipple.disabled = !this.ripple;
     }
     getTagName() {
         return this.href !== undefined ? 'a' : 'button';
     }
     onRippleChange() {
-        if (this.ripple) {
-            this.enabledRippleEffect();
-        }
-        else {
-            this.disabledRippleEffect();
-        }
+        this.updateRippleState();
     }
     render() {
         const TagType = this.getTagName();
         const attrs = this.href !== undefined
             ? { href: this.href, role: 'button', target: this.target }
             : { type: this.type };
-        return (h(TagType, Object.assign({ key: '0405add37ee45734819cae0f9e91507e979d1c9a' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '03debd8eb23a9db035b92c1e9f51e9fe44a6996b' }), h("slot", { key: 'c36416630b0987bd6ef750bfc7ef211c084dd942' })));
+        return (h(TagType, Object.assign({ key: '14f58b90f3d1b05b2709cbdb941621c827d462ec' }, attrs, { class: "wcs-inner-button", disabled: this.disabled || this.loading, ref: (el) => this.nativeButton = el }, this.inheritedAttributes), this.loading && h("wcs-spinner", { key: '58dbb8b462b5023c59e8bf728ba1d93aa0575cb4' }), h("slot", { key: 'b6c394ac1c6a4ee5a9fd6bf10a268420843409d2' })));
     }
     static get is() { return "wcs-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private enabledRippleEffect() {\n        this.mdcRipple.disabled = false;\n    }\n\n    private disabledRippleEffect() {\n        this.mdcRipple.disabled = true;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange(): void {\n        if (this.ripple) {\n            this.enabledRippleEffect();\n        } else {\n            this.disabledRippleEffect();\n        }\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGnH,MAAM,sBAAsB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAQH,MAAM,OAAO,MAAM;;QAGP,wBAAmB,GAAyB,EAAE,CAAC;oBAKR,QAAQ;;;wBAiBV,KAAK;sBAKjC,IAAI;oBAM0B,GAAG;qBAKD,QAAQ;oBAKV,OAAO;uBAKK,KAAK;;IAEhE;;;OAGG;IAEH,OAAO,CAAC,EAAS;QACb,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,EAAE,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAClD,kDAAkD;YAClD,+CAA+C;YAC/C,sCAAsC;YACtC,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACrC,IAAI,IAAI,EAAE,CAAC;gBACP,EAAE,CAAC,cAAc,EAAE,CAAC;gBAEpB,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;gBAC3D,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;gBAClC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;gBAC7B,UAAU,CAAC,KAAK,EAAE,CAAC;gBACnB,UAAU,CAAC,MAAM,EAAE,CAAC;YACxB,CAAC;QACL,CAAC;IACL,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,sBAAsB,CAAC,CACxD,CAAC;IACN,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACtF,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAEO,iBAAiB;QACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3C,CAAC;IAEO,UAAU;QACd,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IACpD,CAAC;IAGD,cAAc;QACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;YACjC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;YAC1D,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAC1B,OAAO,CACH,EAAC,OAAO,qEACA,KAAK,IACT,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACzC,GAAG,EAAE,CAAC,EAAyC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,IACtE,IAAI,CAAC,mBAAmB;YAGxB,IAAI,CAAC,OAAO,IAAI,qEAA2B;YAE/C,8DAAO,CACD,CACb,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, Element, h, Listen, Method, Prop, Watch } from '@stencil/core';\n\nimport { MDCRipple } from '@material/ripple';\n\nimport {\n    WcsButtonMode,\n    WcsButtonShape,\n    WcsButtonSize,\n    WcsButtonType\n} from './button-interface';\nimport { hasShadowDom, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst BUTTON_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The button component is used to trigger an action. It can also be a link when specifying href.\n * \n * ## Accessibility guidelines 💡\n * > If your button doesn't contain text but only an image, you must set a relevant aria-label on the icon 👉 [see \"Square\" story below](#square)\n * \n * ## Click event\n *\n * The WCS button relies on the native click event to pass a user click to your app.\n * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.\n * This means you'll receive click events on a disabled wcs button.\n * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.\n * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.\n *\n * @cssprop --wcs-button-plain-color-default - Text/icon color of a plain button\n * @cssprop --wcs-button-stroked-color-default - text/icon color of a stroked button\n * @cssprop --wcs-button-clear-color-default - text/icon color of a clear button\n * \n * @cssprop --wcs-button-color-disabled - text/icon color disabled for mode plain, stroked, clear\n *\n * @cssprop --wcs-button-plain-background-color-default background color of a plain button\n * @cssprop --wcs-button-plain-background-color-disabled - disabled background color of a plain button\n * @cssprop --wcs-button-stroked-background-color-default background color of a stroked button\n * @cssprop --wcs-button-stroked-background-color-disabled - disabled background color of a stroked button\n * @cssprop --wcs-button-clear-background-color-default background color of a clear button\n * @cssprop --wcs-button-clear-background-color-disabled - disabled background color of a clear button\n * \n * @cssprop --wcs-button-plain-ripple-color-default - ripple background color of a plain button\n * @cssprop --wcs-button-stroked-ripple-color-default - ripple background color of a stroked button\n * @cssprop --wcs-button-clear-ripple-color-default - ripple background color of a clear button\n * @cssprop --wcs-button-border-radius-default - border radius for a default button\n * @cssprop --wcs-button-border-radius-rounded - border radius for a rounded button\n *\n * @cssprop --wcs-button-stroked-border-width - border width of a stroked button\n * @cssprop --wcs-button-stroked-border-color-default - default border color of a stroked button\n * @cssprop --wcs-button-stroked-border-color-disabled - disabled border color of a stroked button\n *\n * @cssprop --wcs-button-height-s - height for a size s button\n * @cssprop --wcs-button-font-size-s - font-size for a size s button\n * @cssprop --wcs-button-padding-size-s - padding for a size s button\n *\n * @cssprop --wcs-button-height-m - height for a size m button\n * @cssprop --wcs-button-font-size-m - font-size for a size m button\n * @cssprop --wcs-button-padding-size-m - padding for a size m button\n *\n * @cssprop --wcs-button-height-l - height for a size l button\n * @cssprop --wcs-button-font-size-l - font-size for a size l button\n * @cssprop --wcs-button-padding-size-l - padding for a size l button\n *\n * @cssprop --wcs-button-font-weight - font weight of a plain,stroked,clear button\n */\n@Component({\n    tag: 'wcs-button',\n    styleUrl: 'button.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Button implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement | HTMLAnchorElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specify the button type.\n     */\n    @Prop({ mutable: true }) type: WcsButtonType = 'button';\n\n    /**\n     * Set a URL to point to.<br/>\n     * If specified use a `a` tag instead of `btn`.\n     */\n    @Prop() href?: string;\n\n    /**\n     * Specifies where to open the linked document when using href (see prop above)<br/>\n     * Default '_self' will open the linked document in the same frame as it was clicked\n     */\n    @Prop() target?: '_blank' | '_self';\n\n    /**\n     * Specify whether the button is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Specify whether the button should have a ripple effect or not.\n     */\n    @Prop() ripple = true;\n    private mdcRipple: MDCRipple;\n\n    /**\n     * Specify the size of the button.\n     */\n    @Prop({ reflect: true }) size: WcsButtonSize = 'm';\n\n    /**\n     * Specify the shape of the button.\n     */\n    @Prop({ reflect: true }) shape: WcsButtonShape = 'normal';\n\n    /**\n     * This attribute specify the appearance of the button.\n     */\n    @Prop({ reflect: true }) mode: WcsButtonMode = 'plain';\n\n    /**\n     * Flag to display spinner until the end of action\n     */\n    @Prop({ reflect: true, mutable: true }) loading: boolean = false;\n\n    /**\n     * Native event click is emit event if we decide to stop propagation of it\n     * @param ev\n     */\n    @Listen('click')  // TODO: define custom event click to be able to stop it's propagation when the custom button is disabled or is in loading state\n    onClick(ev: Event) {\n        if (this.disabled || this.loading) {\n            ev.stopImmediatePropagation();\n        }\n        if (this.type !== 'button' && hasShadowDom(this.el)) {\n            // this button wants to specifically submit a form\n            // climb up the dom to see if we're in a <form>\n            // and if so, then use JS to submit it\n            const form = this.el.closest('form');\n            if (form) {\n                ev.preventDefault();\n\n                const fakeButton = window.document.createElement('button');\n                fakeButton.type = this.type;\n                fakeButton.style.display = 'none';\n                form.appendChild(fakeButton);\n                fakeButton.click();\n                fakeButton.remove();\n            }\n        }\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BUTTON_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));\n        this.updateRippleState();\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    private updateRippleState() {\n        this.mdcRipple.disabled = !this.ripple;\n    }\n\n    private getTagName() {\n        return this.href !== undefined ? 'a' : 'button';\n    }\n\n    @Watch('ripple')\n    onRippleChange() {\n        this.updateRippleState();\n    }\n\n    render() {\n        const TagType = this.getTagName();\n        const attrs = this.href !== undefined\n            ? { href: this.href, role: 'button', target: this.target }\n            : { type: this.type };\n        return (\n            <TagType\n                {...attrs}\n                class=\"wcs-inner-button\"\n                disabled = {this.disabled || this.loading}\n                ref={(el: HTMLButtonElement | HTMLAnchorElement) => this.nativeButton = el}\n                {...this.inheritedAttributes}\n            >\n                {\n                    this.loading && <wcs-spinner></wcs-spinner>\n                }\n                <slot/>\n            </TagType>\n        );\n    }\n}\n"]}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"wcs-editable-field\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app\",[[1,\"wcs-app\"]]],[\"wcs-badge\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field\",[[1,\"wcs-field\"]]],[\"wcs-field-content\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label\",[[1,\"wcs-field-label\"]]],[\"wcs-footer\",[[1,\"wcs-footer\"]]],[\"wcs-galactic\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-mat-icon\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"wcs-editable-field\",[[1,\"wcs-editable-field\",{\"type\":[1],\"label\":[1],\"readonly\":[516],\"value\":[1032],\"validateFn\":[16],\"formatFn\":[16],\"errorMsg\":[1,\"error-msg\"],\"size\":[513],\"currentState\":[32],\"isError\":[32]},[[8,\"click\",\"onWindowClickEvent\"]],{\"value\":[\"onValueChange\"]}]]],[\"wcs-grid-pagination\",[[1,\"wcs-grid-pagination\",{\"availablePageSizes\":[16],\"currentPage\":[1026,\"current-page\"],\"pageSize\":[2,\"page-size\"],\"itemsCount\":[2,\"items-count\"],\"pageCount\":[2,\"page-count\"],\"setAriaAttribute\":[64]}]]],[\"wcs-alert-drawer\",[[1,\"wcs-alert-drawer\",{\"position\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"],\"show\":[64]}]]],[\"wcs-horizontal-stepper\",[[1,\"wcs-horizontal-stepper\",{\"currentStep\":[1026,\"current-step\"],\"steps\":[16],\"mode\":[1],\"checkOnComplete\":[516,\"check-on-complete\"],\"internalCurrentStepIndex\":[32],\"previous\":[64],\"next\":[64]},null,{\"currentStep\":[\"onCurrentStepChange\"]}]]],[\"wcs-breadcrumb\",[[1,\"wcs-breadcrumb\",{\"maxItems\":[2,\"max-items\"],\"itemsBeforeCollapse\":[2,\"items-before-collapse\"],\"itemsAfterCollapse\":[2,\"items-after-collapse\"],\"ariaLabelExpandButton\":[1,\"aria-label-expand-button\"],\"showHiddenItems\":[32],\"setAriaAttribute\":[64]},null,{\"maxItems\":[\"handleCollapsePropsChange\"],\"itemsBeforeCollapse\":[\"handleCollapsePropsChange\"],\"itemsAfterCollapse\":[\"handleCollapsePropsChange\"],\"ariaLabelExpandButton\":[\"handleAriaLabelExpandBtnChange\"]}]]],[\"wcs-counter\",[[17,\"wcs-counter\",{\"size\":[513],\"label\":[1],\"disabled\":[516],\"min\":[1026],\"max\":[1026],\"step\":[1026],\"value\":[1026],\"displayedValue\":[32],\"setAriaAttribute\":[64]},null,{\"value\":[\"valueChange\"]}]]],[\"wcs-grid\",[[1,\"wcs-grid\",{\"serverMode\":[516,\"server-mode\"],\"data\":[16],\"loading\":[516],\"selectionConfig\":[1,\"selection-config\"],\"selectedItems\":[8,\"selected-items\"],\"wcsGridPaginationId\":[1,\"wcs-grid-pagination-id\"],\"rowIdPath\":[1,\"row-id-path\"],\"rowCssPartsFn\":[16],\"columns\":[32],\"paginationEl\":[32],\"rows\":[32],\"cursorPosition\":[32],\"focusFirstCell\":[64],\"setAriaAttribute\":[64]},[[0,\"focus\",\"onFocus\"],[0,\"blur\",\"onBlur\"],[0,\"wcsHiddenChange\",\"onHiddenColumnChange\"],[0,\"keydown\",\"onKeyDown\"],[1,\"mousedown\",\"onClick\"],[0,\"wcsSortChange\",\"sortChangeEventHandler\"],[0,\"wcsGridPaginationChange\",\"paginationChangeEventHandler\"],[8,\"wcsGridPaginationChange\",\"paginationChangeEventHandlerOutside\"]],{\"cursorPosition\":[\"onCursorPositionChange\"],\"data\":[\"onDataChange\"],\"selectedItems\":[\"onSelectedItemsPropertyChange\"]}]]],[\"wcs-modal\",[[4,\"wcs-modal\",{\"withoutBackdrop\":[516,\"without-backdrop\"],\"show\":[1540],\"showCloseButton\":[516,\"show-close-button\"],\"closeButtonAriaLabel\":[1,\"close-button-aria-label\"],\"size\":[1],\"hideActions\":[516,\"hide-actions\"],\"modalTriggerControlsId\":[1,\"modal-trigger-controls-id\"],\"initialFocusElementId\":[1,\"initial-focus-element-id\"],\"disableAutoFocus\":[516,\"disable-auto-focus\"],\"setAriaAttribute\":[64]},[[4,\"keydown\",\"onKeyDown\"]],{\"show\":[\"onShowChange\"]}]]],[\"wcs-dropdown\",[[17,\"wcs-dropdown\",{\"noArrow\":[516,\"no-arrow\"],\"mode\":[1],\"shape\":[1],\"size\":[1],\"disabled\":[516],\"placement\":[1],\"expanded\":[32],\"setAriaAttribute\":[64]},[[0,\"blur\",\"onBlur\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"wcsDropdownItemClick\",\"dropdownItemClick\"],[0,\"keydown\",\"onKeyDown\"]],{\"placement\":[\"placementChange\"]}]]],[\"wcs-galactic-menu\",[[1,\"wcs-galactic-menu\",{\"text\":[1],\"showPopoverMenu\":[32],\"setAriaAttribute\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-input\",[[17,\"wcs-input\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"accept\":[1],\"autocapitalize\":[1],\"autocomplete\":[1],\"autocorrect\":[1],\"autofocus\":[4],\"debounce\":[2],\"prefixLabel\":[1,\"prefix-label\"],\"suffixLabel\":[1,\"suffix-label\"],\"disabled\":[516],\"enterkeyhint\":[1],\"size\":[513],\"icon\":[1],\"inputmode\":[1],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"multiple\":[516],\"name\":[1],\"hidePasswordButtonAriaLabel\":[1,\"hide-password-button-aria-label\"],\"showPasswordButtonAriaLabel\":[1,\"show-password-button-aria-label\"],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"step\":[1],\"type\":[1],\"value\":[1032],\"passwordReveal\":[32],\"setBlur\":[64],\"getInputElement\":[64],\"setAriaAttribute\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"passwordReveal\":[\"onPasswordRevealChange\"]}]]],[\"wcs-textarea\",[[17,\"wcs-textarea\",{\"fireFocusEvents\":[4,\"fire-focus-events\"],\"autocapitalize\":[1],\"autofocus\":[4],\"debounce\":[2],\"disabled\":[516],\"icon\":[1],\"inputmode\":[1],\"enterkeyhint\":[1],\"maxlength\":[2],\"minlength\":[2],\"name\":[1],\"placeholder\":[1],\"readonly\":[516],\"required\":[516],\"spellcheck\":[4],\"state\":[513],\"cols\":[2],\"rows\":[2],\"wrap\":[1],\"autoGrow\":[516,\"auto-grow\"],\"value\":[1025],\"resize\":[513],\"setAriaAttribute\":[64],\"fitContent\":[64],\"setBlur\":[64],\"getInputElement\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"wcs-accordion\",[[1,\"wcs-accordion\",{\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"multiExpandable\":[4,\"multi-expandable\"]},[[0,\"wcsOpenChange\",\"wcsOpenChangeHandler\"]],{\"hideActionText\":[\"updateHideActiontextOnPanel\"],\"highlight\":[\"updateHighlightOnPanel\"],\"groupContentWithHeader\":[\"updateGroupContentWithHeader\"]}]]],[\"wcs-accordion-content\",[[1,\"wcs-accordion-content\"]]],[\"wcs-accordion-header\",[[1,\"wcs-accordion-header\"]]],[\"wcs-accordion-panel\",[[1,\"wcs-accordion-panel\",{\"open\":[1540],\"hideActionText\":[516,\"hide-action-text\"],\"highlight\":[516],\"groupContentWithHeader\":[516,\"group-content-with-header\"],\"setAriaAttribute\":[64],\"close\":[64]},null,{\"open\":[\"openChange\"]}]]],[\"wcs-action-bar\",[[1,\"wcs-action-bar\",{\"gutter\":[516],\"hasTabs\":[32]}]]],[\"wcs-app\",[[1,\"wcs-app\"]]],[\"wcs-badge\",[[1,\"wcs-badge\",{\"shape\":[1],\"color\":[1],\"size\":[513]}]]],[\"wcs-breadcrumb-item\",[[1,\"wcs-breadcrumb-item\",{\"last\":[4]}]]],[\"wcs-card\",[[1,\"wcs-card\",{\"mode\":[1537],\"orientation\":[513]},null,{\"orientation\":[\"orientationChanged\"]}]]],[\"wcs-card-body\",[[1,\"wcs-card-body\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-card-content\",[[1,\"wcs-card-content\"]]],[\"wcs-card-footer\",[[1,\"wcs-card-footer\"]]],[\"wcs-card-header\",[[1,\"wcs-card-header\"]]],[\"wcs-card-media\",[[1,\"wcs-card-media\",{\"orientation\":[32],\"setOrientation\":[64]}]]],[\"wcs-chip\",[[1,\"wcs-chip\",{\"value\":[1],\"label\":[1],\"selected\":[516],\"open\":[516],\"disabled\":[516],\"variant\":[513],\"mode\":[513]}]]],[\"wcs-com-nav\",[[1,\"wcs-com-nav\",{\"appName\":[1,\"app-name\"],\"mobileMenuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64]},[[0,\"wcsClickOnFinalAction\",\"onClickOnFinalAction\"],[8,\"keydown\",\"exitMobileMenuOnKeyDown\"]]]]],[\"wcs-com-nav-category\",[[1,\"wcs-com-nav-category\",{\"label\":[1],\"categoryOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsCategoryOpened\",\"onSubmenuOpened\"]]]]],[\"wcs-com-nav-item\",[[1,\"wcs-com-nav-item\",null,[[0,\"click\",\"onClick\"]]]]],[\"wcs-com-nav-submenu\",[[1,\"wcs-com-nav-submenu\",{\"label\":[1],\"panelTitle\":[1,\"panel-title\"],\"panelDescription\":[1,\"panel-description\"],\"menuOpen\":[32],\"currentActiveSizing\":[32],\"setAriaAttribute\":[64],\"close\":[64],\"open\":[64]},[[8,\"click\",\"onWindowClickEvent\"],[8,\"wcsSubmenuOpened\",\"onSubmenuOpened\"],[8,\"keydown\",\"onEscapeKeyDown\"],[0,\"wcsClickOnFinalAction\",\"wcsCategoryItemClickedHandler\"]]]]],[\"wcs-divider\",[[1,\"wcs-divider\"]]],[\"wcs-dropdown-divider\",[[1,\"wcs-dropdown-divider\"]]],[\"wcs-dropdown-header\",[[1,\"wcs-dropdown-header\"]]],[\"wcs-dropdown-item\",[[4,\"wcs-dropdown-item\",null,[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-field\",[[1,\"wcs-field\"]]],[\"wcs-field-content\",[[1,\"wcs-field-content\"]]],[\"wcs-field-label\",[[1,\"wcs-field-label\"]]],[\"wcs-footer\",[[1,\"wcs-footer\"]]],[\"wcs-galactic\",[[1,\"wcs-galactic\",{\"text\":[1],\"show\":[32]}]]],[\"wcs-grid-column\",[[1,\"wcs-grid-column\",{\"path\":[1],\"name\":[1],\"sort\":[516],\"sortFn\":[16],\"formatter\":[16],\"sortOrder\":[1025,\"sort-order\"],\"width\":[1],\"customCells\":[516,\"custom-cells\"],\"hidden\":[516],\"cursorPosition\":[16],\"columnPosition\":[2,\"column-position\"],\"setAriaAttribute\":[64]},null,{\"hidden\":[\"parseMyObjectProp\"],\"sortOrder\":[\"sortOrderChange\"]}]]],[\"wcs-grid-custom-cell\",[[1,\"wcs-grid-custom-cell\",{\"columnId\":[1,\"column-id\"],\"rowId\":[8,\"row-id\"]}]]],[\"wcs-header\",[[1,\"wcs-header\",{\"setAriaAttribute\":[64]}]]],[\"wcs-hint\",[[1,\"wcs-hint\",{\"small\":[1540]}]]],[\"wcs-icon\",[[0,\"wcs-icon\",{\"icon\":[1],\"size\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-list-item\",[[1,\"wcs-list-item\",{\"activated\":[1540]}]]],[\"wcs-list-item-properties\",[[1,\"wcs-list-item-properties\"]]],[\"wcs-list-item-property\",[[1,\"wcs-list-item-property\"]]],[\"wcs-native-select\",[[1,\"wcs-native-select\",{\"size\":[513],\"required\":[516],\"expanded\":[32],\"disabled\":[32],\"setAriaAttribute\":[64],\"updateStyles\":[64]},null,{\"required\":[\"requiredChanged\"]}]]],[\"wcs-nav\",[[1,\"wcs-nav\",{\"setAriaAttribute\":[64]}]]],[\"wcs-nav-item\",[[4,\"wcs-nav-item\",null,[[0,\"keydown\",\"onKeyDown\"]]]]],[\"wcs-progress-radial\",[[1,\"wcs-progress-radial\",{\"size\":[2],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-radio\",[[17,\"wcs-radio\",{\"value\":[1544],\"label\":[1537],\"disabled\":[1540],\"name\":[1025],\"mode\":[513],\"checked\":[32],\"radioTabIndex\":[32],\"updateState\":[64],\"setTabIndex\":[64],\"setAriaAttribute\":[64]}]]],[\"wcs-radio-group\",[[1,\"wcs-radio-group\",{\"value\":[1032],\"name\":[520],\"mode\":[513],\"setAriaAttribute\":[64]},[[0,\"wcsRadioClick\",\"handleRadioClick\"],[0,\"keydown\",\"handleKeyDown\"]],{\"value\":[\"onValueChangeHandler\"],\"name\":[\"updateAllRadioModeAndName\"],\"mode\":[\"updateAllRadioModeAndName\"]}]]],[\"wcs-skeleton-circle\",[[1,\"wcs-skeleton-circle\",{\"animation\":[513],\"radius\":[514]}]]],[\"wcs-skeleton-rectangle\",[[1,\"wcs-skeleton-rectangle\",{\"animation\":[513],\"rounded\":[516],\"height\":[513],\"width\":[513]}]]],[\"wcs-skeleton-text\",[[1,\"wcs-skeleton-text\",{\"animation\":[513],\"height\":[1]}]]],[\"wcs-switch\",[[17,\"wcs-switch\",{\"name\":[1],\"checked\":[516],\"labelAlignment\":[513,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-tab\",[[1,\"wcs-tab\",{\"header\":[513],\"itemKey\":[8,\"item-key\"]}]]],[\"wcs-tabs\",[[1,\"wcs-tabs\",{\"align\":[513],\"selectedIndex\":[2,\"selected-index\"],\"selectedKey\":[8,\"selected-key\"],\"headersOnly\":[516,\"headers-only\"],\"gutter\":[516],\"description\":[1],\"mobileOverlayExpanded\":[32],\"mobile\":[32],\"headers\":[32],\"currentActiveTabIndex\":[32],\"setAriaAttribute\":[64]},[[0,\"tabLoaded\",\"onTabLoaded\"],[8,\"click\",\"onWindowClickEvent\"]],{\"selectedIndex\":[\"selectedIndexChanged\"],\"selectedKey\":[\"selectedTabkeyChanged\"],\"mobile\":[\"onMobileChange\"]}]]],[\"wcs-tooltip\",[[1,\"wcs-tooltip\",{\"for\":[1],\"position\":[513],\"interactive\":[516],\"maxWidth\":[8,\"max-width\"],\"delay\":[2],\"duration\":[2],\"trigger\":[1],\"theme\":[1],\"content\":[1],\"appendTo\":[1,\"append-to\"],\"hide\":[64],\"show\":[64],\"disable\":[64],\"enable\":[64]},[[8,\"keydown\",\"handleKeyDown\"]],{\"interactive\":[\"updateProps\"],\"position\":[\"updateProps\"],\"maxWidth\":[\"updateProps\"],\"theme\":[\"updateProps\"],\"delay\":[\"updateProps\"],\"duration\":[\"updateProps\"],\"trigger\":[\"updateProps\"],\"content\":[\"updateTippyContent\"]}]]],[\"wcs-alert\",[[1,\"wcs-alert\",{\"show\":[1540],\"intent\":[513],\"timeout\":[2],\"showProgressBar\":[4,\"show-progress-bar\"]},[[1,\"mouseover\",\"mouseOverHandler\"],[1,\"mouseout\",\"mouseOutHandler\"]]]]],[\"wcs-progress-bar\",[[1,\"wcs-progress-bar\",{\"size\":[1],\"showLabel\":[516,\"show-label\"],\"value\":[2],\"setAriaAttribute\":[64]}]]],[\"wcs-checkbox\",[[17,\"wcs-checkbox\",{\"name\":[1],\"indeterminate\":[1540],\"checked\":[1540],\"required\":[4],\"labelAlignment\":[1537,\"label-alignment\"],\"disabled\":[516],\"setAriaAttribute\":[64],\"getLabel\":[64]},[[0,\"click\",\"handleHostClick\"]]]]],[\"wcs-select_2\",[[4,\"wcs-select-option\",{\"disabled\":[1540],\"selected\":[1540],\"highlighted\":[1540],\"value\":[8],\"chipColor\":[1,\"chip-color\"],\"chipBackgroundColor\":[1,\"chip-background-color\"],\"multiple\":[1540]},[[1,\"mouseup\",\"onMouseUp\"],[0,\"keydown\",\"handleKeydown\"]]],[1,\"wcs-select\",{\"size\":[513],\"value\":[1032],\"placeholder\":[1537],\"disabled\":[1540],\"required\":[516],\"multiple\":[516],\"autocomplete\":[516],\"serverMode\":[516,\"server-mode\"],\"filterFn\":[16],\"chips\":[516],\"name\":[1],\"compareWith\":[16],\"expanded\":[32],\"displayText\":[32],\"focused\":[32],\"showNoResultFoundLabel\":[32],\"autocompleteValue\":[32],\"overlayDirection\":[32],\"open\":[64],\"close\":[64],\"setAriaAttribute\":[64]},[[1,\"mouseup\",\"onMouseUp\"],[8,\"click\",\"onWindowClickEvent\"],[0,\"keydown\",\"onKeyDown\"],[0,\"wcsSelectOptionClick\",\"selectedOptionChanged\"],[0,\"focus\",\"onFocus\"],[2,\"blur\",\"onBlur\"]],{\"value\":[\"onValueChangeHandler\"]}]]],[\"wcs-error_3\",[[1,\"wcs-error\"],[1,\"wcs-form-field\",{\"isError\":[1540,\"is-error\"],\"hasPrefix\":[32],\"hasSuffix\":[32],\"spiedElement\":[32]},null,{\"isError\":[\"isErrorChange\"]}],[1,\"wcs-label\",{\"required\":[516],\"setAriaAttribute\":[64]}]]],[\"wcs-mat-icon\",[[1,\"wcs-mat-icon\",{\"icon\":[1],\"size\":[1],\"family\":[1],\"setAriaAttribute\":[64]}]]],[\"wcs-button_2\",[[17,\"wcs-button\",{\"type\":[1025],\"href\":[1],\"target\":[1],\"disabled\":[516],\"ripple\":[4],\"size\":[513],\"shape\":[513],\"mode\":[513],\"loading\":[1540],\"setAriaAttribute\":[64]},[[0,\"click\",\"onClick\"]],{\"ripple\":[\"onRippleChange\"]}],[1,\"wcs-spinner\",{\"mode\":[513]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/esm/wcs-accordion-panel.entry.js

@@ -21,6 +21,7 @@ const AccordionPanel = class {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS));
+        this.openChange(this.open);
     }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeButton, attr, value);
@@ -29,7 +30,7 @@ const AccordionPanel = class {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'bcd77b8240481d974555978566472aa28fd374d4' }, h("button", Object.assign({ key: '5fde3c3d7fe95a9a685ef3b9f03b0344fdf7d1be', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '05bd17435fa8821e26d7df49305f2dd331783fb4', name: "header" }), h("span", { key: 'a25b3acc00d4c00675fadfdbabb3c6173d0b9efa', class: "header-action" }, !this.hideActionText && (h("span", { key: '5979042236883a5181471bad831dbe90d7518047' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '8f918ddaef3b7d01c271ce39e0ffe614af33fe8e', up: this.open }))), h("div", { key: '594f012cfe62aa5eb1d8cd2184af7a87ff9f3adb', class: "content", id: "content" }, h("slot", { key: '040d3ba0ec7d879341fc3c7a563f1b3b84659564', name: "content" }))));
+        return (h(Host, { key: 'e8a0d26ab4355bad7a351a672de03a9be460db41' }, h("button", Object.assign({ key: '8a8b6657ffe8508fa8051e836289e262c248e20d', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '7addb6db5a516834dc2f27b7b00b655aa228548e', name: "header" }), h("span", { key: 'f97d43a2c46ea36fb19aacc35744f60abf3467ce', class: "header-action" }, !this.hideActionText && (h("span", { key: 'f40a6b43deccc8a4436d8f267b5763cb75a8c074' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '28f6eb62c4e99c4d5c82afffc222c07e65ac30a2', up: this.open }))), h("div", { key: '7950a5031c2b6319054bb237be7b5b5a709158cd', class: "content", id: "content" }, h("slot", { key: 'bddb7506e586b90552ce6211418d7d2852a431f1', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/wcs-accordion-panel.entry.js.map

@@ -1 +1 @@
-{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;KACL;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}
+{"file":"wcs-accordion-panel.entry.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,khJAAkhJ,CAAC;AAC7iJ,gCAAe,iBAAiB;;ACehC,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;MAqC3C,cAAc;;;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;QACF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAGD,MAAM,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACxD;IAGD,MAAM,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IAED,MAAM;QAIF,QACI,EAAC,IAAI,uDACD,8FAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAE,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB,GAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE,EACrB,6DAAM,KAAK,EAAC,eAAe,IACtB,CAAC,IAAI,CAAC,cAAc,KACjB,+DAAO,IAAI,CAAC,IAAI,GAAG,QAAQ,GAAG,QAAQ,CAAQ,CAAC,EAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF,EACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,IAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,EACT;KACL;;;;;;;;;;","names":[],"sources":["src/components/accordion-panel/accordion-panel.scss?tag=wcs-accordion-panel&encapsulation=shadow","src/components/accordion-panel/accordion-panel.tsx"],"sourcesContent":["@mixin accordion-panel-focus {\n    outline: var(--wcs-accordion-panel-border-width-focus) var(--wcs-accordion-panel-border-style-focus) var(--wcs-accordion-panel-border-color-focus);\n}\n\n:host {\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    --wcs-accordion-panel-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-highlight: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-color-press: var(--wcs-semantic-color-text-primary);\n    --wcs-accordion-panel-action-color-default: var(--wcs-semantic-color-foreground-action-secondary-default);\n    --wcs-accordion-panel-action-color-highlight: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-action-color-hover: var(--wcs-semantic-color-foreground-action-secondary-hover);\n    --wcs-accordion-panel-action-color-press: var(--wcs-semantic-color-foreground-action-secondary-press);\n    --wcs-accordion-panel-background-color-default: var(--wcs-semantic-color-background-action-secondary-default);\n    --wcs-accordion-panel-background-color-highlight: var(--wcs-semantic-color-background-action-secondary-press);\n    --wcs-accordion-panel-background-color-hover: var(--wcs-semantic-color-background-action-secondary-hover);\n    --wcs-accordion-panel-background-color-press: var(--wcs-semantic-color-background-action-secondary-press);\n\n    --wcs-accordion-panel-header-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-accordion-panel-header-font-size: var(--wcs-semantic-font-size-heading-6);\n    --wcs-accordion-panel-header-gap: calc(3 * var(--wcs-semantic-spacing-base));\n    --wcs-accordion-panel-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-accordion-panel-border-radius-open: var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius) 0 0;\n    --wcs-accordion-panel-padding-vertical: var(--wcs-semantic-spacing-large);\n    --wcs-accordion-panel-padding-horizontal: calc(var(--wcs-semantic-spacing-base) * 3);\n\n    --wcs-accordion-panel-header-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-accordion-panel-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-accordion-panel-border-color: var(--wcs-semantic-color-border-secondary);\n\n    --wcs-accordion-panel-border-color-focus: var(--wcs-semantic-color-border-focus-base);\n    --wcs-accordion-panel-border-style-focus: var(--wcs-semantic-border-style-focus-base);\n\n    --wcs-accordion-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    border: var(--wcs-accordion-panel-border-width) solid var(--wcs-accordion-panel-border-color);\n    border-radius: var(--wcs-accordion-panel-border-radius);\n\n    .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--wcs-accordion-panel-header-gap);\n        padding: var(--wcs-accordion-panel-padding-vertical) var(--wcs-accordion-panel-padding-horizontal);\n        border-radius: var(--wcs-accordion-panel-border-radius);\n        font-weight: var(--wcs-accordion-panel-header-font-weight);\n        // TODO replace px to rem\n        font-size: var(--wcs-accordion-panel-header-font-size);\n        font-family: var(--wcs-font-sans-serif);\n        color: var(--wcs-accordion-panel-color-default);\n        background-color: var(--wcs-accordion-panel-background-color-default);\n        border: none;\n\n        transition: background-color var(--wcs-accordion-transition-duration);\n\n        @media (forced-colors: active) {\n            // for WHCM\n            border: var(--wcs-accordion-panel-header-border-width) solid ButtonBorder;\n        }\n        &:focus-visible {\n            @include accordion-panel-focus;\n        }\n\n        &:hover {\n            cursor: pointer;\n\n            color: var(--wcs-accordion-panel-color-hover);\n            background-color: var(--wcs-accordion-panel-background-color-hover);\n\n            .header-action {\n                color: var(--wcs-accordion-panel-action-color-hover);\n\n                .arrow {\n                    fill: var(--wcs-accordion-panel-action-color-hover);\n                }\n            }\n        }\n\n        &:active {\n            background-color: var(--wcs-accordion-panel-background-color-press);\n        }\n    }\n\n    .header-action {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        color: var(--wcs-accordion-panel-action-color-default);\n\n        .arrow {\n            fill: var(--wcs-accordion-panel-action-color-default);\n        }\n    }\n\n    .content {\n        display: none;\n    }\n\n}\n\n:host([open]) {\n    margin-bottom: 0;\n\n    .header {\n        border-radius: var(--wcs-accordion-panel-border-radius-open);\n    }\n\n    .content {\n        display: block;\n    }\n\n\n    /* FIXME GroupContentWithHeader is deprecated. Remove this.\n    &:host([group-content-with-header]) {\n        .header {\n            border-radius: var(--wcs-accordion-panel-border-radius-open);\n            padding-bottom: 0;\n        }\n\n        .content {\n            border-radius: 0 0 var(--wcs-accordion-panel-border-radius) var(--wcs-accordion-panel-border-radius);\n            margin-bottom: var(--wcs-);\n            background-color: var(--wcs-accordion-panel-background-color-default);\n        }\n    }\n    */\n\n    &:host([highlight]) {\n        .header {\n            background-color: var(--wcs-accordion-panel-background-color-highlight);\n            color: var(--wcs-accordion-panel-color-highlight);\n        }\n\n        .header-action {\n            color: var(--wcs-accordion-panel-action-color-highlight);\n\n            .arrow {\n                fill: var(--wcs-accordion-panel-action-color-highlight);\n            }\n        }\n\n        /* FIXME GroupContentWithHeader is deprecated. Remove this.\n        &:host([group-content-with-header]) {\n            .content {\n                background-color: var(--wcs-accordion-panel-background-color-highlight);\n                color: var(--wcs-accordion-panel-color-highlight);\n            }\n        }\n        */\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n        this.openChange(this.open);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"version":3}