@dso-toolkit/core 66.2.0 → 67.0.0-ghi-2365.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 (204) hide show
  1. package/dist/cjs/dso-advanced-select.cjs.entry.js +1 -1
  2. package/dist/cjs/dso-alert_6.cjs.entry.js +5 -14
  3. package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
  4. package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
  5. package/dist/cjs/dso-header.cjs.entry.js +4 -5
  6. package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
  9. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/dso-label_2.cjs.entry.js +4 -4
  11. package/dist/cjs/dso-label_2.cjs.entry.js.map +1 -1
  12. package/dist/cjs/dso-list-button.cjs.entry.js +2 -2
  13. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  14. package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
  15. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  16. package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
  17. package/dist/cjs/dso-modal.cjs.entry.js +4 -4
  18. package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
  19. package/dist/cjs/dso-progress-indicator.cjs.entry.js +2 -2
  20. package/dist/cjs/dso-progress-indicator.cjs.entry.js.map +1 -1
  21. package/dist/cjs/dso-renvooi_2.cjs.entry.js +1 -1
  22. package/dist/cjs/dso-skiplink.cjs.entry.js +32 -0
  23. package/dist/cjs/dso-skiplink.cjs.entry.js.map +1 -0
  24. package/dist/cjs/dso-tabs.cjs.entry.js +1 -1
  25. package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
  26. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  27. package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
  28. package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
  29. package/dist/cjs/{focus-trap.esm-dd03396f.js → focus-trap.esm-2a6637e5.js} +73 -26
  30. package/dist/cjs/focus-trap.esm-2a6637e5.js.map +1 -0
  31. package/dist/cjs/{i18n-a63b3b9b.js → i18n-f7bc1cee.js} +49 -32
  32. package/dist/cjs/i18n-f7bc1cee.js.map +1 -0
  33. package/dist/cjs/loader.cjs.js +1 -1
  34. package/dist/cjs/v4-6fbeaa38.js.map +1 -1
  35. package/dist/collection/collection-manifest.json +1 -0
  36. package/dist/collection/components/header/header.css +45 -10
  37. package/dist/collection/components/header/header.i18n.js +0 -1
  38. package/dist/collection/components/header/header.i18n.js.map +1 -1
  39. package/dist/collection/components/header/header.js +3 -3
  40. package/dist/collection/components/header/header.js.map +1 -1
  41. package/dist/collection/components/info/info.css +20 -0
  42. package/dist/collection/components/label/label.js +4 -4
  43. package/dist/collection/components/label/label.js.map +1 -1
  44. package/dist/collection/components/list-button/list-button.css +29 -45
  45. package/dist/collection/components/modal/modal.js +5 -5
  46. package/dist/collection/components/modal/modal.js.map +1 -1
  47. package/dist/collection/components/ozon-content/nodes/figuur.node.js +1 -10
  48. package/dist/collection/components/ozon-content/nodes/figuur.node.js.map +1 -1
  49. package/dist/collection/components/ozon-content/ozon-content.css +0 -5
  50. package/dist/collection/components/progress-indicator/progress-indicator.js +2 -2
  51. package/dist/collection/components/progress-indicator/progress-indicator.js.map +1 -1
  52. package/dist/collection/components/selectable/selectable.css +14 -0
  53. package/dist/collection/components/skiplink/skiplink.css +40 -0
  54. package/dist/collection/components/skiplink/skiplink.interfaces.js +2 -0
  55. package/dist/collection/components/skiplink/skiplink.interfaces.js.map +1 -0
  56. package/dist/collection/components/skiplink/skiplink.js +92 -0
  57. package/dist/collection/components/skiplink/skiplink.js.map +1 -0
  58. package/dist/collection/components/slide-toggle/slide-toggle.js +1 -1
  59. package/dist/collection/components/table/table.js +1 -1
  60. package/dist/collection/components/tabs/tabs.js +1 -1
  61. package/dist/collection/components/toggletip/toggletip.js +1 -1
  62. package/dist/collection/components/tooltip/tooltip.js +1 -1
  63. package/dist/collection/components/tree-view/tree-view.js +1 -1
  64. package/dist/collection/components/viewer-grid/viewer-grid.js +1 -1
  65. package/dist/collection/utils/i18n.js +15 -12
  66. package/dist/collection/utils/i18n.js.map +1 -1
  67. package/dist/components/dso-header.js +5 -5
  68. package/dist/components/dso-header.js.map +1 -1
  69. package/dist/components/dso-list-button.js +1 -1
  70. package/dist/components/dso-list-button.js.map +1 -1
  71. package/dist/components/dso-modal.js +4 -4
  72. package/dist/components/dso-modal.js.map +1 -1
  73. package/dist/components/dso-skiplink.d.ts +11 -0
  74. package/dist/components/dso-skiplink.js +55 -0
  75. package/dist/components/dso-skiplink.js.map +1 -0
  76. package/dist/components/dso-tabs.js +1 -1
  77. package/dist/components/dso-tree-view.js +1 -1
  78. package/dist/components/dso-viewer-grid.js +1 -1
  79. package/dist/components/focus-trap.esm.js +72 -25
  80. package/dist/components/focus-trap.esm.js.map +1 -1
  81. package/dist/components/i18n.js +48 -31
  82. package/dist/components/i18n.js.map +1 -1
  83. package/dist/components/index.d.ts +2 -0
  84. package/dist/components/index.js +1 -0
  85. package/dist/components/index.js.map +1 -1
  86. package/dist/components/info.js +1 -1
  87. package/dist/components/info.js.map +1 -1
  88. package/dist/components/label.js +4 -4
  89. package/dist/components/label.js.map +1 -1
  90. package/dist/components/ozon-content.js +2 -11
  91. package/dist/components/ozon-content.js.map +1 -1
  92. package/dist/components/progress-indicator.js +2 -2
  93. package/dist/components/progress-indicator.js.map +1 -1
  94. package/dist/components/selectable.js +1 -1
  95. package/dist/components/selectable.js.map +1 -1
  96. package/dist/components/slide-toggle.js +1 -1
  97. package/dist/components/table.js +1 -1
  98. package/dist/components/toggletip.js +1 -1
  99. package/dist/components/tooltip.js +1 -1
  100. package/dist/components/v4.js.map +1 -1
  101. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  102. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  103. package/dist/dso-toolkit/{p-9424e171.entry.js → p-1d7b22a2.entry.js} +2 -2
  104. package/dist/dso-toolkit/{p-636a2ad2.entry.js → p-21f133e4.entry.js} +2 -2
  105. package/dist/dso-toolkit/{p-954b3715.entry.js → p-2d2eae19.entry.js} +2 -2
  106. package/dist/dso-toolkit/p-3e9068cd.entry.js +2 -0
  107. package/dist/dso-toolkit/p-3e9068cd.entry.js.map +1 -0
  108. package/dist/dso-toolkit/p-4831099c.entry.js +2 -0
  109. package/dist/dso-toolkit/p-4831099c.entry.js.map +1 -0
  110. package/dist/dso-toolkit/p-51ba123c.entry.js +2 -0
  111. package/dist/dso-toolkit/p-51ba123c.entry.js.map +1 -0
  112. package/dist/dso-toolkit/p-5f4e8468.js +6 -0
  113. package/dist/dso-toolkit/p-5f4e8468.js.map +1 -0
  114. package/dist/dso-toolkit/p-672b0b80.js +2 -0
  115. package/dist/dso-toolkit/p-672b0b80.js.map +1 -0
  116. package/dist/dso-toolkit/{p-a2a9f5da.entry.js → p-6789163b.entry.js} +2 -2
  117. package/dist/dso-toolkit/{p-1616c445.entry.js → p-7b3f08da.entry.js} +2 -2
  118. package/dist/dso-toolkit/{p-f412ab80.entry.js → p-7d47fedb.entry.js} +2 -2
  119. package/dist/dso-toolkit/p-7d47fedb.entry.js.map +1 -0
  120. package/dist/dso-toolkit/{p-49e93ef5.entry.js → p-7dfc15c1.entry.js} +2 -2
  121. package/dist/dso-toolkit/{p-e80292b5.entry.js → p-826609e4.entry.js} +2 -2
  122. package/dist/dso-toolkit/{p-e80292b5.entry.js.map → p-826609e4.entry.js.map} +1 -1
  123. package/dist/dso-toolkit/{p-9a0927eb.entry.js → p-9d8395bc.entry.js} +2 -2
  124. package/dist/dso-toolkit/{p-afc4bca7.entry.js → p-9df0ed5f.entry.js} +2 -2
  125. package/dist/dso-toolkit/p-a2db4965.entry.js +2 -0
  126. package/dist/dso-toolkit/p-a2db4965.entry.js.map +1 -0
  127. package/dist/dso-toolkit/{p-7cfa6ab1.entry.js → p-c2f086f2.entry.js} +2 -2
  128. package/dist/dso-toolkit/{p-10603e10.entry.js → p-cb0a7103.entry.js} +2 -2
  129. package/dist/dso-toolkit/{p-1022c4bd.entry.js → p-d3857319.entry.js} +2 -2
  130. package/dist/dso-toolkit/p-d88ebb12.entry.js +2 -0
  131. package/dist/dso-toolkit/p-d88ebb12.entry.js.map +1 -0
  132. package/dist/dso-toolkit/p-e05b8f92.entry.js +2 -0
  133. package/dist/dso-toolkit/p-e05b8f92.entry.js.map +1 -0
  134. package/dist/dso-toolkit/p-ffb34aa5.js.map +1 -1
  135. package/dist/esm/dso-advanced-select.entry.js +1 -1
  136. package/dist/esm/dso-alert_6.entry.js +5 -14
  137. package/dist/esm/dso-alert_6.entry.js.map +1 -1
  138. package/dist/esm/dso-autosuggest.entry.js +1 -1
  139. package/dist/esm/dso-header.entry.js +4 -5
  140. package/dist/esm/dso-header.entry.js.map +1 -1
  141. package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
  142. package/dist/esm/dso-info_2.entry.js +2 -2
  143. package/dist/esm/dso-info_2.entry.js.map +1 -1
  144. package/dist/esm/dso-label_2.entry.js +4 -4
  145. package/dist/esm/dso-label_2.entry.js.map +1 -1
  146. package/dist/esm/dso-list-button.entry.js +2 -2
  147. package/dist/esm/dso-list-button.entry.js.map +1 -1
  148. package/dist/esm/dso-map-base-layers.entry.js +1 -1
  149. package/dist/esm/dso-map-controls.entry.js +1 -1
  150. package/dist/esm/dso-map-overlays.entry.js +1 -1
  151. package/dist/esm/dso-modal.entry.js +4 -4
  152. package/dist/esm/dso-modal.entry.js.map +1 -1
  153. package/dist/esm/dso-progress-indicator.entry.js +2 -2
  154. package/dist/esm/dso-progress-indicator.entry.js.map +1 -1
  155. package/dist/esm/dso-renvooi_2.entry.js +1 -1
  156. package/dist/esm/dso-skiplink.entry.js +28 -0
  157. package/dist/esm/dso-skiplink.entry.js.map +1 -0
  158. package/dist/esm/dso-tabs.entry.js +1 -1
  159. package/dist/esm/dso-toggletip.entry.js +1 -1
  160. package/dist/esm/dso-toolkit.js +1 -1
  161. package/dist/esm/dso-tree-view.entry.js +1 -1
  162. package/dist/esm/dso-viewer-grid.entry.js +1 -1
  163. package/dist/esm/{focus-trap.esm-24223ea1.js → focus-trap.esm-c9e1f389.js} +73 -26
  164. package/dist/esm/focus-trap.esm-c9e1f389.js.map +1 -0
  165. package/dist/esm/{i18n-c9ec6445.js → i18n-f2d58c82.js} +49 -32
  166. package/dist/esm/i18n-f2d58c82.js.map +1 -0
  167. package/dist/esm/loader.js +1 -1
  168. package/dist/esm/v4-692dad5f.js.map +1 -1
  169. package/dist/types/components/modal/modal.d.ts +1 -1
  170. package/dist/types/components/ozon-content/nodes/figuur.node.d.ts +0 -3
  171. package/dist/types/components/skiplink/skiplink.d.ts +18 -0
  172. package/dist/types/components/skiplink/skiplink.interfaces.d.ts +5 -0
  173. package/dist/types/components.d.ts +58 -8
  174. package/package.json +6 -6
  175. package/dist/cjs/focus-trap.esm-dd03396f.js.map +0 -1
  176. package/dist/cjs/i18n-a63b3b9b.js.map +0 -1
  177. package/dist/dso-toolkit/p-3225dd02.entry.js +0 -2
  178. package/dist/dso-toolkit/p-3225dd02.entry.js.map +0 -1
  179. package/dist/dso-toolkit/p-74e0e63e.entry.js +0 -2
  180. package/dist/dso-toolkit/p-74e0e63e.entry.js.map +0 -1
  181. package/dist/dso-toolkit/p-8f0e00b0.entry.js +0 -2
  182. package/dist/dso-toolkit/p-8f0e00b0.entry.js.map +0 -1
  183. package/dist/dso-toolkit/p-992c287c.entry.js +0 -2
  184. package/dist/dso-toolkit/p-992c287c.entry.js.map +0 -1
  185. package/dist/dso-toolkit/p-b0a3dfcb.entry.js +0 -2
  186. package/dist/dso-toolkit/p-b0a3dfcb.entry.js.map +0 -1
  187. package/dist/dso-toolkit/p-c3e750cc.js +0 -2
  188. package/dist/dso-toolkit/p-c3e750cc.js.map +0 -1
  189. package/dist/dso-toolkit/p-f0538f4a.js +0 -6
  190. package/dist/dso-toolkit/p-f0538f4a.js.map +0 -1
  191. package/dist/dso-toolkit/p-f412ab80.entry.js.map +0 -1
  192. package/dist/esm/focus-trap.esm-24223ea1.js.map +0 -1
  193. package/dist/esm/i18n-c9ec6445.js.map +0 -1
  194. /package/dist/dso-toolkit/{p-9424e171.entry.js.map → p-1d7b22a2.entry.js.map} +0 -0
  195. /package/dist/dso-toolkit/{p-636a2ad2.entry.js.map → p-21f133e4.entry.js.map} +0 -0
  196. /package/dist/dso-toolkit/{p-954b3715.entry.js.map → p-2d2eae19.entry.js.map} +0 -0
  197. /package/dist/dso-toolkit/{p-a2a9f5da.entry.js.map → p-6789163b.entry.js.map} +0 -0
  198. /package/dist/dso-toolkit/{p-1616c445.entry.js.map → p-7b3f08da.entry.js.map} +0 -0
  199. /package/dist/dso-toolkit/{p-49e93ef5.entry.js.map → p-7dfc15c1.entry.js.map} +0 -0
  200. /package/dist/dso-toolkit/{p-9a0927eb.entry.js.map → p-9d8395bc.entry.js.map} +0 -0
  201. /package/dist/dso-toolkit/{p-afc4bca7.entry.js.map → p-9df0ed5f.entry.js.map} +0 -0
  202. /package/dist/dso-toolkit/{p-7cfa6ab1.entry.js.map → p-c2f086f2.entry.js.map} +0 -0
  203. /package/dist/dso-toolkit/{p-10603e10.entry.js.map → p-cb0a7103.entry.js.map} +0 -0
  204. /package/dist/dso-toolkit/{p-1022c4bd.entry.js.map → p-d3857319.entry.js.map} +0 -0
@@ -124,13 +124,9 @@
124
124
  cursor: pointer;
125
125
  }
126
126
 
127
- .dso-input-number:not(.form-group) {
127
+ .dso-input-number {
128
128
  align-items: center;
129
129
  display: flex;
130
- flex-wrap: wrap;
131
- }
132
- .dso-input-number label {
133
- inline-size: 100%;
134
130
  }
135
131
  .dso-input-number .dso-input-step-counter {
136
132
  align-self: center;
@@ -179,11 +175,6 @@
179
175
  .dso-button-group > *:only-child {
180
176
  border-radius: 4px;
181
177
  }
182
- .dso-button-group > .dso-input-number {
183
- background-color: #fff;
184
- border-color: #ccc;
185
- color: #191919;
186
- }
187
178
  .dso-button-group > .dso-input-number {
188
179
  border-style: solid;
189
180
  border-width: 1px;
@@ -191,6 +182,11 @@
191
182
  padding-block: 0;
192
183
  padding-inline: 16px;
193
184
  }
185
+ .dso-button-group > .dso-input-number {
186
+ background-color: #fff;
187
+ border-color: #ccc;
188
+ color: #191919;
189
+ }
194
190
  @media screen and (max-width: 767px) {
195
191
  .dso-button-group > .dso-input-number {
196
192
  justify-content: center;
@@ -202,14 +198,14 @@
202
198
  border-color: #d7e7ce;
203
199
  color: #191919;
204
200
  }
201
+ .dso-button-group > *.dso-selected + .dso-input-number {
202
+ box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
203
+ }
205
204
  .dso-button-group > *.dso-selected + .dso-input-number {
206
205
  background-color: #fff;
207
206
  border-color: #39870c;
208
207
  color: #191919;
209
208
  }
210
- .dso-button-group > *.dso-selected + .dso-input-number {
211
- box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
212
- }
213
209
  .dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,
214
210
  .dso-button-group > *.active + .dso-input-number,
215
211
  .dso-button-group > *.active + .dso-input-number:hover {
@@ -220,14 +216,14 @@
220
216
  .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
221
217
  .dso-button-group > *[disabled] + .dso-input-number,
222
218
  .dso-button-group > *[disabled] + .dso-input-number:hover {
223
- background-color: #fff;
224
- border-color: #ccc;
225
- color: #666;
219
+ opacity: 1;
226
220
  }
227
221
  .dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
228
222
  .dso-button-group > *[disabled] + .dso-input-number,
229
223
  .dso-button-group > *[disabled] + .dso-input-number:hover {
230
- opacity: 1;
224
+ background-color: #fff;
225
+ border-color: #ccc;
226
+ color: #666;
231
227
  }
232
228
  .dso-button-group .dso-list-button {
233
229
  padding-inline-end: 15px;
@@ -375,19 +371,6 @@
375
371
  text-align: start;
376
372
  user-select: none;
377
373
  vertical-align: middle;
378
- }
379
- .dso-list-button:focus, .dso-list-button:focus-visible {
380
- outline-offset: 2px;
381
- }
382
- .dso-list-button:active {
383
- outline: 0;
384
- }
385
- .dso-list-button {
386
- background-color: #fff;
387
- border-color: #ccc;
388
- color: #191919;
389
- }
390
- .dso-list-button {
391
374
  border-radius: 4px;
392
375
  border-width: 1px;
393
376
  border-style: solid;
@@ -400,6 +383,17 @@
400
383
  inline-size: 100%;
401
384
  cursor: pointer;
402
385
  }
386
+ .dso-list-button:focus, .dso-list-button:focus-visible {
387
+ outline-offset: 2px;
388
+ }
389
+ .dso-list-button:active {
390
+ outline: 0;
391
+ }
392
+ .dso-list-button {
393
+ background-color: #fff;
394
+ border-color: #ccc;
395
+ color: #191919;
396
+ }
403
397
  .dso-list-button:hover, .dso-list-button:focus {
404
398
  background-color: #fff;
405
399
  border-color: #d7e7ce;
@@ -438,32 +432,22 @@
438
432
  .dso-list-button .dso-sublabel {
439
433
  font-weight: 400;
440
434
  inline-size: 100%;
435
+ padding-inline-start: 32px;
441
436
  }
442
- .dso-list-button dso-icon,
443
- .dso-list-button svg.di,
444
- .dso-list-button .dso-count {
437
+ .dso-list-button dso-icon {
445
438
  block-size: 24px;
446
- position: absolute;
447
- inset-inline-end: 15px;
439
+ color: #39870c;
448
440
  inset-block-start: 15px;
441
+ inset-inline-end: 15px;
449
442
  inline-size: 24px;
450
- }
451
- .dso-list-button dso-icon,
452
- .dso-list-button svg.di {
453
- color: #39870c;
454
443
  page-break-before: always;
455
- }
456
- .dso-list-button .dso-count {
457
- font-weight: 700;
444
+ position: absolute;
458
445
  }
459
446
  @media screen and (max-width: 767px) {
460
447
  .dso-list-button.dso-selected.dso-single-count::after {
461
448
  inline-size: 0;
462
449
  }
463
450
  }
464
- .dso-list-button .dso-sublabel {
465
- padding-inline-start: 32px;
466
- }
467
451
 
468
452
  .dso-list-button + .dso-list-button,
469
453
  .dso-list-button + .dso-button-group,
@@ -9,7 +9,7 @@ export class Modal {
9
9
  this.ariaId = v4();
10
10
  this.fullscreen = undefined;
11
11
  this.modalTitle = undefined;
12
- this.role = "dialog";
12
+ this.dialogRole = "dialog";
13
13
  this.returnFocus = undefined;
14
14
  this.showCloseButton = true;
15
15
  }
@@ -36,10 +36,10 @@ export class Modal {
36
36
  }
37
37
  render() {
38
38
  var _a;
39
- return (h("dialog", { key: 'a869fb2d56e662ccd33d2667bbdc134d642d07da', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
39
+ return (h("dialog", { key: '0255e7eddb5998c8cab38704900f2476569da1de', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
40
40
  e.preventDefault();
41
41
  this.dsoClose.emit({ originalEvent: e });
42
- } }, h("div", { key: '7b9f24bfc1983a9b004b51b6f1a3dfeda8f8aff9', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'e8e6059bd565d64e0b3e4c67529859ed0ff4e2b9' }, h("div", { key: 'd3629df7729f99f51424524469c583087eb71025', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'fb0ca86f1d8bf1e45b74ed1d0fa5af9950d511d0', name: "body" }))), this.hasFooter && (h("div", { key: 'efe75e4ff388bd3f19971ec05c4790ef52ebfcf4', class: "dso-footer" }, h("slot", { key: '948bb7f891efe142ec27b59ec19d016d49ed95eb', name: "footer" }))))));
42
+ } }, h("div", { key: '4c64ce20e353566db32301b776188a1c264124ba', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, this.text("close")))))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'a4bd988f90c7b5770e4a4cf5fde4ae67a2a66cac' }, h("div", { key: '4ec222b1b944910e406ee18e19ca83be55d29e10', class: "dso-body", tabIndex: 0 }, h("slot", { key: '72288b5c808498115f94afaf1531de16786fc1d9', name: "body" }))), this.hasFooter && (h("div", { key: 'c21a38f8cfd9db4f107d06324a2ed2c065eedcc7', class: "dso-footer" }, h("slot", { key: 'ef9d617e2ecade2278beefdd4f72a29cab456a98', name: "footer" }))))));
43
43
  }
44
44
  static get is() { return "dso-modal"; }
45
45
  static get encapsulation() { return "shadow"; }
@@ -89,7 +89,7 @@ export class Modal {
89
89
  "attribute": "modal-title",
90
90
  "reflect": false
91
91
  },
92
- "role": {
92
+ "dialogRole": {
93
93
  "type": "string",
94
94
  "mutable": false,
95
95
  "complexType": {
@@ -103,7 +103,7 @@ export class Modal {
103
103
  "tags": [],
104
104
  "text": "the role for the modal `dialog` | `alert` | `alertdialog`."
105
105
  },
106
- "attribute": "role",
106
+ "attribute": "dialog-role",
107
107
  "reflect": false,
108
108
  "defaultValue": "\"dialog\""
109
109
  },
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n // eslint-disable-next-line @stencil-community/reserved-member-names\r\n role: string | null = \"dialog\";\r\n\r\n /**\r\n * The element to return focus to after the modal is closed.\r\n *\r\n * * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n */\r\n @Prop()\r\n returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement | undefined;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.role ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n dialogRole: string | null = \"dialog\";\r\n\r\n /**\r\n * The element to return focus to after the modal is closed.\r\n *\r\n * * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n */\r\n @Prop()\r\n returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement | undefined;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.dialogRole ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"]}
@@ -7,14 +7,6 @@ export class OzonContentFiguurNode {
7
7
  constructor() {
8
8
  this.name = ["Figuur"];
9
9
  }
10
- getStyle(breedte, hoogte) {
11
- if (breedte && hoogte) {
12
- return {
13
- "--img-aspect-ratio": (breedte / hoogte).toString(),
14
- };
15
- }
16
- return;
17
- }
18
10
  render(node, { mapNodeToJsx }) {
19
11
  var _a, _b, _c, _d, _e, _f;
20
12
  const childNodes = Array.from(node.childNodes);
@@ -37,8 +29,7 @@ export class OzonContentFiguurNode {
37
29
  locatie: (_b = bijschriftNode.getAttribute("locatie")) !== null && _b !== void 0 ? _b : "onder",
38
30
  }
39
31
  : undefined;
40
- const preventLayoutShift = !!Number(illustratie.breedte) && !!Number(illustratie.hoogte);
41
- return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` }, titel && h("span", { class: "figuur-titel" }, titel), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, titel))), h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined, class: { "dso-ozon-figuur-reserve-space": preventLayoutShift }, style: this.getStyle(Number(illustratie.breedte), Number(illustratie.hoogte)) }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
32
+ return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` }, titel && h("span", { class: "figuur-titel" }, titel), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", { wijzigactie: wijzigactie }, titel && (h("div", { slot: "titel" }, h("span", null, titel))), h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
42
33
  }
43
34
  }
44
35
  }
@@ -1 +1 @@
1
- {"version":3,"file":"figuur.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/figuur.node.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n bijschrift?: IBijschrift;\r\n bron?: ChildNode;\r\n mapNodeToJsx: (node: Node | NodeList | Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n inhoud: NodeListOf<ChildNode>;\r\n locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n return (\r\n <span class=\"figuur-bijschrift\">\r\n {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n {bron && (\r\n <Fragment>\r\n {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n {mapNodeToJsx(bron)})\r\n </Fragment>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n name = [\"Figuur\"];\r\n\r\n getStyle(breedte: number, hoogte: number) {\r\n if (breedte && hoogte) {\r\n return {\r\n \"--img-aspect-ratio\": (breedte / hoogte).toString(),\r\n };\r\n }\r\n return;\r\n }\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n const wijzigactie = node.getAttribute(\"wijzigactie\") || undefined;\r\n\r\n if (illustratieNode instanceof Element) {\r\n const illustratie = {\r\n naam: illustratieNode.getAttribute(\"naam\"),\r\n breedte: illustratieNode.getAttribute(\"breedte\"),\r\n hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n alt: illustratieNode.getAttribute(\"alt\"),\r\n };\r\n\r\n const bijschrift =\r\n bijschriftNode instanceof Element\r\n ? {\r\n inhoud: bijschriftNode.childNodes,\r\n locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n }\r\n : undefined;\r\n\r\n const preventLayoutShift = !!Number(illustratie.breedte) && !!Number(illustratie.hoogte);\r\n\r\n return (\r\n <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n {bijschrift?.locatie === \"boven\" && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n <dso-image-overlay wijzigactie={wijzigactie}>\r\n {titel && (\r\n <div slot=\"titel\">\r\n <span>{titel}</span>\r\n </div>\r\n )}\r\n <img\r\n src={illustratie.naam ?? undefined}\r\n alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n class={{ \"dso-ozon-figuur-reserve-space\": preventLayoutShift }}\r\n style={this.getStyle(Number(illustratie.breedte), Number(illustratie.hoogte))}\r\n />\r\n {(bijschrift || bron) && (\r\n <div slot=\"bijschrift\">\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n </div>\r\n )}\r\n </dso-image-overlay>\r\n {(bijschrift?.locatie === \"onder\" || (!bijschrift && bron)) && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"figuur.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/figuur.node.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n bijschrift?: IBijschrift;\r\n bron?: ChildNode;\r\n mapNodeToJsx: (node: Node | NodeList | Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n inhoud: NodeListOf<ChildNode>;\r\n locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n return (\r\n <span class=\"figuur-bijschrift\">\r\n {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n {bron && (\r\n <Fragment>\r\n {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n {mapNodeToJsx(bron)})\r\n </Fragment>\r\n )}\r\n </span>\r\n );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n name = [\"Figuur\"];\r\n\r\n render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n const childNodes = Array.from(node.childNodes);\r\n const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n const wijzigactie = node.getAttribute(\"wijzigactie\") || undefined;\r\n\r\n if (illustratieNode instanceof Element) {\r\n const illustratie = {\r\n naam: illustratieNode.getAttribute(\"naam\"),\r\n breedte: illustratieNode.getAttribute(\"breedte\"),\r\n hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n alt: illustratieNode.getAttribute(\"alt\"),\r\n };\r\n\r\n const bijschrift =\r\n bijschriftNode instanceof Element\r\n ? {\r\n inhoud: bijschriftNode.childNodes,\r\n locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n }\r\n : undefined;\r\n\r\n return (\r\n <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n {bijschrift?.locatie === \"boven\" && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n <dso-image-overlay wijzigactie={wijzigactie}>\r\n {titel && (\r\n <div slot=\"titel\">\r\n <span>{titel}</span>\r\n </div>\r\n )}\r\n <img src={illustratie.naam ?? undefined} alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined} />\r\n {(bijschrift || bron) && (\r\n <div slot=\"bijschrift\">\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n </div>\r\n )}\r\n </dso-image-overlay>\r\n {(bijschrift?.locatie === \"onder\" || (!bijschrift && bron)) && (\r\n <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n )}\r\n </div>\r\n );\r\n }\r\n }\r\n}\r\n"]}
@@ -1377,11 +1377,6 @@ a:visited {
1377
1377
  font-weight: 500;
1378
1378
  padding-block-end: 0.5rem;
1379
1379
  }
1380
- .dso-ozon-figuur .dso-ozon-figuur-reserve-space {
1381
- inline-size: 100%;
1382
- block-size: auto;
1383
- aspect-ratio: var(--img-aspect-ratio);
1384
- }
1385
1380
 
1386
1381
  .dso-ozon-lijst span.od-Lijstaanhef,
1387
1382
  .dso-ozon-lijst span.od-Lijstsluiting {
@@ -9,7 +9,7 @@ export class Progressindicator {
9
9
  this.block = undefined;
10
10
  }
11
11
  render() {
12
- return (h(Host, { key: '75ddf7c5f5d586c3576016b9c975d54c01d7f9b1' }, h("span", { key: '831ba2d4732b96a49d83e9183f6f55d9f3351d46', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '5161aa447c3e04ece65a209b7182db3171b31e4a', icon: "spinner" })), h("span", { key: '253cd708ad62cdd73aa57e3959f773a557df2c5a', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
12
+ return (h(Host, { key: 'b6703c229225d1fe41c64a548683b273bb407e4b' }, h("span", { key: '1f7354a33c6e225f98da4ec1a46786e56c28ff38', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8390d994ff9087aa1528d585c484009c36a554b7', icon: "spinner" })), h("span", { key: 'af5a3464ff7074d3519623df2d8aee534d5adeca', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
13
13
  }
14
14
  static get is() { return "dso-progress-indicator"; }
15
15
  static get encapsulation() { return "shadow"; }
@@ -74,7 +74,7 @@ export class Progressindicator {
74
74
  "text": "Set for bloatier Progress Indicator."
75
75
  },
76
76
  "attribute": "block",
77
- "reflect": false
77
+ "reflect": true
78
78
  }
79
79
  };
80
80
  }
@@ -1 +1 @@
1
- {"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;QAwBpB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;gBACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;YACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /**\r\n * The label of the Progress Indicator.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The size (width) of the Progress Indicator.\r\n *\r\n * If no size is set, falls back to `small`.\r\n */\r\n @Prop({ reflect: true })\r\n size?: \"small\" | \"medium\" | \"large\";\r\n\r\n /**\r\n * Set for bloatier Progress Indicator.\r\n */\r\n @Prop()\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label || this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;QAwBpB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;gBACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;YACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /**\r\n * The label of the Progress Indicator.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The size (width) of the Progress Indicator.\r\n *\r\n * If no size is set, falls back to `small`.\r\n */\r\n @Prop({ reflect: true })\r\n size?: \"small\" | \"medium\" | \"large\";\r\n\r\n /**\r\n * Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label || this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
@@ -128,6 +128,20 @@
128
128
  :host[invalid]:not([invalid=false]) {
129
129
  --dso-selectable-color: #ce3f51;
130
130
  }
131
+ :host > dso-info {
132
+ float: none;
133
+ margin-block: 8px 0;
134
+ margin-inline: 0 16px;
135
+ inline-size: 100%;
136
+ }
137
+ :host .dso-selectable-options {
138
+ list-style: none;
139
+ margin-block-start: 8px;
140
+ padding-inline-start: 0;
141
+ }
142
+ :host .dso-selectable-options li + li {
143
+ margin-block-start: 8px;
144
+ }
131
145
 
132
146
  :host(:not(:last-child)) {
133
147
  margin-block-end: 8px;
@@ -0,0 +1,40 @@
1
+ :host {
2
+ position: fixed;
3
+ inset-block-start: 0;
4
+ inset-inline-start: 0;
5
+ z-index: 2;
6
+ display: block;
7
+ inline-size: 100vw;
8
+ }
9
+
10
+ *,
11
+ *::after,
12
+ *::before {
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ a {
17
+ position: absolute;
18
+ inset-inline-start: 50%;
19
+ inset-block-start: 16px;
20
+ display: inline-block;
21
+ inline-size: 1px;
22
+ block-size: 1px;
23
+ overflow: hidden;
24
+ background-color: #fff;
25
+ border-radius: 2px;
26
+ clip: rect(1px, 1px, 1px, 1px);
27
+ color: var(--link-color);
28
+ white-space: nowrap;
29
+ text-decoration: none;
30
+ transform: translate(-50%);
31
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
32
+ }
33
+ a:focus-visible {
34
+ inline-size: auto;
35
+ block-size: auto;
36
+ padding: 8px;
37
+ clip: auto;
38
+ white-space: normal;
39
+ outline-offset: 2px;
40
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=skiplink.interfaces.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skiplink.interfaces.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkiplinkClickEvent {\r\n originalEvent: MouseEvent;\r\n /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n isModifiedEvent: boolean;\r\n}\r\n"]}
@@ -0,0 +1,92 @@
1
+ import { h } from "@stencil/core";
2
+ import { isModifiedEvent } from "../../utils/is-modified-event";
3
+ export class Skiplink {
4
+ constructor() {
5
+ this.to = undefined;
6
+ this.label = undefined;
7
+ }
8
+ clickEventHandler(e) {
9
+ if (!(e.target instanceof HTMLElement) || !this.to) {
10
+ return;
11
+ }
12
+ return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
13
+ }
14
+ render() {
15
+ return (h("a", { key: 'f2773851b2d0f9838a9323935ab8a108258b8fdb', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'c920fa16fd4c6dac2eee63531c83385a4cee5170', icon: "chevron-right" })));
16
+ }
17
+ static get is() { return "dso-skiplink"; }
18
+ static get encapsulation() { return "shadow"; }
19
+ static get originalStyleUrls() {
20
+ return {
21
+ "$": ["skiplink.scss"]
22
+ };
23
+ }
24
+ static get styleUrls() {
25
+ return {
26
+ "$": ["skiplink.css"]
27
+ };
28
+ }
29
+ static get properties() {
30
+ return {
31
+ "to": {
32
+ "type": "string",
33
+ "mutable": false,
34
+ "complexType": {
35
+ "original": "string | undefined",
36
+ "resolved": "string | undefined",
37
+ "references": {}
38
+ },
39
+ "required": true,
40
+ "optional": false,
41
+ "docs": {
42
+ "tags": [],
43
+ "text": "The location to which the skiplink links."
44
+ },
45
+ "attribute": "to",
46
+ "reflect": true
47
+ },
48
+ "label": {
49
+ "type": "string",
50
+ "mutable": false,
51
+ "complexType": {
52
+ "original": "string | undefined",
53
+ "resolved": "string | undefined",
54
+ "references": {}
55
+ },
56
+ "required": true,
57
+ "optional": false,
58
+ "docs": {
59
+ "tags": [],
60
+ "text": "link text"
61
+ },
62
+ "attribute": "label",
63
+ "reflect": true
64
+ }
65
+ };
66
+ }
67
+ static get events() {
68
+ return [{
69
+ "method": "dsoSkiplinkClick",
70
+ "name": "dsoSkiplinkClick",
71
+ "bubbles": true,
72
+ "cancelable": true,
73
+ "composed": true,
74
+ "docs": {
75
+ "tags": [],
76
+ "text": "Emitted when the Skiplink is clicked."
77
+ },
78
+ "complexType": {
79
+ "original": "SkiplinkClickEvent",
80
+ "resolved": "SkiplinkClickEvent",
81
+ "references": {
82
+ "SkiplinkClickEvent": {
83
+ "location": "import",
84
+ "path": "./skiplink.interfaces",
85
+ "id": "src/components/skiplink/skiplink.interfaces.ts::SkiplinkClickEvent"
86
+ }
87
+ }
88
+ }
89
+ }];
90
+ }
91
+ }
92
+ //# sourceMappingURL=skiplink.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skiplink.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAShE,MAAM,OAAO,QAAQ;;;;;IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,KAAK;YACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-skiplink\",\r\n styleUrl: \"skiplink.scss\",\r\n shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n /**\r\n * The location to which the skiplink links.\r\n */\r\n @Prop({ reflect: true })\r\n to!: string | undefined;\r\n\r\n /**\r\n * link text\r\n */\r\n @Prop({ reflect: true })\r\n label!: string | undefined;\r\n\r\n /**\r\n * Emitted when the Skiplink is clicked.\r\n */\r\n @Event()\r\n dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n private clickEventHandler(e: MouseEvent) {\r\n if (!(e.target instanceof HTMLElement) || !this.to) {\r\n return;\r\n }\r\n\r\n return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n }\r\n\r\n render() {\r\n return (\r\n <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n {this.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n );\r\n }\r\n}\r\n"]}
@@ -19,7 +19,7 @@ export class SlideToggle {
19
19
  this.hasVisibleLabel = this.host.querySelector("*") !== null;
20
20
  }
21
21
  render() {
22
- return (h(Fragment, null, h("button", Object.assign({ key: '306eb41c32a4811e8ae34fb407f827bc8b875d90', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '35dac095c112ff5ebfe85701c5d3a44d5b1dbf68', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'b6db44931a28ffbf074ebe22b6ad2aaca58609d1', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '40618cd396f7fb4c316c58fb9afe7138aa5dffd5', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '3bd59d43e08c68849e89ec62f89d8cd32e68542b', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '1de645b2d4f302b4c34ffbcbd7f012b6aa2eb164', htmlFor: this.identifier }, h("slot", { key: '21915a975abcff59b830a891660cb1f23f604a6f' })))));
22
+ return (h(Fragment, null, h("button", Object.assign({ key: '1d0bd72208407db78bf18151ca091cc52ee8fb01', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'aeab86c82b268e0090b94867fd8f404cc2c52ba2', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '8ba58bfc4e94d0ef9ed98a2a3a6c6820f7ad0e43', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '992551dcb7d56e2db0f71816b2d7af218dc1b1f3', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'a3aca9759480ab267897c3d156945e8df7f6af70', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '688ed90390ee4454f4361b8d44018a7f40502886', htmlFor: this.identifier }, h("slot", { key: '1681d2d582523acb101921eb6653328676213392' })))));
23
23
  }
24
24
  static get is() { return "dso-slide-toggle"; }
25
25
  static get originalStyleUrls() {
@@ -30,7 +30,7 @@ export class Table {
30
30
  render() {
31
31
  var _a, _b;
32
32
  const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
33
- return (h(Host, { key: '938a684ea916f6b2bfb741ad8ea1a07ee2b800a1' }, this.modalActive && this.placeholderHeight && (h("div", { key: 'b4215b34413a54a9715810c71400cebbd262c72f', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'f7b9e6d0d60b7395dea511fbfff066ea78d0ac2d', class: "dso-modal-overlay" }), h("div", { key: 'ee15e6948a5c45cec6ebcc20b96886690568b846', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'bbd957170c048e6511659370abb231733de3b304', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: 'ef992251b2c61f5d39c07671a505b261778cd802', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '7353c51b91d45764a2c1554e11b88554562622f7', class: "dso-responsive-message" }, h("span", { key: 'fa2859739ccfd5d2feade45fb6b146589422176b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '6238fab58ee5d1ca1544704baa799ec87f2759a4', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '0a65833cee370dd7b74453758963070d29c315bb', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '7de772f54616cc4723e92eb98933f4d55937bcd6' }, "vergroten"), h("dso-icon", { key: 'bc085946ea5591a3b9c6ee5cd8cb9bd352182283', icon: "external-link" }))))), this.modalActive && (h("div", { key: '2d2505608302cda259d9e51ef5f98d8ceebf292f', class: "dso-header" }, h("h2", { key: '2e7269709c803dc248300ca87555f3589ada73b8', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'bc26e2181aaaa38b9d200aeb044250717cc78880', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '79707874e61cb4f5cd0bfe800946e70719efcd9b', icon: "times" }), h("span", { key: '3a552318df143dd8d91342d767417d05ce27d95b', class: "sr-only" }, "Sluiten")))), h("div", { key: 'e05e8573d30faf5102f3593ee0d32416f2212d65', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '9d31d8f0dc6567feba03c67c4397935d2a853367' }))))));
33
+ return (h(Host, { key: 'fc92288fe7d379ec8b56dbb49931b023a1aa669c' }, this.modalActive && this.placeholderHeight && (h("div", { key: '651f19822424b8385f4854840100fceb3b6819ca', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '80c8515444552216f26e5733d2c928cc4c7b3822', class: "dso-modal-overlay" }), h("div", { key: '82f023fb532ebbe9b8192229d5db55e555ec5f93', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'b150734ceb13ddfa0ff8412961917869273c7c34', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '35c156e2e76ebee21a56700e0265bb2e0270b69c', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '49984412ae1616077b9934babd0e2b3bc518d151', class: "dso-responsive-message" }, h("span", { key: '6ed229941d728f12a068b489534e41b60e2b4ff9' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '2f412f2795b0410883f975721e51ebebf1dddcc5', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '2332690378cead455b420576bf9cd5f68d993278', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '90351eded6efd138705cf08bfadc6ee9109a0e69' }, "vergroten"), h("dso-icon", { key: 'd314dfede218f9258a3ca2e109c6e93dfde97b81', icon: "external-link" }))))), this.modalActive && (h("div", { key: '05890549bb56488890bc886989b524bdeed073d4', class: "dso-header" }, h("h2", { key: '271ad27174b676b41cb20de4c1f579e999b61ce0', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'd42b834be57bb606eeb52f68ef8a5f23bf4b2668', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '947a77978e4b53e615a1f785721b4bb7e615d120', icon: "times" }), h("span", { key: 'e19dd743a47fc7df5ab9a6b3fd9bf8ba5cb0cff8', class: "sr-only" }, "Sluiten")))), h("div", { key: '30f4d60debabc4919fbd4350ad3fa750da006936', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '084aec8bb7315257e20414361124419ef555201c' }))))));
34
34
  }
35
35
  openModal() {
36
36
  this.placeholderHeight = this.host.clientHeight;
@@ -64,7 +64,7 @@ export class Tabs {
64
64
  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
65
65
  }
66
66
  render() {
67
- return (h(Host, { key: '6f2a81d22ac8cd8702205ec9677dc77aab2def53' }, h("div", { key: 'c91c2d14016e0aeec92935fc8cfe17d7e8134d0a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '2bd28da0f1be671d9e34d175d87fcb153cb7b806' })), h("div", { key: 'ece2325b9520401d784445c737d819aba6773f3b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '9606d989fd9c6aead0175b20aff4362a67931b4c', name: "panel" }))));
67
+ return (h(Host, { key: 'd115f11054298f6f4ba09e97f0e8c1b726aac09c' }, h("div", { key: '74e724fc01facb00f7ca14f3420b68172c313927', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '7d65307f3dd7372b30eccf57ae2c552451d0920f' })), h("div", { key: '251184652aace25225b69336bf9c0bae0ab98e68', role: "tabpanel", tabindex: "0" }, h("slot", { key: '79e95365db5486bd5e54161919f653df5ac525cc', name: "panel" }))));
68
68
  }
69
69
  static get is() { return "dso-tabs"; }
70
70
  static get encapsulation() { return "shadow"; }
@@ -40,7 +40,7 @@ export class Toggletip {
40
40
  this.secondary = undefined;
41
41
  }
42
42
  render() {
43
- return (h(Fragment, null, h("dso-info-button", { key: '2f938583863cae9802fe5f214720e3fa4826f238', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '263d9cb3b19468446ccf7a61bbe34a26f3b81fb8', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'f947899c3292662b0126598c54a30f923391eca0' }))));
43
+ return (h(Fragment, null, h("dso-info-button", { key: 'f7e6f87ddaa464cbf64ca4b18341a33611e3f72a', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '29128e6c5cc5c3ea6d17aa3a27f76b09c00b059f', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '6d4157cdfa69e23487aa758fbd8d8f3dac612bea' }))));
44
44
  }
45
45
  static get is() { return "dso-toggletip"; }
46
46
  static get encapsulation() { return "shadow"; }
@@ -168,7 +168,7 @@ export class Tooltip {
168
168
  }
169
169
  }
170
170
  render() {
171
- return (h(Host, { key: 'e37d4e704377fbefd6bb82a624b9f622a64b01c8', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '774735ed5b3bd6a450d2a456c3267baabc58f606', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '9506905d58afcbe73303fcd72ccf1fa0211edd94', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '888c1a89ba70457e1593b2b33f6053da4f5165cf', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '4a7e78664f3ff6bd4502b886647cb5060e11bf86' })))));
171
+ return (h(Host, { key: '01e63a4cd76dca4d1d07bbbb35c8e67f7c4883e7', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '39c3989e697df79021b782aa1ba0100f352fef0c', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'ce11016b943b0a32bde7da78a1a039cec0523681', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'e2fff499e2bbf78bb4c542f6cd4b23b30c26ba50', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '54ff66606cc1dc120768ee6b9f3cd4f66cec1aec' })))));
172
172
  }
173
173
  activatePopper() {
174
174
  var _a;
@@ -175,7 +175,7 @@ export class TreeView {
175
175
  }
176
176
  render() {
177
177
  var _a;
178
- return (h("div", { key: '68895ed09b3f33a24917258d540d09b2fac123a1', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '2757425abdfb47e7d5beeca31274be4694329d8d', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
178
+ return (h("div", { key: '733757192ac89c90806872d71a6b9d1079a33514', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '29f84b165163e1ada0f411e8127ac3e213a775b0', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
179
179
  }
180
180
  static get is() { return "dso-tree-view"; }
181
181
  static get encapsulation() { return "shadow"; }
@@ -154,7 +154,7 @@ export class ViewerGrid {
154
154
  }
155
155
  render() {
156
156
  const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
157
- return (h(Fragment, null, this.tabView && (h("nav", { key: 'd5873dcccbb0e3924ef7faa1f5ddbb42d1ac409c', class: "dso-navbar" }, h("ul", { key: 'c56fc8fefe943280b371173a98e8efe06e7c42a4', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'fc81d5e7a184c57fdc167aa4446d533079c553f4', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'bf4ee43c574db2ffe1a5b19444a6c2c0fbd5a562', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '6bb7a4e5ffc92664d3ec41e193b9060a5d9fee7d', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'b90a125e730e877462178784a6f643ee9d140da3', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'b7c0df6c3cedb78dfc86308496c532bd240dc354', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'd4e9cb92bb22d2e8169ddc8535f316d174753c6d', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
157
+ return (h(Fragment, null, this.tabView && (h("nav", { key: '5bb28bca2da923349ff553a3e32ad6afc6292189', class: "dso-navbar" }, h("ul", { key: '0ec74cb43fb25056ca47b063c94e19deaf12e5a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '92b77fad12d794fe466f0eefb1c077545887970b', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), h(Filterpanel, { key: 'ecb109bf285a6838c5ec84ef069bd53ba581c5a7', ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel }), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'b4a056be215b05ffb730f82aee8eebb7adf1c7b1', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '26a55ded1adf6f6d12814c4f327538e6cc14dbe8', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: 'b2ebd498fa85c639196525cda9f4386613bae869', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '718aa0f258d94bad2336b14f13cd0ba26d465205', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
158
158
  }
159
159
  static get is() { return "dso-viewer-grid"; }
160
160
  static get encapsulation() { return "shadow"; }