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

wcs-core 7.2.2 → 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 (302) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"alert.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/alert/alert.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\";\nconst WAITING_DELAY_BEFORE_ASSERTIONS = 4_000;\n\ntest.describe('alert', () => {\n test('should display title and subtitle content', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert>\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n // Then\n const title = page.locator('wcs-alert > [slot=\"title\"]');\n const subtitle = page.locator('wcs-alert > [slot=\"subtitle\"]');\n await expect(title).toHaveText('Test Title');\n await expect(subtitle).toHaveText('Test Subtitle');\n });\n\n test('should emit wcsAlertDismiss event when close button is clicked', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert>\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n const alert = page.locator('wcs-alert');\n const closeButton = alert.locator('.close-button');\n\n // When\n await closeButton.click();\n await page.waitForChanges();\n\n // Then\n expect(alertDismissSpy).toHaveReceivedEventTimes(1);\n await expect(alert).toHaveJSProperty('show', false);\n });\n\n test('should auto-dismiss after timeout', async ({ page }: { page: E2EPage }) => {\n // Given\n const timeout = 500;\n await setWcsContent(page, `\n <wcs-alert timeout=\"${timeout}\">\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n const alert = page.locator('wcs-alert');\n\n // Wait longer than the specified timeout to account for processing time\n await page.waitForTimeout(timeout + WAITING_DELAY_BEFORE_ASSERTIONS);\n await page.waitForChanges();\n\n // Then\n expect(alertDismissSpy).toHaveReceivedEventTimes(1);\n await expect(alert).toHaveJSProperty('show', false);\n });\n\n test('should not auto-dismiss if timeout is 0', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert timeout=\"0\">\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n const alert = page.locator('wcs-alert');\n\n // Wait for some time to ensure the alert doesn't auto-dismiss\n await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS);\n await page.waitForChanges();\n\n // Then\n expect(alertDismissSpy).toHaveReceivedEventTimes(0);\n await expect(alert).toHaveJSProperty('show', true);\n });\n\n test('should display progress bar when showProgressBar is true', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert show-progress-bar>\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n // Then\n const progressBar = page.locator('wcs-alert').locator('.progress-bar:not(.hidden)');\n await expect(progressBar).toBeVisible();\n });\n\n test('should not display progress bar when showProgressBar is false', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert>\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n // Then\n const progressBar = page.locator('wcs-alert').locator('.progress-bar.hidden');\n await expect(progressBar).toHaveCount(1);\n });\n\n test('should not auto-dismiss when mouse is hovering', async ({ page }: { page: E2EPage }) => {\n // Given\n const timeout = 500;\n await setWcsContent(page, `\n <wcs-alert timeout=\"${timeout}\">\n Test Title\n Test Subtitle\n </wcs-alert>\n `);\n\n const alertDismissHover = await page.spyOnEvent('wcsAlertDismiss');\n\n const alert = page.locator('wcs-alert');\n\n await expect(alert).toHaveJSProperty('show', true);\n\n // Simulate mouse hover\n await alert.dispatchEvent('mouseover');\n\n // Wait longer than the component timeout\n await page.waitForTimeout(timeout + 500);\n await page.waitForChanges();\n\n // Then - The alert should still be visible while mouse is hovering\n expect(alertDismissHover).toHaveReceivedEventTimes(0);\n await expect(alert).toHaveJSProperty('show', true);\n\n // When - Mouse leaves using dispatchEvent\n await alert.dispatchEvent('mouseout');\n await page.waitForChanges();\n\n // Then - The alert should dismiss\n expect(alertDismissHover).toHaveReceivedEventTimes(1);\n await expect(alert).toHaveJSProperty('show', false);\n });\n});\n"]}

package/dist/collection/components/alert-drawer/alert-drawer.e2e.playwright.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+const WAITING_DELAY_BEFORE_ASSERTIONS = 1000;
+test.describe('alert-drawer', () => {
+    test('should show an alert when using show() method', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer position="bottom-right"></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await page.waitForChanges();
+        // Then
+        const alert = alertDrawer.locator('wcs-alert');
+        await expect(alert).toHaveCount(1);
+        const title = alertDrawer.locator('wcs-alert > [slot="title"]');
+        const subtitle = alertDrawer.locator('wcs-alert > [slot="subtitle"]');
+        await expect(title).toHaveText('Test Title');
+        await expect(subtitle).toHaveText('Test Subtitle');
+    });
+    test('should close the alert after timeout', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 100 // Short timeout for testing
+        }));
+        // Wait for the alert to be removed
+        await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS); // Wait a bit longer than the timeout
+        await page.waitForChanges();
+        // Then
+        const alert = alertDrawer.locator('wcs-alert');
+        await expect(alert).toHaveCount(0);
+    });
+    test('should show progress bar when showProgressBar is true', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: true,
+            timeout: 5000
+        }));
+        await page.waitForChanges();
+        // Then
+        const progressBar = alertDrawer.locator('wcs-alert').locator('.progress-bar');
+        await expect(progressBar).toBeVisible();
+    });
+    test('should have correct ARIA attributes for accessibility', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // Then
+        await expect(alertDrawer).toHaveAttribute('role', 'region');
+        await expect(alertDrawer).toHaveAttribute('aria-live', 'polite');
+        await expect(alertDrawer).toHaveAttribute('aria-atomic', 'true');
+    });
+    test('should handle multiple alerts', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'First Alert',
+            subtitle: 'First Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Second Alert',
+            subtitle: 'Second Subtitle',
+            intent: 'warning',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await page.waitForChanges();
+        // Then
+        const alerts = alertDrawer.locator('wcs-alert');
+        await expect(alerts).toHaveCount(2);
+    });
+});
+//# sourceMappingURL=alert-drawer.e2e.playwright.js.map

package/dist/collection/components/alert-drawer/alert-drawer.e2e.playwright.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-drawer.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.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\";\nconst WAITING_DELAY_BEFORE_ASSERTIONS = 1_000;\n\ntest.describe('alert-drawer', () => {\n test('should show an alert when using show() method', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert-drawer position=\"bottom-right\"></wcs-alert-drawer>\n `);\n\n const alertDrawer = page.locator('wcs-alert-drawer');\n\n // When\n await alertDrawer.evaluate((el: any) => el.show({\n title: 'Test Title',\n subtitle: 'Test Subtitle',\n intent: 'success',\n showProgressBar: false,\n timeout: 0\n }));\n await page.waitForChanges();\n\n // Then\n const alert = alertDrawer.locator('wcs-alert');\n await expect(alert).toHaveCount(1);\n\n const title = alertDrawer.locator('wcs-alert > [slot=\"title\"]');\n const subtitle = alertDrawer.locator('wcs-alert > [slot=\"subtitle\"]');\n await expect(title).toHaveText('Test Title');\n await expect(subtitle).toHaveText('Test Subtitle');\n });\n\n test('should close the alert after timeout', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert-drawer></wcs-alert-drawer>\n `);\n\n const alertDrawer = page.locator('wcs-alert-drawer');\n\n // When\n await alertDrawer.evaluate((el: any) => el.show({\n title: 'Test Title',\n subtitle: 'Test Subtitle',\n intent: 'success',\n showProgressBar: false,\n timeout: 100 // Short timeout for testing\n }));\n\n // Wait for the alert to be removed\n await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS); // Wait a bit longer than the timeout\n await page.waitForChanges();\n\n // Then\n const alert = alertDrawer.locator('wcs-alert');\n await expect(alert).toHaveCount(0);\n });\n\n test('should show progress bar when showProgressBar is true', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert-drawer></wcs-alert-drawer>\n `);\n\n const alertDrawer = page.locator('wcs-alert-drawer');\n\n // When\n await alertDrawer.evaluate((el: any) => el.show({\n title: 'Test Title',\n subtitle: 'Test Subtitle',\n intent: 'success',\n showProgressBar: true,\n timeout: 5000\n }));\n await page.waitForChanges();\n\n // Then\n const progressBar = alertDrawer.locator('wcs-alert').locator('.progress-bar');\n await expect(progressBar).toBeVisible();\n });\n\n test('should have correct ARIA attributes for accessibility', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert-drawer></wcs-alert-drawer>\n `);\n\n const alertDrawer = page.locator('wcs-alert-drawer');\n\n // Then\n await expect(alertDrawer).toHaveAttribute('role', 'region');\n await expect(alertDrawer).toHaveAttribute('aria-live', 'polite');\n await expect(alertDrawer).toHaveAttribute('aria-atomic', 'true');\n });\n\n test('should handle multiple alerts', async ({ page }: { page: E2EPage }) => {\n // Given\n await setWcsContent(page, `\n <wcs-alert-drawer></wcs-alert-drawer>\n `);\n\n const alertDrawer = page.locator('wcs-alert-drawer');\n\n // When\n await alertDrawer.evaluate((el: any) => el.show({\n title: 'First Alert',\n subtitle: 'First Subtitle',\n intent: 'success',\n showProgressBar: false,\n timeout: 0\n }));\n await alertDrawer.evaluate((el: any) => el.show({\n title: 'Second Alert',\n subtitle: 'Second Subtitle',\n intent: 'warning',\n showProgressBar: false,\n timeout: 0\n }));\n await page.waitForChanges();\n\n // Then\n const alerts = alertDrawer.locator('wcs-alert');\n await expect(alerts).toHaveCount(2);\n });\n});\n"]}

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.css CHANGED Viewed

@@ -37,6 +37,9 @@
   --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);
   display: inline-flex;
 }
+:host .wcs-container {
+  align-items: center;
+}
 :host([disabled]) .text {
   color: var(--wcs-checkbox-text-color-disabled);

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"]}