@dso-toolkit/core 81.0.0 → 82.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/dist/bundle/dso-accordion-section.js +3 -3
  2. package/dist/bundle/dso-accordion-section.js.map +1 -1
  3. package/dist/bundle/dso-accordion.js +2 -2
  4. package/dist/bundle/dso-accordion.js.map +1 -1
  5. package/dist/bundle/dso-document-component.js +1 -1
  6. package/dist/bundle/dso-history-item.js +3 -2
  7. package/dist/bundle/dso-history-item.js.map +1 -1
  8. package/dist/bundle/dso-list-button.js +1 -1
  9. package/dist/bundle/dso-list-button.js.map +1 -1
  10. package/dist/bundle/dso-map-base-layers.js +1 -1
  11. package/dist/bundle/dso-map-overlays.js +1 -1
  12. package/dist/bundle/dso-ozon-content.js +1 -1
  13. package/dist/bundle/dso-selectable.js +1 -1
  14. package/dist/bundle/dsot-document-component-demo.js +2 -2
  15. package/dist/bundle/{p-ZFqVNkha.js → p-COQMcyrp.js} +3 -3
  16. package/dist/bundle/p-COQMcyrp.js.map +1 -0
  17. package/dist/bundle/{p-CN3aN7RU.js → p-DbaZzGS_.js} +73 -22
  18. package/dist/bundle/p-DbaZzGS_.js.map +1 -0
  19. package/dist/bundle/{p-CFAsG6Ok.js → p-ZIaudZgD.js} +6 -5
  20. package/dist/bundle/p-ZIaudZgD.js.map +1 -0
  21. package/dist/cjs/dso-accordion-section.cjs.entry.js +3 -3
  22. package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
  23. package/dist/cjs/dso-accordion-section.entry.cjs.js.map +1 -1
  24. package/dist/cjs/dso-accordion.cjs.entry.js +2 -2
  25. package/dist/cjs/dso-accordion.cjs.entry.js.map +1 -1
  26. package/dist/cjs/dso-accordion.entry.cjs.js.map +1 -1
  27. package/dist/cjs/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-ozon-content-toggletip.dso-panel.dso-table.entry.cjs.js.map +1 -1
  28. package/dist/cjs/dso-alert_7.cjs.entry.js +61 -20
  29. package/dist/cjs/dso-alert_7.cjs.entry.js.map +1 -1
  30. package/dist/cjs/dso-annotation-locatie.dso-document-component.entry.cjs.js.map +1 -1
  31. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +4 -3
  32. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js.map +1 -1
  33. package/dist/cjs/dso-history-item.cjs.entry.js +3 -2
  34. package/dist/cjs/dso-history-item.cjs.entry.js.map +1 -1
  35. package/dist/cjs/dso-history-item.entry.cjs.js.map +1 -1
  36. package/dist/cjs/dso-info.dso-selectable.entry.cjs.js.map +1 -1
  37. package/dist/cjs/dso-info_2.cjs.entry.js +1 -1
  38. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  39. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  40. package/dist/cjs/dso-list-button.entry.cjs.js.map +1 -1
  41. package/dist/cjs/parse-wijzigactie-from-node.function-DQ6mi_34.js +42 -0
  42. package/dist/cjs/parse-wijzigactie-from-node.function-DQ6mi_34.js.map +1 -0
  43. package/dist/collection/components/accordion/accordion.css +10 -0
  44. package/dist/collection/components/accordion/accordion.js +1 -1
  45. package/dist/collection/components/accordion/accordion.js.map +1 -1
  46. package/dist/collection/components/accordion/components/accordion-section.css +1 -0
  47. package/dist/collection/components/accordion/components/accordion-section.js +2 -2
  48. package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
  49. package/dist/collection/components/document-component/document-component.css +19 -12
  50. package/dist/collection/components/document-component/document-component.interfaces.js.map +1 -1
  51. package/dist/collection/components/document-component/document-component.js +4 -2
  52. package/dist/collection/components/document-component/document-component.js.map +1 -1
  53. package/dist/collection/components/history-item/history-item.css +4 -0
  54. package/dist/collection/components/history-item/history-item.interfaces.js.map +1 -1
  55. package/dist/collection/components/history-item/history-item.js +3 -2
  56. package/dist/collection/components/history-item/history-item.js.map +1 -1
  57. package/dist/collection/components/ozon-content/nodes/begrip.node.js +31 -0
  58. package/dist/collection/components/ozon-content/nodes/begrip.node.js.map +1 -0
  59. package/dist/collection/components/ozon-content/nodes/begrippenlijst.node.js +16 -0
  60. package/dist/collection/components/ozon-content/nodes/begrippenlijst.node.js.map +1 -0
  61. package/dist/collection/components/ozon-content/nodes/figuur.node.js +4 -4
  62. package/dist/collection/components/ozon-content/nodes/figuur.node.js.map +1 -1
  63. package/dist/collection/components/ozon-content/nodes/kop.node.js +1 -1
  64. package/dist/collection/components/ozon-content/nodes/kop.node.js.map +1 -1
  65. package/dist/collection/components/ozon-content/nodes/table.node/table-cell.js +4 -2
  66. package/dist/collection/components/ozon-content/nodes/table.node/table-cell.js.map +1 -1
  67. package/dist/collection/components/ozon-content/nodes/table.node/table-rows.js +2 -1
  68. package/dist/collection/components/ozon-content/nodes/table.node/table-rows.js.map +1 -1
  69. package/dist/collection/components/ozon-content/nodes/text.node.js +2 -7
  70. package/dist/collection/components/ozon-content/nodes/text.node.js.map +1 -1
  71. package/dist/collection/components/ozon-content/ozon-content-context.interface.js.map +1 -1
  72. package/dist/collection/components/ozon-content/ozon-content-mapper.js +4 -0
  73. package/dist/collection/components/ozon-content/ozon-content-mapper.js.map +1 -1
  74. package/dist/collection/components/ozon-content/ozon-content-node-context.interface.js.map +1 -1
  75. package/dist/collection/components/ozon-content/ozon-content.css +224 -0
  76. package/dist/collection/components/ozon-content/ozon-content.interfaces.js.map +1 -1
  77. package/dist/collection/components/ozon-content/ozon-content.js +6 -6
  78. package/dist/collection/components/ozon-content/ozon-content.js.map +1 -1
  79. package/dist/collection/components/selectable/selectable.css +22 -6
  80. package/dist/collection/functional-components/mark-text/mark-text.functional-component.js +11 -0
  81. package/dist/collection/functional-components/mark-text/mark-text.functional-component.js.map +1 -0
  82. package/dist/collection/functional-components/mark-text/mark-text.interfaces.js +2 -0
  83. package/dist/collection/functional-components/mark-text/mark-text.interfaces.js.map +1 -0
  84. package/dist/components/document-component.js +4 -3
  85. package/dist/components/document-component.js.map +1 -1
  86. package/dist/components/dso-accordion-section.js +3 -3
  87. package/dist/components/dso-accordion-section.js.map +1 -1
  88. package/dist/components/dso-accordion.js +2 -2
  89. package/dist/components/dso-accordion.js.map +1 -1
  90. package/dist/components/dso-history-item.js +3 -2
  91. package/dist/components/dso-history-item.js.map +1 -1
  92. package/dist/components/dso-list-button.js.map +1 -1
  93. package/dist/components/ozon-content.js +71 -20
  94. package/dist/components/ozon-content.js.map +1 -1
  95. package/dist/components/selectable.js +1 -1
  96. package/dist/components/selectable.js.map +1 -1
  97. package/dist/dso-toolkit/dso-accordion-section.entry.esm.js.map +1 -1
  98. package/dist/dso-toolkit/dso-accordion.entry.esm.js.map +1 -1
  99. package/dist/dso-toolkit/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-ozon-content-toggletip.dso-panel.dso-table.entry.esm.js.map +1 -1
  100. package/dist/dso-toolkit/dso-annotation-locatie.dso-document-component.entry.esm.js.map +1 -1
  101. package/dist/dso-toolkit/dso-history-item.entry.esm.js.map +1 -1
  102. package/dist/dso-toolkit/dso-info.dso-selectable.entry.esm.js.map +1 -1
  103. package/dist/dso-toolkit/dso-list-button.entry.esm.js.map +1 -1
  104. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  105. package/dist/dso-toolkit/p-004b02b7.entry.js +2 -0
  106. package/dist/dso-toolkit/p-004b02b7.entry.js.map +1 -0
  107. package/dist/dso-toolkit/p-05275c43.entry.js +2 -0
  108. package/dist/dso-toolkit/p-05275c43.entry.js.map +1 -0
  109. package/dist/dso-toolkit/p-32b64025.entry.js.map +1 -1
  110. package/dist/dso-toolkit/p-4bd397cb.entry.js +2 -0
  111. package/dist/dso-toolkit/p-4bd397cb.entry.js.map +1 -0
  112. package/dist/dso-toolkit/p-4f87903d.entry.js +2 -0
  113. package/dist/dso-toolkit/p-4f87903d.entry.js.map +1 -0
  114. package/dist/dso-toolkit/p-5a7ce367.entry.js +2 -0
  115. package/dist/dso-toolkit/p-5a7ce367.entry.js.map +1 -0
  116. package/dist/dso-toolkit/p-DrItCTMr.js +2 -0
  117. package/dist/dso-toolkit/p-DrItCTMr.js.map +1 -0
  118. package/dist/dso-toolkit/p-c0bb872c.entry.js +2 -0
  119. package/dist/dso-toolkit/p-c0bb872c.entry.js.map +1 -0
  120. package/dist/esm/dso-accordion-section.entry.js +3 -3
  121. package/dist/esm/dso-accordion-section.entry.js.map +1 -1
  122. package/dist/esm/dso-accordion.entry.js +2 -2
  123. package/dist/esm/dso-accordion.entry.js.map +1 -1
  124. package/dist/esm/dso-alert.dso-badge.dso-image-overlay.dso-ozon-content.dso-ozon-content-toggletip.dso-panel.dso-table.entry.js.map +1 -1
  125. package/dist/esm/dso-alert_7.entry.js +61 -20
  126. package/dist/esm/dso-alert_7.entry.js.map +1 -1
  127. package/dist/esm/dso-annotation-locatie.dso-document-component.entry.js.map +1 -1
  128. package/dist/esm/dso-annotation-locatie_2.entry.js +4 -3
  129. package/dist/esm/dso-annotation-locatie_2.entry.js.map +1 -1
  130. package/dist/esm/dso-history-item.entry.js +3 -2
  131. package/dist/esm/dso-history-item.entry.js.map +1 -1
  132. package/dist/esm/dso-info.dso-selectable.entry.js.map +1 -1
  133. package/dist/esm/dso-info_2.entry.js +1 -1
  134. package/dist/esm/dso-info_2.entry.js.map +1 -1
  135. package/dist/esm/dso-list-button.entry.js.map +1 -1
  136. package/dist/esm/parse-wijzigactie-from-node.function-lzoUYmkU.js +38 -0
  137. package/dist/esm/parse-wijzigactie-from-node.function-lzoUYmkU.js.map +1 -0
  138. package/dist/types/components/document-component/document-component.interfaces.d.ts +4 -4
  139. package/dist/types/components/history-item/history-item.interfaces.d.ts +1 -1
  140. package/dist/types/components/ozon-content/nodes/begrip.node.d.ts +6 -0
  141. package/dist/types/components/ozon-content/nodes/begrippenlijst.node.d.ts +6 -0
  142. package/dist/types/components/ozon-content/nodes/table.node/table-cell.d.ts +2 -0
  143. package/dist/types/components/ozon-content/ozon-content-context.interface.d.ts +3 -2
  144. package/dist/types/components/ozon-content/ozon-content-node-context.interface.d.ts +3 -2
  145. package/dist/types/components/ozon-content/ozon-content.d.ts +3 -2
  146. package/dist/types/components/ozon-content/ozon-content.interfaces.d.ts +0 -6
  147. package/dist/types/components.d.ts +6 -4
  148. package/dist/types/functional-components/mark-text/mark-text.functional-component.d.ts +8 -0
  149. package/dist/types/functional-components/mark-text/mark-text.interfaces.d.ts +6 -0
  150. package/package.json +3 -3
  151. package/dist/bundle/p-CFAsG6Ok.js.map +0 -1
  152. package/dist/bundle/p-CN3aN7RU.js.map +0 -1
  153. package/dist/bundle/p-ZFqVNkha.js.map +0 -1
  154. package/dist/cjs/parse-wijzigactie-from-node.function-DVYsomcI.js +0 -29
  155. package/dist/cjs/parse-wijzigactie-from-node.function-DVYsomcI.js.map +0 -1
  156. package/dist/dso-toolkit/p-622e11c0.entry.js +0 -2
  157. package/dist/dso-toolkit/p-622e11c0.entry.js.map +0 -1
  158. package/dist/dso-toolkit/p-70ea6c42.entry.js +0 -2
  159. package/dist/dso-toolkit/p-70ea6c42.entry.js.map +0 -1
  160. package/dist/dso-toolkit/p-932b7006.entry.js +0 -2
  161. package/dist/dso-toolkit/p-932b7006.entry.js.map +0 -1
  162. package/dist/dso-toolkit/p-DD1v6_X_.js +0 -2
  163. package/dist/dso-toolkit/p-DD1v6_X_.js.map +0 -1
  164. package/dist/dso-toolkit/p-c123217b.entry.js +0 -2
  165. package/dist/dso-toolkit/p-c123217b.entry.js.map +0 -1
  166. package/dist/dso-toolkit/p-d14bcff7.entry.js +0 -2
  167. package/dist/dso-toolkit/p-d14bcff7.entry.js.map +0 -1
  168. package/dist/dso-toolkit/p-ebef2eef.entry.js +0 -2
  169. package/dist/dso-toolkit/p-ebef2eef.entry.js.map +0 -1
  170. package/dist/esm/parse-wijzigactie-from-node.function-DD1v6_X_.js +0 -26
  171. package/dist/esm/parse-wijzigactie-from-node.function-DD1v6_X_.js.map +0 -1
@@ -1 +1 @@
1
- {"file":"dso-annotation-locatie.dso-document-component.entry.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,85MAA85M;;MCiBv6M,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;AClED,MAAM,OAAO,GAEhB,CAAC,EAA0C,EAAE,QAAQ,KAAI;AAAxD,IAAA,IAAA,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAA,GAAA,EAAY,EAAP,KAAK,GAAxC,MAAA,CAAA,EAAA,EAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,EAAA,SAAA,CAA0C,CAAF;AAC3C,IAAA,IAAI,cAAqB;IAEzB,QAAQ,OAAO;QACb;AACA,QAAA,KAAK,IAAI;YACP,cAAc,IACZ,CAAQ,CAAA,IAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,EAC9D,CAAA,EAAA,QAAQ,CACN,CACN;YACD;AACF,QAAA,KAAK,IAAI;YACP,cAAc,IACZ,CAAQ,CAAA,IAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,EAC9D,CAAA,EAAA,QAAQ,CACN,CACN;YACD;AACF,QAAA,KAAK,IAAI;YACP,cAAc,IACZ,CAAQ,CAAA,IAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,EAC9D,CAAA,EAAA,QAAQ,CACN,CACN;YACD;AACF,QAAA,KAAK,IAAI;YACP,cAAc,IACZ,CAAQ,CAAA,IAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,EAC9D,CAAA,EAAA,QAAQ,CACN,CACN;YACD;AACF,QAAA,KAAK,IAAI;YACP,cAAc,IACZ,CAAQ,CAAA,IAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,IAAE,OAAO,EAAE,IAAI,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,EAC9D,CAAA,EAAA,QAAQ,CACN,CACN;;AAGL,IAAA,IAAI,IAAI,KAAK,mBAAmB,IAAI,IAAI,EAAE;AACxC,QAAA,QACE,CAAG,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,gBAAgB,IACpD,cAAc,CACb;;AAIR,IAAA,OAAO,cAAc;AACvB,CAAC;;AC/DD,MAAM,oBAAoB,GAAG,sjlDAAsjlD;;ACuCnllD,MAAM,iBAAiB,GAA8D;AACnF,IAAA,eAAe,EAAE,YAAY;AAC7B,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,kBAAkB,EAAE,YAAY;AAChC,IAAA,OAAO,EAAE,YAAY;CACtB;AAED,MAAM,cAAc,GAGf,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,KAAI;AACnC,IAAA,QACE,EAAC,QAAQ,EAAA,IAAA,EACN,GAAG,EACH,YAAY,KACX,CACE,CAAA,WAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,OAAO,WACF,YAAY,CAAC;AAChB,UAAE,EAAE,MAAM,EAAE,YAAY,CAAC,WAAW,KAAK,SAAS,GAAG,YAAY,GAAG,YAAY;AAChF,UAAE,EAAE,EAAC,EAEN,YAAY,CAAC,IAAI,CACR,CACb,EAAE,GAAG,EACL,SAAS,KACR,CACE,CAAA,WAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,OAAO,WACF,SAAS,CAAC;AACb,UAAE,EAAE,MAAM,EAAE,SAAS,CAAC,WAAW,KAAK,SAAS,GAAG,YAAY,GAAG,YAAY;AAC7E,UAAE,EAAE,EAEL,EAAA,SAAS,CAAC,IAAI,CACL,CACb,CACQ;AAEf,CAAC;AAED,MAAM,aAAa,GAGd,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,KAAI;IACnC,IAAI,YAAY,IAAI,YAAY,CAAC,WAAW,KAAK,WAAW,IAAI,CAAC,SAAS,EAAE;AAC1E,QAAA,OAAO,CAAW,CAAA,WAAA,EAAA,EAAA,MAAM,EAAC,MAAM,iEAAuE;;IAGxG,IAAI,SAAS,IAAI,SAAS,CAAC,WAAW,KAAK,SAAS,IAAI,CAAC,YAAY,EAAE;AACrE,QAAA,OAAO,CAAW,CAAA,WAAA,EAAA,EAAA,MAAM,EAAC,MAAM,kCAAwC;;AAGzE,IAAA,OAAO,IAAI;AACb,CAAC;MAaY,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;AAME;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAqC,IAAI;AA8BhD;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEZ;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEhB;;AAEG;AAEH,QAAA,IAAa,CAAA,aAAA,GAAG,KAAK;AAErB;;AAEG;AAEH,QAAA,IAAwB,CAAA,wBAAA,GAAG,KAAK;AAEhC;;AAEG;AAEH,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AAE9B;;AAEG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA8BjB;;AAEG;AAEH,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAkDtB;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAA0B,UAAU;AAgDhC,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,CAAa,KAAI;AAC7C,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,EAAE;AACrC,gBAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;;AACvF,iBAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;AAC9B,gBAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;;AAEnE,SAAC;AAEO,QAAA,IAAA,CAAA,sBAAsB,GAAG,CAAC,KAAuD,KAAI;AAC3F,YAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;AAExB,YAAA,IAAI,MAAM,CAAC,IAAI,KAAK,KAAK,EAAE;AACzB,gBAAA,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,aAAa,CAAC;;iBACxC;AACL,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;;AAE3F,SAAC;AAEO,QAAA,IAAA,CAAA,0BAA0B,GAAG,CAAC,CAAa,KAAI;AACrD,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;AAC3B,gBAAA,aAAa,EAAE,CAAC;gBAChB,OAAO,EAAE,IAAI,CAAC,eAAe;AAC7B,gBAAA,IAAI,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI;AACpC,aAAA,CAAC;AACJ,SAAC;AAuLF;AAnZC;;AAEG;AACH,IAAA,IACI,GAAG,GAAA;QACL,OAAO,IAAI,CAAC,SAAS;;IAEvB,IAAI,GAAG,CAAC,KAA6C,EAAA;AACnD,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,QAAA,IAAI,CAAC,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK;;AAKjE;;AAEG;AACH,IAAA,IACI,MAAM,GAAA;QACR,OAAO,IAAI,CAAC,YAAY;;IAE1B,IAAI,MAAM,CAAC,KAA6C,EAAA;AACtD,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,KAAK;;AAyCpE;;AAEG;AACH,IAAA,IACI,YAAY,GAAA;QACd,OAAO,IAAI,CAAC,kBAAkB;;IAEhC,IAAI,YAAY,CAAC,KAA6C,EAAA;AAC5D,QAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK;QAC/B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;;AAKvD;;AAEG;AACH,IAAA,IACI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,eAAe;;IAE7B,IAAI,SAAS,CAAC,KAA6C,EAAA;AACzD,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;;AAyGpD,IAAA,IAAY,gBAAgB,GAAA;QAC1B,OAAO,IAAI,CAAC,WAAW,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;;IA6BxD,gBAAgB,GAAA;QACtB,QACE,IAAI,CAAC,wBAAwB;YAC7B,CAAC,IAAI,CAAC,sBAAsB;aAC3B,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KAAK,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC;;AAI3E,IAAA,oBAAoB,CAAC,KAAkC,EAAA;QAC7D,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,SAAS;;AAGlB,QAAA,IAAI,OAA4B;AAEhC,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC3B,OAAO,GAAG,GAAG,KAAH,IAAA,IAAA,GAAG,uBAAH,GAAG,CAAE,eAAe;;AACzB,aAAA,IAAI,KAAK,YAAY,WAAW,EAAE;AACvC,YAAA,OAAO,GAAG,KAAK,CAAC,eAAe;;QAGjC,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,SAAS;;AAGlB,QAAA,MAAM,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC;QACrD,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;AAEzC,QAAA,IAAI,IAA0D;AAC9D,QAAA,IAAI,GAAG,KAAK,WAAW,EAAE;YACvB,IAAI,GAAG,WAAW;;AACb,aAAA,IAAI,GAAG,KAAK,cAAc,EAAE;YACjC,IAAI,GAAG,cAAc;;QAGvB,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,OAAO,SAAS;;AAGlB,QAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE;;IAG9B,MAAM,GAAA;QACJ,MAAM,WAAW,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;AAEnF,QAAA,MAAM,WAAW,GAAG,CAAC,EACnB,IAAI,CAAC,WAAW;YAChB,WAAW;AACX,YAAA,IAAI,CAAC,IAAI;AACT,YAAA,IAAI,CAAC,gBAAgB;AACrB,YAAA,IAAI,CAAC,sBAAsB;YAC3B,IAAI,CAAC,SAAS,CACf;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,iBAAA,EAAkB,CAAC,WAAW,EAAA,EAChC,WAAW,KACV,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACrD,IAAI,CAAC,WAAW,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAAE,IAAI,CAAC,gBAAgB,EAAS,GAAA,CAAA,EACnF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAC,OAAO,EACN,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,GAAG,SAAS,EACpE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,EAEd,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KACtC,CACE,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,WAAW,EAC3C,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,cAAc,GAAG,eAAe,EAClD,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAClE,CACH,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,eAAe,EAAA,EACrB,IAAI,CAAC,aAAa,IAAI,6DAAM,KAAK,EAAC,SAAS,EAA4B,EAAA,sBAAA,CAAA,EAEvE,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,kBAAA,EAAA,EACE,KAAK,EAAC,KAAK,EACX,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,UAAU,EAAE,IAAI,CAAC,sBAAsB,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,KAAI,UAAC,OAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,qDAAG,IAAI,EAAE,KAAK,CAAC,CAAA,EAAA,CAAC,EACvD,iCAAiC,EAAE,CAAC,CAAC,KACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,iCAAM,CAAC,CAAC,MAAM,CAAE,EAAA,EAAA,MAAM,EAAE,KAAK,EAAA,CAAA,CAAG,EAEhE,MAAM,EAAA,IAAA,EACN,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAAA,CAC9C,KAEF,IAAI,CAAC,gBAAgB,CACtB,EAED,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAA,CAAI,CAC3E,CACC,EAET,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KAC1E,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,eAAe,GAAG,YAAY,EACrE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,KAAK,IAAI,GAAG,KAAK,GAAG,WAAW,EACzD,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,GAC1E,CACH,EAEA,IAAI,CAAC,gBAAgB,EAAE,KACtB,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,MAAM,EAAC,SAAS,EAAA,kBAAA,EAAkB,0BAA0B,EAE3D,EAAA,GAAA,CAAA,EACZ,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,EAAE,EAAC,0BAA0B,EAAA,EAAA,qEAAA,CAE5B,CACL,CACZ,EAEA,CAAC,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,SAAS,MAC7C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAChB,IAAI,CAAC,sBAAsB,KAC1B,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,MAAM,EAAC,SAAS,EAAC,OAAO,EAAA,IAAA,EAAA,EAAA,SAAA,CAEvB,CACb,EACA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KACzC,CACE,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAA8B,2BAAA,EAAA,IAAI,CAAC,cAAc,GAAG,WAAW,GAAG,OAAO,CAAA,CAAE,EAClF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EAAA,CAC3F,CACH,CACG,CACP,CACG,CACF,CACP,EAEA,IAAI,CAAC,cAAc,KAClB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,uBAAuB,EAAA,EAC5D,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,aAAa,EAChB,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3E,gBAAgB,EAAC,sCAAsC,EAAA,EAEvD,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAwB,EAAA,oBAAA,CAAA,EAC1C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAG,CAAA,CACjB,CACR,CACP,EAEA,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,KAC/F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,UAAU,EAAA,EAClC,CAAA,CAAC,aAAa,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,YAAY,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAI,CAAA,EAE9E,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,sBAAsB,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,KAAI,EAAC,IAAA,EAAA,CAAA,CAAA,OAAA,MAAA,IAAI,CAAC,IAAI,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAA,IAAI,EAAE,QAAQ,CAAC,CAAA,EAAA,CAAC,EAC1D,iCAAiC,EAAE,CAAC,CAAC,KACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAM,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,CAAC,CAAC,MAAM,CAAA,EAAA,EAAE,MAAM,EAAE,QAAQ,EAAG,CAAA,CAAA,EAEnE,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,CAAA,CACH,CACG,CACP,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,qBAAqB,EAAA,EACxD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n tag: \"dso-annotation-locatie\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n /**\r\n * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de annotatie actief is.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n */\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /**\r\n * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /**\r\n * De noemer van de locatie.\r\n */\r\n @Prop()\r\n locatieNoemer?: RenvooiValue | string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.locatieNoemer} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n","import { FunctionalComponent, VNode, h } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { DocumentComponentMode } from \"./document-component.interfaces\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n mode: DocumentComponentMode;\r\n href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n let headingElement: VNode;\r\n\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n headingElement = (\r\n <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h2>\r\n );\r\n break;\r\n case \"h3\":\r\n headingElement = (\r\n <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h3>\r\n );\r\n break;\r\n case \"h4\":\r\n headingElement = (\r\n <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h4>\r\n );\r\n break;\r\n case \"h5\":\r\n headingElement = (\r\n <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h5>\r\n );\r\n break;\r\n case \"h6\":\r\n headingElement = (\r\n <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h6>\r\n );\r\n }\r\n\r\n if (mode === \"table-of-contents\" && href) {\r\n return (\r\n <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n {headingElement}\r\n </a>\r\n );\r\n }\r\n\r\n return headingElement;\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n padding-inline-start: units.$u1;\r\n margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n padding-block-start: units.$u1 * 0.5;\r\n padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n --_dso-document-component-text-decoration: line-through;\r\n\r\n @include delete.root($strikethrough: false);\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n position: relative;\r\n\r\n &::before {\r\n content: \"\";\r\n inset-inline-start: -3px;\r\n position: absolute;\r\n display: block;\r\n inline-size: 3px;\r\n inset-block-start: 0;\r\n inset-block-end: 0;\r\n background-color: colors.$lichtblauw;\r\n }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n .annotation-container,\r\n .heading-container {\r\n margin-block-end: units.$u1;\r\n }\r\n}\r\n\r\n:host(:not([open])),\r\n:host([mode=\"table-of-contents\"]) {\r\n dso-ozon-content::part(_subtitels) {\r\n display: none;\r\n }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen};\r\n border: 0;\r\n padding: 0;\r\n background: 0;\r\n color: colors.$bosgroen;\r\n}\r\n\r\n.heading-anchor {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n\r\n @include link.root();\r\n\r\n text-decoration: none;\r\n}\r\n\r\n.heading-element {\r\n align-items: start;\r\n display: flex;\r\n font-size: 1rem;\r\n color: colors.$bosgroen;\r\n margin: 0;\r\n\r\n > * {\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n#heading-title {\r\n display: block;\r\n}\r\n\r\n:host([not-collapsible]) {\r\n .heading-container {\r\n margin-block-end: 0;\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: 0;\r\n }\r\n\r\n dso-ozon-content.kop::part(_kop) {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible])) {\r\n --link-color: #{document-component.$heading-anchor-color};\r\n --link-hover-color: #{document-component.$heading-anchor-hover-color};\r\n\r\n .heading-title > dso-ozon-content {\r\n cursor: pointer;\r\n @include link.pseudo();\r\n }\r\n\r\n dso-ozon-content {\r\n &.kop::part(_kop) {\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: var(--link-hover-color);\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &[inline].kop::part(_kop) {\r\n display: inline;\r\n }\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: document-component.$indent;\r\n }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible]):active) {\r\n dso-ozon-content.kop::part(_kop) {\r\n text-decoration: none;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]) {\r\n .heading-container {\r\n padding-inline-start: document-component.$indent-table-of-contents;\r\n }\r\n\r\n .heading-element {\r\n color: inherit;\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: 0;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"][type=\"ARTIKEL\"]) {\r\n dso-ozon-content.kop::part(_kop) {\r\n --_dso-icon-button-tertiary-color: inherit;\r\n color: inherit;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]:not([type=\"HOOFDSTUK\"])) {\r\n dso-ozon-content.kop::part(_kop) {\r\n font-weight: normal;\r\n }\r\n}\r\n\r\n.addons {\r\n margin-inline-start: auto;\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n display: flex;\r\n align-items: start;\r\n gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]:not([alternative-title])) {\r\n dso-ozon-content.kop::part(_kop),\r\n .toggle-button {\r\n --_dso-icon-button-tertiary-color: #{colors.$zwart};\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n .annotation-container {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n padding-inline-end: units.$u1;\r\n}\r\n\r\n.content {\r\n --_dso-alert-margin-block-end: #{units.$u1};\r\n}\r\n\r\n.annotation-container {\r\n padding-inline-end: units.$u1;\r\n\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$wit};\r\n }\r\n}\r\n\r\n:host(:where([annotations-wijzigactie=\"verwijder\"])) {\r\n .annotation-container {\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$rood-10};\r\n --_dso-renvooi-text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n:host([annotations-wijzigactie=\"voegtoe\"]) {\r\n .annotation-container {\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$lime-10};\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n FunctionalComponent,\r\n Host,\r\n Prop,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { parseXml } from \"../../utils/parse-xml\";\r\nimport { parseWijzigactieFromNode } from \"../ozon-content/functions/parse-wijzigactie-from-node.function\";\r\nimport {\r\n OzonContentBegripResolver,\r\n OzonContentClickEvent,\r\n OzonContentUrlResolver,\r\n} from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nimport { Heading } from \"./document-component-heading\";\r\nimport {\r\n DocumentComponentAantekenElement,\r\n DocumentComponentAnnotationsWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n DocumentComponentMode,\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentOzonContentClickEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentRecursiveToggleState,\r\n DocumentComponentTableOfContentsClickEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentWijzigactie,\r\n} from \"./document-component.interfaces\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n nieuweContainer: \"Toegevoegd\",\r\n verwijder: \"Verwijderd\",\r\n verwijderContainer: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst AantekenStatus: FunctionalComponent<{\r\n gereserveerd?: DocumentComponentAantekenElement;\r\n vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n return (\r\n <Fragment>\r\n {\" \"}\r\n {gereserveerd && (\r\n <dso-label\r\n compact\r\n {...(gereserveerd.wijzigactie\r\n ? { status: gereserveerd.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n : {})}\r\n >\r\n {gereserveerd.type}\r\n </dso-label>\r\n )}{\" \"}\r\n {vervallen && (\r\n <dso-label\r\n compact\r\n {...(vervallen.wijzigactie\r\n ? { status: vervallen.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n : {})}\r\n >\r\n {vervallen.type}\r\n </dso-label>\r\n )}\r\n </Fragment>\r\n );\r\n};\r\n\r\nconst AantekenAlert: FunctionalComponent<{\r\n gereserveerd?: DocumentComponentAantekenElement;\r\n vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n if (gereserveerd && gereserveerd.wijzigactie !== \"verwijder\" && !vervallen) {\r\n return <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>;\r\n }\r\n\r\n if (vervallen && vervallen.wijzigactie !== \"voegtoe\" && !gereserveerd) {\r\n return <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>;\r\n }\r\n\r\n return null;\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n tag: \"dso-document-component\",\r\n styleUrl: \"document-component.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n /**\r\n * The heading element to use.\r\n */\r\n @Prop()\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n private _kopInput?: DocumentComponentInputType;\r\n private _kop?: XMLDocument;\r\n /**\r\n * The Kop XML.\r\n */\r\n @Prop()\r\n get kop(): DocumentComponentInputType | undefined {\r\n return this._kopInput;\r\n }\r\n set kop(value: DocumentComponentInputType | undefined) {\r\n this._kopInput = value;\r\n this._kop = typeof value === \"string\" ? parseXml(value) : value;\r\n }\r\n\r\n private _inhoudInput?: DocumentComponentInputType;\r\n private _inhoud?: XMLDocument;\r\n /**\r\n * The Inhoud XML.\r\n */\r\n @Prop()\r\n get inhoud(): DocumentComponentInputType | undefined {\r\n return this._inhoudInput;\r\n }\r\n set inhoud(value: DocumentComponentInputType | undefined) {\r\n this._inhoudInput = value;\r\n this._inhoud = typeof value === \"string\" ? parseXml(value) : value;\r\n }\r\n\r\n /**\r\n * This boolean attribute indicates whether the children are visible.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Marks this Document Component as belonging to an active filter.\r\n */\r\n @Prop({ reflect: true })\r\n filtered = false;\r\n\r\n /**\r\n * Marks this Document Component as not-applicable.\r\n */\r\n @Prop({ reflect: true })\r\n notApplicable = false;\r\n\r\n /**\r\n * When a child Document Component has a status \"Draft\".\r\n */\r\n @Prop({ reflect: true })\r\n genesteOntwerpInformatie = false;\r\n\r\n /**\r\n * Marks as draft.\r\n */\r\n @Prop({ reflect: true })\r\n bevatOntwerpInformatie = false;\r\n\r\n /**\r\n * Enables annotations.\r\n */\r\n @Prop({ reflect: true })\r\n annotated = false;\r\n\r\n private _gereserveerdInput?: DocumentComponentInputType;\r\n private _gereserveerd?: DocumentComponentAantekenElement;\r\n /**\r\n * Marks Document Component as reserved.\r\n */\r\n @Prop()\r\n get gereserveerd(): DocumentComponentInputType | undefined {\r\n return this._gereserveerdInput;\r\n }\r\n set gereserveerd(value: DocumentComponentInputType | undefined) {\r\n this._gereserveerdInput = value;\r\n this._gereserveerd = this.parseAantekenElement(value);\r\n }\r\n\r\n private _vervallenInput?: DocumentComponentInputType;\r\n private _vervallen?: DocumentComponentAantekenElement;\r\n /**\r\n * Marks the Document Component as expired.\r\n */\r\n @Prop()\r\n get vervallen(): DocumentComponentInputType | undefined {\r\n return this._vervallenInput;\r\n }\r\n set vervallen(value: DocumentComponentInputType | undefined) {\r\n this._vervallenInput = value;\r\n this._vervallen = this.parseAantekenElement(value);\r\n }\r\n\r\n /**\r\n * When the Annotation is opened, set this to true.\r\n */\r\n @Prop({ reflect: true })\r\n openAnnotation = false;\r\n\r\n /**\r\n * An alternative title to show when there is nothing to create a title.\r\n */\r\n @Prop({ reflect: true })\r\n alternativeTitle?: string;\r\n\r\n /**\r\n * Type of Document Component.\r\n */\r\n @Prop({ reflect: true })\r\n type?: string;\r\n\r\n /**\r\n * The wijzigactie as in STOP.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n /**\r\n * The wijzigactie for all annotations.\r\n */\r\n @Prop({ reflect: true })\r\n annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\r\n\r\n /**\r\n * To mark text.\r\n */\r\n @Prop()\r\n mark?: DocumentComponentMarkFunction;\r\n\r\n /**\r\n * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n */\r\n @Prop()\r\n recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n /**\r\n * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n */\r\n @Prop()\r\n ozonContentUrlResolver?: OzonContentUrlResolver;\r\n\r\n /**\r\n * A BegripResolver that will be called for STOP element \"IntRef\" with @scope=\"Begrip\".\r\n */\r\n @Prop()\r\n ozonContentBegripResolver?: OzonContentBegripResolver;\r\n\r\n /**\r\n * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n */\r\n @Prop({ reflect: true })\r\n mode: DocumentComponentMode = \"document\";\r\n\r\n /**\r\n * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n */\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the user activates the recursive toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user clicks the heading in mode=\"table-of-contents\".\r\n */\r\n @Event({ bubbles: false })\r\n dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n /**\r\n * Emitted when the user interacts with Kop, IntRef or the Kenmerken en kaart button of IntIoRef in Ozon Content\r\n */\r\n @Event({ bubbles: false })\r\n dsoOzonContentClick!: EventEmitter<DocumentComponentOzonContentClickEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the annotation button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n /**\r\n * Emitted each time a marked item gets highlighted.\r\n */\r\n @Event({ bubbles: false })\r\n dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n private get wijzigactieLabel(): string | undefined {\r\n return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n }\r\n\r\n private handleHeadingClick = (e: MouseEvent) => {\r\n if (this.mode === \"table-of-contents\") {\r\n this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n } else if (this.type !== \"LID\") {\r\n this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n }\r\n };\r\n\r\n private handleOzonContentClick = (event: DsoOzonContentCustomEvent<OzonContentClickEvent>) => {\r\n const { detail } = event;\r\n\r\n if (detail.type === \"Kop\") {\r\n this.handleHeadingClick(detail.originalEvent);\r\n } else {\r\n this.dsoOzonContentClick.emit({ originalEvent: event, ozonContentClick: event.detail });\r\n }\r\n };\r\n\r\n private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n this.dsoRecursiveToggle.emit({\r\n originalEvent: e,\r\n current: this.recursiveToggle,\r\n next: this.recursiveToggle !== true,\r\n });\r\n };\r\n\r\n private showOntwerpBadge(): boolean {\r\n return (\r\n this.genesteOntwerpInformatie &&\r\n !this.bevatOntwerpInformatie &&\r\n ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\r\n );\r\n }\r\n\r\n private parseAantekenElement(input?: DocumentComponentInputType): DocumentComponentAantekenElement | undefined {\r\n if (!input) {\r\n return undefined;\r\n }\r\n\r\n let element: Element | undefined;\r\n\r\n if (typeof input === \"string\") {\r\n const doc = parseXml(input);\r\n element = doc?.documentElement;\r\n } else if (input instanceof XMLDocument) {\r\n element = input.documentElement;\r\n }\r\n\r\n if (!element) {\r\n return undefined;\r\n }\r\n\r\n const wijzigactie = parseWijzigactieFromNode(element);\r\n const tag = element.tagName.toLowerCase();\r\n\r\n let type: DocumentComponentAantekenElement[\"type\"] | undefined;\r\n if (tag === \"vervallen\") {\r\n type = \"Vervallen\";\r\n } else if (tag === \"gereserveerd\") {\r\n type = \"Gereserveerd\";\r\n }\r\n\r\n if (!type) {\r\n return undefined;\r\n }\r\n\r\n return { type, wijzigactie };\r\n }\r\n\r\n render() {\r\n const collapsible = !!((this._kop || this.alternativeTitle) && this.type !== \"LID\");\r\n\r\n const showHeading = !!(\r\n this.wijzigactie ||\r\n collapsible ||\r\n this._kop ||\r\n this.alternativeTitle ||\r\n this.bevatOntwerpInformatie ||\r\n this.annotated\r\n );\r\n\r\n return (\r\n <Host not-collapsible={!collapsible}>\r\n {showHeading && (\r\n <div class=\"heading-container\" part=\"_heading-container\">\r\n {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n <div class=\"heading\">\r\n <Heading\r\n heading={this.heading}\r\n class=\"heading-element\"\r\n onClick={this.alternativeTitle ? this.handleHeadingClick : undefined}\r\n mode={this.mode}\r\n href={this.href}\r\n >\r\n {collapsible && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={this.open ? \"Invouwen\" : \"Uitvouwen\"}\r\n class=\"toggle-button\"\r\n icon={this.open ? \"chevron-down\" : \"chevron-right\"}\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.handleHeadingClick(e.detail.originalEvent)}\r\n />\r\n )}\r\n <span id=\"heading-title\">\r\n {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n\r\n {this._kop ? (\r\n <dso-ozon-content\r\n class=\"kop\"\r\n content={this._kop}\r\n onDsoClick={this.handleOzonContentClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"kop\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"kop\" })\r\n }\r\n inline\r\n urlResolver={this.ozonContentUrlResolver}\r\n begripResolver={this.ozonContentBegripResolver}\r\n />\r\n ) : (\r\n this.alternativeTitle\r\n )}\r\n\r\n <AantekenStatus gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n </span>\r\n </Heading>\r\n\r\n {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n class=\"recursive-toggle\"\r\n icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"}\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.handleRecursiveToggleClick(e.detail.originalEvent)}\r\n />\r\n )}\r\n\r\n {this.showOntwerpBadge() && (\r\n <Fragment>\r\n <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n !\r\n </dso-badge>\r\n <dso-tooltip id=\"nested-draft-description\">\r\n Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.\r\n </dso-tooltip>\r\n </Fragment>\r\n )}\r\n\r\n {(this.bevatOntwerpInformatie || this.annotated) && (\r\n <div class=\"addons\">\r\n {this.bevatOntwerpInformatie && (\r\n <dso-label status=\"warning\" compact>\r\n Ontwerp\r\n </dso-label>\r\n )}\r\n {this.annotated && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={`Kenmerken en kaartgegevens ${this.openAnnotation ? \"verbergen\" : \"tonen\"}`}\r\n icon=\"label\"\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent })}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n {this.openAnnotation && (\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <dso-panel\r\n id=\"annotations\"\r\n onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n >\r\n <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n <slot name=\"annotations\" />\r\n </dso-panel>\r\n </div>\r\n )}\r\n\r\n {this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === \"document\" && (\r\n <div class=\"content\" part=\"_content\">\r\n <AantekenAlert gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n\r\n {this._inhoud && (\r\n <dso-ozon-content\r\n content={this._inhoud}\r\n onDsoClick={this.handleOzonContentClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n }\r\n urlResolver={this.ozonContentUrlResolver}\r\n begripResolver={this.ozonContentBegripResolver}\r\n />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div class=\"children-container\" part=\"_children-container\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"dso-annotation-locatie.dso-document-component.entry.js","mappings":"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","names":[],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n tag: \"dso-annotation-locatie\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n /**\r\n * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de annotatie actief is.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n */\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /**\r\n * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /**\r\n * De noemer van de locatie.\r\n */\r\n @Prop()\r\n locatieNoemer?: RenvooiValue | string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.locatieNoemer} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n","import { FunctionalComponent, VNode, h } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { DocumentComponentMode } from \"./document-component.interfaces\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n mode: DocumentComponentMode;\r\n href?: string;\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, mode, href, onClick, ...props }, children) => {\r\n let headingElement: VNode;\r\n\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n headingElement = (\r\n <h2 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h2>\r\n );\r\n break;\r\n case \"h3\":\r\n headingElement = (\r\n <h3 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h3>\r\n );\r\n break;\r\n case \"h4\":\r\n headingElement = (\r\n <h4 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h4>\r\n );\r\n break;\r\n case \"h5\":\r\n headingElement = (\r\n <h5 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h5>\r\n );\r\n break;\r\n case \"h6\":\r\n headingElement = (\r\n <h6 {...props} onClick={mode === \"document\" ? onClick : undefined}>\r\n {children}\r\n </h6>\r\n );\r\n }\r\n\r\n if (mode === \"table-of-contents\" && href) {\r\n return (\r\n <a href={href} onClick={onClick} class=\"heading-anchor\">\r\n {headingElement}\r\n </a>\r\n );\r\n }\r\n\r\n return headingElement;\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/mark/mark\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n padding-inline-start: units.$u1;\r\n margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n padding-block-start: units.$u1 * 0.5;\r\n padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n --_dso-document-component-text-decoration: line-through;\r\n\r\n @include delete.root($strikethrough: false);\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n position: relative;\r\n\r\n &::before {\r\n content: \"\";\r\n inset-inline-start: -3px;\r\n position: absolute;\r\n display: block;\r\n inline-size: 3px;\r\n inset-block-start: 0;\r\n inset-block-end: 0;\r\n background-color: colors.$lichtblauw;\r\n }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n .annotation-container,\r\n .heading-container {\r\n margin-block-end: units.$u1;\r\n }\r\n}\r\n\r\n:host(:not([open])),\r\n:host([mode=\"table-of-contents\"]) {\r\n dso-ozon-content::part(_subtitels) {\r\n display: none;\r\n }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen};\r\n border: 0;\r\n padding: 0;\r\n background: 0;\r\n color: colors.$bosgroen;\r\n}\r\n\r\n.heading-anchor {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n\r\n @include link.root();\r\n\r\n text-decoration: none;\r\n}\r\n\r\n.heading-element {\r\n align-items: start;\r\n display: flex;\r\n font-size: 1rem;\r\n color: colors.$bosgroen;\r\n margin: 0;\r\n\r\n > * {\r\n vertical-align: middle;\r\n }\r\n}\r\n\r\n.alternative-title {\r\n cursor: pointer;\r\n @include link.pseudo();\r\n}\r\n\r\n:host([not-collapsible]) {\r\n .heading-container {\r\n margin-block-end: 0;\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: 0;\r\n }\r\n\r\n dso-ozon-content.kop::part(_kop) {\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible])) {\r\n --link-color: #{document-component.$heading-anchor-color};\r\n --link-hover-color: #{document-component.$heading-anchor-hover-color};\r\n\r\n dso-ozon-content {\r\n &.kop::part(_kop) {\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: var(--link-hover-color);\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &[inline].kop::part(_kop) {\r\n display: inline;\r\n }\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: document-component.$indent;\r\n }\r\n}\r\n\r\n:host([mode=\"document\"]:not([not-collapsible]):active) {\r\n dso-ozon-content.kop::part(_kop) {\r\n text-decoration: none;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]) {\r\n .heading-container {\r\n padding-inline-start: document-component.$indent-table-of-contents;\r\n }\r\n\r\n .heading-element {\r\n color: inherit;\r\n }\r\n\r\n .editaction-label {\r\n margin-inline-start: 0;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"][type=\"ARTIKEL\"]) {\r\n dso-ozon-content.kop::part(_kop) {\r\n --_dso-icon-button-tertiary-color: inherit;\r\n color: inherit;\r\n }\r\n}\r\n\r\n:host([mode=\"table-of-contents\"]:not([type=\"HOOFDSTUK\"])) {\r\n dso-ozon-content.kop::part(_kop) {\r\n font-weight: normal;\r\n }\r\n}\r\n\r\n.addons {\r\n margin-inline-start: auto;\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n display: flex;\r\n align-items: start;\r\n gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]:not([alternative-title])) {\r\n dso-ozon-content.kop::part(_kop),\r\n .toggle-button {\r\n --_dso-icon-button-tertiary-color: #{colors.$zwart};\r\n color: colors.$zwart;\r\n }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n .annotation-container {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n padding-inline-end: units.$u1;\r\n}\r\n\r\n.content {\r\n --_dso-alert-margin-block-end: #{units.$u1};\r\n}\r\n\r\n.annotation-container {\r\n padding-inline-end: units.$u1;\r\n\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$wit};\r\n }\r\n}\r\n\r\n:host(:where([annotations-wijzigactie=\"verwijder\"])) {\r\n .annotation-container {\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$rood-10};\r\n --_dso-renvooi-text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n:host([annotations-wijzigactie=\"voegtoe\"]) {\r\n .annotation-container {\r\n dso-panel {\r\n --_dso-panel-body-background-color: #{colors.$lime-10};\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n FunctionalComponent,\r\n Host,\r\n Prop,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { MarkText } from \"../../functional-components/mark-text/mark-text.functional-component\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { parseXml } from \"../../utils/parse-xml\";\r\nimport { parseWijzigactieFromNode } from \"../ozon-content/functions/parse-wijzigactie-from-node.function\";\r\nimport {\r\n OzonContentBegripResolver,\r\n OzonContentClickEvent,\r\n OzonContentUrlResolver,\r\n} from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nimport { Heading } from \"./document-component-heading\";\r\nimport {\r\n DocumentComponentAantekenElement,\r\n DocumentComponentAnnotationsWijzigactie,\r\n DocumentComponentInputType,\r\n DocumentComponentMarkFunction,\r\n DocumentComponentMarkItemHighlightEvent,\r\n DocumentComponentMode,\r\n DocumentComponentOpenToggleEvent,\r\n DocumentComponentOzonContentClickEvent,\r\n DocumentComponentRecursiveToggleEvent,\r\n DocumentComponentRecursiveToggleState,\r\n DocumentComponentTableOfContentsClickEvent,\r\n DocumentComponentToggleAnnotationEvent,\r\n DocumentComponentWijzigactie,\r\n} from \"./document-component.interfaces\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n nieuweContainer: \"Toegevoegd\",\r\n verwijder: \"Verwijderd\",\r\n verwijderContainer: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst AantekenStatus: FunctionalComponent<{\r\n gereserveerd?: DocumentComponentAantekenElement;\r\n vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n return (\r\n <Fragment>\r\n {\" \"}\r\n {gereserveerd && (\r\n <dso-label\r\n compact\r\n {...(gereserveerd.wijzigactie\r\n ? { status: gereserveerd.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n : {})}\r\n >\r\n {gereserveerd.type}\r\n </dso-label>\r\n )}{\" \"}\r\n {vervallen && (\r\n <dso-label\r\n compact\r\n {...(vervallen.wijzigactie\r\n ? { status: vervallen.wijzigactie === \"voegtoe\" ? \"toegevoegd\" : \"verwijderd\" }\r\n : {})}\r\n >\r\n {vervallen.type}\r\n </dso-label>\r\n )}\r\n </Fragment>\r\n );\r\n};\r\n\r\nconst AantekenAlert: FunctionalComponent<{\r\n gereserveerd?: DocumentComponentAantekenElement;\r\n vervallen?: DocumentComponentAantekenElement;\r\n}> = ({ gereserveerd, vervallen }) => {\r\n if (gereserveerd && gereserveerd.wijzigactie !== \"verwijder\" && !vervallen) {\r\n return <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>;\r\n }\r\n\r\n if (vervallen && vervallen.wijzigactie !== \"voegtoe\" && !gereserveerd) {\r\n return <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>;\r\n }\r\n\r\n return null;\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n tag: \"dso-document-component\",\r\n styleUrl: \"document-component.scss\",\r\n shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n /**\r\n * The heading element to use.\r\n */\r\n @Prop()\r\n heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n private _kopInput?: DocumentComponentInputType;\r\n private _kop?: XMLDocument;\r\n /**\r\n * The Kop XML.\r\n */\r\n @Prop()\r\n get kop(): DocumentComponentInputType | undefined {\r\n return this._kopInput;\r\n }\r\n set kop(value: DocumentComponentInputType | undefined) {\r\n this._kopInput = value;\r\n this._kop = typeof value === \"string\" ? parseXml(value) : value;\r\n }\r\n\r\n private _inhoudInput?: DocumentComponentInputType;\r\n private _inhoud?: XMLDocument;\r\n /**\r\n * The Inhoud XML.\r\n */\r\n @Prop()\r\n get inhoud(): DocumentComponentInputType | undefined {\r\n return this._inhoudInput;\r\n }\r\n set inhoud(value: DocumentComponentInputType | undefined) {\r\n this._inhoudInput = value;\r\n this._inhoud = typeof value === \"string\" ? parseXml(value) : value;\r\n }\r\n\r\n /**\r\n * This boolean attribute indicates whether the children are visible.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Marks this Document Component as belonging to an active filter.\r\n */\r\n @Prop({ reflect: true })\r\n filtered = false;\r\n\r\n /**\r\n * Marks this Document Component as not-applicable.\r\n */\r\n @Prop({ reflect: true })\r\n notApplicable = false;\r\n\r\n /**\r\n * When a child Document Component has a status \"Draft\".\r\n */\r\n @Prop({ reflect: true })\r\n genesteOntwerpInformatie = false;\r\n\r\n /**\r\n * Marks as draft.\r\n */\r\n @Prop({ reflect: true })\r\n bevatOntwerpInformatie = false;\r\n\r\n /**\r\n * Enables annotations.\r\n */\r\n @Prop({ reflect: true })\r\n annotated = false;\r\n\r\n private _gereserveerdInput?: DocumentComponentInputType;\r\n private _gereserveerd?: DocumentComponentAantekenElement;\r\n /**\r\n * Marks Document Component as reserved.\r\n */\r\n @Prop()\r\n get gereserveerd(): DocumentComponentInputType | undefined {\r\n return this._gereserveerdInput;\r\n }\r\n set gereserveerd(value: DocumentComponentInputType | undefined) {\r\n this._gereserveerdInput = value;\r\n this._gereserveerd = this.parseAantekenElement(value);\r\n }\r\n\r\n private _vervallenInput?: DocumentComponentInputType;\r\n private _vervallen?: DocumentComponentAantekenElement;\r\n /**\r\n * Marks the Document Component as expired.\r\n */\r\n @Prop()\r\n get vervallen(): DocumentComponentInputType | undefined {\r\n return this._vervallenInput;\r\n }\r\n set vervallen(value: DocumentComponentInputType | undefined) {\r\n this._vervallenInput = value;\r\n this._vervallen = this.parseAantekenElement(value);\r\n }\r\n\r\n /**\r\n * When the Annotation is opened, set this to true.\r\n */\r\n @Prop({ reflect: true })\r\n openAnnotation = false;\r\n\r\n /**\r\n * An alternative title to show when there is nothing to create a title.\r\n */\r\n @Prop({ reflect: true })\r\n alternativeTitle?: string;\r\n\r\n /**\r\n * Type of Document Component.\r\n */\r\n @Prop({ reflect: true })\r\n type?: string;\r\n\r\n /**\r\n * The wijzigactie as in STOP.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n /**\r\n * The wijzigactie for all annotations.\r\n */\r\n @Prop({ reflect: true })\r\n annotationsWijzigactie?: DocumentComponentAnnotationsWijzigactie;\r\n\r\n /**\r\n * To mark text.\r\n */\r\n @Prop()\r\n mark?: DocumentComponentMarkFunction;\r\n\r\n /**\r\n * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n */\r\n @Prop()\r\n recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n /**\r\n * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n */\r\n @Prop()\r\n ozonContentUrlResolver?: OzonContentUrlResolver;\r\n\r\n /**\r\n * A BegripResolver that will be called for STOP element \"IntRef\" with @scope=\"Begrip\".\r\n */\r\n @Prop()\r\n ozonContentBegripResolver?: OzonContentBegripResolver;\r\n\r\n /**\r\n * The mode of the Document Component. One of \"document\" or \"table-of-contents\". Defaults to \"document\"\r\n */\r\n @Prop({ reflect: true })\r\n mode: DocumentComponentMode = \"document\";\r\n\r\n /**\r\n * The URL to which the Heading links (only in mode=\"table-of-contents\").\r\n */\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the user activates the recursive toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the toggle.\r\n */\r\n @Event({ bubbles: false })\r\n dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n /**\r\n * Emitted when the user clicks the heading in mode=\"table-of-contents\".\r\n */\r\n @Event({ bubbles: false })\r\n dsoTableOfContentsClick!: EventEmitter<DocumentComponentTableOfContentsClickEvent>;\r\n\r\n /**\r\n * Emitted when the user interacts with Kop, IntRef or the Kenmerken en kaart button of IntIoRef in Ozon Content\r\n */\r\n @Event({ bubbles: false })\r\n dsoOzonContentClick!: EventEmitter<DocumentComponentOzonContentClickEvent>;\r\n\r\n /**\r\n * Emitted when the user activates the annotation button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n /**\r\n * Emitted each time a marked item gets highlighted.\r\n */\r\n @Event({ bubbles: false })\r\n dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n private get wijzigactieLabel(): string | undefined {\r\n return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n }\r\n\r\n private handleHeadingClick = (e: MouseEvent) => {\r\n if (this.mode === \"table-of-contents\") {\r\n this.dsoTableOfContentsClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n } else if (this.type !== \"LID\") {\r\n this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n }\r\n };\r\n\r\n private handleOzonContentClick = (event: DsoOzonContentCustomEvent<OzonContentClickEvent>) => {\r\n const { detail } = event;\r\n\r\n if (detail.type === \"Kop\") {\r\n this.handleHeadingClick(detail.originalEvent);\r\n } else {\r\n this.dsoOzonContentClick.emit({ originalEvent: event, ozonContentClick: event.detail });\r\n }\r\n };\r\n\r\n private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n this.dsoRecursiveToggle.emit({\r\n originalEvent: e,\r\n current: this.recursiveToggle,\r\n next: this.recursiveToggle !== true,\r\n });\r\n };\r\n\r\n private showOntwerpBadge(): boolean {\r\n return (\r\n this.genesteOntwerpInformatie &&\r\n !this.bevatOntwerpInformatie &&\r\n ((!this.open && this.mode === \"document\") || this.mode === \"table-of-contents\")\r\n );\r\n }\r\n\r\n private parseAantekenElement(input?: DocumentComponentInputType): DocumentComponentAantekenElement | undefined {\r\n if (!input) {\r\n return undefined;\r\n }\r\n\r\n let element: Element | undefined;\r\n\r\n if (typeof input === \"string\") {\r\n const doc = parseXml(input);\r\n element = doc?.documentElement;\r\n } else if (input instanceof XMLDocument) {\r\n element = input.documentElement;\r\n }\r\n\r\n if (!element) {\r\n return undefined;\r\n }\r\n\r\n const wijzigactie = parseWijzigactieFromNode(element);\r\n const tag = element.tagName.toLowerCase();\r\n\r\n let type: DocumentComponentAantekenElement[\"type\"] | undefined;\r\n if (tag === \"vervallen\") {\r\n type = \"Vervallen\";\r\n } else if (tag === \"gereserveerd\") {\r\n type = \"Gereserveerd\";\r\n }\r\n\r\n if (!type) {\r\n return undefined;\r\n }\r\n\r\n return { type, wijzigactie };\r\n }\r\n\r\n render() {\r\n const collapsible = !!((this._kop || this.alternativeTitle) && this.type !== \"LID\");\r\n\r\n const showHeading = !!(\r\n this.wijzigactie ||\r\n collapsible ||\r\n this._kop ||\r\n this.alternativeTitle ||\r\n this.bevatOntwerpInformatie ||\r\n this.annotated\r\n );\r\n\r\n return (\r\n <Host not-collapsible={!collapsible}>\r\n {showHeading && (\r\n <div class=\"heading-container\" part=\"_heading-container\">\r\n {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n <div class=\"heading\">\r\n <Heading\r\n heading={this.heading}\r\n class=\"heading-element\"\r\n onClick={this.alternativeTitle ? this.handleHeadingClick : undefined}\r\n mode={this.mode}\r\n href={this.href}\r\n >\r\n {collapsible && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={this.open ? \"Invouwen\" : \"Uitvouwen\"}\r\n class=\"toggle-button\"\r\n icon={this.open ? \"chevron-down\" : \"chevron-right\"}\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.handleHeadingClick(e.detail.originalEvent)}\r\n />\r\n )}\r\n <div>\r\n {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n {this._kop ? (\r\n <dso-ozon-content\r\n class=\"kop\"\r\n content={this._kop}\r\n onDsoClick={this.handleOzonContentClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"kop\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"kop\" })\r\n }\r\n inline\r\n urlResolver={this.ozonContentUrlResolver}\r\n begripResolver={this.ozonContentBegripResolver}\r\n />\r\n ) : (\r\n <span class=\"alternative-title\">\r\n {(!this.mark && this.alternativeTitle) ||\r\n (this.mark && this.alternativeTitle && (\r\n <MarkText\r\n mark={this.mark && ((text: string) => this.mark?.(text, \"alternativeTitle\"))}\r\n text={this.alternativeTitle}\r\n emitMarkItemHighlight={(text, elementRef) =>\r\n this.dsoMarkItemHighlight.emit({ text, elementRef, source: \"alternativeTitle\" })\r\n }\r\n />\r\n ))}\r\n </span>\r\n )}\r\n <AantekenStatus gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n </div>\r\n </Heading>\r\n\r\n {this.recursiveToggle !== undefined && this.open && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n class=\"recursive-toggle\"\r\n icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"}\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.handleRecursiveToggleClick(e.detail.originalEvent)}\r\n />\r\n )}\r\n\r\n {this.showOntwerpBadge() && (\r\n <Fragment>\r\n <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n !\r\n </dso-badge>\r\n <dso-tooltip id=\"nested-draft-description\">\r\n Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp.\r\n </dso-tooltip>\r\n </Fragment>\r\n )}\r\n\r\n {(this.bevatOntwerpInformatie || this.annotated) && (\r\n <div class=\"addons\">\r\n {this.bevatOntwerpInformatie && (\r\n <dso-label status=\"warning\" compact>\r\n Ontwerp\r\n </dso-label>\r\n )}\r\n {this.annotated && this.mode === \"document\" && (\r\n <dso-icon-button\r\n label={`Kenmerken en kaartgegevens ${this.openAnnotation ? \"verbergen\" : \"tonen\"}`}\r\n icon=\"label\"\r\n variant=\"tertiary\"\r\n onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent })}\r\n />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n\r\n {this.openAnnotation && (\r\n <div class=\"annotation-container\" part=\"_annotation-container\">\r\n <dso-panel\r\n id=\"annotations\"\r\n onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n closeButtonLabel=\"Kenmerken en kaartgegevens verbergen\"\r\n >\r\n <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n <slot name=\"annotations\" />\r\n </dso-panel>\r\n </div>\r\n )}\r\n\r\n {this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === \"document\" && (\r\n <div class=\"content\" part=\"_content\">\r\n <AantekenAlert gereserveerd={this._gereserveerd} vervallen={this._vervallen} />\r\n\r\n {this._inhoud && (\r\n <dso-ozon-content\r\n content={this._inhoud}\r\n onDsoClick={this.handleOzonContentClick}\r\n mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n onDsoOzonContentMarkItemHighlight={(e) =>\r\n this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n }\r\n urlResolver={this.ozonContentUrlResolver}\r\n begripResolver={this.ozonContentBegripResolver}\r\n />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div class=\"children-container\" part=\"_children-container\">\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, f as forceUpdate, h, F as Fragment, g as getElement } from './index-DxWmN7gh.js';
2
2
  import { i as isModifiedEvent } from './is-modified-event-Hgv-pDpy.js';
3
3
 
4
- const historyItemCss = ":host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}";
4
+ const historyItemCss = ":host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}";
5
5
 
6
6
  const HistoryItem = class {
7
7
  constructor(hostRef) {
@@ -11,6 +11,7 @@ const HistoryItem = class {
11
11
  ontwerp: "pencil",
12
12
  "in-werking": "document",
13
13
  "tijdelijk-regelingdeel": "document",
14
+ "tijdelijk-regelingdeel-besluit": "hammer",
14
15
  waarschuwing: "status-warning-inline",
15
16
  besluit: "hammer",
16
17
  };
@@ -40,7 +41,7 @@ const HistoryItem = class {
40
41
  return this.host.querySelector("[slot='warning']");
41
42
  }
42
43
  render() {
43
- return (h(Fragment, { key: '564713030596d6ded78196d1975d654f8aed28af' }, h("div", { key: '5628f506f89418f89dd84df8c7c7610a8cdf84a0', class: "history-item-date" }, h("slot", { key: '0299db06ef4c8638f8c9846759fe435a3772ddc6', name: "date" })), h("div", { key: '0a6b3af669e46a9aeef5641e7862abc1c2454aac', class: "history-item-content" }, h("div", { key: 'fd637e61527123dd033674d94d3802aaafc76ef5', class: "history-item-status-message" }, h("dso-icon", { key: '1a743ce625df89553ae31b0d5a0e85d37140cd51', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '7dbf3f6a4a432fac949d827645d513f322d2295e', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '9159c2ec5d46d0ed29fb963f643def9b68d95f6a', class: "history-item-title" }, h("a", { key: '2cfa6b7148d5c57d3d7d86c3653479e465c720b9', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c4817b3fc5731611fc47274d18920e6859932495', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: 'f30edc15372c818c7fc2d95c3408456fa78d7c2c', class: "history-item-explanation" }, h("slot", { key: '79e760bb4007874bbf3e72c366a131bbc228e812', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '63daced507c53906aa69d7c5f33b139a48c4bc98', class: "history-item-warning" }, h("dso-icon", { key: '40c76542d6d1fe34e56971ea24e8754c9359980b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '73cd0c589f64f95ed2235348388ddd87a9c2519b', name: "warning" }))))));
44
+ return (h(Fragment, { key: '25ded905c52c75f290d68f026ee428088ef11d33' }, h("div", { key: 'bb76d9f4b424fa348a0ec0b2c69ec8398b8b1c01', class: "history-item-date" }, h("slot", { key: '45e86c09b0a01f841fabaeaa469c22528f506188', name: "date" })), h("div", { key: '32df84fe88c34b9e73bb46ce4082b1150cd87bcb', class: "history-item-content" }, h("div", { key: '8b27dfeae1482ca1260ad61f1e85e45de3513fed', class: "history-item-status-message" }, h("dso-icon", { key: 'a176b5cafce73214b40ec258c984e4d5a9ba88c1', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '2529d09ac3017016bc2b5927a836a736c3d4234d', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'de071e8c737f352eb135a0eeec9d8edf0d253447', class: "history-item-title" }, h("a", { key: '98866c1cfeb33f9e0de1ef85560904f076538aef', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '2df06f57a5f3c38bd67415b3eadefabee7637989', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '900b4b3d37f164c456d3c56d2b4a9334e2993bb1', class: "history-item-explanation" }, h("slot", { key: 'dba257dc1cdd8bcbc2ddfb31d8641f2023c366c0', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '93b0cd86f8aea38ed154b4cd031552de9f6b5fb0', class: "history-item-warning" }, h("dso-icon", { key: 'e6111333ccdd0591c15386d65e2f5b87f2b04c34', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'a7dcf352bd38f9d083f8981b2064f559d24dcba8', name: "warning" }))))));
44
45
  }
45
46
  get host() { return getElement(this); }
46
47
  };
@@ -1 +1 @@
1
- {"version":3,"file":"dso-history-item.entry.js","sources":["src/components/history-item/history-item.scss?tag=dso-history-item&encapsulation=shadow","src/components/history-item/history-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"history-item.variables\" as history-item-variables;\r\n\r\n:host {\r\n border-block-end: 1px solid colors.$grijs-10;\r\n display: flex;\r\n gap: units.$u1;\r\n inline-size: 100%;\r\n padding-block: units.$u2;\r\n\r\n &:has(.history-item-title a:is(:hover, :focus-visible)) {\r\n background-color: history-item-variables.$background-color-hover;\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([type=\"tijdelijk-regelingdeel\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$tijdelijke-regeldingdeel-color;\r\n }\r\n}\r\n\r\n:host([type=\"waarschuwing\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$waarschuwing-color;\r\n }\r\n}\r\n\r\n.history-item-date,\r\n.history-item-content {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.history-item-date {\r\n flex: 0 0 90px;\r\n}\r\n\r\n.history-item-status-message,\r\n.history-item-warning {\r\n display: flex;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n.history-item-warning {\r\n color: history-item-variables.$waarschuwing-color;\r\n}\r\n\r\n.history-item-title,\r\n.history-item-explanation,\r\n.history-item-warning {\r\n margin-block-start: units.$u1;\r\n margin-inline-start: units.$u4;\r\n}\r\n\r\n.title-anchor {\r\n color: history-item-variables.$title-anchor-color;\r\n font-weight: 600;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: history-item-variables.$title-anchor-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: history-item-variables.$title-anchor-color;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HistoryItemClickEvent, HistoryItemType } from \"./history-item.interfaces\";\r\n\r\n/**\r\n * @slot date - The slot to place a string that holds a date in.\r\n * @slot status - The slot to place the status message in.\r\n * @slot title - An optional slot to place the title in. When used, the property `href` must be set.\r\n * @slot explanation - An optional slot to place explanation in.\r\n * @slot warning - An optional slot to place a warning in.\r\n */\r\n@Component({\r\n tag: \"dso-history-item\",\r\n styleUrl: \"history-item.scss\",\r\n shadow: true,\r\n})\r\nexport class HistoryItem implements ComponentInterface {\r\n private typeIcons: Record<HistoryItemType, string> = {\r\n ontwerp: \"pencil\",\r\n \"in-werking\": \"document\",\r\n \"tijdelijk-regelingdeel\": \"document\",\r\n waarschuwing: \"status-warning-inline\",\r\n besluit: \"hammer\",\r\n };\r\n\r\n @Element()\r\n host!: HTMLDsoHistoryItemElement;\r\n\r\n /**\r\n * The type of History Item\r\n */\r\n @Prop({ reflect: true })\r\n type!: HistoryItemType;\r\n\r\n /**\r\n * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.\r\n */\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the History Item title is clicked.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<HistoryItemClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) || !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get titleSlottedElement() {\r\n return this.host.querySelector(\"[slot='title']\");\r\n }\r\n\r\n get explanationSlottedElement() {\r\n return this.host.querySelector(\"[slot='explanation']\");\r\n }\r\n\r\n get warningSlottedElement() {\r\n return this.host.querySelector(\"[slot='warning']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"history-item-date\">\r\n <slot name=\"date\"></slot>\r\n </div>\r\n <div class=\"history-item-content\">\r\n <div class=\"history-item-status-message\">\r\n <dso-icon icon={this.typeIcons[this.type]} aria-hidden=\"true\"></dso-icon>\r\n <slot name=\"status\"></slot>\r\n </div>\r\n {this.titleSlottedElement !== null && this.href && (\r\n <div class=\"history-item-title\">\r\n <a href={this.href} class=\"title-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"title\"></slot>\r\n </a>\r\n </div>\r\n )}\r\n {this.explanationSlottedElement !== null && (\r\n <div class=\"history-item-explanation\">\r\n <slot name=\"explanation\"></slot>\r\n </div>\r\n )}\r\n {this.warningSlottedElement !== null && (\r\n <div class=\"history-item-warning\">\r\n <dso-icon icon=\"status-warning-inline\" role=\"img\" aria-label=\"Waarschuwing\"></dso-icon>\r\n <slot name=\"warning\"></slot>\r\n </div>\r\n )}\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dso-history-item.entry.js","sources":["src/components/history-item/history-item.scss?tag=dso-history-item&encapsulation=shadow","src/components/history-item/history-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"history-item.variables\" as history-item-variables;\r\n\r\n:host {\r\n border-block-end: 1px solid colors.$grijs-10;\r\n display: flex;\r\n gap: units.$u1;\r\n inline-size: 100%;\r\n padding-block: units.$u2;\r\n\r\n &:has(.history-item-title a:is(:hover, :focus-visible)) {\r\n background-color: history-item-variables.$background-color-hover;\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([type=\"tijdelijk-regelingdeel\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$tijdelijke-regeldingdeel-color;\r\n }\r\n}\r\n\r\n:host([type=\"tijdelijk-regelingdeel-besluit\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$tijdelijke-regeldingdeel-besluit-color;\r\n }\r\n}\r\n\r\n:host([type=\"waarschuwing\"]) {\r\n .history-item-status-message {\r\n color: history-item-variables.$waarschuwing-color;\r\n }\r\n}\r\n\r\n.history-item-date,\r\n.history-item-content {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.history-item-date {\r\n flex: 0 0 90px;\r\n}\r\n\r\n.history-item-status-message,\r\n.history-item-warning {\r\n display: flex;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n.history-item-warning {\r\n color: history-item-variables.$waarschuwing-color;\r\n}\r\n\r\n.history-item-title,\r\n.history-item-explanation,\r\n.history-item-warning {\r\n margin-block-start: units.$u1;\r\n margin-inline-start: units.$u4;\r\n}\r\n\r\n.title-anchor {\r\n color: history-item-variables.$title-anchor-color;\r\n font-weight: 600;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n color: history-item-variables.$title-anchor-color;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited {\r\n color: history-item-variables.$title-anchor-color;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HistoryItemClickEvent, HistoryItemType } from \"./history-item.interfaces\";\r\n\r\n/**\r\n * @slot date - The slot to place a string that holds a date in.\r\n * @slot status - The slot to place the status message in.\r\n * @slot title - An optional slot to place the title in. When used, the property `href` must be set.\r\n * @slot explanation - An optional slot to place explanation in.\r\n * @slot warning - An optional slot to place a warning in.\r\n */\r\n@Component({\r\n tag: \"dso-history-item\",\r\n styleUrl: \"history-item.scss\",\r\n shadow: true,\r\n})\r\nexport class HistoryItem implements ComponentInterface {\r\n private typeIcons: Record<HistoryItemType, string> = {\r\n ontwerp: \"pencil\",\r\n \"in-werking\": \"document\",\r\n \"tijdelijk-regelingdeel\": \"document\",\r\n \"tijdelijk-regelingdeel-besluit\": \"hammer\",\r\n waarschuwing: \"status-warning-inline\",\r\n besluit: \"hammer\",\r\n };\r\n\r\n @Element()\r\n host!: HTMLDsoHistoryItemElement;\r\n\r\n /**\r\n * The type of History Item\r\n */\r\n @Prop({ reflect: true })\r\n type!: HistoryItemType;\r\n\r\n /**\r\n * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.\r\n */\r\n @Prop({ reflect: true })\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the History Item title is clicked.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClick!: EventEmitter<HistoryItemClickEvent>;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) || !this.href) {\r\n return;\r\n }\r\n\r\n return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n get titleSlottedElement() {\r\n return this.host.querySelector(\"[slot='title']\");\r\n }\r\n\r\n get explanationSlottedElement() {\r\n return this.host.querySelector(\"[slot='explanation']\");\r\n }\r\n\r\n get warningSlottedElement() {\r\n return this.host.querySelector(\"[slot='warning']\");\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <div class=\"history-item-date\">\r\n <slot name=\"date\"></slot>\r\n </div>\r\n <div class=\"history-item-content\">\r\n <div class=\"history-item-status-message\">\r\n <dso-icon icon={this.typeIcons[this.type]} aria-hidden=\"true\"></dso-icon>\r\n <slot name=\"status\"></slot>\r\n </div>\r\n {this.titleSlottedElement !== null && this.href && (\r\n <div class=\"history-item-title\">\r\n <a href={this.href} class=\"title-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n <slot name=\"title\"></slot>\r\n </a>\r\n </div>\r\n )}\r\n {this.explanationSlottedElement !== null && (\r\n <div class=\"history-item-explanation\">\r\n <slot name=\"explanation\"></slot>\r\n </div>\r\n )}\r\n {this.warningSlottedElement !== null && (\r\n <div class=\"history-item-warning\">\r\n <dso-icon icon=\"status-warning-inline\" role=\"img\" aria-label=\"Waarschuwing\"></dso-icon>\r\n <slot name=\"warning\"></slot>\r\n </div>\r\n )}\r\n </div>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"dso-info.dso-selectable.entry.js","sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dso-info.dso-selectable.entry.js","sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --_dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"info\"]) {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"names":[],"mappings":"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"}
@@ -27,7 +27,7 @@ function createIdentifier(prefix) {
27
27
  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
28
28
  }
29
29
 
30
- const selectableCss = ".sc-dso-selectable-h{padding-inline-start:var(--_dt-selectable-padding-inline-start, 32px);position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:100%;inset-inline-start:0;margin:0;appearance:none;position:absolute;inset-block-start:0;inline-size:100%;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px;position:relative;margin-inline-start:var(--_dt-selectable-input-wrapper-margin-inline-start, -32px);padding-inline-start:var(--_dt-selectable-input-wrapper-padding-inline-start, 32px)}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}";
30
+ const selectableCss = ".sc-dso-selectable-h{padding-inline-start:var(--_dt-selectable-padding-inline-start, 32px);position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:100%;inset-inline-start:0;margin:0;appearance:none;position:absolute;inset-block-start:0;inline-size:100%;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);content:\"\";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--_dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--_dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px;position:relative;margin-inline-start:var(--_dt-selectable-input-wrapper-margin-inline-start, -32px);padding-inline-start:var(--_dt-selectable-input-wrapper-padding-inline-start, 32px)}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-s>[slot=info]{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-s>[slot=options]{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-s>[slot=options] li+li{margin-block-start:8px}";
31
31
 
32
32
  const Selectable = class {
33
33
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"dso-info.dso-selectable.entry.js","mappings":"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","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"dso-info.dso-selectable.entry.js","mappings":"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","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx","src/utils/create-identifier.ts","src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\ndso-icon-button {\r\n position: absolute;\r\n inset-inline-end: units.$u1;\r\n inset-block-start: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { Component, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <dso-icon-button\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit(e.detail.originalEvent)}\r\n />\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n","/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"selectable.variables\" as selectable-variables;\r\n\r\n:host {\r\n padding-inline-start: var(--_dt-selectable-padding-inline-start, selectable-variables.$symbol-indent);\r\n position: relative;\r\n display: var(--dso-selectable-display, block);\r\n\r\n label {\r\n font-weight: 400;\r\n line-height: selectable-variables.$size;\r\n margin: 0;\r\n }\r\n\r\n input[type=\"checkbox\"][disabled],\r\n input[type=\"radio\"][disabled] {\r\n &,\r\n &:active,\r\n &:focus {\r\n + label {\r\n &::before {\r\n background-color: colors.$wit;\r\n box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"],\r\n input[type=\"radio\"] {\r\n block-size: 100%;\r\n inset-inline-start: 0;\r\n margin: 0;\r\n appearance: none;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inline-size: 100%;\r\n z-index: zindex.$selectable;\r\n zoom: 1;\r\n\r\n @media (prefers-contrast: more) {\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &:not([disabled]) {\r\n cursor: pointer;\r\n }\r\n\r\n + label {\r\n display: inline;\r\n font-style: normal;\r\n padding-inline-start: 0;\r\n\r\n &::before {\r\n background: colors.$wit;\r\n border: 0;\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n content: \"\";\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n position: absolute;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n\r\n &:active,\r\n &.active {\r\n + label::before {\r\n background-color: selectable-variables.$active-background-color;\r\n box-shadow: 0 0 0 1px selectable-variables.$valid-color;\r\n block-size: selectable-variables.$size - 2px;\r\n inset-inline-start: 1px;\r\n inset-block-start: 1px;\r\n inline-size: selectable-variables.$size - 2px;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n + label {\r\n &::before {\r\n border-radius: 4px;\r\n }\r\n\r\n &::after {\r\n background: transparent;\r\n content: \"\";\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked,\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n border: solid;\r\n border-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n border-block-start-color: transparent;\r\n border-width: 0 0 3px 3px;\r\n block-size: 8px;\r\n transform: rotate(-45deg);\r\n inline-size: 13px;\r\n }\r\n }\r\n }\r\n\r\n &:indeterminate {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n block-size: selectable-variables.$indeterminate-size;\r\n inline-size: selectable-variables.$indeterminate-size;\r\n }\r\n }\r\n }\r\n }\r\n\r\n input[type=\"radio\"] {\r\n + label {\r\n &::before {\r\n border-radius: 50%;\r\n }\r\n\r\n &::after {\r\n background-color: transparent;\r\n border-radius: 50%;\r\n content: \"\";\r\n block-size: 12px;\r\n inset-inline-start: 6px;\r\n opacity: 0;\r\n position: absolute;\r\n inset-block-start: 6px;\r\n inline-size: 12px;\r\n zoom: 1;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n background-color: var(--_dso-selectable-color, selectable-variables.$valid-marker-color);\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n --_dso-selectable-color: #{selectable-variables.$invalid-color};\r\n }\r\n\r\n > dso-info {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n }\r\n\r\n .dso-selectable-options {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n margin-block-end: units.$u1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n position: relative;\r\n margin-inline-start: var(\r\n --_dt-selectable-input-wrapper-margin-inline-start,\r\n -(selectable-variables.$symbol-indent)\r\n );\r\n padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, selectable-variables.$symbol-indent);\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n box-shadow: 0 0 0 selectable-variables.$border-width\r\n var(--_dso-selectable-color, selectable-variables.$valid-color);\r\n block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n inset-inline-start: selectable-variables.$border-width;\r\n inset-block-start: selectable-variables.$border-width;\r\n inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;\r\n }\r\n }\r\n }\r\n}\r\n\r\n::slotted([slot=\"info\"]) {\r\n float: none;\r\n margin-block: units.$u1 0;\r\n margin-inline: 0 units.$u2;\r\n inline-size: 100%;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n list-style: none;\r\n margin-block-start: units.$u1;\r\n padding-inline-start: 0;\r\n\r\n li + li {\r\n margin-block-start: units.$u1;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\n\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class=\"dso-selectable-input-wrapper\">\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}