@designsystem-se/af 39.1.0-beta.2 → 39.1.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (185) hide show
  1. package/components/digi-bar-chart.js +1 -1
  2. package/components/digi-button.js +1 -1
  3. package/components/digi-calendar-week-view.js +2 -2
  4. package/components/digi-chart-line.js +1 -1
  5. package/components/digi-code-block.js +1 -1
  6. package/components/digi-code-example.js +2 -2
  7. package/components/digi-context-menu.js +1 -1
  8. package/components/digi-dialog.js +1 -1
  9. package/components/digi-form-category-filter.js +1 -1
  10. package/components/digi-form-error-list.js +2 -2
  11. package/components/digi-form-file-upload.js +1 -1
  12. package/components/digi-form-filter.js +1 -1
  13. package/components/digi-form-input-search.js +2 -2
  14. package/components/digi-form-select-filter.js +1 -1
  15. package/components/digi-header-navigation.js +1 -1
  16. package/components/digi-header.js +2 -2
  17. package/components/digi-navigation-pagination.js +1 -1
  18. package/components/digi-navigation-sidebar-button.js +1 -1
  19. package/components/digi-navigation-sidebar.js +1 -1
  20. package/components/digi-notification-alert.js +1 -1
  21. package/components/digi-tag.js +1 -1
  22. package/components/digi-tools-feedback-banner.js +7 -2
  23. package/components/digi-tools-feedback.js +1 -1
  24. package/components/p-3IdGnhr5.js +172 -0
  25. package/components/{p-DDZ0nalw.js → p-B-hL6z4l.js} +1 -1
  26. package/components/{p-Dq9EWvk8.js → p-BOM-CTrq.js} +1 -1
  27. package/components/{p-C32dTT4K.js → p-BZkK1uIs.js} +1 -1
  28. package/dist/cjs/button-type.enum-2UH0KkO-.js +8 -0
  29. package/dist/cjs/{button-variation.enum-DkUalo9f.js → button-variation.enum-ngMqFLdW.js} +6 -0
  30. package/dist/cjs/{code-example-variation.enum-BCENTUV2.js → code-example-variation.enum-Cq-BioXW.js} +0 -6
  31. package/dist/cjs/digi-arbetsformedlingen.cjs.js +1 -1
  32. package/dist/cjs/{digi-calendar-week-view.cjs.entry.js → digi-button_5.cjs.entry.js} +260 -72
  33. package/dist/cjs/digi-calendar-datepicker.cjs.entry.js +10 -6
  34. package/dist/cjs/digi-code-block_3.cjs.entry.js +10 -6
  35. package/dist/cjs/digi-code-example.cjs.entry.js +4 -4
  36. package/dist/cjs/digi-dialog.cjs.entry.js +10 -6
  37. package/dist/cjs/digi-footer.cjs.entry.js +9 -5
  38. package/dist/cjs/digi-form-error-list.cjs.entry.js +9 -5
  39. package/dist/cjs/digi-form-file-upload.cjs.entry.js +11 -10
  40. package/dist/cjs/digi-form-input-search.cjs.entry.js +9 -7
  41. package/dist/cjs/digi-form-input.cjs.entry.js +205 -0
  42. package/dist/cjs/digi-form-label_3.cjs.entry.js +147 -0
  43. package/dist/cjs/digi-form-receipt.cjs.entry.js +9 -5
  44. package/dist/cjs/digi-form-select-filter.cjs.entry.js +649 -0
  45. package/dist/cjs/digi-header-navigation.cjs.entry.js +9 -5
  46. package/dist/cjs/digi-header.cjs.entry.js +9 -5
  47. package/dist/cjs/digi-icon-check.cjs.entry.js +28 -0
  48. package/dist/cjs/digi-icon-chevron-down.cjs.entry.js +28 -0
  49. package/dist/cjs/digi-icon-validation-error_2.cjs.entry.js +51 -0
  50. package/dist/cjs/digi-navigation-pagination.cjs.entry.js +9 -5
  51. package/dist/cjs/digi-notification-alert.cjs.entry.js +9 -5
  52. package/dist/cjs/digi-notification-error-page.cjs.entry.js +9 -5
  53. package/dist/cjs/digi-title-logo.cjs.entry.js +9 -5
  54. package/dist/cjs/digi-tools-feedback-banner.cjs.entry.js +7 -2
  55. package/dist/cjs/digi-tools-feedback.cjs.entry.js +11 -7
  56. package/dist/cjs/digi-util-keydown-handler.cjs.entry.js +81 -0
  57. package/dist/cjs/{form-validation-message-variation.enum-DgkifAnP.js → form-file-upload-variation.enum-xcEOoggr.js} +0 -7
  58. package/dist/cjs/form-input-search-variation.enum-VVfvlVeM.js +8 -0
  59. package/dist/cjs/{form-input-type.enum-B2CsNSBg.js → form-input-type.enum-DvF_MTHK.js} +0 -14
  60. package/dist/cjs/form-input-variation.enum-kpoXNUuI.js +29 -0
  61. package/dist/cjs/form-validation-message-variation.enum-BA5nmCiw.js +8 -0
  62. package/dist/cjs/index-tbq85ezH.js +26 -10
  63. package/dist/cjs/index.cjs.js +52 -48
  64. package/dist/cjs/loader.cjs.js +1 -1
  65. package/dist/cjs/{typography-variation.enum-4snUBTF7.js → typography-variation.enum-BDSt7CVI.js} +0 -28
  66. package/dist/collection/components/_button/button/button.css +23 -0
  67. package/dist/collection/components/_calendar/week-view/calendar-week-view.css +36 -47
  68. package/dist/collection/components/_form/form-file-upload/form-file-upload.css +11 -15
  69. package/dist/collection/components/_form/form-input-search/form-input-search.css +0 -4
  70. package/dist/collection/components/_tools/tools-feedback-banner/tools-feedback-banner.js +7 -2
  71. package/dist/collection/design-tokens/components/_button.variables.scss +6 -0
  72. package/dist/collection/design-tokens/components/_logo.variables.scss +17 -15
  73. package/dist/digi-arbetsformedlingen/design-tokens/components/_button.variables.scss +6 -0
  74. package/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js +1 -1
  75. package/dist/digi-arbetsformedlingen/index.esm.js +1 -1
  76. package/dist/digi-arbetsformedlingen/p-0a993ca4.entry.js +1 -0
  77. package/dist/digi-arbetsformedlingen/p-0b0009eb.entry.js +1 -0
  78. package/dist/digi-arbetsformedlingen/p-21853656.entry.js +1 -0
  79. package/dist/digi-arbetsformedlingen/p-23d8d58c.entry.js +1 -0
  80. package/dist/digi-arbetsformedlingen/p-28f335d8.entry.js +1 -0
  81. package/dist/digi-arbetsformedlingen/p-2f65802b.entry.js +1 -0
  82. package/dist/digi-arbetsformedlingen/{p-77d355fe.entry.js → p-4336cdff.entry.js} +1 -1
  83. package/dist/digi-arbetsformedlingen/p-4c9a428d.entry.js +1 -0
  84. package/dist/digi-arbetsformedlingen/p-4ee14c12.entry.js +1 -0
  85. package/dist/digi-arbetsformedlingen/p-4smNltRI.js +1 -0
  86. package/dist/digi-arbetsformedlingen/p-5c7e6e61.entry.js +1 -0
  87. package/dist/digi-arbetsformedlingen/p-60928fb0.entry.js +1 -0
  88. package/dist/digi-arbetsformedlingen/p-68e721b1.entry.js +1 -0
  89. package/dist/digi-arbetsformedlingen/p-7da0451b.entry.js +1 -0
  90. package/dist/digi-arbetsformedlingen/p-87e306b0.entry.js +1 -0
  91. package/dist/digi-arbetsformedlingen/p-8848ce2b.entry.js +1 -0
  92. package/dist/digi-arbetsformedlingen/p-91a0e1ca.entry.js +1 -0
  93. package/dist/digi-arbetsformedlingen/p-9d3da044.entry.js +1 -0
  94. package/dist/digi-arbetsformedlingen/p-B8hpiXmh.js +1 -0
  95. package/dist/digi-arbetsformedlingen/p-BMQm4N5I.js +1 -0
  96. package/dist/digi-arbetsformedlingen/p-BSJH8Lpg.js +1 -0
  97. package/dist/digi-arbetsformedlingen/p-BfyJgcLA.js +1 -0
  98. package/dist/digi-arbetsformedlingen/p-BvWKyXb_.js +1 -0
  99. package/dist/digi-arbetsformedlingen/p-DGI7Jkg2.js +1 -0
  100. package/dist/digi-arbetsformedlingen/p-DShzaNrQ.js +1 -0
  101. package/dist/digi-arbetsformedlingen/p-DfWZa2Wv.js +1 -0
  102. package/dist/digi-arbetsformedlingen/p-a563f0f4.entry.js +1 -0
  103. package/dist/digi-arbetsformedlingen/p-ad7e2dc6.entry.js +1 -0
  104. package/dist/digi-arbetsformedlingen/p-beab4698.entry.js +1 -0
  105. package/dist/digi-arbetsformedlingen/p-c9c140af.entry.js +1 -0
  106. package/dist/digi-arbetsformedlingen/p-d62e264c.entry.js +1 -0
  107. package/dist/digi-arbetsformedlingen/p-ef47f143.entry.js +1 -0
  108. package/dist/digi-arbetsformedlingen/p-f9a2a80e.entry.js +1 -0
  109. package/dist/digi-arbetsformedlingen/p-feaeab97.entry.js +1 -0
  110. package/dist/digi-arbetsformedlingen/{p-DbBOgLZR.js → p-xwICssEK.js} +1 -1
  111. package/dist/esm/button-type.enum-DShzaNrQ.js +8 -0
  112. package/dist/esm/{button-variation.enum-y5Nm4oWF.js → button-variation.enum-BMQm4N5I.js} +7 -1
  113. package/dist/esm/{code-example-variation.enum-Ooszw6tl.js → code-example-variation.enum-DGI7Jkg2.js} +1 -7
  114. package/dist/esm/digi-arbetsformedlingen.js +1 -1
  115. package/dist/esm/{digi-calendar-week-view.entry.js → digi-button_5.entry.js} +190 -6
  116. package/dist/esm/digi-calendar-datepicker.entry.js +10 -6
  117. package/dist/esm/digi-code-block_3.entry.js +9 -5
  118. package/dist/esm/digi-code-example.entry.js +2 -2
  119. package/dist/esm/digi-dialog.entry.js +9 -5
  120. package/dist/esm/digi-footer.entry.js +9 -5
  121. package/dist/esm/digi-form-error-list.entry.js +9 -5
  122. package/dist/esm/digi-form-file-upload.entry.js +3 -2
  123. package/dist/esm/digi-form-input-search.entry.js +4 -2
  124. package/dist/esm/digi-form-input.entry.js +203 -0
  125. package/dist/esm/digi-form-label_3.entry.js +143 -0
  126. package/dist/esm/digi-form-receipt.entry.js +9 -5
  127. package/dist/esm/digi-form-select-filter.entry.js +647 -0
  128. package/dist/esm/digi-header-navigation.entry.js +9 -5
  129. package/dist/esm/digi-header.entry.js +9 -5
  130. package/dist/esm/digi-icon-check.entry.js +26 -0
  131. package/dist/esm/digi-icon-chevron-down.entry.js +26 -0
  132. package/dist/esm/digi-icon-validation-error_2.entry.js +48 -0
  133. package/dist/esm/digi-navigation-pagination.entry.js +9 -5
  134. package/dist/esm/digi-notification-alert.entry.js +9 -5
  135. package/dist/esm/digi-notification-error-page.entry.js +9 -5
  136. package/dist/esm/digi-title-logo.entry.js +9 -5
  137. package/dist/esm/digi-tools-feedback-banner.entry.js +7 -2
  138. package/dist/esm/digi-tools-feedback.entry.js +9 -5
  139. package/dist/esm/digi-util-keydown-handler.entry.js +79 -0
  140. package/dist/esm/{form-validation-message-variation.enum-9n7Okhf1.js → form-file-upload-variation.enum-BfyJgcLA.js} +1 -8
  141. package/dist/esm/form-input-search-variation.enum-BvWKyXb_.js +8 -0
  142. package/dist/esm/{form-input-type.enum-CN1mgrt1.js → form-input-type.enum-BSJH8Lpg.js} +1 -15
  143. package/dist/esm/form-input-variation.enum-DfWZa2Wv.js +29 -0
  144. package/dist/esm/form-validation-message-variation.enum-B8hpiXmh.js +8 -0
  145. package/dist/esm/{index-DnTiPaEs.js → index-B1Je6g2n.js} +1 -1
  146. package/dist/esm/index-Co_lVhh_.js +26 -10
  147. package/dist/esm/index.js +9 -5
  148. package/dist/esm/loader.js +1 -1
  149. package/dist/esm/{typography-variation.enum-BDBYHWrh.js → typography-variation.enum-4smNltRI.js} +1 -29
  150. package/dist/types/components/_tools/tools-feedback-banner/tools-feedback-banner.d.ts +1 -0
  151. package/hydrate/index.js +11 -6
  152. package/hydrate/index.mjs +11 -6
  153. package/package.json +1 -1
  154. package/components/p--RxphPe_.js +0 -172
  155. package/dist/cjs/digi-button_11.cjs.entry.js +0 -1274
  156. package/dist/cjs/digi-icon-chevron-left_2.cjs.entry.js +0 -51
  157. package/dist/cjs/digi-typography.cjs.entry.js +0 -22
  158. package/dist/digi-arbetsformedlingen/p-0dc8c1f1.entry.js +0 -1
  159. package/dist/digi-arbetsformedlingen/p-14d011c8.entry.js +0 -1
  160. package/dist/digi-arbetsformedlingen/p-31d3b121.entry.js +0 -1
  161. package/dist/digi-arbetsformedlingen/p-38d6c196.entry.js +0 -1
  162. package/dist/digi-arbetsformedlingen/p-44c16261.entry.js +0 -1
  163. package/dist/digi-arbetsformedlingen/p-45f30e15.entry.js +0 -1
  164. package/dist/digi-arbetsformedlingen/p-478dd735.entry.js +0 -1
  165. package/dist/digi-arbetsformedlingen/p-591509af.entry.js +0 -1
  166. package/dist/digi-arbetsformedlingen/p-8c4b642e.entry.js +0 -1
  167. package/dist/digi-arbetsformedlingen/p-8fb4e6a3.entry.js +0 -1
  168. package/dist/digi-arbetsformedlingen/p-93367afb.entry.js +0 -1
  169. package/dist/digi-arbetsformedlingen/p-9n7Okhf1.js +0 -1
  170. package/dist/digi-arbetsformedlingen/p-BDBYHWrh.js +0 -1
  171. package/dist/digi-arbetsformedlingen/p-CN1mgrt1.js +0 -1
  172. package/dist/digi-arbetsformedlingen/p-Ooszw6tl.js +0 -1
  173. package/dist/digi-arbetsformedlingen/p-aaeddc10.entry.js +0 -1
  174. package/dist/digi-arbetsformedlingen/p-ab84eed8.entry.js +0 -1
  175. package/dist/digi-arbetsformedlingen/p-bd635299.entry.js +0 -1
  176. package/dist/digi-arbetsformedlingen/p-c273763e.entry.js +0 -1
  177. package/dist/digi-arbetsformedlingen/p-c73ddbe2.entry.js +0 -1
  178. package/dist/digi-arbetsformedlingen/p-cd90ab0b.entry.js +0 -1
  179. package/dist/digi-arbetsformedlingen/p-cfe0bcf9.entry.js +0 -1
  180. package/dist/digi-arbetsformedlingen/p-d441cad3.entry.js +0 -1
  181. package/dist/digi-arbetsformedlingen/p-fd330ef0.entry.js +0 -1
  182. package/dist/digi-arbetsformedlingen/p-y5Nm4oWF.js +0 -1
  183. package/dist/esm/digi-button_11.entry.js +0 -1262
  184. package/dist/esm/digi-icon-chevron-left_2.entry.js +0 -48
  185. package/dist/esm/digi-typography.entry.js +0 -20
@@ -1,10 +1,11 @@
1
1
  import { r as registerInstance, c as createEvent, h, F as Fragment, d as getElement } from './index-Co_lVhh_.js';
2
2
  import { _ as _t } from './text-DsO1BTml.js';
3
3
  import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
4
- import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel, c as FormValidationMessageVariation } from './form-validation-message-variation.enum-9n7Okhf1.js';
4
+ import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-BfyJgcLA.js';
5
5
  import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-DPq588Q4.js';
6
+ import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-B8hpiXmh.js';
6
7
 
7
- const formFileUploadCss = () => `.sc-digi-form-file-upload-h{--digi--form-file-upload--color--background--small--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--small--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--medium--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--medium--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--large--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--large--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--border--small--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--small--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--medium--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--medium--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--large--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--large--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--border-width--small--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--small--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--medium--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--medium--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--large--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--large--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-style--small--default:var(--digi--global--border-style--none);--digi--form-file-upload--border-style--medium--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-style--large--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-radius--small--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--medium--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--large--default:var(--digi--border-radius--secondary);--digi--form-file-upload--padding--small:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--form-file-upload--padding--medium:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--padding--large:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--font-size--small:var(--digi--global--typography--font-size--small);--digi--form-file-upload--font-size--medium:var(--digi--global--typography--font-size--base);--digi--form-file-upload--font-size--large:var(--digi--global--typography--font-size--large);--digi--form-file-upload--heading--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop);--digi--form-file-upload--heading--font-size:var(--digi--typography--heading-4--font-size--desktop);--digi--form-file-upload--heading--font-size--large:var(--digi--typography--heading-4--font-size--desktop-large);--digi--form-file-upload--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--font-weight:var(--digi--typography--form-file-upload--font-weight--desktop);--digi--form-file-upload--button-text--color--default:var(--digi--color--text--interactive--primary);--digi--form-file-upload--button-text--color--hover:var(--digi--color--text--interactive--primary);--digi--form-file-upload--padding--small--icon:var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--padding--medium--icon:var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--width--small:132px;--digi--form-file-upload--width--medium:304px;--digi--form-file-upload--width--large:inherit;--digi--form-file-upload--border--error:var(--digi--global--border-style--solid) solid;--digi--form-file-upload--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-file-upload--border--error--width:var(--digi--border-width--secondary);--digi--form-file-upload--background--error:var(--digi--color--background--interactive--validation--error);container-type:inline-size;display:block;width:100%}.sc-digi-form-file-upload-h a.sc-digi-form-file-upload{font-weight:var(--digi--global--typography--font-weight--semibold);color:var(--digi--color--text--interactive--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--small--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--small--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--small--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--small--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--small--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--small--default);--WIDTH:var(--digi--form-file-upload--width--small);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--small);--ICON--PADDING:var(--digi--form-file-upload--padding--small--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--medium--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--medium--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--medium--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--medium--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--medium--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--medium--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--medium--default);--WIDTH:var(--digi--form-file-upload--width--medium);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--medium);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--large--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--large--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--large--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--large--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--large--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--large--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--large--default);--WIDTH:var(--digi--form-file-upload--width--large);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--large);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload{--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border--error);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--border-color--error);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--border-color--error);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border--error--width);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--background--error)}.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{margin-right:0.5rem;animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:1rem}@media (prefers-reduced-motion){.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload{display:none}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload{margin:0 0 auto 0.5rem;text-align:center;white-space:nowrap;background:none;border:none;cursor:pointer;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--form-file-upload--button-text--color--default);display:flex;align-items:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover{color:var(--digi--form-file-upload--button-text--color--hover);text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white;text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--height:1.25rem;--digi--icon--width:1.25rem;--digi--icon--color:var(--digi--color--text--interactive--primary);margin-left:5px;padding:var(--ICON--PADDING);padding-right:0;padding-left:0}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--DEFAULT);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);max-width:var(--WIDTH);margin:0;display:flex;flex-direction:column;background-color:var(--COLOR--BACKGROUND--DEFAULT);align-items:center;padding:var(--PADDING);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--button-block-small);position:relative;cursor:pointer}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--HOVER)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload{position:absolute;width:100%;height:100%;background-color:var(--COLOR--BACKGROUND--HOVER);opacity:0.1;top:0;left:0;z-index:10}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload{padding-right:0.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload{max-width:none;padding:0;margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload{border-radius:var(--BORDER-RADIUS--DEFAULT);max-width:100%;width:100%;box-sizing:border-box;background-color:var(--COLOR--BACKGROUND--FILE-LIST);padding:var(--digi--gutter--largest-2) var(--digi--padding--large);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--medium);padding-bottom:var(--digi--padding--smaller)}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload{font-family:var(--digi--form-file-upload--heading--font-family);font-size:var(--digi--typography--label--font-size--desktop);font-weight:var(--digi--form-file-upload--heading--font-weight);color:var(--digi--color--text--primary);margin:var(--digi--margin--small) 0 var(--digi--margin--medium) 0;display:block}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload{margin-top:var(--digi--margin--largest)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;padding-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload{border-bottom:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload{max-height:1.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload{padding-right:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload{margin:0;padding:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload{list-style:none;margin-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type{margin-bottom:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload{margin:var(--digi--margin--small) 0;margin-bottom:var(--digi--margin--medium);width:100%;box-sizing:border-box}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload{list-style-type:none}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2){border-top:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;align-items:center;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload{display:flex;justify-content:flex-start;align-items:center;height:auto;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload{display:flex;min-width:20%;justify-content:flex-end;align-items:center}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload{margin:auto var(--digi--margin--small) !important;font-weight:var(--digi--form-file-upload--font-weight);font-size:var(--digi--typography--body--font-size--desktop);white-space:nowrap;height:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload{margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload{width:1.375rem;height:1.375rem;display:flex;align-self:baseline;position:relative;top:4px;left:0px;margin-right:4px}@container (min-width: 0){.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check-icon{--digi--icon--height:16px;--digi--icon--width:16px;--digi--icon--color:var(--digi--color--icon--validation--success);min-height:0;width:16px;height:16px;background-color:var(--digi--color--background--primary);border-radius:50%;align-self:flex-start}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{width:100%;margin:auto 0;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);height:max-content}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload{font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);margin:auto 0 auto var(--digi--margin--small);color:var(--digi--form-file-upload--button-text--color--default)}@media (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}@container (max-width: 620px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload{position:relative;display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;overflow-wrap:break-word;gap:32px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload{display:flex;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload{margin:0;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-6px;left:24px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload{width:2rem;height:2rem;object-fit:cover;flex-grow:0;margin-right:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload{margin-left:var(--digi--margin--larger)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload{position:relative;top:6px;left:5px;margin-right:1.25rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-7px;left:15px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload{width:100%}@container (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span{margin-left:0;margin-right:auto}}.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload{color:var(--digi--color--icon--validation--error)}.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@container (min-width: 500px){.sc-digi-form-file-upload-h .hidden-desktop{display:none !important}}@container (max-width: 499px){.sc-digi-form-file-upload-h .hidden-mobile{display:none !important}}`;
8
+ const formFileUploadCss = () => `.sc-digi-form-file-upload-h{--digi--form-file-upload--color--background--small--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--small--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--medium--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--medium--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--large--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--large--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--border--small--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--small--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--medium--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--medium--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--large--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--large--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--border-width--small--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--small--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--medium--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--medium--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--large--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--large--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-style--small--default:var(--digi--global--border-style--none);--digi--form-file-upload--border-style--medium--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-style--large--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-radius--small--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--medium--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--large--default:var(--digi--border-radius--secondary);--digi--form-file-upload--padding--small:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--form-file-upload--padding--medium:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--padding--large:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--font-size--small:var(--digi--global--typography--font-size--small);--digi--form-file-upload--font-size--medium:var(--digi--global--typography--font-size--base);--digi--form-file-upload--font-size--large:var(--digi--global--typography--font-size--large);--digi--form-file-upload--heading--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop);--digi--form-file-upload--heading--font-size:var(--digi--typography--heading-4--font-size--desktop);--digi--form-file-upload--heading--font-size--large:var(--digi--typography--heading-4--font-size--desktop-large);--digi--form-file-upload--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--font-weight:var(--digi--typography--form-file-upload--font-weight--desktop);--digi--form-file-upload--button-text--color--default:var(--digi--color--text--interactive--primary);--digi--form-file-upload--button-text--color--hover:var(--digi--color--text--interactive--primary);--digi--form-file-upload--padding--small--icon:var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--padding--medium--icon:var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--width--small:132px;--digi--form-file-upload--width--medium:304px;--digi--form-file-upload--width--large:inherit;--digi--form-file-upload--border--error:var(--digi--global--border-style--solid) solid;--digi--form-file-upload--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-file-upload--border--error--width:var(--digi--border-width--secondary);--digi--form-file-upload--background--error:var(--digi--color--background--interactive--validation--error);container-type:inline-size;display:block;width:100%}.sc-digi-form-file-upload-h a.sc-digi-form-file-upload{font-weight:var(--digi--global--typography--font-weight--semibold);color:var(--digi--color--text--interactive--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--small--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--small--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--small--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--small--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--small--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--small--default);--WIDTH:var(--digi--form-file-upload--width--small);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--small);--ICON--PADDING:var(--digi--form-file-upload--padding--small--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--medium--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--medium--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--medium--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--medium--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--medium--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--medium--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--medium--default);--WIDTH:var(--digi--form-file-upload--width--medium);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--medium);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--large--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--large--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--large--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--large--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--large--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--large--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--large--default);--WIDTH:var(--digi--form-file-upload--width--large);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--large);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload{--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border--error);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--border-color--error);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--border-color--error);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border--error--width);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--background--error)}.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{margin-right:0.5rem;animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:1rem}@media (prefers-reduced-motion){.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload{display:none}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload{margin:0 0 auto 0.5rem;text-align:center;white-space:nowrap;background:none;border:none;cursor:pointer;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--form-file-upload--button-text--color--default);display:flex;align-items:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover{color:var(--digi--form-file-upload--button-text--color--hover);text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white;text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--height:1.25rem;--digi--icon--width:1.25rem;--digi--icon--color:var(--digi--color--text--interactive--primary);margin-left:5px;padding:var(--ICON--PADDING);padding-right:0;padding-left:0}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--DEFAULT);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);max-width:var(--WIDTH);margin:0;display:flex;flex-direction:column;background-color:var(--COLOR--BACKGROUND--DEFAULT);align-items:center;padding:var(--PADDING);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--button-block-small);position:relative;cursor:pointer}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--HOVER)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload{position:absolute;width:100%;height:100%;background-color:var(--COLOR--BACKGROUND--HOVER);opacity:0.1;top:0;left:0;z-index:10}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload{padding-right:0.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload{max-width:none;padding:0;margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload{border-radius:var(--BORDER-RADIUS--DEFAULT);max-width:100%;width:100%;box-sizing:border-box;background-color:var(--COLOR--BACKGROUND--FILE-LIST);padding:var(--digi--gutter--largest-2) var(--digi--padding--large);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--medium);padding-bottom:var(--digi--padding--smaller)}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload{font-family:var(--digi--form-file-upload--heading--font-family);font-size:var(--digi--typography--label--font-size--desktop);font-weight:var(--digi--form-file-upload--heading--font-weight);color:var(--digi--color--text--primary);margin:var(--digi--margin--small) 0 var(--digi--margin--medium) 0;display:block}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload{margin-top:var(--digi--margin--largest)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;padding-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload{border-bottom:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload{max-height:1.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload{padding-right:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload{margin:0;padding:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload{list-style:none;margin-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type{margin-bottom:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload{margin:var(--digi--margin--small) 0;margin-bottom:var(--digi--margin--medium);width:100%;box-sizing:border-box}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload{list-style-type:none}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2){border-top:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;align-items:center;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload{display:flex;justify-content:flex-start;align-items:center;height:auto;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload{display:flex;min-width:20%;justify-content:flex-end;align-items:center}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload{margin:auto var(--digi--margin--small) !important;font-weight:var(--digi--form-file-upload--font-weight);font-size:var(--digi--typography--body--font-size--desktop);white-space:nowrap;height:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload{margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload{width:1.375rem;height:1.375rem;display:flex;align-self:baseline;position:relative;top:4px;left:0px;margin-right:4px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check-icon.sc-digi-form-file-upload{--digi--icon--height:16px;--digi--icon--width:16px;--digi--icon--color:var(--digi--color--icon--validation--success);min-height:0;width:16px;height:16px;background-color:var(--digi--color--background--primary);border-radius:50%;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{width:100%;margin:auto 0;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);height:max-content}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload{font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);margin:auto 0 auto var(--digi--margin--small);color:var(--digi--form-file-upload--button-text--color--default)}@media (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}@container (max-width: 620px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload{position:relative;display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;overflow-wrap:break-word;gap:32px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload{display:flex;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload{margin:0;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-6px;left:24px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload{width:2rem;height:2rem;object-fit:cover;flex-grow:0;margin-right:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload{margin-left:var(--digi--margin--larger)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload{position:relative;top:6px;left:5px;margin-right:1.25rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-7px;left:15px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload{width:100%}@container (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span{margin-left:0;margin-right:auto}}.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload{color:var(--digi--color--icon--validation--error)}.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@container (min-width: 500px){.sc-digi-form-file-upload-h .hidden-desktop{display:none !important}}@container (max-width: 499px){.sc-digi-form-file-upload-h .hidden-mobile{display:none !important}}`;
8
9
 
9
10
  const FormFileUpload = class {
10
11
  constructor(hostRef) {
@@ -1,11 +1,13 @@
1
1
  import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Co_lVhh_.js';
2
2
  import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
3
- import { b as FormInputType, a as FormInputButtonVariation, F as FormInputSearchVariation, B as ButtonType } from './form-input-type.enum-CN1mgrt1.js';
3
+ import { F as FormInputSearchVariation } from './form-input-search-variation.enum-BvWKyXb_.js';
4
+ import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
5
+ import { B as ButtonType } from './button-type.enum-DShzaNrQ.js';
4
6
  import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
5
7
  import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
6
8
  import './detectClosest.util-DwBvm-Nc.js';
7
9
 
8
- const formInputSearchCss = () => `.sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}`;
10
+ const formInputSearchCss = () => `.sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}`;
9
11
 
10
12
  const FormInputSearch = class {
11
13
  constructor(hostRef) {
@@ -0,0 +1,203 @@
1
+ import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-Co_lVhh_.js';
2
+ import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
3
+ import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
4
+ import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-DfWZa2Wv.js';
5
+
6
+ const formInputCss = () => `.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}`;
7
+
8
+ const FormInput = class {
9
+ constructor(hostRef) {
10
+ registerInstance(this, hostRef);
11
+ this.afOnChange = createEvent(this, "afOnChange", 7);
12
+ this.afOnBlur = createEvent(this, "afOnBlur", 7);
13
+ this.afOnKeyup = createEvent(this, "afOnKeyup", 7);
14
+ this.afOnFocus = createEvent(this, "afOnFocus", 7);
15
+ this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
16
+ this.afOnInput = createEvent(this, "afOnInput", 7);
17
+ this.afOnDirty = createEvent(this, "afOnDirty", 7);
18
+ this.afOnTouched = createEvent(this, "afOnTouched", 7);
19
+ this.afOnReady = createEvent(this, "afOnReady", 3);
20
+ this.hasActiveValidationMessage = false;
21
+ this.dirty = false;
22
+ this.touched = false;
23
+ /**
24
+ * Sätter attributet 'type'.
25
+ * @en Input type attribute
26
+ */
27
+ this.afType = FormInputType.TEXT;
28
+ /**
29
+ * Sätter attributet 'inputmode'.
30
+ * @en Inputmode type attribute
31
+ */
32
+ this.afInputmode = FormInputMode.DEFAULT;
33
+ /**
34
+ * Layout för hur inmatningsfältet ska visas då det finns en knapp
35
+ * @en Input layout when there is a button
36
+ */
37
+ this.afButtonVariation = FormInputButtonVariation.PRIMARY;
38
+ /**
39
+ * Sätter variant. Kan vara 'small', 'medium' eller 'large'
40
+ * @en Set input variation.
41
+ */
42
+ this.afVariation = FormInputVariation.MEDIUM;
43
+ /**
44
+ * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
45
+ * @en Input id attribute. Defaults to random string.
46
+ */
47
+ this.afId = randomIdGenerator('digi-form-input');
48
+ /**
49
+ * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
50
+ * @en Set this to true if the form contains more required fields than optional fields.
51
+ */
52
+ this.afAnnounceIfOptional = false;
53
+ /**
54
+ * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
55
+ * @en Set input validation status
56
+ */
57
+ this.afValidation = FormInputValidation.NEUTRAL;
58
+ /**
59
+ * Om värdet är true får felmeddelandet attributet role="alert".
60
+ * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
61
+ * @en If the value is true, the error message gets the attribute role="alert".
62
+ * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
63
+ */
64
+ this.afErrorMessageIsAlert = true;
65
+ }
66
+ onValueChanged(value) {
67
+ this.afValue = value;
68
+ }
69
+ onAfValueChanged(value) {
70
+ this.value = value;
71
+ if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
72
+ this._input.value = String(value !== null && value !== void 0 ? value : '');
73
+ }
74
+ }
75
+ get errorMessageIsAlert() {
76
+ return (this.afErrorMessageIsAlert !== false &&
77
+ this.afErrorMessageIsAlert !== 'false');
78
+ }
79
+ afValidationTextWatch() {
80
+ this.setActiveValidationMessage();
81
+ }
82
+ /**
83
+ * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
84
+ * @en Returns a reference to the input element. Handy for setting focus programmatically.
85
+ */
86
+ async afMGetFormControlElement() {
87
+ return this._input;
88
+ }
89
+ /**
90
+ * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
91
+ * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
92
+ */
93
+ focusOnInput() {
94
+ this._input.focus();
95
+ }
96
+ componentWillLoad() {
97
+ this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
98
+ this.setActiveValidationMessage();
99
+ this.setHasButton();
100
+ }
101
+ componentWillUpdate() {
102
+ this.setHasButton();
103
+ }
104
+ componentDidLoad() {
105
+ this.afOnReady.emit();
106
+ }
107
+ setActiveValidationMessage() {
108
+ this.hasActiveValidationMessage = !!this.afValidationText;
109
+ }
110
+ get cssModifiers() {
111
+ return {
112
+ 'digi-form-input--small': this.afVariation === FormInputVariation.SMALL,
113
+ 'digi-form-input--medium': this.afVariation === FormInputVariation.MEDIUM,
114
+ 'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
115
+ 'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
116
+ 'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
117
+ 'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
118
+ 'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
119
+ [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
120
+ [`digi-form-input--has-button-${this.hasButton}`]: true,
121
+ 'digi-form-input--empty': !this.afValue &&
122
+ (!this.afValidation ||
123
+ this.afValidation === FormInputValidation.NEUTRAL)
124
+ };
125
+ }
126
+ blurHandler(e) {
127
+ const trimableTypes = [
128
+ FormInputType.TEXT,
129
+ FormInputType.EMAIL,
130
+ FormInputType.SEARCH,
131
+ FormInputType.TEL,
132
+ FormInputType.URL
133
+ ];
134
+ const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
135
+ if (shouldTrim && typeof e.target.value === 'string') {
136
+ const trimmedValue = e.target.value.trim();
137
+ if (trimmedValue !== e.target.value) {
138
+ this.afValue = this.value = trimmedValue;
139
+ if (this._input) {
140
+ this._input.value = trimmedValue;
141
+ }
142
+ // Emittar afOnInput så Angulars value accessor får det trimmade värdet
143
+ this.afOnInput.emit(e);
144
+ }
145
+ }
146
+ if (!this.touched) {
147
+ this.afOnTouched.emit(e);
148
+ this.touched = true;
149
+ }
150
+ this.afOnBlur.emit(e);
151
+ }
152
+ changeHandler(e) {
153
+ this.setActiveValidationMessage();
154
+ this.afOnChange.emit(e);
155
+ }
156
+ focusHandler(e) {
157
+ this.afOnFocus.emit(e);
158
+ }
159
+ focusoutHandler(e) {
160
+ this.afOnFocusout.emit(e);
161
+ }
162
+ keyupHandler(e) {
163
+ this.afOnKeyup.emit(e);
164
+ }
165
+ inputHandler(e) {
166
+ this.afValue = this.value =
167
+ this.afType === FormInputType.NUMBER
168
+ ? parseFloat(e.target.value)
169
+ : e.target.value;
170
+ if (!this.dirty) {
171
+ this.afOnDirty.emit(e);
172
+ this.dirty = true;
173
+ }
174
+ this.setActiveValidationMessage();
175
+ this.afOnInput.emit(e);
176
+ }
177
+ setHasButton() {
178
+ this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
179
+ }
180
+ render() {
181
+ return (h(Host, { key: '2739bdd7385125581d7ea9c25a3610f5950c6a74', tabindex: -1 }, h("div", { key: '7e261c1e2fc4f37f4ddda861872a470c89181e16', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '7e8fd283dedf0a851c714331ae640f7c74176bde', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '68d715181c180ebaf957dfb46afb63b19b8a8188', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'e25ab871e988f9e8bd0837f75403e85f7423805f', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
182
+ ? 'true'
183
+ : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
184
+ ? {}
185
+ : { inputmode: this.afInputmode }))), h("slot", { key: 'c14ae079a53099fc3928bcf3ac7f5517c20b0f36', name: "button" })), h("div", { key: '75d6afa176cd8620e31c384e169b3c84a3bb584d', class: "digi-form-input__footer" }, h("div", { key: '81029d425aae06e3c72c08afe982f2ff1a7bb81d', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
186
+ this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '9a8fec12db8c78a037a9b70194b32814d7641dad', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
187
+ }
188
+ get hostElement() { return getElement(this); }
189
+ static get watchers() { return {
190
+ "value": [{
191
+ "onValueChanged": 0
192
+ }],
193
+ "afValue": [{
194
+ "onAfValueChanged": 0
195
+ }],
196
+ "afValidationText": [{
197
+ "afValidationTextWatch": 0
198
+ }]
199
+ }; }
200
+ };
201
+ FormInput.style = formInputCss();
202
+
203
+ export { FormInput as digi_form_input };
@@ -0,0 +1,143 @@
1
+ import { r as registerInstance, h, d as getElement } from './index-Co_lVhh_.js';
2
+ import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
3
+ import { l as logger } from './logger.util-DdB9j8uV.js';
4
+ import { _ as _t } from './text-DsO1BTml.js';
5
+ import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-B8hpiXmh.js';
6
+
7
+ const formLabelCss = () => `.sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}`;
8
+
9
+ const FormLabel = class {
10
+ constructor(hostRef) {
11
+ registerInstance(this, hostRef);
12
+ /**
13
+ * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
14
+ * @en Set id attribute. Defaults to random string.
15
+ */
16
+ this.afId = randomIdGenerator('digi-form-label');
17
+ /**
18
+ * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
19
+ * @en Set this to true if the form contains more required fields than optional fields.
20
+ */
21
+ this.afAnnounceIfOptional = false;
22
+ /**
23
+ * Sätter text för afRequired.
24
+ * @en Set text for afRequired.
25
+ */
26
+ this.afRequiredText = _t.required.toLowerCase();
27
+ /**
28
+ * Sätter text för afAnnounceIfOptional.
29
+ * @en Set text for afAnnounceIfOptional.
30
+ */
31
+ this.afAnnounceIfOptionalText = _t.optional.toLowerCase();
32
+ }
33
+ componentWillLoad() {
34
+ this.setLabelText();
35
+ this.validateFor();
36
+ this.handleSlotVisibility();
37
+ }
38
+ validateFor() {
39
+ if (this.afFor == null) {
40
+ logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
41
+ }
42
+ }
43
+ setLabelText() {
44
+ this.labelText = `${this.afLabel} ${this.requiredText}`;
45
+ if (!this.afLabel) {
46
+ logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
47
+ }
48
+ }
49
+ handleSlotVisibility() {
50
+ this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
51
+ }
52
+ get requiredText() {
53
+ if (this.afRequired && !this.afAnnounceIfOptional) {
54
+ return this.afRequiredText ? ` (${this.afRequiredText})` : '';
55
+ }
56
+ else if (!this.afRequired && this.afAnnounceIfOptional) {
57
+ return this.afAnnounceIfOptionalText
58
+ ? ` (${this.afAnnounceIfOptionalText})`
59
+ : '';
60
+ }
61
+ else {
62
+ return '';
63
+ }
64
+ }
65
+ render() {
66
+ return (h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
67
+ }
68
+ get hostElement() { return getElement(this); }
69
+ static get watchers() { return {
70
+ "afFor": [{
71
+ "validateFor": 0
72
+ }],
73
+ "afLabel": [{
74
+ "setLabelText": 0
75
+ }],
76
+ "afRequired": [{
77
+ "setLabelText": 0
78
+ }],
79
+ "afAnnounceIfOptional": [{
80
+ "setLabelText": 0
81
+ }]
82
+ }; }
83
+ };
84
+ FormLabel.style = formLabelCss();
85
+
86
+ const formValidationMessageCss = () => `.sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}`;
87
+
88
+ const FormValidationMessage = class {
89
+ constructor(hostRef) {
90
+ registerInstance(this, hostRef);
91
+ /**
92
+ * Sätter valideringsstatus. Kan vara 'success', 'error' eller 'warning'.
93
+ * @en Set validation status
94
+ */
95
+ this.afVariation = FormValidationMessageVariation.SUCCESS;
96
+ }
97
+ get cssModifiers() {
98
+ return {
99
+ 'digi-form-validation-message--success': this.afVariation === FormValidationMessageVariation.SUCCESS,
100
+ 'digi-form-validation-message--error': this.afVariation === FormValidationMessageVariation.ERROR,
101
+ 'digi-form-validation-message--warning': this.afVariation === FormValidationMessageVariation.WARNING
102
+ };
103
+ }
104
+ get icon() {
105
+ switch (this.afVariation) {
106
+ case FormValidationMessageVariation.SUCCESS:
107
+ return h("digi-icon-validation-success", null);
108
+ case FormValidationMessageVariation.ERROR:
109
+ return h("digi-icon-validation-error", null);
110
+ case FormValidationMessageVariation.WARNING:
111
+ return h("digi-icon-validation-warning", { class: "warning" });
112
+ }
113
+ }
114
+ render() {
115
+ return (h("div", { key: '5c89cb2cfe7085ec0203814f2c7a43c9fe518db4', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: 'cb85b6a6e02b081710f80ad7bbbe96e182d8c353', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '9b1689dcad19fd3f033c679f496a1c94348f393b', class: "digi-form-validation-message__text" }, h("slot", { key: '794c1b1c0771cae8c0b19bd7123f7f5bc28e99b7' }))));
116
+ }
117
+ get hostElement() { return getElement(this); }
118
+ };
119
+ FormValidationMessage.style = formValidationMessageCss();
120
+
121
+ const iconValidationSuccessCss = () => `.sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
122
+
123
+ const IconCheckCircle = class {
124
+ constructor(hostRef) {
125
+ registerInstance(this, hostRef);
126
+ /**
127
+ * För att dölja ikonen för skärmläsare. Default är satt till true.
128
+ * @en Hides the icon for screen readers. Default is set to true.
129
+ */
130
+ this.afSvgAriaHidden = true;
131
+ this.titleId = randomIdGenerator('icontitle');
132
+ }
133
+ render() {
134
+ return (h("svg", { key: '1c9dcaf014e400504cbce24f69c67bdbb1dc0361', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
135
+ ? this.afSvgAriaLabelledby
136
+ : this.afTitle
137
+ ? this.titleId
138
+ : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: 'ed5b4d39b987b025d99ef2ce2153a8de749f587e', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7c5175b745577dd9076170ba83fa00f8cc03c4a2' }, this.afDesc), h("path", { key: 'f9cb601de2dfbf7959b2b43023692e111f1fbf91', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
139
+ }
140
+ };
141
+ IconCheckCircle.style = iconValidationSuccessCss();
142
+
143
+ export { FormLabel as digi_form_label, FormValidationMessage as digi_form_validation_message, IconCheckCircle as digi_icon_validation_success };
@@ -1,22 +1,26 @@
1
1
  import { r as registerInstance, h, d as getElement } from './index-Co_lVhh_.js';
2
- import { n as FormReceiptVariation, m as FormReceiptType, l as FormReceiptHeadingLevel } from './typography-variation.enum-BDBYHWrh.js';
2
+ import { k as FormReceiptVariation, j as FormReceiptType, i as FormReceiptHeadingLevel } from './typography-variation.enum-4smNltRI.js';
3
3
  import './badge-notification-shape.enum-CKoZU0-H.js';
4
4
  import './badge-status-variation.enum-C0A-p3cU.js';
5
- import './code-example-variation.enum-Ooszw6tl.js';
6
- import './form-input-type.enum-CN1mgrt1.js';
7
- import './button-variation.enum-y5Nm4oWF.js';
5
+ import './button-variation.enum-BMQm4N5I.js';
6
+ import './button-type.enum-DShzaNrQ.js';
8
7
  import './calendar-week-view-heading-level.enum-DH_-wpLB.js';
9
8
  import './bar-chart-variation.enum-DPeoHh1J.js';
9
+ import './code-example-variation.enum-DGI7Jkg2.js';
10
10
  import './code-variation.enum-qc6KRZue.js';
11
11
  import './expandable-accordion-header-level.enum-DwNlf6Sh.js';
12
12
  import './expandable-faq-item-variation.enum-C6B2KRZo.js';
13
13
  import './expandable-faq-variation.enum-CES5gUEo.js';
14
14
  import './footer-card-variation.enum-DzSu1-K0.js';
15
15
  import './form-checkbox-variation.enum-6-MpaVf8.js';
16
- import './form-validation-message-variation.enum-9n7Okhf1.js';
16
+ import './form-file-upload-variation.enum-BfyJgcLA.js';
17
+ import './form-input-search-variation.enum-BvWKyXb_.js';
18
+ import './form-input-type.enum-BSJH8Lpg.js';
19
+ import './form-input-variation.enum-DfWZa2Wv.js';
17
20
  import './form-radiogroup-validation.enum-DcnvI7UR.js';
18
21
  import './form-select-variation.enum-DCS1KcvC.js';
19
22
  import './form-textarea-variation.enum-DogB9kfH.js';
23
+ import './form-validation-message-variation.enum-B8hpiXmh.js';
20
24
  import './info-card-multi-type.enum-CkIb3cUS.js';
21
25
  import './info-card-variation.enum-_ycZeBN4.js';
22
26
  import './layout-container-max-width.enum-CuhrrYGE.js';