npm - @politiet/sheriff-web-components - Versions diffs - 1.0.3-alpha.0 → 1.1.0 - Mend

@politiet/sheriff-web-components 1.0.3-alpha.0 → 1.1.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 (42) hide show

package/dist/playwright-util/custom-matchers.d.ts +1 -0
package/dist/playwright-util/custom-matchers.d.ts.map +1 -1
package/dist/playwright-util/custom-matchers.js +10 -0
package/dist/playwright-util/custom-matchers.js.map +1 -1
package/dist/playwright-util/form.d.ts +1 -1
package/dist/playwright-util/form.d.ts.map +1 -1
package/dist/playwright-util/form.js +12 -7
package/dist/playwright-util/form.js.map +1 -1
package/dist/react-wrappers/SDSTextFieldWrapper.js +1 -1
package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
package/dist/sds-checkbox/sds-checkbox.d.ts +1 -0
package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
package/dist/sds-checkbox/sds-checkbox.js +6 -11
package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
package/dist/sds-checkbox/sds-checkbox.spec.js +18 -12
package/dist/sds-checkbox/sds-checkbox.spec.js.map +1 -1
package/dist/sds-chip/sds-chip.d.ts +2 -0
package/dist/sds-chip/sds-chip.d.ts.map +1 -1
package/dist/sds-chip/sds-chip.js +10 -1
package/dist/sds-chip/sds-chip.js.map +1 -1
package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
package/dist/sds-chip/sds-chip.styles.js +9 -8
package/dist/sds-chip/sds-chip.styles.js.map +1 -1
package/dist/sds-radio/sds-radio.d.ts +1 -0
package/dist/sds-radio/sds-radio.d.ts.map +1 -1
package/dist/sds-radio/sds-radio.js +9 -4
package/dist/sds-radio/sds-radio.js.map +1 -1
package/dist/sds-radio/sds-radio.spec.d.ts +2 -0
package/dist/sds-radio/sds-radio.spec.d.ts.map +1 -0
package/dist/sds-radio/sds-radio.spec.js +71 -0
package/dist/sds-radio/sds-radio.spec.js.map +1 -0
package/dist/sds-radio/sds-radio.styles.js +1 -1
package/dist/sds-radio/sds-radio.styles.js.map +1 -1
package/dist/sds-textfield/sds-textfield.spec.d.ts +2 -0
package/dist/sds-textfield/sds-textfield.spec.d.ts.map +1 -0
package/dist/sds-textfield/sds-textfield.spec.js +139 -0
package/dist/sds-textfield/sds-textfield.spec.js.map +1 -0
package/dist/sheriff-web-components.js +33 -24
package/dist/utils/guarded-custom-element.d.ts +3 -5
package/dist/utils/guarded-custom-element.d.ts.map +1 -1
package/dist/utils/guarded-custom-element.js.map +1 -1
package/package.json +1 -1

package/dist/playwright-util/custom-matchers.d.ts CHANGED Viewed

@@ -2,5 +2,6 @@ import { ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test
 export declare const expect: import("@playwright/test").Expect<{
     isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
     isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
+    toHaveValue(this: ExpectMatcherState, receiver: Locator, expected: string): Promise<MatcherReturnType>;
 }>;
 //# sourceMappingURL=custom-matchers.d.ts.map

package/dist/playwright-util/custom-matchers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-matchers.d.ts","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtG,eAAO,MAAM,MAAM;oBACI,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;uBAI/D,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;~~EAI1F~~,CAAC"}
1	+ {"version":3,"file":"custom-matchers.d.ts","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,kBAAkB,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAEtG,eAAO,MAAM,MAAM;oBACI,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;uBAI/D,kBAAkB,YAAY,OAAO,GAAG,OAAO,CAAC,iBAAiB,CAAC;sBAInE,kBAAkB,YAAY,OAAO,YAAY,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC;EAW3G,CAAC"}

package/dist/playwright-util/custom-matchers.js CHANGED Viewed

@@ -8,5 +8,15 @@ export const expect = pwExpect.extend({
         expect(await receiver.getAttribute('checked')).toBeNull();
         return { message: () => 'Pass', pass: true };
     },
+    async toHaveValue(receiver, expected) {
+        const actual = await receiver.evaluate((el) => el.value);
+        const pass = actual === expected;
+        return {
+            pass,
+            message: () => pass
+                ? `expected value not to be “${expected}”`
+                : `expected value to be “${expected}”, but got ${actual === null ? 'no value' : `“${actual}”`}`,
+        };
+    },
 });
 //# sourceMappingURL=custom-matchers.js.map

package/dist/playwright-util/custom-matchers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"custom-matchers.js","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAkD,MAAM,kBAAkB,CAAC;AAEtG,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IACrC,KAAK,CAAC,SAAS,CAA2B,QAAiB;QAC1D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;IACD,KAAK,CAAC,YAAY,CAA2B,QAAiB;QAC7D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QAC1D,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;CACD,CAAC,CAAC","sourcesContent":["import { expect as pwExpect, ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test';\n\nexport const expect = pwExpect.extend({\n\tasync isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBe('');\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n\tasync isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBeNull();\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n});\n"]}
1	+ {"version":3,"file":"custom-matchers.js","sourceRoot":"","sources":["../../src/playwright-util/custom-matchers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,QAAQ,EAAkD,MAAM,kBAAkB,CAAC;AAEtG,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IACrC,KAAK,CAAC,SAAS,CAA2B,QAAiB;QAC1D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;IACD,KAAK,CAAC,YAAY,CAA2B,QAAiB;QAC7D,MAAM,CAAC,MAAM,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QAC1D,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC9C,CAAC;IACD,KAAK,CAAC,WAAW,CAA2B,QAAiB,EAAE,QAAgB;QAC9E,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAoB,EAAE,EAAE,CAAC,EAAE,CAAC,KAAe,CAAC,CAAC;QACrF,MAAM,IAAI,GAAG,MAAM,KAAK,QAAQ,CAAC;QACjC,OAAO;YACN,IAAI;YACJ,OAAO,EAAE,GAAG,EAAE,CACb,IAAI;gBACH,CAAC,CAAC,6BAA6B,QAAQ,GAAG;gBAC1C,CAAC,CAAC,yBAAyB,QAAQ,cAAc,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,MAAM,GAAG,EAAE;SACjG,CAAC;IACH,CAAC;CACD,CAAC,CAAC","sourcesContent":["import { expect as pwExpect, ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test';\n\nexport const expect = pwExpect.extend({\n\tasync isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBe('');\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n\tasync isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType> {\n\t\texpect(await receiver.getAttribute('checked')).toBeNull();\n\t\treturn { message: () => 'Pass', pass: true };\n\t},\n\tasync toHaveValue(this: ExpectMatcherState, receiver: Locator, expected: string): Promise<MatcherReturnType> {\n\t\tconst actual = await receiver.evaluate((el: HTMLInputElement) => el.value as string);\n\t\tconst pass = actual === expected;\n\t\treturn {\n\t\t\tpass,\n\t\t\tmessage: () =>\n\t\t\t\tpass\n\t\t\t\t\t? `expected value not to be “${expected}”`\n\t\t\t\t\t: `expected value to be “${expected}”, but got ${actual === null ? 'no value' : `“${actual}”`}`,\n\t\t};\n\t},\n});\n"]}

package/dist/playwright-util/form.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { Page } from '@playwright/test';
-export declare const onFormSubmitCallback: (page: Page, formSelector: string, callback: (formData: Record<string, string>) => Promise<void>) => Promise<() => Promise<boolean>>;
+export declare const onFormSubmitCallback: (page: Page, formSelector: string) => Promise<() => Promise<Record<string, string>>>;
 //# sourceMappingURL=form.d.ts.map

package/dist/playwright-util/form.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,eAAO,MAAM,oBAAoB,GAChC,MAAM,IAAI,EACV,cAAc,MAAM,~~EACpB~~,~~UAAU~~,CAAC,~~QAAQ~~,~~EAAE~~,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,~~KAAK,OAAO,~~CAAC,~~IAAI~~,CAAC~~,oCA0C7D,CAAC~~"}
1	+ {"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,eAAO,MAAM,oBAAoB,GAChC,MAAM,IAAI,EACV,cAAc,MAAM,KAClB,OAAO,CAAC,MAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAiD/C,CAAC"}

package/dist/playwright-util/form.js CHANGED Viewed

@@ -1,11 +1,10 @@
-export const onFormSubmitCallback = async (page, formSelector, callback) => {
-    let hasBeenCalled = false;
+export const onFormSubmitCallback = async (page, formSelector) => {
+    let formData = null;
     // Expose a callback function into the browser's context
     // that can call function in our context, too.
     // Used to receive the form data from the submission callback.
     await page.exposeFunction('callback', async (formDataAsJson) => {
-        await callback(JSON.parse(formDataAsJson));
-        hasBeenCalled = true;
+        formData = JSON.parse(formDataAsJson);
     });
     await page.waitForTimeout(500);
     // Setup a submit listener on the form found by the formSelector.
@@ -20,7 +19,13 @@ export const onFormSubmitCallback = async (page, formSelector, callback) => {
             event.preventDefault();
             const formData = new FormData(form);
             if ('callback' in window && typeof window.callback === 'function') {
-                await window.callback(JSON.stringify(Object.fromEntries(formData)));
+                const data = Array.from(formData.keys()).reduce((acc, current) => {
+                    if (formData.getAll(current).length > 1) {
+                        return { ...acc, [current]: formData.getAll(current) };
+                    }
+                    return { ...acc, [current]: formData.get(current) };
+                }, {});
+                await window.callback(JSON.stringify(data));
             }
         });
         return true;
@@ -30,10 +35,10 @@ export const onFormSubmitCallback = async (page, formSelector, callback) => {
     }
     // Playwright handles the timeout and will break the loop when the test suite times out
     return async () => {
-        while (!hasBeenCalled) {
+        while (!formData) {
             await page.waitForTimeout(100);
         }
-        return true;
+        return formData;
     };
 };
 //# sourceMappingURL=form.js.map

package/dist/playwright-util/form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EACxC,IAAU,EACV,YAAoB,~~EACpB~~,~~QAA6D,EAC5D,~~EAAE;~~IACH~~,IAAI,~~aAAa~~,~~GAAG~~,~~KAAK~~,CAAC;~~IAC1B~~,wDAAwD;IACxD,8CAA8C;IAC9C,8DAA8D;IAC9D,MAAM,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,cAAsB,EAAE,EAAE;QACtE,~~MAAM,~~QAAQ,~~CAAC~~,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC~~,CAAC~~;~~QAC3C~~,~~aAAa,GAAG,IAAI,~~CAAC~~;IACtB~~,CAAC,CAAC~~,CAAC~~;IAEH,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,iEAAiE;IACjE,0EAA0E;IAC1E,4DAA4D;IAC5D,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE;QAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,CAAC,IAAI,YAAY,eAAe,CAAC,EAAE,CAAC;YACxC,OAAO,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAkB,EAAE,EAAE;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;YACpC,IAAI,UAAU,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnE,MAAM,~~MAAM~~,CAAC,QAAQ,CAAC,IAAI,CAAC,~~SAAS~~,CAAC,MAAM,CAAC,~~WAAW~~,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;~~YACrE~~,CAAC;QACF,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACb,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,IAAI,MAAM,YAAY,KAAK,EAAE,CAAC;QAC7B,MAAM,MAAM,CAAC;IACd,CAAC;IAED,uFAAuF;IACvF,OAAO,KAAK,IAAI,EAAE;QACjB,OAAO,CAAC,~~aAAa~~,EAAE,CAAC;~~YACvB~~,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,~~IAAI~~,CAAC;~~IACb~~,CAAC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { Page } from '@playwright/test';\n\nexport const onFormSubmitCallback = async (\n\tpage: Page,\n\tformSelector: string,\n~~\tcallback~~: (~~formData:~~ Record<string, string>) => ~~Promise<void>\n) =>~~ {\n\tlet ~~hasBeenCalled~~ = ~~false~~;\n\t// Expose a callback function into the browser's context\n\t// that can call function in our context, too.\n\t// Used to receive the form data from the submission callback.\n\tawait page.exposeFunction('callback', async (formDataAsJson: string) => {\n\t\~~tawait~~ ~~callback(~~JSON.parse(formDataAsJson));\n\t~~\thasBeenCalled = true;\n\t~~});\n\n\tawait page.waitForTimeout(500);\n\n\t// Setup a submit listener on the form found by the formSelector.\n\t// Note that this runs in a separate browser context, so we cannot pass in\n\t// non-serializable variables, such as a function reference.\n\tconst result = await page.evaluate((selector) => {\n\t\tconst form = document.getElementById(selector);\n\t\tif (!(form instanceof HTMLFormElement)) {\n\t\t\treturn new Error('Form to attach listeners to not found');\n\t\t}\n\t\tform.addEventListener('submit', async (event: SubmitEvent) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst formData = new FormData(form);\n\t\t\tif ('callback' in window && typeof window.callback === 'function') {\n\t\t\t\tawait window.callback(JSON.stringify(~~Object.fromEntries(formData~~)));\n\t\t\t}\n\t\t});\n\t\treturn true;\n\t}, formSelector);\n\n\tif (result instanceof Error) {\n\t\tthrow result;\n\t}\n\n\t// Playwright handles the timeout and will break the loop when the test suite times out\n\treturn async () => {\n\t\twhile (!~~hasBeenCalled~~) {\n\t\t\tawait page.waitForTimeout(100);\n\t\t}\n\t\treturn ~~true~~;\n\t};\n};\n"]}
1	+ {"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/playwright-util/form.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EACxC,IAAU,EACV,YAAoB,EAC6B,EAAE;IACnD,IAAI,QAAQ,GAAkC,IAAI,CAAC;IACnD,wDAAwD;IACxD,8CAA8C;IAC9C,8DAA8D;IAC9D,MAAM,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,EAAE,cAAsB,EAAE,EAAE;QACtE,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE/B,iEAAiE;IACjE,0EAA0E;IAC1E,4DAA4D;IAC5D,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,EAAE;QAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,CAAC,IAAI,YAAY,eAAe,CAAC,EAAE,CAAC;YACxC,OAAO,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAkB,EAAE,EAAE;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;YACpC,IAAI,UAAU,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAC9C,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBAChB,IAAI,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;wBACzC,OAAO,EAAE,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;oBACxD,CAAC;oBACD,OAAO,EAAE,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAE,EAAE,CAAC;gBACtD,CAAC,EACD,EAA+D,CAC/D,CAAC;gBACF,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7C,CAAC;QACF,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACb,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,IAAI,MAAM,YAAY,KAAK,EAAE,CAAC;QAC7B,MAAM,MAAM,CAAC;IACd,CAAC;IAED,uFAAuF;IACvF,OAAO,KAAK,IAAI,EAAE;QACjB,OAAO,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;QACD,OAAO,QAAQ,CAAC;IACjB,CAAC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import { Page } from '@playwright/test';\n\nexport const onFormSubmitCallback = async (\n\tpage: Page,\n\tformSelector: string\n): Promise<() => Promise<Record<string, string>>> => {\n\tlet formData: Record<string, string> \| null = null;\n\t// Expose a callback function into the browser's context\n\t// that can call function in our context, too.\n\t// Used to receive the form data from the submission callback.\n\tawait page.exposeFunction('callback', async (formDataAsJson: string) => {\n\t\tformData = JSON.parse(formDataAsJson);\n\t});\n\n\tawait page.waitForTimeout(500);\n\n\t// Setup a submit listener on the form found by the formSelector.\n\t// Note that this runs in a separate browser context, so we cannot pass in\n\t// non-serializable variables, such as a function reference.\n\tconst result = await page.evaluate((selector) => {\n\t\tconst form = document.getElementById(selector);\n\t\tif (!(form instanceof HTMLFormElement)) {\n\t\t\treturn new Error('Form to attach listeners to not found');\n\t\t}\n\t\tform.addEventListener('submit', async (event: SubmitEvent) => {\n\t\t\tevent.preventDefault();\n\t\t\tconst formData = new FormData(form);\n\t\t\tif ('callback' in window && typeof window.callback === 'function') {\n\t\t\t\tconst data = Array.from(formData.keys()).reduce(\n\t\t\t\t\t(acc, current) => {\n\t\t\t\t\t\tif (formData.getAll(current).length > 1) {\n\t\t\t\t\t\t\treturn { ...acc, [current]: formData.getAll(current) };\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn { ...acc, [current]: formData.get(current)! };\n\t\t\t\t\t},\n\t\t\t\t\t{} as Record<string, FormDataEntryValue \| FormDataEntryValue[]>\n\t\t\t\t);\n\t\t\t\tawait window.callback(JSON.stringify(data));\n\t\t\t}\n\t\t});\n\t\treturn true;\n\t}, formSelector);\n\n\tif (result instanceof Error) {\n\t\tthrow result;\n\t}\n\n\t// Playwright handles the timeout and will break the loop when the test suite times out\n\treturn async () => {\n\t\twhile (!formData) {\n\t\t\tawait page.waitForTimeout(100);\n\t\t}\n\t\treturn formData;\n\t};\n};\n"]}

package/dist/react-wrappers/SDSTextFieldWrapper.js CHANGED Viewed

@@ -7,7 +7,7 @@ export const SDSTextFieldWrapper = createComponent({
     react: React,
     events: {
         onInput: 'input',
-        onChange: 'change',
+        onChange: 'input',
         onSelect: 'select',
         onFocus: 'focus',
         onBlur: 'blur',

package/dist/react-wrappers/SDSTextFieldWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SDSTextFieldWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IAClD,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,~~QAAQ~~;~~QAClB~~,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;KACd;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSTextField } from '../sds-textfield/sds-textfield';\n\nexport const SDSTextFieldWrapper = createComponent({\n\ttagName: 'sds-textfield',\n\telementClass: SDSTextField,\n\treact: React,\n\tevents: {\n\t\tonInput: 'input',\n\t\tonChange: '~~change~~',\n\t\tonSelect: 'select',\n\t\tonFocus: 'focus',\n\t\tonBlur: 'blur',\n\t},\n});\n"]}
1	+ {"version":3,"file":"SDSTextFieldWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSTextFieldWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IAClD,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,OAAO;QACjB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;KACd;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSTextField } from '../sds-textfield/sds-textfield';\n\nexport const SDSTextFieldWrapper = createComponent({\n\ttagName: 'sds-textfield',\n\telementClass: SDSTextField,\n\treact: React,\n\tevents: {\n\t\tonInput: 'input',\n\t\tonChange: 'input',\n\t\tonSelect: 'select',\n\t\tonFocus: 'focus',\n\t\tonBlur: 'blur',\n\t},\n});\n"]}

package/dist/sds-checkbox/sds-checkbox.d.ts CHANGED Viewed

@@ -44,6 +44,7 @@ export declare class SDSCheckbox extends LitElement {
     blur(): void;
     click(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    get type(): string;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/sds-checkbox/sds-checkbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;~~IAkBjB~~,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAQ3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAQ1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;~~IAUjE~~,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
1	+ {"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAQ3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAQ1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,IAAI,IAAI,IAAI,MAAM,CAEjB;IAEQ,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

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

@@ -23,7 +23,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
             if (!this.disabled) {
                 const elem = event.target;
                 this.checked = elem.checked;
-                this.internals.setFormValue(elem.checked ? elem.value : '');
+                this.internals.setFormValue(elem.checked ? elem.value : null);
                 this._validate();
                 this.dispatchEvent(new CustomEvent('change', {
                     bubbles: true,
@@ -58,16 +58,8 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
         super.connectedCallback();
         this._initialChecked = this.checked;
         this.internals.role = 'checkbox';
-        if ('FormDataEvent' in window) {
-            this.internals.form?.addEventListener('formdata', (event) => {
-                if (this.disabled || !this.name || !this.checked) {
-                    return;
-                }
-                event.formData.set(this.name, this.value ?? 'on');
-            });
-        }
         if (this.checked) {
-            this.internals.setFormValue(this.value ? this.value : '');
+            this.internals.setFormValue(this.value ?? 'on');
         }
     }
     firstUpdated(_changedProperties) {
@@ -82,7 +74,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
         if (this.control) {
             this.control.checked = this._initialChecked;
         }
-        const resetValue = this.checked && this.value ? this.value : '';
+        const resetValue = this.checked ? this.value ?? 'on' : null;
         this.internals.setFormValue(resetValue);
         this._validate();
     }
@@ -115,6 +107,9 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
             this._validate();
         }
     }
+    get type() {
+        return 'checkbox';
+    }
     render() {
         const checkboxClasses = {
             'sds-checkbox': true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, 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-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif ('FormDataEvent' in window) {\n\t\t\tthis.internals.form?.addEventListener('formdata', (event: FormDataEvent) => {\n\t\t\t\tif (this.disabled \|\| !this.name \|\| !this.checked) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tevent.formData.set(this.name, this.value ?? 'on');\n\t\t\t});\n\t\t}\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : '');\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\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\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
1	+ {"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAgBxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAoB1C;QACC,KAAK,EAAE,CAAC;QAVmC,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjB,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QAIrD,oBAAe,GAAY,KAAK,CAAC;QA4CxB,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,MAAM,IAAI,GAAG,KAAK,CAAC,MAA0B,CAAC;gBAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC9D,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACzB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACpD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,MAAM,EAAE;gBACvB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC5D,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;YAClD,CAAC;QACF,CAAC,CAAC;QAjFD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;QAEjC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QACjD,CAAC;IACF,CAAC;IAEQ,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;IAClB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QAC7C,CAAC;QACD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,EAAE,CAAC;IAClB,CAAC;IAEO,SAAS;QAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAClG,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;IACF,CAAC;IA6CQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACrE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACvD,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvC,CAAC;QACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAED,IAAI,IAAI;QACP,OAAO,UAAU,CAAC;IACnB,CAAC;IAEQ,MAAM;QACd,MAAM,eAAe,GAAG;YACvB,cAAc,EAAE,IAAI;YACpB,qBAAqB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SAC1C,CAAC;QAEF,MAAM,YAAY,GAAG;YACpB,qBAAqB,EAAE,IAAI;YAC3B,4BAA4B,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SACjD,CAAC;QAEF,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC,eAAe,CAAC,aAAa,IAAI,CAAC,YAAY;;;;;cAK1D,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;eACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;kBAClB,IAAI,CAAC,OAAO;mBACX,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;iBACf,IAAI,CAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;eAClB,IAAI,CAAC,WAAW;eAChB,QAAQ,CAAC,YAAY,CAAC;;OAE9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO;;;GAGtF,CAAC;IACH,CAAC;;AAjKD,UAAU;AACM,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAE3B,0BAAc,GAAG,IAAI,AAAP,CAAQ;AAIc;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAgB;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAgB;AACC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AACd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAE1C;IAAlB,KAAK,CAAC,UAAU,CAAC;4CAA4B;AAhBlC,WAAW;IADvB,oBAAoB,CAAC,cAAc,CAAC;GACxB,WAAW,CAmKvB","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, 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-checkbox.styles';\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? 'on');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked ? this.value ?? 'on' : null;\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(elem.checked ? elem.value : null);\n\t\t\tthis._validate();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('focus', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('blur', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string \| number \| symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\tget type(): string {\n\t\treturn 'checkbox';\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\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\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-checkbox__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { test } from '@playwright/test';
-import { onFormSubmitCallback } from 'src/playwright-util/form';
+import { onFormSubmitCallback } from '../playwright-util/form';
 import { expect } from '../playwright-util/custom-matchers';
 test.describe('checkbox-component', () => {
     test.beforeEach(async ({ page }) => {
@@ -44,18 +44,24 @@ test.describe('checkbox-component', () => {
         await expect(checkedDisabledCheckbox).isChecked();
     });
     test('form-submission', async ({ page }) => {
-        const callback = async (formData) => {
-            expect(formData).toMatchObject({
-                checked: 'on',
-                'custom-value': 'custom-value',
-            });
-            expect(formData).not.toHaveProperty('unchecked');
-            expect(formData).not.toHaveProperty('disabled');
-            expect(formData).not.toHaveProperty('checked-disabled');
-        };
-        const hasBeenCalled = await onFormSubmitCallback(page, 'checkbox-form', callback);
+        const getFormData = await onFormSubmitCallback(page, 'checkbox-form');
+        const checkboxGroupMember = page.locator('#group-member-1');
+        await checkboxGroupMember.click();
+        const checkboxGroupMember2 = page.locator('#group-member-2');
+        await checkboxGroupMember2.click();
+        const checkboxGroupMember3 = page.locator('#group-member-3');
+        await checkboxGroupMember3.click();
         await page.locator('#submit-button').click();
-        await expect.poll(async () => await hasBeenCalled(), 'Form submission callback not called').toBeTruthy();
+        await expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();
+        const formData = await getFormData();
+        expect(formData).toMatchObject({
+            checked: 'on',
+            'custom-value': 'custom-value',
+            'checkbox-group': ['option-1', 'option-2', 'option-3'],
+        });
+        expect(formData).not.toHaveProperty('unchecked');
+        expect(formData).not.toHaveProperty('disabled');
+        expect(formData).not.toHaveProperty('checked-disabled');
     });
     test('form-reset', async ({ page }) => {
         await page.locator('#unchecked').click();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-checkbox.spec.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,~~0BAA0B~~,CAAC;~~AAChE~~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~~QAAQ~~,GAAG,~~KAAK~~,~~EAAE~~,~~QAAgC~~,EAAE,~~EAAE~~;~~YAC3D~~,MAAM,~~CAAC~~,~~QAAQ~~,CAAC,CAAC,~~aAAa~~,CAAC;~~gBAC9B~~,~~OAAO~~,~~EAAE~~,~~IAAI;gBACb~~,~~cAAc~~,EAAE,~~cAAc~~;~~aAC9B~~,CAAC,CAAC;~~YACH~~,MAAM,CAAC,~~QAAQ~~,~~CAAC~~,CAAC,GAAG,CAAC,~~cAAc~~,CAAC,~~WAAW~~,CAAC,CAAC;~~YACjD~~,MAAM,CAAC,~~QAAQ~~,~~CAAC~~,CAAC,~~GAAG~~,CAAC,~~cAAc~~,CAAC,~~UAAU~~,CAAC,CAAC;~~YAChD~~,MAAM,CAAC,~~QAAQ~~,CAAC,~~CAAC~~,~~GAAG~~,CAAC,~~cAAc,~~CAAC,~~kBAAkB~~,CAAC,CAAC~~;QACzD~~,CAAC,CAAC;~~QACF~~,MAAM,~~aAAa~~,GAAG,MAAM,~~oBAAoB~~,CAAC,IAAI,EAAE,~~eAAe~~,EAAE,~~QAAQ~~,CAAC,CAAC;~~QAElF~~,MAAM,~~IAAI,~~CAAC,~~OAAO~~,CAAC,~~gBAAgB~~,CAAC,CAAC,~~KAAK~~,~~EAAE~~,CAAC;~~QAC7C~~,MAAM,~~MAAM~~,CAAC,~~IAAI~~,CAAC,~~KAAK~~,~~IAAI~~,~~EAAE~~,CAAC,MAAM,~~aAAa~~,~~EAAE~~,~~EAAE~~,~~qCAAqC~~,CAAC,CAAC,~~UAAU~~,~~EAAE~~,CAAC;~~IAC1G~~,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACrC,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;QAEvC,MAAM,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,KAAK,EAAE,CAAC;QAE5C,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;QACxD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACpD,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '~~src/~~playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\ntest.describe('checkbox-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-checkbox--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isNotChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait expect(uncheckedCheckbox).isNotChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait expect(checkedCheckbox).isChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait expect(disabledCheckbox).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t\tawait expect(checkedDisabledCheckbox).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Checkbox with label').click();\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait uncheckedCheckbox.click();\n\t\tawait expect(uncheckedCheckbox).isChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait checkedCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait disabledCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait checkedDisabledCheckbox.click();\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst ~~callback~~ = ~~async~~ (~~formData: Record<string~~, ~~string>~~) ~~=> {\~~n\~~t\t\texpect(formData).toMatchObject({\~~n\t\~~t\t\tchecked:~~ ~~'on',\n\t\t\t\t'custom-value':~~ '~~custom~~-~~value~~'~~,\n\t\t\t}~~);\n\t\~~t\texpect(formData)~~.~~not.toHaveProperty~~(~~'unchecked'~~);\n\t\t\~~texpect(formData)~~.~~not.toHaveProperty~~('~~disabled~~');\n\t\~~t\texpect(formData)~~.~~not.toHaveProperty~~(~~'checked-disabled'~~);\n\~~t\t};\~~n\t\tconst ~~hasBeenCalled~~ = ~~await onFormSubmitCallback~~(~~page,~~ '~~checkbox~~-~~form~~', ~~callback~~);\n\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect.poll(async () => await ~~hasBeenCalled~~(), 'Form ~~submission~~ ~~callback~~ not ~~called~~').toBeTruthy();\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n});\n"]}
1	+ {"version":3,"file":"sds-checkbox.spec.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.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\ntest.describe('checkbox-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-checkbox--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isNotChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait expect(uncheckedCheckbox).isNotChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait expect(checkedCheckbox).isChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait expect(disabledCheckbox).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t\tawait expect(checkedDisabledCheckbox).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Checkbox with label').click();\n\t\tconst checkboxWithLabel = page.locator('#with-label');\n\t\tawait expect(checkboxWithLabel).isChecked();\n\n\t\tconst uncheckedCheckbox = page.locator('#unchecked');\n\t\tawait uncheckedCheckbox.click();\n\t\tawait expect(uncheckedCheckbox).isChecked();\n\n\t\tconst checkedCheckbox = page.locator('#checked');\n\t\tawait checkedCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst disabledCheckbox = page.locator('#disabled');\n\t\tawait disabledCheckbox.click();\n\t\tawait expect(checkedCheckbox).isNotChecked();\n\n\t\tconst checkedDisabledCheckbox = page.locator('#checked-disabled');\n\t\tawait checkedDisabledCheckbox.click();\n\t\tawait expect(checkedDisabledCheckbox).isChecked();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'checkbox-form');\n\n\t\tconst checkboxGroupMember = page.locator('#group-member-1');\n\t\tawait checkboxGroupMember.click();\n\n\t\tconst checkboxGroupMember2 = page.locator('#group-member-2');\n\t\tawait checkboxGroupMember2.click();\n\n\t\tconst checkboxGroupMember3 = page.locator('#group-member-3');\n\t\tawait checkboxGroupMember3.click();\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\tchecked: 'on',\n\t\t\t'custom-value': 'custom-value',\n\t\t\t'checkbox-group': ['option-1', 'option-2', 'option-3'],\n\t\t});\n\t\texpect(formData).not.toHaveProperty('unchecked');\n\t\texpect(formData).not.toHaveProperty('disabled');\n\t\texpect(formData).not.toHaveProperty('checked-disabled');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n});\n"]}

package/dist/sds-chip/sds-chip.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ export interface SDSChipProps {
     name?: string;
     value?: string;
     disabled?: boolean;
+    readonly?: boolean;
     onChange?: (event: CustomEvent<{
         value: string | undefined;
         isChecked: boolean;
@@ -25,6 +26,7 @@ export declare class SDSChip extends LitElement {
     name?: string;
     value?: string;
     disabled: boolean;
+    readonly: boolean;
     control: HTMLInputElement;
     private _initialChecked;
     constructor();

package/dist/sds-chip/sds-chip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAW;IACxB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;~~IA0Bf~~,OAAO,CAAC,QAAQ,CAAC,OAAO,~~CAYtB~~;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,~~CAOtB~~;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
1	+ {"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,OAAO,EAAE,WAAW,CAAgB;IACpC,IAAI,EAAE,QAAQ,CAAW;IACxB,OAAO,UAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE1C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAS1B,iBAAiB;IAMR,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IA2Bf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAatB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAQtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

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

@@ -19,10 +19,13 @@ let SDSChip = class SDSChip extends LitElement {
         this.size = 'large';
         this.checked = false;
         this.disabled = false;
+        this.readonly = false;
         this._initialChecked = false;
         this._toggle = (event) => {
             event.preventDefault();
             event.stopImmediatePropagation();
+            if (this.disabled || this.readonly)
+                return;
             this.checked = !this.checked;
             this.internals.setFormValue(this.checked && this.value ? this.value : '');
             this.dispatchEvent(new CustomEvent('change', {
@@ -31,6 +34,8 @@ let SDSChip = class SDSChip extends LitElement {
             }));
         };
         this._remove = () => {
+            if (this.disabled || this.readonly)
+                return;
             this.dispatchEvent(new CustomEvent('sds-remove', {
                 bubbles: true,
                 composed: true,
@@ -69,7 +74,7 @@ let SDSChip = class SDSChip extends LitElement {
             'sds-chip': true,
             'sds-chip--small': this.size === 'small',
         };
-        if (this.variant === 'removable') {
+        if (this.variant === 'removable' && !this.readonly) {
             return html `<button class="${classMap(chipClasses)}" @click=${this._remove}>
 				<slot></slot>
 				<sds-icon name="close-material-outlined" size="s"></sds-icon>
@@ -83,6 +88,7 @@ let SDSChip = class SDSChip extends LitElement {
 				value="${ifDefined(this.value)}"
 				?checked="${this.checked}"
 				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
 			/>
 			<slot></slot>
 		</label>`;
@@ -109,6 +115,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSChip.prototype, "readonly", void 0);
 __decorate([
     query('#control')
 ], SDSChip.prototype, "control", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,sBAAsB,CAAC;~~AAiBvB~~,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;~~IAmBtC~~;QACC,KAAK,EAAE,CAAC;~~QAbT~~,iBAAiB;QAC0B,YAAO,GAAgB,YAAY,CAAC;QACpC,SAAI,GAAa,OAAO,CAAC;QACxB,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAIrD,oBAAe,GAAY,KAAK,CAAC;~~QA6DxB~~,YAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;YAChD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACzB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAEe,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;~~QA9ED~~,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;QACjC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC3D,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACrE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,MAAM;QACd,MAAM,WAAW,GAAG;YACnB,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACxC,CAAC;QAEF,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;~~YAClC~~,OAAO,IAAI,CAAA,kBAAkB,QAAQ,CAAC,WAAW,CAAC,YAAY,IAAI,CAAC,OAAO;;;aAGhE,CAAC;QACZ,CAAC;QAED,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,WAAW,CAAC,aAAa,IAAI,CAAC,OAAO;;;;YAIhE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;aACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;gBAClB,IAAI,CAAC,OAAO;iBACX,IAAI,CAAC,QAAQ;;;WAGnB,CAAC;IACX,CAAC;;~~AA3ED~~,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAE3B,sBAAc,GAAG,IAAI,AAAP,CAAQ;AAIc;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAqC;AACpC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA0B;AACxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiB;AACjB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAgB;AACC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AAE1C;IAAlB,KAAK,CAAC,UAAU,CAAC;wCAA4B;~~AAflC~~,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,~~CAoGnB~~","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' \| 'removable';\ntype ChipSize = 'large' \| 'small';\n\nexport interface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\tonChange?: (event: CustomEvent<{ value: string \| undefined; isChecked: boolean }>) => void;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: ChipVariant = 'selectable';\n\t@property({ type: String, reflect: true }) size: ChipSize = 'large';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable') {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked && this.value ? this.value : '');\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
1	+ {"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' \| 'removable';\ntype ChipSize = 'large' \| 'small';\n\nexport interface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tonChange?: (event: CustomEvent<{ value: string \| undefined; isChecked: boolean }>) => void;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: ChipVariant = 'selectable';\n\t@property({ type: String, reflect: true }) size: ChipSize = 'large';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) readonly = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ? this.value : '');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tconst resetValue = this.checked && this.value ? this.value : '';\n\t\tthis.internals.setFormValue(resetValue);\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable' && !this.readonly) {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\tid=\"control\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t?readonly=\"${this.readonly}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (this.disabled \|\| this.readonly) return;\n\t\tthis.checked = !this.checked;\n\t\tthis.internals.setFormValue(this.checked && this.value ? this.value : '');\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tif (this.disabled \|\| this.readonly) return;\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}

package/dist/sds-chip/sds-chip.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-chip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,~~yBAyElB~~,CAAC"}
1	+ {"version":3,"file":"sds-chip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0ElB,CAAC"}

package/dist/sds-chip/sds-chip.styles.js CHANGED Viewed

@@ -17,32 +17,29 @@ export const styles = css `
 		line-height: 1.25;
 		text-align: center;
-		user-select: none;
+		user-select: text;
 		cursor: pointer;
-		&:has(input[type='checkbox']:checked) {
+		&:has(:checked) {
 			background-color: var(--sds-color-semantic-surface-action-default);
 			border-color: var(--sds-color-semantic-surface-action-default);
 			color: var(--sds-color-semantic-text-on-action);
 		}
-		&:has(
-				input[type='checkbox'][disabled],
-				input[type='checkbox']:checked[disabled]
-			) {
+		&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {
 			background-color: var(--sds-color-semantic-surface-disabled);
 			border: 2px solid var(--sds-color-semantic-surface-disabled);
 			color: var(--sds-color-semantic-text-disabled);
 			cursor: not-allowed;
 		}
-		&:hover {
+		&:not(:has([readonly])):hover {
 			background-color: var(--sds-color-semantic-surface-action-hover);
 			border-color: var(--sds-color-semantic-surface-action-hover);
 			color: var(--sds-color-semantic-text-on-action);
 		}
-		&:active {
+		&:not(:has([readonly])):active {
 			background-color: var(--sds-color-semantic-surface-action-active);
 			border: 2px solid var(--sds-color-semantic-surface-action-active);
 		}
@@ -53,6 +50,10 @@ export const styles = css `
 			outline-offset: 2px;
 		}
+		&:has([readonly]) {
+			cursor: default;
+		}
 		&.sds-chip--small {
 			font-size: 0.875rem;
 			line-height: 1.125rem;

package/dist/sds-chip/sds-chip.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3);\n\t\tjustify-content: center;\n\t\tpadding: 6px var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: 2rem;\n\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25;\n\t\ttext-align: center;\n\n\t\tuser-select: ~~none~~;\n\t\tcursor: pointer;\n\n\t\t&:has(~~input[type='checkbox']~~:checked) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:has(~~\n\t\t\t\tinput~~[type='checkbox'][disabled]~~,\n\t\t\t\tinput~~[type='checkbox']:checked[disabled]~~\n\t\t\t~~) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&.sds-chip--small {\n\t\t\tfont-size: 0.875rem;\n\t\t\tline-height: 1.125rem;\n\t\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t\t\tgap: var(--sds-spacing-2);\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
1	+ {"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3);\n\t\tjustify-content: center;\n\t\tpadding: 6px var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: 2rem;\n\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25;\n\t\ttext-align: center;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:has(:checked) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&:not(:has([readonly])):hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:not(:has([readonly])):active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--small {\n\t\t\tfont-size: 0.875rem;\n\t\t\tline-height: 1.125rem;\n\t\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t\t\tgap: var(--sds-spacing-2);\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-radio/sds-radio.d.ts CHANGED Viewed

@@ -42,6 +42,7 @@ export declare class SDSRadio extends LitElement {
     private readonly _handleChange;
     private readonly _handleFocus;
     private readonly _handleBlur;
+    private readonly _handleClick;
     get form(): HTMLFormElement | null;
     get type(): string;
     get validity(): ValidityState;

package/dist/sds-radio/sds-radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IAEvC,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;~~IAQR~~,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAU5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,~~WAEP~~;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
1	+ {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAQ;IACL,OAAO,UAAS;IAChB,KAAK,UAAS;IAEvC,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAyB9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAOR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAU5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAgCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

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

@@ -66,6 +66,12 @@ let SDSRadio = class SDSRadio extends LitElement {
             event.stopImmediatePropagation();
             this.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));
         };
+        this._handleClick = (event) => {
+            event.stopImmediatePropagation();
+            if (event.currentTarget === event.target && !this.disabled) {
+                this.shadowRoot?.querySelector('input')?.click();
+            }
+        };
         this.internals = this.attachInternals();
         this.attachShadow({ mode: 'open', delegatesFocus: true });
     }
@@ -113,8 +119,7 @@ let SDSRadio = class SDSRadio extends LitElement {
     formResetCallback() {
         this.checked = this._initialChecked;
         this.control.checked = this._initialChecked;
-        // TODO: "on" skal bare assignes til value dersom radio er avhuket og mangler value. Unchecked radio uten value skal settes til null
-        this.internals.setFormValue(this.checked ? this.value ?? 'on' : 'on');
+        this.internals.setFormValue(this.checked ? this.value ?? 'on' : null);
         this._updateGroupValidation();
     }
     updated(changedProperties) {
@@ -153,7 +158,7 @@ let SDSRadio = class SDSRadio extends LitElement {
         return this.internals.form;
     }
     get type() {
-        return this.localName;
+        return 'radio';
     }
     get validity() {
         return this.internals.validity;
@@ -200,7 +205,7 @@ let SDSRadio = class SDSRadio extends LitElement {
             'sds-radio__input--error': Boolean(this.error),
         };
         return html `
-			<div class="${classMap(radioClasses)}">
+			<div class="${classMap(radioClasses)}" @click="${this._handleClick}">
 				<label class="sds-radio__label">
 					<input
 						id="control"