@postnord/pn-marketweb-components 3.5.2 → 3.5.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 (400) hide show
  1. package/cjs/alert_exclamation_circle-24f29a5b.js +8 -0
  2. package/cjs/alert_exclamation_circle-24f29a5b.js.map +1 -0
  3. package/cjs/loader.cjs.js +1 -1
  4. package/cjs/pn-address-autofill.cjs.entry.js +47 -72
  5. package/cjs/pn-address-autofill.cjs.entry.js.map +1 -1
  6. package/cjs/pn-dropdown-choice-adds-row.cjs.entry.js +18 -6
  7. package/cjs/pn-dropdown-choice-adds-row.cjs.entry.js.map +1 -1
  8. package/cjs/pn-market-web-components.cjs.js +1 -1
  9. package/cjs/pn-marketweb-input.cjs.entry.js +2 -4
  10. package/cjs/pn-marketweb-input.cjs.entry.js.map +1 -1
  11. package/collection/components/input/pn-address-autofill/pn-address-autofill.css +6 -1
  12. package/collection/components/input/pn-address-autofill/pn-address-autofill.js +58 -68
  13. package/collection/components/input/pn-address-autofill/pn-address-autofill.js.map +1 -1
  14. package/collection/components/input/pn-address-autofill/pn-address-autofill.stories.js +2 -1
  15. package/collection/components/input/pn-address-autofill/translations.js +6 -3
  16. package/collection/components/input/pn-address-autofill/translations.js.map +1 -1
  17. package/collection/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.js +18 -6
  18. package/collection/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row.js.map +1 -1
  19. package/components/alert_exclamation_circle.js +6 -0
  20. package/components/alert_exclamation_circle.js.map +1 -0
  21. package/components/pn-address-autofill.js +48 -72
  22. package/components/pn-address-autofill.js.map +1 -1
  23. package/components/pn-dropdown-choice-adds-row.js +18 -6
  24. package/components/pn-dropdown-choice-adds-row.js.map +1 -1
  25. package/components/pn-marketweb-input2.js +1 -3
  26. package/components/pn-marketweb-input2.js.map +1 -1
  27. package/esm/alert_exclamation_circle-f0fe7c7b.js +6 -0
  28. package/esm/alert_exclamation_circle-f0fe7c7b.js.map +1 -0
  29. package/esm/loader.js +1 -1
  30. package/esm/pn-address-autofill.entry.js +47 -72
  31. package/esm/pn-address-autofill.entry.js.map +1 -1
  32. package/esm/pn-dropdown-choice-adds-row.entry.js +18 -6
  33. package/esm/pn-dropdown-choice-adds-row.entry.js.map +1 -1
  34. package/esm/pn-market-web-components.js +1 -1
  35. package/esm/pn-marketweb-input.entry.js +1 -3
  36. package/esm/pn-marketweb-input.entry.js.map +1 -1
  37. package/package.json +1 -1
  38. package/pn-market-web-components/p-0ac30ee9.entry.js +2 -0
  39. package/pn-market-web-components/p-0ac30ee9.entry.js.map +1 -0
  40. package/pn-market-web-components/p-15d70aaf.entry.js +2 -0
  41. package/pn-market-web-components/p-15d70aaf.entry.js.map +1 -0
  42. package/pn-market-web-components/p-76c2c01f.js +2 -0
  43. package/pn-market-web-components/p-76c2c01f.js.map +1 -0
  44. package/pn-market-web-components/p-a11fdf9f.entry.js +2 -0
  45. package/pn-market-web-components/p-a11fdf9f.entry.js.map +1 -0
  46. package/pn-market-web-components/pn-market-web-components.esm.js +1 -1
  47. package/pn-market-web-components/pn-market-web-components.esm.js.map +1 -1
  48. package/types/components/input/pn-address-autofill/pn-address-autofill.d.ts +2 -3
  49. package/types/components/input/pn-address-autofill/translations.d.ts +3 -0
  50. package/types/components.d.ts +2 -0
  51. package/umd/modules/@postnord/web-components/cjs/{angle_down-0b63ebde.js → chevron_down-83e72319.js} +3 -3
  52. package/umd/modules/@postnord/web-components/cjs/chevron_down-83e72319.js.map +1 -0
  53. package/umd/modules/@postnord/web-components/cjs/{angle_right-c8c55b43.js → chevron_right-aeb6aef3.js} +5 -5
  54. package/umd/modules/@postnord/web-components/cjs/chevron_right-aeb6aef3.js.map +1 -0
  55. package/umd/modules/@postnord/web-components/cjs/loader.cjs.js +1 -1
  56. package/umd/modules/@postnord/web-components/cjs/pn-accordion-row.cjs.entry.js +2 -2
  57. package/umd/modules/@postnord/web-components/cjs/pn-accordion-row.cjs.entry.js.map +1 -1
  58. package/umd/modules/@postnord/web-components/cjs/pn-action-menu.cjs.entry.js +42 -12
  59. package/umd/modules/@postnord/web-components/cjs/pn-action-menu.cjs.entry.js.map +1 -1
  60. package/umd/modules/@postnord/web-components/cjs/pn-button_2.cjs.entry.js +1 -1
  61. package/umd/modules/@postnord/web-components/cjs/pn-card.cjs.entry.js +1 -1
  62. package/umd/modules/@postnord/web-components/cjs/pn-checkbox.cjs.entry.js +1 -1
  63. package/umd/modules/@postnord/web-components/cjs/pn-choice-chip.cjs.entry.js +1 -1
  64. package/umd/modules/@postnord/web-components/cjs/pn-counter.cjs.entry.js +1 -1
  65. package/umd/modules/@postnord/web-components/cjs/pn-date-picker.cjs.entry.js +22 -6
  66. package/umd/modules/@postnord/web-components/cjs/pn-date-picker.cjs.entry.js.map +1 -1
  67. package/umd/modules/@postnord/web-components/cjs/pn-fieldset.cjs.entry.js +1 -1
  68. package/umd/modules/@postnord/web-components/cjs/pn-file-upload.cjs.entry.js +1 -1
  69. package/umd/modules/@postnord/web-components/cjs/pn-footer.cjs.entry.js +1 -1
  70. package/umd/modules/@postnord/web-components/cjs/pn-header.cjs.entry.js +1 -1
  71. package/umd/modules/@postnord/web-components/cjs/pn-input.cjs.entry.js +2 -2
  72. package/umd/modules/@postnord/web-components/cjs/pn-modal.cjs.entry.js +21 -7
  73. package/umd/modules/@postnord/web-components/cjs/pn-modal.cjs.entry.js.map +1 -1
  74. package/umd/modules/@postnord/web-components/cjs/pn-multiselect.cjs.entry.js +2 -2
  75. package/umd/modules/@postnord/web-components/cjs/pn-multiselect.cjs.entry.js.map +1 -1
  76. package/umd/modules/@postnord/web-components/cjs/pn-ocr-search.cjs.entry.js +1 -1
  77. package/umd/modules/@postnord/web-components/cjs/pn-page-nav-dropdown-item.cjs.entry.js +1 -1
  78. package/umd/modules/@postnord/web-components/cjs/pn-page-nav-item.cjs.entry.js +1 -1
  79. package/umd/modules/@postnord/web-components/cjs/pn-page-nav.cjs.entry.js +2 -2
  80. package/umd/modules/@postnord/web-components/cjs/pn-page-nav.cjs.entry.js.map +1 -1
  81. package/umd/modules/@postnord/web-components/cjs/pn-pagination.cjs.entry.js +1 -1
  82. package/umd/modules/@postnord/web-components/cjs/pn-progress-bar.cjs.entry.js +1 -1
  83. package/umd/modules/@postnord/web-components/cjs/pn-progress-indicator-step.cjs.entry.js +1 -1
  84. package/umd/modules/@postnord/web-components/cjs/pn-progress-indicator-step.cjs.entry.js.map +1 -1
  85. package/umd/modules/@postnord/web-components/cjs/pn-progress-indicator.cjs.entry.js +1 -1
  86. package/umd/modules/@postnord/web-components/cjs/pn-progress-indicator.cjs.entry.js.map +1 -1
  87. package/umd/modules/@postnord/web-components/cjs/pn-progress-stepper.cjs.entry.js +26 -41
  88. package/umd/modules/@postnord/web-components/cjs/pn-progress-stepper.cjs.entry.js.map +1 -1
  89. package/umd/modules/@postnord/web-components/cjs/pn-radio-button.cjs.entry.js +1 -1
  90. package/umd/modules/@postnord/web-components/cjs/pn-search-field.cjs.entry.js +1 -1
  91. package/umd/modules/@postnord/web-components/cjs/pn-segment.cjs.entry.js +1 -1
  92. package/umd/modules/@postnord/web-components/cjs/pn-segmented-control.cjs.entry.js +1 -1
  93. package/umd/modules/@postnord/web-components/cjs/pn-select.cjs.entry.js +2 -2
  94. package/umd/modules/@postnord/web-components/cjs/pn-select.cjs.entry.js.map +1 -1
  95. package/umd/modules/@postnord/web-components/cjs/pn-tab.cjs.entry.js +1 -1
  96. package/umd/modules/@postnord/web-components/cjs/pn-tablist.cjs.entry.js +2 -2
  97. package/umd/modules/@postnord/web-components/cjs/pn-tablist.cjs.entry.js.map +1 -1
  98. package/umd/modules/@postnord/web-components/cjs/pn-text-link.cjs.entry.js +1 -1
  99. package/umd/modules/@postnord/web-components/cjs/pn-textarea.cjs.entry.js +1 -1
  100. package/umd/modules/@postnord/web-components/cjs/pn-tile.cjs.entry.js +1 -1
  101. package/umd/modules/@postnord/web-components/cjs/pn-toast.cjs.entry.js +25 -16
  102. package/umd/modules/@postnord/web-components/cjs/pn-toast.cjs.entry.js.map +1 -1
  103. package/umd/modules/@postnord/web-components/cjs/pn-toggle-switch.cjs.entry.js +1 -1
  104. package/umd/modules/@postnord/web-components/cjs/pn-tooltip.cjs.entry.js +1 -1
  105. package/umd/modules/@postnord/web-components/cjs/pn-zipcode-search.cjs.entry.js +1 -1
  106. package/umd/modules/@postnord/web-components/cjs/postnord-web-components.cjs.js +1 -1
  107. package/umd/modules/@postnord/web-components/collection/components/buttons/pn-action-menu/pn-action-menu.js +41 -11
  108. package/umd/modules/@postnord/web-components/collection/components/buttons/pn-action-menu/pn-action-menu.js.map +1 -1
  109. package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion/row/pn-accordion-row.js +2 -2
  110. package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion/row/pn-accordion-row.js.map +1 -1
  111. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.css +92 -40
  112. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.js +35 -9
  113. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.js.map +1 -1
  114. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/pn-progress-bar.js +1 -1
  115. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.js +5 -1
  116. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.js.map +1 -1
  117. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator.js +5 -1
  118. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator.js.map +1 -1
  119. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.css +85 -9
  120. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.js +100 -97
  121. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-stepper/pn-progress-stepper.js.map +1 -1
  122. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.js +1 -1
  123. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.css +0 -1
  124. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.js +24 -15
  125. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.js.map +1 -1
  126. package/umd/modules/@postnord/web-components/collection/components/feedback/pn-tooltip/pn-tooltip.js +1 -1
  127. package/umd/modules/@postnord/web-components/collection/components/input/pn-checkbox/pn-checkbox.js +1 -1
  128. package/umd/modules/@postnord/web-components/collection/components/input/pn-choice-chip/pn-choice-chip.js +1 -1
  129. package/umd/modules/@postnord/web-components/collection/components/input/pn-counter/pn-counter.js +1 -1
  130. package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.css +2 -3
  131. package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js +22 -6
  132. package/umd/modules/@postnord/web-components/collection/components/input/pn-date-picker/pn-date-picker.js.map +1 -1
  133. package/umd/modules/@postnord/web-components/collection/components/input/pn-fieldset/pn-fieldset.js +1 -1
  134. package/umd/modules/@postnord/web-components/collection/components/input/pn-file-upload/pn-file-upload.js +1 -1
  135. package/umd/modules/@postnord/web-components/collection/components/input/pn-input/pn-input.js +2 -2
  136. package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/pn-multiselect.js +2 -2
  137. package/umd/modules/@postnord/web-components/collection/components/input/pn-multiselect/pn-multiselect.js.map +1 -1
  138. package/umd/modules/@postnord/web-components/collection/components/input/pn-radio-button/pn-radio-button.js +1 -1
  139. package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.js +1 -1
  140. package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/pn-segmented-control.js +1 -1
  141. package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.js +1 -1
  142. package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.js +2 -2
  143. package/umd/modules/@postnord/web-components/collection/components/input/pn-select/pn-select.js.map +1 -1
  144. package/umd/modules/@postnord/web-components/collection/components/input/pn-textarea/pn-textarea.js +1 -1
  145. package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/pn-toggle-switch.js +1 -1
  146. package/umd/modules/@postnord/web-components/collection/components/layout/pn-header/pn-header.js +1 -1
  147. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-card/pn-card.js +1 -1
  148. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-footer/pn-footer.js +1 -1
  149. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/dropdown-item/pn-page-nav-dropdown-item.js +1 -1
  150. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/item/pn-page-nav-item.js +1 -1
  151. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/menu/pn-page-nav.js +2 -2
  152. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-page-nav/menu/pn-page-nav.js.map +1 -1
  153. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-pagination/pn-pagination.js +1 -1
  154. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.js +2 -2
  155. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.js.map +1 -1
  156. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/tab/pn-tab.js +1 -1
  157. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-text-link/pn-text-link.js +1 -1
  158. package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tile/pn-tile.js +1 -1
  159. package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/pn-ocr-search.js +1 -1
  160. package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/pn-zipcode-search.js +1 -1
  161. package/umd/modules/@postnord/web-components/collection/globals/types.js.map +1 -1
  162. package/umd/modules/@postnord/web-components/components/{angle_down.js → chevron_down.js} +3 -3
  163. package/umd/modules/@postnord/web-components/components/chevron_down.js.map +1 -0
  164. package/umd/modules/@postnord/web-components/{esm/angle_right-b52095c9.js → components/chevron_right.js} +4 -4
  165. package/umd/modules/@postnord/web-components/components/chevron_right.js.map +1 -0
  166. package/umd/modules/@postnord/web-components/components/pn-accordion-row.js +2 -2
  167. package/umd/modules/@postnord/web-components/components/pn-accordion-row.js.map +1 -1
  168. package/umd/modules/@postnord/web-components/components/pn-action-menu.js +42 -12
  169. package/umd/modules/@postnord/web-components/components/pn-action-menu.js.map +1 -1
  170. package/umd/modules/@postnord/web-components/components/pn-card.js +1 -1
  171. package/umd/modules/@postnord/web-components/components/pn-checkbox.js +1 -1
  172. package/umd/modules/@postnord/web-components/components/pn-choice-chip.js +1 -1
  173. package/umd/modules/@postnord/web-components/components/pn-counter.js +1 -1
  174. package/umd/modules/@postnord/web-components/components/pn-date-picker.js +23 -7
  175. package/umd/modules/@postnord/web-components/components/pn-date-picker.js.map +1 -1
  176. package/umd/modules/@postnord/web-components/components/pn-fieldset.js +1 -1
  177. package/umd/modules/@postnord/web-components/components/pn-file-upload.js +1 -1
  178. package/umd/modules/@postnord/web-components/components/pn-footer.js +1 -1
  179. package/umd/modules/@postnord/web-components/components/pn-header.js +1 -1
  180. package/umd/modules/@postnord/web-components/components/pn-input.js +2 -2
  181. package/umd/modules/@postnord/web-components/components/pn-modal.js +25 -10
  182. package/umd/modules/@postnord/web-components/components/pn-modal.js.map +1 -1
  183. package/umd/modules/@postnord/web-components/components/pn-multiselect.js +2 -2
  184. package/umd/modules/@postnord/web-components/components/pn-multiselect.js.map +1 -1
  185. package/umd/modules/@postnord/web-components/components/pn-ocr-search.js +1 -1
  186. package/umd/modules/@postnord/web-components/components/pn-page-nav-dropdown-item.js +1 -1
  187. package/umd/modules/@postnord/web-components/components/pn-page-nav-item.js +1 -1
  188. package/umd/modules/@postnord/web-components/components/pn-page-nav.js +2 -2
  189. package/umd/modules/@postnord/web-components/components/pn-page-nav.js.map +1 -1
  190. package/umd/modules/@postnord/web-components/components/pn-pagination.js +1 -1
  191. package/umd/modules/@postnord/web-components/components/pn-progress-bar2.js +1 -1
  192. package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.js +1 -1
  193. package/umd/modules/@postnord/web-components/components/pn-progress-indicator-step.js.map +1 -1
  194. package/umd/modules/@postnord/web-components/components/pn-progress-indicator.js +1 -1
  195. package/umd/modules/@postnord/web-components/components/pn-progress-indicator.js.map +1 -1
  196. package/umd/modules/@postnord/web-components/components/pn-progress-stepper.js +34 -48
  197. package/umd/modules/@postnord/web-components/components/pn-progress-stepper.js.map +1 -1
  198. package/umd/modules/@postnord/web-components/components/pn-radio-button.js +1 -1
  199. package/umd/modules/@postnord/web-components/components/pn-search-field2.js +1 -1
  200. package/umd/modules/@postnord/web-components/components/pn-segment.js +1 -1
  201. package/umd/modules/@postnord/web-components/components/pn-segmented-control.js +1 -1
  202. package/umd/modules/@postnord/web-components/components/pn-select2.js +2 -2
  203. package/umd/modules/@postnord/web-components/components/pn-select2.js.map +1 -1
  204. package/umd/modules/@postnord/web-components/components/pn-spinner2.js +1 -1
  205. package/umd/modules/@postnord/web-components/components/pn-tab.js +1 -1
  206. package/umd/modules/@postnord/web-components/components/pn-tablist.js +2 -2
  207. package/umd/modules/@postnord/web-components/components/pn-tablist.js.map +1 -1
  208. package/umd/modules/@postnord/web-components/components/pn-text-link2.js +1 -1
  209. package/umd/modules/@postnord/web-components/components/pn-textarea.js +1 -1
  210. package/umd/modules/@postnord/web-components/components/pn-tile.js +1 -1
  211. package/umd/modules/@postnord/web-components/components/pn-toast.js +25 -16
  212. package/umd/modules/@postnord/web-components/components/pn-toast.js.map +1 -1
  213. package/umd/modules/@postnord/web-components/components/pn-toggle-switch.js +1 -1
  214. package/umd/modules/@postnord/web-components/components/pn-tooltip.js +1 -1
  215. package/umd/modules/@postnord/web-components/components/pn-zipcode-search.js +1 -1
  216. package/umd/modules/@postnord/web-components/esm/{angle_down-d788f691.js → chevron_down-6e3fb42f.js} +3 -3
  217. package/umd/modules/@postnord/web-components/esm/chevron_down-6e3fb42f.js.map +1 -0
  218. package/umd/modules/@postnord/web-components/{components/angle_right.js → esm/chevron_right-9d9305e8.js} +4 -4
  219. package/umd/modules/@postnord/web-components/esm/chevron_right-9d9305e8.js.map +1 -0
  220. package/umd/modules/@postnord/web-components/esm/loader.js +1 -1
  221. package/umd/modules/@postnord/web-components/esm/pn-accordion-row.entry.js +2 -2
  222. package/umd/modules/@postnord/web-components/esm/pn-accordion-row.entry.js.map +1 -1
  223. package/umd/modules/@postnord/web-components/esm/pn-action-menu.entry.js +42 -12
  224. package/umd/modules/@postnord/web-components/esm/pn-action-menu.entry.js.map +1 -1
  225. package/umd/modules/@postnord/web-components/esm/pn-button_2.entry.js +1 -1
  226. package/umd/modules/@postnord/web-components/esm/pn-card.entry.js +1 -1
  227. package/umd/modules/@postnord/web-components/esm/pn-checkbox.entry.js +1 -1
  228. package/umd/modules/@postnord/web-components/esm/pn-choice-chip.entry.js +1 -1
  229. package/umd/modules/@postnord/web-components/esm/pn-counter.entry.js +1 -1
  230. package/umd/modules/@postnord/web-components/esm/pn-date-picker.entry.js +23 -7
  231. package/umd/modules/@postnord/web-components/esm/pn-date-picker.entry.js.map +1 -1
  232. package/umd/modules/@postnord/web-components/esm/pn-fieldset.entry.js +1 -1
  233. package/umd/modules/@postnord/web-components/esm/pn-file-upload.entry.js +1 -1
  234. package/umd/modules/@postnord/web-components/esm/pn-footer.entry.js +1 -1
  235. package/umd/modules/@postnord/web-components/esm/pn-header.entry.js +1 -1
  236. package/umd/modules/@postnord/web-components/esm/pn-input.entry.js +2 -2
  237. package/umd/modules/@postnord/web-components/esm/pn-modal.entry.js +22 -8
  238. package/umd/modules/@postnord/web-components/esm/pn-modal.entry.js.map +1 -1
  239. package/umd/modules/@postnord/web-components/esm/pn-multiselect.entry.js +2 -2
  240. package/umd/modules/@postnord/web-components/esm/pn-multiselect.entry.js.map +1 -1
  241. package/umd/modules/@postnord/web-components/esm/pn-ocr-search.entry.js +1 -1
  242. package/umd/modules/@postnord/web-components/esm/pn-page-nav-dropdown-item.entry.js +1 -1
  243. package/umd/modules/@postnord/web-components/esm/pn-page-nav-item.entry.js +1 -1
  244. package/umd/modules/@postnord/web-components/esm/pn-page-nav.entry.js +2 -2
  245. package/umd/modules/@postnord/web-components/esm/pn-page-nav.entry.js.map +1 -1
  246. package/umd/modules/@postnord/web-components/esm/pn-pagination.entry.js +1 -1
  247. package/umd/modules/@postnord/web-components/esm/pn-progress-bar.entry.js +1 -1
  248. package/umd/modules/@postnord/web-components/esm/pn-progress-indicator-step.entry.js +1 -1
  249. package/umd/modules/@postnord/web-components/esm/pn-progress-indicator-step.entry.js.map +1 -1
  250. package/umd/modules/@postnord/web-components/esm/pn-progress-indicator.entry.js +1 -1
  251. package/umd/modules/@postnord/web-components/esm/pn-progress-indicator.entry.js.map +1 -1
  252. package/umd/modules/@postnord/web-components/esm/pn-progress-stepper.entry.js +26 -41
  253. package/umd/modules/@postnord/web-components/esm/pn-progress-stepper.entry.js.map +1 -1
  254. package/umd/modules/@postnord/web-components/esm/pn-radio-button.entry.js +1 -1
  255. package/umd/modules/@postnord/web-components/esm/pn-search-field.entry.js +1 -1
  256. package/umd/modules/@postnord/web-components/esm/pn-segment.entry.js +1 -1
  257. package/umd/modules/@postnord/web-components/esm/pn-segmented-control.entry.js +1 -1
  258. package/umd/modules/@postnord/web-components/esm/pn-select.entry.js +2 -2
  259. package/umd/modules/@postnord/web-components/esm/pn-select.entry.js.map +1 -1
  260. package/umd/modules/@postnord/web-components/esm/pn-tab.entry.js +1 -1
  261. package/umd/modules/@postnord/web-components/esm/pn-tablist.entry.js +2 -2
  262. package/umd/modules/@postnord/web-components/esm/pn-tablist.entry.js.map +1 -1
  263. package/umd/modules/@postnord/web-components/esm/pn-text-link.entry.js +1 -1
  264. package/umd/modules/@postnord/web-components/esm/pn-textarea.entry.js +1 -1
  265. package/umd/modules/@postnord/web-components/esm/pn-tile.entry.js +1 -1
  266. package/umd/modules/@postnord/web-components/esm/pn-toast.entry.js +25 -16
  267. package/umd/modules/@postnord/web-components/esm/pn-toast.entry.js.map +1 -1
  268. package/umd/modules/@postnord/web-components/esm/pn-toggle-switch.entry.js +1 -1
  269. package/umd/modules/@postnord/web-components/esm/pn-tooltip.entry.js +1 -1
  270. package/umd/modules/@postnord/web-components/esm/pn-zipcode-search.entry.js +1 -1
  271. package/umd/modules/@postnord/web-components/esm/postnord-web-components.js +1 -1
  272. package/umd/modules/@postnord/web-components/hydrate/index.js +204 -137
  273. package/umd/modules/@postnord/web-components/hydrate/index.mjs +204 -137
  274. package/umd/modules/@postnord/web-components/package.json +16 -14
  275. package/umd/modules/@postnord/web-components/postnord-web-components/{p-7e88df1f.entry.js → p-01472170.entry.js} +2 -2
  276. package/umd/modules/@postnord/web-components/postnord-web-components/{p-ed4271af.entry.js → p-06c7e91b.entry.js} +2 -2
  277. package/umd/modules/@postnord/web-components/postnord-web-components/p-06c7e91b.entry.js.map +1 -0
  278. package/umd/modules/@postnord/web-components/postnord-web-components/{p-8773152d.entry.js → p-10532427.entry.js} +2 -2
  279. package/umd/modules/@postnord/web-components/postnord-web-components/{p-ffe79fa4.entry.js → p-11ef58ab.entry.js} +2 -2
  280. package/umd/modules/@postnord/web-components/postnord-web-components/p-16fb83d9.entry.js +6 -0
  281. package/umd/modules/@postnord/web-components/postnord-web-components/p-16fb83d9.entry.js.map +1 -0
  282. package/umd/modules/@postnord/web-components/postnord-web-components/{p-d74ccbb2.entry.js → p-1cd57319.entry.js} +2 -2
  283. package/umd/modules/@postnord/web-components/postnord-web-components/{p-adc6404b.entry.js → p-1e7c31ed.entry.js} +2 -2
  284. package/umd/modules/@postnord/web-components/postnord-web-components/p-1e7c31ed.entry.js.map +1 -0
  285. package/umd/modules/@postnord/web-components/postnord-web-components/{p-c2bbbcaa.entry.js → p-1fe6fc61.entry.js} +2 -2
  286. package/umd/modules/@postnord/web-components/postnord-web-components/{p-203ad7de.entry.js → p-23fdc4b6.entry.js} +2 -2
  287. package/umd/modules/@postnord/web-components/postnord-web-components/p-23fdc4b6.entry.js.map +1 -0
  288. package/umd/modules/@postnord/web-components/postnord-web-components/p-240f6613.entry.js +6 -0
  289. package/umd/modules/@postnord/web-components/postnord-web-components/{p-7ae9c053.entry.js.map → p-240f6613.entry.js.map} +1 -1
  290. package/umd/modules/@postnord/web-components/postnord-web-components/{p-4f67fffa.entry.js → p-28357e12.entry.js} +2 -2
  291. package/umd/modules/@postnord/web-components/postnord-web-components/p-28357e12.entry.js.map +1 -0
  292. package/umd/modules/@postnord/web-components/postnord-web-components/{p-c96ff403.js → p-2f7bb5e8.js} +2 -2
  293. package/umd/modules/@postnord/web-components/postnord-web-components/p-2f7bb5e8.js.map +1 -0
  294. package/umd/modules/@postnord/web-components/postnord-web-components/{p-5b0000e9.entry.js → p-363f578a.entry.js} +2 -2
  295. package/umd/modules/@postnord/web-components/postnord-web-components/{p-c0d19737.entry.js → p-37297b9a.entry.js} +2 -2
  296. package/umd/modules/@postnord/web-components/postnord-web-components/p-49a39ea1.entry.js +6 -0
  297. package/umd/modules/@postnord/web-components/postnord-web-components/p-49a39ea1.entry.js.map +1 -0
  298. package/umd/modules/@postnord/web-components/postnord-web-components/{p-bc95d4b0.entry.js → p-49f5fdd2.entry.js} +2 -2
  299. package/umd/modules/@postnord/web-components/postnord-web-components/p-49f5fdd2.entry.js.map +1 -0
  300. package/umd/modules/@postnord/web-components/postnord-web-components/{p-b556b835.entry.js → p-4d371963.entry.js} +2 -2
  301. package/umd/modules/@postnord/web-components/postnord-web-components/{p-ab29b9c0.entry.js → p-4eaab357.entry.js} +2 -2
  302. package/umd/modules/@postnord/web-components/postnord-web-components/{p-da713fc1.entry.js → p-5ed7e9b7.entry.js} +2 -2
  303. package/umd/modules/@postnord/web-components/postnord-web-components/p-617a946d.entry.js +6 -0
  304. package/umd/modules/@postnord/web-components/postnord-web-components/p-617a946d.entry.js.map +1 -0
  305. package/umd/modules/@postnord/web-components/postnord-web-components/{p-e087c5c5.entry.js → p-63aa3911.entry.js} +2 -2
  306. package/umd/modules/@postnord/web-components/postnord-web-components/p-65ae6360.entry.js +6 -0
  307. package/umd/modules/@postnord/web-components/postnord-web-components/p-65ae6360.entry.js.map +1 -0
  308. package/umd/modules/@postnord/web-components/postnord-web-components/{p-bf015c0f.entry.js → p-699b7bde.entry.js} +2 -2
  309. package/umd/modules/@postnord/web-components/postnord-web-components/{p-9bc1d14f.entry.js → p-6f9a21be.entry.js} +2 -2
  310. package/umd/modules/@postnord/web-components/postnord-web-components/p-75c5fb41.entry.js +6 -0
  311. package/umd/modules/@postnord/web-components/postnord-web-components/p-75c5fb41.entry.js.map +1 -0
  312. package/umd/modules/@postnord/web-components/postnord-web-components/{p-bd14cdca.entry.js → p-8e07bc17.entry.js} +2 -2
  313. package/umd/modules/@postnord/web-components/postnord-web-components/{p-7bd6d804.entry.js → p-8eaa2540.entry.js} +2 -2
  314. package/umd/modules/@postnord/web-components/postnord-web-components/{p-bf967b50.js → p-99600bc7.js} +2 -2
  315. package/umd/modules/@postnord/web-components/postnord-web-components/p-99600bc7.js.map +1 -0
  316. package/umd/modules/@postnord/web-components/postnord-web-components/{p-ff068744.entry.js → p-9cecd28d.entry.js} +2 -2
  317. package/umd/modules/@postnord/web-components/postnord-web-components/{p-605d99df.entry.js → p-a440734f.entry.js} +2 -2
  318. package/umd/modules/@postnord/web-components/postnord-web-components/{p-b9a494ae.entry.js → p-ab553e80.entry.js} +2 -2
  319. package/umd/modules/@postnord/web-components/postnord-web-components/{p-936ed2a1.entry.js → p-ae04e001.entry.js} +2 -2
  320. package/umd/modules/@postnord/web-components/postnord-web-components/p-ae04e001.entry.js.map +1 -0
  321. package/umd/modules/@postnord/web-components/postnord-web-components/{p-a4df55c4.entry.js → p-b202a599.entry.js} +2 -2
  322. package/umd/modules/@postnord/web-components/postnord-web-components/p-b83e6373.entry.js +6 -0
  323. package/umd/modules/@postnord/web-components/postnord-web-components/p-b83e6373.entry.js.map +1 -0
  324. package/umd/modules/@postnord/web-components/postnord-web-components/{p-fcd5028f.entry.js → p-bdb9bdc3.entry.js} +2 -2
  325. package/umd/modules/@postnord/web-components/postnord-web-components/{p-81f9f367.entry.js → p-cebe3a25.entry.js} +2 -2
  326. package/umd/modules/@postnord/web-components/postnord-web-components/{p-76b020f0.entry.js → p-d2f7b4a9.entry.js} +2 -2
  327. package/umd/modules/@postnord/web-components/postnord-web-components/{p-c45dc75d.entry.js → p-e8050420.entry.js} +2 -2
  328. package/umd/modules/@postnord/web-components/postnord-web-components/{p-412fc8d6.entry.js → p-eee2d131.entry.js} +2 -2
  329. package/umd/modules/@postnord/web-components/postnord-web-components/{p-d3521b5d.entry.js → p-fb5d6d47.entry.js} +2 -2
  330. package/umd/modules/@postnord/web-components/postnord-web-components/postnord-web-components.esm.js +1 -1
  331. package/umd/modules/@postnord/web-components/postnord-web-components/postnord-web-components.esm.js.map +1 -1
  332. package/umd/modules/@postnord/web-components/types/components/buttons/pn-action-menu/pn-action-menu.d.ts +3 -0
  333. package/umd/modules/@postnord/web-components/types/components/feedback/pn-modal/pn-modal.d.ts +12 -2
  334. package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.d.ts +4 -0
  335. package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-indicator/pn-progress-indicator.d.ts +4 -0
  336. package/umd/modules/@postnord/web-components/types/components/feedback/pn-progress-stepper/pn-progress-stepper.d.ts +27 -22
  337. package/umd/modules/@postnord/web-components/types/components/feedback/pn-toast/pn-toast.d.ts +2 -1
  338. package/umd/modules/@postnord/web-components/types/components.d.ts +60 -12
  339. package/umd/modules/@postnord/web-components/types/globals/types.d.ts +2 -1
  340. package/umd/modules/@postnord/web-components/vscode-data.json +7 -3
  341. package/vscode-data.json +4 -0
  342. package/pn-market-web-components/p-59cb7166.entry.js +0 -2
  343. package/pn-market-web-components/p-59cb7166.entry.js.map +0 -1
  344. package/pn-market-web-components/p-7c3091eb.entry.js +0 -2
  345. package/pn-market-web-components/p-7c3091eb.entry.js.map +0 -1
  346. package/pn-market-web-components/p-94a69959.entry.js +0 -2
  347. package/pn-market-web-components/p-94a69959.entry.js.map +0 -1
  348. package/umd/modules/@postnord/web-components/cjs/angle_down-0b63ebde.js.map +0 -1
  349. package/umd/modules/@postnord/web-components/cjs/angle_right-c8c55b43.js.map +0 -1
  350. package/umd/modules/@postnord/web-components/components/angle_down.js.map +0 -1
  351. package/umd/modules/@postnord/web-components/components/angle_right.js.map +0 -1
  352. package/umd/modules/@postnord/web-components/esm/angle_down-d788f691.js.map +0 -1
  353. package/umd/modules/@postnord/web-components/esm/angle_right-b52095c9.js.map +0 -1
  354. package/umd/modules/@postnord/web-components/postnord-web-components/p-203ad7de.entry.js.map +0 -1
  355. package/umd/modules/@postnord/web-components/postnord-web-components/p-2615282e.entry.js +0 -6
  356. package/umd/modules/@postnord/web-components/postnord-web-components/p-2615282e.entry.js.map +0 -1
  357. package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js +0 -6
  358. package/umd/modules/@postnord/web-components/postnord-web-components/p-3bd59ac8.entry.js.map +0 -1
  359. package/umd/modules/@postnord/web-components/postnord-web-components/p-4f67fffa.entry.js.map +0 -1
  360. package/umd/modules/@postnord/web-components/postnord-web-components/p-514107a5.entry.js +0 -6
  361. package/umd/modules/@postnord/web-components/postnord-web-components/p-514107a5.entry.js.map +0 -1
  362. package/umd/modules/@postnord/web-components/postnord-web-components/p-6a30576b.entry.js +0 -6
  363. package/umd/modules/@postnord/web-components/postnord-web-components/p-6a30576b.entry.js.map +0 -1
  364. package/umd/modules/@postnord/web-components/postnord-web-components/p-7ae9c053.entry.js +0 -6
  365. package/umd/modules/@postnord/web-components/postnord-web-components/p-8bc8f614.entry.js +0 -6
  366. package/umd/modules/@postnord/web-components/postnord-web-components/p-8bc8f614.entry.js.map +0 -1
  367. package/umd/modules/@postnord/web-components/postnord-web-components/p-936ed2a1.entry.js.map +0 -1
  368. package/umd/modules/@postnord/web-components/postnord-web-components/p-adc6404b.entry.js.map +0 -1
  369. package/umd/modules/@postnord/web-components/postnord-web-components/p-bc95d4b0.entry.js.map +0 -1
  370. package/umd/modules/@postnord/web-components/postnord-web-components/p-bf967b50.js.map +0 -1
  371. package/umd/modules/@postnord/web-components/postnord-web-components/p-c96ff403.js.map +0 -1
  372. package/umd/modules/@postnord/web-components/postnord-web-components/p-ed4271af.entry.js.map +0 -1
  373. package/umd/modules/@postnord/web-components/postnord-web-components/p-fc5f9092.entry.js +0 -6
  374. package/umd/modules/@postnord/web-components/postnord-web-components/p-fc5f9092.entry.js.map +0 -1
  375. package/umd/modules/@postnord/web-components/readme.md +0 -32
  376. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-7e88df1f.entry.js.map → p-01472170.entry.js.map} +0 -0
  377. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-8773152d.entry.js.map → p-10532427.entry.js.map} +0 -0
  378. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-ffe79fa4.entry.js.map → p-11ef58ab.entry.js.map} +0 -0
  379. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-d74ccbb2.entry.js.map → p-1cd57319.entry.js.map} +0 -0
  380. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-c2bbbcaa.entry.js.map → p-1fe6fc61.entry.js.map} +0 -0
  381. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-5b0000e9.entry.js.map → p-363f578a.entry.js.map} +0 -0
  382. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-c0d19737.entry.js.map → p-37297b9a.entry.js.map} +0 -0
  383. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-b556b835.entry.js.map → p-4d371963.entry.js.map} +0 -0
  384. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-ab29b9c0.entry.js.map → p-4eaab357.entry.js.map} +0 -0
  385. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-da713fc1.entry.js.map → p-5ed7e9b7.entry.js.map} +0 -0
  386. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-e087c5c5.entry.js.map → p-63aa3911.entry.js.map} +0 -0
  387. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-bf015c0f.entry.js.map → p-699b7bde.entry.js.map} +0 -0
  388. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-9bc1d14f.entry.js.map → p-6f9a21be.entry.js.map} +0 -0
  389. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-bd14cdca.entry.js.map → p-8e07bc17.entry.js.map} +0 -0
  390. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-7bd6d804.entry.js.map → p-8eaa2540.entry.js.map} +0 -0
  391. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-ff068744.entry.js.map → p-9cecd28d.entry.js.map} +0 -0
  392. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-605d99df.entry.js.map → p-a440734f.entry.js.map} +0 -0
  393. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-b9a494ae.entry.js.map → p-ab553e80.entry.js.map} +0 -0
  394. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-a4df55c4.entry.js.map → p-b202a599.entry.js.map} +0 -0
  395. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-fcd5028f.entry.js.map → p-bdb9bdc3.entry.js.map} +0 -0
  396. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-81f9f367.entry.js.map → p-cebe3a25.entry.js.map} +0 -0
  397. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-76b020f0.entry.js.map → p-d2f7b4a9.entry.js.map} +0 -0
  398. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-c45dc75d.entry.js.map → p-e8050420.entry.js.map} +0 -0
  399. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-412fc8d6.entry.js.map → p-eee2d131.entry.js.map} +0 -0
  400. /package/umd/modules/@postnord/web-components/postnord-web-components/{p-d3521b5d.entry.js.map → p-fb5d6d47.entry.js.map} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"names":["pnProgressIndicatorStepCss","PnProgressIndicatorStepStyle0","PnProgressIndicatorStep","setactivestep","setActiveStepHandler","this","done","activated","emit","index","componentWillLoad","checkStatus","componentDidUpdate","checked","activeStep","active","getClassNames","className","render","h","Host","key","class","onClick","name","xmlns","id","version","viewBox","fill","points","stroke","white"],"sources":["src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.scss?tag=pn-progress-indicator-step","src/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-progress-indicator-step {\n display: flex;\n flex: 1 0 4em;\n\n &:first-child {\n flex: 0 0 auto;\n\n .progress-line {\n display: none;\n }\n\n .info-container {\n transform: translateX(-50%);\n left: 50%;\n }\n }\n}\n\n.pn-progress-indicator-step {\n position: relative;\n display: flex;\n flex: 1 0 4em;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n -webkit-tap-highlight-color: transparent;\n\n .circle {\n width: 1.5em;\n height: 1.5em;\n padding: 0.3rem;\n border-radius: 50%;\n background-color: main.$gray50;\n @include main.pn-transition('background-color');\n }\n\n .info-container {\n position: absolute;\n bottom: -2.5em;\n right: 0;\n transform: translateX(50%) translateX(-1.2rem);\n white-space: nowrap;\n color: main.$gray50;\n display: flex;\n align-items: center;\n flex-direction: column;\n font-size: 1em;\n font-weight: normal;\n @include main.pn-transition('color');\n\n .pn-icon-svg {\n height: 1.7em;\n width: 1.7em;\n margin-bottom: 0.1em;\n }\n\n .pn-icon-svg path,\n .pn-icon-svg polygon {\n fill: main.$gray50;\n }\n }\n\n .progress-line {\n flex: 1 1 auto;\n margin: auto 4px;\n height: 0.8rem;\n background-color: main.$gray50;\n position: relative;\n overflow: hidden;\n pointer-events: none;\n border-radius: 10rem;\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 0.8rem;\n width: 100%;\n background-color: main.$blue700;\n transform: translateX(-100%);\n @include main.pn-transition('transform');\n transition-delay: main.$timing;\n }\n }\n\n &.active {\n .info-container {\n color: main.$black;\n\n .pn-icon-svg path {\n fill: main.$black;\n }\n\n .pn-icon-svg polygon {\n fill: main.$black;\n }\n }\n }\n\n &.activated {\n cursor: pointer;\n }\n\n &.done,\n &.active {\n .progress-line:after {\n transform: translateX(0);\n }\n\n .circle {\n background-color: main.$blue700;\n }\n }\n\n &.done {\n .checkmark-path {\n stroke-linecap: round;\n stroke-dasharray: 27;\n stroke-dashoffset: -23;\n animation: dash main.$timing cubic-bezier(0.55, 0, 0.1, 1) both;\n }\n }\n}\n\n@keyframes dash {\n to {\n stroke-dashoffset: 0;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { white } from 'pn-design-assets/pn-assets/colors.js';\n\n/**\n * @deprecated This component will be removed in v8. Please use the `pn-progress-stepper` instead.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-feedback-progress-stepper--docs Use `pn-progress-stepper` instead.}\n */\n@Component({\n tag: 'pn-progress-indicator-step',\n styleUrl: 'pn-progress-indicator-step.scss',\n})\nexport class PnProgressIndicatorStep {\n @State() activated: boolean;\n @State() done: boolean;\n\n /** Set by the parent component. Do not use manually. @hide true */\n @Prop() activeStep: number;\n /** Set by the parent component. Do not use manually. @hide true */\n @Prop() index: number;\n /** The step name. */\n @Prop() name: string;\n /** Set the step as checked, meaning a white check mark will appear. */\n @Prop() checked: boolean = false;\n /** Set by the parent component. Do not use manually. @hide true */\n @Prop() active?: 'yes' | 'no';\n\n @Event() setactivestep: EventEmitter<number>;\n setActiveStepHandler() {\n if (this.done || this.activated) {\n this.setactivestep.emit(this.index);\n }\n }\n\n componentWillLoad() {\n this.checkStatus();\n }\n\n componentDidUpdate() {\n this.checkStatus();\n }\n\n checkStatus() {\n if (!this.done) {\n this.done = this.checked || this.activeStep > this.index;\n }\n\n if (this.active === 'yes') {\n this.activated = true;\n } else if (this.active === 'no') {\n this.activated = false;\n this.done = false;\n } else if (!this.activated) {\n this.activated = this.activeStep >= this.index;\n }\n }\n\n getClassNames() {\n let className = 'pn-progress-indicator-step';\n if (this.done || this.checked) className += ' done';\n if (this.activated) className += ' activated';\n if (this.activeStep === this.index) className += ' active';\n return className;\n }\n\n render() {\n return (\n <Host class={this.getClassNames()} onClick={() => this.setActiveStepHandler()}>\n <div class=\"progress-line\" />\n <div class=\"info-container\">\n <slot />\n {this.name}\n </div>\n <div class=\"circle\">\n {this.done || this.checked ? (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enable-background=\"new 0 0 24 24\"\n id=\"checkmark\"\n version=\"1.0\"\n viewBox=\"0 0 24 24\"\n >\n <polyline\n class=\"checkmark-path\"\n fill=\"none\"\n points=\"20,6 9,17 4,12\"\n stroke={white}\n stroke-miterlimit=\"10\"\n stroke-width=\"3\"\n />\n </svg>\n ) : (\n ''\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;;;6FAAA,MAAMA,EAA6B,gzFACnC,MAAAC,EAAeD,E,MCUFE,EAAuB,M,mMAWP,M,sBAIlBC,cACT,oBAAAC,GACE,GAAIC,KAAKC,MAAQD,KAAKE,UAAW,CAC/BF,KAAKF,cAAcK,KAAKH,KAAKI,M,EAIjC,iBAAAC,GACEL,KAAKM,a,CAGP,kBAAAC,GACEP,KAAKM,a,CAGP,WAAAA,GACE,IAAKN,KAAKC,KAAM,CACdD,KAAKC,KAAOD,KAAKQ,SAAWR,KAAKS,WAAaT,KAAKI,K,CAGrD,GAAIJ,KAAKU,SAAW,MAAO,CACzBV,KAAKE,UAAY,I,MACZ,GAAIF,KAAKU,SAAW,KAAM,CAC/BV,KAAKE,UAAY,MACjBF,KAAKC,KAAO,K,MACP,IAAKD,KAAKE,UAAW,CAC1BF,KAAKE,UAAYF,KAAKS,YAAcT,KAAKI,K,EAI7C,aAAAO,GACE,IAAIC,EAAY,6BAChB,GAAIZ,KAAKC,MAAQD,KAAKQ,QAASI,GAAa,QAC5C,GAAIZ,KAAKE,UAAWU,GAAa,aACjC,GAAIZ,KAAKS,aAAeT,KAAKI,MAAOQ,GAAa,UACjD,OAAOA,C,CAGT,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOjB,KAAKW,gBAAiBO,QAAS,IAAMlB,KAAKD,wBACrDe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,6CACChB,KAAKmB,MAERL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACRjB,KAAKC,MAAQD,KAAKQ,QACjBM,EAAA,OACEM,MAAM,6BAA4B,oBAChB,gBAClBC,GAAG,YACHC,QAAQ,MACRC,QAAQ,aAERT,EAAA,YACEG,MAAM,iBACNO,KAAK,OACLC,OAAO,iBACPC,OAAQC,EAAK,oBACK,KAAI,eACT,OAEX,I","ignoreList":[]}
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- import{r as t,c as e,g as n,h as i,a as s}from"./p-43660913.js";import{u as r,k as o,e as a}from"./p-f64d17a6.js";const c='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>';const u=c;const h='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a1 1 0 0 1 1 1v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2h8V3a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';const d=h;const l={DECREASE:{en:"Decrease",sv:"Minska",da:"Reducere",fi:"Vähentää",no:"Redusere"},INCREASE:{en:"Increase",sv:"Öka",da:"Øge",fi:"Lisääntyä",no:"Øke"},MAX_VALUE_MESSAGE:{en:"Maximum value is ",sv:"Högsta värde är ",da:"Højeste værdi er",fi:"Korkein arvo on",no:"Høyeste verdi er"},MIN_VALUE_MESSAGE:{en:"Minimum value is ",sv:"Lägsta värde är ",da:"Laveste værdi er ",fi:"Pienin arvo on ",no:"Laveste verdi er "}};const p="pn-counter{display:inline-block}pn-counter .pn-counter{display:inline-flex;flex-direction:column}pn-counter .pn-counter-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-label{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-label>span{font-size:0.875em}pn-counter .pn-counter-input{--pn-counter-ch:0ch;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);text-align:center;width:100%;max-width:calc(3.5em + var(--pn-counter-ch));outline:0.2rem solid transparent;outline-offset:0.2rem}pn-counter .pn-counter-input:-webkit-autofill,pn-counter .pn-counter-input:-webkit-autofill:hover,pn-counter .pn-counter-input:-webkit-autofill:focus,pn-counter .pn-counter-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-input{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-input::placeholder{color:#5e554a;font-weight:normal}pn-counter .pn-counter-input:hover{border-color:#005d92}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92}pn-counter .pn-counter-input:read-only{border-color:#ffffff}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input::-webkit-inner-spin-button,pn-counter .pn-counter-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-counter .pn-counter-input[type=number]{appearance:textfield}pn-counter .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-items[data-hidebuttons]{gap:0}pn-counter .pn-counter-items[data-hidebuttons]>pn-button{transform:scale(0) translateZ(0);width:0}pn-counter .pn-counter-items>pn-button{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items>pn-button{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-counter .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}";const f=p;const b=class{constructor(n){t(this,n);this.counterInput=e(this,"counterInput",7);this.clearAriaTimer=undefined;this.displaySrValue=false;this.showMinMaxMessage=false;this.lastDispatchedValue=undefined;this.interactType=undefined;this.label=undefined;this.helpertext=undefined;this.value=0;this.counterid=this.id;this.language=null;this.labelDecrease=undefined;this.labelIncrease=undefined;this.minMessage=undefined;this.maxMessage=undefined;this.name=undefined;this.min=undefined;this.max=undefined;this.step=1;this.list=undefined;this.required=false;this.readonly=false;this.disabled=false}id=`pn-counter-${r()}`;idLabel=`${this.id}-label`;idText=`${this.id}-text`;idAmount=`${this.id}-count`;counterElement;get hostElement(){return n(this)}counterInput;watchValue(){this.showSrContent();this.showMinMaxMessage=false;if(this.hasMin()&&this.value<this.min){this.setMin();this.showMinMaxMessage=true}if(this.hasMax()&&this.value>this.max){this.setMax();this.showMinMaxMessage=true}if(this.lastDispatchedValue!==this.value)this.counterInput.emit({value:this.value,input:this.interactType==="input",decrease:this.interactType==="decrease",increase:this.interactType==="increase"});this.lastDispatchedValue=this.value;this.handleInputLength()}handleId(){this.idLabel=`${this.counterid}-label`;this.idText=`${this.counterid}-text`;this.idAmount=`${this.counterid}-count`}async componentWillLoad(){this.handleId();if(this.language)return;await o(this.hostElement)}componentDidLoad(){this.counterElement=this.hostElement.querySelector(".pn-counter-input");this.handleInputLength()}setVal(t){const{valueAsNumber:e}=t.target;if(isNaN(e))return;this.interactType="input";this.value=e}setMin(){if(this.hasMin())this.value=this.min}setMax(){if(this.hasMax())this.value=this.max}hasMin(){return typeof this.min==="number"}hasMax(){return typeof this.max==="number"}decreaseAmount(){if(this.hasMin()&&this.value<=this.min)this.showMinMaxMessage=true;this.interactType="decrease";this.value=this.value-this.step}increaseAmount(){if(this.hasMax()&&this.value>=this.max)this.showMinMaxMessage=true;this.interactType="increase";this.value=this.value+this.step}keyBoardInput(t){t.stopImmediatePropagation();if(!/^(Home|End)$/.test(t.key))return;t.preventDefault();this.interactType="input";if(t.key==="Home")this.setMin();if(t.key==="End")this.setMax()}showSrContent(){if(this.clearAriaTimer){clearTimeout(this.clearAriaTimer)}this.displaySrValue=true;this.clearAriaTimer=setTimeout((()=>{this.displaySrValue=false}),4e3)}toggleMinMaxMessage(){const t=this.value===this.max;const e=`${t?"MAX":"MIN"}_VALUE_MESSAGE`;const n=this.translate(e)+`${t?this.max:this.min}`.toString();return t?this.maxMessage||n:this.minMessage||n}getTextMessage(t=false){if(this.showMinMaxMessage)return this.toggleMinMaxMessage();return t?this.value.toString():this.helpertext}describedbyIds(){const t=[];if(this.helpertext)t.push(this.idText);if(this.displaySrValue)t.push(this.idAmount);if(t.length===0)return null;return t.join(" ")}translate(t){return l?.[t]?.[this.language||a]}noButtons(){return this.disabled||this.readonly}handleInputLength(){const t=this.max?this.max.toString():this.value.toString();if(t.length>3)this.counterElement.style.setProperty("--pn-counter-ch",`${t.length-3}ch`);else this.counterElement.style.setProperty("--pn-counter-ch","0ch")}render(){return i(s,{key:"2fe59aa7c06e3005cd3f9c8b633bf3ee3c85833b"},i("div",{key:"206308ce9ff21a303013164a3ec4015074d494b2",class:"pn-counter",role:"group","aria-labelledby":this.idLabel,"aria-describedby":this.describedbyIds()},i("label",{key:"6843e23ed0c46cf33aaa6b83c9c7304775dba549",htmlFor:this.counterid,class:"pn-counter-label",id:this.idLabel},i("span",{key:"cbc609092923ef8806d7b5e77beb26021b490d44"},this.label)),i("div",{key:"df51b364dc11c020d390f3bed823caf7063a9c94",class:"pn-counter-items","data-hidebuttons":this.noButtons()},i("pn-button",{key:"52413b869322b9398eddfb81713609205594d59f","data-decrease":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:u,iconOnly:true,arialabel:this.labelDecrease||this.translate("DECREASE"),onClick:()=>this.decreaseAmount()}),i("input",{key:"8c9dd73dba29a17df0515758a48be4f4f8798bbf",id:this.counterid,class:"pn-counter-input",type:"number",min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,required:this.required,readonly:this.readonly,disabled:this.disabled,"aria-describedby":this.describedbyIds(),onInput:t=>this.setVal(t),onKeyDown:t=>this.keyBoardInput(t)}),i("pn-button",{key:"c10fc2e4f25708ed81dc95b8ea07c0c07803df1f","data-increase":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:d,iconOnly:true,arialabel:this.labelIncrease||this.translate("INCREASE"),onClick:()=>this.increaseAmount()})),!!this.getTextMessage()&&i("p",{key:"e01ab71ae17a042681b5c3a87766bac914c6be10",id:this.idText,class:"pn-counter-helpertext"},i("span",{key:"d51a1a0e851e7a6afe79a3c384167324c906939a"},this.getTextMessage())),i("p",{key:"c89af26fd950c7166cec80b08feb1651feb54bba",id:this.idAmount,class:"pn-counter-sr-only","aria-live":"assertive"},this.displaySrValue?this.getTextMessage(true):"")))}static get watchers(){return{value:["watchValue"],counterid:["handleId"]}}};b.style=f;export{b as pn_counter};
6
- //# sourceMappingURL=p-c2bbbcaa.entry.js.map
5
+ import{r as t,c as e,g as n,h as i,a as s}from"./p-43660913.js";import{u as r,k as o,e as a}from"./p-f64d17a6.js";const c='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1" clip-rule="evenodd"/></svg>';const u=c;const h='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a1 1 0 0 1 1 1v8h8a1 1 0 1 1 0 2h-8v8a1 1 0 1 1-2 0v-8H3a1 1 0 1 1 0-2h8V3a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';const d=h;const l={DECREASE:{en:"Decrease",sv:"Minska",da:"Reducere",fi:"Vähentää",no:"Redusere"},INCREASE:{en:"Increase",sv:"Öka",da:"Øge",fi:"Lisääntyä",no:"Øke"},MAX_VALUE_MESSAGE:{en:"Maximum value is ",sv:"Högsta värde är ",da:"Højeste værdi er",fi:"Korkein arvo on",no:"Høyeste verdi er"},MIN_VALUE_MESSAGE:{en:"Minimum value is ",sv:"Lägsta värde är ",da:"Laveste værdi er ",fi:"Pienin arvo on ",no:"Laveste verdi er "}};const p="pn-counter{display:inline-block}pn-counter .pn-counter{display:inline-flex;flex-direction:column}pn-counter .pn-counter-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-label{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-label>span{font-size:0.875em}pn-counter .pn-counter-input{--pn-counter-ch:0ch;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);text-align:center;width:100%;max-width:calc(3.5em + var(--pn-counter-ch));outline:0.2rem solid transparent;outline-offset:0.2rem}pn-counter .pn-counter-input:-webkit-autofill,pn-counter .pn-counter-input:-webkit-autofill:hover,pn-counter .pn-counter-input:-webkit-autofill:focus,pn-counter .pn-counter-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-input{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-input::placeholder{color:#5e554a;font-weight:normal}pn-counter .pn-counter-input:hover{border-color:#005d92}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input:focus-visible{outline-color:#005d92}pn-counter .pn-counter-input:read-only{border-color:#ffffff}pn-counter .pn-counter-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-counter .pn-counter-input::-webkit-inner-spin-button,pn-counter .pn-counter-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}pn-counter .pn-counter-input[type=number]{appearance:textfield}pn-counter .pn-counter-items{display:inline-flex;flex-direction:row;gap:0.5em;transition-property:gap;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-items[data-hidebuttons]{gap:0}pn-counter .pn-counter-items[data-hidebuttons]>pn-button{transform:scale(0) translateZ(0);width:0}pn-counter .pn-counter-items>pn-button{transform:scale(1) translateZ(0);transform-origin:center center;width:3em;transition-property:transform, width;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-counter .pn-counter-items>pn-button{transition-duration:0s;transition-delay:0s}}pn-counter .pn-counter-helpertext{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-counter .pn-counter-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}";const f=p;const b=class{constructor(n){t(this,n);this.counterInput=e(this,"counterInput",7);this.clearAriaTimer=undefined;this.displaySrValue=false;this.showMinMaxMessage=false;this.lastDispatchedValue=undefined;this.interactType=undefined;this.label=undefined;this.helpertext=undefined;this.value=0;this.counterid=this.id;this.language=null;this.labelDecrease=undefined;this.labelIncrease=undefined;this.minMessage=undefined;this.maxMessage=undefined;this.name=undefined;this.min=undefined;this.max=undefined;this.step=1;this.list=undefined;this.required=false;this.readonly=false;this.disabled=false}id=`pn-counter-${r()}`;idLabel=`${this.id}-label`;idText=`${this.id}-text`;idAmount=`${this.id}-count`;counterElement;get hostElement(){return n(this)}counterInput;watchValue(){this.showSrContent();this.showMinMaxMessage=false;if(this.hasMin()&&this.value<this.min){this.setMin();this.showMinMaxMessage=true}if(this.hasMax()&&this.value>this.max){this.setMax();this.showMinMaxMessage=true}if(this.lastDispatchedValue!==this.value)this.counterInput.emit({value:this.value,input:this.interactType==="input",decrease:this.interactType==="decrease",increase:this.interactType==="increase"});this.lastDispatchedValue=this.value;this.handleInputLength()}handleId(){this.idLabel=`${this.counterid}-label`;this.idText=`${this.counterid}-text`;this.idAmount=`${this.counterid}-count`}async componentWillLoad(){this.handleId();if(this.language)return;await o(this.hostElement)}componentDidLoad(){this.counterElement=this.hostElement.querySelector(".pn-counter-input");this.handleInputLength()}setVal(t){const{valueAsNumber:e}=t.target;if(isNaN(e))return;this.interactType="input";this.value=e}setMin(){if(this.hasMin())this.value=this.min}setMax(){if(this.hasMax())this.value=this.max}hasMin(){return typeof this.min==="number"}hasMax(){return typeof this.max==="number"}decreaseAmount(){if(this.hasMin()&&this.value<=this.min)this.showMinMaxMessage=true;this.interactType="decrease";this.value=this.value-this.step}increaseAmount(){if(this.hasMax()&&this.value>=this.max)this.showMinMaxMessage=true;this.interactType="increase";this.value=this.value+this.step}keyBoardInput(t){t.stopImmediatePropagation();if(!/^(Home|End)$/.test(t.key))return;t.preventDefault();this.interactType="input";if(t.key==="Home")this.setMin();if(t.key==="End")this.setMax()}showSrContent(){if(this.clearAriaTimer){clearTimeout(this.clearAriaTimer)}this.displaySrValue=true;this.clearAriaTimer=setTimeout((()=>{this.displaySrValue=false}),4e3)}toggleMinMaxMessage(){const t=this.value===this.max;const e=`${t?"MAX":"MIN"}_VALUE_MESSAGE`;const n=this.translate(e)+`${t?this.max:this.min}`.toString();return t?this.maxMessage||n:this.minMessage||n}getTextMessage(t=false){if(this.showMinMaxMessage)return this.toggleMinMaxMessage();return t?this.value.toString():this.helpertext}describedbyIds(){const t=[];if(this.helpertext)t.push(this.idText);if(this.displaySrValue)t.push(this.idAmount);if(t.length===0)return null;return t.join(" ")}translate(t){return l?.[t]?.[this.language||a]}noButtons(){return this.disabled||this.readonly}handleInputLength(){const t=this.max?this.max.toString():this.value.toString();if(t.length>3)this.counterElement.style.setProperty("--pn-counter-ch",`${t.length-3}ch`);else this.counterElement.style.setProperty("--pn-counter-ch","0ch")}render(){return i(s,{key:"ae9451959e2ebc720b69af2942deaa5d94e36565"},i("div",{key:"f631dd7d8c7acbb4a459b46da53ea3445ae96480",class:"pn-counter",role:"group","aria-labelledby":this.idLabel,"aria-describedby":this.describedbyIds()},i("label",{key:"2538568f65666aedc3a0f9e2f3f681b4b9647cd6",htmlFor:this.counterid,class:"pn-counter-label",id:this.idLabel},i("span",{key:"73abf4ec6f185201f95799910a70518f61f85577"},this.label)),i("div",{key:"8e99e77f67aae105b90052ed74ba6c3a438e22ca",class:"pn-counter-items","data-hidebuttons":this.noButtons()},i("pn-button",{key:"8d6f5c4af2a524bb43a3023c130b2a6e1814c53d","data-decrease":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:u,iconOnly:true,arialabel:this.labelDecrease||this.translate("DECREASE"),onClick:()=>this.decreaseAmount()}),i("input",{key:"93ab63799f90cdecdbf3694ca56dfe92a5fe9e80",id:this.counterid,class:"pn-counter-input",type:"number",min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,required:this.required,readonly:this.readonly,disabled:this.disabled,"aria-describedby":this.describedbyIds(),onInput:t=>this.setVal(t),onKeyDown:t=>this.keyBoardInput(t)}),i("pn-button",{key:"a39f90c5ace631d8973a700f72d57a2490cad342","data-increase":true,appearance:"light",variant:"outlined","no-tab":this.noButtons(),icon:d,iconOnly:true,arialabel:this.labelIncrease||this.translate("INCREASE"),onClick:()=>this.increaseAmount()})),!!this.getTextMessage()&&i("p",{key:"0ed6cc20cb56637faa7d70c6fe903a5e412fff0e",id:this.idText,class:"pn-counter-helpertext"},i("span",{key:"def00a454a70d4ebc952cdfbfdb5b11eece74452"},this.getTextMessage())),i("p",{key:"eef2cf6b2f193779d616e09c32a9fc0ece4c5104",id:this.idAmount,class:"pn-counter-sr-only","aria-live":"assertive"},this.displaySrValue?this.getTextMessage(true):"")))}static get watchers(){return{value:["watchValue"],counterid:["handleId"]}}};b.style=f;export{b as pn_counter};
6
+ //# sourceMappingURL=p-1fe6fc61.entry.js.map
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- import{r as o,c as i,g as t,h as n,a as r}from"./p-43660913.js";import{a as e}from"./p-bf967b50.js";import{o as s,r as a}from"./p-f64d17a6.js";const c="pn-accordion-row{position:relative;margin:0 -0.25em 0}pn-accordion-row .pn-accordion-row{width:100%;display:flex;flex-direction:column}pn-accordion-row .pn-accordion-row-summary{color:#2d2013;position:relative;border:none;outline:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;padding:0.25em;font-size:1em;font-weight:400;border-radius:0.5em;list-style:none}pn-accordion-row .pn-accordion-row-summary:hover>.pn-accordion-row-text{background-color:#e0f8ff}pn-accordion-row .pn-accordion-row-summary:focus-visible>.pn-accordion-row-text{outline-color:#005d92}pn-accordion-row .pn-accordion-row-summary::-webkit-details-marker{display:none}pn-accordion-row .pn-accordion-row-text{position:relative;overflow:hidden;display:flex;align-items:center;padding:0.75em;background-color:#ffffff;border-radius:0.5em;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row .pn-accordion-row-text[data-transparent]{background-color:transparent}@media (prefers-reduced-motion: reduce){pn-accordion-row .pn-accordion-row-text{transition-duration:0s;transition-delay:0s}}pn-accordion-row .pn-accordion-row-text .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .pn-accordion-row-icon{margin-left:auto;flex-shrink:0;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-accordion-row .pn-accordion-row-icon{transition-duration:0s;transition-delay:0s}}pn-accordion-row .pn-accordion-row-icon path{fill:#005d92}pn-accordion-row .pn-accordion-row[open] .pn-accordion-row-icon{transform:rotate(-180deg)}pn-accordion-row .pn-accordion-row-content{color:#2d2013;display:block;padding:1em}";const d=c;const h=class{constructor(t){o(this,t);this.togglerow=i(this,"togglerow",7);this.isClosing=false;this.isExpanding=false;this.label=undefined;this.state=false;this.buttonid=undefined;this.contentid=undefined;this.transparent=false}details;summary;content;animation;defaultAnimationDuration=400;animationDuration=this.defaultAnimationDuration;get hostElement(){return t(this)}togglerow;handleRowState(o){if(o.detail!==this.state){this.details.style.overflow="hidden";this.closeAccordion()}}componentWillLoad(){const o=!!this.hostElement.querySelector('[slot="label"]');this.label=o?null:this.label}toggleOpen(o){const i=o??!this.state;if(this.state!==o)this.togglerow.emit({element:this.details,state:i});this.state=i}clickHandler(o){o.preventDefault();this.details.style.overflow="hidden";if(this.isClosing||!this.state)this.openAccordion();else if(this.isClosing||this.state)this.closeAccordion();const{x:i,width:t,y:n,top:r}=this.hostElement.getBoundingClientRect();const e=o.clientX===0&&o.clientY===0?{clientX:i+t-24,clientY:n-r}:o;s(e,this.hostElement,".pn-accordion-row-text")}openAccordion(){this.details.style.height=`${this.details.offsetHeight}px`;this.toggleOpen(true);requestAnimationFrame((()=>{this.isExpanding=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.cancelAnimations();this.animate(true,o,i)}))}closeAccordion(){this.isClosing=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight}px`;this.cancelAnimations();this.animate(false,o,i)}animate(o,i,t){if(a())this.animationDuration=0;else this.animationDuration=this.defaultAnimationDuration;this.animation=this.details.animate({height:[i,t]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish(o);this.animation.oncancel=()=>{if(o)this.isExpanding=false;else this.isClosing=false}}animationFinish(o){this.toggleOpen(o);this.cancelAnimations();this.isClosing=false;this.isExpanding=false;this.details.style.height="";this.details.style.overflow=""}cancelAnimations(){if(this.animation)this.animation.cancel()}render(){return n(r,{key:"9f3142a471217bc0656c4d5641c420262a913c13"},n("details",{key:"c742d23b97fe2d489166f18f53b3e5f0d12107d8",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},n("summary",{key:"d061093bf3bb58150d4bbb102caf9da3e9559fb8",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},n("div",{key:"921e67cc639e701df60a7bc359d3415ccdec39e3",class:"pn-accordion-row-text","data-transparent":this.transparent},this.label?this.label:"",n("slot",{key:"e355acdeeb2e62e4056837b26f808d3e5663343e",name:"label"}),n("pn-icon",{key:"c10681330981f5d019db4d6f7f6cd03d3c67234b",class:"pn-accordion-row-icon",icon:e}))),n("div",{key:"ddb95ef323966c0c55292dde2b5776e0700bf27a",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},n("slot",{key:"e0ded60210d472842a8aa5cd87a6374ad7120e58"}))))}};h.style=d;export{h as pn_accordion_row};
6
- //# sourceMappingURL=p-203ad7de.entry.js.map
5
+ import{r as o,c as i,g as t,h as n,a as r}from"./p-43660913.js";import{c as e}from"./p-99600bc7.js";import{o as a,r as s}from"./p-f64d17a6.js";const c="pn-accordion-row{position:relative;margin:0 -0.25em 0}pn-accordion-row .pn-accordion-row{width:100%;display:flex;flex-direction:column}pn-accordion-row .pn-accordion-row-summary{color:#2d2013;position:relative;border:none;outline:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:100%;padding:0.25em;font-size:1em;font-weight:400;border-radius:0.5em;list-style:none}pn-accordion-row .pn-accordion-row-summary:hover>.pn-accordion-row-text{background-color:#e0f8ff}pn-accordion-row .pn-accordion-row-summary:focus-visible>.pn-accordion-row-text{outline-color:#005d92}pn-accordion-row .pn-accordion-row-summary::-webkit-details-marker{display:none}pn-accordion-row .pn-accordion-row-text{position:relative;overflow:hidden;display:flex;align-items:center;padding:0.75em;background-color:#ffffff;border-radius:0.5em;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row .pn-accordion-row-text[data-transparent]{background-color:transparent}@media (prefers-reduced-motion: reduce){pn-accordion-row .pn-accordion-row-text{transition-duration:0s;transition-delay:0s}}pn-accordion-row .pn-accordion-row-text .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .pn-accordion-row-icon{margin-left:auto;flex-shrink:0;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-accordion-row .pn-accordion-row-icon{transition-duration:0s;transition-delay:0s}}pn-accordion-row .pn-accordion-row-icon path{fill:#005d92}pn-accordion-row .pn-accordion-row[open] .pn-accordion-row-icon{transform:rotate(-180deg)}pn-accordion-row .pn-accordion-row-content{color:#2d2013;display:block;padding:1em}";const d=c;const h=class{constructor(t){o(this,t);this.togglerow=i(this,"togglerow",7);this.isClosing=false;this.isExpanding=false;this.label=undefined;this.state=false;this.buttonid=undefined;this.contentid=undefined;this.transparent=false}details;summary;content;animation;defaultAnimationDuration=400;animationDuration=this.defaultAnimationDuration;get hostElement(){return t(this)}togglerow;handleRowState(o){if(o.detail!==this.state){this.details.style.overflow="hidden";this.closeAccordion()}}componentWillLoad(){const o=!!this.hostElement.querySelector('[slot="label"]');this.label=o?null:this.label}toggleOpen(o){const i=o??!this.state;if(this.state!==o)this.togglerow.emit({element:this.details,state:i});this.state=i}clickHandler(o){o.preventDefault();this.details.style.overflow="hidden";if(this.isClosing||!this.state)this.openAccordion();else if(this.isClosing||this.state)this.closeAccordion();const{x:i,width:t,y:n,top:r}=this.hostElement.getBoundingClientRect();const e=o.clientX===0&&o.clientY===0?{clientX:i+t-24,clientY:n-r}:o;a(e,this.hostElement,".pn-accordion-row-text")}openAccordion(){this.details.style.height=`${this.details.offsetHeight}px`;this.toggleOpen(true);requestAnimationFrame((()=>{this.isExpanding=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight+this.content.offsetHeight}px`;this.cancelAnimations();this.animate(true,o,i)}))}closeAccordion(){this.isClosing=true;const o=`${this.details.offsetHeight}px`;const i=`${this.summary.offsetHeight}px`;this.cancelAnimations();this.animate(false,o,i)}animate(o,i,t){if(s())this.animationDuration=0;else this.animationDuration=this.defaultAnimationDuration;this.animation=this.details.animate({height:[i,t]},{duration:this.animationDuration,easing:"cubic-bezier(0.6, 0, 0.2, 1)"});this.animation.onfinish=()=>this.animationFinish(o);this.animation.oncancel=()=>{if(o)this.isExpanding=false;else this.isClosing=false}}animationFinish(o){this.toggleOpen(o);this.cancelAnimations();this.isClosing=false;this.isExpanding=false;this.details.style.height="";this.details.style.overflow=""}cancelAnimations(){if(this.animation)this.animation.cancel()}render(){return n(r,{key:"0dcedaab706f95589734c04230abbdbeca16cdf1"},n("details",{key:"58bead8dce64594af81aae11a42beea75ba0db88",class:"pn-accordion-row",open:this.state,ref:o=>this.details=o},n("summary",{key:"7447539647210cb5b132ce16d7019e310c8ca1f4",id:this.buttonid,class:"pn-accordion-row-summary",onClick:o=>this.clickHandler(o),ref:o=>this.summary=o},n("div",{key:"83c87346e27703cab3203920848691fc8d3d007f",class:"pn-accordion-row-text","data-transparent":this.transparent},this.label?this.label:"",n("slot",{key:"8904be6cbec811925b0fa935ed10c4b7bc12fb5d",name:"label"}),n("pn-icon",{key:"cf71062d11b3a20c106dec2bec2aab1dc4bf0c7f",class:"pn-accordion-row-icon",icon:e}))),n("div",{key:"ae73f9fa6e7121352979ec2dad9a4620cff58a91",id:this.contentid,class:"pn-accordion-row-content",ref:o=>this.content=o},n("slot",{key:"4d7d894af656c1b7e95028832611530d04f3d439"}))))}};h.style=d;export{h as pn_accordion_row};
6
+ //# sourceMappingURL=p-23fdc4b6.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["pnAccordionRowCss","PnAccordionRowStyle0","PnAccordionRow","details","summary","content","animation","defaultAnimationDuration","animationDuration","this","togglerow","handleRowState","event","detail","state","style","overflow","closeAccordion","componentWillLoad","slottedLabel","hostElement","querySelector","label","toggleOpen","open","emit","element","clickHandler","e","preventDefault","isClosing","openAccordion","x","width","y","top","getBoundingClientRect","clientCor","clientX","clientY","ripple","height","offsetHeight","requestAnimationFrame","isExpanding","startHeight","endHeight","cancelAnimations","animate","reduceMotion","duration","easing","onfinish","animationFinish","oncancel","cancel","render","h","Host","key","class","ref","el","id","buttonid","onClick","transparent","name","icon","chevron_down","contentid"],"sources":["src/components/content/pn-accordion/row/pn-accordion-row.scss?tag=pn-accordion-row","src/components/content/pn-accordion/row/pn-accordion-row.tsx"],"sourcesContent":["@use 'src/globals/main';\n\npn-accordion-row {\n position: relative;\n margin: 0 -0.25em 0;\n}\n\npn-accordion-row .pn-accordion-row {\n width: 100%;\n display: flex;\n flex-direction: column;\n\n &-summary {\n color: main.$gray900;\n position: relative;\n border: none;\n outline: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n width: 100%;\n padding: 0.25em;\n font-size: 1em;\n font-weight: 400;\n border-radius: 0.5em;\n\n list-style: none;\n\n &:hover > .pn-accordion-row-text {\n background-color: main.$blue50;\n }\n\n &:focus-visible > .pn-accordion-row-text {\n @include main.pn-focus-visible();\n }\n\n &::-webkit-details-marker {\n display: none;\n }\n }\n\n &-text {\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n padding: 0.75em;\n background-color: main.$white;\n border-radius: 0.5em;\n -webkit-tap-highlight-color: transparent;\n\n &[data-transparent] {\n background-color: transparent;\n }\n\n @include main.pn-focus-base();\n @include main.pn-transition('background-color, outline-color');\n @include main.pn-ripple(main.$blue700);\n }\n\n &-icon {\n margin-left: auto;\n flex-shrink: 0;\n @include main.pn-transition('transform');\n path {\n fill: main.$blue700;\n }\n }\n\n &[open] .pn-accordion-row-icon {\n transform: rotate(-180deg);\n }\n\n &-content {\n color: main.$gray900;\n display: block;\n padding: 1em;\n }\n}\n","import { Component, h, Host, Element, Event, EventEmitter, Prop, State, Listen } from '@stencil/core';\nimport { chevron_down } from 'pn-design-assets/pn-assets/icons.js';\nimport { reduceMotion, ripple } from '@/index';\n\n/**\n * Use this row component inside a `pn-accordion` to create an accordion group.\n *\n * **Note**: you can use the `pn-accordion-row` without the parent accordion.\n * But you will have to style the gap between each row.\n *\n * @slot label - Include your own HTML as the label.\n * ```\n * <h3 slot=\"label\">Custom title</h3>\n * ```\n */\n@Component({\n tag: 'pn-accordion-row',\n styleUrl: 'pn-accordion-row.scss',\n})\nexport class PnAccordionRow {\n private details: HTMLDetailsElement;\n private summary: HTMLElement;\n private content: HTMLDivElement;\n private animation: Animation;\n\n private readonly defaultAnimationDuration: number = 400;\n private animationDuration: number = this.defaultAnimationDuration;\n\n @Element() hostElement: HTMLElement;\n\n @State() isClosing = false;\n @State() isExpanding = false;\n\n /** The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom HTML content in there. */\n @Prop({ mutable: true }) label: string;\n /** The open/close status of the accordion row. */\n @Prop({ mutable: true }) state?: boolean = false;\n\n /** Optional unique id for the `summary` element. @category ID */\n @Prop() buttonid?: string;\n /** Optional unique id for the `div` element containing the content. @category ID */\n @Prop() contentid?: string;\n /** Optional prop that removes the default white background on the accordion row */\n @Prop() transparent: boolean = false;\n\n /** Dispatched every time the row is toggled. Includes the row element and the boolean `state` prop. */\n @Event() togglerow: EventEmitter<{ element: HTMLElement; state: Boolean }>;\n\n /** Internal function for closing rows when using the `single` prop on the `pn-accordion`. */\n @Listen('rowstate')\n handleRowState(event: CustomEvent) {\n if (event.detail !== this.state) {\n this.details.style.overflow = 'hidden';\n this.closeAccordion();\n }\n }\n\n componentWillLoad() {\n const slottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.label = slottedLabel ? null : this.label;\n }\n\n private toggleOpen(open?: boolean) {\n const state = open ?? !this.state;\n if (this.state !== open) this.togglerow.emit({ element: this.details, state });\n this.state = state;\n }\n\n private clickHandler(e: MouseEvent) {\n e.preventDefault();\n\n this.details.style.overflow = 'hidden';\n\n if (this.isClosing || !this.state) this.openAccordion();\n else if (this.isClosing || this.state) this.closeAccordion();\n\n const { x, width, y, top } = this.hostElement.getBoundingClientRect();\n const clientCor = e.clientX === 0 && e.clientY === 0 ? { clientX: x + width - 24, clientY: y - top } : e;\n\n ripple(clientCor, this.hostElement, '.pn-accordion-row-text');\n }\n\n private openAccordion() {\n this.details.style.height = `${this.details.offsetHeight}px`;\n this.toggleOpen(true);\n\n requestAnimationFrame(() => {\n this.isExpanding = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(true, startHeight, endHeight);\n });\n }\n\n private closeAccordion() {\n this.isClosing = true;\n\n const startHeight = `${this.details.offsetHeight}px`;\n const endHeight = `${this.summary.offsetHeight}px`;\n\n this.cancelAnimations();\n\n this.animate(false, startHeight, endHeight);\n }\n\n private animate(open: boolean, startHeight: string, endHeight: string) {\n if (reduceMotion()) this.animationDuration = 0;\n else this.animationDuration = this.defaultAnimationDuration;\n\n this.animation = this.details.animate(\n {\n height: [startHeight, endHeight],\n },\n {\n duration: this.animationDuration,\n easing: 'cubic-bezier(0.6, 0, 0.2, 1)',\n },\n );\n\n this.animation.onfinish = () => this.animationFinish(open);\n\n this.animation.oncancel = () => {\n if (open) this.isExpanding = false;\n else this.isClosing = false;\n };\n }\n\n private animationFinish(open: boolean) {\n this.toggleOpen(open);\n this.cancelAnimations();\n\n this.isClosing = false;\n this.isExpanding = false;\n\n this.details.style.height = '';\n this.details.style.overflow = '';\n }\n\n private cancelAnimations() {\n if (this.animation) this.animation.cancel();\n }\n\n render() {\n return (\n <Host>\n <details class=\"pn-accordion-row\" open={this.state} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n <summary\n id={this.buttonid}\n class=\"pn-accordion-row-summary\"\n onClick={e => this.clickHandler(e)}\n ref={el => (this.summary = el)}\n >\n <div class=\"pn-accordion-row-text\" data-transparent={this.transparent}>\n {this.label ? this.label : ''}\n <slot name=\"label\" />\n\n <pn-icon class=\"pn-accordion-row-icon\" icon={chevron_down} />\n </div>\n </summary>\n\n <div id={this.contentid} class=\"pn-accordion-row-content\" ref={(el: HTMLDivElement) => (this.content = el)}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,6 @@
1
+ /*!
2
+ * Built with Stencil
3
+ * By PostNord.
4
+ */
5
+ import{r as t,c as n,g as o,h as a,a as i}from"./p-43660913.js";import{o as e}from"./p-f64d17a6.js";const r='pn-button{display:inline-block}pn-button .pn-button{position:relative;cursor:pointer;padding:0.75em 1.5em;width:round(up, 100%, 1px);min-height:3em;min-width:5.5em;border:none;border-radius:3em;font-family:inherit;font-size:1em;font-weight:500;color:#ffffff;background-color:transparent;display:flex;justify-content:center;align-items:center;text-decoration:none;line-height:1.5em;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}@media (prefers-reduced-motion: reduce){pn-button .pn-button{transition-duration:0s;transition-delay:0s}}pn-button .pn-button:focus-visible{outline-color:#005d92}pn-button .pn-button:disabled,pn-button .pn-button[aria-disabled]{cursor:auto;pointer-events:none}pn-button .pn-button-content{z-index:2;display:flex;justify-content:center;align-items:center;gap:0.5em;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){pn-button .pn-button-content{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;transform:translateX(-50%) translateY(0);border-radius:3em;border:none;background-color:#005d92;overflow:hidden;transition-property:width, background-color, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s, 0s, 0s}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-bg::after{content:"";position:absolute;will-change:transform;width:100%;height:100%;background-color:#0d234b;border-radius:inherit;left:0;transform:translateX(-103%);opacity:0.5;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-bg::after{transition-duration:0s;transition-delay:0s}}pn-button .pn-button .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#ffffff;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}pn-button .pn-button-tooltip{z-index:5;position:absolute;top:calc(100% + 0.35em);left:50%;pointer-events:none;color:#ffffff;background-color:#0d234b;box-shadow:0 0.075em 0.225em rgba(0, 0, 0, 0.1), 0 0.4em 0.9em rgba(0, 0, 0, 0.13);padding:0.25em 0.75em;border-radius:inherit;max-width:min(95vw, 40em);transform:translateX(-50%) translateX(var(--pn-dx));width:max-content;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-button .pn-button-tooltip{transition-duration:0s;transition-delay:0s}}pn-button .pn-button-tooltip-text{font-size:0.875em;font-weight:300}pn-button .pn-button pn-icon{flex-shrink:0}pn-button .pn-button pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button pn-spinner{position:absolute;transform:scale(0)}pn-button .pn-button:hover .pn-button-bg:after,pn-button .pn-button:focus .pn-button-bg:after{transform:translateX(0)}pn-button .pn-button[data-appearance=light]{color:#005d92}pn-button .pn-button[data-appearance=light] pn-icon .pn-icon-svg path{fill:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-circle{stroke:#005d92}pn-button .pn-button[data-appearance=light] pn-spinner .pn-spinner-dot{fill:#005d92}pn-button .pn-button[data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-appearance=light] .pn-button-bg .pn-ripple{background-color:#005d92}pn-button .pn-button[data-appearance=warning]{color:#a70707;outline:0.2rem solid transparent;outline-offset:0.2rem}pn-button .pn-button[data-appearance=warning] pn-icon .pn-icon-svg path{fill:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-circle{stroke:#a70707}pn-button .pn-button[data-appearance=warning] pn-spinner .pn-spinner-dot{fill:#a70707}pn-button .pn-button[data-appearance=warning] .pn-button-bg{border:0.0625em solid #a70707;background-color:#fdefee}pn-button .pn-button[data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-appearance=warning]:hover,pn-button .pn-button[data-appearance=warning]:focus{color:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-icon .pn-icon-svg path,pn-button .pn-button[data-appearance=warning]:focus pn-icon .pn-icon-svg path{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-circle,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-circle{stroke:#ffffff}pn-button .pn-button[data-appearance=warning]:hover pn-spinner .pn-spinner-dot,pn-button .pn-button[data-appearance=warning]:focus pn-spinner .pn-spinner-dot{fill:#ffffff}pn-button .pn-button[data-appearance=warning]:focus-visible{outline-color:#a70707}pn-button .pn-button[data-variant=borderless] .pn-button-bg{border:none;background-color:transparent}pn-button .pn-button[data-variant=borderless] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=borderless][data-appearance=light] .pn-button-bg:after{background-color:#e0f8ff;opacity:1}pn-button .pn-button[data-variant=borderless][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-variant=outlined] .pn-button-bg{border:0.0625em solid #ffffff;background-color:transparent}pn-button .pn-button[data-variant=outlined] .pn-button-bg:after{background-color:#ffffff;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg{border-color:#005d92;background-color:#ffffff}pn-button .pn-button[data-variant=outlined][data-appearance=light] .pn-button-bg:after{background-color:#00a0d6;opacity:0.1}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg{border-color:#a70707}pn-button .pn-button[data-variant=outlined][data-appearance=warning] .pn-button-bg:after{background-color:#a70707;opacity:1}pn-button .pn-button[data-left-icon] .pn-button-content{flex-direction:row-reverse}pn-button .pn-button[data-icon-only]{width:3em;min-width:0}pn-button .pn-button[data-icon-only][data-small]{width:2em;min-width:0;padding:0}pn-button .pn-button[data-small]{padding:0.375em 1em;min-height:2em;min-width:unset;line-height:1.25em}pn-button .pn-button[data-small] .pn-button-content{gap:0.25em}pn-button .pn-button[data-small] .pn-button-text{font-size:0.875em}pn-button .pn-button[data-small] pn-icon .pn-icon-svg{height:1.25em;width:1.25em}pn-button .pn-button[data-tooltip-open] .pn-button-tooltip{opacity:1}pn-button .pn-button[data-tooltip-upwards] .pn-button-tooltip{top:auto;bottom:calc(100% + 0.35em)}pn-button .pn-button[data-loading] pn-spinner{transform:scale(1);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){pn-button .pn-button[data-loading] pn-spinner{transition-duration:0s;transition-delay:0s}}pn-button .pn-button[data-loading] .pn-button-content{pointer-events:none;opacity:0;transition-delay:0s;transform:translateY(100%)}pn-button .pn-button[data-loading] .pn-button-bg{width:3em}pn-button .pn-button[data-loading][data-small] .pn-button-bg{width:2em}';const s=r;const p=class{constructor(o){t(this,o);this.pnClick=n(this,"pnClick",7);this.tooltipOpen=false;this.tooltipUpwards=false;this.label="";this.appearance="";this.variant="";this.small=false;this.loading=false;this.icon=undefined;this.iconOnly=false;this.leftIcon=false;this.tooltip=undefined;this.tooltipUp=false;this.type="button";this.form=undefined;this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.buttonId=null;this.arialabel=null;this.arialabelledby=null;this.ariacurrent=null;this.ariacontrols=null;this.ariapressed=null;this.ariahaspopup=null;this.ariaexpanded=null;this.noTab=false}buttonEl;tooltipEl;tooltipDx;openEvents=["mouseover","focus"];closeEvents=["mouseleave","blur","touchcancel","touchleave"];eventListeners=[...this.openEvents,...this.closeEvents];get hostElement(){return o(this)}openHandler(){if(this.tooltipOpen)this.checkTooltipPosition()}iconOnlyHandler(){this.checkTooltipPosition();if(this.tooltip)this.initTooltip();else this.removeTooltip()}pnClick;componentWillLoad(){this.tooltipUpwards=this.tooltipUp}componentDidLoad(){this.iconOnlyHandler()}getRect(t){return t.getBoundingClientRect()}initTooltip(){this.eventListeners.forEach((t=>this.buttonEl.addEventListener(t,this.toggleTooltip)))}removeTooltip(){this.eventListeners.forEach((t=>this.buttonEl.removeEventListener(t,this.toggleTooltip)))}toggleTooltip=t=>{this.tooltipOpen=this.openEvents.includes(t.type)};setTooltipOffset(){this.tooltipEl.style.setProperty("--pn-dx",`${this.tooltipDx}px`)}checkTooltipPosition(){this.tooltipEl.style.transform="translateX(-50%)";this.tooltipUpwards=this.tooltipUp;requestAnimationFrame((()=>{const{top:t,x:n,y:o,right:a,height:i}=this.getRect(this.tooltipEl);const e=16;this.tooltipDx=0;this.tooltipUpwards=this.tooltipUp?t>i:o+i>window.innerHeight;this.tooltipEl.style.transform="";if(n<0)this.tooltipDx=n*-1+e;if(a>window.innerWidth)this.tooltipDx=window.innerWidth-a-e-8;requestAnimationFrame((()=>this.setTooltipOffset()))}))}getAttributes(){const t=this.href?{href:this.href,rel:!this.rel&&this.target==="_blank"?"noopener":this.rel,target:this.target??null,download:this.download??null,"aria-current":this.ariacurrent,"aria-disabled":this.loading?"true":null}:{type:this.type,form:this.form,disabled:this.loading,"aria-pressed":this.ariapressed,"aria-controls":this.ariacontrols,"aria-haspopup":this.ariahaspopup,"aria-expanded":this.ariaexpanded};const n=["light","warning"];const o=["borderless","outlined"];return{tabindex:this.noTab||this.href&&this.loading?"-1":null,"data-small":this.small,"data-loading":this.loading,"data-tooltip-open":this.tooltipOpen,"data-tooltip-upwards":this.tooltipUpwards,"data-icon-only":this.showIconOnly(),"data-left-icon":this.leftIcon,"data-appearance":n.includes(this.appearance)?this.appearance:null,"data-variant":o.includes(this.variant)?this.variant:null,...t}}getTagName(){return this.href?"a":"button"}showIconOnly(){return!!this.icon&&this.iconOnly&&!!(this.tooltip||this.arialabel||this.arialabelledby)}handleClick(t){e(t,this.hostElement,".pn-button-bg");this.pnClick.emit(t)}render(){const t=this.getTagName();return a(i,{key:"3a706bd5d794474ce5204947a29747c9b349a498"},a(t,{key:"2a2f50005dd46fe9a45bd64894a3cbb7ae27c055",class:"pn-button",id:this.buttonId,"aria-label":this.arialabel,"aria-labelledby":this.arialabelledby,onClick:t=>this.handleClick(t),...this.getAttributes(),ref:t=>this.buttonEl=t},a("div",{key:"1c44b76aa62e31549b25a546c51ffd457ab4ae5d",class:"pn-button-bg"}),a("div",{key:"05ff0f5123666179851e5fc99a8f38bfe04eb39c",class:"pn-button-content"},a("div",{key:"76fc799235d5aee8c985c2399816e0bbba9cb779",class:"pn-button-text",hidden:this.showIconOnly()},this.label,a("slot",{key:"695ba8672a40e227bcaa40028ba25f27d6256691"})),!!this.icon&&a("pn-icon",{key:"4e167490d074fc72de0b2a7328be12fcaef4a6df",icon:this.icon})),a("pn-spinner",{key:"f914a0678f92c91609b0d84751d7c9214d4302c0",light:true}),a("div",{key:"c71a4da00f39e991c4d5a22ed03f7908d138937b",class:"pn-button-tooltip",hidden:!this.tooltip,ref:t=>this.tooltipEl=t},a("span",{key:"a0896edbda372dcac471fb95c62083cfcf4282eb",class:"pn-button-tooltip-text"},this.tooltip))))}static get watchers(){return{tooltipOpen:["openHandler"],tooltip:["iconOnlyHandler"]}}};p.style=s;const d="pn-spinner{display:inline-block}pn-spinner .pn-spinner{--pn-spinner-size:1.5em;--pn-spinner-color:main.$blue700;height:var(--pn-spinner-size);width:var(--pn-spinner-size);display:block;animation:rotate 1s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner{animation-duration:2s}}pn-spinner .pn-spinner-circle{stroke:var(--pn-spinner-color);transform-origin:center center;transform:rotate(-310deg);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:64;animation:loading 2s infinite;animation-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-spinner .pn-spinner-circle{animation-duration:4s}}pn-spinner .pn-spinner-dot{fill:var(--pn-spinner-color)}@keyframes loading{0%{stroke-dashoffset:55}50%{stroke-dashoffset:12}100%{stroke-dashoffset:55}}@keyframes rotate{from{transform:rotate(-180deg) scaleX(-1)}to{transform:rotate(180deg) scaleX(-1)}}";const u=d;const b=class{constructor(n){t(this,n);this.light=false;this.size=1.5}get hostElement(){return o(this)}getColor(){if(this.light)return"#fff";return"#005d92"}getSize(){return`${this.size}em`}render(){return a(i,{key:"a9ecba01b5b30a660a44439c714b7ad57cf02a88"},a("svg",{key:"03fbe990bf1ae0402fcb27707e0c1712d8a84492",class:"pn-spinner",style:{"--pn-spinner-size":this.getSize(),"--pn-spinner-color":this.getColor()},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},a("circle",{key:"c48784865cd9c8c3d55cd9b1bd3e0dff7a4ebe35",class:"pn-spinner-circle",cx:"12",cy:"12",r:"10","stroke-width":"3"}),a("circle",{key:"5f69d1bbbf864842f9ae54dc9a29b61603a83bff",class:"pn-spinner-dot",cx:"21.3",cy:"16",r:"1.48"})))}};b.style=u;export{p as pn_button,b as pn_spinner};
6
+ //# sourceMappingURL=p-240f6613.entry.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["pnButtonCss","PnButtonStyle0","PnButton","buttonEl","tooltipEl","tooltipDx","openEvents","closeEvents","eventListeners","this","openHandler","tooltipOpen","checkTooltipPosition","iconOnlyHandler","tooltip","initTooltip","removeTooltip","pnClick","componentWillLoad","tooltipUpwards","tooltipUp","componentDidLoad","getRect","element","getBoundingClientRect","forEach","e","addEventListener","toggleTooltip","removeEventListener","event","includes","type","setTooltipOffset","style","setProperty","transform","requestAnimationFrame","top","x","y","right","height","extraMargin","window","innerHeight","innerWidth","getAttributes","attrs","href","rel","target","download","ariacurrent","loading","form","disabled","ariapressed","ariacontrols","ariahaspopup","ariaexpanded","appearances","variations","tabindex","noTab","small","showIconOnly","leftIcon","appearance","variant","getTagName","icon","iconOnly","arialabel","arialabelledby","handleClick","ripple","hostElement","emit","render","TagName","h","Host","key","class","id","buttonId","onClick","ref","el","hidden","label","light","pnSpinnerCss","PnSpinnerStyle0","PnSpinner","getColor","getSize","size","xmlns","viewBox","fill","cx","cy","r"],"sources":["src/components/buttons/pn-button/pn-button.scss?tag=pn-button","src/components/buttons/pn-button/pn-button.tsx","src/components/feedback/pn-spinner/pn-spinner.scss?tag=pn-spinner","src/components/feedback/pn-spinner/pn-spinner.tsx"],"sourcesContent":["@use 'sass:string';\n@use 'src/globals/main';\n\npn-button {\n display: inline-block;\n}\n\npn-button .pn-button {\n position: relative;\n cursor: pointer;\n\n padding: 0.75em 1.5em;\n width: string.unquote('round(up, 100%, 1px)');\n min-height: 3em;\n min-width: 5.5em;\n\n border: none;\n border-radius: 3em;\n\n font-family: inherit;\n font-size: 1em;\n font-weight: 500;\n\n color: main.$white;\n background-color: transparent;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-decoration: none;\n line-height: 1.5em;\n -webkit-tap-highlight-color: transparent;\n\n @include main.pn-transition('color, outline-color');\n @include main.pn-focus();\n\n &:disabled,\n &[aria-disabled] {\n cursor: auto;\n pointer-events: none;\n }\n\n &-content {\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5em;\n\n @include main.pn-transition('opacity, transform');\n transition-delay: main.$timing;\n }\n\n // This is a separate element because it has to be a leaf node to avoid bogging down performance when animating\n &-bg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 50%;\n transform: translateX(-50%) translateY(0);\n border-radius: 3em;\n border: none;\n background-color: main.$blue700;\n overflow: hidden;\n\n @include main.pn-transition('width, background-color, border-color');\n transition-delay: main.$timing, 0s, 0s;\n\n // Hover element (sliding background)\n &::after {\n content: '';\n position: absolute;\n will-change: transform;\n width: 100%;\n height: 100%;\n background-color: main.$blue900;\n border-radius: inherit;\n left: 0;\n transform: translateX(-103%);\n opacity: 0.5;\n @include main.pn-transition('transform');\n }\n }\n\n @include main.pn-ripple(main.$white);\n\n &-tooltip {\n z-index: 5;\n position: absolute;\n top: calc(100% + 0.35em);\n left: 50%;\n pointer-events: none;\n\n color: main.$white;\n background-color: main.$blue900;\n box-shadow:\n 0 0.075em 0.225em rgba(0, 0, 0, 0.1),\n 0 0.4em 0.9em rgba(0, 0, 0, 0.13);\n\n padding: 0.25em 0.75em;\n border-radius: inherit;\n\n max-width: min(95vw, 40em);\n transform: translateX(-50%) translateX(var(--pn-dx));\n width: max-content;\n\n opacity: 0;\n @include main.pn-transition('opacity');\n\n &-text {\n font-size: 0.875em;\n font-weight: 300;\n }\n }\n\n pn-icon {\n flex-shrink: 0;\n .pn-icon-svg path {\n fill: main.$white;\n }\n }\n\n pn-spinner {\n position: absolute;\n transform: scale(0);\n }\n\n &:hover,\n &:focus {\n .pn-button-bg:after {\n transform: translateX(0);\n }\n }\n\n &[data-appearance='light'] {\n color: main.$blue700;\n\n pn-icon .pn-icon-svg path {\n fill: main.$blue700;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$blue700;\n }\n .pn-spinner-dot {\n fill: main.$blue700;\n }\n }\n\n .pn-button-bg {\n border-color: main.$blue700;\n background-color: main.$white;\n\n &:after {\n background-color: main.$blue50;\n opacity: 1;\n }\n\n .pn-ripple {\n background-color: main.$blue700;\n }\n }\n }\n\n &[data-appearance='warning'] {\n color: main.$warning;\n\n pn-icon .pn-icon-svg path {\n fill: main.$warning;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$warning;\n }\n .pn-spinner-dot {\n fill: main.$warning;\n }\n }\n\n .pn-button-bg {\n border: 0.0625em solid main.$warning;\n background-color: main.$coral50;\n\n &:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n\n &:hover,\n &:focus {\n color: main.$white;\n pn-icon .pn-icon-svg path {\n fill: main.$white;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$white;\n }\n .pn-spinner-dot {\n fill: main.$white;\n }\n }\n }\n\n @include main.pn-focus(main.$warning);\n }\n\n &[data-variant='borderless'] {\n .pn-button-bg {\n border: none;\n background-color: transparent;\n }\n\n .pn-button-bg:after {\n background-color: main.$white;\n opacity: 0.1;\n }\n &[data-appearance='light'] {\n .pn-button-bg:after {\n background-color: main.$blue50;\n opacity: 1;\n }\n }\n &[data-appearance='warning'] {\n .pn-button-bg:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n }\n\n &[data-variant='outlined'] {\n .pn-button-bg {\n border: 0.0625em solid main.$white;\n background-color: transparent;\n &:after {\n background-color: main.$white;\n opacity: 0.1;\n }\n }\n\n &[data-appearance='light'] .pn-button-bg {\n border-color: main.$blue700;\n background-color: main.$white;\n &:after {\n background-color: main.$blue400;\n opacity: 0.1;\n }\n }\n\n &[data-appearance='warning'] .pn-button-bg {\n border-color: main.$warning;\n &:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n }\n\n &[data-left-icon] .pn-button-content {\n flex-direction: row-reverse;\n }\n\n &[data-icon-only] {\n width: 3em;\n min-width: 0;\n\n &[data-small] {\n width: 2em;\n min-width: 0;\n padding: 0;\n }\n }\n\n &[data-small] {\n padding: 0.375em 1em;\n min-height: 2em;\n min-width: unset;\n line-height: 1.25em;\n\n .pn-button-content {\n gap: 0.25em;\n }\n\n .pn-button-text {\n font-size: 0.875em;\n }\n\n pn-icon .pn-icon-svg {\n height: 1.25em;\n width: 1.25em;\n }\n }\n\n &[data-tooltip-open] {\n .pn-button-tooltip {\n opacity: 1;\n }\n }\n\n &[data-tooltip-upwards] {\n .pn-button-tooltip {\n top: auto;\n bottom: calc(100% + 0.35em);\n }\n }\n\n &[data-loading] {\n pn-spinner {\n transform: scale(1);\n @include main.pn-transition('transform');\n transition-delay: main.$timing;\n }\n\n .pn-button-content {\n pointer-events: none;\n opacity: 0;\n transition-delay: 0s;\n transform: translateY(100%);\n }\n\n .pn-button-bg {\n width: 3em;\n }\n\n &[data-small] .pn-button-bg {\n width: 2em;\n }\n }\n}\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { ripple, PnButtonAppearance, PnButtonVariant } from '@/index';\n\n/**\n * The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.\n *\n * @nativeClick Use the `click` event to listen when the button is clicked.\n */\n@Component({\n tag: 'pn-button',\n styleUrl: 'pn-button.scss',\n})\nexport class PnButton {\n buttonEl: HTMLElement;\n tooltipEl: HTMLDivElement;\n tooltipDx: number;\n\n openEvents: string[] = ['mouseover', 'focus'];\n closeEvents: string[] = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];\n eventListeners: string[] = [...this.openEvents, ...this.closeEvents];\n\n @Element() hostElement: HTMLElement;\n\n @State() tooltipOpen: boolean = false;\n @State() tooltipUpwards: boolean = false;\n\n /** The label of the button, this is the same as using the default slot. */\n @Prop() label?: string = '';\n /**\n * Select the button appearance: default (blue), `light` (white) and `warning` (red).\n *\n * @category Visual\n */\n @Prop() appearance?: PnButtonAppearance = '';\n /**\n * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).\n *\n * @category Visual\n */\n @Prop() variant?: PnButtonVariant = '';\n /** Use the small button. @category Visual */\n @Prop() small?: boolean = false;\n /** Display the loading indicator. @category Visual */\n @Prop({ reflect: true }) loading?: boolean = false;\n\n /**\n * The SVG content of the icon you want.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}\n * @category Icon\n */\n @Prop() icon?: string;\n /**\n * Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.\n * @summary __You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__.\n * @see {@link icon}\n * @category Icon\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * Place the `icon` to the left of the button.\n *\n * @summary __You need an `icon` selected for this to work__.\n * @see {@link icon}\n * @category Icon\n */\n @Prop() leftIcon?: boolean = false;\n\n /**\n * When the user focus/hover the button, the `tooltip` text will show up.\n *\n * @category Tooltip\n */\n @Prop() tooltip?: string;\n /**\n * Prefer the tooltip to open upwards. Will still go downwards if there is no space.\n * @category Tooltip\n */\n @Prop() tooltipUp?: boolean = false;\n\n /** Select HTML button type. @category Button */\n @Prop() type?: 'button' | 'reset' | 'submit' | '' = 'button';\n /**\n * Connect this button to a HTML form.\n * @category Button\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}\n */\n @Prop() form?: string;\n\n /** Pass an href to make the button into link (a-tag). @category Link */\n @Prop() href?: string;\n /** The rel attribute of the link. @category Link */\n @Prop() rel?: string;\n /** The target attribute of the link. @category Link */\n @Prop() target?: string;\n /** The download attribute of the link. @category Link */\n @Prop() download?: string;\n\n /** HTML ID. @category HTML attributes */\n @Prop() buttonId?: string = null;\n /** HTML aria-label attribute. @category HTML attributes */\n @Prop() arialabel?: string = null;\n /** HTML aria-labelledby attribute. @category HTML attributes */\n @Prop() arialabelledby?: string = null;\n /** HTML aria-current attribute. @category HTML attributes */\n @Prop() ariacurrent?: string = null;\n /** HTML aria-controls attribute. @category HTML attributes */\n @Prop() ariacontrols?: string = null;\n /** HTML aria-pressed attribute. @category HTML attributes */\n @Prop() ariapressed?: string = null;\n /** HTML aria-haspopup attribute. @category HTML attributes */\n @Prop() ariahaspopup?: string = null;\n /** HTML aria-expanded attribute. @category HTML attributes */\n @Prop() ariaexpanded?: string = null;\n /** HTML tabindex. @category HTML attributes */\n @Prop() noTab?: boolean = false;\n\n @Watch('tooltipOpen')\n openHandler() {\n if (this.tooltipOpen) this.checkTooltipPosition();\n }\n\n @Watch('tooltip')\n iconOnlyHandler() {\n this.checkTooltipPosition();\n if (this.tooltip) this.initTooltip();\n else this.removeTooltip();\n }\n\n /**\n * This event is fired when the `button`/`a` element of the `pn-button` is clicked.\n * Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area\n * or if the button is `disabled` with the `loading` prop.\n **/\n @Event() pnClick: EventEmitter<MouseEvent>;\n\n componentWillLoad() {\n this.tooltipUpwards = this.tooltipUp;\n }\n\n componentDidLoad() {\n this.iconOnlyHandler();\n }\n\n getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n initTooltip() {\n this.eventListeners.forEach(e => this.buttonEl.addEventListener(e, this.toggleTooltip));\n }\n\n removeTooltip() {\n this.eventListeners.forEach(e => this.buttonEl.removeEventListener(e, this.toggleTooltip));\n }\n\n toggleTooltip = (event: MouseEvent | FocusEvent) => {\n this.tooltipOpen = this.openEvents.includes(event.type);\n };\n\n setTooltipOffset() {\n this.tooltipEl.style.setProperty('--pn-dx', `${this.tooltipDx}px`);\n }\n\n checkTooltipPosition() {\n this.tooltipEl.style.transform = 'translateX(-50%)';\n this.tooltipUpwards = this.tooltipUp;\n\n requestAnimationFrame(() => {\n const { top, x, y, right, height } = this.getRect(this.tooltipEl);\n const extraMargin = 16;\n this.tooltipDx = 0;\n\n this.tooltipUpwards = this.tooltipUp ? top > height : y + height > window.innerHeight;\n this.tooltipEl.style.transform = '';\n\n if (x < 0) this.tooltipDx = x * -1 + extraMargin;\n if (right > window.innerWidth) this.tooltipDx = window.innerWidth - right - extraMargin - 8;\n\n requestAnimationFrame(() => this.setTooltipOffset());\n });\n }\n\n getAttributes() {\n const attrs = this.href\n ? {\n 'href': this.href,\n 'rel': !this.rel && this.target === '_blank' ? 'noopener' : this.rel,\n 'target': this.target ?? null,\n 'download': this.download ?? null,\n 'aria-current': this.ariacurrent,\n 'aria-disabled': this.loading ? 'true' : null,\n }\n : {\n 'type': this.type,\n 'form': this.form,\n 'disabled': this.loading,\n 'aria-pressed': this.ariapressed,\n 'aria-controls': this.ariacontrols,\n 'aria-haspopup': this.ariahaspopup,\n 'aria-expanded': this.ariaexpanded,\n };\n\n const appearances: PnButtonAppearance[] = ['light', 'warning'];\n const variations: PnButtonVariant[] = ['borderless', 'outlined'];\n\n return {\n 'tabindex': this.noTab || (this.href && this.loading) ? '-1' : null,\n 'data-small': this.small,\n 'data-loading': this.loading,\n 'data-tooltip-open': this.tooltipOpen,\n 'data-tooltip-upwards': this.tooltipUpwards,\n 'data-icon-only': this.showIconOnly(),\n 'data-left-icon': this.leftIcon,\n 'data-appearance': appearances.includes(this.appearance) ? this.appearance : null,\n 'data-variant': variations.includes(this.variant) ? this.variant : null,\n ...attrs,\n };\n }\n\n getTagName() {\n return this.href ? 'a' : 'button';\n }\n\n showIconOnly(): boolean {\n return !!this.icon && this.iconOnly && !!(this.tooltip || this.arialabel || this.arialabelledby);\n }\n\n handleClick(event: MouseEvent) {\n ripple(event, this.hostElement, '.pn-button-bg');\n this.pnClick.emit(event);\n }\n\n render() {\n const TagName = this.getTagName();\n\n return (\n <Host>\n <TagName\n class=\"pn-button\"\n id={this.buttonId}\n aria-label={this.arialabel}\n aria-labelledby={this.arialabelledby}\n onClick={e => this.handleClick(e)}\n {...this.getAttributes()}\n ref={(el: HTMLElement) => (this.buttonEl = el)}\n >\n <div class=\"pn-button-bg\"></div>\n <div class=\"pn-button-content\">\n <div class=\"pn-button-text\" hidden={this.showIconOnly()}>\n {this.label}\n <slot />\n </div>\n {!!this.icon && <pn-icon icon={this.icon} />}\n </div>\n <pn-spinner light />\n\n <div class=\"pn-button-tooltip\" hidden={!this.tooltip} ref={el => (this.tooltipEl = el)}>\n <span class=\"pn-button-tooltip-text\">{this.tooltip}</span>\n </div>\n </TagName>\n </Host>\n );\n }\n}\n","@use 'src/globals/main';\n\npn-spinner {\n display: inline-block;\n}\n\npn-spinner .pn-spinner {\n --pn-spinner-size: 1.5em;\n --pn-spinner-color: main.$blue700;\n\n height: var(--pn-spinner-size);\n width: var(--pn-spinner-size);\n display: block;\n\n animation: rotate 1s infinite;\n animation-timing-function: main.$easing;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 2s;\n }\n\n &-circle {\n stroke: var(--pn-spinner-color);\n transform-origin: center center;\n transform: rotate(-310deg);\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 64;\n animation: loading 2s infinite;\n animation-timing-function: main.$easing;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 4s;\n }\n }\n\n &-dot {\n fill: var(--pn-spinner-color);\n }\n}\n\n@keyframes loading {\n 0% {\n stroke-dashoffset: 55;\n }\n 50% {\n stroke-dashoffset: 12;\n }\n 100% {\n stroke-dashoffset: 55;\n }\n}\n\n@keyframes rotate {\n from {\n transform: rotate(-180deg) scaleX(-1);\n }\n to {\n transform: rotate(180deg) scaleX(-1);\n }\n}\n","import { Component, Element, Prop, h, Host } from '@stencil/core';\n\n/** Display a spinner to indicate a loading state. */\n@Component({\n tag: 'pn-spinner',\n styleUrl: 'pn-spinner.scss',\n})\nexport class PnSpinner {\n @Element() hostElement: HTMLElement;\n\n /** Light version of the spinner. */\n @Prop() light: boolean = false;\n /** Size in em. */\n @Prop() size: number = 1.5;\n\n private getColor() {\n if (this.light) return '#fff';\n return '#005d92';\n }\n\n private getSize() {\n return `${this.size}em`;\n }\n\n render() {\n return (\n <Host>\n <svg\n class=\"pn-spinner\"\n style={{ '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle class=\"pn-spinner-circle\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"3\" />\n <circle class=\"pn-spinner-dot\" cx=\"21.3\" cy=\"16\" r=\"1.48\" />\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["pnButtonCss","PnButtonStyle0","PnButton","buttonEl","tooltipEl","tooltipDx","openEvents","closeEvents","eventListeners","this","openHandler","tooltipOpen","checkTooltipPosition","iconOnlyHandler","tooltip","initTooltip","removeTooltip","pnClick","componentWillLoad","tooltipUpwards","tooltipUp","componentDidLoad","getRect","element","getBoundingClientRect","forEach","e","addEventListener","toggleTooltip","removeEventListener","event","includes","type","setTooltipOffset","style","setProperty","transform","requestAnimationFrame","top","x","y","right","height","extraMargin","window","innerHeight","innerWidth","getAttributes","attrs","href","rel","target","download","ariacurrent","loading","form","disabled","ariapressed","ariacontrols","ariahaspopup","ariaexpanded","appearances","variations","tabindex","noTab","small","showIconOnly","leftIcon","appearance","variant","getTagName","icon","iconOnly","arialabel","arialabelledby","handleClick","ripple","hostElement","emit","render","TagName","h","Host","key","class","id","buttonId","onClick","ref","el","hidden","label","light","pnSpinnerCss","PnSpinnerStyle0","PnSpinner","getColor","getSize","size","xmlns","viewBox","fill","cx","cy","r"],"sources":["src/components/buttons/pn-button/pn-button.scss?tag=pn-button","src/components/buttons/pn-button/pn-button.tsx","src/components/feedback/pn-spinner/pn-spinner.scss?tag=pn-spinner","src/components/feedback/pn-spinner/pn-spinner.tsx"],"sourcesContent":["@use 'sass:string';\n@use 'src/globals/main';\n\npn-button {\n display: inline-block;\n}\n\npn-button .pn-button {\n position: relative;\n cursor: pointer;\n\n padding: 0.75em 1.5em;\n width: string.unquote('round(up, 100%, 1px)');\n min-height: 3em;\n min-width: 5.5em;\n\n border: none;\n border-radius: 3em;\n\n font-family: inherit;\n font-size: 1em;\n font-weight: 500;\n\n color: main.$white;\n background-color: transparent;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n text-decoration: none;\n line-height: 1.5em;\n -webkit-tap-highlight-color: transparent;\n\n @include main.pn-transition('color, outline-color');\n @include main.pn-focus();\n\n &:disabled,\n &[aria-disabled] {\n cursor: auto;\n pointer-events: none;\n }\n\n &-content {\n z-index: 2;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.5em;\n\n @include main.pn-transition('opacity, transform');\n transition-delay: main.$timing;\n }\n\n // This is a separate element because it has to be a leaf node to avoid bogging down performance when animating\n &-bg {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 50%;\n transform: translateX(-50%) translateY(0);\n border-radius: 3em;\n border: none;\n background-color: main.$blue700;\n overflow: hidden;\n\n @include main.pn-transition('width, background-color, border-color');\n transition-delay: main.$timing, 0s, 0s;\n\n // Hover element (sliding background)\n &::after {\n content: '';\n position: absolute;\n will-change: transform;\n width: 100%;\n height: 100%;\n background-color: main.$blue900;\n border-radius: inherit;\n left: 0;\n transform: translateX(-103%);\n opacity: 0.5;\n @include main.pn-transition('transform');\n }\n }\n\n @include main.pn-ripple(main.$white);\n\n &-tooltip {\n z-index: 5;\n position: absolute;\n top: calc(100% + 0.35em);\n left: 50%;\n pointer-events: none;\n\n color: main.$white;\n background-color: main.$blue900;\n box-shadow:\n 0 0.075em 0.225em rgba(0, 0, 0, 0.1),\n 0 0.4em 0.9em rgba(0, 0, 0, 0.13);\n\n padding: 0.25em 0.75em;\n border-radius: inherit;\n\n max-width: min(95vw, 40em);\n transform: translateX(-50%) translateX(var(--pn-dx));\n width: max-content;\n\n opacity: 0;\n @include main.pn-transition('opacity');\n\n &-text {\n font-size: 0.875em;\n font-weight: 300;\n }\n }\n\n pn-icon {\n flex-shrink: 0;\n .pn-icon-svg path {\n fill: main.$white;\n }\n }\n\n pn-spinner {\n position: absolute;\n transform: scale(0);\n }\n\n &:hover,\n &:focus {\n .pn-button-bg:after {\n transform: translateX(0);\n }\n }\n\n &[data-appearance='light'] {\n color: main.$blue700;\n\n pn-icon .pn-icon-svg path {\n fill: main.$blue700;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$blue700;\n }\n .pn-spinner-dot {\n fill: main.$blue700;\n }\n }\n\n .pn-button-bg {\n border-color: main.$blue700;\n background-color: main.$white;\n\n &:after {\n background-color: main.$blue50;\n opacity: 1;\n }\n\n .pn-ripple {\n background-color: main.$blue700;\n }\n }\n }\n\n &[data-appearance='warning'] {\n color: main.$warning;\n\n pn-icon .pn-icon-svg path {\n fill: main.$warning;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$warning;\n }\n .pn-spinner-dot {\n fill: main.$warning;\n }\n }\n\n .pn-button-bg {\n border: 0.0625em solid main.$warning;\n background-color: main.$coral50;\n\n &:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n\n &:hover,\n &:focus {\n color: main.$white;\n pn-icon .pn-icon-svg path {\n fill: main.$white;\n }\n\n pn-spinner {\n .pn-spinner-circle {\n stroke: main.$white;\n }\n .pn-spinner-dot {\n fill: main.$white;\n }\n }\n }\n\n @include main.pn-focus(main.$warning);\n }\n\n &[data-variant='borderless'] {\n .pn-button-bg {\n border: none;\n background-color: transparent;\n }\n\n .pn-button-bg:after {\n background-color: main.$white;\n opacity: 0.1;\n }\n &[data-appearance='light'] {\n .pn-button-bg:after {\n background-color: main.$blue50;\n opacity: 1;\n }\n }\n &[data-appearance='warning'] {\n .pn-button-bg:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n }\n\n &[data-variant='outlined'] {\n .pn-button-bg {\n border: 0.0625em solid main.$white;\n background-color: transparent;\n &:after {\n background-color: main.$white;\n opacity: 0.1;\n }\n }\n\n &[data-appearance='light'] .pn-button-bg {\n border-color: main.$blue700;\n background-color: main.$white;\n &:after {\n background-color: main.$blue400;\n opacity: 0.1;\n }\n }\n\n &[data-appearance='warning'] .pn-button-bg {\n border-color: main.$warning;\n &:after {\n background-color: main.$warning;\n opacity: 1;\n }\n }\n }\n\n &[data-left-icon] .pn-button-content {\n flex-direction: row-reverse;\n }\n\n &[data-icon-only] {\n width: 3em;\n min-width: 0;\n\n &[data-small] {\n width: 2em;\n min-width: 0;\n padding: 0;\n }\n }\n\n &[data-small] {\n padding: 0.375em 1em;\n min-height: 2em;\n min-width: unset;\n line-height: 1.25em;\n\n .pn-button-content {\n gap: 0.25em;\n }\n\n .pn-button-text {\n font-size: 0.875em;\n }\n\n pn-icon .pn-icon-svg {\n height: 1.25em;\n width: 1.25em;\n }\n }\n\n &[data-tooltip-open] {\n .pn-button-tooltip {\n opacity: 1;\n }\n }\n\n &[data-tooltip-upwards] {\n .pn-button-tooltip {\n top: auto;\n bottom: calc(100% + 0.35em);\n }\n }\n\n &[data-loading] {\n pn-spinner {\n transform: scale(1);\n @include main.pn-transition('transform');\n transition-delay: main.$timing;\n }\n\n .pn-button-content {\n pointer-events: none;\n opacity: 0;\n transition-delay: 0s;\n transform: translateY(100%);\n }\n\n .pn-button-bg {\n width: 3em;\n }\n\n &[data-small] .pn-button-bg {\n width: 2em;\n }\n }\n}\n","import { Component, Host, Prop, h, Element, State, Watch, Event, EventEmitter } from '@stencil/core';\nimport { ripple, PnButtonAppearance, PnButtonVariant } from '@/index';\n\n/**\n * The `pn-button` is built with a native `button` or `a` element, if you use the `href` attribute.\n *\n * @nativeClick Use the `click` event to listen when the button is clicked.\n */\n@Component({\n tag: 'pn-button',\n styleUrl: 'pn-button.scss',\n})\nexport class PnButton {\n buttonEl: HTMLElement;\n tooltipEl: HTMLDivElement;\n tooltipDx: number;\n\n openEvents: string[] = ['mouseover', 'focus'];\n closeEvents: string[] = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];\n eventListeners: string[] = [...this.openEvents, ...this.closeEvents];\n\n @Element() hostElement: HTMLElement;\n\n @State() tooltipOpen: boolean = false;\n @State() tooltipUpwards: boolean = false;\n\n /** The label of the button, this is the same as using the default slot. */\n @Prop() label?: string = '';\n /**\n * Select the button appearance: default (blue), `light` (white) and `warning` (red).\n *\n * @category Visual\n */\n @Prop() appearance?: PnButtonAppearance = '';\n /**\n * Select the button variant: default (colored background), `outlined` (bordered, no background) and `borderless` (borderless, no background).\n *\n * @category Visual\n */\n @Prop() variant?: PnButtonVariant = '';\n /** Use the small button. @category Visual */\n @Prop() small?: boolean = false;\n /** Display the loading indicator. @category Visual */\n @Prop({ reflect: true }) loading?: boolean = false;\n\n /**\n * The SVG content of the icon you want.\n * @see {@link https://portal.postnord.com/web-components/?path=/docs/docs-assets--docs pn-design-assets}\n * @category Icon\n */\n @Prop() icon?: string;\n /**\n * Turn the button into an icon only. Requires `icon` and one of the following props to work: `tooltip`, `arialabel` or `arialabelledby`.\n * @summary __You need an `icon` selected, as well as either `tooltip`, `arialabel` or `arialabelledby` for this to work__.\n * @see {@link icon}\n * @category Icon\n */\n @Prop() iconOnly?: boolean = false;\n /**\n * Place the `icon` to the left of the button.\n *\n * @summary __You need an `icon` selected for this to work__.\n * @see {@link icon}\n * @category Icon\n */\n @Prop() leftIcon?: boolean = false;\n\n /**\n * When the user focus/hover the button, the `tooltip` text will show up.\n *\n * @category Tooltip\n */\n @Prop() tooltip?: string;\n /**\n * Prefer the tooltip to open upwards. Will still go downwards if there is no space.\n * @category Tooltip\n */\n @Prop() tooltipUp?: boolean = false;\n\n /** Select HTML button type. @category Button */\n @Prop() type?: 'button' | 'reset' | 'submit' | '' = 'button';\n /**\n * Connect this button to a HTML form.\n * @category Button\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form HTML button form}\n */\n @Prop() form?: string;\n\n /** Pass an href to make the button into link (a-tag). @category Link */\n @Prop() href?: string;\n /** The rel attribute of the link. @category Link */\n @Prop() rel?: string;\n /** The target attribute of the link. @category Link */\n @Prop() target?: string;\n /** The download attribute of the link. @category Link */\n @Prop() download?: string;\n\n /** HTML ID. @category HTML attributes */\n @Prop() buttonId?: string = null;\n /** HTML aria-label attribute. @category HTML attributes */\n @Prop() arialabel?: string = null;\n /** HTML aria-labelledby attribute. @category HTML attributes */\n @Prop() arialabelledby?: string = null;\n /** HTML aria-current attribute. @category HTML attributes */\n @Prop() ariacurrent?: string = null;\n /** HTML aria-controls attribute. @category HTML attributes */\n @Prop() ariacontrols?: string = null;\n /** HTML aria-pressed attribute. @category HTML attributes */\n @Prop() ariapressed?: string = null;\n /** HTML aria-haspopup attribute. @category HTML attributes */\n @Prop() ariahaspopup?: string = null;\n /** HTML aria-expanded attribute. @category HTML attributes */\n @Prop() ariaexpanded?: string = null;\n /** HTML tabindex. @category HTML attributes */\n @Prop() noTab?: boolean = false;\n\n @Watch('tooltipOpen')\n openHandler() {\n if (this.tooltipOpen) this.checkTooltipPosition();\n }\n\n @Watch('tooltip')\n iconOnlyHandler() {\n this.checkTooltipPosition();\n if (this.tooltip) this.initTooltip();\n else this.removeTooltip();\n }\n\n /**\n * This event is fired when the `button`/`a` element of the `pn-button` is clicked.\n * Setting an eventListener for `click` on the `pn-button` will trigger if you click outside of the button area\n * or if the button is `disabled` with the `loading` prop.\n **/\n @Event() pnClick: EventEmitter<MouseEvent>;\n\n componentWillLoad() {\n this.tooltipUpwards = this.tooltipUp;\n }\n\n componentDidLoad() {\n this.iconOnlyHandler();\n }\n\n getRect(element: HTMLElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n initTooltip() {\n this.eventListeners.forEach(e => this.buttonEl.addEventListener(e, this.toggleTooltip));\n }\n\n removeTooltip() {\n this.eventListeners.forEach(e => this.buttonEl.removeEventListener(e, this.toggleTooltip));\n }\n\n toggleTooltip = (event: MouseEvent | FocusEvent) => {\n this.tooltipOpen = this.openEvents.includes(event.type);\n };\n\n setTooltipOffset() {\n this.tooltipEl.style.setProperty('--pn-dx', `${this.tooltipDx}px`);\n }\n\n checkTooltipPosition() {\n this.tooltipEl.style.transform = 'translateX(-50%)';\n this.tooltipUpwards = this.tooltipUp;\n\n requestAnimationFrame(() => {\n const { top, x, y, right, height } = this.getRect(this.tooltipEl);\n const extraMargin = 16;\n this.tooltipDx = 0;\n\n this.tooltipUpwards = this.tooltipUp ? top > height : y + height > window.innerHeight;\n this.tooltipEl.style.transform = '';\n\n if (x < 0) this.tooltipDx = x * -1 + extraMargin;\n if (right > window.innerWidth) this.tooltipDx = window.innerWidth - right - extraMargin - 8;\n\n requestAnimationFrame(() => this.setTooltipOffset());\n });\n }\n\n getAttributes() {\n const attrs = this.href\n ? {\n 'href': this.href,\n 'rel': !this.rel && this.target === '_blank' ? 'noopener' : this.rel,\n 'target': this.target ?? null,\n 'download': this.download ?? null,\n 'aria-current': this.ariacurrent,\n 'aria-disabled': this.loading ? 'true' : null,\n }\n : {\n 'type': this.type,\n 'form': this.form,\n 'disabled': this.loading,\n 'aria-pressed': this.ariapressed,\n 'aria-controls': this.ariacontrols,\n 'aria-haspopup': this.ariahaspopup,\n 'aria-expanded': this.ariaexpanded,\n };\n\n const appearances: PnButtonAppearance[] = ['light', 'warning'];\n const variations: PnButtonVariant[] = ['borderless', 'outlined'];\n\n return {\n 'tabindex': this.noTab || (this.href && this.loading) ? '-1' : null,\n 'data-small': this.small,\n 'data-loading': this.loading,\n 'data-tooltip-open': this.tooltipOpen,\n 'data-tooltip-upwards': this.tooltipUpwards,\n 'data-icon-only': this.showIconOnly(),\n 'data-left-icon': this.leftIcon,\n 'data-appearance': appearances.includes(this.appearance) ? this.appearance : null,\n 'data-variant': variations.includes(this.variant) ? this.variant : null,\n ...attrs,\n };\n }\n\n getTagName() {\n return this.href ? 'a' : 'button';\n }\n\n showIconOnly(): boolean {\n return !!this.icon && this.iconOnly && !!(this.tooltip || this.arialabel || this.arialabelledby);\n }\n\n handleClick(event: MouseEvent) {\n ripple(event, this.hostElement, '.pn-button-bg');\n this.pnClick.emit(event);\n }\n\n render() {\n const TagName = this.getTagName();\n\n return (\n <Host>\n <TagName\n class=\"pn-button\"\n id={this.buttonId}\n aria-label={this.arialabel}\n aria-labelledby={this.arialabelledby}\n onClick={e => this.handleClick(e)}\n {...this.getAttributes()}\n ref={(el: HTMLElement) => (this.buttonEl = el)}\n >\n <div class=\"pn-button-bg\"></div>\n <div class=\"pn-button-content\">\n <div class=\"pn-button-text\" hidden={this.showIconOnly()}>\n {this.label}\n <slot />\n </div>\n {!!this.icon && <pn-icon icon={this.icon} />}\n </div>\n <pn-spinner light />\n\n <div class=\"pn-button-tooltip\" hidden={!this.tooltip} ref={el => (this.tooltipEl = el)}>\n <span class=\"pn-button-tooltip-text\">{this.tooltip}</span>\n </div>\n </TagName>\n </Host>\n );\n }\n}\n","@use 'src/globals/main';\n\npn-spinner {\n display: inline-block;\n}\n\npn-spinner .pn-spinner {\n --pn-spinner-size: 1.5em;\n --pn-spinner-color: main.$blue700;\n\n height: var(--pn-spinner-size);\n width: var(--pn-spinner-size);\n display: block;\n\n animation: rotate 1s infinite;\n animation-timing-function: main.$easing;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 2s;\n }\n\n &-circle {\n stroke: var(--pn-spinner-color);\n transform-origin: center center;\n transform: rotate(-310deg);\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 64;\n animation: loading 2s infinite;\n animation-timing-function: main.$easing;\n\n @media (prefers-reduced-motion: reduce) {\n animation-duration: 4s;\n }\n }\n\n &-dot {\n fill: var(--pn-spinner-color);\n }\n}\n\n@keyframes loading {\n 0% {\n stroke-dashoffset: 55;\n }\n 50% {\n stroke-dashoffset: 12;\n }\n 100% {\n stroke-dashoffset: 55;\n }\n}\n\n@keyframes rotate {\n from {\n transform: rotate(-180deg) scaleX(-1);\n }\n to {\n transform: rotate(180deg) scaleX(-1);\n }\n}\n","import { Component, Element, Prop, h, Host } from '@stencil/core';\n\n/** Display a spinner to indicate a loading state. */\n@Component({\n tag: 'pn-spinner',\n styleUrl: 'pn-spinner.scss',\n})\nexport class PnSpinner {\n @Element() hostElement: HTMLElement;\n\n /** Light version of the spinner. */\n @Prop() light: boolean = false;\n /** Size in em. */\n @Prop() size: number = 1.5;\n\n private getColor() {\n if (this.light) return '#fff';\n return '#005d92';\n }\n\n private getSize() {\n return `${this.size}em`;\n }\n\n render() {\n return (\n <Host>\n <svg\n class=\"pn-spinner\"\n style={{ '--pn-spinner-size': this.getSize(), '--pn-spinner-color': this.getColor() }}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n >\n <circle class=\"pn-spinner-circle\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"3\" />\n <circle class=\"pn-spinner-dot\" cx=\"21.3\" cy=\"16\" r=\"1.48\" />\n </svg>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- import{r as t,c as i,g as a,f as s,h as e,a as n}from"./p-43660913.js";import{a as l,b as o}from"./p-c96ff403.js";import{k as r,e as c}from"./p-f64d17a6.js";const d={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const p="pn-tablist{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}pn-tablist .pn-tablist,pn-tablist ol,pn-tablist ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}pn-tablist .pn-tablist[data-stacked] .pn-tab,pn-tablist ol[data-stacked] .pn-tab,pn-tablist ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}pn-tablist .pn-tablist[data-small] .pn-tab,pn-tablist ol[data-small] .pn-tab,pn-tablist ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}pn-tablist .pn-tablist[data-small] .pn-tab>*:not(pn-icon),pn-tablist ol[data-small] .pn-tab>*:not(pn-icon),pn-tablist ul[data-small] .pn-tab>*:not(pn-icon){font-size:0.875em}pn-tablist .pn-tablist[data-large] .pn-tab>*:not(pn-icon),pn-tablist ol[data-large] .pn-tab>*:not(pn-icon),pn-tablist ul[data-large] .pn-tab>*:not(pn-icon){font-size:1.25em}pn-tablist .pn-tablist[data-scroll],pn-tablist ol[data-scroll],pn-tablist ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}pn-tablist .pn-tablist::-webkit-scrollbar,pn-tablist ol::-webkit-scrollbar,pn-tablist ul::-webkit-scrollbar{display:none}pn-tablist .pn-tablist-line{height:0.25em;position:absolute;bottom:0}pn-tablist .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}pn-tablist .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}pn-tablist .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}pn-tablist .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}";const b=p;const h=class{constructor(a){t(this,a);this.tabchange=i(this,"tabchange",7);this.showScrollArrows=false;this.arrowLeft=false;this.arrowRight=false;this.label=undefined;this.value=undefined;this.small=undefined;this.stackedicons=false;this.language=null}mo;isMenu=false;isTabHovered=false;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return a(this)}tabchange;setValue(){const t=Array.from(this.hostElement.querySelectorAll("pn-tab"));t.forEach((t=>{t.activeTab=this.value}))}scrollHandler(){if(this.showScrollArrows){this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this))}else{this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}}setActiveTabHandler({detail:t}){this.tabElement=t.el;requestAnimationFrame((()=>this.activateTab(t.el)));if(this.value===t.val)return;this.value=t.val;this.tabchange.emit(this.value);this.tabElement.querySelector(this.isMenu?"a":"button").focus()}rerender(){requestAnimationFrame((()=>{this.scrollIndicators();this.isTabHovered=false}))}handleEnter(t){this.isTabHovered=true;this.styleLines(t.target)}handleLeave(){this.isTabHovered=false;setTimeout((()=>{if(!this.isTabHovered)this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}async componentWillLoad(){this.isMenu=this.hostElement.slot==="menu";if(this.language===null)await r(this.hostElement)}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{s(this.hostElement);this.rerender()}));this.mo.observe(this.hostElement,{childList:true,subtree:true})}componentDidRender(){this.rerender();this.setValue()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,true)}styleLines(t,i=false){const a=this.getRect(this.tabListEl);const s=this.tabListEl.scrollLeft;const e=this.getRect(t);const n=e.width;const l=e.left+s-a.left;const o=i?"active":"hover";const r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${o}-width`,`${n}px`);this[r].style.setProperty(`--pn-${o}-offset`,`${l}px`);this[r].style.setProperty(`--pn-${o}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl;const{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a;this.arrowLeft=this.showScrollArrows&&i>0;this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=false}={}){const i=this.tabListEl;const{scrollLeft:a,clientWidth:s}=i;let e=a;const n=s-64;if(t)e+=n;else e-=n;i.scrollTo({left:e,behavior:"smooth"})}translate(t){return d?.[t]?.[this.language||c]}render(){return e(n,{key:"1de634d581308a90d175beed6e80d87f9503ba46"},e("nav",{key:"c372ea946ce171e4a96b1298f14216c6fe95218a",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},e("slot",{key:"1040c9e70f6b4a2542913e0695b775dd07c3d1b9"}),e("div",{key:"94e99bc1079bc23f38a629c966af8e4de9e8689d",class:"pn-tablist-line"},e("div",{key:"713ab47c16b5bc13035f2e28f2333e9dfdc25177",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),e("div",{key:"aa6a7585dffad93a48900e6a5fa0f74a40ec18ad",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),e("div",{key:"e5e45bcd0d68a6bf11d16865f4f2f0ceead66ed5",class:"pn-tablist-scroll"},e("pn-button",{key:"a37736842598d230cc392088f5d6ea4ebd82cc4c",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:true,appearance:"light",variant:"outlined",icon:l,iconOnly:true,arialabel:this.translate("LEFT"),small:true}),e("pn-button",{key:"bb5524b809761dc965b5d6c68c57fc2b3c605593",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:true}),noTab:true,appearance:"light",variant:"outlined",icon:o,iconOnly:true,arialabel:this.translate("RIGHT"),small:true})))}static get watchers(){return{value:["setValue"],showScrollArrows:["scrollHandler"]}}};h.style=b;export{h as pn_tablist};
6
- //# sourceMappingURL=p-4f67fffa.entry.js.map
5
+ import{r as t,c as i,g as a,f as s,h as e,a as n}from"./p-43660913.js";import{c as l,a as o}from"./p-2f7bb5e8.js";import{k as r,e as c}from"./p-f64d17a6.js";const b={LEFT:{sv:"Bläddra åt vänster",en:"Scroll to the left",da:"Rul til venstre",fi:"Vieritä vasemmalle",no:"Rull til venstre"},RIGHT:{sv:"Bläddra åt höger",en:"Scroll to the right",da:"Rul til højre",fi:"Vieritä oikealle",no:"Rull til høyre"}};const p="pn-tablist{width:100%;min-width:0;position:relative;border-bottom:0.0625em solid #d3cecb;display:block}pn-tablist .pn-tablist,pn-tablist ol,pn-tablist ul{display:flex;width:100%;flex-direction:row;gap:1em;position:relative;list-style:none;padding:0;margin:0}pn-tablist .pn-tablist[data-stacked] .pn-tab,pn-tablist ol[data-stacked] .pn-tab,pn-tablist ul[data-stacked] .pn-tab{margin:0.5em 0.25em 0.75em;gap:0.25em;flex-direction:column}pn-tablist .pn-tablist[data-small] .pn-tab,pn-tablist ol[data-small] .pn-tab,pn-tablist ul[data-small] .pn-tab{margin:0.25em 0.25em 0.75em}pn-tablist .pn-tablist[data-small] .pn-tab>*:not(pn-icon),pn-tablist ol[data-small] .pn-tab>*:not(pn-icon),pn-tablist ul[data-small] .pn-tab>*:not(pn-icon){font-size:0.875em}pn-tablist .pn-tablist[data-large] .pn-tab>*:not(pn-icon),pn-tablist ol[data-large] .pn-tab>*:not(pn-icon),pn-tablist ul[data-large] .pn-tab>*:not(pn-icon){font-size:1.25em}pn-tablist .pn-tablist[data-scroll],pn-tablist ol[data-scroll],pn-tablist ul[data-scroll]{overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory}pn-tablist .pn-tablist::-webkit-scrollbar,pn-tablist ol::-webkit-scrollbar,pn-tablist ul::-webkit-scrollbar{display:none}pn-tablist .pn-tablist-line{height:0.25em;position:absolute;bottom:0}pn-tablist .pn-tablist-line-item{position:absolute;width:100%;height:inherit;border-radius:0.25em 0.25em 0 0;transform-origin:left center;opacity:0;transition-property:transform, opacity, width;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-line-item{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-line-active{z-index:1;background-color:#005d92;width:var(--pn-active-width);transform:translateX(var(--pn-active-offset));opacity:var(--pn-active-opacity)}pn-tablist .pn-tablist-line-hovered{background-color:#00a0d6;width:var(--pn-hover-width);transform:translateX(var(--pn-hover-offset));opacity:var(--pn-hover-opacity)}pn-tablist .pn-tablist-scroll{position:absolute;top:50%;left:0;right:0;pointer-events:none;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;z-index:1;height:100%}pn-tablist .pn-tablist-arrow{pointer-events:all;transform:scaleY(0);opacity:0;visibility:hidden;transition-property:transform, opacity, visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-tablist .pn-tablist-arrow{transition-duration:0s;transition-delay:0s}}pn-tablist .pn-tablist-arrow[data-show]{opacity:1;visibility:visible;transform:scaleY(1)}";const d=p;const h=class{constructor(a){t(this,a);this.tabchange=i(this,"tabchange",7);this.showScrollArrows=false;this.arrowLeft=false;this.arrowRight=false;this.label=undefined;this.value=undefined;this.small=undefined;this.stackedicons=false;this.language=null}mo;isMenu=false;isTabHovered=false;tabListEl;lineActive;lineHovered;tabElement;get hostElement(){return a(this)}tabchange;setValue(){const t=Array.from(this.hostElement.querySelectorAll("pn-tab"));t.forEach((t=>{t.activeTab=this.value}))}scrollHandler(){if(this.showScrollArrows){this.tabListEl.addEventListener("scroll",this.scrollIndicators.bind(this))}else{this.tabListEl.removeEventListener("scroll",this.scrollIndicators)}}setActiveTabHandler({detail:t}){this.tabElement=t.el;requestAnimationFrame((()=>this.activateTab(t.el)));if(this.value===t.val)return;this.value=t.val;this.tabchange.emit(this.value);this.tabElement.querySelector(this.isMenu?"a":"button").focus()}rerender(){requestAnimationFrame((()=>{this.scrollIndicators();this.isTabHovered=false}))}handleEnter(t){this.isTabHovered=true;this.styleLines(t.target)}handleLeave(){this.isTabHovered=false;setTimeout((()=>{if(!this.isTabHovered)this.lineHovered.style.setProperty("--pn-hover-opacity","0")}),500)}async componentWillLoad(){this.isMenu=this.hostElement.slot==="menu";if(this.language===null)await r(this.hostElement)}componentDidLoad(){if(this.mo)this.mo.disconnect();this.mo=new MutationObserver((()=>{s(this.hostElement);this.rerender()}));this.mo.observe(this.hostElement,{childList:true,subtree:true})}componentDidRender(){this.rerender();this.setValue()}getRect(t){return t.getBoundingClientRect()}activateTab(t){this.styleLines(t,true)}styleLines(t,i=false){const a=this.getRect(this.tabListEl);const s=this.tabListEl.scrollLeft;const e=this.getRect(t);const n=e.width;const l=e.left+s-a.left;const o=i?"active":"hover";const r=i?"lineActive":"lineHovered";this[r].style.setProperty(`--pn-${o}-width`,`${n}px`);this[r].style.setProperty(`--pn-${o}-offset`,`${l}px`);this[r].style.setProperty(`--pn-${o}-opacity`,"1")}scrollIndicators(){const{scrollWidth:t,scrollLeft:i}=this.tabListEl;const{clientWidth:a}=this.hostElement;this.showScrollArrows=t>a;this.arrowLeft=this.showScrollArrows&&i>0;this.arrowRight=this.showScrollArrows&&a+16+i<t}scroll({right:t=false}={}){const i=this.tabListEl;const{scrollLeft:a,clientWidth:s}=i;let e=a;const n=s-64;if(t)e+=n;else e-=n;i.scrollTo({left:e,behavior:"smooth"})}translate(t){return b?.[t]?.[this.language||c]}render(){return e(n,{key:"6018119e45b053e16de64bae803b3baaaeafa41d"},e("nav",{key:"747235504d6129e765cb87de674b7ffeac293b20",class:"pn-tablist",role:this.isMenu?null:"tablist","aria-label":this.label,"data-stacked":this.stackedicons,"data-small":!this.isMenu&&this.small,"data-large":this.isMenu,"data-scroll":this.showScrollArrows,ref:t=>this.tabListEl=t},e("slot",{key:"a4e2d984d78fcf9d31d740865fdeb3df588dc772"}),e("div",{key:"29ee0561e19d48d4f974d3844772ca72ad6577af",class:"pn-tablist-line"},e("div",{key:"e6a2b93e8e1c696356ddbaff76ecaa3e7bfd3924",ref:t=>this.lineActive=t,class:"pn-tablist-line-item pn-tablist-line-active"}),e("div",{key:"2d884eeeaff74af37abbb46b6e6d6475aeafee0c",ref:t=>this.lineHovered=t,class:"pn-tablist-line-item pn-tablist-line-hovered"}))),e("div",{key:"4674ccbc7aea1a08721b11b121c2a00c56af50a6",class:"pn-tablist-scroll"},e("pn-button",{key:"8da1137191ccf9f3e76aa05879b76634323553f8",class:"pn-tablist-arrow","data-show":this.arrowLeft,onClick:()=>this.scroll(),noTab:true,appearance:"light",variant:"outlined",icon:l,iconOnly:true,arialabel:this.translate("LEFT"),small:true}),e("pn-button",{key:"99ce43b13ad34b0326f58e92354265b8bca047e1",class:"pn-tablist-arrow","data-show":this.arrowRight,onClick:()=>this.scroll({right:true}),noTab:true,appearance:"light",variant:"outlined",icon:o,iconOnly:true,arialabel:this.translate("RIGHT"),small:true})))}static get watchers(){return{value:["setValue"],showScrollArrows:["scrollHandler"]}}};h.style=d;export{h as pn_tablist};
6
+ //# sourceMappingURL=p-28357e12.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["translations","LEFT","sv","en","da","fi","no","RIGHT","pnTablistCss","PnTablistStyle0","PnTablist","mo","isMenu","isTabHovered","tabListEl","lineActive","lineHovered","tabElement","tabchange","setValue","tabs","Array","from","this","hostElement","querySelectorAll","forEach","tab","activeTab","value","scrollHandler","showScrollArrows","addEventListener","scrollIndicators","bind","removeEventListener","setActiveTabHandler","detail","el","requestAnimationFrame","activateTab","val","emit","querySelector","focus","rerender","handleEnter","e","styleLines","target","handleLeave","setTimeout","style","setProperty","componentWillLoad","slot","language","awaitTopbar","componentDidLoad","disconnect","MutationObserver","forceUpdate","observe","childList","subtree","componentDidRender","getRect","element","getBoundingClientRect","active","tabListCoords","scrollOffset","scrollLeft","line","width","offset","left","cssVar","prop","scrollWidth","clientWidth","arrowLeft","arrowRight","scroll","right","tabList","scrollAmount","scrollTo","behavior","translate","render","h","Host","key","class","role","label","stackedicons","small","ref","onClick","noTab","appearance","variant","icon","chevron_left","iconOnly","arialabel","chevron_right"],"sources":["src/components/navigation/pn-tablist/translations.ts","src/components/navigation/pn-tablist/pn-tablist.scss?tag=pn-tablist","src/components/navigation/pn-tablist/pn-tablist.tsx"],"sourcesContent":["export default {\n LEFT: {\n sv: 'Bläddra åt vänster',\n en: 'Scroll to the left',\n da: 'Rul til venstre',\n fi: 'Vieritä vasemmalle',\n no: 'Rull til venstre',\n },\n RIGHT: {\n sv: 'Bläddra åt höger',\n en: 'Scroll to the right',\n da: 'Rul til højre',\n fi: 'Vieritä oikealle',\n no: 'Rull til høyre',\n },\n};\n","@use 'src/globals/main';\n\npn-tablist {\n width: 100%;\n min-width: 0;\n position: relative;\n border-bottom: 0.0625em solid main.$gray200;\n display: block;\n\n .pn-tablist,\n ol,\n ul {\n display: flex;\n width: 100%;\n flex-direction: row;\n gap: 1em;\n position: relative;\n list-style: none;\n padding: 0;\n margin: 0;\n &[data-stacked] .pn-tab {\n margin: 0.5em 0.25em 0.75em;\n gap: 0.25em;\n flex-direction: column;\n }\n &[data-small] .pn-tab {\n margin: 0.25em 0.25em 0.75em;\n > *:not(pn-icon) {\n font-size: 0.875em;\n }\n }\n &[data-large] .pn-tab > *:not(pn-icon) {\n font-size: 1.25em;\n }\n &[data-scroll] {\n overflow-y: hidden;\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n }\n &::-webkit-scrollbar {\n display: none;\n }\n }\n}\n\npn-tablist .pn-tablist {\n &-line {\n height: 0.25em;\n position: absolute;\n bottom: 0;\n\n &-item {\n position: absolute;\n width: 100%;\n height: inherit;\n border-radius: 0.25em 0.25em 0 0;\n\n transform-origin: left center;\n opacity: 0;\n @include main.pn-transition('transform, opacity, width', main.$timing-layout);\n }\n\n &-active {\n z-index: 1;\n background-color: main.$blue700;\n width: var(--pn-active-width);\n transform: translateX(var(--pn-active-offset));\n opacity: var(--pn-active-opacity);\n }\n\n &-hovered {\n background-color: main.$blue400;\n width: var(--pn-hover-width);\n transform: translateX(var(--pn-hover-offset));\n opacity: var(--pn-hover-opacity);\n }\n }\n\n &-scroll {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n pointer-events: none;\n transform: translateY(-50%);\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 1;\n height: 100%;\n }\n\n &-arrow {\n pointer-events: all;\n\n transform: scaleY(0);\n opacity: 0;\n visibility: hidden;\n\n @include main.pn-transition('transform, opacity, visibility');\n\n &[data-show] {\n opacity: 1;\n visibility: visible;\n transform: scaleY(1);\n }\n }\n}\n","import {\n Component,\n Prop,\n Listen,\n Element,\n Event,\n EventEmitter,\n State,\n h,\n Host,\n Watch,\n forceUpdate,\n} from '@stencil/core';\nimport { chevron_left, chevron_right } from 'pn-design-assets/pn-assets/icons.js';\nimport translations from './translations';\nimport { awaitTopbar, en } from '@/globals/helpers';\nimport type { PnLanguages } from '@/globals/types';\n\n/**\n * @slot menu - Can only be used inside of a `pn-header`. Allows the `href` attribute on the `pn-tab` when active.\n */\n@Component({\n tag: 'pn-tablist',\n styleUrl: 'pn-tablist.scss',\n})\nexport class PnTablist {\n private mo: MutationObserver;\n\n private isMenu: boolean = false;\n private isTabHovered: boolean = false;\n\n private tabListEl: HTMLElement;\n private lineActive: HTMLDivElement;\n private lineHovered: HTMLDivElement;\n private tabElement: HTMLPnTabElement;\n\n @Element() hostElement: HTMLElement;\n\n /** Display the scrolling arrows */\n @State() private showScrollArrows: boolean = false;\n /** Display the scroll arrow to the left */\n @State() private arrowLeft: boolean = false;\n /** Display the scroll arrow to the right */\n @State() private arrowRight: boolean = false;\n\n /** Give the tablist a name for screenreaders */\n @Prop() label!: string;\n /** The value of the tab that is currently active, each `<pn-tab value=\"example-value\">` also expects a unique value */\n @Prop({ reflect: true, mutable: true }) value!: string;\n /** Make the tablist smaller */\n @Prop() small?: boolean;\n /** Icons are stacked vertically instead of the default rows */\n @Prop() stackedicons: boolean = false;\n /** Manually set the language. */\n @Prop() language?: PnLanguages = null;\n\n /**\n * This will emit when a tab is changed. The detail property of the event will contain the value of the selected tab.\n * This is the event and value you listen to when you toggle the visibility among your tabpanels.\n **/\n @Event() tabchange: EventEmitter<string>;\n\n @Watch('value')\n setValue() {\n const tabs = Array.from(this.hostElement.querySelectorAll('pn-tab'));\n\n tabs.forEach(tab => {\n tab.activeTab = this.value;\n });\n }\n\n @Watch('showScrollArrows')\n scrollHandler() {\n if (this.showScrollArrows) {\n this.tabListEl.addEventListener('scroll', this.scrollIndicators.bind(this));\n } else {\n this.tabListEl.removeEventListener('scroll', this.scrollIndicators);\n }\n }\n\n @Listen('setActiveTab')\n setActiveTabHandler({ detail }) {\n this.tabElement = detail.el;\n requestAnimationFrame(() => this.activateTab(detail.el));\n if (this.value === detail.val) return;\n this.value = detail.val;\n this.tabchange.emit(this.value);\n this.tabElement.querySelector(this.isMenu ? 'a' : 'button').focus();\n }\n\n @Listen('resize', { target: 'window' })\n rerender() {\n requestAnimationFrame(() => {\n this.scrollIndicators();\n this.isTabHovered = false;\n });\n }\n\n @Listen('tabEnter')\n handleEnter(e: { target: HTMLPnTabElement }) {\n this.isTabHovered = true;\n this.styleLines(e.target);\n }\n\n @Listen('tabLeave')\n handleLeave() {\n this.isTabHovered = false;\n setTimeout(() => {\n if (!this.isTabHovered) this.lineHovered.style.setProperty('--pn-hover-opacity', '0');\n }, 500);\n }\n\n async componentWillLoad() {\n this.isMenu = this.hostElement.slot === 'menu';\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n componentDidLoad() {\n if (this.mo) this.mo.disconnect();\n this.mo = new MutationObserver(() => {\n forceUpdate(this.hostElement);\n this.rerender();\n });\n\n this.mo.observe(this.hostElement, { childList: true, subtree: true });\n }\n\n componentDidRender() {\n this.rerender();\n this.setValue();\n }\n\n private getRect(element: HTMLElement | HTMLPnTablistElement): DOMRect {\n return element.getBoundingClientRect();\n }\n\n private activateTab(element: HTMLPnTabElement) {\n this.styleLines(element, true);\n }\n\n private styleLines(element: HTMLElement, active: boolean = false) {\n const tabListCoords = this.getRect(this.tabListEl);\n const scrollOffset = this.tabListEl.scrollLeft;\n\n const line = this.getRect(element);\n\n const width = line.width;\n const offset = line.left + scrollOffset - tabListCoords.left;\n\n const cssVar = active ? 'active' : 'hover';\n const prop = active ? 'lineActive' : 'lineHovered';\n\n this[prop].style.setProperty(`--pn-${cssVar}-width`, `${width}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-offset`, `${offset}px`);\n this[prop].style.setProperty(`--pn-${cssVar}-opacity`, '1');\n }\n\n private scrollIndicators() {\n const { scrollWidth, scrollLeft } = this.tabListEl;\n\n const { clientWidth } = this.hostElement;\n\n this.showScrollArrows = scrollWidth > clientWidth;\n\n this.arrowLeft = this.showScrollArrows && scrollLeft > 0;\n this.arrowRight = this.showScrollArrows && clientWidth + 16 + scrollLeft < scrollWidth;\n }\n\n private scroll({ right = false }: { right?: boolean } = {}) {\n const tabList = this.tabListEl;\n const { scrollLeft, clientWidth } = tabList;\n\n let left: number = scrollLeft;\n // The width of the scroll arrow is 32px, so we remove that from this calculation so the scroll\n const scrollAmount = clientWidth - 64;\n\n if (right) left += scrollAmount;\n else left -= scrollAmount;\n\n tabList.scrollTo({\n left,\n behavior: 'smooth',\n });\n }\n\n private translate(prop: string): string {\n return translations?.[prop]?.[this.language || en];\n }\n\n render() {\n return (\n <Host>\n <nav\n class=\"pn-tablist\"\n role={this.isMenu ? null : 'tablist'}\n aria-label={this.label}\n data-stacked={this.stackedicons}\n data-small={!this.isMenu && this.small}\n data-large={this.isMenu}\n data-scroll={this.showScrollArrows}\n ref={el => (this.tabListEl = el)}\n >\n <slot />\n <div class=\"pn-tablist-line\">\n <div ref={el => (this.lineActive = el)} class=\"pn-tablist-line-item pn-tablist-line-active\" />\n <div ref={el => (this.lineHovered = el)} class=\"pn-tablist-line-item pn-tablist-line-hovered\" />\n </div>\n </nav>\n\n <div class=\"pn-tablist-scroll\">\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowLeft}\n onClick={() => this.scroll()}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={chevron_left}\n iconOnly={true}\n arialabel={this.translate('LEFT')}\n small\n />\n\n <pn-button\n class=\"pn-tablist-arrow\"\n data-show={this.arrowRight}\n onClick={() => this.scroll({ right: true })}\n noTab={true}\n appearance=\"light\"\n variant=\"outlined\"\n icon={chevron_right}\n iconOnly={true}\n arialabel={this.translate('RIGHT')}\n small\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- const l='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';const s=l;const n='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';const e=n;export{s as a,e as b};
6
- //# sourceMappingURL=p-c96ff403.js.map
5
+ const l='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z" clip-rule="evenodd"/></svg>';const s=l;const n='<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z" clip-rule="evenodd"/></svg>';const e=n;export{e as a,s as c};
6
+ //# sourceMappingURL=p-2f7bb5e8.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["icon","chevron_left","chevron_right"],"sources":["node_modules/pn-design-assets/pn-assets/icons/chevron_left.js","node_modules/pn-design-assets/pn-assets/icons/chevron_right.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M6.293 12.707a1 1 0 0 1 0-1.414l8-8a1 1 0 1 1 1.414 1.414L8.414 12l7.293 7.293a1 1 0 0 1-1.414 1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const chevron_left = icon;\nexport const chevronLeft = icon;\n","const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M17.707 11.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 1.414-1.414z\" clip-rule=\"evenodd\"/></svg>';\nexport const chevron_right = icon;\nexport const chevronRight = icon;\n"],"mappings":";;;;AAAA,MAAMA,EAAO,0QACD,MAACC,EAAeD,ECD5B,MAAMA,EAAO,6QACD,MAACE,EAAgBF,S","ignoreList":[]}
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- import{r as e,g as t,h as a,a as r}from"./p-43660913.js";import{u as n}from"./p-f64d17a6.js";const i='pn-textarea{display:inline-flex;flex-direction:column}pn-textarea .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-label{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-label>span{font-size:0.875em}pn-textarea .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-textarea .pn-textarea-text>pn-icon{margin-right:0.25em}pn-textarea .pn-textarea-element{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);width:100%;resize:none}pn-textarea .pn-textarea-element:-webkit-autofill,pn-textarea .pn-textarea-element:-webkit-autofill:hover,pn-textarea .pn-textarea-element:-webkit-autofill:focus,pn-textarea .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-textarea .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-element{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}pn-textarea .pn-textarea-element:hover{border-color:#005d92}pn-textarea .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-textarea .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-textarea .pn-textarea-element::-webkit-scrollbar-corner,pn-textarea .pn-textarea-element::-webkit-scrollbar-button{display:none}pn-textarea .pn-textarea-element:read-only{border-color:#ffffff}pn-textarea .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}pn-textarea .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}pn-textarea .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}pn-textarea .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}';const o=i;const l=class{constructor(t){e(this,t);this.content=undefined;this.label=undefined;this.value="";this.helpertext=undefined;this.textareaid=this.id;this.name=undefined;this.form=undefined;this.rows=2;this.cols=20;this.wrap="soft";this.maxlength=undefined;this.autocomplete="off";this.spellcheck=false;this.placeholder=undefined;this.resize=false;this.required=false;this.valid=false;this.invalid=false;this.error=undefined;this.disabled=false;this.readonly=false}id=`pn-textarea-${n()}`;idHelper=`${this.id}-text`;get hostElement(){return t(this)}componentWillLoad(){if(this.textareaid!==this.id){this.idHelper=`${this.textareaid}-helper`}}setVal(e){const t=e.target.value;this.value=t}hasError(){return this.invalid||!!this.error}hasMessage(){return!!(this.helpertext?.length||this.error?.length)}render(){return a(r,{key:"c8cd0f74604646f7ac3ed6e8d4e7846b6d818b02"},a("div",{key:"48fb0a2c6c30968079633a36b5d6a85ee8a07366",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},a("label",{key:"fbe7eac959225c7ee7d2a13fc3bdc75aca42363a",class:"pn-textarea-label",htmlFor:this.textareaid},a("span",{key:"6d433af86539e7bb9b0bdd673f33f3297f79aa69"},this.label),this.maxlength>=1&&a("span",{key:"12e7c0a22af8e92136d7c893685d80e741d0c9f1"},`${this.value?.length||0}/${this.maxlength}`)),a("textarea",{key:"c7dca374bf36de54afc9e2183ddb95c0c78c9f61",class:"pn-textarea-element",id:this.textareaid,name:this.name,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,placeholder:this.placeholder,maxlength:this.maxlength,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-describedby":this.hasMessage()?this.idHelper:null,"aria-invalid":this.hasError().toString(),onInput:e=>this.setVal(e),value:this.value}),this.hasMessage()&&a("p",{key:"9a5c29b6db59b4b881fe4b76f3cfd6dd69d79249",id:this.idHelper,class:"pn-textarea-text",role:this.error?.length?"alert":null},a("span",{key:"25a43d7f4ba47550623e4937ae4b8bf830fda6c0"},this.error||this.helpertext))))}};l.style=o;export{l as pn_textarea};
6
- //# sourceMappingURL=p-5b0000e9.entry.js.map
5
+ import{r as e,g as t,h as a,a as r}from"./p-43660913.js";import{u as n}from"./p-f64d17a6.js";const i='pn-textarea{display:inline-flex;flex-direction:column}pn-textarea .pn-textarea-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:400;color:#2d2013;margin:0 0 0.25em 0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-label{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-label>span{font-size:0.875em}pn-textarea .pn-textarea-text{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}pn-textarea .pn-textarea-text>pn-icon{margin-right:0.25em}pn-textarea .pn-textarea-element{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);width:100%;resize:none}pn-textarea .pn-textarea-element:-webkit-autofill,pn-textarea .pn-textarea-element:-webkit-autofill:hover,pn-textarea .pn-textarea-element:-webkit-autofill:focus,pn-textarea .pn-textarea-element:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-textarea .pn-textarea-element:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}@media (prefers-reduced-motion: reduce){pn-textarea .pn-textarea-element{transition-duration:0s;transition-delay:0s}}pn-textarea .pn-textarea-element::placeholder{color:#5e554a;font-weight:normal}pn-textarea .pn-textarea-element:hover{border-color:#005d92}pn-textarea .pn-textarea-element:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-textarea .pn-textarea-element::-webkit-scrollbar{background-color:#ffffff;width:0.875em;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-track{background-color:#ffffff;border-radius:0.5em}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb{cursor:pointer;background-color:#969087;border-radius:1em;border:0.25em solid #ffffff}pn-textarea .pn-textarea-element::-webkit-scrollbar-thumb:hover{background-color:#5e554a}pn-textarea .pn-textarea-element::-webkit-scrollbar-corner,pn-textarea .pn-textarea-element::-webkit-scrollbar-button{display:none}pn-textarea .pn-textarea-element:read-only{border-color:#ffffff}pn-textarea .pn-textarea-element::-webkit-resizer{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M7%2017L17%207M12%2017L17%2012%22%20stroke%3D%22%23005D92%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:center}pn-textarea .pn-textarea[data-valid]>.pn-textarea-label{color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element{border-color:#005e41}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:hover{border-color:#002f24}pn-textarea .pn-textarea[data-valid]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#005e41;outline-color:#005e41}pn-textarea .pn-textarea[data-error]>.pn-textarea-label{color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element{border-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:hover{border-color:#500715}pn-textarea .pn-textarea[data-error]>.pn-textarea-element:focus-visible{background-color:#ffffff;border-color:#a70707;outline-color:#a70707}pn-textarea .pn-textarea[data-error]>.pn-textarea-text[role=alert]{color:#a70707}pn-textarea .pn-textarea[data-resize]>.pn-textarea-element{resize:vertical}';const o=i;const l=class{constructor(t){e(this,t);this.content=undefined;this.label=undefined;this.value="";this.helpertext=undefined;this.textareaid=this.id;this.name=undefined;this.form=undefined;this.rows=2;this.cols=20;this.wrap="soft";this.maxlength=undefined;this.autocomplete="off";this.spellcheck=false;this.placeholder=undefined;this.resize=false;this.required=false;this.valid=false;this.invalid=false;this.error=undefined;this.disabled=false;this.readonly=false}id=`pn-textarea-${n()}`;idHelper=`${this.id}-text`;get hostElement(){return t(this)}componentWillLoad(){if(this.textareaid!==this.id){this.idHelper=`${this.textareaid}-helper`}}setVal(e){const t=e.target.value;this.value=t}hasError(){return this.invalid||!!this.error}hasMessage(){return!!(this.helpertext?.length||this.error?.length)}render(){return a(r,{key:"f6402df35f4bd3995044899cdbb88c12a3b0d769"},a("div",{key:"a29993e5382b5b6d99d301bab1fb7266439fe83b",class:"pn-textarea","data-valid":this.valid,"data-error":this.hasError(),"data-resize":this.resize},a("label",{key:"23c3bc4dd4f9cf3ebfbfaedaa864dfdab9b69480",class:"pn-textarea-label",htmlFor:this.textareaid},a("span",{key:"422340deb784b2c633d9da8b45a8a91e7bfaaed1"},this.label),this.maxlength>=1&&a("span",{key:"9dcabac30990f71ba1fbebed9cd7adc6ca0ffd3d"},`${this.value?.length||0}/${this.maxlength}`)),a("textarea",{key:"49020658e51cdf29c4da81aacfd588a016bb57b8",class:"pn-textarea-element",id:this.textareaid,name:this.name,rows:this.rows,cols:this.cols,wrap:this.wrap,autocomplete:this.autocomplete,spellcheck:this.spellcheck,placeholder:this.placeholder,maxlength:this.maxlength,required:this.required,disabled:this.disabled,readonly:this.readonly,"aria-describedby":this.hasMessage()?this.idHelper:null,"aria-invalid":this.hasError().toString(),onInput:e=>this.setVal(e),value:this.value}),this.hasMessage()&&a("p",{key:"68c4dd53d3b63e90fb4ea586120874c39baedcdf",id:this.idHelper,class:"pn-textarea-text",role:this.error?.length?"alert":null},a("span",{key:"e7dd508206ca9dfb965e47e8ab35fede65e6bf19"},this.error||this.helpertext))))}};l.style=o;export{l as pn_textarea};
6
+ //# sourceMappingURL=p-363f578a.entry.js.map
@@ -2,5 +2,5 @@
2
2
  * Built with Stencil
3
3
  * By PostNord.
4
4
  */
5
- import{r as t,c as n,g as e,h as i,a}from"./p-43660913.js";import{o}from"./p-f64d17a6.js";const s="pn-tab{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}pn-tab .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tab .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}@media (prefers-reduced-motion: reduce){pn-tab .pn-tab{transition-duration:0s;transition-delay:0s}}pn-tab .pn-tab>span{line-height:1.5em}pn-tab .pn-tab>pn-icon>.pn-icon-svg path,pn-tab .pn-tab>pn-icon>.pn-icon-svg polygon{fill:#2d2013}pn-tab .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}pn-tab .pn-tab[aria-selected=true],pn-tab .pn-tab[aria-current=page]{color:#005d92}pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg polygon{fill:#005d92}pn-tab .pn-tab[aria-selected=true]:focus,pn-tab .pn-tab[aria-current=page]:focus{color:#0d234b}pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg polygon{fill:#0d234b}";const r=s;const c=class{constructor(e){t(this,e);this.setActiveTab=n(this,"setActiveTab",7);this.tabEnter=n(this,"tabEnter",7);this.tabLeave=n(this,"tabLeave",7);this.label=undefined;this.value=undefined;this.href=undefined;this.icon=undefined;this.ariacontrols=undefined;this.tabid=undefined;this.activeTab=undefined}tag="button";get hostElement(){return e(this)}setActiveTab;setActiveTabHandler({click:t=false,element:n}={}){if(t||this.isActive()){const t=n?.value||this.value;const e=n?.value&&n||this.hostElement;this.setActiveTab.emit({val:t,el:e})}}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(t){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(t.key))return;t.preventDefault();const n=t.target.closest("pn-tablist");const e=Array.from(n.querySelectorAll("pn-tab"));const i=e[0];const a=e[e.length-1];const o=this.hostElement.nextElementSibling;const s=this.hostElement.previousElementSibling;if(t.key==="Home")this.setActiveTabHandler({element:i});if(t.key==="End")this.setActiveTabHandler({element:a});if(t.key==="ArrowRight"){this.setActiveTabHandler({element:o?.value?o:i})}if(t.key==="ArrowLeft"){this.setActiveTabHandler({element:s?.value?s:a})}}isActive(){return this.activeTab===this.value}tabTag(){const t=this.hostElement.closest("pn-tablist");this.tag=t.slot==="menu"?"a":"button"}renderProperties(){return this.tag==="a"?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":this.isActive().toString(),"aria-controls":this.ariacontrols}}handleClick(t){this.setActiveTabHandler({click:true});o(t,this.hostElement,".pn-tab")}render(){const t=this.tag;return i(a,{key:"ec9df780cc276853bfc6bcbb9af1f6d4f6e8d83e"},i(t,{key:"aa1b089953f69110583eef6c689973bd118d2fd6",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&i("pn-icon",{key:"583bf623f788662aaa3f612552b52ecfc0edae51",icon:this.icon}),i("slot",{key:"a5f216eb6ac2ee8fcb7f90daec3f69cc597f9d7e"}),i("span",{key:"26c116fe67ce645c31eed9e37e5529da6fbc97ea"},this.label)))}};c.style=r;export{c as pn_tab};
6
- //# sourceMappingURL=p-c0d19737.entry.js.map
5
+ import{r as t,c as n,g as e,h as i,a}from"./p-43660913.js";import{o}from"./p-f64d17a6.js";const s="pn-tab{position:relative;overflow:hidden;flex-shrink:0;scroll-snap-align:center;display:inline-block;border-radius:0.5em}pn-tab .pn-tab{position:relative;cursor:pointer;margin:1em 0.25em;padding:0 0.25em;border:none;border-radius:0.5em;color:#2d2013;background-color:transparent;font-family:inherit;font-size:1em;font-weight:500;text-decoration:none;display:flex;gap:0.5em;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition-property:color, outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-tab .pn-tab .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}@media (prefers-reduced-motion: reduce){pn-tab .pn-tab{transition-duration:0s;transition-delay:0s}}pn-tab .pn-tab>span{line-height:1.5em}pn-tab .pn-tab>pn-icon>.pn-icon-svg path,pn-tab .pn-tab>pn-icon>.pn-icon-svg polygon{fill:#2d2013}pn-tab .pn-tab:focus-visible{overflow:hidden;outline-color:#005d92;background-color:#ffffff}pn-tab .pn-tab[aria-selected=true],pn-tab .pn-tab[aria-current=page]{color:#005d92}pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]>pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]>pn-icon>.pn-icon-svg polygon{fill:#005d92}pn-tab .pn-tab[aria-selected=true]:focus,pn-tab .pn-tab[aria-current=page]:focus{color:#0d234b}pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-selected=true]:focus pn-icon>.pn-icon-svg polygon,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg path,pn-tab .pn-tab[aria-current=page]:focus pn-icon>.pn-icon-svg polygon{fill:#0d234b}";const r=s;const c=class{constructor(e){t(this,e);this.setActiveTab=n(this,"setActiveTab",7);this.tabEnter=n(this,"tabEnter",7);this.tabLeave=n(this,"tabLeave",7);this.label=undefined;this.value=undefined;this.href=undefined;this.icon=undefined;this.ariacontrols=undefined;this.tabid=undefined;this.activeTab=undefined}tag="button";get hostElement(){return e(this)}setActiveTab;setActiveTabHandler({click:t=false,element:n}={}){if(t||this.isActive()){const t=n?.value||this.value;const e=n?.value&&n||this.hostElement;this.setActiveTab.emit({val:t,el:e})}}tabEnter;triggerEnter(t){this.tabEnter.emit(t)}tabLeave;triggerLeave(t){this.tabLeave.emit(t)}componentWillLoad(){this.tabTag()}componentDidUpdate(){this.setActiveTabHandler()}componentDidLoad(){this.setActiveTabHandler()}arrowKeyNav(t){if(!/^(ArrowRight|ArrowLeft|Home|End)$/.test(t.key))return;t.preventDefault();const n=t.target.closest("pn-tablist");const e=Array.from(n.querySelectorAll("pn-tab"));const i=e[0];const a=e[e.length-1];const o=this.hostElement.nextElementSibling;const s=this.hostElement.previousElementSibling;if(t.key==="Home")this.setActiveTabHandler({element:i});if(t.key==="End")this.setActiveTabHandler({element:a});if(t.key==="ArrowRight"){this.setActiveTabHandler({element:o?.value?o:i})}if(t.key==="ArrowLeft"){this.setActiveTabHandler({element:s?.value?s:a})}}isActive(){return this.activeTab===this.value}tabTag(){const t=this.hostElement.closest("pn-tablist");this.tag=t.slot==="menu"?"a":"button"}renderProperties(){return this.tag==="a"?{href:this.href,"aria-current":this.isActive()?"page":"false"}:{tabindex:this.isActive()?0:-1,type:"button",role:"tab","aria-selected":this.isActive().toString(),"aria-controls":this.ariacontrols}}handleClick(t){this.setActiveTabHandler({click:true});o(t,this.hostElement,".pn-tab")}render(){const t=this.tag;return i(a,{key:"50c638d4e12ae9011d8efa3606499e906c9cb8c3"},i(t,{key:"79baf88094716a8499801d0becaeb3a5cb3698d4",id:this.tabid,class:"pn-tab",...this.renderProperties(),onClick:t=>this.handleClick(t),onMouseEnter:t=>this.triggerEnter(t),onFocus:t=>this.triggerEnter(t),onMouseLeave:t=>this.triggerLeave(t),onBlur:t=>this.triggerLeave(t),onKeyDown:t=>this.arrowKeyNav(t)},!!this.icon&&i("pn-icon",{key:"4fd00fa65a2921a5c8197085fc7c2528773b084b",icon:this.icon}),i("slot",{key:"5c72c7d4813f0644a5777b0f4d2575409fcf8c36"}),i("span",{key:"b6ee7be6b34ac3dc234ec2bc07f948ba612992e4"},this.label)))}};c.style=r;export{c as pn_tab};
6
+ //# sourceMappingURL=p-37297b9a.entry.js.map
@@ -0,0 +1,6 @@
1
+ /*!
2
+ * Built with Stencil
3
+ * By PostNord.
4
+ */
5
+ import{r as s,g as e,h as t,a as r}from"./p-43660913.js";import{u as a,e as i,k as o}from"./p-f64d17a6.js";const n={STEP:{da:"Trin",en:"Step",fi:"Vaihe",no:"Trinn",sv:"Steg"}};const p="pn-progress-stepper{display:block}pn-progress-stepper .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}pn-progress-stepper .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}pn-progress-stepper .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-value{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}pn-progress-stepper .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-dot{transition-duration:0s;transition-delay:0s}}pn-progress-stepper .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}pn-progress-stepper .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}";const l=p;const d=class{constructor(e){s(this,e);this.builtInLabel=undefined;this.progressValue=0;this.label="";this.progressStepperId="";this.language=null;this.totalSteps=this.maxStep;this.currentStep=this.minStep;this.stepName=undefined;this.dots=false}id=`pn-progress-stepper-${a()}`;minStep=1;maxStep=7;get hostElement(){return e(this)}stepWatchers(s,e,t){if(t==="currentStep")this.validate(s,"currentStep");if(t==="totalSteps")this.validate(e,"totalSteps");this.calculateProgress()}watchLanguage(){this.builtInLabel=n.STEP[this.language||i]}async componentWillLoad(){this.watchLanguage();this.validate(this.currentStep,"currentStep");this.validate(this.totalSteps,"totalSteps");this.calculateProgress();if(this.language===null)await o(this.hostElement)}validate(s,e){const t=this.hostElement.localName;if(s<this.minStep){console.warn(`${t}: The ${e} ${s} is below the minimum allowed steps of ${this.minStep}. ${e} will default to ${this.minStep}.`);this[e]=this.minStep}if(e==="currentStep"&&s>this.totalSteps){console.warn(`${t}: The ${e} ${s} is above totalSteps ${this.totalSteps}, ${e} will default to ${this.totalSteps}.`);this[e]=this.totalSteps}if(s>this.maxStep){console.warn(`${t}: The ${e} ${s} is above the maximum allowed steps of ${this.maxStep}. ${e} will default to ${this.maxStep}.`);this[e]=this.maxStep}}calculateProgress(){try{this.progressValue=Math.floor(this.currentStep/this.totalSteps*100);this.hostElement.style.setProperty("--pn-progress-value",`${this.progressValue}%`)}catch(s){console.error(`${this.hostElement.localName}:`,s.message)}}getLabel(){return this.label||this.builtInLabel}getId(){return this.progressStepperId||this.id}render(){return t(r,{key:"8b188af32a20e83f8e8d0460c676bda9e1560911"},t("label",{key:"9501af57bade0fd22ca865990e9c6934fb8da0d2",htmlFor:this.getId(),class:"pn-progress-label"+(this.dots?" pn-progress-sr-only":"")},t("span",{key:"7ae3e7e7fa8ea5d24fe13c895b6b86d7a0bd780a"},this.getLabel()," ",this.currentStep,"/",this.totalSteps),this.stepName&&t("span",{key:"3e15c0c51b59bbea44e8d589ff29da8c9cb5a666"}," - ",this.stepName)),t("progress",{key:"7e379261374b13ad1b06216fe96146ac7fad73c2",id:this.getId(),class:"pn-progress-sr-only",max:"100",value:this.progressValue}),this.dots?t("div",{class:"pn-progress-dots","aria-hidden":"true"},[...Array(this.totalSteps)].map(((s,e)=>t("div",{class:"pn-progress-dot","data-active":e+1<=this.currentStep,key:e})))):t("div",{"aria-hidden":"true",class:"pn-progress"},t("div",{class:"pn-progress-value","data-full":this.currentStep===this.totalSteps})))}static get watchers(){return{currentStep:["stepWatchers"],totalSteps:["stepWatchers"],language:["watchLanguage"]}}};d.style=l;export{d as pn_progress_stepper};
6
+ //# sourceMappingURL=p-49a39ea1.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["translations","STEP","da","en","fi","no","sv","pnProgressStepperCss","PnProgressStepperStyle0","PnProgressStepper","this","maxStep","minStep","id","uuidv4","stepWatchers","a","b","c","validate","calculateProgress","watchLanguage","builtInLabel","language","componentWillLoad","currentStep","totalSteps","awaitTopbar","hostElement","step","prop","componentName","localName","console","warn","progressValue","Math","floor","style","setProperty","error","message","getLabel","label","getId","progressStepperId","render","h","Host","key","htmlFor","class","dots","stepName","max","value","Array","map","_","i"],"sources":["src/components/feedback/pn-progress-stepper/translations.ts","src/components/feedback/pn-progress-stepper/pn-progress-stepper.scss?tag=pn-progress-stepper","src/components/feedback/pn-progress-stepper/pn-progress-stepper.tsx"],"sourcesContent":["export const translations = {\n STEP: {\n da: 'Trin',\n en: 'Step',\n fi: 'Vaihe',\n no: 'Trinn',\n sv: 'Steg',\n },\n};\n","@use 'src/globals/main';\n\npn-progress-stepper {\n display: block;\n}\n\npn-progress-stepper .pn-progress {\n position: relative;\n\n width: 100%;\n background: main.$gray50;\n height: 0.5em;\n border-radius: 0.5em;\n box-shadow: (0 0 0 0.0625em main.$gray400);\n\n &-label {\n display: block;\n color: main.$gray900;\n font-size: 1em;\n margin-bottom: 0.5em;\n }\n\n &-value {\n position: absolute;\n top: -0.0625em;\n left: -0.0625em;\n\n height: 0.625em;\n background-color: main.$blue700;\n width: calc(var(--pn-progress-value) + 0.125em);\n border-radius: 0.5em 0 0 0.5em;\n\n @include main.pn-transition('width, border-radius', main.$timing-layout);\n\n &[data-full] {\n border-top-right-radius: 0.5em;\n border-bottom-right-radius: 0.5em;\n }\n }\n\n &-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 1em;\n }\n\n &-dot {\n width: 0.875em;\n height: 0.875em;\n background-color: main.$gray50;\n border: 0.0625em solid main.$gray200;\n border-radius: 50%;\n\n transform: scale(1) translateY(0%);\n\n @include main.pn-transition('background-color, border-color', main.$timing-layout);\n\n // Default state - plays backwards animation when data-active is removed\n animation: pnBackwards main.$timing main.$easing;\n animation-fill-mode: forwards;\n\n &[data-active] {\n background-color: main.$blue700;\n border-color: main.$blue700;\n animation: pnForward main.$timing main.$easing;\n animation-fill-mode: forwards;\n }\n }\n\n @include main.pn-sr-only-class();\n}\n\n@keyframes pnForward {\n 0% {\n transform: scale(1) translateY(0%);\n }\n 50% {\n transform: scale(1) translateY(20%);\n }\n 75% {\n transform: scale(1.1) translateY(10%);\n }\n 100% {\n transform: scale(1) translateY(0%);\n }\n}\n\n@keyframes pnBackwards {\n 0% {\n transform: scale(1) translateY(0%);\n }\n 50% {\n transform: scale(1) translateY(-20%);\n }\n 75% {\n transform: scale(0.9) translateY(-10%);\n }\n 100% {\n transform: scale(1) translateY(0%);\n }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { translations } from './translations';\nimport { en, awaitTopbar, uuidv4 } from '@/globals/helpers';\nimport type { PnLanguages, PnStepProps } from '@/globals/types';\n\n/**\n * The `pn-progress-stepper` is used to visualize the users progress through a flow (checkout/survey, etc...).\n **/\n@Component({\n tag: 'pn-progress-stepper',\n styleUrl: 'pn-progress-stepper.scss',\n})\nexport class PnProgressStepper {\n private readonly id: string = `pn-progress-stepper-${uuidv4()}`;\n\n private readonly minStep: 1 = 1;\n private readonly maxStep: 7 = 7;\n\n @Element() hostElement: HTMLElement;\n\n @State() private builtInLabel: string;\n /** Percentage calculated with currentStep / totalSteps. */\n @State() private progressValue: number = 0;\n\n /** Set custom label for the stepper, default label is \"Step\". */\n @Prop() label?: string = '';\n /** Set a custom HTML id on the progress stepper element to associate progress bar with label. */\n @Prop() progressStepperId?: string = '';\n /**\n * Set the language manually, only use this prop if the pnTopbar is not loaded.\n * Will not overwrite the custom `label` prop if used.\n **/\n @Prop() language?: PnLanguages = null;\n\n /** Set total amount of steps, maximum allowed is `7`. @category Steps */\n @Prop({ mutable: true }) totalSteps: number = this.maxStep;\n /** The current step of the progress stepper. @category Steps */\n @Prop({ mutable: true }) currentStep: number = this.minStep;\n /** You can add a custom optional string to the label if you need a name for the current step. @category Steps */\n @Prop() stepName?: string;\n\n /**\n * Use the dots visual, instead of the bar.\n *\n * This will hide the label from view, but is still accessible to screenreaders.\n *\n * @category Visual\n */\n @Prop() dots: boolean = false;\n\n @Watch('currentStep')\n @Watch('totalSteps')\n stepWatchers(a: number, b: number, c: 'currentStep' | 'totalSteps') {\n if (c === 'currentStep') this.validate(a, 'currentStep');\n if (c === 'totalSteps') this.validate(b, 'totalSteps');\n this.calculateProgress();\n }\n\n @Watch('language')\n watchLanguage() {\n this.builtInLabel = translations.STEP[this.language || en];\n }\n\n async componentWillLoad() {\n this.watchLanguage();\n\n this.validate(this.currentStep, 'currentStep');\n this.validate(this.totalSteps, 'totalSteps');\n\n this.calculateProgress();\n\n if (this.language === null) await awaitTopbar(this.hostElement);\n }\n\n private validate(step: number, prop: PnStepProps) {\n const componentName = this.hostElement.localName;\n if (step < this.minStep) {\n console.warn(\n `${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`,\n );\n this[prop] = this.minStep;\n }\n if (prop === 'currentStep' && step > this.totalSteps) {\n console.warn(\n `${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`,\n );\n this[prop] = this.totalSteps;\n }\n if (step > this.maxStep) {\n console.warn(\n `${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`,\n );\n this[prop] = this.maxStep;\n }\n }\n\n private calculateProgress() {\n try {\n this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);\n this.hostElement.style.setProperty('--pn-progress-value', `${this.progressValue}%`);\n } catch (error) {\n console.error(`${this.hostElement.localName}:`, error.message);\n }\n }\n\n private getLabel() {\n return this.label || this.builtInLabel;\n }\n\n private getId() {\n return this.progressStepperId || this.id;\n }\n\n render() {\n return (\n <Host>\n <label htmlFor={this.getId()} class={'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '')}>\n <span>\n {this.getLabel()} {this.currentStep}/{this.totalSteps}\n </span>\n {this.stepName && <span> - {this.stepName}</span>}\n </label>\n <progress id={this.getId()} class=\"pn-progress-sr-only\" max=\"100\" value={this.progressValue} />\n\n {this.dots ? (\n <div class=\"pn-progress-dots\" aria-hidden=\"true\">\n {[...Array(this.totalSteps)].map((_, i) => (\n <div class=\"pn-progress-dot\" data-active={i + 1 <= this.currentStep} key={i} />\n ))}\n </div>\n ) : (\n <div aria-hidden=\"true\" class=\"pn-progress\">\n <div class=\"pn-progress-value\" data-full={this.currentStep === this.totalSteps} />\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":";;;;2GAAO,MAAMA,EAAe,CAC1BC,KAAM,CACJC,GAAI,OACJC,GAAI,OACJC,GAAI,QACJC,GAAI,QACJC,GAAI,SCNR,MAAMC,EAAuB,2mEAC7B,MAAAC,EAAeD,E,MCWFE,EAAiB,M,wEAUa,E,WAGhB,G,uBAEY,G,cAKJ,K,gBAGaC,KAAKC,Q,iBAEJD,KAAKE,Q,kCAW5B,K,CAnCPC,GAAa,uBAAuBC,MAEpCF,QAAa,EACbD,QAAa,E,iCAoC9B,YAAAI,CAAaC,EAAWC,EAAWC,GACjC,GAAIA,IAAM,cAAeR,KAAKS,SAASH,EAAG,eAC1C,GAAIE,IAAM,aAAcR,KAAKS,SAASF,EAAG,cACzCP,KAAKU,mB,CAIP,aAAAC,GACEX,KAAKY,aAAetB,EAAaC,KAAKS,KAAKa,UAAYpB,E,CAGzD,uBAAMqB,GACJd,KAAKW,gBAELX,KAAKS,SAAST,KAAKe,YAAa,eAChCf,KAAKS,SAAST,KAAKgB,WAAY,cAE/BhB,KAAKU,oBAEL,GAAIV,KAAKa,WAAa,WAAYI,EAAYjB,KAAKkB,Y,CAG7C,QAAAT,CAASU,EAAcC,GAC7B,MAAMC,EAAgBrB,KAAKkB,YAAYI,UACvC,GAAIH,EAAOnB,KAAKE,QAAS,CACvBqB,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,2CAA8CnB,KAAKE,YAAYkB,qBAAwBpB,KAAKE,YAE/HF,KAAKoB,GAAQpB,KAAKE,O,CAEpB,GAAIkB,IAAS,eAAiBD,EAAOnB,KAAKgB,WAAY,CACpDO,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,yBAA4BnB,KAAKgB,eAAeI,qBAAwBpB,KAAKgB,eAEhHhB,KAAKoB,GAAQpB,KAAKgB,U,CAEpB,GAAIG,EAAOnB,KAAKC,QAAS,CACvBsB,QAAQC,KACN,GAAGH,UAAsBD,KAAQD,2CAA8CnB,KAAKC,YAAYmB,qBAAwBpB,KAAKC,YAE/HD,KAAKoB,GAAQpB,KAAKC,O,EAId,iBAAAS,GACN,IACEV,KAAKyB,cAAgBC,KAAKC,MAAO3B,KAAKe,YAAcf,KAAKgB,WAAc,KACvEhB,KAAKkB,YAAYU,MAAMC,YAAY,sBAAuB,GAAG7B,KAAKyB,iB,CAClE,MAAOK,GACPP,QAAQO,MAAM,GAAG9B,KAAKkB,YAAYI,aAAcQ,EAAMC,Q,EAIlD,QAAAC,GACN,OAAOhC,KAAKiC,OAASjC,KAAKY,Y,CAGpB,KAAAsB,GACN,OAAOlC,KAAKmC,mBAAqBnC,KAAKG,E,CAGxC,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,SAAAE,IAAA,2CAAOC,QAASxC,KAAKkC,QAASO,MAAO,qBAAuBzC,KAAK0C,KAAO,uBAAyB,KAC/FL,EAAA,QAAAE,IAAA,4CACGvC,KAAKgC,WAAU,IAAGhC,KAAKe,YAAW,IAAGf,KAAKgB,YAE5ChB,KAAK2C,UAAYN,EAAA,QAAAE,IAAA,kDAAUvC,KAAK2C,WAEnCN,EAAA,YAAAE,IAAA,2CAAUpC,GAAIH,KAAKkC,QAASO,MAAM,sBAAsBG,IAAI,MAAMC,MAAO7C,KAAKyB,gBAE7EzB,KAAK0C,KACJL,EAAA,OAAKI,MAAM,mBAAkB,cAAa,QACvC,IAAIK,MAAM9C,KAAKgB,aAAa+B,KAAI,CAACC,EAAGC,IACnCZ,EAAA,OAAKI,MAAM,kBAAiB,cAAcQ,EAAI,GAAKjD,KAAKe,YAAawB,IAAKU,OAI9EZ,EAAA,qBAAiB,OAAOI,MAAM,eAC5BJ,EAAA,OAAKI,MAAM,oBAAmB,YAAYzC,KAAKe,cAAgBf,KAAKgB,c","ignoreList":[]}