@politiet/sheriff-web-components 2.5.0 → 2.6.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 (159) hide show
  1. package/custom-elements.json +529 -304
  2. package/dist/frameworks/preact.d.ts +12 -3
  3. package/dist/frameworks/preact.d.ts.map +1 -1
  4. package/dist/frameworks/react.d.ts +12 -3
  5. package/dist/frameworks/react.d.ts.map +1 -1
  6. package/dist/frameworks/solidjs.d.ts +3 -0
  7. package/dist/frameworks/solidjs.d.ts.map +1 -1
  8. package/dist/frameworks/svelte.d.ts +3 -0
  9. package/dist/frameworks/svelte.d.ts.map +1 -1
  10. package/dist/frameworks/vue.d.ts +3 -0
  11. package/dist/frameworks/vue.d.ts.map +1 -1
  12. package/dist/index.d.ts +6 -0
  13. package/dist/index.d.ts.map +1 -1
  14. package/dist/index.js +3 -0
  15. package/dist/index.js.map +1 -1
  16. package/dist/mixins/index.d.ts +3 -0
  17. package/dist/mixins/index.d.ts.map +1 -0
  18. package/dist/mixins/index.js +3 -0
  19. package/dist/mixins/index.js.map +1 -0
  20. package/dist/mixins/sds-delegate-interaction-mixin.d.ts +27 -0
  21. package/dist/mixins/sds-delegate-interaction-mixin.d.ts.map +1 -0
  22. package/dist/mixins/sds-delegate-interaction-mixin.js +29 -0
  23. package/dist/mixins/sds-delegate-interaction-mixin.js.map +1 -0
  24. package/dist/mixins/sds-event-dispatcher-mixin.d.ts +3 -3
  25. package/dist/mixins/sds-event-dispatcher-mixin.d.ts.map +1 -1
  26. package/dist/mixins/sds-event-dispatcher-mixin.js +58 -1
  27. package/dist/mixins/sds-event-dispatcher-mixin.js.map +1 -1
  28. package/dist/mixins/sds-popover-target-mixin.d.ts +8 -0
  29. package/dist/mixins/sds-popover-target-mixin.d.ts.map +1 -0
  30. package/dist/mixins/sds-popover-target-mixin.js +77 -0
  31. package/dist/mixins/sds-popover-target-mixin.js.map +1 -0
  32. package/dist/mixins/types.d.ts +2 -0
  33. package/dist/mixins/types.d.ts.map +1 -0
  34. package/dist/mixins/types.js +2 -0
  35. package/dist/mixins/types.js.map +1 -0
  36. package/dist/react-wrappers/SDSPopoverWrapper.d.ts +3 -0
  37. package/dist/react-wrappers/SDSPopoverWrapper.d.ts.map +1 -0
  38. package/dist/react-wrappers/SDSPopoverWrapper.js +10 -0
  39. package/dist/react-wrappers/SDSPopoverWrapper.js.map +1 -0
  40. package/dist/react-wrappers/SDSProcessStepWrapper.d.ts +3 -0
  41. package/dist/react-wrappers/SDSProcessStepWrapper.d.ts.map +1 -0
  42. package/dist/react-wrappers/SDSProcessStepWrapper.js +10 -0
  43. package/dist/react-wrappers/SDSProcessStepWrapper.js.map +1 -0
  44. package/dist/react-wrappers/SDSProcessWrapper.d.ts +3 -0
  45. package/dist/react-wrappers/SDSProcessWrapper.d.ts.map +1 -0
  46. package/dist/react-wrappers/SDSProcessWrapper.js +10 -0
  47. package/dist/react-wrappers/SDSProcessWrapper.js.map +1 -0
  48. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts +2 -0
  49. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts.map +1 -1
  50. package/dist/react-wrappers/SDSTextFieldWrapper.js +1 -0
  51. package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
  52. package/dist/react-wrappers/index.d.ts +3 -0
  53. package/dist/react-wrappers/index.d.ts.map +1 -1
  54. package/dist/react-wrappers/index.js +3 -0
  55. package/dist/react-wrappers/index.js.map +1 -1
  56. package/dist/sds-alert/sds-alert.component.d.ts +2 -1
  57. package/dist/sds-alert/sds-alert.component.d.ts.map +1 -1
  58. package/dist/sds-alert/sds-alert.component.js +3 -5
  59. package/dist/sds-alert/sds-alert.component.js.map +1 -1
  60. package/dist/sds-button/sds-button.component.d.ts +5 -4
  61. package/dist/sds-button/sds-button.component.d.ts.map +1 -1
  62. package/dist/sds-button/sds-button.component.js +20 -30
  63. package/dist/sds-button/sds-button.component.js.map +1 -1
  64. package/dist/sds-checkbox/sds-checkbox.d.ts +2 -4
  65. package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
  66. package/dist/sds-checkbox/sds-checkbox.js +5 -16
  67. package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
  68. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +2 -1
  69. package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
  70. package/dist/sds-checkbox-group/sds-checkbox-group.js +3 -5
  71. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
  72. package/dist/sds-chip/sds-chip.d.ts +14 -12
  73. package/dist/sds-chip/sds-chip.d.ts.map +1 -1
  74. package/dist/sds-chip/sds-chip.js +29 -33
  75. package/dist/sds-chip/sds-chip.js.map +1 -1
  76. package/dist/sds-details/sds-details.d.ts +3 -1
  77. package/dist/sds-details/sds-details.d.ts.map +1 -1
  78. package/dist/sds-details/sds-details.js +3 -6
  79. package/dist/sds-details/sds-details.js.map +1 -1
  80. package/dist/sds-dialog/sds-dialog.d.ts +5 -1
  81. package/dist/sds-dialog/sds-dialog.d.ts.map +1 -1
  82. package/dist/sds-dialog/sds-dialog.js +43 -27
  83. package/dist/sds-dialog/sds-dialog.js.map +1 -1
  84. package/dist/sds-dialog/sds-dialog.styles.d.ts.map +1 -1
  85. package/dist/sds-dialog/sds-dialog.styles.js +3 -1
  86. package/dist/sds-dialog/sds-dialog.styles.js.map +1 -1
  87. package/dist/sds-icon/sds-icon.styles.d.ts.map +1 -1
  88. package/dist/sds-icon/sds-icon.styles.js +2 -1
  89. package/dist/sds-icon/sds-icon.styles.js.map +1 -1
  90. package/dist/sds-notification/sds-notification.d.ts +2 -1
  91. package/dist/sds-notification/sds-notification.d.ts.map +1 -1
  92. package/dist/sds-notification/sds-notification.js +3 -5
  93. package/dist/sds-notification/sds-notification.js.map +1 -1
  94. package/dist/sds-popover/assets/popover-styles.d.ts +3 -0
  95. package/dist/sds-popover/assets/popover-styles.d.ts.map +1 -0
  96. package/dist/sds-popover/assets/popover-styles.js +3 -0
  97. package/dist/sds-popover/assets/popover-styles.js.map +1 -0
  98. package/dist/sds-popover/assets/positioning.js +1 -0
  99. package/dist/sds-popover/sds-popover.d.ts +25 -0
  100. package/dist/sds-popover/sds-popover.d.ts.map +1 -0
  101. package/dist/sds-popover/sds-popover.js +43 -0
  102. package/dist/sds-popover/sds-popover.js.map +1 -0
  103. package/dist/sds-popover/sds-popover.styles.d.ts +2 -0
  104. package/dist/sds-popover/sds-popover.styles.d.ts.map +1 -0
  105. package/dist/sds-popover/sds-popover.styles.js +52 -0
  106. package/dist/sds-popover/sds-popover.styles.js.map +1 -0
  107. package/dist/sds-process/sds-process.d.ts +20 -0
  108. package/dist/sds-process/sds-process.d.ts.map +1 -0
  109. package/dist/sds-process/sds-process.js +29 -0
  110. package/dist/sds-process/sds-process.js.map +1 -0
  111. package/dist/sds-process/sds-process.styles.d.ts +2 -0
  112. package/dist/sds-process/sds-process.styles.d.ts.map +1 -0
  113. package/dist/sds-process/sds-process.styles.js +8 -0
  114. package/dist/sds-process/sds-process.styles.js.map +1 -0
  115. package/dist/sds-process-step/sds-process-step.d.ts +29 -0
  116. package/dist/sds-process-step/sds-process-step.d.ts.map +1 -0
  117. package/dist/sds-process-step/sds-process-step.js +75 -0
  118. package/dist/sds-process-step/sds-process-step.js.map +1 -0
  119. package/dist/sds-process-step/sds-process-step.styles.d.ts +2 -0
  120. package/dist/sds-process-step/sds-process-step.styles.d.ts.map +1 -0
  121. package/dist/sds-process-step/sds-process-step.styles.js +143 -0
  122. package/dist/sds-process-step/sds-process-step.styles.js.map +1 -0
  123. package/dist/sds-radio/sds-radio.d.ts +2 -4
  124. package/dist/sds-radio/sds-radio.d.ts.map +1 -1
  125. package/dist/sds-radio/sds-radio.js +5 -16
  126. package/dist/sds-radio/sds-radio.js.map +1 -1
  127. package/dist/sds-radio-group/sds-radio-group.d.ts +2 -1
  128. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  129. package/dist/sds-radio-group/sds-radio-group.js +3 -2
  130. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  131. package/dist/sds-select/sds-select.d.ts +2 -4
  132. package/dist/sds-select/sds-select.d.ts.map +1 -1
  133. package/dist/sds-select/sds-select.js +9 -21
  134. package/dist/sds-select/sds-select.js.map +1 -1
  135. package/dist/sds-stepper/sds-stepper.d.ts +1 -1
  136. package/dist/sds-stepper-step/sds-stepper-step.d.ts +1 -1
  137. package/dist/sds-switch/sds-switch.d.ts +2 -1
  138. package/dist/sds-switch/sds-switch.d.ts.map +1 -1
  139. package/dist/sds-switch/sds-switch.js +5 -13
  140. package/dist/sds-switch/sds-switch.js.map +1 -1
  141. package/dist/sds-textarea/sds-textarea.d.ts +3 -4
  142. package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
  143. package/dist/sds-textarea/sds-textarea.js +15 -17
  144. package/dist/sds-textarea/sds-textarea.js.map +1 -1
  145. package/dist/sds-textfield/sds-textfield.d.ts +3 -4
  146. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  147. package/dist/sds-textfield/sds-textfield.js +28 -28
  148. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  149. package/dist/sds-textfield/sds-textfield.spec.js +3 -3
  150. package/dist/sds-textfield/sds-textfield.spec.js.map +1 -1
  151. package/dist/sheriff-web-components.js +326 -116
  152. package/dist/skill/SKILL.md +172 -0
  153. package/dist/skill/references/components.md +481 -0
  154. package/dist/skill/references/react-wrappers.md +66 -0
  155. package/dist/types.d.ts +1 -0
  156. package/dist/types.d.ts.map +1 -1
  157. package/dist/types.js.map +1 -1
  158. package/package.json +47 -28
  159. package/web-types.json +825 -371
@@ -1 +1 @@
1
- {"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-dialog-background-color: var(--sds-dialog-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-dialog-backdrop-color: var(--sds-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n\n\t\t--_sds-dialog-border-color: var(--sds-dialog-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-radius-md));\n\t\t--_sds-dialog-border-width: var(--sds-dialog-border-width, var(--sds-border-sm));\n\n\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));\n\t\t--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));\n\n\t\t--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));\n\t\t--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));\n\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));\n\n\t\t--_sds-dialog-font-family: var(--sds-dialog-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-dialog-text-color: var(--sds-dialog-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-dialog-box-shadow: var(--sds-dialog-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n\n\t\t--_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);\n\t\t--_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));\n\n\t\tdisplay: contents;\n\t}\n\n\tdialog {\n\t\tcolor: var(--_sds-dialog-text-color);\n\t\tbackground-color: var(--_sds-dialog-background-color);\n\t\tbox-shadow: var(--_sds-dialog-box-shadow);\n\n\t\tborder: var(--_sds-dialog-border-width) solid var(--_sds-dialog-border-color);\n\t\tborder-radius: var(--_sds-dialog-border-radius);\n\n\t\tfont-family: var(--_sds-dialog-font-family);\n\n\t\tmax-width: var(--_sds-dialog-max-width);\n\t\tmax-height: var(--_sds-dialog-max-height);\n\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\topacity: 0;\n\t\ttransform: translateY(-1rem);\n\t\tanimation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;\n\n\t\t&:focus-visible {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tpadding-block: var(--_sds-dialog-padding-block);\n\t\t\tpadding-inline: var(--_sds-dialog-padding-inline);\n\t\t\tgap: var(--_sds-dialog-gap);\n\t\t}\n\n\t\t&.sds-dialog__empty-header {\n\t\t\t/* Set gap to 0 to collapse empty header */\n\t\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-zero));\n\t\t\t/* Set padding right to avoid overflowing the close button */\n\t\t\tpadding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));\n\t\t}\n\n\t\t&::backdrop {\n\t\t\tbackground-color: var(--_sds-dialog-backdrop-color);\n\t\t\t/* @keyframes does not work for ::backdrop in Firefox, so use transition instead */\n\t\t\ttransition: opacity var(--_sds-dialog-animation-duration) ease-out;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[open]::backdrop {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes sds-dialog-fade-in {\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t.sds-dialog__close-button {\n\t\t--sds-button-text-color: var(--sds-dialog-close-button-color, var(--sds-color-text-subtle, var(--sds-color-main-text-subtle)));\n\t\t--sds-button-padding-inline: 0;\n\n\t\tposition: absolute;\n\t\ttop: var(--_sds-dialog-close-button-offset);\n\t\tright: var(--_sds-dialog-close-button-offset);\n\t\tz-index: 1;\n\t}\n\n\t.sds-dialog__header {\n\t\tmargin-right: var(--sds-spacing-lg);\n\t}\n\n\t@media (max-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);\n\t\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-spacing-zero));\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\t--_sds-dialog-animation-duration: 0ms;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-dialog.styles.js","sourceRoot":"","sources":["../../src/sds-dialog/sds-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-dialog-background-color: var(--sds-dialog-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-dialog-backdrop-color: var(--sds-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n\n\t\t--_sds-dialog-border-color: var(--sds-dialog-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-dialog-border-radius: var(--sds-dialog-border-radius, var(--sds-radius-md));\n\t\t--_sds-dialog-border-width: var(--sds-dialog-border-width, var(--sds-border-sm));\n\n\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, min(60ch, 100vw));\n\t\t--_sds-dialog-max-height: var(--sds-dialog-max-height, calc(100dvh - var(--sds-spacing-lg)));\n\n\t\t--_sds-dialog-margin: var(--sds-dialog-margin, auto);\n\t\t--_sds-dialog-padding-block: var(--sds-dialog-padding-block, var(--sds-spacing-sm));\n\t\t--_sds-dialog-padding-inline: var(--sds-dialog-padding-inline, var(--sds-spacing-sm));\n\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-xs));\n\n\t\t--_sds-dialog-font-family: var(--sds-dialog-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-dialog-text-color: var(--sds-dialog-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-dialog-box-shadow: var(--sds-dialog-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));\n\n\t\t--_sds-dialog-animation-duration: var(--sds-dialog-animation-duration, 200ms);\n\t\t--_sds-dialog-close-button-offset: var(--sds-dialog-close-button-offset, var(--sds-spacing-3xs));\n\n\t\tdisplay: contents;\n\t}\n\n\tdialog {\n\t\tcolor: var(--_sds-dialog-text-color);\n\t\tbackground-color: var(--_sds-dialog-background-color);\n\t\tbox-shadow: var(--_sds-dialog-box-shadow);\n\n\t\tborder: var(--_sds-dialog-border-width) solid var(--_sds-dialog-border-color);\n\t\tborder-radius: var(--_sds-dialog-border-radius);\n\n\t\tfont-family: var(--_sds-dialog-font-family);\n\n\t\tmax-width: var(--_sds-dialog-max-width);\n\t\tmax-height: var(--_sds-dialog-max-height);\n\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\topacity: 0;\n\t\ttransform: translateY(-1rem);\n\t\tanimation: sds-dialog-fade-in var(--_sds-dialog-animation-duration) ease-out forwards;\n\n\t\t&:focus-visible {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&[open] {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tmargin: var(--_sds-dialog-margin);\n\t\t\tpadding-block: var(--_sds-dialog-padding-block);\n\t\t\tpadding-inline: var(--_sds-dialog-padding-inline);\n\t\t\tgap: var(--_sds-dialog-gap);\n\t\t}\n\n\t\t&.sds-dialog__empty-header {\n\t\t\t/* Set gap to 0 to collapse empty header */\n\t\t\t--_sds-dialog-gap: var(--sds-dialog-gap, var(--sds-spacing-zero));\n\t\t\t/* Set padding right to avoid overflowing the close button */\n\t\t\tpadding-right: var(--sds-dialog-padding-right, var(--sds-spacing-lg));\n\t\t}\n\n\t\t&::backdrop {\n\t\t\tbackground-color: var(--_sds-dialog-backdrop-color);\n\t\t\t/* @keyframes does not work for ::backdrop in Firefox, so use transition instead */\n\t\t\ttransition: opacity var(--_sds-dialog-animation-duration) ease-out;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[open]::backdrop {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\t@keyframes sds-dialog-fade-in {\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t.sds-dialog__close-button {\n\t\t--sds-button-text-color: var(--sds-dialog-close-button-color, var(--sds-color-text-subtle, var(--sds-color-main-text-subtle)));\n\t\t--sds-button-padding-inline: 0;\n\n\t\tposition: absolute;\n\t\ttop: var(--_sds-dialog-close-button-offset);\n\t\tright: var(--_sds-dialog-close-button-offset);\n\t\tz-index: 1;\n\t}\n\n\t.sds-dialog__header {\n\t\tmargin-right: var(--sds-spacing-lg);\n\t}\n\n\t@media (max-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-dialog-max-width: var(--sds-dialog-max-width, 100%);\n\t\t\t--_sds-dialog-margin: var(--sds-dialog-margin, var(--sds-spacing-xs));\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\t--_sds-dialog-animation-duration: 0ms;\n\t\t}\n\t}\n`;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"sds-icon.styles.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgClB,CAAC"}
1
+ {"version":3,"file":"sds-icon.styles.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiClB,CAAC"}
@@ -3,8 +3,9 @@ export const styles = css `
3
3
  :host {
4
4
  --_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));
5
5
  --_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
6
+ --_sds-icon-display: var(--sds-icon-display, inline-block);
6
7
 
7
- display: inline-block;
8
+ display: var(--_sds-icon-display);
8
9
  color: var(--_sds-icon-color);
9
10
  block-size: var(--_sds-icon-size);
10
11
  inline-size: var(--_sds-icon-size);
@@ -1 +1 @@
1
- {"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\n\t\tdisplay: inline-block;\n\t\tcolor: var(--_sds-icon-color);\n\t\tblock-size: var(--_sds-icon-size);\n\t\tinline-size: var(--_sds-icon-size);\n\t\tmin-inline-size: var(--_sds-icon-size);\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-lg));\n\t}\n\n\t:host([size='s']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t}\n\n\t.sds-icon {\n\t\taspect-ratio: 1;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-icon-display: var(--sds-icon-display, inline-block);\n\n\t\tdisplay: var(--_sds-icon-display);\n\t\tcolor: var(--_sds-icon-color);\n\t\tblock-size: var(--_sds-icon-size);\n\t\tinline-size: var(--_sds-icon-size);\n\t\tmin-inline-size: var(--_sds-icon-size);\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-lg));\n\t}\n\n\t:host([size='s']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t}\n\n\t.sds-icon {\n\t\taspect-ratio: 1;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n`;\n"]}
@@ -7,7 +7,8 @@ export interface SDSNotificationProps {
7
7
  variant?: NotificationVariant;
8
8
  'removable-label'?: string;
9
9
  }
10
- export declare class SDSNotification extends LitElement {
10
+ declare const SDSNotification_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
11
+ export declare class SDSNotification extends SDSNotification_base {
11
12
  static styles: import("lit").CSSResult[];
12
13
  variant: NotificationVariant;
13
14
  removableLabel?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"sds-notification.d.ts","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE5D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,KAAK,mBAAmB,GAAG,OAAO,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,UAAU,CAAC;AAW1I,MAAM,WAAW,oBAAoB;IACpC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,qBACa,eAAgB,SAAQ,UAAU;IAE9C,OAAgB,MAAM,4BAAY;IAGS,OAAO,EAAE,mBAAmB,CAAU;IACR,cAAc,CAAC,EAAE,MAAM,CAAC;;IAUxF,OAAO,CAAC,OAAO,EAAE,cAAc;IASxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;IAEO,MAAM;CAwBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;KACpC;IACD,UAAU,2BAA2B;QACpC,YAAY,EAAE,YAAY,CAAC;KAC3B;CACD"}
1
+ {"version":3,"file":"sds-notification.d.ts","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAG5D,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,KAAK,mBAAmB,GAAG,OAAO,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,UAAU,CAAC;AAW1I,MAAM,WAAW,oBAAoB;IACpC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B;;AAID,qBACa,eAAgB,SAAQ,oBAAmC;IAEvE,OAAgB,MAAM,4BAAY;IAGS,OAAO,EAAE,mBAAmB,CAAU;IACR,cAAc,CAAC,EAAE,MAAM,CAAC;;IAUxF,OAAO,CAAC,OAAO,EAAE,cAAc;IASxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAEtB;IAEO,MAAM;CAwBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;KACpC;IACD,UAAU,2BAA2B;QACpC,YAAY,EAAE,YAAY,CAAC;KAC3B;CACD"}
@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
9
9
  import { classMap } from 'lit/directives/class-map.js';
10
10
  import { guardedCustomElement } from '../utils/guarded-custom-element';
11
11
  import { styles } from './sds-notification.styles';
12
+ import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
12
13
  import '../sds-icon/sds-icon';
13
14
  import '../sds-button/sds-button';
14
15
  const notificationIcons = {
@@ -20,16 +21,13 @@ const notificationIcons = {
20
21
  critical: 'dangerous-material-filled', // Deprecated
21
22
  };
22
23
  let hasWarnedAboutDeprecation = false;
23
- let SDSNotification = class SDSNotification extends LitElement {
24
+ let SDSNotification = class SDSNotification extends SDSEventDispatcherMixin(LitElement) {
24
25
  constructor() {
25
26
  super();
26
27
  // Reactive Props
27
28
  this.variant = 'info';
28
29
  this._remove = () => {
29
- this.dispatchEvent(new CustomEvent('sds-remove', {
30
- bubbles: true,
31
- composed: true,
32
- }));
30
+ this.dispatchSheriffEvent('sds-remove');
33
31
  };
34
32
  if (!hasWarnedAboutDeprecation) {
35
33
  hasWarnedAboutDeprecation = true;
@@ -1 +1 @@
1
- {"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAIlC,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,2BAA2B,EAAE,aAAa;CACpD,CAAC;AAOF,IAAI,yBAAyB,GAAY,KAAK,CAAC;AAGxC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAQ9C;QACC,KAAK,EAAE,CAAC;QALT,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAoBhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAtBD,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAChC,yBAAyB,GAAG,IAAI,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,0IAA0I,CAAC,CAAC;QAC1J,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,uFAAuF;QACvF,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjE,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;QAC5B,CAAC;IACF,CAAC;IAWQ,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;SACxB,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpG,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAM/E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;mDACyC,YAAY,sBAAsB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,cAAc;;;YAGxH;YACR,CAAC,CAAC,OAAO;SACJ,CAAC;IACT,CAAC;;AAxDD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA0D3B","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\nimport { SheriffEvent, SDS_COLOR_PALETTES } from '../types';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\ntype NotificationVariant = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'danger'> | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\twarning: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n\tcritical: 'dangerous-material-filled', // Deprecated\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n}\n\nlet hasWarnedAboutDeprecation: boolean = false;\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tif (!hasWarnedAboutDeprecation) {\n\t\t\thasWarnedAboutDeprecation = true;\n\t\t\tconsole.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');\n\t\t}\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger and warning to attention to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'danger';\n\t\t} else if (changed.has('variant') && this.variant === 'warning') {\n\t\t\tthis.variant = 'attention';\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\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t};\n\n\t\tconst colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"md\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel\n\t\t\t\t? html`<div class=\"sds-notification__actions\">\n\t\t\t\t\t\t<sds-button icon variant=\"tertiary\" color=\"${colorPalette}\" size=\"sm\" @click=${this._remove} aria-label=\"${this.removableLabel}\">\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"sm\"></sds-icon>\n\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\t'sds-remove': SheriffEvent;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAIlC,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,2BAA2B,EAAE,aAAa;CACpD,CAAC;AAOF,IAAI,yBAAyB,GAAY,KAAK,CAAC;AAGxC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,uBAAuB,CAAC,UAAU,CAAC;IAQvE;QACC,KAAK,EAAE,CAAC;QALT,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAoBhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC;QACzC,CAAC,CAAC;QAjBD,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAChC,yBAAyB,GAAG,IAAI,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,0IAA0I,CAAC,CAAC;QAC1J,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,uFAAuF;QACvF,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjE,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;QAC5B,CAAC;IACF,CAAC;IAMQ,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;SACxB,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpG,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAM/E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;mDACyC,YAAY,sBAAsB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,cAAc;;;YAGxH;YACR,CAAC,CAAC,OAAO;SACJ,CAAC;IACT,CAAC;;AAnDD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CAqD3B","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\nimport { SheriffEvent, SDS_COLOR_PALETTES } from '../types';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\ntype NotificationVariant = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'danger'> | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\twarning: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n\tcritical: 'dangerous-material-filled', // Deprecated\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n}\n\nlet hasWarnedAboutDeprecation: boolean = false;\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends SDSEventDispatcherMixin(LitElement) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tif (!hasWarnedAboutDeprecation) {\n\t\t\thasWarnedAboutDeprecation = true;\n\t\t\tconsole.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');\n\t\t}\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger and warning to attention to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'danger';\n\t\t} else if (changed.has('variant') && this.variant === 'warning') {\n\t\t\tthis.variant = 'attention';\n\t\t}\n\t}\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchSheriffEvent('sds-remove');\n\t};\n\n\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t};\n\n\t\tconst colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"md\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel\n\t\t\t\t? html`<div class=\"sds-notification__actions\">\n\t\t\t\t\t\t<sds-button icon variant=\"tertiary\" color=\"${colorPalette}\" size=\"sm\" @click=${this._remove} aria-label=\"${this.removableLabel}\">\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"sm\"></sds-icon>\n\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n\tinterface GlobalEventHandlersEventMap {\n\t\t'sds-remove': SheriffEvent;\n\t}\n}\n"]}
@@ -0,0 +1,3 @@
1
+ declare var o: string;
2
+ export { o as default };
3
+ //# sourceMappingURL=popover-styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-styles.d.ts","sourceRoot":"","sources":["../../../src/sds-popover/assets/popover-styles.ts"],"names":[],"mappings":"AAAA,QAAA,IAAI,CAAC,QAAogF,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC"}
@@ -0,0 +1,3 @@
1
+ var o = ':host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-popover-placement);--_ds-floating-arrow-size:var(--dsc-popover-arrow-size);--dsc-popover-background:var(--ds-color-surface-default);--dsc-popover-border-width:var(--ds-border-width-default);--dsc-popover-border-style:solid;--dsc-popover-border-color:var(--ds-color-border-default);--dsc-popover-color:var(--ds-color-text-default);--dsc-popover-arrow-size:var(--ds-size-3);--dsc-popover-border-radius:var(--ds-border-radius-md);--dsc-popover-max-width:300px;--dsc-popover-padding:var(--ds-size-3) var(--ds-size-4);--dsc-popover-box-shadow:var(--ds-shadow-md);--dsc-popover-placement:top;background:var(--dsc-popover-background);border-color:var(--dsc-popover-border-color);border-radius:var(--dsc-popover-border-radius);border-style:var(--dsc-popover-border-style);border-width:var(--dsc-popover-border-width);box-shadow:var(--dsc-popover-box-shadow);box-sizing:border-box;color:var(--dsc-popover-color);max-width:var(--dsc-popover-max-width);padding:var(--dsc-popover-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host[data-variant=default]{--dsc-popover-background:var(--ds-color-surface-default)}:host[data-variant=tinted]{--dsc-popover-background:var(--ds-color-surface-tinted)}[data-popover=inline]{all:unset;cursor:pointer;font-size:inherit;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:.27em}[data-popover=inline]:not([hidden]){display:inline}[data-popover=inline]:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}[data-popover=inline]:focus-visible *{--_ds--focus: }';
2
+ export { o as default };
3
+ //# sourceMappingURL=popover-styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover-styles.js","sourceRoot":"","sources":["../../../src/sds-popover/assets/popover-styles.ts"],"names":[],"mappings":"AAAA,IAAI,CAAC,GAAC,mgFAAmgF,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC","sourcesContent":["var o=':host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:\"\";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-popover-placement);--_ds-floating-arrow-size:var(--dsc-popover-arrow-size);--dsc-popover-background:var(--ds-color-surface-default);--dsc-popover-border-width:var(--ds-border-width-default);--dsc-popover-border-style:solid;--dsc-popover-border-color:var(--ds-color-border-default);--dsc-popover-color:var(--ds-color-text-default);--dsc-popover-arrow-size:var(--ds-size-3);--dsc-popover-border-radius:var(--ds-border-radius-md);--dsc-popover-max-width:300px;--dsc-popover-padding:var(--ds-size-3) var(--ds-size-4);--dsc-popover-box-shadow:var(--ds-shadow-md);--dsc-popover-placement:top;background:var(--dsc-popover-background);border-color:var(--dsc-popover-border-color);border-radius:var(--dsc-popover-border-radius);border-style:var(--dsc-popover-border-style);border-width:var(--dsc-popover-border-width);box-shadow:var(--dsc-popover-box-shadow);box-sizing:border-box;color:var(--dsc-popover-color);max-width:var(--dsc-popover-max-width);padding:var(--dsc-popover-padding);&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host[data-variant=default]{--dsc-popover-background:var(--ds-color-surface-default)}:host[data-variant=tinted]{--dsc-popover-background:var(--ds-color-surface-tinted)}[data-popover=inline]{all:unset;cursor:pointer;font-size:inherit;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:.27em}[data-popover=inline]:not([hidden]){display:inline}[data-popover=inline]:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}[data-popover=inline]:focus-visible *{--_ds--focus: }';export{o as default};\n"]}
@@ -0,0 +1 @@
1
+ const t={passive:!0,capture:!0},e=(t,e,n)=>void 0===n?t.getAttribute(e)??null:(null===n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n),null),n=(t,...e)=>{let[n,...i]=e;for(let e of n.split(" "))t.addEventListener(e,...i);return()=>o(t,...e)},o=(t,...e)=>{let[n,...o]=e;for(let e of n.split(" "))t.removeEventListener(e,...o)};Date.now().toString(36),Math.random().toString(36).slice(2,5);const i=Math.min,r=Math.max,l=Math.round,s=Math.floor,a=t=>({x:t,y:t}),c={left:"right",right:"left",bottom:"top",top:"bottom"},f={start:"end",end:"start"};function u(t,e,n){return r(t,i(e,n))}function d(t,e){return"function"==typeof t?t(e):t}function h(t){return t.split("-")[0]}function m(t){return t.split("-")[1]}function p(t){return"x"===t?"y":"x"}function g(t){return"y"===t?"height":"width"}const y=new Set(["top","bottom"]);function w(t){return y.has(h(t))?"y":"x"}function x(t){return p(w(t))}function v(t){return t.replace(/start|end/g,t=>f[t])}const b=["left","right"],R=["right","left"],A=["top","bottom"],L=["bottom","top"];function T(t,e,n,o){const i=m(t);let r=function(t,e,n){switch(t){case"top":case"bottom":return n?e?R:b:e?b:R;case"left":case"right":return e?A:L;default:return[]}}(h(t),"start"===n,o);return i&&(r=r.map(t=>t+"-"+i),e&&(r=r.concat(r.map(v)))),r}function S(t){return t.replace(/left|right|bottom|top/g,t=>c[t])}function E(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}}function C(t,e,n){let{reference:o,floating:i}=t;const r=w(e),l=x(e),s=g(l),a=h(e),c="y"===r,f=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,d=o[s]/2-i[s]/2;let p;switch(a){case"top":p={x:f,y:o.y-i.height};break;case"bottom":p={x:f,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:u};break;case"left":p={x:o.x-i.width,y:u};break;default:p={x:o.x,y:o.y}}switch(m(e)){case"start":p[l]-=d*(n&&c?-1:1);break;case"end":p[l]+=d*(n&&c?-1:1)}return p}async function D(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:s,strategy:a}=t,{boundary:c="clippingAncestors",rootBoundary:f="viewport",elementContext:u="floating",altBoundary:h=!1,padding:m=0}=d(e,t),p=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(m),g=s[h?"floating"===u?"reference":"floating":u],y=E(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:c,rootBoundary:f,strategy:a})),w="floating"===u?{x:o,y:i,width:l.floating.width,height:l.floating.height}:l.reference,x=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),v=await(null==r.isElement?void 0:r.isElement(x))&&await(null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},b=E(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:w,offsetParent:x,strategy:a}):w);return{top:(y.top-b.top+p.top)/v.y,bottom:(b.bottom-y.bottom+p.bottom)/v.y,left:(y.left-b.left+p.left)/v.x,right:(b.right-y.right+p.right)/v.x}}const O=new Set(["left","top"]);function P(){return"undefined"!=typeof window}function H(t){return W(t)?(t.nodeName||"").toLowerCase():"#document"}function F(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function M(t){var e;return null==(e=(W(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function W(t){return!!P()&&(t instanceof Node||t instanceof F(t).Node)}function k(t){return!!P()&&(t instanceof Element||t instanceof F(t).Element)}function B(t){return!!P()&&(t instanceof HTMLElement||t instanceof F(t).HTMLElement)}function $(t){return!(!P()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof F(t).ShadowRoot)}const V=new Set(["inline","contents"]);function _(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=U(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!V.has(i)}const z=new Set(["table","td","th"]);function N(t){return z.has(H(t))}const q=[":popover-open",":modal"];function I(t){return q.some(e=>{try{return t.matches(e)}catch(t){return!1}})}const j=["transform","translate","scale","rotate","perspective"],X=["transform","translate","scale","rotate","perspective","filter"],Y=["paint","layout","strict","content"];function G(t){const e=J(),n=k(t)?U(t):t;return j.some(t=>!!n[t]&&"none"!==n[t])||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||X.some(t=>(n.willChange||"").includes(t))||Y.some(t=>(n.contain||"").includes(t))}function J(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const K=new Set(["html","body","#document"]);function Q(t){return K.has(H(t))}function U(t){return F(t).getComputedStyle(t)}function Z(t){return k(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function tt(t){if("html"===H(t))return t;const e=t.assignedSlot||t.parentNode||$(t)&&t.host||M(t);return $(e)?e.host:e}function et(t){const e=tt(t);return Q(e)?t.ownerDocument?t.ownerDocument.body:t.body:B(e)&&_(e)?e:et(e)}function nt(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=et(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=F(i);if(r){const t=ot(l);return e.concat(l,l.visualViewport||[],_(i)?i:[],t&&n?nt(t):[])}return e.concat(i,nt(i,[],n))}function ot(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function it(t){const e=U(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=B(t),r=i?t.offsetWidth:n,s=i?t.offsetHeight:o,a=l(n)!==r||l(o)!==s;return a&&(n=r,o=s),{width:n,height:o,$:a}}function rt(t){return k(t)?t:t.contextElement}function lt(t){const e=rt(t);if(!B(e))return a(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=it(e);let s=(r?l(n.width):n.width)/o,c=(r?l(n.height):n.height)/i;return s&&Number.isFinite(s)||(s=1),c&&Number.isFinite(c)||(c=1),{x:s,y:c}}const st=a(0);function at(t){const e=F(t);return J()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:st}function ct(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=rt(t);let l=a(1);e&&(o?k(o)&&(l=lt(o)):l=lt(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==F(t))&&e}(r,n,o)?at(r):a(0);let c=(i.left+s.x)/l.x,f=(i.top+s.y)/l.y,u=i.width/l.x,d=i.height/l.y;if(r){const t=F(r),e=o&&k(o)?F(o):o;let n=t,i=ot(n);for(;i&&o&&e!==n;){const t=lt(i),e=i.getBoundingClientRect(),o=U(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;c*=t.x,f*=t.y,u*=t.x,d*=t.y,c+=r,f+=l,n=F(i),i=ot(n)}}return E({width:u,height:d,x:c,y:f})}function ft(t,e){const n=Z(t).scrollLeft;return e?e.left+n:ct(M(t)).left+n}function ut(t,e){const n=t.getBoundingClientRect();return{x:n.left+e.scrollLeft-ft(t,n),y:n.top+e.scrollTop}}const dt=new Set(["absolute","fixed"]);function ht(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=F(t),o=M(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,a=0;if(i){r=i.width,l=i.height;const t=J();(!t||t&&"fixed"===e)&&(s=i.offsetLeft,a=i.offsetTop)}const c=ft(o);if(c<=0){const t=o.ownerDocument,e=t.body,n=getComputedStyle(e),i="CSS1Compat"===t.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,l=Math.abs(o.clientWidth-e.clientWidth-i);l<=25&&(r-=l)}else c<=25&&(r+=c);return{width:r,height:l,x:s,y:a}}(t,n);else if("document"===e)o=function(t){const e=M(t),n=Z(t),o=t.ownerDocument.body,i=r(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),l=r(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let s=-n.scrollLeft+ft(t);const a=-n.scrollTop;return"rtl"===U(o).direction&&(s+=r(e.clientWidth,o.clientWidth)-i),{width:i,height:l,x:s,y:a}}(M(t));else if(k(e))o=function(t,e){const n=ct(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=B(t)?lt(t):a(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=at(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return E(o)}function mt(t,e){const n=tt(t);return!(n===e||!k(n)||Q(n))&&("fixed"===U(n).position||mt(n,e))}function pt(t,e,n){const o=B(e),i=M(e),r="fixed"===n,l=ct(t,!0,r,e);let s={scrollLeft:0,scrollTop:0};const c=a(0);function f(){c.x=ft(i)}if(o||!o&&!r)if(("body"!==H(e)||_(i))&&(s=Z(e)),o){const t=ct(e,!0,r,e);c.x=t.x+e.clientLeft,c.y=t.y+e.clientTop}else i&&f();r&&!o&&i&&f();const u=!i||o||r?a(0):ut(i,s);return{x:l.left+s.scrollLeft-c.x-u.x,y:l.top+s.scrollTop-c.y-u.y,width:l.width,height:l.height}}function gt(t){return"static"===U(t).position}function yt(t,e){if(!B(t)||"fixed"===U(t).position)return null;if(e)return e(t);let n=t.offsetParent;return M(t)===n&&(n=n.ownerDocument.body),n}function wt(t,e){const n=F(t);if(I(t))return n;if(!B(t)){let e=tt(t);for(;e&&!Q(e);){if(k(e)&&!gt(e))return e;e=tt(e)}return n}let o=yt(t,e);for(;o&&N(o)&&gt(o);)o=yt(o,e);return o&&Q(o)&&gt(o)&&!G(o)?n:o||function(t){let e=tt(t);for(;B(e)&&!Q(e);){if(G(e))return e;if(I(e))return null;e=tt(e)}return null}(t)||n}const xt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=M(o),s=!!e&&I(e.floating);if(o===l||s&&r)return n;let c={scrollLeft:0,scrollTop:0},f=a(1);const u=a(0),d=B(o);if((d||!d&&!r)&&(("body"!==H(o)||_(l))&&(c=Z(o)),B(o))){const t=ct(o);f=lt(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}const h=!l||d||r?a(0):ut(l,c);return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-c.scrollLeft*f.x+u.x+h.x,y:n.y*f.y-c.scrollTop*f.y+u.y+h.y}},getDocumentElement:M,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:l}=t;const s=[..."clippingAncestors"===n?I(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=nt(t,[],!1).filter(t=>k(t)&&"body"!==H(t)),i=null;const r="fixed"===U(t).position;let l=r?tt(t):t;for(;k(l)&&!Q(l);){const e=U(l),n=G(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&dt.has(i.position)||_(l)&&!n&&mt(t,l))?o=o.filter(t=>t!==l):i=e,l=tt(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],a=s[0],c=s.reduce((t,n)=>{const o=ht(e,n,l);return t.top=r(o.top,t.top),t.right=i(o.right,t.right),t.bottom=i(o.bottom,t.bottom),t.left=r(o.left,t.left),t},ht(e,a,l));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:wt,getElementRects:async function(t){const e=this.getOffsetParent||wt,n=this.getDimensions,o=await n(t.floating);return{reference:pt(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=it(t);return{width:e,height:n}},getScale:lt,isElement:k,isRTL:function(t){return"rtl"===U(t).direction}};function vt(t,e){return t.x===e.x&&t.y===e.y&&t.width===e.width&&t.height===e.height}function bt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:l=!0,ancestorResize:a=!0,elementResize:c="function"==typeof ResizeObserver,layoutShift:f="function"==typeof IntersectionObserver,animationFrame:u=!1}=o,d=rt(t),h=l||a?[...d?nt(d):[],...nt(e)]:[];h.forEach(t=>{l&&t.addEventListener("scroll",n,{passive:!0}),a&&t.addEventListener("resize",n)});const m=d&&f?function(t,e){let n,o=null;const l=M(t);function a(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function c(f,u){void 0===f&&(f=!1),void 0===u&&(u=1),a();const d=t.getBoundingClientRect(),{left:h,top:m,width:p,height:g}=d;if(f||e(),!p||!g)return;const y={rootMargin:-s(m)+"px "+-s(l.clientWidth-(h+p))+"px "+-s(l.clientHeight-(m+g))+"px "+-s(h)+"px",threshold:r(0,i(1,u))||1};let w=!0;function x(e){const o=e[0].intersectionRatio;if(o!==u){if(!w)return c();o?c(!1,o):n=setTimeout(()=>{c(!1,1e-7)},1e3)}1!==o||vt(d,t.getBoundingClientRect())||c(),w=!1}try{o=new IntersectionObserver(x,{...y,root:l.ownerDocument})}catch(t){o=new IntersectionObserver(x,y)}o.observe(t)}(!0),a}(d,n):null;let p,g=-1,y=null;c&&(y=new ResizeObserver(t=>{let[o]=t;o&&o.target===d&&y&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame(()=>{var t;null==(t=y)||t.observe(e)})),n()}),d&&!u&&y.observe(d),y.observe(e));let w=u?ct(t):null;return u&&function e(){const o=ct(t);w&&!vt(w,o)&&n();w=o,p=requestAnimationFrame(e)}(),n(),()=>{var t;h.forEach(t=>{l&&t.removeEventListener("scroll",n),a&&t.removeEventListener("resize",n)}),null==m||m(),null==(t=y)||t.disconnect(),y=null,u&&cancelAnimationFrame(p)}}const Rt=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:r,placement:l,middlewareData:s}=e,a=await async function(t,e){const{placement:n,platform:o,elements:i}=t,r=await(null==o.isRTL?void 0:o.isRTL(i.floating)),l=h(n),s=m(n),a="y"===w(n),c=O.has(l)?-1:1,f=r&&a?-1:1,u=d(e,t);let{mainAxis:p,crossAxis:g,alignmentAxis:y}="number"==typeof u?{mainAxis:u,crossAxis:0,alignmentAxis:null}:{mainAxis:u.mainAxis||0,crossAxis:u.crossAxis||0,alignmentAxis:u.alignmentAxis};return s&&"number"==typeof y&&(g="end"===s?-1*y:y),a?{x:g*f,y:p*c}:{x:p*c,y:g*f}}(e,t);return l===(null==(n=s.offset)?void 0:n.placement)&&null!=(o=s.arrow)&&o.alignmentOffset?{}:{x:i+a.x,y:r+a.y,data:{...a,placement:l}}}}},At=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i,platform:r}=e,{mainAxis:l=!0,crossAxis:s=!1,limiter:a={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...c}=d(t,e),f={x:n,y:o},m=await r.detectOverflow(e,c),g=w(h(i)),y=p(g);let x=f[y],v=f[g];if(l){const t="y"===y?"bottom":"right";x=u(x+m["y"===y?"top":"left"],x,x-m[t])}if(s){const t="y"===g?"bottom":"right";v=u(v+m["y"===g?"top":"left"],v,v-m[t])}const b=a.fn({...e,[y]:x,[g]:v});return{...b,data:{x:b.x-n,y:b.y-o,enabled:{[y]:l,[g]:s}}}}}},Lt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:s,platform:a,elements:c}=e,{mainAxis:f=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:y="bestFit",fallbackAxisSideDirection:b="none",flipAlignment:R=!0,...A}=d(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const L=h(i),E=w(s),C=h(s)===s,D=await(null==a.isRTL?void 0:a.isRTL(c.floating)),O=p||(C||!R?[S(s)]:function(t){const e=S(t);return[v(t),e,v(e)]}(s)),P="none"!==b;!p&&P&&O.push(...T(s,R,b,D));const H=[s,...O],F=await a.detectOverflow(e,A),M=[];let W=(null==(o=r.flip)?void 0:o.overflows)||[];if(f&&M.push(F[L]),u){const t=function(t,e,n){void 0===n&&(n=!1);const o=m(t),i=x(t),r=g(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=S(l)),[l,S(l)]}(i,l,D);M.push(F[t[0]],F[t[1]])}if(W=[...W,{placement:i,overflows:M}],!M.every(t=>t<=0)){var k,B;const t=((null==(k=r.flip)?void 0:k.index)||0)+1,e=H[t];if(e){if(!("alignment"===u&&E!==w(e))||W.every(t=>w(t.placement)!==E||t.overflows[0]>0))return{data:{index:t,overflows:W},reset:{placement:e}}}let n=null==(B=W.filter(t=>t.overflows[0]<=0).sort((t,e)=>t.overflows[1]-e.overflows[1])[0])?void 0:B.placement;if(!n)switch(y){case"bestFit":{var $;const t=null==($=W.filter(t=>{if(P){const e=w(t.placement);return e===E||"y"===e}return!0}).map(t=>[t.placement,t.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0)]).sort((t,e)=>t[1]-e[1])[0])?void 0:$[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}},Tt=function(t){return void 0===t&&(t={}),{name:"size",options:t,async fn(e){var n,o;const{placement:l,rects:s,platform:a,elements:c}=e,{apply:f=()=>{},...u}=d(t,e),p=await a.detectOverflow(e,u),g=h(l),y=m(l),x="y"===w(l),{width:v,height:b}=s.floating;let R,A;"top"===g||"bottom"===g?(R=g,A=y===(await(null==a.isRTL?void 0:a.isRTL(c.floating))?"start":"end")?"left":"right"):(A=g,R="end"===y?"top":"bottom");const L=b-p.top-p.bottom,T=v-p.left-p.right,S=i(b-p[R],L),E=i(v-p[A],T),C=!e.middlewareData.shift;let D=S,O=E;if(null!=(n=e.middlewareData.shift)&&n.enabled.x&&(O=T),null!=(o=e.middlewareData.shift)&&o.enabled.y&&(D=L),C&&!y){const t=r(p.left,0),e=r(p.right,0),n=r(p.top,0),o=r(p.bottom,0);x?O=v-2*(0!==t||0!==e?t+e:r(p.left,p.right)):D=b-2*(0!==n||0!==o?n+o:r(p.top,p.bottom))}await f({...e,availableWidth:O,availableHeight:D});const P=await a.getDimensions(c.floating);return v!==P.width||b!==P.height?{reset:{rects:!0}}:{}}}},St=function(t){return void 0===t&&(t={}),{options:t,fn(e){const{x:n,y:o,placement:i,rects:r,middlewareData:l}=e,{offset:s=0,mainAxis:a=!0,crossAxis:c=!0}=d(t,e),f={x:n,y:o},u=w(i),m=p(u);let g=f[m],y=f[u];const x=d(s,e),v="number"==typeof x?{mainAxis:x,crossAxis:0}:{mainAxis:0,crossAxis:0,...x};if(a){const t="y"===m?"height":"width",e=r.reference[m]-r.floating[t]+v.mainAxis,n=r.reference[m]+r.reference[t]-v.mainAxis;g<e?g=e:g>n&&(g=n)}if(c){var b,R;const t="y"===m?"width":"height",e=O.has(h(i)),n=r.reference[u]-r.floating[t]+(e&&(null==(b=l.offset)?void 0:b[u])||0)+(e?0:v.crossAxis),o=r.reference[u]+r.reference[t]+(e?0:(null==(R=l.offset)?void 0:R[u])||0)-(e?v.crossAxis:0);y<n?y=n:y>o&&(y=o)}return{[m]:g,[u]:y}}}},Et=(t,e,n)=>{const o=new Map,i={platform:xt,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,s=r.filter(Boolean),a=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=C(c,o,a),d=o,h={},m=0;for(let n=0;n<s.length;n++){var p;const{name:r,fn:g}=s[n],{x:y,y:w,data:x,reset:v}=await g({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:h,rects:c,platform:{...l,detectOverflow:null!=(p=l.detectOverflow)?p:D},elements:{reference:t,floating:e}});f=null!=y?y:f,u=null!=w?w:u,h={...h,[r]:{...h[r],...x}},v&&m<=50&&(m++,"object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(c=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:f,y:u}=C(c,d,a))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:h}})(t,e,{...i,platform:r})},Ct="data-placement",Dt="data-autoplacement",Ot=new Map;function Pt(t){let{newState:n,oldState:o,target:i,source:r=t.detail}=t,l=i instanceof HTMLElement&&Mt(i,"--_ds-floating");if(!l)return;if("closed"===n)return Ot.get(i)?.();if(!r){let t=i.getRootNode(),e=`[popovertarget="${i.id}"],[commandfor="${i.id}"]`;r=i.id&&t?.querySelector?.(e)||void 0}if(!r||r===i||o&&o===n)return;let s=Mt(i,"--_ds-floating-overscroll"),a=e(i,Ct)||e(r,Ct)||l,c=e(i,Dt)||e(r,Dt),f=parseFloat(getComputedStyle(i,"::before").height)||0,u=a.match(/left|right/gi)?"Height":"Width",d=r[`offset${u}`]/2+f;if("none"===a)return;let h={strategy:"absolute",placement:a,middleware:[Rt(f||0),At({padding:10,limiter:St({offset:{mainAxis:d}})}),Wt(),..."false"===c?[]:[Lt({padding:10,crossAxis:!1})],...s?[Tt({apply({availableHeight:t}){"fit"===s&&(i.style.width=`${r.clientWidth}px`),i.style.maxHeight=`${Math.max(50,t-20)}px`}})]:[]]},m=bt(r,i,async()=>{if(!r?.isConnected)return Ot.get(i)?.();let{x:t,y:e}=await Et(r,i,h);i.style.translate=`${t}px ${e}px`});Ot.set(i,()=>Ot.delete(i)&&m())}let Ht;const Ft=({type:t})=>{if("mousedown"===t&&(Ht=!1),"scroll"===t&&!1===Ht&&(Ht=!0),"mouseup"===t&&Ht)for(let[t]of Ot)t.showPopover()};((t,e)=>{typeof window<"u"&&typeof document<"u"&&(window._dsHotReloadCleanup||(window._dsHotReloadCleanup=new Map),window._dsHotReloadCleanup?.get(t)?.map(t=>t()),window._dsHotReloadCleanup?.set(t,e()))})("popover",()=>[n(document,"mousedown scroll mouseup",Ft,!0),n(document,"toggle ds-toggle-source",Pt,t)]);const Mt=(t,e)=>getComputedStyle(t).getPropertyValue(e).trim(),Wt=()=>({name:"arrowPseudo",fn(t){let n=t.elements.floating,o=t.rects.reference,i=`${Math.round(o.width/2+o.x-t.x)}px`,r=`${Math.round(o.height/2+o.y-t.y)}px`;return n.style.setProperty("--_ds-floating-arrow-x",i),n.style.setProperty("--_ds-floating-arrow-y",r),e(n,"data-floating",t.placement),t}});
@@ -0,0 +1,25 @@
1
+ import { LitElement } from 'lit';
2
+ import './assets/positioning.js';
3
+ type SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';
4
+ type SDSPopoverAutoPlacement = 'true' | 'false';
5
+ type SDSPopoverOverscroll = 'contain';
6
+ export interface SDSPopoverProps {
7
+ placement?: SDSPopoverPlacement;
8
+ autoPlacement?: SDSPopoverAutoPlacement;
9
+ overscroll?: SDSPopoverOverscroll;
10
+ }
11
+ export declare class SDSPopover extends LitElement {
12
+ static styles: import("lit").CSSResult[];
13
+ placement: SDSPopoverProps['placement'];
14
+ autoPlacement: SDSPopoverProps['autoPlacement'];
15
+ overscroll: SDSPopoverProps['overscroll'];
16
+ connectedCallback(): void;
17
+ render(): import("lit-html").TemplateResult<1>;
18
+ }
19
+ declare global {
20
+ interface HTMLElementTagNameMap {
21
+ 'sds-popover': SDSPopover;
22
+ }
23
+ }
24
+ export {};
25
+ //# sourceMappingURL=sds-popover.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-popover.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,yBAAyB,CAAC;AAEjC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AACxE,KAAK,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,KAAK,oBAAoB,GAAG,SAAS,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC/B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,UAAU,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,eAAe,CAAC,WAAW,CAAC,CAAS;IAGhD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAa;IAG5D,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAa;IAE7C,iBAAiB,IAAI,IAAI;IASzB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
@@ -0,0 +1,43 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html } from 'lit';
8
+ import { property } from 'lit/decorators.js';
9
+ import { guardedCustomElement } from '../utils/guarded-custom-element';
10
+ import { styles } from './sds-popover.styles';
11
+ import './assets/positioning.js';
12
+ let SDSPopover = class SDSPopover extends LitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ this.placement = 'top';
16
+ this.autoPlacement = undefined;
17
+ this.overscroll = undefined;
18
+ }
19
+ connectedCallback() {
20
+ super.connectedCallback();
21
+ if (!this.hasAttribute('popover')) {
22
+ this.setAttribute('popover', 'auto');
23
+ }
24
+ }
25
+ render() {
26
+ return html `<slot></slot>`;
27
+ }
28
+ };
29
+ SDSPopover.styles = [styles];
30
+ __decorate([
31
+ property({ type: String, attribute: 'data-placement', reflect: true })
32
+ ], SDSPopover.prototype, "placement", void 0);
33
+ __decorate([
34
+ property({ type: String, attribute: 'data-autoplacement', reflect: true })
35
+ ], SDSPopover.prototype, "autoPlacement", void 0);
36
+ __decorate([
37
+ property({ type: String, attribute: 'data-overscroll', reflect: true })
38
+ ], SDSPopover.prototype, "overscroll", void 0);
39
+ SDSPopover = __decorate([
40
+ guardedCustomElement('sds-popover')
41
+ ], SDSPopover);
42
+ export { SDSPopover };
43
+ //# sourceMappingURL=sds-popover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-popover.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AAa1B,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,cAAS,GAAiC,KAAK,CAAC;QAGhD,kBAAa,GAAqC,SAAS,CAAC;QAG5D,eAAU,GAAkC,SAAS,CAAC;IAcvD,CAAC;IAZS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACtC,CAAC;IAEF,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC5B,CAAC;;AAtBe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACvB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACf;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAClB;AAV1C,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAwBtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-popover.styles';\nimport './assets/positioning.js';\n\ntype SDSPopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'none';\ntype SDSPopoverAutoPlacement = 'true' | 'false';\ntype SDSPopoverOverscroll = 'contain';\n\nexport interface SDSPopoverProps {\n\tplacement?: SDSPopoverPlacement;\n\tautoPlacement?: SDSPopoverAutoPlacement;\n\toverscroll?: SDSPopoverOverscroll;\n}\n\n@guardedCustomElement('sds-popover')\nexport class SDSPopover extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, attribute: 'data-placement', reflect: true })\n\tplacement: SDSPopoverProps['placement'] = 'top';\n\n\t@property({ type: String, attribute: 'data-autoplacement', reflect: true })\n\tautoPlacement: SDSPopoverProps['autoPlacement'] = undefined;\n\n\t@property({ type: String, attribute: 'data-overscroll', reflect: true })\n\toverscroll: SDSPopoverProps['overscroll'] = undefined;\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.hasAttribute('popover')) {\n\t\t\tthis.setAttribute('popover', 'auto');\n\t\t}\n\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-popover': SDSPopover;\n\t}\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=sds-popover.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-popover.styles.d.ts","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yBAgDlB,CAAC"}
@@ -0,0 +1,52 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import stylesheet from './assets/popover-styles';
3
+ export const styles = css `
4
+ ${unsafeCSS(stylesheet)}
5
+
6
+ :host {
7
+ --dsc-popover-background: var(--sds-popover-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
8
+ --dsc-popover-border-width: var(--sds-popover-border-width, var(--sds-border-sm));
9
+ --dsc-popover-border-style: var(--sds-popover-border-style, solid);
10
+ --dsc-popover-border-color: var(--sds-popover-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));
11
+ --dsc-popover-color: var(--sds-popover-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
12
+ --dsc-popover-arrow-size: var(--sds-popover-arrow-size, 12px);
13
+ --dsc-popover-border-radius: var(--sds-popover-border-radius, var(--sds-radius-sm));
14
+ --dsc-popover-max-width: var(--sds-popover-max-width, 300px);
15
+ --dsc-popover-padding: var(--sds-popover-padding, var(--sds-spacing-2xs) var(--sds-spacing-xs));
16
+ --dsc-popover-box-shadow: var(--sds-popover-shadow, 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12));
17
+ --dsc-popover-placement: top;
18
+ }
19
+
20
+ /* Note: Designsystem's popover.css uses CSS that does not work in the shadow DOM.
21
+ These rules ensures that arrow positioning works for our popover.
22
+ Do not remove unless the CSS selectors from Designsystem works out of the box. */
23
+ :host([data-floating|='top'])::before {
24
+ rotate: 45deg;
25
+ top: 100%;
26
+ }
27
+ :host([data-floating|='right'])::before {
28
+ left: 0;
29
+ rotate: 135deg;
30
+ }
31
+ :host([data-floating|='bottom'])::before {
32
+ rotate: -135deg;
33
+ top: 0;
34
+ }
35
+ :host([data-floating|='left'])::before {
36
+ left: 100%;
37
+ rotate: -45deg;
38
+ }
39
+
40
+ @keyframes ds-fade-in {
41
+ from {
42
+ opacity: 0;
43
+ }
44
+ }
45
+
46
+ @media (prefers-reduced-motion: reduce) {
47
+ :host {
48
+ animation: none;
49
+ }
50
+ }
51
+ `;
52
+ //# sourceMappingURL=sds-popover.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-popover.styles.js","sourceRoot":"","sources":["../../src/sds-popover/sds-popover.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;GACtB,SAAS,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CvB,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport stylesheet from './assets/popover-styles';\n\nexport const styles = css`\n\t${unsafeCSS(stylesheet)}\n\n\t:host {\n\t\t--dsc-popover-background: var(--sds-popover-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--dsc-popover-border-width: var(--sds-popover-border-width, var(--sds-border-sm));\n\t\t--dsc-popover-border-style: var(--sds-popover-border-style, solid);\n\t\t--dsc-popover-border-color: var(--sds-popover-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));\n\t\t--dsc-popover-color: var(--sds-popover-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--dsc-popover-arrow-size: var(--sds-popover-arrow-size, 12px);\n\t\t--dsc-popover-border-radius: var(--sds-popover-border-radius, var(--sds-radius-sm));\n\t\t--dsc-popover-max-width: var(--sds-popover-max-width, 300px);\n\t\t--dsc-popover-padding: var(--sds-popover-padding, var(--sds-spacing-2xs) var(--sds-spacing-xs));\n\t\t--dsc-popover-box-shadow: var(--sds-popover-shadow, 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12));\n\t\t--dsc-popover-placement: top;\n\t}\n\n\t/* Note: Designsystem's popover.css uses CSS that does not work in the shadow DOM.\n\t These rules ensures that arrow positioning works for our popover.\n\t Do not remove unless the CSS selectors from Designsystem works out of the box. */\n\t:host([data-floating|='top'])::before {\n\t\trotate: 45deg;\n\t\ttop: 100%;\n\t}\n\t:host([data-floating|='right'])::before {\n\t\tleft: 0;\n\t\trotate: 135deg;\n\t}\n\t:host([data-floating|='bottom'])::before {\n\t\trotate: -135deg;\n\t\ttop: 0;\n\t}\n\t:host([data-floating|='left'])::before {\n\t\tleft: 100%;\n\t\trotate: -45deg;\n\t}\n\n\t@keyframes ds-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n`;\n"]}
@@ -0,0 +1,20 @@
1
+ import { LitElement } from 'lit';
2
+ import { SDS_HEADING_LEVELS } from '../types';
3
+ type HeadingLevels = Exclude<SDS_HEADING_LEVELS, 'h1'>;
4
+ export interface SDSProcessProps {
5
+ headingLevel?: HeadingLevels;
6
+ }
7
+ export declare class SDSProcess extends LitElement {
8
+ static styles: import("lit").CSSResult[];
9
+ readonly internals: ElementInternals;
10
+ headingLevel?: SDSProcessProps['headingLevel'];
11
+ constructor();
12
+ render(): import("lit-html").TemplateResult<1>;
13
+ }
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'sds-process': SDSProcess;
17
+ }
18
+ }
19
+ export {};
20
+ //# sourceMappingURL=sds-process.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process.d.ts","sourceRoot":"","sources":["../../src/sds-process/sds-process.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,KAAK,aAAa,GAAG,OAAO,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;AAEvD,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE2B,YAAY,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;;IAQ7G,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
@@ -0,0 +1,29 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html } from 'lit';
8
+ import { guardedCustomElement } from '../utils/guarded-custom-element';
9
+ import { styles } from './sds-process.styles';
10
+ import { property } from 'lit/decorators.js';
11
+ let SDSProcess = class SDSProcess extends LitElement {
12
+ constructor() {
13
+ super();
14
+ this.internals = this.attachInternals();
15
+ this.internals.role = 'list';
16
+ }
17
+ render() {
18
+ return html `<slot></slot>`;
19
+ }
20
+ };
21
+ SDSProcess.styles = [styles];
22
+ __decorate([
23
+ property({ type: String, reflect: true, attribute: 'heading-level' })
24
+ ], SDSProcess.prototype, "headingLevel", void 0);
25
+ SDSProcess = __decorate([
26
+ guardedCustomElement('sds-process')
27
+ ], SDSProcess);
28
+ export { SDSProcess };
29
+ //# sourceMappingURL=sds-process.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process.js","sourceRoot":"","sources":["../../src/sds-process/sds-process.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAUtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAMzC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;IAC9B,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,eAAe,CAAC;IAC5B,CAAC;;AAbe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGqC;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;gDAAgD;AAJ1G,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CAetB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-process.styles';\nimport { property } from 'lit/decorators.js';\nimport { SDS_HEADING_LEVELS } from '../types';\n\ntype HeadingLevels = Exclude<SDS_HEADING_LEVELS, 'h1'>;\n\nexport interface SDSProcessProps {\n\t\theadingLevel?: HeadingLevels;\n}\n\n@guardedCustomElement('sds-process')\nexport class SDSProcess extends LitElement {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true, attribute: 'heading-level' }) headingLevel?: SDSProcessProps['headingLevel'];\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.internals.role = 'list';\n\t}\n\n\toverride render() {\n\t\treturn html`<slot></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-process': SDSProcess;\n\t}\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=sds-process.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process.styles.d.ts","sourceRoot":"","sources":["../../src/sds-process/sds-process.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAKlB,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { css } from 'lit';
2
+ export const styles = css `
3
+ :host {
4
+ display: flex;
5
+ flex-direction: column;
6
+ }
7
+ `;
8
+ //# sourceMappingURL=sds-process.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process.styles.js","sourceRoot":"","sources":["../../src/sds-process/sds-process.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n`;\n"]}
@@ -0,0 +1,29 @@
1
+ import { LitElement } from 'lit';
2
+ import { SDS_HEADING_LEVELS } from '../types';
3
+ type HeadingLevels = Exclude<SDS_HEADING_LEVELS, 'h1'>;
4
+ export interface SDSProcessStepProps {
5
+ heading?: string;
6
+ timestamp?: string;
7
+ }
8
+ export declare class SDSProcessStep extends LitElement {
9
+ static styles: import("lit").CSSResult[];
10
+ readonly internals: ElementInternals;
11
+ heading?: SDSProcessStepProps['heading'];
12
+ timestamp?: SDSProcessStepProps['timestamp'];
13
+ private markerSlot;
14
+ private step;
15
+ private _headingLevel;
16
+ constructor();
17
+ connectedCallback(): void;
18
+ firstUpdated(): void;
19
+ private readonly _handleMarkerSlotChange;
20
+ get safeHeadingLevel(): HeadingLevels;
21
+ render(): import("lit-html").TemplateResult;
22
+ }
23
+ declare global {
24
+ interface HTMLElementTagNameMap {
25
+ 'sds-process-step': SDSProcessStep;
26
+ }
27
+ }
28
+ export {};
29
+ //# sourceMappingURL=sds-process-step.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process-step.d.ts","sourceRoot":"","sources":["../../src/sds-process-step/sds-process-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAG9C,KAAK,aAAa,GAAG,OAAO,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAED,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC1D,OAAO,CAAC,UAAU,CAAmB;IACvC,OAAO,CAAC,IAAI,CAAkB;IAE1D,OAAO,CAAC,aAAa,CAAuB;;IAQnC,iBAAiB;IAMjB,YAAY;IAIrB,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAItC;IAEF,IAAI,gBAAgB,IAAI,aAAa,CAKpC;IAEQ,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,cAAc,CAAC;KACnC;CACD"}
@@ -0,0 +1,75 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, nothing } from 'lit';
8
+ import { html, html as staticHtml, unsafeStatic } from 'lit/static-html.js';
9
+ import { property, query } from 'lit/decorators.js';
10
+ import { guardedCustomElement } from '../utils/guarded-custom-element';
11
+ import { styles } from './sds-process-step.styles';
12
+ let SDSProcessStep = class SDSProcessStep extends LitElement {
13
+ constructor() {
14
+ super();
15
+ this._headingLevel = 'h2';
16
+ this._handleMarkerSlotChange = () => {
17
+ if (!this.markerSlot || !this.step)
18
+ return;
19
+ const isEmpty = this.markerSlot.assignedNodes({ flatten: true }).length === 0;
20
+ this.step.classList.toggle('sds-process-step--sub-step', isEmpty);
21
+ };
22
+ this.internals = this.attachInternals();
23
+ this.internals.role = 'listitem';
24
+ }
25
+ connectedCallback() {
26
+ super.connectedCallback();
27
+ const parent = this.closest('sds-process');
28
+ if (parent && parent.headingLevel)
29
+ this._headingLevel = parent.headingLevel;
30
+ }
31
+ firstUpdated() {
32
+ this._handleMarkerSlotChange();
33
+ }
34
+ get safeHeadingLevel() {
35
+ const allowed = ['h2', 'h3', 'h4', 'h5', 'h6'];
36
+ return allowed.includes(this._headingLevel)
37
+ ? this._headingLevel
38
+ : 'h2';
39
+ }
40
+ render() {
41
+ return html `
42
+ <div class="sds-process-step">
43
+ <div class="sds-process-step__item">
44
+ <div class="sds-process-step__marker" aria-hidden="true">
45
+ <slot name="marker" @slotchange=${this._handleMarkerSlotChange}></slot>
46
+ </div>
47
+ <div class="sds-process-step__content">
48
+ ${this.heading ? staticHtml `<${unsafeStatic(this.safeHeadingLevel)} class="sds-process-step__heading">${this.heading}</${unsafeStatic(this.safeHeadingLevel)}>` : nothing}
49
+ ${this.timestamp ? html `<div class="sds-process-step__timestamp">${this.timestamp}</div>` : nothing}
50
+ <div class="sds-process-step__slot-content"><slot></slot></div>
51
+ </div>
52
+ </div>
53
+ <span class="sds-process-step__line"></span>
54
+ </div>
55
+ `;
56
+ }
57
+ };
58
+ SDSProcessStep.styles = [styles];
59
+ __decorate([
60
+ property({ type: String, reflect: true })
61
+ ], SDSProcessStep.prototype, "heading", void 0);
62
+ __decorate([
63
+ property({ type: String, reflect: true })
64
+ ], SDSProcessStep.prototype, "timestamp", void 0);
65
+ __decorate([
66
+ query('slot[name="marker"]')
67
+ ], SDSProcessStep.prototype, "markerSlot", void 0);
68
+ __decorate([
69
+ query('.sds-process-step')
70
+ ], SDSProcessStep.prototype, "step", void 0);
71
+ SDSProcessStep = __decorate([
72
+ guardedCustomElement('sds-process-step')
73
+ ], SDSProcessStep);
74
+ export { SDSProcessStep };
75
+ //# sourceMappingURL=sds-process-step.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process-step.js","sourceRoot":"","sources":["../../src/sds-process-step/sds-process-step.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,IAAI,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAY5C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAW7C;QACC,KAAK,EAAE,CAAC;QAHD,kBAAa,GAAkB,IAAI,CAAC;QAkB3B,4BAAuB,GAAG,GAAG,EAAE;YAC/C,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,OAAO;YAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;YAC9E,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;QACnE,CAAC,CAAC;QAlBD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC;IAClC,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,MAAM,MAAM,GAAsB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC9D,IAAI,MAAM,IAAI,MAAM,CAAC,YAAY;YAAE,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC;IAC7E,CAAC;IAEQ,YAAY;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAChC,CAAC;IAQD,IAAI,gBAAgB;QACnB,MAAM,OAAO,GAAoB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAChE,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,aAA8B,CAAC;YAC3D,CAAC,CAAC,IAAI,CAAC,aAA8B;YACrC,CAAC,CAAC,IAAI,CAAC;IACT,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA;;;;wCAI2B,IAAI,CAAC,uBAAuB;;;QAG5D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAA,IAAI,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,sCAAsC,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;QACvK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,OAAO;;;;;;GAMtG,CAAC;IACH,CAAC;;AAvDe,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAA0C;AACzC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAA8C;AAClD;IAArC,KAAK,CAAC,qBAAqB,CAAC;kDAAsC;AAC/B;IAAnC,KAAK,CAAC,mBAAmB,CAAC;4CAA+B;AAP9C,cAAc;IAD1B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,cAAc,CAyD1B","sourcesContent":["import { LitElement, nothing } from 'lit';\nimport { html, html as staticHtml, unsafeStatic } from 'lit/static-html.js';\nimport { property, query } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-process-step.styles';\nimport { SDS_HEADING_LEVELS } from '../types';\nimport { SDSProcess } from '../sds-process/sds-process';\n\ntype HeadingLevels = Exclude<SDS_HEADING_LEVELS, 'h1'>;\n\nexport interface SDSProcessStepProps {\n\theading?: string;\n\ttimestamp?: string;\n}\n\n@guardedCustomElement('sds-process-step')\nexport class SDSProcessStep extends LitElement {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true }) heading?: SDSProcessStepProps['heading'];\n\t@property({ type: String, reflect: true }) timestamp?: SDSProcessStepProps['timestamp'];\n\t@query('slot[name=\"marker\"]') private markerSlot!: HTMLSlotElement;\n\t@query('.sds-process-step') private step!: HTMLDivElement;\n\n\tprivate _headingLevel: HeadingLevels = 'h2';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.internals.role = 'listitem';\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tconst parent: SDSProcess | null = this.closest('sds-process');\n\t\tif (parent && parent.headingLevel) this._headingLevel = parent.headingLevel;\n\t}\n\n\toverride firstUpdated() {\n\t\tthis._handleMarkerSlotChange();\n\t}\n\n\tprivate readonly _handleMarkerSlotChange = () => {\n\t\tif (!this.markerSlot || !this.step) return;\n\t\tconst isEmpty = this.markerSlot.assignedNodes({ flatten: true }).length === 0;\n\t\tthis.step.classList.toggle('sds-process-step--sub-step', isEmpty);\n\t};\n\n\tget safeHeadingLevel(): HeadingLevels {\n\t\tconst allowed: HeadingLevels[] = ['h2', 'h3', 'h4', 'h5', 'h6'];\n\t\treturn allowed.includes(this._headingLevel as HeadingLevels)\n\t\t\t? this._headingLevel as HeadingLevels\n\t\t\t: 'h2';\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"sds-process-step\">\n\t\t\t\t<div class=\"sds-process-step__item\">\n\t\t\t\t\t<div class=\"sds-process-step__marker\" aria-hidden=\"true\">\n\t\t\t\t\t\t<slot name=\"marker\" @slotchange=${this._handleMarkerSlotChange}></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"sds-process-step__content\">\n\t\t\t\t\t\t${this.heading ? staticHtml`<${unsafeStatic(this.safeHeadingLevel)} class=\"sds-process-step__heading\">${this.heading}</${unsafeStatic(this.safeHeadingLevel)}>` : nothing}\n\t\t\t\t\t\t${this.timestamp ? html`<div class=\"sds-process-step__timestamp\">${this.timestamp}</div>` : nothing}\n\t\t\t\t\t\t<div class=\"sds-process-step__slot-content\"><slot></slot></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"sds-process-step__line\"></span>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-process-step': SDSProcessStep;\n\t}\n}\n"]}
@@ -0,0 +1,2 @@
1
+ export declare const styles: import("lit").CSSResult;
2
+ //# sourceMappingURL=sds-process-step.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sds-process-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-process-step/sds-process-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4IlB,CAAC"}