npm - wcs-core - Versions diffs - 7.5.0 → 7.6.0 - Mend

wcs-core 7.5.0 → 7.6.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 (484) hide show

package/dist/collection/components/grid/grid.e2e.playwright.js CHANGED Viewed

@@ -149,5 +149,60 @@ test.describe('Grid component', () => {
             }).toPass();
         });
     });
+    test.describe('Behavior in window with scroll', () => {
+        test('should preserve the window scroll position when clicking on a single-selection radio inside a scrollable container', async ({ page }) => {
+            // Given
+            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }];
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; flex-direction: column; gap: 16px;">
+                        <wcs-grid id="simpleGrid" selection-config="single" sort="">
+                            <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                        </wcs-grid>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const simpleGrid = page.locator('#simpleGrid');
+            await simpleGrid.evaluate((el, d) => el.data = d, data);
+            const body = page.locator('body');
+            const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');
+            await gridRadioFirstRow.scrollIntoViewIfNeeded();
+            // When
+            await gridRadioFirstRow.click();
+            await page.waitForChanges();
+            // Then
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+        test('should preserve the window scroll position when tabbing to a single-selection grid inside a scrollable container', async ({ page }) => {
+            // Given
+            const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }];
+            await setWcsContent(page, `
+                <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                    <div style="margin-top: 150vh; display: flex; flex-direction: column; gap: 16px;">
+                        <button id="before-grid">Before grid</button>
+                        <wcs-grid id="simpleGrid" selection-config="single" sort="">
+                            <wcs-grid-column path="first_name" name="First Name"></wcs-grid-column>
+                        </wcs-grid>
+                    </div>
+                    <div style="margin-top: 200vh;">Other content</div>
+                </div>
+            `);
+            const simpleGrid = page.locator('#simpleGrid');
+            await simpleGrid.evaluate((el, d) => el.data = d, data);
+            const body = page.locator('body');
+            const beforeGridButton = page.locator('#before-grid');
+            const firstGridRadio = simpleGrid.locator('table tbody tr:first-child td .grid-radio input');
+            await beforeGridButton.scrollIntoViewIfNeeded();
+            await beforeGridButton.focus();
+            // When
+            await page.keyboard.press('Tab');
+            // Then
+            await expect(firstGridRadio).toBeFocused();
+            const scrollY = await body.evaluate(() => window.scrollY);
+            expect(scrollY).toBe(0);
+        });
+    });
 });
 //# sourceMappingURL=grid.e2e.playwright.js.map

package/dist/collection/components/grid/grid.e2e.playwright.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/grid/grid.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('Grid component', () => {\n test.describe('Events', () => {\n test.describe('simple', () => {\n test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');\n await gridRadioFirstRow.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[0].selected).toBe(true);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n });\n\n test.describe('multiple', () => {\n test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[0].selected).toBe(true);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n\n test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click(); // Row is selected\n await page.waitForChanges();\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n await wcsCheckboxFirstRow.click(); // Row is unselected\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows).toEqual([]);\n expect(detail.changedRow.selected).toBe(false);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n\n test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click();\n await page.waitForChanges();\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');\n await wcsCheckboxLastChild.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows.length).toBe(2);\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[data.length - 1]);\n });\n\n test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');\n await wcsCheckboxAll.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows.length).toBe(data.length);\n expect(detail.changedRow).toBe('allCheckbox');\n });\n });\n });\n\n test.describe('Sort', () => {\n test('should well sort with pagination', async ({ page }: { page: E2EPage }) => {\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\" sort sort-order=\"desc\"></wcs-grid-column>\n <wcs-grid-pagination available-page-sizes=\"2\"></wcs-grid-pagination>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n // First page should contain 2 elements (page-size = 2) sorted descending by first_name\n // Data order before sort: John, Doe, Jane, Zoe\n // After descending sort: Zoe, John, Jane, Doe\n // Page 1 should show Zoe, John\n\n const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');\n const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');\n\n await expect(async () => {\n await expect(firstRowFirstCell).toHaveText('Zoe');\n await expect(secondRowFirstCell).toHaveText('John');\n }).toPass();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"grid.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/grid/grid.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('Grid component', () => {\n test.describe('Events', () => {\n test.describe('simple', () => {\n test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');\n await gridRadioFirstRow.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[0].selected).toBe(true);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n });\n\n test.describe('multiple', () => {\n test('should emit a wcsGridSelectionChange event when a row is selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[0].selected).toBe(true);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n\n test('should emit a wcsGridSelectionChange event when a row is unselected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click(); // Row is selected\n await page.waitForChanges();\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n await wcsCheckboxFirstRow.click(); // Row is unselected\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows).toEqual([]);\n expect(detail.changedRow.selected).toBe(false);\n expect(detail.changedRow.data).toEqual(data[0]);\n });\n\n test('should emit a wcsGridSelectionChange event when a new row is selected while another are already selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const wcsCheckboxFirstRow = simpleGrid.locator('table tbody tr:first-child td wcs-checkbox');\n await wcsCheckboxFirstRow.click();\n await page.waitForChanges();\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxLastChild = simpleGrid.locator('table tbody tr:last-child td wcs-checkbox');\n await wcsCheckboxLastChild.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows.length).toBe(2);\n expect(detail.selectedRows[0].data).toEqual(data[0]);\n expect(detail.selectedRows[1].data).toEqual(data[data.length - 1]);\n expect(detail.changedRow.selected).toBe(true);\n expect(detail.changedRow.data).toEqual(data[data.length - 1]);\n });\n\n test('should emit a wcsGridSelectionChange event when all rows are selected', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Smith' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const selectionSpy = await page.spyOnEvent('wcsGridSelectionChange');\n\n // When\n const wcsCheckboxAll = simpleGrid.locator('table thead th:first-child wcs-checkbox');\n await wcsCheckboxAll.click();\n await page.waitForChanges();\n\n // Then\n expect(selectionSpy).toHaveReceivedEventTimes(1);\n const detail = selectionSpy.events[0].detail;\n expect(detail.selectedRows.length).toBe(data.length);\n expect(detail.changedRow).toBe('allCheckbox');\n });\n });\n });\n\n test.describe('Sort', () => {\n test('should well sort with pagination', async ({ page }: { page: E2EPage }) => {\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }, { id: 3, first_name: 'Jane' }, { id: 4, first_name: 'Zoe' }];\n await setWcsContent(page, `\n <wcs-grid id=\"simpleGrid\" selection-config=\"multiple\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\" sort sort-order=\"desc\"></wcs-grid-column>\n <wcs-grid-pagination available-page-sizes=\"2\"></wcs-grid-pagination>\n </wcs-grid>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n // First page should contain 2 elements (page-size = 2) sorted descending by first_name\n // Data order before sort: John, Doe, Jane, Zoe\n // After descending sort: Zoe, John, Jane, Doe\n // Page 1 should show Zoe, John\n\n const firstRowFirstCell = simpleGrid.locator('table tbody tr:first-child td:last-child');\n const secondRowFirstCell = simpleGrid.locator('table tbody tr:nth-child(2) td:last-child');\n\n await expect(async () => {\n await expect(firstRowFirstCell).toHaveText('Zoe');\n await expect(secondRowFirstCell).toHaveText('John');\n }).toPass();\n });\n });\n\n test.describe('Behavior in window with scroll', () => {\n test('should preserve the window scroll position when clicking on a single-selection radio inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }];\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; flex-direction: column; gap: 16px;\">\n <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const body = page.locator('body');\n const gridRadioFirstRow = simpleGrid.locator('table tbody tr:first-child td .grid-radio');\n\n await gridRadioFirstRow.scrollIntoViewIfNeeded();\n\n // When\n await gridRadioFirstRow.click();\n await page.waitForChanges();\n\n // Then\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n\n test('should preserve the window scroll position when tabbing to a single-selection grid inside a scrollable container', async ({ page }: { page: E2EPage }) => {\n // Given\n const data = [{ id: 1, first_name: 'John' }, { id: 2, first_name: 'Doe' }];\n await setWcsContent(page, `\n <div id=\"scroll-container\" style=\"height: 100vh; overflow-y: auto;\">\n <div style=\"margin-top: 150vh; display: flex; flex-direction: column; gap: 16px;\">\n <button id=\"before-grid\">Before grid</button>\n <wcs-grid id=\"simpleGrid\" selection-config=\"single\" sort=\"\">\n <wcs-grid-column path=\"first_name\" name=\"First Name\"></wcs-grid-column>\n </wcs-grid>\n </div>\n <div style=\"margin-top: 200vh;\">Other content</div>\n </div>\n `);\n\n const simpleGrid = page.locator('#simpleGrid');\n await simpleGrid.evaluate((el: any, d) => el.data = d, data);\n\n const body = page.locator('body');\n const beforeGridButton = page.locator('#before-grid');\n const firstGridRadio = simpleGrid.locator('table tbody tr:first-child td .grid-radio input');\n\n await beforeGridButton.scrollIntoViewIfNeeded();\n await beforeGridButton.focus();\n\n // When\n await page.keyboard.press('Tab');\n\n // Then\n await expect(firstGridRadio).toBeFocused();\n const scrollY = await body.evaluate(() => window.scrollY);\n expect(scrollY).toBe(0);\n });\n });\n});\n"]}

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

@@ -506,12 +506,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '1e9b1d5dc405c67428750276de3e38e8e163d20e' }, h("table", Object.assign({ key: '42e610c403c108f36c2f5e4eb276b9e1c6349b8c', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '365bf4de9329c94c5c891040b14ca844c6e8fd99' }, h("tr", { key: '9d1e4c4cf0418f585679a055edbb88ca08493d3d', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: 'b19822a50c13e2c45df1457d9e7a5100b2ba62ef' }, h("table", Object.assign({ key: '26b9e13d87544a151d6b31e6019f44f980541153', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '1e5a328e858cbf3a6ad29e2db070c4c44c67bfe5' }, h("tr", { key: '121c5b20769d31b4366b3c563fd3fce695f6ef83', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '4c1ed31eeaf61d0f94a156cc97b393abafdfb6e3', name: "grid-column" }))), h("tbody", { key: '5758c76c248e9e54759bd008310047a5c670339a' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '20977331e2ea13fae89d239155d9800764dd2695', name: "grid-column" }))), h("tbody", { key: '6587df7ab7251139904249def1a347f3e6718f70' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '170e79b086e8235ae736c8cc54512b0e3bb0e7ab', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '134dcd235b562cd2734889cfd6eb43e4eda012ad', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.

package/dist/collection/components/grid-column/grid-column.js CHANGED Viewed

@@ -69,7 +69,7 @@ export class GridColumn {
     }
     render() {
         const ButtonOrDiv = this.getTagName();
-        return (h(Host, { key: 'e2c93e817abc5a61d6285f32779d915ff7368710', slot: "grid-column" }, h("th", Object.assign({ key: 'c23695b8680146e66e75ea958dc9dd9cac6056ac', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: 'e936f0bd861b2d243071d45ccb4fa6bf8448f7a6', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '33e9e0238aa5cea93bff5f0522e30b7cfa787283' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
+        return (h(Host, { key: 'dae8ba0823c68e3029faa505a061b80ae911f84a', slot: "grid-column" }, h("th", Object.assign({ key: '02d892d695ee9faa1f91be08c67c200aa770d489', style: { width: this.width }, class: this.sort ? 'pointer' : '', tabIndex: this.sort ? -1 : this.getTabIndex(), scope: "col", onClick: this.onSortClick.bind(this), onKeyDown: this.handleSortKeyDown.bind(this), onFocus: this.delegateFocusToButton.bind(this), "aria-sort": this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null, ref: (el) => (this.nativeTh = el) }, this.inheritedAttributes), h(ButtonOrDiv, { key: '2da3c848ac260aa272e78e52f282ff0078ecc1e1', class: "grid-column-th-content", ref: (el) => this.buttonOrDiv = el, tabIndex: this.sort ? this.getTabIndex() : -1 }, h("span", { key: '063de5c95a3fb63444cf5e10e291252bc3474fad' }, this.name), this.sort ? h("div", { class: "sort-arrow-container" }, h(GridSortArrow, { state: this.sortOrder })) : ''))));
     }
     onSortClick() {
         if (!this.sort)

package/dist/collection/components/grid-custom-cell/grid-custom-cell.js CHANGED Viewed

@@ -8,7 +8,7 @@ export class GridCustomCell {
         this.rowId = undefined;
     }
     render() {
-        return (h(Host, { key: '3353e4de7a3eeb4d903a63d5adf257ed3427beb8', slot: this.columnId + '-' + this.rowId }, h("slot", { key: 'cc3297d327379b74a385c4909964b8371da68a97' })));
+        return (h(Host, { key: 'dd57a3792ccd2dbf7bb23f5055eb3136a06a9acb', slot: this.columnId + '-' + this.rowId }, h("slot", { key: '5fa475118d263c77b9ccbc1bb7e0c808b1578e87' })));
     }
     static get is() { return "wcs-grid-custom-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-pagination/grid-pagination.js CHANGED Viewed

@@ -14,6 +14,9 @@ const GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];
  * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination
  * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow
  * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow
+ *
+ * @slot elements-per-page-text - Text following the page size select. Default text is " éléments par page". You may want to add a non-breaking space before the text to separate it from the number.
+ * @slot items-count-text - Text following the number of elements. Default text is " éléments". You may want to add a non-breaking space before the text to separate it from the number.
  */
 export class GridPagination {
     constructor() {
@@ -94,7 +97,7 @@ export class GridPagination {
         });
     }
     render() {
-        return (h(Host, { key: 'a51e533835607f4e0b712fe26680704a71f76cd6', slot: "grid-pagination" }, h("div", { key: '8ff4ebf10c9e134a8e2fe5d577860a8d6dc9c863', class: "container" }, h("div", { key: 'a4c6ce48c71fb017dfecdb3f1e8bdc59894e1cbd', class: "page-size" }, h("wcs-select", { key: 'ae08e610f92bc8084806b25b0b5d7fa95db079ee', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePageSize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: '282fd594fa817e9f2535c7403b5e1d66e4a7d030', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: '00ee37d7e5156aa17b234fdf6eec956228064094', id: "elements-per-page-text" }, "\u00E9l\u00E9ments par page")), h("div", { key: '2ae95e32fc77cafebf0a38eb2746c62d0bd3a537', class: "items-count" }, h("span", { key: '5861d6bbf937867579181842dc93ba33290cdfe9' }, this.itemsCount, " \u00E9l\u00E9ments")), h("nav", Object.assign({ key: '7d847f316fb18ec7bdc08f7c055115a7391bb25e', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: 'd58fdfcd0a663071a6c94b72acf339a2efd57b5d', class: "page-management" }, h("li", { key: 'd18366653d52b0e481bfc8bb0d001d72aa5b3b36', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: 'ce33b84750ac08bfc50e91378f79ce62c11c9750', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: 'fb8adcbe91d40dd5d5dd741ec2c69299d971a1ee', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: 'b5f8b2804909a64e73e4d26a1faea483a10d2137', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '22742254c3c37ecf900eba29d1605a0420ff11e2', class: "pagination-counter" }, h("span", { key: '1f9385fffd93e2eb97d8199b0d7e459e58e01285', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: '3a408b5b27a1ff8ba7dc52b6027506100e371d49', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '54e0d638e0645fd46b8a96a99509c8a3dafc842b', active: this.canGoToNextPage(), order: "next" })), h("li", { key: 'e91b2f2eeadfeea3ef68fa83c3c3e9fa30c3c17f', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: '14834c2f39a7f1076dfe2660aa2c651d1c52f40e', active: this.canGoToNextPage(), order: "next", double: true })))))));
+        return (h(Host, { key: '3efc96789e89f352f23038016baf6cbc232d6e0c', slot: "grid-pagination" }, h("div", { key: 'df2365f3367fe20bfb66f8b4969036a1662daef3', class: "container" }, h("div", { key: 'b700909bbdcef7087af7a7f5d624db07bf909315', class: "page-size" }, h("wcs-select", { key: 'bd9454c106da98c1dfbd7c5081f1bc2c564db2ae', placeholder: "El\u00E9ments par page", class: "available-page-sizes", "aria-labelledby": "elements-per-page-number elements-per-page-text", value: this.pageSize, onWcsChange: this.onChangePageSize.bind(this) }, this.availablePageSizes.map((pageSize) => h("wcs-select-option", { value: pageSize }, pageSize))), h("span", { key: '792711f34454bb10a42c44b7e13d03f8fbf4af74', id: "elements-per-page-number", hidden: true }, this.pageSize), h("span", { key: '00848f6a348aed84d37ebb19172e3d7818ba3c17', id: "elements-per-page-text" }, h("slot", { key: '21848ccaf60179a82c53916f8e438e8b63ebaf61', name: "elements-per-page-text" }, h("span", { key: '6bf5a0c3e6dc2bd81193e362abab61b7e165de54' }, " \u00E9l\u00E9ments par page")))), h("div", { key: 'ef6378352c7251430bb90540b28d52407b792b4d', class: "items-count" }, h("span", { key: 'a0f8ebf6564358233cf2683107d7a3af50bbd3e7' }, this.itemsCount, h("slot", { key: 'b0549af31d518ea3d748ba615c226d242aa1ea3e', name: "items-count-text" }, h("span", { key: 'b0266239fa9726005d9946ccedf59bfe26e030a3' }, " \u00E9l\u00E9ments")))), h("nav", Object.assign({ key: '43a87e737be4890ac0f4fcb8f76e56fc5a40a27d', "aria-label": "pagination", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("ul", { key: '6e95be555deb6741ac851eaa0163483bd9a33e19', class: "page-management" }, h("li", { key: 'faab6e7ab55628be3b5bf4e61c559a67c6ea2a57', class: "pagination-arrow", onClick: this.firstPage.bind(this) }, h(GridPaginationArrow, { key: '699c51108204e3e13c408abb43ed59039b12cddb', active: this.canGoToPreviousPage(), order: "previous", double: true })), h("li", { key: '3e13d327cab3e2b4c54ad915e38c10effa852970', class: "pagination-arrow", onClick: this.previousPage.bind(this) }, h(GridPaginationArrow, { key: '5fbe8676685d367affe840948a4ae037e7e1b0d0', active: this.canGoToPreviousPage(), order: "previous" })), h("li", { key: '086fd79d45cc0d8c60cf53b9ae44015944341b95', class: "pagination-counter" }, h("span", { key: '9bd2e83985ae3b482830628ed9384c1583392f70', "aria-label": `Page ${this.currentPage + 1} sur ${this.pageCount}`, "aria-current": "page" }, this.currentPage + 1, " / ", this.pageCount)), h("li", { key: '6a61141774ba5ddc261e911945cbe71282c34793', class: "pagination-arrow", onClick: this.nextPage.bind(this) }, h(GridPaginationArrow, { key: '4c41d7cdce692495b67227f0bb24fd0b605998e0', active: this.canGoToNextPage(), order: "next" })), h("li", { key: 'c929ccd8c749763034a42a7006264747eed59b02', class: "pagination-arrow", onClick: this.lastPage.bind(this) }, h(GridPaginationArrow, { key: '184d97af95b7fad98617f7fb138463826f94c9a8', active: this.canGoToNextPage(), order: "next", double: true })))))));
     }
     static get is() { return "wcs-grid-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-pagination/grid-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid-pagination.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface, Element,\n Event, EventEmitter,\n h,\n Host, Method,\n Prop\n} from '@stencil/core';\nimport {\n WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n /\n@Component({\n tag: 'wcs-grid-pagination',\n styleUrl: 'grid-pagination.scss',\n shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeNav!: HTMLElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n static readonly INDEX_FIRST_PAGE: number = 0;\n /\n Set the available page sizes in the pagination dropdown on the left.\n /\n @Prop() availablePageSizes: number[] = [10, 20, 50];\n /\n The current page of the pagination. First page starts at index 0.\n /\n @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n /\n Maximum number of elements shown per page. \n * Default is the first value of `availablePageSizes`.\n /\n @Prop() pageSize: number = this.availablePageSizes[0];\n /\n Total elements in the grid. \n * - Grid in `Server mode` : You have to set `itemsCount` = your total data length. \n * - Grid not in Server mode : Do not set it manually : itemsCount is set and updated every pagination refresh.\n /\n @Prop() itemsCount: number = 0;\n /\n Max number of pages. \n * - Grid in `Server mode` : You have to set `pageCount` = `itemsCount` divided by `pageSize`. \n * - Grid not in Server mode : Do not set it manually : pageCount is set and updated every pagination refresh.\n /\n @Prop() pageCount: number = 1;\n /\n Event emitted when the pagination changes.\n /\n @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeNav, attr, value);\n }\n \n private getWcsGrid(): HTMLWcsGridElement \| undefined {\n return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement as HTMLWcsGridElement : undefined;\n }\n\n private lastPage(): void {\n this.currentPage = this.pageCount - 1;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n private nextPage(): void {\n if (this.canGoToNextPage()) {\n this.currentPage++;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n }\n\n private canGoToNextPage(): boolean {\n return this.currentPage + 1 < this.pageCount;\n }\n\n private previousPage(): void {\n if (this.canGoToPreviousPage()) {\n this.currentPage--;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n }\n\n private canGoToPreviousPage(): boolean {\n return this.currentPage > 0;\n }\n\n private firstPage(): void {\n this.currentPage = 0;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n private onChangePageSize(event: CustomEvent<SelectChangeEventDetail>): void {\n this.pageSize = event.detail.value;\n if (this.currentPage + 1 > this.pageSize) {\n this.currentPage = 0;\n }\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n /\n Move focus to the first grid cell after a pagination change\n */\n private focusFirstGridCell() {\n const grid = this.getWcsGrid();\n if (grid) {\n requestAnimationFrame(() => {\n this.el.blur();\n grid.focusFirstCell();\n })\n }\n }\n\n private emitPaginationChange(): void {\n this.wcsGridPaginationChange.emit({\n pagination: {\n currentPage: this.currentPage,\n pageSize: this.pageSize,\n itemsCount: this.itemsCount,\n pageCount: this.pageCount\n }\n });\n }\n\n render(): any {\n return (<Host slot=\"grid-pagination\">\n <div class=\"container\">\n <div class=\"page-size\">\n <wcs-select placeholder=\"Eléments par page\"\n class=\"available-page-sizes\"\n aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n value={this.pageSize}\n onWcsChange={this.onChangePageSize.bind(this)}>\n {\n this.availablePageSizes.map((pageSize) =>\n <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n )\n }\n </wcs-select>\n <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n <span id=\"elements-per-page-text\">éléments par page</span>\n </div>\n\n <div class=\"items-count\">\n <span>{this.itemsCount} éléments</span>\n </div>\n\n <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n <ul class=\"page-management\">\n <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n </li>\n <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n </li>\n \n <li class=\"pagination-counter\">\n <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n {this.currentPage + 1} / {this.pageCount}\n </span>\n </li>\n \n <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n </li>\n <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n </li>\n </ul>\n </nav>\n </div>\n </Host>)\n }\n}\n"]}
1	+ {"version":3,"file":"grid-pagination.js","sourceRoot":"","sources":["../../../src/components/grid-pagination/grid-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface, Element,\n Event, EventEmitter,\n h,\n Host, Method,\n Prop\n} from '@stencil/core';\nimport {\n WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst GRID_PAGINATION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n * \n * @cssprop --wcs-grid-pagination-color - Text color of the grid pagination\n * @cssprop --wcs-grid-pagination-font-size - Font-size of the grid pagination\n * @cssprop --wcs-grid-pagination-font-weight - Font-weight of the grid pagination\n * @cssprop --wcs-grid-pagination-gap - Gap between the page size, number of elements and page management\n * @cssprop --wcs-grid-pagination-page-size-gap - Gap between the select and the text within the page size container\n * @cssprop --wcs-grid-pagination-counter-gap - Gap within the page management counter\n * @cssprop --wcs-grid-pagination-margin-top - Margin between the grid and the pagination\n * @cssprop --wcs-grid-pagination-arrow-color-inactive - Color of the inactive arrow\n * @cssprop --wcs-grid-pagination-arrow-color-active - Color of the active arrow\n * \n * @slot elements-per-page-text - Text following the page size select. Default text is \" éléments par page\". You may want to add a non-breaking space before the text to separate it from the number.\n * @slot items-count-text - Text following the number of elements. Default text is \" éléments\". You may want to add a non-breaking space before the text to separate it from the number.\n /\n@Component({\n tag: 'wcs-grid-pagination',\n styleUrl: 'grid-pagination.scss',\n shadow: true\n})\nexport class GridPagination implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeNav!: HTMLElement;\n private inheritedAttributes: { [k: string]: any } = {};\n \n static readonly INDEX_FIRST_PAGE: number = 0;\n /\n Set the available page sizes in the pagination dropdown on the left.\n /\n @Prop() availablePageSizes: number[] = [10, 20, 50];\n /\n The current page of the pagination. First page starts at index 0.\n /\n @Prop({mutable: true}) currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n /\n Maximum number of elements shown per page. \n * Default is the first value of `availablePageSizes`.\n /\n @Prop() pageSize: number = this.availablePageSizes[0];\n /\n Total elements in the grid. \n * - Grid in `Server mode` : You have to set `itemsCount` = your total data length. \n * - Grid not in Server mode : Do not set it manually : itemsCount is set and updated every pagination refresh.\n /\n @Prop() itemsCount: number = 0;\n /\n Max number of pages. \n * - Grid in `Server mode` : You have to set `pageCount` = `itemsCount` divided by `pageSize`. \n * - Grid not in Server mode : Do not set it manually : pageCount is set and updated every pagination refresh.\n /\n @Prop() pageCount: number = 1;\n /\n Event emitted when the pagination changes.\n /\n @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n componentWillLoad(): Promise<void> \| void {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, GRID_PAGINATION_INHERITED_ATTRS),\n };\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeNav, attr, value);\n }\n \n private getWcsGrid(): HTMLWcsGridElement \| undefined {\n return this.el.parentElement.tagName === 'WCS-GRID' ? this.el.parentElement as HTMLWcsGridElement : undefined;\n }\n\n private lastPage(): void {\n this.currentPage = this.pageCount - 1;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n private nextPage(): void {\n if (this.canGoToNextPage()) {\n this.currentPage++;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n }\n\n private canGoToNextPage(): boolean {\n return this.currentPage + 1 < this.pageCount;\n }\n\n private previousPage(): void {\n if (this.canGoToPreviousPage()) {\n this.currentPage--;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n }\n\n private canGoToPreviousPage(): boolean {\n return this.currentPage > 0;\n }\n\n private firstPage(): void {\n this.currentPage = 0;\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n private onChangePageSize(event: CustomEvent<SelectChangeEventDetail>): void {\n this.pageSize = event.detail.value;\n if (this.currentPage + 1 > this.pageSize) {\n this.currentPage = 0;\n }\n this.emitPaginationChange();\n this.focusFirstGridCell();\n }\n\n /\n Move focus to the first grid cell after a pagination change\n */\n private focusFirstGridCell() {\n const grid = this.getWcsGrid();\n if (grid) {\n requestAnimationFrame(() => {\n this.el.blur();\n grid.focusFirstCell();\n })\n }\n }\n\n private emitPaginationChange(): void {\n this.wcsGridPaginationChange.emit({\n pagination: {\n currentPage: this.currentPage,\n pageSize: this.pageSize,\n itemsCount: this.itemsCount,\n pageCount: this.pageCount\n }\n });\n }\n\n render(): any {\n return (<Host slot=\"grid-pagination\">\n <div class=\"container\">\n <div class=\"page-size\">\n <wcs-select placeholder=\"Eléments par page\"\n class=\"available-page-sizes\"\n aria-labelledby=\"elements-per-page-number elements-per-page-text\"\n value={this.pageSize}\n onWcsChange={this.onChangePageSize.bind(this)}>\n {\n this.availablePageSizes.map((pageSize) =>\n <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n )\n }\n </wcs-select>\n <span id=\"elements-per-page-number\" hidden>{this.pageSize}</span>\n <span id=\"elements-per-page-text\"> \n <slot name=\"elements-per-page-text\">\n <span> éléments par page</span>\n </slot>\n </span>\n </div>\n\n <div class=\"items-count\">\n <span>{this.itemsCount}\n <slot name=\"items-count-text\">\n <span> éléments</span>\n </slot>\n </span>\n </div>\n\n <nav aria-label=\"pagination\" ref={(el) => (this.nativeNav = el)} {...this.inheritedAttributes}>\n <ul class=\"page-management\">\n <li class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n </li>\n <li class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n </li>\n \n <li class=\"pagination-counter\">\n <span aria-label={`Page ${this.currentPage + 1} sur ${this.pageCount}`} aria-current=\"page\">\n {this.currentPage + 1} / {this.pageCount}\n </span>\n </li>\n \n <li class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n </li>\n <li class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n </li>\n </ul>\n </nav>\n </div>\n </Host>)\n }\n}\n"]}

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

@@ -37,7 +37,7 @@ export class Header {
         };
     }
     render() {
-        return (h("header", Object.assign({ key: '110c72f1b40917efdaa2c864c61a8ee99e35ce38', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '8a593fc8e96ea73573fae78d9107897dee680c87', name: "logo" }), h("slot", { key: '1fefec6eee8652ac531c450f15d70cf7ab8ba1c9', name: "title" }), h("slot", { key: 'ef151920a52804693a99501ee62688036e7bcda8', name: "center" }), h("slot", { key: '9d817dd99f3edb3dbe4b5a4bced020c42b64a903', name: "actions" })));
+        return (h("header", Object.assign({ key: 'd8d14874c0caf8bd0774bfbc43ec74b602d5e3eb', role: "banner", ref: (el) => (this.nativeHeader = el) }, this.inheritedAttributes), h("slot", { key: '7c7dcc8f6760d45a5c6ad530cee9947025a87771', name: "logo" }), h("slot", { key: '5e5ba145dd565729887993e1e934107311c98738', name: "title" }), h("slot", { key: 'fe799951e59ad6288fa5e44480c5e49f47da6c3d', name: "center" }), h("slot", { key: '3fabde05983e0bbd226d3d4112e567f7565fb1be', name: "actions" })));
     }
     static get is() { return "wcs-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class Hint {
         this.small = false;
     }
     render() {
-        return (h(Host, { key: 'e9b631d775aa7564172286a9ac280cffdc22aa24', slot: "messages" }, h("slot", { key: 'f8d4350acb11283861487cc1b3a5ba20c0674f82' })));
+        return (h(Host, { key: '6fae15a2dd3769e29fd86d510739a2e7b7c47123', slot: "messages" }, h("slot", { key: 'aa531d55bfb557aaba527f63af0f275b7e869d63' })));
     }
     static get is() { return "wcs-hint"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/horizontal-stepper/horizontal-stepper.js CHANGED Viewed

@@ -60,7 +60,7 @@ export class HorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: '72063828a00d77fc1bc2a92de8979d096b806786' }, h("ul", { key: 'a5b2de6193a68b6b70b0857d1c50ed1c5c069863', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
+        return (h(Host, { key: '5da8afa26c57a0c1022ff0f07f39df0237642f9d' }, h("ul", { key: '842228ca2f4e136a3937b02281ca3194d4caef91', role: "list", class: "steps" }, this.steps.map((step, index) => (h(HorizontalStep, { step: step, passed: index <= this.internalCurrentStepIndex, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index), active: index === this.internalCurrentStepIndex, first: index === 0, disable: this.isDisable(step, index), onClick: step => this.wcsHorizontalStepClick.emit({ step, index }) })))), this.renderLabels()));
     }
     isComplete(step, index) {
         return index <= this.internalCurrentStepIndex || step.complete;

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

@@ -23,7 +23,7 @@ export class Icon {
                 [`icons-size-${this.size}`]: true
             }
         };
-        return (h("i", Object.assign({ key: '429ebd8357f8097d812e43f9bda0921323f7b981' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
+        return (h("i", Object.assign({ key: '21e345e63fdb54bd03dac7b4574cdc6bddedfaa9' }, cssClass, { ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes)));
     }
     static get is() { return "wcs-icon"; }
     static get properties() {

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

@@ -1,5 +1,5 @@
 import { Build, h, Host } from "@stencil/core";
-import { debounceEvent, findItemLabel, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
+import { debounceEvent, inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
 const INPUT_INHERITED_ATTRS = ['tabindex', 'title'];
 /**
  * The input component is a form control that accepts a single line of text.
@@ -167,12 +167,7 @@ export class Input {
     }
     render() {
         const value = this.getValueAsString();
-        const labelId = this.inputId + '-lbl';
-        const label = findItemLabel(this.el);
-        if (label) {
-            label.id = labelId;
-        }
-        return (h(Host, { key: '20899914842d410ef72a8f81906e1e2be6e423cf', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ key: '059fb987112d535b3f1cf51ea9bbaa01f36667c5', class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
+        return (h(Host, { key: 'd3123d1eb17f9fe38d6081ec94b15e027f706506', "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel }, this.prefixLabel ? (h("span", { class: "prefix", part: "prefix" }, this.prefixLabel)) : null, this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null, h("input", Object.assign({ key: 'b799b4443242f73609e337b33fc5794775aa7e1c', class: "native-input", ref: input => this.nativeInput = input, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.passwordReveal ? 'text' : this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes)), this.type === "password" ? (h("button", { title: this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel, class: "toggle_password", onClick: () => this.passwordRevealIconClick() }, h("wcs-mat-icon", { icon: this.iconPassword, size: "m" }))) : null, this.suffixLabel ? (h("span", { class: "suffix", part: "suffix" }, this.suffixLabel)) : null));
     }
     static get is() { return "wcs-input"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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CAAC,IAAI,CACtF,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport {\n debounceEvent,\n findItemLabel,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n AutocompleteTypes,\n InputChangeEventDetail,\n TextFieldTypes,\n WcsInputSize,\n WcsInputAutocorrect,\n WcsInputEnterKeyHint,\n WcsInputInputMode,\n WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n \n ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n \n @cssprop --wcs-input-background-color - background color of the input\n \n @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n \n @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n \n @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n \n @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n \n @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n \n @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n /\n@Component({\n tag: 'wcs-input',\n styleUrl: 'input.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLInputElement;\n private inputId = `wcs-input-${inputIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\n private iconPassword = \"visibility\";\n\n /\n This is required for a WebKit bug which requires us to\n * blur and focus an input to properly focus the input in\n * an item with delegatesFocus. It will no longer be needed\n * with iOS 14.\n \n @internal\n /\n @Prop() fireFocusEvents: boolean = true;\n\n @State() private passwordReveal: boolean = false;\n\n /\n If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n /\n @Prop() accept?: string;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n /\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n * This also impacts form bindings such as `ngModel` or `v-model`.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n }\n\n /\n Prefix displayed before the text field contents. This is not included in the value.\n /\n @Prop() prefixLabel: string;\n\n /\n Suffix displayed after the text field contents. This is not included in the value.\n /\n @Prop() suffixLabel: string;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n /\n Specify the size (height) of the input.\n /\n @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n /\n Name of the material icon to add to the input\n /\n @Prop() icon: string;\n\n /\n A hint to the browser for which keyboard to display.\n /\n @Prop() inputmode?: WcsInputInputMode;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n * specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n * specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n * `\"email\"` or `\"file\"`, otherwise it is ignored.\n /\n @Prop({ reflect: true }) multiple?: boolean;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some\n * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n * more information.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n * state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n /\n @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n };\n }\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n detail: this.el\n }));\n }\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n detail: this.el\n }));\n }\n }\n\n /\n Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n * `input.blur()`.\n * @internal\n /\n @Method()\n async setBlur() {\n if (this.nativeInput) {\n this.nativeInput.blur();\n }\n }\n\n /\n Returns the native `<input>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLInputElement> {\n return Promise.resolve(this.nativeInput!);\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n \n private getValueAsString(): string {\n return typeof this.value === 'number' ? this.value.toString() :\n (this.value \|\| '').toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.wcsInput.emit(ev as KeyboardEvent);\n }\n\n private onChange = (_: Event) => {\n this.wcsChange.emit({value: this.nativeInput.value});\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n private onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private passwordRevealIconClick(): void {\n this.passwordReveal = !this.passwordReveal;\n }\n\n @Watch('passwordReveal')\n onPasswordRevealChange(): void {\n this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n }\n\n render() {\n const value = this.getValueAsString();\n const labelId = this.inputId + '-lbl';\n const label = findItemLabel(this.el);\n if (label) {\n label.id = labelId;\n }\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n data-has-prefix={!!this.prefixLabel}\n data-has-suffix={!!this.suffixLabel}\n >\n {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <input\n class=\"native-input\"\n ref={input => this.nativeInput = input}\n aria-labelledby={label ? labelId : null}\n disabled={this.disabled}\n accept={this.accept}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n type={this.passwordReveal ? 'text' : this.type}\n value={value}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n {...this.inheritedAttributes}\n />\n {this.type === \"password\" ? (\n <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n </button>\n ) : null}\n {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}
1	+ {"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Build,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch\n} from '@stencil/core';\nimport {\n debounceEvent,\n inheritAriaAttributes,\n inheritAttributes,\n setOrRemoveAttribute\n} from '../../utils/helpers';\nimport {\n AutocompleteTypes,\n InputChangeEventDetail,\n TextFieldTypes,\n WcsInputSize,\n WcsInputAutocorrect,\n WcsInputEnterKeyHint,\n WcsInputInputMode,\n WcsInputState\n} from './input-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst INPUT_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/*\n The input component is a form control that accepts a single line of text.\n * Implementation mainly inspired from Ionic Input Component.\n \n ## Accessibility guidelines 💡\n * > - If you use wcs-input outside a wcs-form-field, you have to manage the label and the error message yourself.\n * > You can use the `aria-label` attribute to provide a label for screen readers but adds no visual label.\n * \n * @cssprop --wcs-input-icon-color-default - default icon color when the input is not focused\n * @cssprop --wcs-input-icon-color-focus - icon color when the input is focused\n * @cssprop --wcs-input-icon-color-disabled - icon color when the input is disabled\n \n @cssprop --wcs-input-background-color - background color of the input\n \n @cssprop --wcs-input-border-radius-left - border radius of the left side of the input\n * @cssprop --wcs-input-border-radius-right - border radius of the right side of the input\n * \n * @cssprop --wcs-input-border-width - border width of the input\n * @cssprop --wcs-input-border-width-focus - border width of the input when focused\n \n @cssprop --wcs-input-height-l - large height of the input\n * @cssprop --wcs-input-height-m - medium height of the input\n * @cssprop --wcs-input-height-s - small height of the input\n * @cssprop --wcs-input-font-size-l - large font size of the input\n * @cssprop --wcs-input-font-size-m - medium font size of the input\n * @cssprop --wcs-input-font-size-s - small font size of the input\n \n @cssprop --wcs-input-border-style-default - default border style of the input\n * @cssprop --wcs-input-border-style-focus - border style of the input when focused\n * \n * @cssprop --wcs-input-prefix-suffix-background-color - background color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color - color of the suffix/prefix\n * @cssprop --wcs-input-prefix-suffix-color-disabled - color of the suffix/prefix when the input is disabled\n * @cssprop --wcs-input-prefix-suffix-font-weight - font weight of the suffix/prefix\n \n @cssprop --wcs-input-border-color-default - default border color of the input when not focused\n * @cssprop --wcs-input-border-color-disabled - border color of the input when disabled\n * @cssprop --wcs-input-border-color-focus - border color of the input when focused\n * @cssprop --wcs-input-reveal-password-button-border-color-focus - border color of the show/hide password button when focused\n * @cssprop --wcs-input-border-color-error - border color of the input when in error state\n \n @cssprop --wcs-input-value-color - color of the input value\n * @cssprop --wcs-input-value-font-weight - font weight of the input value\n * \n * @cssprop --wcs-input-placeholder-color - color of the input placeholder\n * @cssprop --wcs-input-placeholder-font-weight - font weight of the input placeholder\n * @cssprop --wcs-input-placeholder-font-style - font style of the input placeholder\n * \n * @cssprop --wcs-input-text-color-disabled - color of the input when disabled\n \n @cssprop --wcs-input-padding-horizontal-s - horizontal padding of the input in small size\n * @cssprop --wcs-input-padding-horizontal-m - horizontal padding of the input in medium size\n * @cssprop --wcs-input-padding-horizontal-l - horizontal padding of the input in large size\n * \n * @cssprop --wcs-input-gap - gap between text input and icon\n /\n@Component({\n tag: 'wcs-input',\n styleUrl: 'input.scss',\n shadow: { delegatesFocus: true },\n})\nexport class Input implements ComponentInterface, MutableAriaAttribute {\n @Element() private el!: HTMLElement;\n private nativeInput?: HTMLInputElement;\n private inputId = `wcs-input-${inputIds++}`;\n private inheritedAttributes: { [k: string]: any } = {};\n private iconPassword = \"visibility\";\n\n /\n This is required for a WebKit bug which requires us to\n * blur and focus an input to properly focus the input in\n * an item with delegatesFocus. It will no longer be needed\n * with iOS 14.\n \n @internal\n /\n @Prop() fireFocusEvents: boolean = true;\n\n @State() private passwordReveal: boolean = false;\n\n /\n If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the\n * server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n /\n @Prop() accept?: string;\n\n /\n Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n * Available options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.\n /\n @Prop() autocapitalize = 'off';\n\n /\n Indicates whether the value of the control can be automatically completed by the browser.\n /\n @Prop() autocomplete: AutocompleteTypes = 'off';\n\n /\n Whether auto correction should be enabled when the user is entering/editing the text value.\n /\n @Prop() autocorrect: WcsInputAutocorrect = 'off';\n\n /\n This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n /\n @Prop() autofocus: boolean = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `wcsInput` event after each keystroke.\n * This also impacts form bindings such as `ngModel` or `v-model`.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.wcsInput = debounceEvent(this.wcsInput, this.debounce);\n }\n\n /\n Prefix displayed before the text field contents. This is not included in the value.\n /\n @Prop() prefixLabel: string;\n\n /\n Suffix displayed after the text field contents. This is not included in the value.\n /\n @Prop() suffixLabel: string;\n\n /\n If `true`, the user cannot interact with the input.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n A hint to the browser for which enter key to display.\n /\n @Prop() enterkeyhint?: WcsInputEnterKeyHint;\n\n /\n Specify the size (height) of the input.\n /\n @Prop({reflect: true}) size: WcsInputSize = 'm';\n\n /\n Name of the material icon to add to the input\n /\n @Prop() icon: string;\n\n /\n A hint to the browser for which keyboard to display.\n /\n @Prop() inputmode?: WcsInputInputMode;\n\n /\n The maximum value, which must not be less than its minimum (min attribute) value.\n /\n @Prop() max?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n * specifies the maximum number of characters that the user can enter.\n /\n @Prop() maxlength?: number;\n\n /\n The minimum value, which must not be greater than its maximum (max attribute) value.\n /\n @Prop() min?: string;\n\n /\n If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute\n * specifies the minimum number of characters that the user can enter.\n /\n @Prop() minlength?: number;\n\n /\n If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to\n * `\"email\"` or `\"file\"`, otherwise it is ignored.\n /\n @Prop({ reflect: true }) multiple?: boolean;\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name: string = this.inputId;\n\n @Prop() hidePasswordButtonAriaLabel: string = \"Cacher le mot de passe\";\n @Prop() showPasswordButtonAriaLabel: string = \"Afficher le mot de passe\";\n\n /\n A regular expression that the value is checked against. The pattern must match the entire value, not just some\n * subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value\n * of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"date\"`, or `\"password\"`, otherwise\n * it is ignored. When the type attribute is `\"date\"`, `pattern` will only be used in browsers that do not support\n * the `\"date\"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for\n * more information.\n /\n @Prop() pattern?: string;\n\n /\n Instructional text that shows before the input has a value.\n /\n @Prop() placeholder?: string \| null;\n\n /\n If `true`, the user cannot modify the value.\n /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /\n If `true`, the user must fill in a value before submitting a form.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n If `true`, the element will have its spelling and grammar checked.\n /\n @Prop() spellcheck: boolean = false;\n\n /\n Specifies the state of the input. By default the input is in an normal state but you can to set it to 'error'\n * state if the data given by the user is not valid.\n /\n @Prop({reflect: true}) state: WcsInputState = 'initial';\n\n /\n Works with the min and max attributes to limit the increments at which a value can be set.\n * Possible values are: `\"any\"` or a positive floating point number.\n /\n @Prop() step?: string;\n\n /\n The type of control to display. The default type is text.\n /\n @Prop() type: TextFieldTypes = 'text';\n\n /\n The value of the input.\n /\n @Prop({mutable: true}) value?: string \| number \| null = '';\n\n /\n Emitted when a keyboard input occurred. See https://developer.mozilla.org/en-US/docs/Web/Events/input\n /\n @Event() wcsInput!: EventEmitter<KeyboardEvent>;\n\n /\n Emitted when the value has changed. See https://developer.mozilla.org/en-US/docs/Web/Events/change\n /\n @Event() wcsChange!: EventEmitter<InputChangeEventDetail>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input has focus.\n /\n @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el, INPUT_INHERITED_ATTRS)\n };\n }\n\n connectedCallback() {\n this.debounceChanged();\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidLoad', {\n detail: this.el\n }));\n }\n }\n\n disconnectedCallback() {\n if (Build.isBrowser) {\n document.dispatchEvent(new CustomEvent('wcsInputDidUnload', {\n detail: this.el\n }));\n }\n }\n\n /\n Sets blur on the native `input` in `wcs-input`. Use this method instead of the global\n * `input.blur()`.\n * @internal\n /\n @Method()\n async setBlur() {\n if (this.nativeInput) {\n this.nativeInput.blur();\n }\n }\n\n /\n Returns the native `<input>` element used under the hood.\n */\n @Method()\n getInputElement(): Promise<HTMLInputElement> {\n return Promise.resolve(this.nativeInput!);\n }\n\n @Method()\n async setAriaAttribute(attr: AriaAttributeName, value: string \| null \| undefined) {\n setOrRemoveAttribute(this.nativeInput, attr, value);\n }\n \n private getValueAsString(): string {\n return typeof this.value === 'number' ? this.value.toString() :\n (this.value \|\| '').toString();\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement \| null;\n if (input) {\n this.value = input.value \|\| '';\n }\n this.wcsInput.emit(ev as KeyboardEvent);\n }\n\n private onChange = (_: Event) => {\n this.wcsChange.emit({value: this.nativeInput.value});\n }\n\n private onBlur = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsBlur.emit(ev);\n }\n }\n\n private onFocus = (ev: FocusEvent) => {\n if (this.fireFocusEvents) {\n this.wcsFocus.emit(ev);\n }\n }\n\n private passwordRevealIconClick(): void {\n this.passwordReveal = !this.passwordReveal;\n }\n\n @Watch('passwordReveal')\n onPasswordRevealChange(): void {\n this.iconPassword = this.passwordReveal ? 'visibility_off' : 'visibility';\n }\n\n render() {\n const value = this.getValueAsString();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n data-has-prefix={!!this.prefixLabel}\n data-has-suffix={!!this.suffixLabel}\n >\n {this.prefixLabel ? (<span class=\"prefix\" part=\"prefix\">{this.prefixLabel}</span>) : null}\n {this.icon ? (<wcs-mat-icon icon={this.icon} size=\"m\"></wcs-mat-icon>) : null}\n <input\n class=\"native-input\"\n ref={input => this.nativeInput = input}\n disabled={this.disabled}\n accept={this.accept}\n autoCapitalize={this.autocapitalize}\n autoComplete={this.autocomplete}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n min={this.min}\n max={this.max}\n minLength={this.minlength}\n maxLength={this.maxlength}\n multiple={this.multiple}\n name={this.name}\n pattern={this.pattern}\n placeholder={this.placeholder \|\| ''}\n readOnly={this.readonly}\n required={this.required}\n spellcheck={this.spellcheck}\n step={this.step}\n type={this.passwordReveal ? 'text' : this.type}\n value={value}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n {...this.inheritedAttributes}\n />\n {this.type === \"password\" ? (\n <button title={this.passwordReveal ? this.hidePasswordButtonAriaLabel : this.showPasswordButtonAriaLabel} class=\"toggle_password\" onClick={() => this.passwordRevealIconClick()}>\n <wcs-mat-icon icon={this.iconPassword} size=\"m\"></wcs-mat-icon>\n </button>\n ) : null}\n {this.suffixLabel ? (<span class=\"suffix\" part=\"suffix\">{this.suffixLabel}</span>) : null}\n </Host>\n );\n }\n}\n\nlet inputIds = 0;\n"]}

package/dist/collection/components/label/label.css CHANGED Viewed

@@ -6,17 +6,20 @@
   font-weight: var(--wcs-label-font-weight);
 }
-:host([required]) > label::after {
+label {
+  display: inline-block;
+  color: var(--wcs-label-color);
   font-weight: var(--wcs-label-font-weight);
-  color: var(--wcs-label-required-marker-color);
-  content: " *";
 }
-label {
+label ::slotted(wcs-mat-icon) {
   display: inline-flex;
-  align-items: center;
-  gap: var(--wcs-label-gap);
-  line-height: 0;
-  color: var(--wcs-label-color);
+  vertical-align: text-top;
+  margin-left: var(--wcs-label-gap);
+}
+.required-marker {
+  margin-left: 4px;
+  vertical-align: text-top;
+  color: var(--wcs-label-required-marker-color);
   font-weight: var(--wcs-label-font-weight);
 }