@politiet/sheriff-web-components 1.0.0-rc.0 → 1.0.0-rc.10

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 (104) hide show
  1. package/dist/frameworks/preact.d.ts +26 -0
  2. package/dist/frameworks/preact.d.ts.map +1 -0
  3. package/dist/frameworks/react.d.ts +26 -0
  4. package/dist/frameworks/react.d.ts.map +1 -0
  5. package/dist/frameworks/solidjs.d.ts +26 -0
  6. package/dist/frameworks/solidjs.d.ts.map +1 -0
  7. package/dist/frameworks/svelte.d.ts +23 -0
  8. package/dist/frameworks/svelte.d.ts.map +1 -0
  9. package/dist/frameworks/vue.d.ts +24 -0
  10. package/dist/frameworks/vue.d.ts.map +1 -0
  11. package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts +1 -1
  12. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +1 -1
  13. package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -1
  14. package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +1 -1
  15. package/dist/react-wrappers/SDSRadioGroupWrapper.js +1 -1
  16. package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -1
  17. package/dist/sds-button/sds-button.d.ts +2 -7
  18. package/dist/sds-button/sds-button.d.ts.map +1 -1
  19. package/dist/sds-button/sds-button.js +2 -23
  20. package/dist/sds-button/sds-button.js.map +1 -1
  21. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  22. package/dist/sds-button/sds-button.styles.js +1 -0
  23. package/dist/sds-button/sds-button.styles.js.map +1 -1
  24. package/dist/sds-checkbox/sds-checkbox.d.ts +12 -9
  25. package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
  26. package/dist/sds-checkbox/sds-checkbox.js +54 -26
  27. package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
  28. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +4 -9
  29. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
  30. package/dist/sds-checkbox-group/sds-checkbox-group.js +9 -28
  31. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
  32. package/dist/sds-chip/sds-chip.d.ts +9 -7
  33. package/dist/sds-chip/sds-chip.d.ts.map +1 -1
  34. package/dist/sds-chip/sds-chip.js +24 -24
  35. package/dist/sds-chip/sds-chip.js.map +1 -1
  36. package/dist/sds-detail/sds-detail.d.ts +2 -7
  37. package/dist/sds-detail/sds-detail.d.ts.map +1 -1
  38. package/dist/sds-detail/sds-detail.js +0 -21
  39. package/dist/sds-detail/sds-detail.js.map +1 -1
  40. package/dist/sds-heading/sds-heading.d.ts +2 -7
  41. package/dist/sds-heading/sds-heading.d.ts.map +1 -1
  42. package/dist/sds-heading/sds-heading.js +0 -21
  43. package/dist/sds-heading/sds-heading.js.map +1 -1
  44. package/dist/sds-icon/sds-icon-loader.d.ts +8 -16
  45. package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
  46. package/dist/sds-icon/sds-icon-loader.js +40 -32
  47. package/dist/sds-icon/sds-icon-loader.js.map +1 -1
  48. package/dist/sds-icon/sds-icon-names.d.ts +2 -0
  49. package/dist/sds-icon/sds-icon-names.d.ts.map +1 -0
  50. package/dist/sds-icon/sds-icon-names.js +4250 -0
  51. package/dist/sds-icon/sds-icon-names.js.map +1 -0
  52. package/dist/sds-icon/sds-icon.d.ts +11 -22
  53. package/dist/sds-icon/sds-icon.d.ts.map +1 -1
  54. package/dist/sds-icon/sds-icon.js +32 -24
  55. package/dist/sds-icon/sds-icon.js.map +1 -1
  56. package/dist/sds-label/sds-label.d.ts +2 -7
  57. package/dist/sds-label/sds-label.d.ts.map +1 -1
  58. package/dist/sds-label/sds-label.js +0 -21
  59. package/dist/sds-label/sds-label.js.map +1 -1
  60. package/dist/sds-link/sds-link.d.ts +2 -7
  61. package/dist/sds-link/sds-link.d.ts.map +1 -1
  62. package/dist/sds-link/sds-link.js +0 -21
  63. package/dist/sds-link/sds-link.js.map +1 -1
  64. package/dist/sds-loader/sds-loader.d.ts +4 -10
  65. package/dist/sds-loader/sds-loader.d.ts.map +1 -1
  66. package/dist/sds-loader/sds-loader.js +0 -21
  67. package/dist/sds-loader/sds-loader.js.map +1 -1
  68. package/dist/sds-nav-card/sds-nav-card.d.ts +2 -7
  69. package/dist/sds-nav-card/sds-nav-card.d.ts.map +1 -1
  70. package/dist/sds-nav-card/sds-nav-card.js +0 -21
  71. package/dist/sds-nav-card/sds-nav-card.js.map +1 -1
  72. package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map +1 -1
  73. package/dist/sds-nav-card/sds-nav-card.styles.js +12 -19
  74. package/dist/sds-nav-card/sds-nav-card.styles.js.map +1 -1
  75. package/dist/sds-notification/sds-notification.d.ts +2 -7
  76. package/dist/sds-notification/sds-notification.d.ts.map +1 -1
  77. package/dist/sds-notification/sds-notification.js +0 -21
  78. package/dist/sds-notification/sds-notification.js.map +1 -1
  79. package/dist/sds-paragraph/sds-paragraph.d.ts +2 -7
  80. package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -1
  81. package/dist/sds-paragraph/sds-paragraph.js +0 -21
  82. package/dist/sds-paragraph/sds-paragraph.js.map +1 -1
  83. package/dist/sds-radio/sds-radio.d.ts +7 -11
  84. package/dist/sds-radio/sds-radio.d.ts.map +1 -1
  85. package/dist/sds-radio/sds-radio.js +41 -40
  86. package/dist/sds-radio/sds-radio.js.map +1 -1
  87. package/dist/sds-radio-group/sds-radio-group.d.ts +4 -9
  88. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  89. package/dist/sds-radio-group/sds-radio-group.js +7 -28
  90. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  91. package/dist/sds-switch/sds-switch.d.ts +3 -9
  92. package/dist/sds-switch/sds-switch.d.ts.map +1 -1
  93. package/dist/sds-switch/sds-switch.js +9 -35
  94. package/dist/sds-switch/sds-switch.js.map +1 -1
  95. package/dist/sds-text/sds-text.d.ts +2 -7
  96. package/dist/sds-text/sds-text.d.ts.map +1 -1
  97. package/dist/sds-text/sds-text.js +0 -21
  98. package/dist/sds-text/sds-text.js.map +1 -1
  99. package/dist/sds-textfield/sds-textfield.d.ts +35 -26
  100. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  101. package/dist/sds-textfield/sds-textfield.js +131 -103
  102. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  103. package/dist/sheriff-web-components.js +392 -237
  104. package/package.json +148 -130
@@ -0,0 +1,26 @@
1
+ import 'preact';
2
+ declare module 'preact' {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sds-button': any;
6
+ 'sds-checkbox': any;
7
+ 'sds-checkbox-group': any;
8
+ 'sds-chip': any;
9
+ 'sds-detail': any;
10
+ 'sds-heading': any;
11
+ 'sds-icon': any;
12
+ 'sds-label': any;
13
+ 'sds-link': any;
14
+ 'sds-loader': any;
15
+ 'sds-nav-card': any;
16
+ 'sds-notification': any;
17
+ 'sds-paragraph': any;
18
+ 'sds-radio': any;
19
+ 'sds-radio-group': any;
20
+ 'sds-switch': any;
21
+ 'sds-text': any;
22
+ 'sds-textfield': any;
23
+ }
24
+ }
25
+ }
26
+ //# sourceMappingURL=preact.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"preact.d.ts","sourceRoot":"","sources":["../../src/frameworks/preact.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,CAAC;AAEhB,OAAO,QAAQ,QAAQ,CAAC;IACvB,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,oBAAoB,EAAE,GAAG,CAAC;YAC1B,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,aAAa,EAAE,GAAG,CAAC;YACnB,UAAU,EAAE,GAAG,CAAC;YAChB,WAAW,EAAE,GAAG,CAAC;YACjB,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,kBAAkB,EAAE,GAAG,CAAC;YACxB,eAAe,EAAE,GAAG,CAAC;YACrB,WAAW,EAAE,GAAG,CAAC;YACjB,iBAAiB,EAAE,GAAG,CAAC;YACvB,YAAY,EAAE,GAAG,CAAC;YAClB,UAAU,EAAE,GAAG,CAAC;YAChB,eAAe,EAAE,GAAG,CAAC;SACrB;KACD;CACD"}
@@ -0,0 +1,26 @@
1
+ import 'react';
2
+ declare module 'react' {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sds-button': any;
6
+ 'sds-checkbox': any;
7
+ 'sds-checkbox-group': any;
8
+ 'sds-chip': any;
9
+ 'sds-detail': any;
10
+ 'sds-heading': any;
11
+ 'sds-icon': any;
12
+ 'sds-label': any;
13
+ 'sds-link': any;
14
+ 'sds-loader': any;
15
+ 'sds-nav-card': any;
16
+ 'sds-notification': any;
17
+ 'sds-paragraph': any;
18
+ 'sds-radio': any;
19
+ 'sds-radio-group': any;
20
+ 'sds-switch': any;
21
+ 'sds-text': any;
22
+ 'sds-textfield': any;
23
+ }
24
+ }
25
+ }
26
+ //# sourceMappingURL=react.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/frameworks/react.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,CAAC;AAEf,OAAO,QAAQ,OAAO,CAAC;IACtB,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,oBAAoB,EAAE,GAAG,CAAC;YAC1B,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,aAAa,EAAE,GAAG,CAAC;YACnB,UAAU,EAAE,GAAG,CAAC;YAChB,WAAW,EAAE,GAAG,CAAC;YACjB,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,kBAAkB,EAAE,GAAG,CAAC;YACxB,eAAe,EAAE,GAAG,CAAC;YACrB,WAAW,EAAE,GAAG,CAAC;YACjB,iBAAiB,EAAE,GAAG,CAAC;YACvB,YAAY,EAAE,GAAG,CAAC;YAClB,UAAU,EAAE,GAAG,CAAC;YAChB,eAAe,EAAE,GAAG,CAAC;SACrB;KACD;CACD"}
@@ -0,0 +1,26 @@
1
+ import 'solid-js';
2
+ declare module 'solid-js' {
3
+ namespace JSX {
4
+ interface IntrinsicElements {
5
+ 'sds-button': any;
6
+ 'sds-checkbox': any;
7
+ 'sds-checkbox-group': any;
8
+ 'sds-chip': any;
9
+ 'sds-detail': any;
10
+ 'sds-heading': any;
11
+ 'sds-icon': any;
12
+ 'sds-label': any;
13
+ 'sds-link': any;
14
+ 'sds-loader': any;
15
+ 'sds-nav-card': any;
16
+ 'sds-notification': any;
17
+ 'sds-paragraph': any;
18
+ 'sds-radio': any;
19
+ 'sds-radio-group': any;
20
+ 'sds-switch': any;
21
+ 'sds-text': any;
22
+ 'sds-textfield': any;
23
+ }
24
+ }
25
+ }
26
+ //# sourceMappingURL=solidjs.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"solidjs.d.ts","sourceRoot":"","sources":["../../src/frameworks/solidjs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAElB,OAAO,QAAQ,UAAU,CAAC;IACzB,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,oBAAoB,EAAE,GAAG,CAAC;YAC1B,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,aAAa,EAAE,GAAG,CAAC;YACnB,UAAU,EAAE,GAAG,CAAC;YAChB,WAAW,EAAE,GAAG,CAAC;YACjB,UAAU,EAAE,GAAG,CAAC;YAChB,YAAY,EAAE,GAAG,CAAC;YAClB,cAAc,EAAE,GAAG,CAAC;YACpB,kBAAkB,EAAE,GAAG,CAAC;YACxB,eAAe,EAAE,GAAG,CAAC;YACrB,WAAW,EAAE,GAAG,CAAC;YACjB,iBAAiB,EAAE,GAAG,CAAC;YACvB,YAAY,EAAE,GAAG,CAAC;YAClB,UAAU,EAAE,GAAG,CAAC;YAChB,eAAe,EAAE,GAAG,CAAC;SACrB;KACD;CACD"}
@@ -0,0 +1,23 @@
1
+ declare namespace svelte.JSX {
2
+ interface IntrinsicElements {
3
+ 'sds-button': any;
4
+ 'sds-checkbox': any;
5
+ 'sds-checkbox-group': any;
6
+ 'sds-chip': any;
7
+ 'sds-detail': any;
8
+ 'sds-heading': any;
9
+ 'sds-icon': any;
10
+ 'sds-label': any;
11
+ 'sds-link': any;
12
+ 'sds-loader': any;
13
+ 'sds-nav-card': any;
14
+ 'sds-notification': any;
15
+ 'sds-paragraph': any;
16
+ 'sds-radio': any;
17
+ 'sds-radio-group': any;
18
+ 'sds-switch': any;
19
+ 'sds-text': any;
20
+ 'sds-textfield': any;
21
+ }
22
+ }
23
+ //# sourceMappingURL=svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"svelte.d.ts","sourceRoot":"","sources":["../../src/frameworks/svelte.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,CAAC,GAAG,CAAC;IAC5B,UAAU,iBAAiB;QAC1B,YAAY,EAAE,GAAG,CAAC;QAClB,cAAc,EAAE,GAAG,CAAC;QACpB,oBAAoB,EAAE,GAAG,CAAC;QAC1B,UAAU,EAAE,GAAG,CAAC;QAChB,YAAY,EAAE,GAAG,CAAC;QAClB,aAAa,EAAE,GAAG,CAAC;QACnB,UAAU,EAAE,GAAG,CAAC;QAChB,WAAW,EAAE,GAAG,CAAC;QACjB,UAAU,EAAE,GAAG,CAAC;QAChB,YAAY,EAAE,GAAG,CAAC;QAClB,cAAc,EAAE,GAAG,CAAC;QACpB,kBAAkB,EAAE,GAAG,CAAC;QACxB,eAAe,EAAE,GAAG,CAAC;QACrB,WAAW,EAAE,GAAG,CAAC;QACjB,iBAAiB,EAAE,GAAG,CAAC;QACvB,YAAY,EAAE,GAAG,CAAC;QAClB,UAAU,EAAE,GAAG,CAAC;QAChB,eAAe,EAAE,GAAG,CAAC;KACrB;CACD"}
@@ -0,0 +1,24 @@
1
+ import type { DefineComponent } from 'vue';
2
+ declare module 'vue' {
3
+ interface GlobalComponents {
4
+ 'sds-button': DefineComponent<any>;
5
+ 'sds-checkbox': DefineComponent<any>;
6
+ 'sds-checkbox-group': DefineComponent<any>;
7
+ 'sds-chip': DefineComponent<any>;
8
+ 'sds-detail': DefineComponent<any>;
9
+ 'sds-heading': DefineComponent<any>;
10
+ 'sds-icon': DefineComponent<any>;
11
+ 'sds-label': DefineComponent<any>;
12
+ 'sds-link': DefineComponent<any>;
13
+ 'sds-loader': DefineComponent<any>;
14
+ 'sds-nav-card': DefineComponent<any>;
15
+ 'sds-notification': DefineComponent<any>;
16
+ 'sds-paragraph': DefineComponent<any>;
17
+ 'sds-radio': DefineComponent<any>;
18
+ 'sds-radio-group': DefineComponent<any>;
19
+ 'sds-switch': DefineComponent<any>;
20
+ 'sds-text': DefineComponent<any>;
21
+ 'sds-textfield': DefineComponent<any>;
22
+ }
23
+ }
24
+ //# sourceMappingURL=vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/frameworks/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,QAAQ,KAAK,CAAC;IACpB,UAAiB,gBAAgB;QAChC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,cAAc,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACrC,oBAAoB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAC3C,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACpC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,WAAW,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAClC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,cAAc,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACrC,kBAAkB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACzC,eAAe,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACtC,WAAW,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QAClC,iBAAiB,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACxC,YAAY,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACnC,UAAU,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;QACjC,eAAe,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;KACtC;CACD"}
@@ -1,5 +1,5 @@
1
1
  import { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';
2
2
  export declare const SDSCheckboxGroupWrapper: import("@lit/react").ReactWebComponent<SDSCheckboxGroup, {
3
- onChange: string;
3
+ onUpdate: string;
4
4
  }>;
5
5
  //# sourceMappingURL=SDSCheckboxGroupWrapper.d.ts.map
@@ -6,7 +6,7 @@ export const SDSCheckboxGroupWrapper = createComponent({
6
6
  elementClass: SDSCheckboxGroup,
7
7
  react: React,
8
8
  events: {
9
- onChange: 'change',
9
+ onUpdate: 'sds-update',
10
10
  },
11
11
  });
12
12
  //# sourceMappingURL=SDSCheckboxGroupWrapper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,QAAQ;KAClB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';\n\nexport const SDSCheckboxGroupWrapper = createComponent({\n\ttagName: 'sds-checkbox-group',\n\telementClass: SDSCheckboxGroup,\n\treact: React,\n\tevents: {\n\t\tonChange: 'change',\n\t},\n});\n"]}
1
+ {"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAY;KACtB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';\n\nexport const SDSCheckboxGroupWrapper = createComponent({\n\ttagName: 'sds-checkbox-group',\n\telementClass: SDSCheckboxGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update',\n\t},\n});\n"]}
@@ -1,5 +1,5 @@
1
1
  import { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';
2
2
  export declare const SDSRadioGroupWrapper: import("@lit/react").ReactWebComponent<SDSRadioGroup, {
3
- onChange: string;
3
+ onUpdate: string;
4
4
  }>;
5
5
  //# sourceMappingURL=SDSRadioGroupWrapper.d.ts.map
@@ -6,7 +6,7 @@ export const SDSRadioGroupWrapper = createComponent({
6
6
  elementClass: SDSRadioGroup,
7
7
  react: React,
8
8
  events: {
9
- onChange: 'change',
9
+ onUpdate: 'sds-update',
10
10
  },
11
11
  });
12
12
  //# sourceMappingURL=SDSRadioGroupWrapper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,QAAQ;KAClB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';\n\nexport const SDSRadioGroupWrapper = createComponent({\n\ttagName: 'sds-radio-group',\n\telementClass: SDSRadioGroup,\n\treact: React,\n\tevents: {\n\t\tonChange: 'change',\n\t},\n});\n"]}
1
+ {"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAEnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAY;KACtB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';\n\nexport const SDSRadioGroupWrapper = createComponent({\n\ttagName: 'sds-radio-group',\n\telementClass: SDSRadioGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update',\n\t},\n});\n"]}
@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
2
2
  type ButtonType = 'button' | 'submit' | 'reset';
3
3
  type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
4
4
  type ButtonSize = 'large' | 'medium' | 'small';
5
- interface SDSButtonProps {
5
+ export interface SDSButtonProps {
6
6
  type?: ButtonType;
7
7
  variant?: ButtonVariant;
8
8
  size?: ButtonSize;
@@ -30,17 +30,12 @@ export declare class SDSButton extends LitElement {
30
30
  focus(): void;
31
31
  blur(): void;
32
32
  click(): void;
33
- render(): import("lit").TemplateResult<1>;
33
+ render(): import("lit-html").TemplateResult<1>;
34
34
  }
35
35
  declare global {
36
36
  interface HTMLElementTagNameMap {
37
37
  'sds-button': SDSButton;
38
38
  }
39
- namespace JSX {
40
- interface IntrinsicElements {
41
- 'sds-button': SDSButtonProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
42
- }
43
- }
44
39
  }
45
40
  export {};
46
41
  //# sourceMappingURL=sds-button.d.ts.map
@@ -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;AAMvC,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,UAAU,cAAc;IACvB,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;IAEd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;IAGD,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,YAAY,EAAE,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SACvG;KACD;CACD"}
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;AAMvC,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"}
@@ -33,10 +33,10 @@ let SDSButton = class SDSButton extends LitElement {
33
33
  if (this.form) {
34
34
  const root = this.getRootNode();
35
35
  const formElement = root.querySelector(`form#${this.form}`);
36
- formElement?.submit();
36
+ formElement?.requestSubmit();
37
37
  }
38
38
  else if (this.internals.form) {
39
- this.internals.form.submit();
39
+ this.internals.form.requestSubmit();
40
40
  }
41
41
  }
42
42
  break;
@@ -137,25 +137,4 @@ SDSButton = __decorate([
137
137
  customElement('sds-button')
138
138
  ], SDSButton);
139
139
  export { SDSButton };
140
- /*
141
- // Angular
142
- declare module '@angular/core' {
143
- interface IntrinsicElements {
144
- 'sds-button': SDSButtonProps;
145
- }
146
- }
147
-
148
- // Vue
149
- declare module 'vue' {
150
- export interface GlobalComponents {
151
- 'sds-button': SDSButtonProps;
152
- }
153
- }
154
-
155
- // Svelte
156
- declare namespace svelteHTML {
157
- interface HTMLAttributes<T> {
158
- 'sds-button'?: SDSButtonProps;
159
- }
160
- } */
161
140
  //# sourceMappingURL=sds-button.js.map
@@ -1 +1 @@
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 { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\ninterface 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@customElement('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?.submit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.submit();\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\t// HTML\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n\n\t// React\n\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-button': SDSButtonProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n\t\t}\n\t}\n}\n\n/*\n// Angular\ndeclare module '@angular/core' {\n\tinterface IntrinsicElements {\n\t\t'sds-button': SDSButtonProps;\n\t}\n}\n\n// Vue\ndeclare module 'vue' {\n\texport interface GlobalComponents {\n\t\t'sds-button': SDSButtonProps;\n\t}\n}\n\n// Svelte\ndeclare namespace svelteHTML {\n\tinterface HTMLAttributes<T> {\n\t\t'sds-button'?: SDSButtonProps;\n\t}\n} */\n"]}
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 { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\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@customElement('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"]}
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgJlB,CAAC"}
1
+ {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiJlB,CAAC"}
@@ -12,6 +12,7 @@ export const styles = css `
12
12
  gap: var(--sds-spacing-3, 8px);
13
13
  justify-content: center;
14
14
  padding: var(--sds-spacing-3) var(--sds-spacing-4);
15
+ inline-size: 100%;
15
16
 
16
17
  background-color: var(--sds-color-semantic-surface-action-default);
17
18
  border: 2px solid var(--sds-color-semantic-border-action);
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\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\toutline: 0;\n\t\t}\n\n\t\t&: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-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\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&: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-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_color-semantic-surface-critical-hover: #b32a23;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\t\tinline-size: 100%;\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\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\toutline: 0;\n\t\t}\n\n\t\t&: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-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button:focus,\n\t:host(:focus) .give-focus {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\toutline-offset: 1px;\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--critical {\n\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\tcolor: var(--sds-color-semantic-text-on-critical);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-critical-xtreme);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-critical);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--_color-semantic-surface-critical-hover);\n\t\t\tborder: 2px solid var(--_color-semantic-surface-critical-hover);\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&: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-subtle);\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}
@@ -1,11 +1,12 @@
1
- import { LitElement } from 'lit';
2
- interface SDSCheckboxProps {
1
+ import { LitElement, PropertyValues } from 'lit';
2
+ export interface SDSCheckboxProps {
3
3
  name?: string;
4
4
  label?: string;
5
5
  value?: string;
6
6
  checked?: boolean;
7
7
  disabled?: boolean;
8
8
  error?: boolean;
9
+ required?: boolean;
9
10
  onChange?: (event: CustomEvent<{
10
11
  checked: boolean;
11
12
  value: string;
@@ -27,24 +28,26 @@ export declare class SDSCheckbox extends LitElement {
27
28
  checked: boolean;
28
29
  disabled: boolean;
29
30
  error: boolean;
31
+ required: boolean;
32
+ control: HTMLInputElement;
33
+ private _initialChecked;
30
34
  constructor();
35
+ connectedCallback(): void;
36
+ firstUpdated(_changedProperties: PropertyValues): void;
37
+ formResetCallback(): void;
38
+ private _validate;
31
39
  private readonly _handleChange;
32
40
  private readonly _handleFocus;
33
41
  private readonly _handleBlur;
34
42
  focus(): void;
35
43
  blur(): void;
36
44
  click(): void;
37
- render(): import("lit").TemplateResult<1>;
45
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
46
+ render(): import("lit-html").TemplateResult<1>;
38
47
  }
39
48
  declare global {
40
49
  interface HTMLElementTagNameMap {
41
50
  'sds-checkbox': SDSCheckbox;
42
51
  }
43
- namespace JSX {
44
- interface IntrinsicElements {
45
- 'sds-checkbox': SDSCheckboxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
46
- }
47
- }
48
52
  }
49
- export {};
50
53
  //# sourceMappingURL=sds-checkbox.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,UAAU,gBAAgB;IACzB,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,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;;IAS1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAS1B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA8Bf;AAED,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;IAGD,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,cAAc,EAAE,gBAAgB,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SAC3G;KACD;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;AAMhE,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;IASjB,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;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"}
@@ -5,7 +5,7 @@ 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 { customElement, property } from 'lit/decorators.js';
8
+ import { customElement, 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
11
  import { styles } from './sds-checkbox.styles';
@@ -15,14 +15,16 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
15
15
  this.checked = false;
16
16
  this.disabled = false;
17
17
  this.error = false;
18
- // Event handling
18
+ this.required = false;
19
+ this._initialChecked = false;
19
20
  this._handleChange = (event) => {
20
21
  event.stopImmediatePropagation();
21
22
  if (!this.disabled) {
22
23
  const elem = event.target;
23
24
  this.checked = elem.checked;
25
+ this.internals.setFormValue(elem.checked ? elem.value : '');
26
+ this._validate();
24
27
  this.dispatchEvent(new CustomEvent('change', {
25
- detail: { checked: this.checked, value: elem.value },
26
28
  bubbles: true,
27
29
  composed: true,
28
30
  }));
@@ -31,7 +33,6 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
31
33
  this._handleFocus = (event) => {
32
34
  event.stopImmediatePropagation();
33
35
  this.dispatchEvent(new CustomEvent('focus', {
34
- detail: { checked: this.checked },
35
36
  bubbles: true,
36
37
  composed: true,
37
38
  }));
@@ -39,7 +40,6 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
39
40
  this._handleBlur = (event) => {
40
41
  event.stopImmediatePropagation();
41
42
  this.dispatchEvent(new CustomEvent('blur', {
42
- detail: { checked: this.checked },
43
43
  bubbles: true,
44
44
  composed: true,
45
45
  }));
@@ -47,6 +47,38 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
47
47
  this.internals = this.attachInternals();
48
48
  this.attachShadow({ mode: 'open', delegatesFocus: true });
49
49
  }
50
+ connectedCallback() {
51
+ super.connectedCallback();
52
+ this._initialChecked = this.checked;
53
+ this.internals.role = 'checkbox';
54
+ if (this.checked) {
55
+ this.internals.setFormValue(this.value ? this.value : '');
56
+ }
57
+ }
58
+ firstUpdated(_changedProperties) {
59
+ super.firstUpdated(_changedProperties);
60
+ if (this.control) {
61
+ this.control.required = this.required;
62
+ }
63
+ this._validate();
64
+ }
65
+ formResetCallback() {
66
+ this.checked = this._initialChecked;
67
+ if (this.control) {
68
+ this.control.checked = this._initialChecked;
69
+ }
70
+ const resetValue = this.checked && this.value ? this.value : '';
71
+ this.internals.setFormValue(resetValue);
72
+ this._validate();
73
+ }
74
+ _validate() {
75
+ if (this.required && !this.checked) {
76
+ this.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);
77
+ }
78
+ else {
79
+ this.internals.setValidity({});
80
+ }
81
+ }
50
82
  focus() {
51
83
  if (!this.disabled)
52
84
  this.shadowRoot?.querySelector('input')?.focus();
@@ -59,6 +91,15 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
59
91
  if (!this.disabled)
60
92
  this.shadowRoot?.querySelector('input')?.click();
61
93
  }
94
+ updated(changedProperties) {
95
+ super.updated(changedProperties);
96
+ if (changedProperties.has('required') && this.control) {
97
+ this.control.required = this.required;
98
+ }
99
+ if (changedProperties.has('checked')) {
100
+ this._validate();
101
+ }
102
+ }
62
103
  render() {
63
104
  const checkboxClasses = {
64
105
  'sds-checkbox': true,
@@ -72,11 +113,13 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
72
113
  <div class="${classMap(checkboxClasses)}">
73
114
  <label class="sds-checkbox__label">
74
115
  <input
116
+ id="control"
75
117
  type="checkbox"
76
118
  name="${ifDefined(this.name)}"
77
119
  value="${ifDefined(this.value)}"
78
120
  ?checked="${this.checked}"
79
121
  ?disabled="${this.disabled}"
122
+ ?required="${this.required}"
80
123
  @change="${this._handleChange}"
81
124
  @focus="${this._handleFocus}"
82
125
  @blur="${this._handleBlur}"
@@ -109,29 +152,14 @@ __decorate([
109
152
  __decorate([
110
153
  property({ type: Boolean, reflect: true })
111
154
  ], SDSCheckbox.prototype, "error", void 0);
155
+ __decorate([
156
+ property({ type: Boolean, reflect: true })
157
+ ], SDSCheckbox.prototype, "required", void 0);
158
+ __decorate([
159
+ query('#control')
160
+ ], SDSCheckbox.prototype, "control", void 0);
112
161
  SDSCheckbox = __decorate([
113
162
  customElement('sds-checkbox')
114
163
  ], SDSCheckbox);
115
164
  export { SDSCheckbox };
116
- /*
117
- // Angular
118
- declare module '@angular/core' {
119
- interface IntrinsicElements {
120
- 'sds-checkbox': SDSCheckboxProps;
121
- }
122
- }
123
-
124
- // Vue
125
- declare module 'vue' {
126
- export interface GlobalComponents {
127
- 'sds-checkbox': SDSCheckboxProps;
128
- }
129
- }
130
-
131
- // Svelte
132
- declare namespace svelteHTML {
133
- interface HTMLAttributes<T> {
134
- 'sds-checkbox'?: SDSCheckboxProps;
135
- }
136
- } */
137
165
  //# 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, html, nothing } from 'lit';\nimport { customElement, property } 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\n// Props Interface\ninterface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: 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\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\t// Event handling\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.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { checked: this.checked, value: elem.value },\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\tdetail: { checked: this.checked },\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\tdetail: { checked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\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 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)}\">\n\t\t\t\t<label class=\"sds-checkbox__label\">\n\t\t\t\t\t<input\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@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\t// HTML\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n\n\t// React\n\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-checkbox': SDSCheckboxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;\n\t\t}\n\t}\n}\n\n/*\n// Angular\ndeclare module '@angular/core' {\n\tinterface IntrinsicElements {\n\t\t'sds-checkbox': SDSCheckboxProps;\n\t}\n}\n\n// Vue\ndeclare module 'vue' {\n\texport interface GlobalComponents {\n\t\t'sds-checkbox': SDSCheckboxProps;\n\t}\n}\n\n// Svelte\ndeclare namespace svelteHTML {\n\tinterface HTMLAttributes<T> {\n\t\t'sds-checkbox'?: SDSCheckboxProps;\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,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,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;QA2CxB,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,EAAE,CAAC,CAAC;gBAC5D,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;QAzED,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;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,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;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;IAsCQ,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;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;;;;;cAK5B,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;;AArJD,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,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuJvB","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 (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\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)}\">\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"]}