@politiet/sheriff-web-components 1.1.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +1 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/sds-button/sds-button.d.ts +5 -0
  6. package/dist/sds-button/sds-button.d.ts.map +1 -1
  7. package/dist/sds-button/sds-button.js +19 -0
  8. package/dist/sds-button/sds-button.js.map +1 -1
  9. package/dist/sds-button/sds-button.spec.js +36 -0
  10. package/dist/sds-button/sds-button.spec.js.map +1 -1
  11. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  12. package/dist/sds-button/sds-button.styles.js +11 -7
  13. package/dist/sds-button/sds-button.styles.js.map +1 -1
  14. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
  15. package/dist/sds-checkbox-group/sds-checkbox-group.js +3 -13
  16. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
  17. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  18. package/dist/sds-radio-group/sds-radio-group.js +3 -13
  19. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  20. package/dist/sds-textarea/sds-textarea.d.ts +77 -0
  21. package/dist/sds-textarea/sds-textarea.d.ts.map +1 -0
  22. package/dist/sds-textarea/sds-textarea.js +240 -0
  23. package/dist/sds-textarea/sds-textarea.js.map +1 -0
  24. package/dist/sds-textarea/sds-textarea.spec.d.ts +2 -0
  25. package/dist/sds-textarea/sds-textarea.spec.d.ts.map +1 -0
  26. package/dist/sds-textarea/sds-textarea.spec.js +171 -0
  27. package/dist/sds-textarea/sds-textarea.spec.js.map +1 -0
  28. package/dist/sds-textarea/sds-textarea.styles.d.ts +2 -0
  29. package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -0
  30. package/dist/sds-textarea/sds-textarea.styles.js +118 -0
  31. package/dist/sds-textarea/sds-textarea.styles.js.map +1 -0
  32. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  33. package/dist/sds-textfield/sds-textfield.js +2 -12
  34. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  35. package/dist/sheriff-web-components.js +589 -241
  36. package/dist/utils/renderErrorMessage.d.ts +3 -0
  37. package/dist/utils/renderErrorMessage.d.ts.map +1 -0
  38. package/dist/utils/renderErrorMessage.js +9 -0
  39. package/dist/utils/renderErrorMessage.js.map +1 -0
  40. package/dist/utils/types.d.ts +2 -0
  41. package/dist/utils/types.d.ts.map +1 -0
  42. package/dist/utils/types.js +2 -0
  43. package/dist/utils/types.js.map +1 -0
  44. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -15,5 +15,6 @@ export { SDSRadio } from './sds-radio/sds-radio';
15
15
  export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
16
16
  export { SDSSwitch } from './sds-switch/sds-switch';
17
17
  export { SDSText } from './sds-text/sds-text';
18
+ export { SDSTextArea } from './sds-textarea/sds-textarea';
18
19
  export { SDSTextField } from './sds-textfield/sds-textfield';
19
20
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
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"}
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,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC"}
package/dist/index.js CHANGED
@@ -15,5 +15,6 @@ export { SDSRadio } from './sds-radio/sds-radio';
15
15
  export { SDSRadioGroup } from './sds-radio-group/sds-radio-group';
16
16
  export { SDSSwitch } from './sds-switch/sds-switch';
17
17
  export { SDSText } from './sds-text/sds-text';
18
+ export { SDSTextArea } from './sds-textarea/sds-textarea';
18
19
  export { SDSTextField } from './sds-textfield/sds-textfield';
19
20
  //# 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,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"]}
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,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,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 { SDSTextArea } from './sds-textarea/sds-textarea';\nexport { SDSTextField } from './sds-textfield/sds-textfield';\n"]}
@@ -2,6 +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
+ type TargetTypes = '_self' | '_blank' | '_parent' | '_top';
5
6
  export interface SDSButtonProps {
6
7
  type?: ButtonType;
7
8
  variant?: ButtonVariant;
@@ -10,6 +11,8 @@ export interface SDSButtonProps {
10
11
  name?: string;
11
12
  value?: string;
12
13
  form?: string;
14
+ href?: string;
15
+ target?: TargetTypes;
13
16
  onClick?: (event: CustomEvent) => void;
14
17
  onSubmit?: (event: CustomEvent) => void;
15
18
  onReset?: (event: CustomEvent) => void;
@@ -25,6 +28,8 @@ export declare class SDSButton extends LitElement {
25
28
  name?: string;
26
29
  value: string;
27
30
  form?: string;
31
+ href?: string;
32
+ target?: TargetTypes;
28
33
  constructor();
29
34
  private readonly _handleClick;
30
35
  focus(): void;
@@ -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;AAOvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAG5C,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAEiB,QAAQ,EAAE,OAAO,CAAS;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;;IAQzD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
1
+ {"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/C,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,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;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;;IAQhE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAyCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
@@ -92,7 +92,20 @@ let SDSButton = class SDSButton extends LitElement {
92
92
  'sds-button--critical': this.variant === 'critical',
93
93
  'sds-button--medium': this.size === 'medium',
94
94
  'sds-button--small': this.size === 'small',
95
+ 'sds-button--as-link': !!this.href,
95
96
  };
97
+ if (this.href) {
98
+ return html ` <a
99
+ id="link"
100
+ class="${classMap(buttonClasses)}"
101
+ href="${this.href}"
102
+ target="${ifDefined(this.target)}"
103
+ >
104
+ <slot name="before"></slot>
105
+ <slot></slot>
106
+ <slot name="after"></slot>
107
+ </a>`;
108
+ }
96
109
  return html `
97
110
  <button
98
111
  id="control"
@@ -134,6 +147,12 @@ __decorate([
134
147
  __decorate([
135
148
  property({ type: String, reflect: true })
136
149
  ], SDSButton.prototype, "form", void 0);
150
+ __decorate([
151
+ property({ type: String, reflect: true })
152
+ ], SDSButton.prototype, "href", void 0);
153
+ __decorate([
154
+ property({ type: String, reflect: true })
155
+ ], SDSButton.prototype, "target", void 0);
137
156
  SDSButton = __decorate([
138
157
  guardedCustomElement('sds-button')
139
158
  ], SDSButton);
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAoBtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAoBxC;QACC,KAAK,EAAE,CAAC;QAdT,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAEiB,aAAQ,GAAY,KAAK,CAAC;QAE3B,UAAK,GAAW,EAAE,CAAC;QAS7C,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBACnB,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACf,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;4BAC7C,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,IAAI;yBAChB,CAAC,CAAC;wBACH,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;wBAErD,IAAI,YAAY,EAAE,CAAC;4BAClB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gCACf,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;gCACzD,MAAM,WAAW,GAA2B,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gCACpF,WAAW,EAAE,aAAa,EAAE,CAAC;4BAC9B,CAAC;iCAAM,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gCAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;4BACrC,CAAC;wBACF,CAAC;wBACD,MAAM;oBACP,CAAC;oBAED,KAAK,OAAO,CAAC,CAAC,CAAC;wBACd,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE;4BAC3C,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,UAAU,EAAE,IAAI;yBAChB,CAAC,CAAC;wBACH,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;wBAEnD,IAAI,WAAW,EAAE,CAAC;4BACjB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gCACf,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAA2B,CAAC;gCACzD,MAAM,WAAW,GAA2B,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gCACpF,WAAW,EAAE,KAAK,EAAE,CAAC;4BACtB,CAAC;iCAAM,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gCAChC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;4BAC7B,CAAC;wBACF,CAAC;wBACD,MAAM;oBACP,CAAC;oBAED;wBACC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;4BACxB,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;yBACd,CAAC,CACF,CAAC;gBACJ,CAAC;YACF,CAAC;QACF,CAAC,CAAC;QA3DD,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;IA2DQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACvE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC;IACtE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;IACvE,CAAC;IAEQ,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA;;;YAGD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;aACnB,QAAQ,CAAC,aAAa,CAAC;YACxB,IAAI,CAAC,IAAI;YACT,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;aACnB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;iBACjB,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,YAAY;;;;;;GAM5B,CAAC;IACH,CAAC;;AAxHe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAE3B,wBAAc,GAAG,IAAI,AAAP,CAAQ;AAI7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACd;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACP;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACf;AAEiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA2B;AAC3B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAlB7C,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CA0HrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\nexport interface SDSButtonProps {\n\ttype?: ButtonType;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tdisabled?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tform?: string;\n\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) form?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--critical': this.variant === 'critical',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\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\thref?: string;\n\ttarget?: TargetTypes;\n\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\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\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a\n\t\t\t\tid=\"link\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\thref=\"${this.href}\"\n\t\t\t\ttarget=\"${ifDefined(this.target)}\"\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</a>`;\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"]}
@@ -17,6 +17,11 @@ const primaryButtonIds = [
17
17
  'button-primary-medium-icon-only',
18
18
  'button-primary-small-icon-only',
19
19
  'button-primary-disabled-icon-only',
20
+ 'button-as-link-primary-large',
21
+ 'button-as-link-primary-medium',
22
+ 'button-as-link-primary-small',
23
+ 'button-as-link-icon-before',
24
+ 'button-as-link-icon-after',
20
25
  ];
21
26
  const secondaryButtonIds = [
22
27
  // Secondary
@@ -36,6 +41,9 @@ const secondaryButtonIds = [
36
41
  'button-secondary-medium-icon-only',
37
42
  'button-secondary-small-icon-only',
38
43
  'button-secondary-disabled-icon-only',
44
+ 'button-as-link-secondary-large',
45
+ 'button-as-link-secondary-medium',
46
+ 'button-as-link-secondary-small',
39
47
  ];
40
48
  const tertiaryButtonIds = [
41
49
  // Tertiary
@@ -55,6 +63,9 @@ const tertiaryButtonIds = [
55
63
  'button-tertiary-medium-icon-only',
56
64
  'button-tertiary-small-icon-only',
57
65
  'button-tertiary-disabled-icon-only',
66
+ 'button-as-link-tertiary-large',
67
+ 'button-as-link-tertiary-medium',
68
+ 'button-as-link-tertiary-small',
58
69
  ];
59
70
  const criticalButtonIds = [
60
71
  // Critical
@@ -74,6 +85,9 @@ const criticalButtonIds = [
74
85
  'button-critical-medium-icon-only',
75
86
  'button-critical-small-icon-only',
76
87
  'button-critical-disabled-icon-only',
88
+ 'button-as-link-critical-large',
89
+ 'button-as-link-critical-medium',
90
+ 'button-as-link-critical-small',
77
91
  ];
78
92
  test.describe('button-component', () => {
79
93
  test.beforeEach(async ({ page }) => {
@@ -127,5 +141,27 @@ test.describe('button-component', () => {
127
141
  const value = await page.locator('#first-name').getAttribute('value');
128
142
  expect(value).toBeNull();
129
143
  });
144
+ test('button-as-link', async ({ page }) => {
145
+ const buttonAsLink = page.locator('#button-as-link-target-blank');
146
+ await expect(buttonAsLink).toHaveAttribute('href', 'https://www.politiet.no');
147
+ const shadowButtonAsLinkHref = await buttonAsLink.evaluate((el) => {
148
+ const shadowRoot = el.shadowRoot;
149
+ if (shadowRoot) {
150
+ const anchorElement = shadowRoot.querySelector('a');
151
+ return anchorElement?.getAttribute('href');
152
+ }
153
+ return null;
154
+ });
155
+ await expect(shadowButtonAsLinkHref).toBe('https://www.politiet.no');
156
+ const shadowButtonAsLinkTarget = await buttonAsLink.evaluate((el) => {
157
+ const shadowRoot = el.shadowRoot;
158
+ if (shadowRoot) {
159
+ const anchorElement = shadowRoot.querySelector('a');
160
+ return anchorElement?.getAttribute('target');
161
+ }
162
+ return null;
163
+ });
164
+ await expect(shadowButtonAsLinkTarget).toBe('_blank');
165
+ });
130
166
  });
131
167
  //# sourceMappingURL=sds-button.spec.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"sds-button.spec.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\nconst primaryButtonIds = [\n\t// Primary\n\t'button-primary-large',\n\t'button-primary-medium',\n\t'button-primary-small',\n\t'button-primary-disabled',\n\t'button-primary-large-icon-before',\n\t'button-primary-medium-icon-before',\n\t'button-primary-small-icon-before',\n\t'button-primary-disabled-icon-before',\n\t'button-primary-large-icon-after',\n\t'button-primary-medium-icon-after',\n\t'button-primary-small-icon-after',\n\t'button-primary-disabled-icon-after',\n\t'button-primary-large-icon-only',\n\t'button-primary-medium-icon-only',\n\t'button-primary-small-icon-only',\n\t'button-primary-disabled-icon-only',\n];\nconst secondaryButtonIds = [\n\t// Secondary\n\t'button-secondary-large',\n\t'button-secondary-medium',\n\t'button-secondary-small',\n\t'button-secondary-disabled',\n\t'button-secondary-large-icon-before',\n\t'button-secondary-medium-icon-before',\n\t'button-secondary-small-icon-before',\n\t'button-secondary-disabled-icon-before',\n\t'button-secondary-large-icon-after',\n\t'button-secondary-medium-icon-after',\n\t'button-secondary-small-icon-after',\n\t'button-secondary-disabled-icon-after',\n\t'button-secondary-large-icon-only',\n\t'button-secondary-medium-icon-only',\n\t'button-secondary-small-icon-only',\n\t'button-secondary-disabled-icon-only',\n];\nconst tertiaryButtonIds = [\n\t// Tertiary\n\t'button-tertiary-large',\n\t'button-tertiary-medium',\n\t'button-tertiary-small',\n\t'button-tertiary-disabled',\n\t'button-tertiary-large-icon-before',\n\t'button-tertiary-medium-icon-before',\n\t'button-tertiary-small-icon-before',\n\t'button-tertiary-disabled-icon-before',\n\t'button-tertiary-large-icon-after',\n\t'button-tertiary-medium-icon-after',\n\t'button-tertiary-small-icon-after',\n\t'button-tertiary-disabled-icon-after',\n\t'button-tertiary-large-icon-only',\n\t'button-tertiary-medium-icon-only',\n\t'button-tertiary-small-icon-only',\n\t'button-tertiary-disabled-icon-only',\n];\nconst criticalButtonIds = [\n\t// Critical\n\t'button-critical-large',\n\t'button-critical-medium',\n\t'button-critical-small',\n\t'button-critical-disabled',\n\t'button-critical-large-icon-before',\n\t'button-critical-medium-icon-before',\n\t'button-critical-small-icon-before',\n\t'button-critical-disabled-icon-before',\n\t'button-critical-large-icon-after',\n\t'button-critical-medium-icon-after',\n\t'button-critical-small-icon-after',\n\t'button-critical-disabled-icon-after',\n\t'button-critical-large-icon-only',\n\t'button-critical-medium-icon-only',\n\t'button-critical-small-icon-only',\n\t'button-critical-disabled-icon-only',\n];\n\ntest.describe('button-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-button--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\n\t\tfor (const id of buttonIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\t\tawait page.reload();\n\n\t\tfor (const id of buttonIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?first-name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('first-name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#first-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n});\n"]}
1
+ {"version":3,"file":"sds-button.spec.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\n\nconst primaryButtonIds = [\n\t// Primary\n\t'button-primary-large',\n\t'button-primary-medium',\n\t'button-primary-small',\n\t'button-primary-disabled',\n\t'button-primary-large-icon-before',\n\t'button-primary-medium-icon-before',\n\t'button-primary-small-icon-before',\n\t'button-primary-disabled-icon-before',\n\t'button-primary-large-icon-after',\n\t'button-primary-medium-icon-after',\n\t'button-primary-small-icon-after',\n\t'button-primary-disabled-icon-after',\n\t'button-primary-large-icon-only',\n\t'button-primary-medium-icon-only',\n\t'button-primary-small-icon-only',\n\t'button-primary-disabled-icon-only',\n\t'button-as-link-primary-large',\n\t'button-as-link-primary-medium',\n\t'button-as-link-primary-small',\n\t'button-as-link-icon-before',\n\t'button-as-link-icon-after',\n];\nconst secondaryButtonIds = [\n\t// Secondary\n\t'button-secondary-large',\n\t'button-secondary-medium',\n\t'button-secondary-small',\n\t'button-secondary-disabled',\n\t'button-secondary-large-icon-before',\n\t'button-secondary-medium-icon-before',\n\t'button-secondary-small-icon-before',\n\t'button-secondary-disabled-icon-before',\n\t'button-secondary-large-icon-after',\n\t'button-secondary-medium-icon-after',\n\t'button-secondary-small-icon-after',\n\t'button-secondary-disabled-icon-after',\n\t'button-secondary-large-icon-only',\n\t'button-secondary-medium-icon-only',\n\t'button-secondary-small-icon-only',\n\t'button-secondary-disabled-icon-only',\n\t'button-as-link-secondary-large',\n\t'button-as-link-secondary-medium',\n\t'button-as-link-secondary-small',\n];\nconst tertiaryButtonIds = [\n\t// Tertiary\n\t'button-tertiary-large',\n\t'button-tertiary-medium',\n\t'button-tertiary-small',\n\t'button-tertiary-disabled',\n\t'button-tertiary-large-icon-before',\n\t'button-tertiary-medium-icon-before',\n\t'button-tertiary-small-icon-before',\n\t'button-tertiary-disabled-icon-before',\n\t'button-tertiary-large-icon-after',\n\t'button-tertiary-medium-icon-after',\n\t'button-tertiary-small-icon-after',\n\t'button-tertiary-disabled-icon-after',\n\t'button-tertiary-large-icon-only',\n\t'button-tertiary-medium-icon-only',\n\t'button-tertiary-small-icon-only',\n\t'button-tertiary-disabled-icon-only',\n\t'button-as-link-tertiary-large',\n\t'button-as-link-tertiary-medium',\n\t'button-as-link-tertiary-small',\n];\nconst criticalButtonIds = [\n\t// Critical\n\t'button-critical-large',\n\t'button-critical-medium',\n\t'button-critical-small',\n\t'button-critical-disabled',\n\t'button-critical-large-icon-before',\n\t'button-critical-medium-icon-before',\n\t'button-critical-small-icon-before',\n\t'button-critical-disabled-icon-before',\n\t'button-critical-large-icon-after',\n\t'button-critical-medium-icon-after',\n\t'button-critical-small-icon-after',\n\t'button-critical-disabled-icon-after',\n\t'button-critical-large-icon-only',\n\t'button-critical-medium-icon-only',\n\t'button-critical-small-icon-only',\n\t'button-critical-disabled-icon-only',\n\t'button-as-link-critical-large',\n\t'button-as-link-critical-medium',\n\t'button-as-link-critical-small',\n];\n\ntest.describe('button-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-button--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\n\t\tfor (const id of buttonIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tconst buttonIds = [...primaryButtonIds, ...secondaryButtonIds, ...tertiaryButtonIds, ...criticalButtonIds];\n\t\tawait page.reload();\n\n\t\tfor (const id of buttonIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?first-name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('first-name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#first-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#first-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('button-as-link', async ({ page }) => {\n\t\tconst buttonAsLink = page.locator('#button-as-link-target-blank');\n\t\tawait expect(buttonAsLink).toHaveAttribute('href', 'https://www.politiet.no');\n\n\t\tconst shadowButtonAsLinkHref = await buttonAsLink.evaluate((el) => {\n\t\t\tconst shadowRoot = el.shadowRoot;\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst anchorElement = shadowRoot.querySelector('a');\n\t\t\t\treturn anchorElement?.getAttribute('href');\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\n\t\tawait expect(shadowButtonAsLinkHref).toBe('https://www.politiet.no');\n\n\t\tconst shadowButtonAsLinkTarget = await buttonAsLink.evaluate((el) => {\n\t\t\tconst shadowRoot = el.shadowRoot;\n\t\t\tif (shadowRoot) {\n\t\t\t\tconst anchorElement = shadowRoot.querySelector('a');\n\t\t\t\treturn anchorElement?.getAttribute('target');\n\t\t\t}\n\t\t\treturn null;\n\t\t});\n\n\t\tawait expect(shadowButtonAsLinkTarget).toBe('_blank');\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,yBAkJlB,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,yBAsJlB,CAAC"}
@@ -31,6 +31,12 @@ export const styles = css `
31
31
  border: 2px solid var(--sds-color-semantic-surface-action-hover);
32
32
  }
33
33
 
34
+ &:focus {
35
+ background-color: var(--sds-color-semantic-surface-action-default);
36
+ outline: 2px solid var(--sds-color-semantic-surface-action-default);
37
+ outline-offset: 1px;
38
+ }
39
+
34
40
  &:active {
35
41
  background-color: var(--sds-color-semantic-surface-action-active);
36
42
  border: 2px solid var(--sds-color-semantic-surface-action-active);
@@ -45,13 +51,6 @@ export const styles = css `
45
51
  }
46
52
  }
47
53
 
48
- .sds-button:focus,
49
- :host(:focus) .give-focus {
50
- background-color: var(--sds-color-semantic-surface-action-default);
51
- outline: 2px solid var(--sds-color-semantic-surface-action-default);
52
- outline-offset: 1px;
53
- }
54
-
55
54
  .sds-button--secondary {
56
55
  background-color: var(--sds-color-semantic-surface-action-inverted);
57
56
  border: 2px solid var(--sds-color-semantic-border-action);
@@ -145,5 +144,10 @@ export const styles = css `
145
144
  font-size: 0.875rem;
146
145
  padding: 0 var(--sds-spacing-3);
147
146
  }
147
+
148
+ .sds-button--as-link {
149
+ inline-size: auto;
150
+ text-decoration: none;
151
+ }
148
152
  `;
149
153
  //# sourceMappingURL=sds-button.styles.js.map
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB,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\tborder: 2px solid transparent;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,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&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\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--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\tborder: 2px solid transparent;\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\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n`;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAG9B,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACtE;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAGS,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAG7F,OAAO,CAAC,eAAe,CAAgB;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAepC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
1
+ {"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAI9B,MAAM,WAAW,qBAAqB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,cAAc,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACtE;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAGS,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAG7F,OAAO,CAAC,eAAe,CAAgB;IAEvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAapC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
@@ -11,6 +11,7 @@ import { guardedCustomElement } from '../utils/guarded-custom-element';
11
11
  import { styles } from './sds-checkbox-group.styles';
12
12
  import '../sds-checkbox/sds-checkbox';
13
13
  import '../sds-icon/sds-icon';
14
+ import { renderErrorMessage } from '../utils/renderErrorMessage';
14
15
  let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
15
16
  constructor() {
16
17
  super(...arguments);
@@ -19,9 +20,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
19
20
  const checkbox = event.target;
20
21
  const value = checkbox.value;
21
22
  const isChecked = checkbox.checked;
22
- this._selectedValues = isChecked
23
- ? [...this._selectedValues, value]
24
- : this._selectedValues.filter((v) => v !== value);
23
+ this._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v) => v !== value);
25
24
  this.dispatchEvent(new CustomEvent('sds-update', {
26
25
  bubbles: true,
27
26
  composed: true,
@@ -43,16 +42,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
43
42
  <div class="sds-checkbox-group__checkboxes">
44
43
  <slot @change=${this._handleCheckboxChange}></slot>
45
44
  </div>
46
- ${this.errorMessage
47
- ? html `<p class="sds-checkbox-group__error-message">
48
- <sds-icon
49
- name="warning-material-filled"
50
- size="m"
51
- color="var(--sds-color-semantic-icon-critical)"
52
- ></sds-icon>
53
- ${this.errorMessage}
54
- </p>`
55
- : nothing}
45
+ ${renderErrorMessage(this.errorMessage, 'sds-checkbox-group__error-message')}
56
46
  </fieldset>
57
47
  `;
58
48
  }
@@ -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,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAWvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUE,oBAAe,GAAa,EAAE,CAAC;QAEtB,0BAAqB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACrE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;YAClD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,eAAe,GAAG,SAAS;gBAC/B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC;gBAClC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAEnD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAgCH,CAAC;IA9BA,IAAI,KAAK;QACR,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,oBAAoB,EAAE,IAAI;YAC1B,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;SACvD,CAAC;QAEF,OAAO,IAAI,CAAA;sBACS,QAAQ,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAChG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;qBAE9E,IAAI,CAAC,qBAAqB;;MAEzC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;SAMF,IAAI,CAAC,YAAY;WACf;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAzDD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AACQ;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AACd;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAuB;AAGrF;IADP,KAAK,EAAE;yDAC+B;AAV3B,gBAAgB;IAD5B,oBAAoB,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CA2D5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\n\t@state()\n\tprivate _selectedValues: string[] = [];\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked\n\t\t\t? [...this._selectedValues, value]\n\t\t\t: this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-checkbox-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\">\n\t\t\t\t\t<slot @change=${this._handleCheckboxChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-checkbox-group__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"var(--sds-color-semantic-icon-critical)\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAW1D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAUE,oBAAe,GAAa,EAAE,CAAC;QAEtB,0BAAqB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACrE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;YAClD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAEtH,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAuBH,CAAC;IArBA,IAAI,KAAK;QACR,OAAO,EAAE,cAAc,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,oBAAoB,EAAE,IAAI;YAC1B,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;SACvD,CAAC;QAEF,OAAO,IAAI,CAAA;sBACS,QAAQ,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAChG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;qBAE9E,IAAI,CAAC,qBAAqB;;MAEzC,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,mCAAmC,CAAC;;GAE7E,CAAC;IACH,CAAC;;AA9CD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAiB;AACQ;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AACd;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAuB;AAGrF;IADP,KAAK,EAAE;yDAC+B;AAV3B,gBAAgB;IAD5B,oBAAoB,CAAC,oBAAoB,CAAC;GAC9B,gBAAgB,CAgD5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\n\t@state()\n\tprivate _selectedValues: string[] = [];\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-checkbox-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\">\n\t\t\t\t\t<slot @change=${this._handleCheckboxChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-checkbox-group__error-message')}\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 +1 @@
1
- {"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAE9B;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,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,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAErE,OAAO,CAAC,cAAc,CAAuB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAejC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
1
+ {"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAG9B;;;GAGG;AAEH,MAAM,WAAW,kBAAkB;IAClC,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,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC1E;AAED,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAEN,MAAM,CAAC,EAAE,MAAM,CAAC;IACQ,QAAQ,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IAErE,OAAO,CAAC,cAAc,CAAuB;IAEtD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAajC;IAEF,IAAI,KAAK,IAAI,EAAE,CAEd;IAEQ,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}
@@ -10,14 +10,13 @@ import { guardedCustomElement } from '../utils/guarded-custom-element';
10
10
  import { styles } from './sds-radio-group.styles';
11
11
  import '../sds-radio/sds-radio';
12
12
  import '../sds-icon/sds-icon';
13
+ import { renderErrorMessage } from '../utils/renderErrorMessage';
13
14
  let SDSRadioGroup = class SDSRadioGroup extends LitElement {
14
15
  constructor() {
15
16
  super(...arguments);
16
17
  this._selectedValue = null;
17
18
  this._handleRadioChange = (event) => {
18
- const target = event
19
- .composedPath()
20
- .find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
19
+ const target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
21
20
  if (target) {
22
21
  this._selectedValue = target.getAttribute('value') || null;
23
22
  this.dispatchEvent(new CustomEvent('sds-update', {
@@ -38,16 +37,7 @@ let SDSRadioGroup = class SDSRadioGroup extends LitElement {
38
37
  <div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
39
38
  <slot></slot>
40
39
  </div>
41
- ${this.errorMessage
42
- ? html `<p class="sds-radio-group__error-message">
43
- <sds-icon
44
- name="warning-material-filled"
45
- size="m"
46
- color="var(--sds-color-semantic-icon-critical)"
47
- ></sds-icon>
48
- ${this.errorMessage}
49
- </p>`
50
- : nothing}
40
+ ${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}
51
41
  </fieldset>
52
42
  `;
53
43
  }
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAevB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOW,mBAAc,GAAkB,IAAI,CAAC;QAErC,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC5D,MAAM,MAAM,GAAG,KAAK;iBAClB,YAAY,EAAE;iBACd,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,CAAoC,CAAC;YAE3G,IAAI,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBAE3D,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IA2BH,CAAC;IAzBA,IAAI,KAAK;QACR,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;MAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAC7F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;mDAC7C,IAAI,CAAC,kBAAkB;;;MAGpE,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;SAMF,IAAI,CAAC,YAAY;WACf;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAjDe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AACQ;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CAAmB;AACd;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDAAuB;AAE7D;IAAhB,KAAK,EAAE;qDAA8C;AAP1C,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;GAC3B,aAAa,CAmDzB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValue: string | null }>) => void;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: string;\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: string;\n\n\t@state() private _selectedValue: string | null = null;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event\n\t\t\t.composedPath()\n\t\t\t.find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('sds-update', {\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\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<fieldset class=\"sds-radio-group\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-radio-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-radio-group__radios\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-radio-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-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAe1D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOW,mBAAc,GAAkB,IAAI,CAAC;QAErC,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,CAAoC,CAAC;YAE7I,IAAI,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBAE3D,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAkBH,CAAC;IAhBA,IAAI,KAAK;QACR,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC/C,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;MAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAC7F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;mDAC7C,IAAI,CAAC,kBAAkB;;;MAGpE,kBAAkB,CAAC,IAAI,CAAC,YAAY,EAAE,gCAAgC,CAAC;;GAE1E,CAAC;IACH,CAAC;;AAtCe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiB;AACQ;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CAAmB;AACd;IAAvD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDAAuB;AAE7D;IAAhB,KAAK,EAAE;qDAA8C;AAP1C,aAAa;IADzB,oBAAoB,CAAC,iBAAiB,CAAC;GAC3B,aAAa,CAwCzB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio-group.styles';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\nimport { renderErrorMessage } from '../utils/renderErrorMessage';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\nexport interface SDSRadioGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tonChange?: (event: CustomEvent<{ selectedValue: string | null }>) => void;\n}\n\n@guardedCustomElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String }) legend?: string;\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message' }) errorMessage?: string;\n\n\t@state() private _selectedValue: string | null = null;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event.composedPath().find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\tthis._selectedValue = target.getAttribute('value') || null;\n\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('sds-update', {\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\tget value(): {} {\n\t\treturn { selectedValue: this._selectedValue };\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<fieldset class=\"sds-radio-group\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-radio-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-radio-group__radios\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t${renderErrorMessage(this.errorMessage, 'sds-radio-group__error-message')}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}
@@ -0,0 +1,77 @@
1
+ import { LitElement } from 'lit';
2
+ import '../sds-icon/sds-icon';
3
+ export interface SDSTextAreaProps {
4
+ value?: string;
5
+ name?: string;
6
+ label?: string;
7
+ placeholder?: string;
8
+ 'help-text'?: string;
9
+ 'error-message'?: string;
10
+ disabled?: boolean;
11
+ readonly?: boolean;
12
+ autocomplete?: HTMLTextAreaElement['autocomplete'];
13
+ required?: boolean;
14
+ rows?: number;
15
+ cols?: number;
16
+ wrap?: 'hard' | 'soft' | 'off';
17
+ minlength?: number;
18
+ maxlength?: number;
19
+ counter?: number;
20
+ onInput?: (event: Event) => void;
21
+ onChange?: (event: Event) => void;
22
+ onSelect?: (event: Event) => void;
23
+ onFocus?: (event: Event) => void;
24
+ onBlur?: (event: Event) => void;
25
+ }
26
+ export declare class SDSTextArea extends LitElement {
27
+ static styles: import("lit").CSSResult[];
28
+ value?: string;
29
+ name?: string;
30
+ label?: string;
31
+ placeholder?: string;
32
+ helpText?: string;
33
+ errorMessage?: string;
34
+ disabled: boolean;
35
+ readOnly: boolean;
36
+ autocomplete?: HTMLTextAreaElement['autocomplete'];
37
+ required: boolean;
38
+ rows?: number;
39
+ cols?: number;
40
+ wrap?: 'hard' | 'soft';
41
+ minlength?: number;
42
+ maxlength?: number;
43
+ counter?: number;
44
+ control: HTMLTextAreaElement;
45
+ static formAssociated: boolean;
46
+ readonly internals: ElementInternals;
47
+ private _defaultValue;
48
+ constructor();
49
+ connectedCallback(): void;
50
+ private updateValidity;
51
+ private renderCharacterCounter;
52
+ private readonly _handleInputChange;
53
+ private readonly _handleSelect;
54
+ private readonly _handleFocus;
55
+ private readonly _handleBlur;
56
+ formResetCallback(): void;
57
+ select(): void;
58
+ type(): string;
59
+ focus(): void;
60
+ blur(): void;
61
+ click(): void;
62
+ get selectionStart(): number | null;
63
+ set selectionStart(value: number | null);
64
+ get selectionEnd(): number | null;
65
+ set selectionEnd(value: number | null);
66
+ setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
67
+ checkValidity(): boolean;
68
+ reportValidity(): boolean;
69
+ setCustomValidity(message: string): void;
70
+ render(): import("lit-html").TemplateResult<1>;
71
+ }
72
+ declare global {
73
+ interface HTMLElementTagNameMap {
74
+ 'sds-textarea': SDSTextArea;
75
+ }
76
+ }
77
+ //# sourceMappingURL=sds-textarea.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}