npm - @politiet/sheriff-web-components - Versions diffs - 1.3.2 → 1.3.3 - Mend

@politiet/sheriff-web-components 1.3.2 → 1.3.3

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 (8) hide show

package/dist/sds-textarea/sds-textarea.spec.js +24 -17
package/dist/sds-textarea/sds-textarea.spec.js.map +1 -1
package/dist/sds-textfield/sds-textfield.js +1 -1
package/dist/sds-textfield/sds-textfield.js.map +1 -1
package/dist/sds-textfield/sds-textfield.spec.js +12 -0
package/dist/sds-textfield/sds-textfield.spec.js.map +1 -1
package/dist/sheriff-web-components.js +1 -1
package/package.json +1 -1

package/dist/sds-textarea/sds-textarea.spec.js CHANGED Viewed

@@ -33,23 +33,18 @@ test.describe('textarea-component', () => {
         await expect(readonly).toHaveAttribute('readonly', '');
     });
     test('character counter visibility', async ({ page }) => {
-        // Character counter should be visible for textareas with maxlength
-        const withMaxlength = page.locator('#with-maxlength');
-        const withMaxlengthCounter = withMaxlength.locator('.sds-textarea__character-counter');
-        await expect(withMaxlengthCounter).toBeVisible();
-        // Character counter should not be visible for textareas without maxlength
-        const withoutMaxlength = page.locator('#without-maxlength');
-        const withoutMaxlengthCounter = withoutMaxlength.locator('.sds-textarea__character-counter');
+        // Character counter should be visible for textareas with counter
+        const withCounter = page.locator('#with-counter');
+        const withCounterText = withCounter.locator('.sds-textarea__character-counter');
+        await expect(withCounterText).toBeVisible();
+        // Character counter should not be visible for textareas without counter
+        const withoutCounter = page.locator('#without-maxlength');
+        const withoutMaxlengthCounter = withoutCounter.locator('.sds-textarea__character-counter');
         await expect(withoutMaxlengthCounter).not.toBeVisible();
-        // Character counter should be visible for textarea with initial value
-        const withValue = page.locator('#with-value');
-        const withValueCounter = withValue.locator('.sds-textarea__character-counter');
-        await expect(withValueCounter).toBeVisible();
-        await expect(withValueCounter).toHaveText('Du har 8 tegn igjen');
     });
     test('character counter updates on input', async ({ page }) => {
-        const textarea = page.locator('#with-maxlength');
-        const counter = page.locator('#with-maxlength').locator('.sds-textarea__character-counter');
+        const textarea = page.locator('#with-counter');
+        const counter = page.locator('#with-counter').locator('.sds-textarea__character-counter');
         // Initial state
         await expect(counter).toHaveText('Du har 10 tegn igjen');
         // Type some text
@@ -57,7 +52,7 @@ test.describe('textarea-component', () => {
         await expect(counter).toHaveText('Du har 5 tegn igjen');
         // Type more text
         await textarea.pressSequentially('Hello World');
-        await expect(counter).toHaveText('Du har 0 tegn igjen');
+        await expect(counter).toHaveText('Du har 6 tegn for mye');
     });
     test('form-submission', async ({ page }) => {
         const getFormData = await onFormSubmitCallback(page, 'textarea-form');
@@ -76,14 +71,14 @@ test.describe('textarea-component', () => {
         // Change values
         await page.locator('#with-maxlength').pressSequentially('Changed text');
         await page.locator('#with-value').pressSequentially('New value');
+        await page.locator('#with-counter').pressSequentially('Some letters');
         // Reset the form
         await page.locator('#reset-button').click();
         // Check that values are reset
         await expect(page.locator('#with-maxlength')).toHaveValue('');
         await expect(page.locator('#with-value')).toHaveValue('Initial text');
         // Check that character counters are reset
-        await expect(page.locator('#with-maxlength').locator('.sds-textarea__character-counter')).toHaveText('Du har 10 tegn igjen');
-        await expect(page.locator('#with-value').locator('.sds-textarea__character-counter')).toHaveText('Du har 8 tegn igjen');
+        await expect(page.locator('#with-counter').locator('.sds-textarea__character-counter')).toHaveText('Du har 10 tegn igjen');
     });
     test('focus', async ({ page }) => {
         for (const id of textareaIds) {
@@ -167,5 +162,17 @@ test.describe('textarea-component', () => {
             expect(shadowDomTextarea).toBe(expected);
         }
     });
+    test('can be combined with external control of value attribute', async ({ page }) => {
+        const textAreaInsideShadowDOM = page.getByRole('textbox', { name: 'Text area in React' });
+        await expect(textAreaInsideShadowDOM).toHaveValue('Initial text');
+        // First clear and then type in the text area
+        await textAreaInsideShadowDOM.clear();
+        await textAreaInsideShadowDOM.fill('Something typed into the form');
+        await expect(textAreaInsideShadowDOM).toHaveValue('Something typed into the form');
+        // Then click the button to change the text to "Text set in React"
+        const reactButton = page.locator('#react-button');
+        await reactButton.click();
+        await expect(textAreaInsideShadowDOM).toHaveValue('Text set with React');
+    });
 });
 //# sourceMappingURL=sds-textarea.spec.js.map

package/dist/sds-textarea/sds-textarea.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textarea.spec.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textarea--docs';\nconst textareaIds = [\n\t'with-maxlength',\n\t'with-min-max',\n\t'without-maxlength',\n\t'with-error',\n\t'with-value',\n\t'readonly',\n\t'required',\n\t'autocomplete-off',\n\t'autocomplete-on',\n];\n\ntest.describe('textarea-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('initial states', async ({ page }) => {\n\t\t// Check that textarea with value has the correct initial value\n\t\tconst withValue = page.locator('#with-value');\n\t\tawait expect(withValue).toHaveValue('Initial text');\n\n\t\t// Check that disabled textarea is disabled\n\t\tconst disabled = page.locator('#disabled');\n\t\tawait expect(disabled).toHaveAttribute('disabled', '');\n\n\t\tconst readonly = page.locator('#readonly');\n\t\tawait expect(readonly).toHaveAttribute('readonly', '');\n\t});\n\n\ttest('character counter visibility', async ({ page }) => {\n\t\t// Character counter should be visible for textareas with maxlength\n\t\tconst withMaxlength = page.locator('#with-maxlength');\n\t\tconst withMaxlengthCounter = withMaxlength.locator('.sds-textarea__character-counter');\n\t\tawait expect(withMaxlengthCounter).toBeVisible();\n\n\t\t// Character counter should not be visible for textareas without maxlength\n\t\tconst withoutMaxlength = page.locator('#without-maxlength');\n\t\tconst withoutMaxlengthCounter = withoutMaxlength.locator('.sds-textarea__character-counter');\n\t\tawait expect(withoutMaxlengthCounter).not.toBeVisible();\n\n\t\t// Character counter should be visible for textarea with initial value\n\t\tconst withValue = page.locator('#with-value');\n\t\tconst withValueCounter = withValue.locator('.sds-textarea__character-counter');\n\t\tawait expect(withValueCounter).toBeVisible();\n\t\tawait expect(withValueCounter).toHaveText('Du har 8 tegn igjen');\n\t});\n\n\ttest('character counter updates on input', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-maxlength');\n\t\tconst counter = page.locator('#with-maxlength').locator('.sds-textarea__character-counter');\n\n\t\t// Initial state\n\t\tawait expect(counter).toHaveText('Du har 10 tegn igjen');\n\n\t\t// Type some text\n\t\tawait textarea.pressSequentially('Hello');\n\t\tawait expect(counter).toHaveText('Du har 5 tegn igjen');\n\n\t\t// Type more text\n\t\tawait textarea.pressSequentially('Hello World');\n\t\tawait expect(counter).toHaveText('Du har 0 tegn igjen');\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'textarea-form');\n\n\t\t// Fill in some textareas\n\t\tawait page.locator('#with-maxlength').pressSequentially('Test');\n\t\tawait page.locator('#with-min-max').pressSequentially('Test input');\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\t'with-maxlength': 'Test',\n\t\t\t'with-min-max': 'Test input',\n\t\t});\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\t// Change values\n\t\tawait page.locator('#with-maxlength').pressSequentially('Changed text');\n\t\tawait page.locator('#with-value').pressSequentially('New value');\n\n\t\t// Reset the form\n\t\tawait page.locator('#reset-button').click();\n\n\t\t// Check that values are reset\n\t\tawait expect(page.locator('#with-maxlength')).toHaveValue('');\n\t\tawait expect(page.locator('#with-value')).toHaveValue('Initial text');\n\n\t\t// Check that character counters are reset\n\t\tawait expect(page.locator('#with-maxlength').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 10 tegn igjen'\n\t\t);\n\t\tawait expect(page.locator('#with-value').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 8 tegn igjen'\n\t\t);\n\t});\n\n\ttest('focus', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tif (id === 'disabled') continue; // Skip disabled textarea\n\n\t\t\t// Prepare for focus test by adding a parent div for consistent screenshots\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\n\t\t\t// Focus the textarea\n\t\t\tawait page.locator(`#${id}`).focus();\n\n\t\t\t// Verify focus state\n\t\t\tconst isFocused = await page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\treturn element === document.activeElement;\n\t\t\t}, id);\n\n\t\t\texpect(isFocused).toBeTruthy();\n\t\t}\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-min-max');\n\n\t\t// Text shorter than minlength (5) → invalid\n\t\tawait textarea.pressSequentially('abc');\n\t\tconst isValidShort = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\t// Text exactly at minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcde');\n\t\tconst isValidExact = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\n\t\t// Text longer than minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcdefg');\n\t\tconst isValidLong = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidLong).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst longStringToType = 'abcdefghijklmnop';\n\t\tconst textarea = page.locator('#with-maxlength');\n\n\t\t// Type in string longer than the 10 character maxlength\n\t\tawait textarea.pressSequentially(longStringToType);\n\t\tawait expect(textarea).toHaveValue(longStringToType.substring(0, 10));\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textarea = page.locator('#required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abc');\n\t\tisValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textarea = page.locator('#readonly');\n\t\tawait textarea.pressSequentially('abc');\n\t\tawait expect(textarea).toHaveValue('Cannot be changed');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textareas = [\n\t\t\t{ id: 'autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textareas) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\t// Check host element attribute\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\n\t\t\t// Check shadow DOM textarea element\n\t\t\tconst shadowDomTextarea = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst textarea = el.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement \| null;\n\t\t\t\treturn textarea?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomTextarea).toBe(expected);\n\t\t}\n\t});\n});\n"]}
1	+ {"version":3,"file":"sds-textarea.spec.js","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textarea--docs';\nconst textareaIds = [\n\t'with-maxlength',\n\t'with-min-max',\n\t'without-maxlength',\n\t'with-error',\n\t'with-value',\n\t'readonly',\n\t'required',\n\t'autocomplete-off',\n\t'autocomplete-on',\n];\n\ntest.describe('textarea-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('initial states', async ({ page }) => {\n\t\t// Check that textarea with value has the correct initial value\n\t\tconst withValue = page.locator('#with-value');\n\t\tawait expect(withValue).toHaveValue('Initial text');\n\n\t\t// Check that disabled textarea is disabled\n\t\tconst disabled = page.locator('#disabled');\n\t\tawait expect(disabled).toHaveAttribute('disabled', '');\n\n\t\tconst readonly = page.locator('#readonly');\n\t\tawait expect(readonly).toHaveAttribute('readonly', '');\n\t});\n\n\ttest('character counter visibility', async ({ page }) => {\n\t\t// Character counter should be visible for textareas with counter\n\t\tconst withCounter = page.locator('#with-counter');\n\t\tconst withCounterText = withCounter.locator('.sds-textarea__character-counter');\n\t\tawait expect(withCounterText).toBeVisible();\n\n\t\t// Character counter should not be visible for textareas without counter\n\t\tconst withoutCounter = page.locator('#without-maxlength');\n\t\tconst withoutMaxlengthCounter = withoutCounter.locator('.sds-textarea__character-counter');\n\t\tawait expect(withoutMaxlengthCounter).not.toBeVisible();\n\t});\n\n\ttest('character counter updates on input', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-counter');\n\t\tconst counter = page.locator('#with-counter').locator('.sds-textarea__character-counter');\n\n\t\t// Initial state\n\t\tawait expect(counter).toHaveText('Du har 10 tegn igjen');\n\n\t\t// Type some text\n\t\tawait textarea.pressSequentially('Hello');\n\t\tawait expect(counter).toHaveText('Du har 5 tegn igjen');\n\n\t\t// Type more text\n\t\tawait textarea.pressSequentially('Hello World');\n\t\tawait expect(counter).toHaveText('Du har 6 tegn for mye');\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'textarea-form');\n\n\t\t// Fill in some textareas\n\t\tawait page.locator('#with-maxlength').pressSequentially('Test');\n\t\tawait page.locator('#with-min-max').pressSequentially('Test input');\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\t'with-maxlength': 'Test',\n\t\t\t'with-min-max': 'Test input',\n\t\t});\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\t// Change values\n\t\tawait page.locator('#with-maxlength').pressSequentially('Changed text');\n\t\tawait page.locator('#with-value').pressSequentially('New value');\n\t\tawait page.locator('#with-counter').pressSequentially('Some letters');\n\n\t\t// Reset the form\n\t\tawait page.locator('#reset-button').click();\n\n\t\t// Check that values are reset\n\t\tawait expect(page.locator('#with-maxlength')).toHaveValue('');\n\t\tawait expect(page.locator('#with-value')).toHaveValue('Initial text');\n\n\t\t// Check that character counters are reset\n\t\tawait expect(page.locator('#with-counter').locator('.sds-textarea__character-counter')).toHaveText(\n\t\t\t'Du har 10 tegn igjen'\n\t\t);\n\t});\n\n\ttest('focus', async ({ page }) => {\n\t\tfor (const id of textareaIds) {\n\t\t\tif (id === 'disabled') continue; // Skip disabled textarea\n\n\t\t\t// Prepare for focus test by adding a parent div for consistent screenshots\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\n\t\t\t// Focus the textarea\n\t\t\tawait page.locator(`#${id}`).focus();\n\n\t\t\t// Verify focus state\n\t\t\tconst isFocused = await page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\treturn element === document.activeElement;\n\t\t\t}, id);\n\n\t\t\texpect(isFocused).toBeTruthy();\n\t\t}\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textarea = page.locator('#with-min-max');\n\n\t\t// Text shorter than minlength (5) → invalid\n\t\tawait textarea.pressSequentially('abc');\n\t\tconst isValidShort = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\t// Text exactly at minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcde');\n\t\tconst isValidExact = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\n\t\t// Text longer than minlength (5) → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abcdefg');\n\t\tconst isValidLong = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValidLong).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst longStringToType = 'abcdefghijklmnop';\n\t\tconst textarea = page.locator('#with-maxlength');\n\n\t\t// Type in string longer than the 10 character maxlength\n\t\tawait textarea.pressSequentially(longStringToType);\n\t\tawait expect(textarea).toHaveValue(longStringToType.substring(0, 10));\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textarea = page.locator('#required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textarea.pressSequentially('abc');\n\t\tisValid = await textarea.evaluate((el: HTMLTextAreaElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textarea = page.locator('#readonly');\n\t\tawait textarea.pressSequentially('abc');\n\t\tawait expect(textarea).toHaveValue('Cannot be changed');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textareas = [\n\t\t\t{ id: 'autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textareas) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\t// Check host element attribute\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\n\t\t\t// Check shadow DOM textarea element\n\t\t\tconst shadowDomTextarea = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst textarea = el.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement \| null;\n\t\t\t\treturn textarea?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomTextarea).toBe(expected);\n\t\t}\n\t});\n\n\ttest('can be combined with external control of value attribute', async ({ page }) => {\n\t\tconst textAreaInsideShadowDOM = page.getByRole('textbox', { name: 'Text area in React' });\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Initial text');\n\n\t\t// First clear and then type in the text area\n\t\tawait textAreaInsideShadowDOM.clear();\n\t\tawait textAreaInsideShadowDOM.fill('Something typed into the form');\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Something typed into the form');\n\n\t\t// Then click the button to change the text to \"Text set in React\"\n\t\tconst reactButton = page.locator('#react-button');\n\t\tawait reactButton.click();\n\n\t\tawait expect(textAreaInsideShadowDOM).toHaveValue('Text set with React');\n\t});\n});\n"]}

package/dist/sds-textfield/sds-textfield.js CHANGED Viewed

@@ -141,7 +141,7 @@ let SDSTextField = class SDSTextField extends LitElement {
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
 						placeholder="${ifDefined(this.placeholder)}"
-						value="${ifDefined(this.value)}"
+						.value="${this.value ?? ''}"
 						name="${ifDefined(this.name)}"
 						autocomplete="${ifDefined(this.autocomplete)}"
 						?required="${this.required}"

package/dist/sds-textfield/sds-textfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\ntype InputType = 'text' \| 'email' \| 'tel' \| 'number' \| 'password' \| 'search' \| 'url';\nexport type AutocompleteTypes =\n\t\| 'off'\n\t\| 'on'\n\t\| 'name'\n\t\| 'honorific-prefix'\n\t\| 'given-name'\n\t\| 'additional-name'\n\t\| 'family-name'\n\t\| 'honorific-suffix'\n\t\| 'nickname'\n\t\| 'email'\n\t\| 'username'\n\t\| 'new-password'\n\t\| 'current-password'\n\t\| 'one-time-code'\n\t\| 'organization-title'\n\t\| 'organization'\n\t\| 'street-address'\n\t\| 'address-line1'\n\t\| 'address-line2'\n\t\| 'address-line3'\n\t\| 'address-level4'\n\t\| 'address-level3'\n\t\| 'address-level2'\n\t\| 'address-level1'\n\t\| 'country'\n\t\| 'country-name'\n\t\| 'postal-code'\n\t\| 'cc-name'\n\t\| 'cc-given-name'\n\t\| 'cc-additional-name'\n\t\| 'cc-family-name'\n\t\| 'cc-number'\n\t\| 'cc-exp'\n\t\| 'cc-exp-month'\n\t\| 'cc-exp-year'\n\t\| 'cc-csc'\n\t\| 'cc-type'\n\t\| 'transaction-currency'\n\t\| 'transaction-amount'\n\t\| 'language'\n\t\| 'bday'\n\t\| 'bday-day'\n\t\| 'bday-month'\n\t\| 'bday-year'\n\t\| 'sex'\n\t\| 'tel'\n\t\| 'tel-country-code'\n\t\| 'tel-national'\n\t\| 'tel-area-code'\n\t\| 'tel-local'\n\t\| 'tel-extension'\n\t\| 'impp'\n\t\| 'url'\n\t\| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number \| null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number \| null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' \| 'backward' \| 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-textfield__error-message', this.disabled)}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
1	+ {"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\ntype InputType = 'text' \| 'email' \| 'tel' \| 'number' \| 'password' \| 'search' \| 'url';\nexport type AutocompleteTypes =\n\t\| 'off'\n\t\| 'on'\n\t\| 'name'\n\t\| 'honorific-prefix'\n\t\| 'given-name'\n\t\| 'additional-name'\n\t\| 'family-name'\n\t\| 'honorific-suffix'\n\t\| 'nickname'\n\t\| 'email'\n\t\| 'username'\n\t\| 'new-password'\n\t\| 'current-password'\n\t\| 'one-time-code'\n\t\| 'organization-title'\n\t\| 'organization'\n\t\| 'street-address'\n\t\| 'address-line1'\n\t\| 'address-line2'\n\t\| 'address-line3'\n\t\| 'address-level4'\n\t\| 'address-level3'\n\t\| 'address-level2'\n\t\| 'address-level1'\n\t\| 'country'\n\t\| 'country-name'\n\t\| 'postal-code'\n\t\| 'cc-name'\n\t\| 'cc-given-name'\n\t\| 'cc-additional-name'\n\t\| 'cc-family-name'\n\t\| 'cc-number'\n\t\| 'cc-exp'\n\t\| 'cc-exp-month'\n\t\| 'cc-exp-year'\n\t\| 'cc-csc'\n\t\| 'cc-type'\n\t\| 'transaction-currency'\n\t\| 'transaction-amount'\n\t\| 'language'\n\t\| 'bday'\n\t\| 'bday-day'\n\t\| 'bday-month'\n\t\| 'bday-year'\n\t\| 'sex'\n\t\| 'tel'\n\t\| 'tel-country-code'\n\t\| 'tel-national'\n\t\| 'tel-area-code'\n\t\| 'tel-local'\n\t\| 'tel-extension'\n\t\| 'impp'\n\t\| 'url'\n\t\| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number \| null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number \| null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' \| 'backward' \| 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-textfield__error-message', this.disabled)}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}

package/dist/sds-textfield/sds-textfield.spec.js CHANGED Viewed

@@ -135,5 +135,17 @@ test.describe('textfield-component', () => {
             expect(shadowDomInput).toBe(expected);
         }
     });
+    test('can be combined with external control of value attribute', async ({ page }) => {
+        const textField = page.getByRole('textbox', { name: 'Text field in React' });
+        await expect(textField).toHaveValue('Initial text');
+        // First clear and then type in the text field
+        await textField.clear();
+        await textField.fill('Something typed into the form');
+        await expect(textField).toHaveValue('Something typed into the form');
+        // Then click the button to change the text to "Text set in React"
+        const reactButton = page.locator('#react-button');
+        await reactButton.click();
+        await expect(textField).toHaveValue('Text set with React');
+    });
 });
 //# sourceMappingURL=sds-textfield.spec.js.map

package/dist/sds-textfield/sds-textfield.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.spec.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport { expect as sdsExpect } from '../playwright-util/custom-matchers';\n\nconst textfieldIds = [\n\t'textfield-name',\n\t'textfield-label',\n\t'textfield-placeholder',\n\t'textfield-helptext',\n\t'textfield-disabled',\n\t'textfield-readonly',\n\t'textfield-required',\n\t'textfield-error',\n\t'textfield-icon',\n\t'textfield-autocomplete-off',\n\t'textfield-autocomplete-on',\n\t'textfield-pattern',\n\t'textfield-min',\n\t'textfield-max',\n];\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';\n\ntest.describe('textfield-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textfieldIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tawait page.reload();\n\n\t\tfor (const id of textfieldIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL \| undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#textfield-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-min');\n\n\t\tawait textfield.pressSequentially('abc');\n\t\tconst isValidShort = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abcd');\n\t\tconst isValidExact = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-max');\n\n\t\tawait textfield.pressSequentially('abcdef');\n\t\tawait sdsExpect(textfield).toHaveValue('abcd');\n\t});\n\n\ttest('pattern', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-pattern');\n\n\t\t// Non-digits → invalid\n\t\tawait textfield.pressSequentially('abcd');\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Too few digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('123');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Exactly 4 digits → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('1234');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\n\t\t// Too many digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('12345');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abc');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-readonly');\n\t\tawait textfield.pressSequentially('abc');\n\t\tawait sdsExpect(textfield).toHaveValue('Kan ikke endres');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textfields = [\n\t\t\t{ id: 'textfield-autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'textfield-autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textfields) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\t\t\tconst shadowDomInput = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst input = el.shadowRoot?.querySelector('input') as HTMLInputElement \| null;\n\t\t\t\treturn input?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomInput).toBe(expected);\n\t\t}\n\t});\n});\n"]}
1	+ {"version":3,"file":"sds-textfield.spec.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport { expect as sdsExpect } from '../playwright-util/custom-matchers';\n\nconst textfieldIds = [\n\t'textfield-name',\n\t'textfield-label',\n\t'textfield-placeholder',\n\t'textfield-helptext',\n\t'textfield-disabled',\n\t'textfield-readonly',\n\t'textfield-required',\n\t'textfield-error',\n\t'textfield-icon',\n\t'textfield-autocomplete-off',\n\t'textfield-autocomplete-on',\n\t'textfield-pattern',\n\t'textfield-min',\n\t'textfield-max',\n];\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';\n\ntest.describe('textfield-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textfieldIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tawait page.reload();\n\n\t\tfor (const id of textfieldIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL \| undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#textfield-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-min');\n\n\t\tawait textfield.pressSequentially('abc');\n\t\tconst isValidShort = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abcd');\n\t\tconst isValidExact = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-max');\n\n\t\tawait textfield.pressSequentially('abcdef');\n\t\tawait sdsExpect(textfield).toHaveValue('abcd');\n\t});\n\n\ttest('pattern', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-pattern');\n\n\t\t// Non-digits → invalid\n\t\tawait textfield.pressSequentially('abcd');\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Too few digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('123');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Exactly 4 digits → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('1234');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\n\t\t// Too many digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('12345');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abc');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-readonly');\n\t\tawait textfield.pressSequentially('abc');\n\t\tawait sdsExpect(textfield).toHaveValue('Kan ikke endres');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textfields = [\n\t\t\t{ id: 'textfield-autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'textfield-autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textfields) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\t\t\tconst shadowDomInput = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst input = el.shadowRoot?.querySelector('input') as HTMLInputElement \| null;\n\t\t\t\treturn input?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomInput).toBe(expected);\n\t\t}\n\t});\n\n\ttest('can be combined with external control of value attribute', async ({ page }) => {\n\t\tconst textField = page.getByRole('textbox', { name: 'Text field in React' });\n\t\tawait expect(textField).toHaveValue('Initial text');\n\n\t\t// First clear and then type in the text field\n\t\tawait textField.clear();\n\t\tawait textField.fill('Something typed into the form');\n\t\tawait expect(textField).toHaveValue('Something typed into the form');\n\n\t\t// Then click the button to change the text to \"Text set in React\"\n\t\tconst reactButton = page.locator('#react-button');\n\t\tawait reactButton.click();\n\n\t\tawait expect(textField).toHaveValue('Text set with React');\n\t});\n});\n"]}

package/dist/sheriff-web-components.js CHANGED Viewed

@@ -4080,7 +4080,7 @@ let SDSTextField = class extends i$1 {
 						?disabled="${this.disabled}"
 						?readonly="${this.readOnly}"
 						placeholder="${o$1(this.placeholder)}"
-						value="${o$1(this.value)}"
+						.value="${this.value ?? ""}"
 						name="${o$1(this.name)}"
 						autocomplete="${o$1(this.autocomplete)}"
 						?required="${this.required}"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@politiet/sheriff-web-components",
-	"version": "1.3.2",
+	"version": "1.3.3",
 	"description": "Sheriff Design System Web Components Library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",