@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.
- package/dist/cjs/{dso-alert_5.cjs.entry.js → dso-alert_7.cjs.entry.js} +179 -1
- package/dist/cjs/dso-alert_7.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-expandable.cjs.entry.js +1 -1
- package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
- package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +21 -18
- package/dist/cjs/dso-viewer-grid.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/expandable/expandable.css +0 -12
- package/dist/collection/components/list-button/list-button.css +0 -13
- package/dist/collection/components/ozon-content/ozon-content.js +4 -0
- package/dist/collection/components/ozon-content/ozon-content.js.map +1 -1
- package/dist/collection/components/selectable/selectable.css +1 -24
- package/dist/collection/components/selectable/selectable.js +6 -1
- package/dist/collection/components/selectable/selectable.js.map +1 -1
- package/dist/collection/components/viewer-grid/components/document-panel.js +1 -1
- package/dist/collection/components/viewer-grid/components/document-panel.js.map +1 -1
- package/dist/collection/components/viewer-grid/components/main-panel.js +1 -1
- package/dist/collection/components/viewer-grid/components/main-panel.js.map +1 -1
- package/dist/collection/components/viewer-grid/components/sizing-buttons.js +11 -1
- package/dist/collection/components/viewer-grid/components/sizing-buttons.js.map +1 -1
- package/dist/components/document-component.js +24 -12
- package/dist/components/document-component.js.map +1 -1
- package/dist/components/dso-image-overlay.js +1 -122
- package/dist/components/dso-image-overlay.js.map +1 -1
- package/dist/components/dso-list-button.js +1 -1
- package/dist/components/dso-list-button.js.map +1 -1
- package/dist/components/dso-table.js +1 -109
- package/dist/components/dso-table.js.map +1 -1
- package/dist/components/dso-viewer-grid.js +21 -18
- package/dist/components/dso-viewer-grid.js.map +1 -1
- package/dist/components/dsot-document-component-demo.js +34 -22
- package/dist/components/dsot-document-component-demo.js.map +1 -1
- package/dist/components/expandable.js +1 -1
- package/dist/components/expandable.js.map +1 -1
- package/dist/{esm/dso-image-overlay.entry.js → components/image-overlay.js} +35 -12
- package/dist/components/image-overlay.js.map +1 -0
- package/dist/components/ozon-content.js +25 -1
- package/dist/components/ozon-content.js.map +1 -1
- package/dist/components/selectable.js +2 -2
- package/dist/components/selectable.js.map +1 -1
- package/dist/{esm/dso-table.entry.js → components/table.js} +38 -13
- package/dist/{cjs/dso-table.cjs.entry.js.map → components/table.js.map} +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-4239e3d6.entry.js → p-0c156f79.entry.js} +2 -2
- package/dist/dso-toolkit/{p-4239e3d6.entry.js.map → p-0c156f79.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-5a47a86e.entry.js +2 -0
- package/dist/dso-toolkit/{p-caf4d880.entry.js.map → p-5a47a86e.entry.js.map} +1 -1
- package/dist/dso-toolkit/p-938f47d3.entry.js +2 -0
- package/dist/dso-toolkit/p-938f47d3.entry.js.map +1 -0
- package/dist/dso-toolkit/p-ae3e01c4.entry.js +2 -0
- package/dist/dso-toolkit/p-ae3e01c4.entry.js.map +1 -0
- package/dist/dso-toolkit/p-e88590a7.entry.js +2 -0
- package/dist/dso-toolkit/p-e88590a7.entry.js.map +1 -0
- package/dist/esm/{dso-alert_5.entry.js → dso-alert_7.entry.js} +179 -3
- package/dist/esm/dso-alert_7.entry.js.map +1 -0
- package/dist/esm/dso-expandable.entry.js +1 -1
- package/dist/esm/dso-expandable.entry.js.map +1 -1
- package/dist/esm/dso-info_2.entry.js +2 -2
- package/dist/esm/dso-info_2.entry.js.map +1 -1
- package/dist/esm/dso-list-button.entry.js +1 -1
- package/dist/esm/dso-list-button.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +21 -18
- package/dist/esm/dso-viewer-grid.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/selectable/selectable.d.ts +5 -0
- package/dist/types/components/viewer-grid/components/sizing-buttons.d.ts +1 -0
- package/package.json +2 -2
- package/dist/cjs/dso-alert_5.cjs.entry.js.map +0 -1
- package/dist/cjs/dso-image-overlay.cjs.entry.js +0 -107
- package/dist/cjs/dso-image-overlay.cjs.entry.js.map +0 -1
- package/dist/cjs/dso-table.cjs.entry.js +0 -92
- package/dist/dso-toolkit/p-2719a53a.entry.js +0 -2
- package/dist/dso-toolkit/p-2719a53a.entry.js.map +0 -1
- package/dist/dso-toolkit/p-753b5aa8.entry.js +0 -2
- package/dist/dso-toolkit/p-753b5aa8.entry.js.map +0 -1
- package/dist/dso-toolkit/p-a91673a9.entry.js +0 -2
- package/dist/dso-toolkit/p-a91673a9.entry.js.map +0 -1
- package/dist/dso-toolkit/p-ab1f0511.entry.js +0 -2
- package/dist/dso-toolkit/p-ab1f0511.entry.js.map +0 -1
- package/dist/dso-toolkit/p-caf4d880.entry.js +0 -2
- package/dist/dso-toolkit/p-cbeb00cc.entry.js +0 -2
- package/dist/dso-toolkit/p-cbeb00cc.entry.js.map +0 -1
- package/dist/esm/dso-alert_5.entry.js.map +0 -1
- package/dist/esm/dso-image-overlay.entry.js.map +0 -1
- 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-
|
|
1359
|
+
//# sourceMappingURL=dso-alert_7.cjs.entry.js.map
|