@politiet/sheriff-web-components 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/index.d.ts +18 -18
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +18 -18
  4. package/dist/index.js.map +1 -1
  5. package/dist/sds-button/sds-button.d.ts +17 -0
  6. package/dist/sds-button/sds-button.d.ts.map +1 -1
  7. package/dist/sds-button/sds-button.js +23 -3
  8. package/dist/sds-button/sds-button.js.map +1 -1
  9. package/dist/sds-checkbox/sds-checkbox.d.ts +24 -0
  10. package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
  11. package/dist/sds-checkbox/sds-checkbox.js +21 -0
  12. package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
  13. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +14 -0
  14. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
  15. package/dist/sds-checkbox-group/sds-checkbox-group.js +23 -2
  16. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
  17. package/dist/sds-chip/sds-chip.d.ts +18 -0
  18. package/dist/sds-chip/sds-chip.d.ts.map +1 -1
  19. package/dist/sds-chip/sds-chip.js +24 -2
  20. package/dist/sds-chip/sds-chip.js.map +1 -1
  21. package/dist/sds-detail/sds-detail.d.ts +8 -0
  22. package/dist/sds-detail/sds-detail.d.ts.map +1 -1
  23. package/dist/sds-detail/sds-detail.js +21 -0
  24. package/dist/sds-detail/sds-detail.js.map +1 -1
  25. package/dist/sds-heading/sds-heading.d.ts +9 -0
  26. package/dist/sds-heading/sds-heading.d.ts.map +1 -1
  27. package/dist/sds-heading/sds-heading.js +21 -0
  28. package/dist/sds-heading/sds-heading.js.map +1 -1
  29. package/dist/sds-icon/sds-icon.d.ts +11 -0
  30. package/dist/sds-icon/sds-icon.d.ts.map +1 -1
  31. package/dist/sds-icon/sds-icon.js +21 -0
  32. package/dist/sds-icon/sds-icon.js.map +1 -1
  33. package/dist/sds-label/sds-label.d.ts +9 -0
  34. package/dist/sds-label/sds-label.d.ts.map +1 -1
  35. package/dist/sds-label/sds-label.js +22 -3
  36. package/dist/sds-label/sds-label.js.map +1 -1
  37. package/dist/sds-link/sds-link.d.ts +10 -0
  38. package/dist/sds-link/sds-link.d.ts.map +1 -1
  39. package/dist/sds-link/sds-link.js +21 -0
  40. package/dist/sds-link/sds-link.js.map +1 -1
  41. package/dist/sds-loader/sds-loader.d.ts +9 -0
  42. package/dist/sds-loader/sds-loader.d.ts.map +1 -1
  43. package/dist/sds-loader/sds-loader.js +22 -1
  44. package/dist/sds-loader/sds-loader.js.map +1 -1
  45. package/dist/sds-nav-card/sds-nav-card.d.ts +16 -11
  46. package/dist/sds-nav-card/sds-nav-card.d.ts.map +1 -1
  47. package/dist/sds-nav-card/sds-nav-card.js +21 -11
  48. package/dist/sds-nav-card/sds-nav-card.js.map +1 -1
  49. package/dist/sds-notification/sds-notification.d.ts +10 -0
  50. package/dist/sds-notification/sds-notification.d.ts.map +1 -1
  51. package/dist/sds-notification/sds-notification.js +21 -0
  52. package/dist/sds-notification/sds-notification.js.map +1 -1
  53. package/dist/sds-paragraph/sds-paragraph.d.ts +8 -0
  54. package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -1
  55. package/dist/sds-paragraph/sds-paragraph.js +21 -0
  56. package/dist/sds-paragraph/sds-paragraph.js.map +1 -1
  57. package/dist/sds-radio/sds-radio.d.ts +25 -6
  58. package/dist/sds-radio/sds-radio.d.ts.map +1 -1
  59. package/dist/sds-radio/sds-radio.js +23 -9
  60. package/dist/sds-radio/sds-radio.js.map +1 -1
  61. package/dist/sds-radio-group/sds-radio-group.d.ts +14 -0
  62. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  63. package/dist/sds-radio-group/sds-radio-group.js +23 -6
  64. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  65. package/dist/sds-switch/sds-switch.d.ts +3 -30
  66. package/dist/sds-switch/sds-switch.d.ts.map +1 -1
  67. package/dist/sds-switch/sds-switch.js +24 -54
  68. package/dist/sds-switch/sds-switch.js.map +1 -1
  69. package/dist/sds-text/sds-text.d.ts +8 -0
  70. package/dist/sds-text/sds-text.d.ts.map +1 -1
  71. package/dist/sds-text/sds-text.js +21 -0
  72. package/dist/sds-text/sds-text.js.map +1 -1
  73. package/dist/sds-textfield/sds-textfield.d.ts +35 -3
  74. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  75. package/dist/sds-textfield/sds-textfield.js +21 -0
  76. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  77. package/package.json +91 -1
package/dist/index.d.ts CHANGED
@@ -1,19 +1,19 @@
1
- export * from './sds-button/sds-button';
2
- export * from './sds-checkbox/sds-checkbox';
3
- export * from './sds-checkbox-group/sds-checkbox-group';
4
- export * from './sds-chip/sds-chip';
5
- export * from './sds-detail/sds-detail';
6
- export * from './sds-heading/sds-heading';
7
- export * from './sds-icon/sds-icon';
8
- export * from './sds-label/sds-label';
9
- export * from './sds-link/sds-link';
10
- export * from './sds-loader/sds-loader';
11
- export * from './sds-nav-card/sds-nav-card';
12
- export * from './sds-notification/sds-notification';
13
- export * from './sds-paragraph/sds-paragraph';
14
- export * from './sds-radio/sds-radio';
15
- export * from './sds-radio-group/sds-radio-group';
16
- export * from './sds-switch/sds-switch';
17
- export * from './sds-text/sds-text';
18
- export * from './sds-textfield/sds-textfield';
1
+ export { SDSButton } from './sds-button/sds-button';
2
+ export { SDSCheckbox } from './sds-checkbox/sds-checkbox';
3
+ export { SDSCheckboxGroup } from './sds-checkbox-group/sds-checkbox-group';
4
+ export { SDSChip } from './sds-chip/sds-chip';
5
+ export { SDSDetail } from './sds-detail/sds-detail';
6
+ export { SDSHeading } from './sds-heading/sds-heading';
7
+ export { SDSIcon } from './sds-icon/sds-icon';
8
+ export { SDSLabel } from './sds-label/sds-label';
9
+ export { SDSLink } from './sds-link/sds-link';
10
+ export { SDSLoader } from './sds-loader/sds-loader';
11
+ export { SDSNavCard } from './sds-nav-card/sds-nav-card';
12
+ export { SDSNotification } from './sds-notification/sds-notification';
13
+ export { SDSParagraph } from './sds-paragraph/sds-paragraph';
14
+ export { SDSRadio } from './sds-radio/sds-radio';
15
+ export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
16
+ export { SDSSwitch } from './sds-switch/sds-switch';
17
+ export { SDSText } from './sds-text/sds-text';
18
+ export { SDSTextField } from './sds-textfield/sds-textfield';
19
19
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yCAAyC,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC"}
package/dist/index.js CHANGED
@@ -1,19 +1,19 @@
1
- export * from './sds-button/sds-button';
2
- export * from './sds-checkbox/sds-checkbox';
3
- export * from './sds-checkbox-group/sds-checkbox-group';
4
- export * from './sds-chip/sds-chip';
5
- export * from './sds-detail/sds-detail';
6
- export * from './sds-heading/sds-heading';
7
- export * from './sds-icon/sds-icon';
8
- export * from './sds-label/sds-label';
9
- export * from './sds-link/sds-link';
10
- export * from './sds-loader/sds-loader';
11
- export * from './sds-nav-card/sds-nav-card';
12
- export * from './sds-notification/sds-notification';
13
- export * from './sds-paragraph/sds-paragraph';
14
- export * from './sds-radio/sds-radio';
15
- export * from './sds-radio-group/sds-radio-group';
16
- export * from './sds-switch/sds-switch';
17
- export * from './sds-text/sds-text';
18
- export * from './sds-textfield/sds-textfield';
1
+ export { SDSButton } from './sds-button/sds-button';
2
+ export { SDSCheckbox } from './sds-checkbox/sds-checkbox';
3
+ export { SDSCheckboxGroup } from './sds-checkbox-group/sds-checkbox-group';
4
+ export { SDSChip } from './sds-chip/sds-chip';
5
+ export { SDSDetail } from './sds-detail/sds-detail';
6
+ export { SDSHeading } from './sds-heading/sds-heading';
7
+ export { SDSIcon } from './sds-icon/sds-icon';
8
+ export { SDSLabel } from './sds-label/sds-label';
9
+ export { SDSLink } from './sds-link/sds-link';
10
+ export { SDSLoader } from './sds-loader/sds-loader';
11
+ export { SDSNavCard } from './sds-nav-card/sds-nav-card';
12
+ export { SDSNotification } from './sds-notification/sds-notification';
13
+ export { SDSParagraph } from './sds-paragraph/sds-paragraph';
14
+ export { SDSRadio } from './sds-radio/sds-radio';
15
+ export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
16
+ export { SDSSwitch } from './sds-switch/sds-switch';
17
+ export { SDSText } from './sds-text/sds-text';
18
+ export { SDSTextField } from './sds-textfield/sds-textfield';
19
19
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yCAAyC,CAAC;AACxD,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './sds-button/sds-button';\nexport * from './sds-checkbox/sds-checkbox';\nexport * from './sds-checkbox-group/sds-checkbox-group';\nexport * from './sds-chip/sds-chip';\nexport * from './sds-detail/sds-detail';\nexport * from './sds-heading/sds-heading';\nexport * from './sds-icon/sds-icon';\nexport * from './sds-label/sds-label';\nexport * from './sds-link/sds-link';\nexport * from './sds-loader/sds-loader';\nexport * from './sds-nav-card/sds-nav-card';\nexport * from './sds-notification/sds-notification';\nexport * from './sds-paragraph/sds-paragraph';\nexport * from './sds-radio/sds-radio';\nexport * from './sds-radio-group/sds-radio-group';\nexport * from './sds-switch/sds-switch';\nexport * from './sds-text/sds-text';\nexport * from './sds-textfield/sds-textfield';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC","sourcesContent":["export { SDSButton } from './sds-button/sds-button';\nexport { SDSCheckbox } from './sds-checkbox/sds-checkbox';\nexport { SDSCheckboxGroup } from './sds-checkbox-group/sds-checkbox-group';\nexport { SDSChip } from './sds-chip/sds-chip';\nexport { SDSDetail } from './sds-detail/sds-detail';\nexport { SDSHeading } from './sds-heading/sds-heading';\nexport { SDSIcon } from './sds-icon/sds-icon';\nexport { SDSLabel } from './sds-label/sds-label';\nexport { SDSLink } from './sds-link/sds-link';\nexport { SDSLoader } from './sds-loader/sds-loader';\nexport { SDSNavCard } from './sds-nav-card/sds-nav-card';\nexport { SDSNotification } from './sds-notification/sds-notification';\nexport { SDSParagraph } from './sds-paragraph/sds-paragraph';\nexport { SDSRadio } from './sds-radio/sds-radio';\nexport { SDSRadioGroup } from './sds-radio-group/sds-radio-group';\nexport { SDSSwitch } from './sds-switch/sds-switch';\nexport { SDSText } from './sds-text/sds-text';\nexport { SDSTextField } from './sds-textfield/sds-textfield';\n"]}
@@ -2,6 +2,18 @@ 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 {
6
+ type?: ButtonType;
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ disabled?: boolean;
10
+ name?: string;
11
+ value?: string;
12
+ form?: string;
13
+ onClick?: (event: CustomEvent) => void;
14
+ onSubmit?: (event: CustomEvent) => void;
15
+ onReset?: (event: CustomEvent) => void;
16
+ }
5
17
  export declare class SDSButton extends LitElement {
6
18
  static styles: import("lit").CSSResult[];
7
19
  static formAssociated: boolean;
@@ -24,6 +36,11 @@ declare global {
24
36
  interface HTMLElementTagNameMap {
25
37
  'sds-button': SDSButton;
26
38
  }
39
+ namespace JSX {
40
+ interface IntrinsicElements {
41
+ 'sds-button': SDSButtonProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
42
+ }
43
+ }
27
44
  }
28
45
  export {};
29
46
  //# 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,qBACa,SAAU,SAAQ,UAAU;IAExC,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"}
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"}
@@ -73,11 +73,11 @@ let SDSButton = class SDSButton extends LitElement {
73
73
  }
74
74
  focus() {
75
75
  if (!this.disabled)
76
- this.shadowRoot?.querySelector('button')?.click();
76
+ this.shadowRoot?.querySelector('button')?.focus();
77
77
  }
78
78
  blur() {
79
79
  if (!this.disabled)
80
- this.shadowRoot?.querySelector('button')?.click();
80
+ this.shadowRoot?.querySelector('button')?.blur();
81
81
  }
82
82
  click() {
83
83
  if (!this.disabled)
@@ -110,7 +110,6 @@ let SDSButton = class SDSButton extends LitElement {
110
110
  `;
111
111
  }
112
112
  };
113
- // Styling
114
113
  SDSButton.styles = [styles];
115
114
  SDSButton.formAssociated = true;
116
115
  __decorate([
@@ -138,4 +137,25 @@ SDSButton = __decorate([
138
137
  customElement('sds-button')
139
138
  ], SDSButton);
140
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
+ } */
141
161
  //# 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\n@customElement('sds-button')\nexport class SDSButton extends LitElement {\n\t// Styling\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')?.click();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\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
+ {"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,4 +1,22 @@
1
1
  import { LitElement } from 'lit';
2
+ interface SDSCheckboxProps {
3
+ name?: string;
4
+ label?: string;
5
+ value?: string;
6
+ checked?: boolean;
7
+ disabled?: boolean;
8
+ error?: boolean;
9
+ onChange?: (event: CustomEvent<{
10
+ checked: boolean;
11
+ value: string;
12
+ }>) => void;
13
+ onFocus?: (event: CustomEvent<{
14
+ checked: boolean;
15
+ }>) => void;
16
+ onBlur?: (event: CustomEvent<{
17
+ checked: boolean;
18
+ }>) => void;
19
+ }
2
20
  export declare class SDSCheckbox extends LitElement {
3
21
  static styles: import("lit").CSSResult[];
4
22
  static formAssociated: boolean;
@@ -22,5 +40,11 @@ declare global {
22
40
  interface HTMLElementTagNameMap {
23
41
  'sds-checkbox': SDSCheckbox;
24
42
  }
43
+ namespace JSX {
44
+ interface IntrinsicElements {
45
+ 'sds-checkbox': SDSCheckboxProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
46
+ }
47
+ }
25
48
  }
49
+ export {};
26
50
  //# 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;AAMhD,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAI5C,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,KAAK,UAAS;;IASd,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;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
1
+ {"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,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"}
@@ -113,4 +113,25 @@ SDSCheckbox = __decorate([
113
113
  customElement('sds-checkbox')
114
114
  ], SDSCheckbox);
115
115
  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
+ } */
116
137
  //# 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@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 })\n\tname?: string;\n\n\t@property({ type: String, reflect: true })\n\tlabel?: string;\n\n\t@property({ type: String })\n\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\tchecked = false;\n\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Boolean, reflect: true })\n\terror = 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\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, 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,6 +1,14 @@
1
1
  import { LitElement } from 'lit';
2
2
  import '../sds-checkbox/sds-checkbox';
3
3
  import '../sds-icon/sds-icon';
4
+ interface SDSCheckboxGroupProps {
5
+ legend?: string;
6
+ 'help-text'?: string;
7
+ 'error-message'?: string;
8
+ onChange?: (event: CustomEvent<{
9
+ selectedValues: string[];
10
+ }>) => void;
11
+ }
4
12
  export declare class SDSCheckboxGroup extends LitElement {
5
13
  static styles: import("lit").CSSResult[];
6
14
  legend?: string;
@@ -14,5 +22,11 @@ declare global {
14
22
  interface HTMLElementTagNameMap {
15
23
  'sds-checkbox-group': SDSCheckboxGroup;
16
24
  }
25
+ namespace JSX {
26
+ interface IntrinsicElements {
27
+ 'sds-checkbox-group': SDSCheckboxGroupProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
28
+ }
29
+ }
17
30
  }
31
+ export {};
18
32
  //# sourceMappingURL=sds-checkbox-group.d.ts.map
@@ -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;AAKhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAE9B,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAIlC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,cAAc,CAAgB;IAEtC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAgBpC;IAEO,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
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;AAKhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAG9B,UAAU,qBAAqB;IAC9B,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,cAAc,CAAgB;IAEtC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAgBpC;IAEO,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;IAGD,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,oBAAoB,EAAE,qBAAqB,GAC1C,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SACzE;KACD;CACD"}
@@ -46,8 +46,8 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
46
46
  name="warning-material-filled"
47
47
  size="m"
48
48
  color="var(--sds-color-semantic-icon-critical)"
49
- ></sds-icon
50
- >${this.errorMessage}
49
+ ></sds-icon>
50
+ ${this.errorMessage}
51
51
  </p>`
52
52
  : nothing}
53
53
  </fieldset>
@@ -72,4 +72,25 @@ SDSCheckboxGroup = __decorate([
72
72
  customElement('sds-checkbox-group')
73
73
  ], SDSCheckboxGroup);
74
74
  export { SDSCheckboxGroup };
75
+ /*
76
+ // Angular
77
+ declare module '@angular/core' {
78
+ interface IntrinsicElements {
79
+ 'sds-checkbox-group': SDSCheckboxGroupProps;
80
+ }
81
+ }
82
+
83
+ // Vue
84
+ declare module 'vue' {
85
+ export interface GlobalComponents {
86
+ 'sds-checkbox-group': SDSCheckboxGroupProps;
87
+ }
88
+ }
89
+
90
+ // Svelte
91
+ declare namespace svelteHTML {
92
+ interface HTMLAttributes<T> {
93
+ 'sds-checkbox-group'?: SDSCheckboxGroupProps;
94
+ }
95
+ } */
75
96
  //# 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,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAGvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAeE,mBAAc,GAAa,EAAE,CAAC;QAErB,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,cAAc,GAAG,SAAS;gBAC9B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;gBACjC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAElD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACzB,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA4BH,CAAC;IA1BS,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;;;;;;UAMD,IAAI,CAAC,YAAY;WAChB;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AA3DD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC1B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChD;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAChD;AAGd;IADP,KAAK,EAAE;wDAC8B;AAf1B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6D5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n@customElement('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 })\n\tlegend?: string;\n\n\t@property({ type: String, attribute: 'help-text', reflect: true })\n\thelpText?: string;\n\n\t@property({ type: String, attribute: 'error-message', reflect: true })\n\terrorMessage?: 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('change', {\n\t\t\t\tdetail: { selectedValues: this.selectedValues },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\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"]}
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,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,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,mBAAc,GAAa,EAAE,CAAC;QAErB,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,cAAc,GAAG,SAAS;gBAC9B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;gBACjC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAElD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACzB,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA4BH,CAAC;IA1BS,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;;AAtDD,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;wDAC8B;AAV1B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAwD5B;;AAiBD;;;;;;;;;;;;;;;;;;;;IAoBI","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n// Props Interface\ninterface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@customElement('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('change', {\n\t\t\t\tdetail: { selectedValues: this.selectedValues },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\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\t// HTML\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n\n\t// React\n\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-checkbox-group': SDSCheckboxGroupProps &\n\t\t\t\tReact.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-group': SDSCheckboxGroupProps;\n\t}\n}\n\n// Vue\ndeclare module 'vue' {\n\texport interface GlobalComponents {\n\t\t'sds-checkbox-group': SDSCheckboxGroupProps;\n\t}\n}\n\n// Svelte\ndeclare namespace svelteHTML {\n\tinterface HTMLAttributes<T> {\n\t\t'sds-checkbox-group'?: SDSCheckboxGroupProps;\n\t}\n} */\n"]}
@@ -2,6 +2,19 @@ import { LitElement } from 'lit';
2
2
  import '../sds-icon/sds-icon';
3
3
  type ChipVariant = 'selectable' | 'removable';
4
4
  type ChipSize = 'large' | 'small';
5
+ interface SDSChipProps {
6
+ variant?: ChipVariant;
7
+ size?: ChipSize;
8
+ checked?: boolean;
9
+ name?: string;
10
+ value?: string;
11
+ disabled?: boolean;
12
+ onChange?: (event: CustomEvent<{
13
+ value: string | undefined;
14
+ isChecked: boolean;
15
+ }>) => void;
16
+ onSdsRemove?: (event: CustomEvent) => void;
17
+ }
5
18
  export declare class SDSChip extends LitElement {
6
19
  static styles: import("lit").CSSResult[];
7
20
  variant: ChipVariant;
@@ -21,6 +34,11 @@ declare global {
21
34
  interface HTMLElementTagNameMap {
22
35
  'sds-chip': SDSChip;
23
36
  }
37
+ namespace JSX {
38
+ interface IntrinsicElements {
39
+ 'sds-chip': SDSChipProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
40
+ }
41
+ }
24
42
  }
25
43
  export {};
26
44
  //# sourceMappingURL=sds-chip.d.ts.map
@@ -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;AAMvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,OAAO,EAAE,WAAW,CAAgB;IAGpC,IAAI,EAAE,QAAQ,CAAW;IAGzB,OAAO,UAAS;IAGhB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,QAAQ,UAAS;IAER,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IAwBf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAYtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
1
+ {"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,UAAU,YAAY;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGS,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;IAEpD,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IAyBf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAYtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IAEd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;IAGD,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,UAAU,EAAE,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;SACnG;KACD;CACD"}
@@ -14,7 +14,7 @@ let SDSChip = class SDSChip extends LitElement {
14
14
  constructor() {
15
15
  super(...arguments);
16
16
  // Reactive Props
17
- this.variant = 'selectable'; // Selectable is a radio input, removable is a button
17
+ this.variant = 'selectable';
18
18
  this.size = 'large';
19
19
  this.checked = false;
20
20
  this.disabled = false;
@@ -52,11 +52,12 @@ let SDSChip = class SDSChip extends LitElement {
52
52
  'sds-chip': true,
53
53
  'sds-chip--small': this.size === 'small',
54
54
  };
55
- if (this.variant === 'removable')
55
+ if (this.variant === 'removable') {
56
56
  return html `<button class="${classMap(chipClasses)}" @click=${this._remove}>
57
57
  <slot></slot>
58
58
  <sds-icon name="close-material-outlined" size="s"></sds-icon>
59
59
  </button>`;
60
+ }
60
61
  return html `<label class="${classMap(chipClasses)}" @click="${this._toggle}">
61
62
  <input
62
63
  type="checkbox"
@@ -93,4 +94,25 @@ SDSChip = __decorate([
93
94
  customElement('sds-chip')
94
95
  ], SDSChip);
95
96
  export { SDSChip };
97
+ /*
98
+ // Angular
99
+ declare module '@angular/core' {
100
+ interface IntrinsicElements {
101
+ 'sds-chip': SDSChipProps;
102
+ }
103
+ }
104
+
105
+ // Vue
106
+ declare module 'vue' {
107
+ export interface GlobalComponents {
108
+ 'sds-chip': SDSChipProps;
109
+ }
110
+ }
111
+
112
+ // Svelte
113
+ declare namespace svelteHTML {
114
+ interface HTMLAttributes<T> {
115
+ 'sds-chip'?: SDSChipProps;
116
+ }
117
+ } */
96
118
  //# sourceMappingURL=sds-chip.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { 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-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'small';\n\n@customElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true })\n\tvariant: ChipVariant = 'selectable'; // Selectable is a radio input, removable is a button\n\n\t@property({ type: String, reflect: true })\n\tsize: ChipSize = 'large';\n\n\t@property({ type: Boolean, reflect: true })\n\tchecked = false;\n\n\t@property({ type: String, reflect: true })\n\tname?: string;\n\n\t@property({ type: String })\n\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable')\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.checked = !this.checked;\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.value, isChecked: 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 _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { 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-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'small';\n\ninterface SDSChipProps {\n\tvariant?: ChipVariant;\n\tsize?: ChipSize;\n\tchecked?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tdisabled?: boolean;\n\tonChange?: (event: CustomEvent<{ value: string | undefined; isChecked: boolean }>) => void;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@customElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: ChipVariant = 'selectable';\n\t@property({ type: String, reflect: true }) size: ChipSize = 'large';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable') {\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\t\t}\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.checked = !this.checked;\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.value, isChecked: 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 _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\t// HTML\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n\n\t// React\n\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-chip': SDSChipProps & 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-chip': SDSChipProps;\n\t}\n}\n\n// Vue\ndeclare module 'vue' {\n\texport interface GlobalComponents {\n\t\t'sds-chip': SDSChipProps;\n\t}\n}\n\n// Svelte\ndeclare namespace svelteHTML {\n\tinterface HTMLAttributes<T> {\n\t\t'sds-chip'?: SDSChipProps;\n\t}\n} */\n"]}
@@ -1,5 +1,8 @@
1
1
  import { LitElement } from 'lit';
2
2
  type Variation = 'text' | 'label';
3
+ interface SDSDetailProps {
4
+ variation?: Variation;
5
+ }
3
6
  export declare class SDSDetail extends LitElement {
4
7
  static styles: import("lit").CSSResult[];
5
8
  variation: Variation;
@@ -9,6 +12,11 @@ declare global {
9
12
  interface HTMLElementTagNameMap {
10
13
  'sds-detail': SDSDetail;
11
14
  }
15
+ namespace JSX {
16
+ interface IntrinsicElements {
17
+ 'sds-detail': SDSDetailProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
18
+ }
19
+ }
12
20
  }
13
21
  export {};
14
22
  //# sourceMappingURL=sds-detail.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"sds-detail.d.ts","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAElC,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,SAAS,EAAE,SAAS,CAAU;IAErB,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
1
+ {"version":3,"file":"sds-detail.d.ts","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAElC,UAAU,cAAc;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAGN,SAAS,EAAE,SAAS,CAAU;IAEjD,MAAM;CAWf;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"}
@@ -33,4 +33,25 @@ SDSDetail = __decorate([
33
33
  customElement('sds-detail')
34
34
  ], SDSDetail);
35
35
  export { SDSDetail };
36
+ /*
37
+ // Angular
38
+ declare module '@angular/core' {
39
+ interface IntrinsicElements {
40
+ 'sds-detail': SDSDetailProps;
41
+ }
42
+ }
43
+
44
+ // Vue
45
+ declare module 'vue' {
46
+ export interface GlobalComponents {
47
+ 'sds-detail': SDSDetailProps;
48
+ }
49
+ }
50
+
51
+ // Svelte
52
+ declare namespace svelteHTML {
53
+ interface HTMLAttributes<T> {
54
+ 'sds-detail'?: SDSDetailProps;
55
+ }
56
+ } */
36
57
  //# sourceMappingURL=sds-detail.js.map