@dso-toolkit/core 62.2.0 → 62.2.2

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 (92) hide show
  1. package/dist/cjs/{dso-alert_5.cjs.entry.js → dso-alert_7.cjs.entry.js} +179 -1
  2. package/dist/cjs/dso-alert_7.cjs.entry.js.map +1 -0
  3. package/dist/cjs/dso-expandable.cjs.entry.js +1 -1
  4. package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
  5. package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
  6. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
  8. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  9. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  10. package/dist/cjs/dso-viewer-grid.cjs.entry.js +21 -18
  11. package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/components/expandable/expandable.css +0 -12
  14. package/dist/collection/components/list-button/list-button.css +0 -13
  15. package/dist/collection/components/ozon-content/ozon-content.js +4 -0
  16. package/dist/collection/components/ozon-content/ozon-content.js.map +1 -1
  17. package/dist/collection/components/selectable/selectable.css +1 -24
  18. package/dist/collection/components/selectable/selectable.js +6 -1
  19. package/dist/collection/components/selectable/selectable.js.map +1 -1
  20. package/dist/collection/components/viewer-grid/components/document-panel.js +1 -1
  21. package/dist/collection/components/viewer-grid/components/document-panel.js.map +1 -1
  22. package/dist/collection/components/viewer-grid/components/main-panel.js +1 -1
  23. package/dist/collection/components/viewer-grid/components/main-panel.js.map +1 -1
  24. package/dist/collection/components/viewer-grid/components/sizing-buttons.js +11 -1
  25. package/dist/collection/components/viewer-grid/components/sizing-buttons.js.map +1 -1
  26. package/dist/components/document-component.js +24 -12
  27. package/dist/components/document-component.js.map +1 -1
  28. package/dist/components/dso-image-overlay.js +1 -122
  29. package/dist/components/dso-image-overlay.js.map +1 -1
  30. package/dist/components/dso-list-button.js +1 -1
  31. package/dist/components/dso-list-button.js.map +1 -1
  32. package/dist/components/dso-table.js +1 -109
  33. package/dist/components/dso-table.js.map +1 -1
  34. package/dist/components/dso-viewer-grid.js +21 -18
  35. package/dist/components/dso-viewer-grid.js.map +1 -1
  36. package/dist/components/dsot-document-component-demo.js +34 -22
  37. package/dist/components/dsot-document-component-demo.js.map +1 -1
  38. package/dist/components/expandable.js +1 -1
  39. package/dist/components/expandable.js.map +1 -1
  40. package/dist/{esm/dso-image-overlay.entry.js → components/image-overlay.js} +35 -12
  41. package/dist/components/image-overlay.js.map +1 -0
  42. package/dist/components/ozon-content.js +25 -1
  43. package/dist/components/ozon-content.js.map +1 -1
  44. package/dist/components/selectable.js +2 -2
  45. package/dist/components/selectable.js.map +1 -1
  46. package/dist/{esm/dso-table.entry.js → components/table.js} +38 -13
  47. package/dist/{cjs/dso-table.cjs.entry.js.map → components/table.js.map} +1 -1
  48. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  49. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  50. package/dist/dso-toolkit/{p-4239e3d6.entry.js → p-0c156f79.entry.js} +2 -2
  51. package/dist/dso-toolkit/{p-4239e3d6.entry.js.map → p-0c156f79.entry.js.map} +1 -1
  52. package/dist/dso-toolkit/p-5a47a86e.entry.js +2 -0
  53. package/dist/dso-toolkit/{p-caf4d880.entry.js.map → p-5a47a86e.entry.js.map} +1 -1
  54. package/dist/dso-toolkit/p-938f47d3.entry.js +2 -0
  55. package/dist/dso-toolkit/p-938f47d3.entry.js.map +1 -0
  56. package/dist/dso-toolkit/p-ae3e01c4.entry.js +2 -0
  57. package/dist/dso-toolkit/p-ae3e01c4.entry.js.map +1 -0
  58. package/dist/dso-toolkit/p-e88590a7.entry.js +2 -0
  59. package/dist/dso-toolkit/p-e88590a7.entry.js.map +1 -0
  60. package/dist/esm/{dso-alert_5.entry.js → dso-alert_7.entry.js} +179 -3
  61. package/dist/esm/dso-alert_7.entry.js.map +1 -0
  62. package/dist/esm/dso-expandable.entry.js +1 -1
  63. package/dist/esm/dso-expandable.entry.js.map +1 -1
  64. package/dist/esm/dso-info_2.entry.js +2 -2
  65. package/dist/esm/dso-info_2.entry.js.map +1 -1
  66. package/dist/esm/dso-list-button.entry.js +1 -1
  67. package/dist/esm/dso-list-button.entry.js.map +1 -1
  68. package/dist/esm/dso-toolkit.js +1 -1
  69. package/dist/esm/dso-viewer-grid.entry.js +21 -18
  70. package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
  71. package/dist/esm/loader.js +1 -1
  72. package/dist/types/components/selectable/selectable.d.ts +5 -0
  73. package/dist/types/components/viewer-grid/components/sizing-buttons.d.ts +1 -0
  74. package/package.json +2 -2
  75. package/dist/cjs/dso-alert_5.cjs.entry.js.map +0 -1
  76. package/dist/cjs/dso-image-overlay.cjs.entry.js +0 -107
  77. package/dist/cjs/dso-image-overlay.cjs.entry.js.map +0 -1
  78. package/dist/cjs/dso-table.cjs.entry.js +0 -92
  79. package/dist/dso-toolkit/p-2719a53a.entry.js +0 -2
  80. package/dist/dso-toolkit/p-2719a53a.entry.js.map +0 -1
  81. package/dist/dso-toolkit/p-753b5aa8.entry.js +0 -2
  82. package/dist/dso-toolkit/p-753b5aa8.entry.js.map +0 -1
  83. package/dist/dso-toolkit/p-a91673a9.entry.js +0 -2
  84. package/dist/dso-toolkit/p-a91673a9.entry.js.map +0 -1
  85. package/dist/dso-toolkit/p-ab1f0511.entry.js +0 -2
  86. package/dist/dso-toolkit/p-ab1f0511.entry.js.map +0 -1
  87. package/dist/dso-toolkit/p-caf4d880.entry.js +0 -2
  88. package/dist/dso-toolkit/p-cbeb00cc.entry.js +0 -2
  89. package/dist/dso-toolkit/p-cbeb00cc.entry.js.map +0 -1
  90. package/dist/esm/dso-alert_5.entry.js.map +0 -1
  91. package/dist/esm/dso-image-overlay.entry.js.map +0 -1
  92. package/dist/esm/dso-table.entry.js.map +0 -1
@@ -5,8 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-d46ec033.js');
6
6
  const clsx = require('./clsx-fd0bee58.js');
7
7
  const index$1 = require('./index-794ad37a.js');
8
+ const focusTrap_esm = require('./focus-trap.esm-b6bba312.js');
8
9
  const _commonjsHelpers = require('./_commonjsHelpers-68cdf74f.js');
9
10
  const v4 = require('./v4-abb5dc0c.js');
11
+ require('./index.esm-970bc106.js');
10
12
 
11
13
  const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#000;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#000;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#000;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#000;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
12
14
 
@@ -63,6 +65,101 @@ const Badge = class {
63
65
  };
64
66
  Badge.style = badgeCss;
65
67
 
68
+ const imageOverlayCss = ":host {\n display: inline-block;\n position: relative;\n}\n\n:host(:hover) .open,\n.open:focus {\n opacity: 1;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.open {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n opacity: 0;\n position: absolute;\n right: 16px;\n top: 16px;\n}\n.open:focus, .open:focus-visible {\n outline-offset: 2px;\n}\n.open:active {\n outline: 0;\n}\n.open:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open[disabled], .open[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.open.dso-small {\n line-height: 1rem;\n}\n.open.dso-small dso-icon,\n.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.open.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.open.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.open > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.open.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.open.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\n.open.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.open.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}\n\n.dimmer {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 19;\n display: flex;\n padding: 32px;\n background-color: rgba(255, 255, 255, 0.8);\n justify-content: center;\n}\n\n.wrapper {\n align-self: center;\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n line-height: 0;\n outline: 4px solid #fff;\n position: relative;\n z-index: 20;\n}\n.wrapper .titel:not([hidden]) {\n background-color: #fff;\n font-weight: 700;\n line-height: initial;\n padding: 8px;\n position: absolute;\n}\n.wrapper img {\n width: auto;\n height: auto;\n max-width: 100%;\n max-height: calc(100vh - 64px);\n}\n.wrapper .figuur-bijschrift:not([hidden]) {\n display: block;\n font-size: 0.75rem;\n font-style: italic;\n padding-bottom: 12px;\n padding-top: 16px;\n}\n\n.close {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n min-width: auto;\n padding: 8px;\n position: absolute;\n top: 16px;\n right: 16px;\n}\n.close:focus, .close:focus-visible {\n outline-offset: 2px;\n}\n.close:active {\n outline: 0;\n}\n.close:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.close[disabled], .close[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close.dso-small {\n line-height: 1rem;\n}\n.close.dso-small dso-icon,\n.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.close.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.close.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.close > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.close.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\n.close.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.close.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}";
69
+
70
+ const ImageOverlay = class {
71
+ constructor(hostRef) {
72
+ index.registerInstance(this, hostRef);
73
+ this.titelSlot = null;
74
+ this.bijschriftSlot = null;
75
+ this.active = false;
76
+ this.zoomable = false;
77
+ }
78
+ loadListener(event) {
79
+ if (event.target instanceof HTMLImageElement) {
80
+ this.setZoomable(event.target);
81
+ }
82
+ }
83
+ connectedCallback() {
84
+ this.titelSlot = this.host.querySelector("div[slot='titel']");
85
+ this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
86
+ }
87
+ componentDidLoad() {
88
+ this.resizeObserver = new ResizeObserver(index$1.debounce_1(() => {
89
+ const imgElement = this.host.querySelector("img");
90
+ if (imgElement instanceof HTMLImageElement) {
91
+ this.setZoomable(imgElement);
92
+ }
93
+ }, 200));
94
+ this.mutationObserver = new MutationObserver((e) => {
95
+ var _a, _b;
96
+ index.forceUpdate(this.host);
97
+ if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
98
+ (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
99
+ // <img> is gone or a new element.
100
+ this.initZoomableImage();
101
+ }
102
+ });
103
+ this.mutationObserver.observe(this.host, {
104
+ attributes: true,
105
+ subtree: true,
106
+ attributeFilter: ["src", "alt"],
107
+ childList: true,
108
+ });
109
+ this.initZoomableImage();
110
+ }
111
+ disconnectedCallback() {
112
+ var _a, _b, _c;
113
+ (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
114
+ (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
115
+ (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
116
+ }
117
+ initZoomableImage() {
118
+ var _a;
119
+ const imgElement = this.host.querySelector("img");
120
+ if (!(imgElement instanceof HTMLImageElement)) {
121
+ return;
122
+ }
123
+ // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
124
+ if (imgElement.complete) {
125
+ this.setZoomable(imgElement);
126
+ }
127
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
128
+ }
129
+ setZoomable(imageElement) {
130
+ const { width, naturalWidth, height, naturalHeight } = imageElement;
131
+ this.zoomable = width < naturalWidth || height < naturalHeight;
132
+ }
133
+ render() {
134
+ var _a;
135
+ const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
136
+ return (index.h(index.Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (index.h("div", { class: "dimmer" }, index.h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, index.h("div", { class: "titel", hidden: !this.titelSlot }, index.h("slot", { name: "titel" })), index.h("img", { src: src, alt: alt }), index.h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, index.h("dso-icon", { icon: "times" }), index.h("span", null, "Sluiten")), index.h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, index.h("slot", { name: "bijschrift" }))))), index.h("slot", null), this.zoomable && (index.h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, index.h("dso-icon", { icon: "external-link" }), index.h("span", null, "Afbeelding vergroot weergeven")))));
137
+ }
138
+ componentDidRender() {
139
+ var _a, _b;
140
+ if (this.active && this.wrapperElement && !this.trap) {
141
+ this.trap = focusTrap_esm.createFocusTrap(this.wrapperElement, {
142
+ escapeDeactivates: true,
143
+ clickOutsideDeactivates: (e) => {
144
+ if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
145
+ this.active = false;
146
+ return false;
147
+ }
148
+ return true;
149
+ },
150
+ setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
151
+ onDeactivate: () => (this.active = false),
152
+ }).activate();
153
+ }
154
+ else if (!this.active && this.trap) {
155
+ (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
156
+ delete this.trap;
157
+ }
158
+ }
159
+ get host() { return index.getElement(this); }
160
+ };
161
+ ImageOverlay.style = imageOverlayCss;
162
+
66
163
  const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%;padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-label-info{background-color:#6ca4d9;color:#000}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#000}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
67
164
 
68
165
  const resizeObserver = new ResizeObserver(index$1.debounce_1.debounce((entries) => {
@@ -1172,10 +1269,91 @@ const OzonContent = class {
1172
1269
  };
1173
1270
  OzonContent.style = ozonContentCss;
1174
1271
 
1272
+ const tableCss = "button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n height: 16px;\n width: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: \"\";\n display: inline-block;\n margin-left: 8px;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n top: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n background: url(\"./dso-icons.svg#img-download\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n background-position: center;\n background-size: cover;\n height: 24px;\n vertical-align: top;\n width: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #fff;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-left: 16px;\n}\n\n@keyframes slideInFromTop {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n:host {\n display: block;\n margin-bottom: 24px;\n}\n\n.dso-header {\n min-height: 32px;\n}\n.dso-header h2 {\n color: #275937;\n font-size: 1.5rem;\n font-weight: 700;\n}\n.dso-header .dso-close {\n color: #275937;\n}\n\n:host .dso-modal {\n overflow: visible;\n padding: 0;\n border: 0;\n inset: 0px;\n height: 100%;\n position: fixed;\n z-index: 530;\n}\n:host .dso-modal::backdrop {\n background-color: rgba(255, 255, 255, 0.8);\n}\n:host .dso-modal .dso-dialog {\n inline-size: 640px;\n background-color: #fff;\n opacity: 1;\n box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n animation: 1s ease-out 0s 1 slideInFromTop;\n}\n:host .dso-modal .dso-header {\n position: relative;\n padding: 16px;\n border-block-end: 1px solid #ccc;\n}\n:host .dso-modal .dso-header h2 {\n max-inline-size: calc(100% - 24px);\n margin: 0;\n color: #275937;\n}\n:host .dso-modal .dso-header .dso-close {\n position: absolute;\n inset-block-start: 16px;\n inset-inline-end: 13px;\n block-size: 32px;\n inline-size: 32px;\n padding: 0;\n background-color: transparent;\n border: 0;\n text-align: center;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n block-size: calc(100% - 96px - 1.5rem);\n max-block-size: calc(70vh - 144px - 1.5em);\n min-block-size: 1.5rem;\n overflow-x: auto;\n padding: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n height: auto;\n max-width: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n block-size: calc(100% - 96px - 1.5rem);\n max-block-size: calc(70vh - 144px - 1.5em);\n min-block-size: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n height: auto;\n max-width: 100%;\n}\n:host .dso-modal .dso-body:focus-visible {\n outline: none;\n}\n:host .dso-modal .dso-footer {\n min-block-size: 80px;\n padding: 16px 32px;\n text-align: end;\n}\n@media screen and (max-width: 767px) {\n :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n :host .dso-modal .dso-footer button {\n inline-size: 100%;\n text-align: center;\n }\n :host .dso-modal .dso-footer button + button {\n margin-block-start: 8px;\n }\n :host .dso-modal .dso-footer button.dso-tertiary,\n :host .dso-modal .dso-footer button.dso-tertiary span {\n float: none;\n }\n}\n@media screen and (min-width: 768px) {\n :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {\n margin-inline-start: 16px;\n }\n :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n}\n@media screen and (max-width: 767px) {\n :host .dso-modal .dso-dialog {\n max-inline-size: 100%;\n margin-block-start: 0;\n }\n :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n margin-inline-start: 0;\n }\n :host .dso-modal .dso-footer button {\n inline-size: 100%;\n text-align: center;\n }\n :host .dso-modal .dso-footer button + button {\n margin-block-start: 8px;\n }\n :host .dso-modal .dso-footer button.dso-tertiary,\n :host .dso-modal .dso-footer button.dso-tertiary span {\n float: none;\n }\n}\n@media screen and (max-height: 380px) {\n :host .dso-modal .dso-dialog {\n min-block-size: 216px;\n margin-block-start: 8px;\n margin-block-end: 8px;\n }\n :host .dso-modal .dso-header {\n padding: 8px 16px;\n }\n :host .dso-modal .dso-header .dso-close {\n inset-block-start: 8px;\n }\n :host .dso-modal .dso-body {\n padding: 16px 24px;\n }\n :host .dso-modal .dso-footer {\n min-block-size: auto;\n overflow: auto;\n padding: 8px 32px;\n }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n margin-top: 1rem;\n max-width: calc(100% - 2rem);\n margin-left: auto;\n margin-right: auto;\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n .dso-modal .dso-dialog.dso-table-dialog {\n max-width: 100%;\n }\n}\n\n:host([is-responsive]) .dso-table-body {\n border: 1px solid #ccc;\n margin-bottom: 0;\n overflow-y: hidden;\n width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n margin-left: auto;\n}\n\n.dso-responsive-message {\n font-size: 0.8em;\n margin-bottom: 8px;\n position: relative;\n text-align: center;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-modal-overlay {\n background-color: rgba(255, 255, 255, 0.8);\n bottom: 0;\n display: block;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 529;\n}\n\n.dso-table-placeholder {\n box-shadow: inset 0 0 0 1px #ccc;\n display: grid;\n place-content: center;\n}";
1273
+
1274
+ const Table = class {
1275
+ constructor(hostRef) {
1276
+ index.registerInstance(this, hostRef);
1277
+ this.labelledbyId = v4.v4();
1278
+ this.noModal = false;
1279
+ this.isResponsive = false;
1280
+ this.modalActive = false;
1281
+ this.placeholderHeight = undefined;
1282
+ }
1283
+ startResponsiveBehavior() {
1284
+ var _a;
1285
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
1286
+ }
1287
+ componentWillLoad() {
1288
+ this.resizeObserver = new ResizeObserver(index$1.debounce_1((entries) => this.setResponsiveTable(entries), 200));
1289
+ }
1290
+ componentDidLoad() {
1291
+ this.startResponsiveBehavior();
1292
+ }
1293
+ componentDidRender() {
1294
+ this.setFocusTrap();
1295
+ }
1296
+ disconnectedCallback() {
1297
+ var _a;
1298
+ (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
1299
+ }
1300
+ render() {
1301
+ var _a, _b;
1302
+ 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();
1303
+ return (index.h(index.Host, null, this.modalActive && this.placeholderHeight && (index.h("div", { class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { class: "dso-modal-overlay" }), index.h("div", { class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ 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) && (index.h("div", { class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { class: "dso-responsive-message" }, index.h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", null, "vergroten"), index.h("dso-icon", { icon: "external-link" }))))), this.modalActive && (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten")))), index.h("div", { class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", null))))));
1304
+ }
1305
+ openModal() {
1306
+ this.placeholderHeight = this.host.clientHeight;
1307
+ this.modalActive = true;
1308
+ }
1309
+ closeModal() {
1310
+ this.placeholderHeight = undefined;
1311
+ this.modalActive = false;
1312
+ }
1313
+ setFocusTrap() {
1314
+ var _a, _b;
1315
+ if (this.modalActive && this.focusTrapElement && !this.trap) {
1316
+ this.trap = focusTrap_esm.createFocusTrap([this.host, this.focusTrapElement], {
1317
+ escapeDeactivates: true,
1318
+ clickOutsideDeactivates: (e) => {
1319
+ if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {
1320
+ this.closeModal();
1321
+ return false;
1322
+ }
1323
+ return true;
1324
+ },
1325
+ setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
1326
+ onDeactivate: () => this.closeModal(),
1327
+ tabbableOptions: {
1328
+ getShadowRoot: true,
1329
+ },
1330
+ }).activate();
1331
+ }
1332
+ else if (!this.modalActive && this.trap) {
1333
+ (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
1334
+ delete this.trap;
1335
+ }
1336
+ }
1337
+ setResponsiveTable([dsoTable]) {
1338
+ if (!dsoTable) {
1339
+ throw new Error("No dsoTable found");
1340
+ }
1341
+ const tableElement = dsoTable.target.querySelector("table");
1342
+ if (dsoTable && tableElement instanceof HTMLTableElement) {
1343
+ this.isResponsive =
1344
+ Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
1345
+ }
1346
+ }
1347
+ get host() { return index.getElement(this); }
1348
+ };
1349
+ Table.style = tableCss;
1350
+
1175
1351
  exports.dso_alert = Alert;
1176
1352
  exports.dso_annotation_button = AnnotationButton;
1177
1353
  exports.dso_badge = Badge;
1354
+ exports.dso_image_overlay = ImageOverlay;
1178
1355
  exports.dso_label = Label;
1179
1356
  exports.dso_ozon_content = OzonContent;
1357
+ exports.dso_table = Table;
1180
1358
 
1181
- //# sourceMappingURL=dso-alert_5.cjs.entry.js.map
1359
+ //# sourceMappingURL=dso-alert_7.cjs.entry.js.map