npm - wcs-core - Versions diffs - 7.3.0 → 7.4.0 - Mend

wcs-core 7.3.0 → 7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (251) hide show

package/dist/collection/components/breadcrumb/breadcrumb.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,188 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('breadcrumb collapse', () => {
+    test('should hide breadcrumb item and respect default values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should hide breadcrumb item and respect user values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3" items-before-collapse="2" items-after-collapse="1">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(ticketItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('shouldn\'t hide breadcrumb item if max item attribute is not defined', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+    });
+    test('sould hide appended breadcrumb item', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        await page.evaluate(() => {
+            const breadcrumbItem = document.createElement('wcs-breadcrumb-item');
+            breadcrumbItem.classList.add('detail-item');
+            breadcrumbItem.textContent = 'Details';
+            const breadcrumb = document.querySelector('wcs-breadcrumb');
+            breadcrumb.appendChild(breadcrumbItem);
+        });
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should display all breadcrumb items when the max-items prop is mutated in js', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+        const breadcrumb = page.locator('wcs-breadcrumb');
+        await breadcrumb.evaluate((el) => el.maxItems = undefined);
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+    });
+    test('should collapse all breadcrumb items when the max-items prop is mutated in js', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+        const breadcrumb = page.locator('wcs-breadcrumb');
+        await breadcrumb.evaluate((el) => el.maxItems = 3);
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should expand collapsed items when user click on expand button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const nav = page.locator('wcs-breadcrumb nav');
+        const expandBtn = page.locator(`wcs-breadcrumb wcs-button`);
+        await expandBtn.click();
+        await page.waitForChanges();
+        await expect(nav).toHaveClass(/show-hidden-items/);
+    });
+    test('should update aria-label attribute after the first render', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item>Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item>Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item>Tickets</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const wcsBreadcrumb = page.locator('wcs-breadcrumb');
+        // When
+        await wcsBreadcrumb.evaluate((el) => el.setAriaAttribute('aria-label', 'new label'));
+        // Then
+        const navEl = page.locator('wcs-breadcrumb nav');
+        await expect(navEl).toHaveAttribute('aria-label', 'new label');
+    });
+    test('should update expand button aria-label attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const wcsBreadcrumb = page.locator('wcs-breadcrumb');
+        // When
+        const newAriaLabelValue = 'New label';
+        await wcsBreadcrumb.evaluate((el, value) => el.ariaLabelExpandButton = value, newAriaLabelValue);
+        // Then
+        const expandBtn = page.locator('wcs-breadcrumb button.wcs-inner-button');
+        await expect(expandBtn).toHaveAttribute('aria-label', newAriaLabelValue);
+    });
+});
+//# sourceMappingURL=breadcrumb.e2e.playwright.js.map

package/dist/collection/components/breadcrumb/breadcrumb.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"breadcrumb.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('breadcrumb collapse', () => {\n test('should hide breadcrumb item and respect default values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n });\n\n test('should hide breadcrumb item and respect user values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\" items-before-collapse=\"2\" items-after-collapse=\"1\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(trainItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(ticketItem).toHaveAttribute('slot', 'hidden-items');\n await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n });\n\n test('shouldn\\'t hide breadcrumb item if max item attribute is not defined', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb>\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n });\n\n test('sould hide appended breadcrumb item', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n await page.evaluate(() => {\n const breadcrumbItem = document.createElement('wcs-breadcrumb-item');\n breadcrumbItem.classList.add('detail-item');\n breadcrumbItem.textContent = 'Details';\n const breadcrumb = document.querySelector('wcs-breadcrumb');\n breadcrumb!.appendChild(breadcrumbItem);\n });\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n });\n\n test('should display all breadcrumb items when the max-items prop is mutated in js', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n\n const breadcrumb = page.locator('wcs-breadcrumb');\n await breadcrumb.evaluate((el: any) => el.maxItems = undefined);\n\n await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n });\n\n test('should collapse all breadcrumb items when the max-items prop is mutated in js', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb>\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const homeItem = page.locator('.home-item');\n const trainItem = page.locator('.train-item');\n const ticketItem = page.locator('.ticket-item');\n const detail = page.locator('.detail-item');\n\n await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n\n const breadcrumb = page.locator('wcs-breadcrumb');\n await breadcrumb.evaluate((el: any) => el.maxItems = 3);\n\n await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n });\n\n test('should expand collapsed items when user click on expand button', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const nav = page.locator('wcs-breadcrumb nav');\n const expandBtn = page.locator(`wcs-breadcrumb wcs-button`);\n await expandBtn.click();\n await page.waitForChanges();\n\n await expect(nav).toHaveClass(/show-hidden-items/);\n });\n\n test('should update aria-label attribute after the first render', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb>\n <wcs-breadcrumb-item>Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item>Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item>Tickets</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const wcsBreadcrumb = page.locator('wcs-breadcrumb');\n\n // When\n await wcsBreadcrumb.evaluate((el: any) => el.setAriaAttribute('aria-label', 'new label'));\n\n // Then\n const navEl = page.locator('wcs-breadcrumb nav');\n await expect(navEl).toHaveAttribute('aria-label', 'new label');\n });\n\n test('should update expand button aria-label attribute', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-breadcrumb max-items=\"3\">\n <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n </wcs-breadcrumb>\n `);\n\n const wcsBreadcrumb = page.locator('wcs-breadcrumb');\n\n // When\n const newAriaLabelValue = 'New label';\n await wcsBreadcrumb.evaluate((el: any, value: string) => el.ariaLabelExpandButton = value, newAriaLabelValue);\n\n // Then\n const expandBtn = page.locator('wcs-breadcrumb button.wcs-inner-button');\n await expect(expandBtn).toHaveAttribute('aria-label', newAriaLabelValue);\n });\n});\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.js CHANGED Viewed

@@ -131,7 +131,7 @@ export class Breadcrumb {
     }
     render() {
         const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;
-        return (h(Host, { key: 'f1c0ed14b8806df5c1ba717f6354d2e4c201dcd1' }, h("nav", Object.assign({ key: 'ae39ce6d5af6868105c1cb349d70d04da9931274', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '82f4a76da057076e5d7299df7972bb918220b6ac', role: "list" }, h("slot", { key: 'e3180e059e1467c9821e5d10b0694f39194ce4f4', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'e865695a1082a503321d519193f47c54f2d86ba5', name: "non-collapsed" }), h("slot", { key: '53a846e67fe320236a8f0b80216c72fa676304bb', name: "items-before-expand-btn" }), h("slot", { key: 'a6f9243e94d5f4e05e6e3ca89a574ac37128689a', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: '0ca62fc184565b82a12d1314bdfb51161934775b', name: "items-after-expand-btn" })))));
+        return (h(Host, { key: '1707e6c3ee0cc621c75f85f927b543dea1af4342' }, h("nav", Object.assign({ key: 'b326c58b86feed5092f8a6c5d46c3cf2dd06a783', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '9a4395f63e0895bca1918d7236a01dd9d0437f26', role: "list" }, h("slot", { key: 'b74aa1fc77ddfc892f0ba79bceffceab10e49c1f', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'c616f6281282a7088073ceb131f12f93d1126c8b', name: "non-collapsed" }), h("slot", { key: '0db22f440bc3956219c343e4dac60bfe09581d73', name: "items-before-expand-btn" }), h("slot", { key: 'a29809c5122d539d11c1e53e591ed4342c338810', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: 'aa906ec3b5805f78136b39e5d56937cdca7a7f38', name: "items-after-expand-btn" })))));
     }
     static get is() { return "wcs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -232,7 +232,7 @@ export class Breadcrumb {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/breadcrumb/breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element, forceUpdate,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n ICONS_FONT_CHEVRON_UNICODE,\n NAV_ARIA_LABEL_DEFAULT,\n EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/*\n A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n \n ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * > You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * > in the table below too. \n * > - If you need to dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render, you can use the \n * > `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`. \n * > Note: we're working on updating the component automatically when attributes change. \n \n > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n /\n@Component({\n tag: 'wcs-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private navEl?: HTMLElement;\n private expandBtnEl: HTMLWcsButtonElement;\n\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n If the number of breadcrumb items exceeds this maximum,\n * the breadcrumb will collapse and show an expand button. \n * If this prop is `undefined`, breadcrumb items will never collapse.\n /\n @Prop() maxItems?: number;\n /\n The number of breadcrumb items to show before the expand button.\n * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n * the breadcrumb will not be collapsed.\n /\n @Prop() itemsBeforeCollapse: number = 1;\n /\n The number of breadcrumb items to show after the expand button.\n * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n * the breadcrumb will not be collapsed.\n /\n @Prop() itemsAfterCollapse: number = 2;\n /* Set `aria-label` for the expand button when the breadcrumb is collapsed. /\n @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n /\n Show breadcrumb items that are inside the hidden-items slot.\n /\n @State() private showHiddenItems: boolean = false;\n\n @Watch('maxItems')\n @Watch('itemsBeforeCollapse')\n @Watch('itemsAfterCollapse')\n handleCollapsePropsChange() {\n this.updateCollapsedViewMode();\n }\n\n @Watch('ariaLabelExpandButton')\n handleAriaLabelExpandBtnChange(newValue: string) {\n this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n };\n this.updateCollapsedViewMode();\n }\n\n componentDidLoad(): void {\n this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.navEl, attr, value);\n }\n\n private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n }\n\n private shouldCollapseItems(): boolean {\n return (\n !!this.maxItems &&\n this.getBreadcrumbItems().length > this.maxItems &&\n this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n );\n }\n\n private updateCollapsedViewMode(): void {\n if (this.shouldCollapseItems()) {\n this.assignSlotNamesForCollapsedViewMode();\n } else {\n this.assignSlotNamesForNonCollapsedViewMode();\n }\n }\n\n /\n Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n /\n private assignSlotNamesForCollapsedViewMode(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n breadcrumbItems.forEach((breadcrumbItem, index) => {\n if (index <= itemBeforeExpandBtnIndex) {\n breadcrumbItem.slot = 'items-before-expand-btn';\n breadcrumbItem.last = false;\n } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n breadcrumbItem.slot = 'hidden-items';\n breadcrumbItem.last = false;\n } else {\n breadcrumbItem.slot = 'items-after-expand-btn';\n breadcrumbItem.last = index === breadcrumbItems.length - 1;\n }\n });\n }\n \n private assignSlotNamesForNonCollapsedViewMode(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n breadcrumbItems.forEach((breadcrumbItem, index) => {\n breadcrumbItem.slot = 'non-collapsed';\n breadcrumbItem.last = index === breadcrumbItems.length - 1;\n });\n }\n\n private handleSlotChange(): void {\n this.updateCollapsedViewMode();\n this.showHiddenItems = false;\n forceUpdate(this);\n }\n\n private handleOnExpandBtnClick(): void {\n // We leave the breadcrumb items in the hidden-items slot, without passing them to\n // the non-collapsed slot, so that we know which items to hide again later if needed.\n // For future implementations, the expand button could show or hide hidden items on click,\n // with a wcs-dropdown for example.\n this.showHiddenItems = true;\n // We wait for the first hidden item to be visible in the DOM again\n // to be able to focus it.\n requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n }\n\n /\n Avoid losing focus after clicking the expand button.\n * We need to give focus back to the first breadcrumb item link that was hidden before.\n /\n private setFocusToFirstHiddenItem(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n const firstHiddenItemIndex = this.itemsBeforeCollapse;\n const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n const firstHiddenItemSlot =\n firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const breadcrumbItemLinkToFocus =\n firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n breadcrumbItemLinkToFocus?.focus();\n }\n\n private renderExpandAllButton(): JSX.Element {\n const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n return (\n <div role=\"listitem\" class=\"item-not-slotted\">\n <wcs-button\n mode=\"clear\"\n shape=\"square\"\n size=\"s\"\n onClick={this.handleOnExpandBtnClick.bind(this)}\n ref={(el) => this.expandBtnEl = el}\n >\n <wcs-mat-icon icon=\"more_horiz\" />\n </wcs-button>\n {!expandBtnIsLastItem && (\n <span class=\"item-icon\" aria-hidden=\"true\">\n {ICONS_FONT_CHEVRON_UNICODE}\n </span>\n )}\n </div>\n );\n }\n\n render() {\n const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n return (\n <Host>\n <nav\n class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n aria-label={NAV_ARIA_LABEL_DEFAULT}\n {...this.inheritedAttributes}\n ref={(el) => this.navEl = el}\n >\n {/\n * We use aria roles here instead of an <ol> tag\n * so that the list can be browsed correctly on Firefox with screen readers.\n * There seems to be an issue with Firefox and the Shadow DOM.\n /}\n <div role=\"list\">\n {/ Only the main slot shoud be used by consumers. /}\n <slot onSlotchange={this.handleSlotChange.bind(this)} />\n {/ Non collapsed view mode /}\n <slot name=\"non-collapsed\"></slot>\n {/ Collapsed view mode */}\n <slot name=\"items-before-expand-btn\" />\n <slot name=\"hidden-items\" />\n {showExpandBtn && this.renderExpandAllButton()}\n <slot name=\"items-after-expand-btn\" />\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element, forceUpdate,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n ICONS_FONT_CHEVRON_UNICODE,\n NAV_ARIA_LABEL_DEFAULT,\n EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/*\n A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order. \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n \n ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * > You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * > in the table below too. \n * > - If you need to dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render, you can use the \n * > `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`. \n * > Note: we're working on updating the component automatically when attributes change. \n \n > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n /\n@Component({\n tag: 'wcs-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n @Element() private el: HTMLElement;\n private navEl?: HTMLElement;\n private expandBtnEl: HTMLWcsButtonElement;\n\n private inheritedAttributes: { [k: string]: any } = {};\n\n /\n If the number of breadcrumb items exceeds this maximum,\n * the breadcrumb will collapse and show an expand button. \n * If this prop is `undefined`, breadcrumb items will never collapse.\n /\n @Prop() maxItems?: number;\n /\n The number of breadcrumb items to show before the expand button.\n * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n * the breadcrumb will not be collapsed.\n /\n @Prop() itemsBeforeCollapse: number = 1;\n /\n The number of breadcrumb items to show after the expand button.\n * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n * the breadcrumb will not be collapsed.\n /\n @Prop() itemsAfterCollapse: number = 2;\n /* Set `aria-label` for the expand button when the breadcrumb is collapsed. /\n @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n /\n Show breadcrumb items that are inside the hidden-items slot.\n /\n @State() private showHiddenItems: boolean = false;\n\n @Watch('maxItems')\n @Watch('itemsBeforeCollapse')\n @Watch('itemsAfterCollapse')\n handleCollapsePropsChange() {\n this.updateCollapsedViewMode();\n }\n\n @Watch('ariaLabelExpandButton')\n handleAriaLabelExpandBtnChange(newValue: string) {\n this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n }\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n };\n this.updateCollapsedViewMode();\n }\n\n componentDidLoad(): void {\n this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.navEl, attr, value);\n }\n\n private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n }\n\n private shouldCollapseItems(): boolean {\n return (\n !!this.maxItems &&\n this.getBreadcrumbItems().length > this.maxItems &&\n this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n );\n }\n\n private updateCollapsedViewMode(): void {\n if (this.shouldCollapseItems()) {\n this.assignSlotNamesForCollapsedViewMode();\n } else {\n this.assignSlotNamesForNonCollapsedViewMode();\n }\n }\n\n /\n Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n /\n private assignSlotNamesForCollapsedViewMode(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n breadcrumbItems.forEach((breadcrumbItem, index) => {\n if (index <= itemBeforeExpandBtnIndex) {\n breadcrumbItem.slot = 'items-before-expand-btn';\n breadcrumbItem.last = false;\n } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n breadcrumbItem.slot = 'hidden-items';\n breadcrumbItem.last = false;\n } else {\n breadcrumbItem.slot = 'items-after-expand-btn';\n breadcrumbItem.last = index === breadcrumbItems.length - 1;\n }\n });\n }\n \n private assignSlotNamesForNonCollapsedViewMode(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n breadcrumbItems.forEach((breadcrumbItem, index) => {\n breadcrumbItem.slot = 'non-collapsed';\n breadcrumbItem.last = index === breadcrumbItems.length - 1;\n });\n }\n\n private handleSlotChange(): void {\n this.updateCollapsedViewMode();\n this.showHiddenItems = false;\n forceUpdate(this);\n }\n\n private handleOnExpandBtnClick(): void {\n // We leave the breadcrumb items in the hidden-items slot, without passing them to\n // the non-collapsed slot, so that we know which items to hide again later if needed.\n // For future implementations, the expand button could show or hide hidden items on click,\n // with a wcs-dropdown for example.\n this.showHiddenItems = true;\n // We wait for the first hidden item to be visible in the DOM again\n // to be able to focus it.\n requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n }\n\n /\n Avoid losing focus after clicking the expand button.\n * We need to give focus back to the first breadcrumb item link that was hidden before.\n /\n private setFocusToFirstHiddenItem(): void {\n const breadcrumbItems = this.getBreadcrumbItems();\n const firstHiddenItemIndex = this.itemsBeforeCollapse;\n const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n const firstHiddenItemSlot =\n firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n const breadcrumbItemLinkToFocus =\n firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n breadcrumbItemLinkToFocus?.focus();\n }\n\n private renderExpandAllButton() {\n const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n return (\n <div role=\"listitem\" class=\"item-not-slotted\">\n <wcs-button\n mode=\"clear\"\n shape=\"square\"\n size=\"s\"\n onClick={this.handleOnExpandBtnClick.bind(this)}\n ref={(el) => this.expandBtnEl = el}\n >\n <wcs-mat-icon icon=\"more_horiz\" />\n </wcs-button>\n {!expandBtnIsLastItem && (\n <span class=\"item-icon\" aria-hidden=\"true\">\n {ICONS_FONT_CHEVRON_UNICODE}\n </span>\n )}\n </div>\n );\n }\n\n render() {\n const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n return (\n <Host>\n <nav\n class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n aria-label={NAV_ARIA_LABEL_DEFAULT}\n {...this.inheritedAttributes}\n ref={(el) => this.navEl = el}\n >\n {/\n * We use aria roles here instead of an <ol> tag\n * so that the list can be browsed correctly on Firefox with screen readers.\n * There seems to be an issue with Firefox and the Shadow DOM.\n /}\n <div role=\"list\">\n {/ Only the main slot shoud be used by consumers. /}\n <slot onSlotchange={this.handleSlotChange.bind(this)} />\n {/ Non collapsed view mode /}\n <slot name=\"non-collapsed\"></slot>\n {/ Collapsed view mode */}\n <slot name=\"items-before-expand-btn\" />\n <slot name=\"hidden-items\" />\n {showExpandBtn && this.renderExpandAllButton()}\n <slot name=\"items-after-expand-btn\" />\n </div>\n </nav>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/button/button.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('button', () => {
+    test('should trigger submit when in a form', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <form>
+                <wcs-button class="wcs-primary" type="wcs-submit"></wcs-button>
+            </form>
+        `);
+        const form = page.locator('form');
+        await form.evaluate((el) => {
+            el.addEventListener('submit', (e) => {
+                e.preventDefault(); // avoid page reload
+            });
+        });
+        const submitEventSpy = await form.spyOnEvent('submit');
+        // When
+        await page.locator('wcs-button').click();
+        await page.waitForChanges();
+        // Then
+        expect(submitEventSpy).toHaveReceivedEventTimes(1);
+    });
+});
+//# sourceMappingURL=button.e2e.playwright.js.map

package/dist/collection/components/button/button.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/button/button.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,sCAAsC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC/E,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE;YACvB,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;YAC5C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEvD,OAAO;QACP,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,cAAc,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('button', () => {\n test('should trigger submit when in a form', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <form>\n <wcs-button class=\"wcs-primary\" type=\"wcs-submit\"></wcs-button>\n </form>\n `);\n const form = page.locator('form');\n await form.evaluate((el) => {\n el.addEventListener('submit', (e) => {\n e.preventDefault(); // avoid page reload\n });\n });\n\n const submitEventSpy = await form.spyOnEvent('submit');\n\n // When\n await page.locator('wcs-button').click();\n await page.waitForChanges();\n\n // Then\n expect(submitEventSpy).toHaveReceivedEventTimes(1);\n });\n});\n"]}

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

@@ -331,7 +331,7 @@ export class Button {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/checkbox/checkbox.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Checkbox component', () => {
+    test.describe('Events', () => {
+        test('should emit a wcsChange event when clicked on wcs-checkbox', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-checkbox name="checkbox-id">
+                    Checkbox
+                </wcs-checkbox>
+            `);
+            const checkbox = page.locator('wcs-checkbox');
+            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');
+            // When
+            await checkbox.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);
+            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });
+        });
+        test('should emit a wcsChange event when space pressed on wcs-checkbox', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-checkbox name="checkbox-id">
+                    Checkbox
+                </wcs-checkbox>
+            `);
+            const checkbox = page.locator('wcs-checkbox');
+            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');
+            // When
+            await checkbox.press('Space');
+            // Then
+            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);
+            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });
+        });
+    });
+});
+//# sourceMappingURL=checkbox.e2e.playwright.js.map

package/dist/collection/components/checkbox/checkbox.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"checkbox.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACzB,IAAI,CAAC,4DAA4D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;YACrG,QAAQ;YACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;aAIzB,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,MAAM,iBAAiB,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,OAAO;YACP,MAAM,CAAC,iBAAiB,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,CAAC,yBAAyB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kEAAkE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;YAC3G,QAAQ;YACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;aAIzB,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,MAAM,iBAAiB,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAE9B,OAAO;YACP,MAAM,CAAC,iBAAiB,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,CAAC,yBAAyB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Checkbox component', () => {\n test.describe('Events', () => {\n test('should emit a wcsChange event when clicked on wcs-checkbox', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-checkbox name=\"checkbox-id\">\n Checkbox\n </wcs-checkbox>\n `);\n\n const checkbox = page.locator('wcs-checkbox');\n const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');\n\n // When\n await checkbox.click();\n await page.waitForChanges();\n\n // Then\n expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);\n expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });\n });\n\n test('should emit a wcsChange event when space pressed on wcs-checkbox', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-checkbox name=\"checkbox-id\">\n Checkbox\n </wcs-checkbox>\n `);\n\n const checkbox = page.locator('wcs-checkbox');\n const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');\n\n // When\n await checkbox.press('Space');\n\n // Then\n expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);\n expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });\n });\n });\n});\n"]}

package/dist/collection/components/checkbox/checkbox.js CHANGED Viewed

@@ -322,7 +322,7 @@ export class Checkbox {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/chip/chip.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,190 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Chip component', () => {
+    test.describe('Events', () => {
+        test('should emit wcsChipSelectChange with selected=true on click (selectable by default)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When
+            await chip.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventDetail({ value: 'chip-id', selected: true });
+        });
+        test('should toggle selection and emit on Space/Enter (selectable)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When - Space selects
+            await chip.focus();
+            await chip.press('Space');
+            // When - Enter toggles back
+            await chip.press('Enter');
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(2);
+            expect(wcsChipSelectChangeEventSpy).toHaveNthReceivedEventDetail(1, { value: 'chip-id', selected: false });
+        });
+        test('should emit wcsChipDismiss when clicking dismiss button (dismissible)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const dismissBtn = page.locator('wcs-chip button');
+            // When
+            await dismissBtn.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipDismissEventSpy).toHaveReceivedEventDetail({ value: 'chip-id' });
+            // open prop should be false -> attribute removed
+            await expect(chip).not.toHaveAttribute('open');
+        });
+    });
+    test.describe('Keyboard', () => {
+        test('Delete/Backspace on dismiss button dismisses the chip', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const dismissBtn = page.locator('wcs-chip button');
+            // When
+            await dismissBtn.focus();
+            await page.keyboard.press('Delete');
+            await page.waitForChanges();
+            // Then
+            await expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(1);
+            await expect(chip).not.toHaveAttribute('open');
+        });
+    });
+    test.describe('Accessibility', () => {
+        test('exposes proper ARIA for selectable: role=checkbox, aria-checked toggles, tabindex respects disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            // Then default
+            await expect(chip).toHaveAttribute('role', 'checkbox');
+            await expect(chip).toHaveAttribute('aria-checked', 'false');
+            await expect(chip).toHaveAttribute('tabindex', '0');
+            // When
+            await chip.click();
+            await page.waitForChanges();
+            // Then toggled
+            await expect(chip).toHaveAttribute('aria-checked', 'true');
+        });
+        test('exposes proper ARIA/disabled for dismissible: button has label and respects disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const btn = page.locator('wcs-chip button');
+            // Then
+            await expect(btn).toHaveAttribute('aria-label', 'Supprimer Chip');
+            // When disabled
+            await chip.evaluate((el) => el.disabled = true);
+            await page.waitForChanges();
+            // Then
+            await expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await expect(btn).toBeDisabled();
+        });
+    });
+    test.describe('Disabled state', () => {
+        test('does not emit select event when disabled (click and Space)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip disabled value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When
+            await chip.click({ force: true });
+            await chip.press('Space');
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(0);
+            await expect(chip).toHaveAttribute('tabindex', '-1');
+            await expect(chip).toHaveAttribute('aria-checked', 'false');
+        });
+        test('does not emit dismiss event when disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip disabled mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const btn = page.locator('wcs-chip button');
+            // When
+            await btn.click({ force: true });
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(0);
+            await expect(chip).toHaveAttribute('open', '');
+        });
+    });
+    test.describe('Focus management', () => {
+        test('after dismiss, focus moves to next actionable chip (selectable host)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" value="c2" label="Two"></wcs-chip>
+                </div>
+            `);
+            const btn = page.locator('#c1 button');
+            // When
+            await btn.click();
+            await page.waitForChanges();
+            // Then
+            const c2 = page.locator('#c2');
+            await expect(c2).toBeFocused();
+        });
+        test('after dismiss, focus moves to next actionable chip (dismissable host)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" mode="dismissible" value="c2" label="Two"></wcs-chip>
+                </div>
+            `);
+            const c1 = page.locator('#c1 button');
+            // When
+            await c1.click();
+            await page.waitForChanges();
+            // Then
+            const c2 = page.locator('#c2');
+            await expect(c2).toBeFocused();
+        });
+        test('skips disabled chips when moving focus after dismiss', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" disabled value="c2" label="Two"></wcs-chip>
+                    <wcs-chip id="c3" value="c3" label="Three"></wcs-chip>
+                </div>
+            `);
+            const btn = page.locator('#c1 button');
+            // When
+            await btn.click();
+            await page.waitForChanges();
+            // Then
+            const c3 = page.locator('#c3');
+            await expect(c3).toBeFocused();
+        });
+    });
+});
+//# sourceMappingURL=chip.e2e.playwright.js.map