@politiet/sheriff-web-components 1.0.2 → 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.
- 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-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +3 -2
- package/dist/sds-button/sds-button.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 +9 -13
- 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-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +3 -2
- package/dist/sds-checkbox-group/sds-checkbox-group.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 +13 -3
- 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-detail/sds-detail.d.ts.map +1 -1
- package/dist/sds-detail/sds-detail.js +3 -2
- package/dist/sds-detail/sds-detail.js.map +1 -1
- package/dist/sds-heading/sds-heading.d.ts.map +1 -1
- package/dist/sds-heading/sds-heading.js +3 -2
- package/dist/sds-heading/sds-heading.js.map +1 -1
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts +3 -0
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-colors.js +17 -0
- package/dist/sds-icon/sds-icon.allowed-colors.js.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-names.d.ts +3 -0
- package/dist/sds-icon/sds-icon.allowed-names.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-names.js +2 -0
- package/dist/sds-icon/sds-icon.allowed-names.js.map +1 -0
- package/dist/sds-icon/sds-icon.color-types.d.ts +2 -0
- package/dist/sds-icon/sds-icon.color-types.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.color-types.js +2 -0
- package/dist/sds-icon/sds-icon.color-types.js.map +1 -0
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.icon-types.d.ts +2 -0
- package/dist/sds-icon/sds-icon.icon-types.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.icon-types.js +2 -0
- package/dist/sds-icon/sds-icon.icon-types.js.map +1 -0
- package/dist/sds-icon/sds-icon.js +3 -2
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-label/sds-label.d.ts.map +1 -1
- package/dist/sds-label/sds-label.js +3 -2
- package/dist/sds-label/sds-label.js.map +1 -1
- package/dist/sds-link/sds-link.d.ts.map +1 -1
- package/dist/sds-link/sds-link.js +3 -2
- package/dist/sds-link/sds-link.js.map +1 -1
- package/dist/sds-loader/sds-loader.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.js +3 -2
- package/dist/sds-loader/sds-loader.js.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.d.ts.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.js +3 -2
- package/dist/sds-nav-card/sds-nav-card.js.map +1 -1
- package/dist/sds-notification/sds-notification.d.ts.map +1 -1
- package/dist/sds-notification/sds-notification.js +3 -2
- package/dist/sds-notification/sds-notification.js.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.js +3 -2
- package/dist/sds-paragraph/sds-paragraph.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 +12 -6
- 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-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +3 -2
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js +3 -2
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-text/sds-text.d.ts.map +1 -1
- package/dist/sds-text/sds-text.js +3 -2
- package/dist/sds-text/sds-text.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +3 -2
- package/dist/sds-textfield/sds-textfield.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 +307 -288
- package/dist/utils/guarded-custom-element.d.ts +5 -0
- package/dist/utils/guarded-custom-element.d.ts.map +1 -0
- package/dist/utils/guarded-custom-element.js +9 -0
- package/dist/utils/guarded-custom-element.js.map +1 -0
- package/dist/utils/hmr-helper.d.ts +2 -0
- package/dist/utils/hmr-helper.d.ts.map +1 -0
- package/dist/utils/hmr-helper.js +17 -0
- package/dist/utils/hmr-helper.js.map +1 -0
- package/dist/utils/safe-custom-element.d.ts +2 -0
- package/dist/utils/safe-custom-element.d.ts.map +1 -0
- package/dist/utils/safe-custom-element.js +9 -0
- package/dist/utils/safe-custom-element.js.map +1 -0
- package/package.json +1 -1
|
@@ -2,5 +2,6 @@ import { ExpectMatcherState, Locator, MatcherReturnType } from '@playwright/test
|
|
|
2
2
|
export declare const expect: import("@playwright/test").Expect<{
|
|
3
3
|
isChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
|
|
4
4
|
isNotChecked(this: ExpectMatcherState, receiver: Locator): Promise<MatcherReturnType>;
|
|
5
|
+
toHaveValue(this: ExpectMatcherState, receiver: Locator, expected: string): Promise<MatcherReturnType>;
|
|
5
6
|
}>;
|
|
6
7
|
//# sourceMappingURL=custom-matchers.d.ts.map
|
|
@@ -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;
|
|
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"}
|
|
@@ -8,5 +8,15 @@ export const expect = pwExpect.extend({
|
|
|
8
8
|
expect(await receiver.getAttribute('checked')).toBeNull();
|
|
9
9
|
return { message: () => 'Pass', pass: true };
|
|
10
10
|
},
|
|
11
|
+
async toHaveValue(receiver, expected) {
|
|
12
|
+
const actual = await receiver.evaluate((el) => el.value);
|
|
13
|
+
const pass = actual === expected;
|
|
14
|
+
return {
|
|
15
|
+
pass,
|
|
16
|
+
message: () => pass
|
|
17
|
+
? `expected value not to be “${expected}”`
|
|
18
|
+
: `expected value to be “${expected}”, but got ${actual === null ? 'no value' : `“${actual}”`}`,
|
|
19
|
+
};
|
|
20
|
+
},
|
|
11
21
|
});
|
|
12
22
|
//# sourceMappingURL=custom-matchers.js.map
|
|
@@ -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"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Page } from '@playwright/test';
|
|
2
|
-
export declare const onFormSubmitCallback: (page: Page, formSelector: string
|
|
2
|
+
export declare const onFormSubmitCallback: (page: Page, formSelector: string) => Promise<() => Promise<Record<string, string>>>;
|
|
3
3
|
//# sourceMappingURL=form.d.ts.map
|
|
@@ -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,
|
|
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"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
export const onFormSubmitCallback = async (page, formSelector
|
|
2
|
-
let
|
|
1
|
+
export const onFormSubmitCallback = async (page, formSelector) => {
|
|
2
|
+
let formData = null;
|
|
3
3
|
// Expose a callback function into the browser's context
|
|
4
4
|
// that can call function in our context, too.
|
|
5
5
|
// Used to receive the form data from the submission callback.
|
|
6
6
|
await page.exposeFunction('callback', async (formDataAsJson) => {
|
|
7
|
-
|
|
8
|
-
hasBeenCalled = true;
|
|
7
|
+
formData = JSON.parse(formDataAsJson);
|
|
9
8
|
});
|
|
10
9
|
await page.waitForTimeout(500);
|
|
11
10
|
// Setup a submit listener on the form found by the formSelector.
|
|
@@ -20,7 +19,13 @@ export const onFormSubmitCallback = async (page, formSelector, callback) => {
|
|
|
20
19
|
event.preventDefault();
|
|
21
20
|
const formData = new FormData(form);
|
|
22
21
|
if ('callback' in window && typeof window.callback === 'function') {
|
|
23
|
-
|
|
22
|
+
const data = Array.from(formData.keys()).reduce((acc, current) => {
|
|
23
|
+
if (formData.getAll(current).length > 1) {
|
|
24
|
+
return { ...acc, [current]: formData.getAll(current) };
|
|
25
|
+
}
|
|
26
|
+
return { ...acc, [current]: formData.get(current) };
|
|
27
|
+
}, {});
|
|
28
|
+
await window.callback(JSON.stringify(data));
|
|
24
29
|
}
|
|
25
30
|
});
|
|
26
31
|
return true;
|
|
@@ -30,10 +35,10 @@ export const onFormSubmitCallback = async (page, formSelector, callback) => {
|
|
|
30
35
|
}
|
|
31
36
|
// Playwright handles the timeout and will break the loop when the test suite times out
|
|
32
37
|
return async () => {
|
|
33
|
-
while (!
|
|
38
|
+
while (!formData) {
|
|
34
39
|
await page.waitForTimeout(100);
|
|
35
40
|
}
|
|
36
|
-
return
|
|
41
|
+
return formData;
|
|
37
42
|
};
|
|
38
43
|
};
|
|
39
44
|
//# sourceMappingURL=form.js.map
|
|
@@ -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,
|
|
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"]}
|
|
@@ -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,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAG5C,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAEiB,QAAQ,EAAE,OAAO,CAAS;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;;IAQzD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
11
12
|
import { styles } from './sds-button.styles';
|
|
12
13
|
let SDSButton = class SDSButton extends LitElement {
|
|
13
14
|
constructor() {
|
|
@@ -134,7 +135,7 @@ __decorate([
|
|
|
134
135
|
property({ type: String, reflect: true })
|
|
135
136
|
], SDSButton.prototype, "form", void 0);
|
|
136
137
|
SDSButton = __decorate([
|
|
137
|
-
|
|
138
|
+
guardedCustomElement('sds-button')
|
|
138
139
|
], SDSButton);
|
|
139
140
|
export { SDSButton };
|
|
140
141
|
//# sourceMappingURL=sds-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } 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-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\nexport interface SDSButtonProps {\n\ttype?: ButtonType;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tdisabled?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tform?: string;\n\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) form?: 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\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--critical': this.variant === 'critical',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
|
|
@@ -44,6 +44,7 @@ export declare class SDSCheckbox extends LitElement {
|
|
|
44
44
|
blur(): void;
|
|
45
45
|
click(): void;
|
|
46
46
|
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
47
|
+
get type(): string;
|
|
47
48
|
render(): import("lit-html").TemplateResult<1>;
|
|
48
49
|
}
|
|
49
50
|
declare global {
|
|
@@ -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;
|
|
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"}
|
|
@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, query } from 'lit/decorators.js';
|
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
11
12
|
import { styles } from './sds-checkbox.styles';
|
|
12
13
|
let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
13
14
|
constructor() {
|
|
@@ -22,7 +23,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
22
23
|
if (!this.disabled) {
|
|
23
24
|
const elem = event.target;
|
|
24
25
|
this.checked = elem.checked;
|
|
25
|
-
this.internals.setFormValue(elem.checked ? elem.value :
|
|
26
|
+
this.internals.setFormValue(elem.checked ? elem.value : null);
|
|
26
27
|
this._validate();
|
|
27
28
|
this.dispatchEvent(new CustomEvent('change', {
|
|
28
29
|
bubbles: true,
|
|
@@ -57,16 +58,8 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
57
58
|
super.connectedCallback();
|
|
58
59
|
this._initialChecked = this.checked;
|
|
59
60
|
this.internals.role = 'checkbox';
|
|
60
|
-
if ('FormDataEvent' in window) {
|
|
61
|
-
this.internals.form?.addEventListener('formdata', (event) => {
|
|
62
|
-
if (this.disabled || !this.name || !this.checked) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
event.formData.set(this.name, this.value ?? 'on');
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
61
|
if (this.checked) {
|
|
69
|
-
this.internals.setFormValue(this.value
|
|
62
|
+
this.internals.setFormValue(this.value ?? 'on');
|
|
70
63
|
}
|
|
71
64
|
}
|
|
72
65
|
firstUpdated(_changedProperties) {
|
|
@@ -81,7 +74,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
81
74
|
if (this.control) {
|
|
82
75
|
this.control.checked = this._initialChecked;
|
|
83
76
|
}
|
|
84
|
-
const resetValue = this.checked
|
|
77
|
+
const resetValue = this.checked ? this.value ?? 'on' : null;
|
|
85
78
|
this.internals.setFormValue(resetValue);
|
|
86
79
|
this._validate();
|
|
87
80
|
}
|
|
@@ -114,6 +107,9 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
114
107
|
this._validate();
|
|
115
108
|
}
|
|
116
109
|
}
|
|
110
|
+
get type() {
|
|
111
|
+
return 'checkbox';
|
|
112
|
+
}
|
|
117
113
|
render() {
|
|
118
114
|
const checkboxClasses = {
|
|
119
115
|
'sds-checkbox': true,
|
|
@@ -173,7 +169,7 @@ __decorate([
|
|
|
173
169
|
query('#control')
|
|
174
170
|
], SDSCheckbox.prototype, "control", void 0);
|
|
175
171
|
SDSCheckbox = __decorate([
|
|
176
|
-
|
|
172
|
+
guardedCustomElement('sds-checkbox')
|
|
177
173
|
], SDSCheckbox);
|
|
178
174
|
export { SDSCheckbox };
|
|
179
175
|
//# sourceMappingURL=sds-checkbox.js.map
|
|
@@ -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 { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\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@customElement('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":"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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\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"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { test } from '@playwright/test';
|
|
2
|
-
import { onFormSubmitCallback } from '
|
|
2
|
+
import { onFormSubmitCallback } from '../playwright-util/form';
|
|
3
3
|
import { expect } from '../playwright-util/custom-matchers';
|
|
4
4
|
test.describe('checkbox-component', () => {
|
|
5
5
|
test.beforeEach(async ({ page }) => {
|
|
@@ -44,18 +44,24 @@ test.describe('checkbox-component', () => {
|
|
|
44
44
|
await expect(checkedDisabledCheckbox).isChecked();
|
|
45
45
|
});
|
|
46
46
|
test('form-submission', async ({ page }) => {
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
expect(formData).not.toHaveProperty('checked-disabled');
|
|
55
|
-
};
|
|
56
|
-
const hasBeenCalled = await onFormSubmitCallback(page, 'checkbox-form', callback);
|
|
47
|
+
const getFormData = await onFormSubmitCallback(page, 'checkbox-form');
|
|
48
|
+
const checkboxGroupMember = page.locator('#group-member-1');
|
|
49
|
+
await checkboxGroupMember.click();
|
|
50
|
+
const checkboxGroupMember2 = page.locator('#group-member-2');
|
|
51
|
+
await checkboxGroupMember2.click();
|
|
52
|
+
const checkboxGroupMember3 = page.locator('#group-member-3');
|
|
53
|
+
await checkboxGroupMember3.click();
|
|
57
54
|
await page.locator('#submit-button').click();
|
|
58
|
-
await expect.poll(async () => await
|
|
55
|
+
await expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();
|
|
56
|
+
const formData = await getFormData();
|
|
57
|
+
expect(formData).toMatchObject({
|
|
58
|
+
checked: 'on',
|
|
59
|
+
'custom-value': 'custom-value',
|
|
60
|
+
'checkbox-group': ['option-1', 'option-2', 'option-3'],
|
|
61
|
+
});
|
|
62
|
+
expect(formData).not.toHaveProperty('unchecked');
|
|
63
|
+
expect(formData).not.toHaveProperty('disabled');
|
|
64
|
+
expect(formData).not.toHaveProperty('checked-disabled');
|
|
59
65
|
});
|
|
60
66
|
test('form-reset', async ({ page }) => {
|
|
61
67
|
await page.locator('#unchecked').click();
|
|
@@ -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,
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACtE;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAGS,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAG7F,OAAO,CAAC,eAAe,CAAgB;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAepC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
|
|
@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
10
11
|
import { styles } from './sds-checkbox-group.styles';
|
|
11
12
|
import '../sds-checkbox/sds-checkbox';
|
|
12
13
|
import '../sds-icon/sds-icon';
|
|
@@ -71,7 +72,7 @@ __decorate([
|
|
|
71
72
|
state()
|
|
72
73
|
], SDSCheckboxGroup.prototype, "_selectedValues", void 0);
|
|
73
74
|
SDSCheckboxGroup = __decorate([
|
|
74
|
-
|
|
75
|
+
guardedCustomElement('sds-checkbox-group')
|
|
75
76
|
], SDSCheckboxGroup);
|
|
76
77
|
export { SDSCheckboxGroup };
|
|
77
78
|
//# sourceMappingURL=sds-checkbox-group.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAWvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUE,oBAAe,GAAa,EAAE,CAAC;QAEtB,0BAAqB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACrE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;YAClD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,eAAe,GAAG,SAAS;gBAC/B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;gBAClC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAEnD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAgCH,CAAC;IA9BA,IAAI,KAAK;QACR,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,oBAAoB,EAAE,IAAI;YAC1B,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;SACvD,CAAC;QAEF,OAAO,IAAI,CAAA;sBACS,QAAQ,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAChG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;qBAE9E,IAAI,CAAC,qBAAqB;;MAEzC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;SAMF,IAAI,CAAC,YAAY;WACf;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAzDD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AACQ;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AACd;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAuB;AAGrF;IADP,KAAK,EAAE;yDAC+B;AAV3B,gBAAgB;IAD5B,oBAAoB,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CA2D5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: 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\n\t@state()\n\tprivate _selectedValues: string[] = [];\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked\n\t\t\t? [...this._selectedValues, value]\n\t\t\t: this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-checkbox-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\">\n\t\t\t\t\t<slot @change=${this._handleCheckboxChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-checkbox-group__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"var(--sds-color-semantic-icon-critical)\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}
|
|
@@ -9,6 +9,7 @@ export interface SDSChipProps {
|
|
|
9
9
|
name?: string;
|
|
10
10
|
value?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
|
+
readonly?: boolean;
|
|
12
13
|
onChange?: (event: CustomEvent<{
|
|
13
14
|
value: string | undefined;
|
|
14
15
|
isChecked: boolean;
|
|
@@ -25,6 +26,7 @@ export declare class SDSChip extends LitElement {
|
|
|
25
26
|
name?: string;
|
|
26
27
|
value?: string;
|
|
27
28
|
disabled: boolean;
|
|
29
|
+
readonly: boolean;
|
|
28
30
|
control: HTMLInputElement;
|
|
29
31
|
private _initialChecked;
|
|
30
32
|
constructor();
|
|
@@ -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;
|
|
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"}
|
|
@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, query } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
10
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
11
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
11
12
|
import { styles } from './sds-chip.styles';
|
|
12
13
|
import '../sds-icon/sds-icon';
|
|
13
14
|
let SDSChip = class SDSChip extends LitElement {
|
|
@@ -18,10 +19,13 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
18
19
|
this.size = 'large';
|
|
19
20
|
this.checked = false;
|
|
20
21
|
this.disabled = false;
|
|
22
|
+
this.readonly = false;
|
|
21
23
|
this._initialChecked = false;
|
|
22
24
|
this._toggle = (event) => {
|
|
23
25
|
event.preventDefault();
|
|
24
26
|
event.stopImmediatePropagation();
|
|
27
|
+
if (this.disabled || this.readonly)
|
|
28
|
+
return;
|
|
25
29
|
this.checked = !this.checked;
|
|
26
30
|
this.internals.setFormValue(this.checked && this.value ? this.value : '');
|
|
27
31
|
this.dispatchEvent(new CustomEvent('change', {
|
|
@@ -30,6 +34,8 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
30
34
|
}));
|
|
31
35
|
};
|
|
32
36
|
this._remove = () => {
|
|
37
|
+
if (this.disabled || this.readonly)
|
|
38
|
+
return;
|
|
33
39
|
this.dispatchEvent(new CustomEvent('sds-remove', {
|
|
34
40
|
bubbles: true,
|
|
35
41
|
composed: true,
|
|
@@ -68,7 +74,7 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
68
74
|
'sds-chip': true,
|
|
69
75
|
'sds-chip--small': this.size === 'small',
|
|
70
76
|
};
|
|
71
|
-
if (this.variant === 'removable') {
|
|
77
|
+
if (this.variant === 'removable' && !this.readonly) {
|
|
72
78
|
return html `<button class="${classMap(chipClasses)}" @click=${this._remove}>
|
|
73
79
|
<slot></slot>
|
|
74
80
|
<sds-icon name="close-material-outlined" size="s"></sds-icon>
|
|
@@ -82,6 +88,7 @@ let SDSChip = class SDSChip extends LitElement {
|
|
|
82
88
|
value="${ifDefined(this.value)}"
|
|
83
89
|
?checked="${this.checked}"
|
|
84
90
|
?disabled="${this.disabled}"
|
|
91
|
+
?readonly="${this.readonly}"
|
|
85
92
|
/>
|
|
86
93
|
<slot></slot>
|
|
87
94
|
</label>`;
|
|
@@ -108,11 +115,14 @@ __decorate([
|
|
|
108
115
|
__decorate([
|
|
109
116
|
property({ type: Boolean, reflect: true })
|
|
110
117
|
], SDSChip.prototype, "disabled", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: Boolean, reflect: true })
|
|
120
|
+
], SDSChip.prototype, "readonly", void 0);
|
|
111
121
|
__decorate([
|
|
112
122
|
query('#control')
|
|
113
123
|
], SDSChip.prototype, "control", void 0);
|
|
114
124
|
SDSChip = __decorate([
|
|
115
|
-
|
|
125
|
+
guardedCustomElement('sds-chip')
|
|
116
126
|
], SDSChip);
|
|
117
127
|
export { SDSChip };
|
|
118
128
|
//# sourceMappingURL=sds-chip.js.map
|