@dso-toolkit/core 33.3.0 → 34.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dso-alert.cjs.entry.js +1 -1
- package/dist/cjs/dso-attachments-counter.cjs.entry.js +2 -2
- package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
- package/dist/cjs/dso-badge.cjs.entry.js +1 -1
- package/dist/cjs/dso-banner.cjs.entry.js +1 -1
- package/dist/cjs/dso-date-picker.cjs.entry.js +48 -26
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +4 -228
- package/dist/cjs/dso-header.cjs.entry.js +2 -2
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
- package/dist/cjs/dso-highlight-box.cjs.entry.js +1 -1
- package/dist/cjs/dso-icon.cjs.entry.js +1 -1
- package/dist/cjs/dso-info-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-info_2.cjs.entry.js +5 -2
- package/dist/cjs/dso-label.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +18 -3
- package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
- package/dist/cjs/dso-map-overlays.cjs.entry.js +18 -3
- package/dist/cjs/dso-ozon-content.cjs.entry.js +1 -1
- package/dist/cjs/dso-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/dso-progress-indicator.cjs.entry.js +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +2 -2
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +2 -2
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +815 -0
- package/dist/cjs/{index-fcdfdd38.js → index-5ea63531.js} +26 -2
- package/dist/cjs/index.esm-2ac7081c.js +267 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/alert/alert.css +0 -3
- package/dist/collection/components/anchor/anchor.template.js +17 -0
- package/dist/collection/components/attachments-counter/attachments-counter.css +0 -4
- package/dist/collection/components/autosuggest/autosuggest.css +0 -3
- package/dist/collection/components/badge/badge.css +0 -3
- package/dist/collection/components/banner/banner.css +0 -3
- package/dist/collection/components/button/button.template.js +48 -0
- package/dist/collection/components/context/context.template.js +42 -0
- package/dist/collection/components/date-picker/date-picker.css +3 -5
- package/dist/collection/components/date-picker/date-picker.js +47 -25
- package/dist/collection/components/date-picker/date-picker.template.js +2 -1
- package/dist/collection/components/definition-list/definition-list.template.js +36 -0
- package/dist/collection/components/dropdown-menu/dropdown-menu.css +0 -3
- package/dist/collection/components/header/header.css +21 -19
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.css +0 -3
- package/dist/collection/components/highlight-box/highlight-box.css +0 -3
- package/dist/collection/components/icon/icon.css +0 -4
- package/dist/collection/components/info/info.css +21 -4
- package/dist/collection/components/info-button/info-button.css +0 -3
- package/dist/collection/components/label/label.css +0 -3
- package/dist/collection/components/label-group/label-group.template.js +7 -0
- package/dist/collection/components/list/list.template.js +37 -0
- package/dist/collection/components/map-base-layers/map-base-layers.css +4 -3
- package/dist/collection/components/map-base-layers/map-base-layers.js +20 -1
- package/dist/collection/components/map-controls/map-controls.css +12 -3
- package/dist/collection/components/map-controls/map-controls.template.js +11 -16
- package/dist/collection/components/map-overlays/map-overlays.css +4 -3
- package/dist/collection/components/map-overlays/map-overlays.js +20 -1
- package/dist/collection/components/ozon-content/ozon-content.css +0 -3
- package/dist/collection/components/progress-bar/progress-bar.css +0 -3
- package/dist/collection/components/progress-indicator/progress-indicator.css +0 -3
- package/dist/collection/components/selectable/selectable.css +0 -3
- package/dist/collection/components/selectable/selectable.js +25 -1
- package/dist/collection/components/toggletip/toggletip.css +0 -3
- package/dist/collection/components/tooltip/tooltip.css +0 -3
- package/dist/collection/components/tree-view/tree-view.css +3 -3
- package/dist/collection/components/viewer-grid/viewer-grid-document-header.template.js +39 -0
- package/dist/collection/components/viewer-grid/viewer-grid-document-list-item.template.js +19 -0
- package/dist/collection/components/viewer-grid/viewer-grid-filterblok.template.js +28 -0
- package/dist/collection/components/viewer-grid/viewer-grid-filterpanel-buttons.js +7 -0
- package/dist/collection/components/viewer-grid/viewer-grid.css +706 -0
- package/dist/collection/components/viewer-grid/viewer-grid.js +218 -0
- package/dist/collection/components/viewer-grid/viewer-grid.template.js +27 -0
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +938 -36
- package/dist/dso-toolkit/dso-toolkit.css +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/{p-75233655.entry.js → p-1fefbf8c.entry.js} +1 -1
- package/dist/dso-toolkit/{p-a52d3623.entry.js → p-20856f91.entry.js} +1 -1
- package/dist/dso-toolkit/{p-262858dd.entry.js → p-2b6a3dfa.entry.js} +1 -1
- package/dist/dso-toolkit/{p-be5682cc.entry.js → p-348414bf.entry.js} +1 -1
- package/dist/dso-toolkit/{p-984551a8.entry.js → p-3b493a2c.entry.js} +1 -1
- package/dist/dso-toolkit/p-3c4dbd89.entry.js +1 -0
- package/dist/dso-toolkit/{p-0a08ac9f.entry.js → p-4e573fc5.entry.js} +1 -1
- package/dist/dso-toolkit/{p-c9c1bc8f.entry.js → p-5037944e.entry.js} +1 -1
- package/dist/dso-toolkit/p-50b63cf4.entry.js +1 -0
- package/dist/dso-toolkit/{p-ff767c21.entry.js → p-88bc5873.entry.js} +1 -1
- package/dist/dso-toolkit/p-8b6e3abc.entry.js +1 -0
- package/dist/dso-toolkit/p-8bf3a60e.js +5 -0
- package/dist/dso-toolkit/p-94b79e43.entry.js +1 -0
- package/dist/dso-toolkit/{p-83f166b3.entry.js → p-94dffa65.entry.js} +1 -1
- package/dist/dso-toolkit/{p-b07991b9.entry.js → p-951f5872.entry.js} +1 -1
- package/dist/dso-toolkit/{p-da3be034.entry.js → p-a7306b7b.entry.js} +1 -1
- package/dist/dso-toolkit/p-ad2210ad.entry.js +1 -0
- package/dist/dso-toolkit/p-ad540748.entry.js +1 -0
- package/dist/dso-toolkit/{p-b5b946de.entry.js → p-bc14cafd.entry.js} +1 -1
- package/dist/dso-toolkit/{p-4a78a31b.entry.js → p-c54ecae1.entry.js} +1 -1
- package/dist/dso-toolkit/{p-72e4484a.entry.js → p-c95108fe.entry.js} +1 -1
- package/dist/dso-toolkit/{p-e814d644.entry.js → p-daa1e29d.entry.js} +1 -1
- package/dist/dso-toolkit/p-dad72605.js +1 -0
- package/dist/dso-toolkit/{p-2e7d535c.entry.js → p-dc86d830.entry.js} +1 -1
- package/dist/dso-toolkit/p-de3ab027.entry.js +5 -0
- package/dist/dso-toolkit/{p-19de4cc7.entry.js → p-f0b67246.entry.js} +1 -1
- package/dist/esm/dso-alert.entry.js +1 -1
- package/dist/esm/dso-attachments-counter.entry.js +2 -2
- package/dist/esm/dso-autosuggest.entry.js +1 -1
- package/dist/esm/dso-badge.entry.js +1 -1
- package/dist/esm/dso-banner.entry.js +1 -1
- package/dist/esm/dso-date-picker.entry.js +48 -26
- package/dist/esm/dso-dropdown-menu.entry.js +2 -226
- package/dist/esm/dso-header.entry.js +2 -2
- package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
- package/dist/esm/dso-highlight-box.entry.js +1 -1
- package/dist/esm/dso-icon.entry.js +1 -1
- package/dist/esm/dso-info-button.entry.js +1 -1
- package/dist/esm/dso-info_2.entry.js +5 -2
- package/dist/esm/dso-label.entry.js +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +18 -3
- package/dist/esm/dso-map-controls.entry.js +2 -2
- package/dist/esm/dso-map-overlays.entry.js +18 -3
- package/dist/esm/dso-ozon-content.entry.js +1 -1
- package/dist/esm/dso-progress-bar.entry.js +1 -1
- package/dist/esm/dso-progress-indicator.entry.js +1 -1
- package/dist/esm/dso-toggletip.entry.js +1 -1
- package/dist/esm/dso-toolkit.js +2 -2
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/dso-tree-view.entry.js +2 -2
- package/dist/esm/dso-viewer-grid.entry.js +811 -0
- package/dist/esm/{index-61410be2.js → index-d54cae76.js} +26 -2
- package/dist/esm/index.esm-a1362957.js +262 -0
- package/dist/esm/loader.js +2 -2
- package/dist/types/components/anchor/anchor.template.d.ts +2 -0
- package/dist/types/components/button/button.template.d.ts +2 -0
- package/dist/types/components/context/context.template.d.ts +3 -0
- package/dist/types/components/date-picker/date-picker.d.ts +3 -1
- package/dist/types/components/date-picker/date-picker.template.d.ts +1 -1
- package/dist/types/components/definition-list/definition-list.template.d.ts +3 -0
- package/dist/types/components/label-group/label-group.template.d.ts +2 -0
- package/dist/types/components/list/list.template.d.ts +3 -0
- package/dist/types/components/map-base-layers/map-base-layers.d.ts +7 -2
- package/dist/types/components/map-base-layers/map-base-layers.interfaces.d.ts +1 -0
- package/dist/types/components/map-overlays/map-overlays.d.ts +7 -2
- package/dist/types/components/map-overlays/map-overlays.interfaces.d.ts +1 -0
- package/dist/types/components/selectable/selectable.d.ts +1 -0
- package/dist/types/components/viewer-grid/viewer-grid-document-header.template.d.ts +3 -0
- package/dist/types/components/viewer-grid/viewer-grid-document-list-item.template.d.ts +3 -0
- package/dist/types/components/viewer-grid/viewer-grid-filterblok.template.d.ts +3 -0
- package/dist/types/components/viewer-grid/viewer-grid-filterpanel-buttons.d.ts +6 -0
- package/dist/types/components/viewer-grid/viewer-grid.d.ts +33 -0
- package/dist/types/components/viewer-grid/viewer-grid.template.d.ts +3 -0
- package/dist/types/components.d.ts +22 -0
- package/package.json +2 -1
- package/dist/dso-toolkit/p-22bc904d.entry.js +0 -1
- package/dist/dso-toolkit/p-7a043467.entry.js +0 -1
- package/dist/dso-toolkit/p-99b93d2e.entry.js +0 -5
- package/dist/dso-toolkit/p-a40eeb32.js +0 -1
- package/dist/dso-toolkit/p-affe82e6.entry.js +0 -1
- package/dist/dso-toolkit/p-b3e6d377.entry.js +0 -1
- package/dist/dso-toolkit/p-ec8b74f7.entry.js +0 -1
|
@@ -66,7 +66,7 @@ Alert.statusMap = new Map([
|
|
|
66
66
|
['danger', 'Fout']
|
|
67
67
|
]);
|
|
68
68
|
|
|
69
|
-
const attachmentsCounterCss = ":host{display:inline-block;--di-paperclip-grijs:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\");--di-paperclip-wit:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\")}*,*::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-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap
|
|
69
|
+
const attachmentsCounterCss = ":host{display:inline-block;--di-paperclip-grijs:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\");--di-paperclip-wit:url(\"data:image/svg+xml,%3csvg id='paperclip' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M21.88%2c8.94%2c10%2c20.6A4.63%2c4.63%2c0%2c0%2c1%2c6.62%2c22h0a5.78%2c5.78%2c0%2c0%2c1-4.05-1.81%2c5.34%2c5.34%2c0%2c0%2c1%2c0-7.56l9.3-9.26a1%2c1%2c0%2c1%2c1%2c1.48%2c1.48l-9.3%2c9.26h0a3.26%2c3.26%2c0%2c0%2c0%2c0%2c4.6%2c3.79%2c3.79%2c0%2c0%2c0%2c2.58%2c1.21%2c2.55%2c2.55%2c0%2c0%2c0%2c1.85-.81h0L20.4%2c7.46a1.83%2c1.83%2c0%2c0%2c0%2c.5-1.39%2c2.24%2c2.24%2c0%2c0%2c0-.63-1.44%2c1.85%2c1.85%2c0%2c0%2c0-2.61%2c0h0L7.43%2c14.73a.48.48%2c0%2c0%2c0%2c0%2c.67.48.48%2c0%2c0%2c0%2c.34.14.46.46%2c0%2c0%2c0%2c.34-.14l7.36-7.28a1%2c1%2c0%2c0%2c1%2c1.48%2c0A1%2c1%2c0%2c0%2c1%2c17%2c9.6h0L9.6%2c16.88h0a2.66%2c2.66%2c0%2c0%2c1-3.65%2c0%2c2.55%2c2.55%2c0%2c0%2c1%2c0-3.63L16.17%2c3.15a4%2c4%2c0%2c0%2c1%2c5.59%2c0A4.31%2c4.31%2c0%2c0%2c1%2c23%2c6%2c3.89%2c3.89%2c0%2c0%2c1%2c21.88%2c8.94Z'/%3e %3c/svg%3e\")}*,*::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-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}.dso-attachments::after{background:var(--dso-icon, var(--di-paperclip-grijs)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}";
|
|
70
70
|
|
|
71
71
|
let AttachmentsCounter = class extends HTMLElement {
|
|
72
72
|
constructor() {
|
|
@@ -745,7 +745,7 @@ const localization = {
|
|
|
745
745
|
]
|
|
746
746
|
};
|
|
747
747
|
|
|
748
|
-
const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left
|
|
748
|
+
const datePickerCss = ".sc-dso-date-picker-h{display:block}.dso-date.sc-dso-date-picker *.sc-dso-date-picker,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::before,.dso-date.sc-dso-date-picker *.sc-dso-date-picker::after{box-sizing:border-box}.dso-date.sc-dso-date-picker{box-sizing:border-box;color:#191919;display:block;font-family:\"Asap\", sans-serif;margin:0;position:relative;text-align:left;width:100%}.dso-date__input.sc-dso-date-picker{display:block;width:100%;height:40px;padding:6px 14px;font-size:16px;line-height:1.5;color:#191919;background-color:#fff;background-image:none;border:1px solid #275937;border-radius:4px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s}.dso-date__input.sc-dso-date-picker::-moz-placeholder{color:#666;opacity:1}.dso-date__input.sc-dso-date-picker:-ms-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-webkit-input-placeholder{color:#666}.dso-date__input.sc-dso-date-picker::-ms-expand{background-color:transparent;border:0}.dso-date__input.sc-dso-date-picker:focus{border-color:#275937;outline:0;box-shadow:inset 0 0 0 1px #275937}.dso-date__input[disabled].sc-dso-date-picker,.dso-date__input[readonly].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{background-color:#fff;opacity:1}.dso-date__input[disabled].sc-dso-date-picker,fieldset[disabled].sc-dso-date-picker .dso-date__input.sc-dso-date-picker{cursor:default}.dso-date__input[disabled].sc-dso-date-picker{border-color:#e5e5e5;color:#999}.dso-date__input[readonly].sc-dso-date-picker{border-width:1px}.dso-date__input[type=text].sc-dso-date-picker{line-height:40px}.dso-date__input[size].sc-dso-date-picker{width:auto}.dso-date__toggle.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;-webkit-user-select:none;align-items:center;appearance:none;background:transparent;border:0;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;color:#39870c;cursor:pointer;display:flex;height:38px;justify-content:center;padding:0;position:absolute;right:0;transform:translateY(-50%);top:50%;user-select:none;width:38px;z-index:2}.dso-date__toggle.sc-dso-date-picker:disabled{color:#afcf9d;cursor:pointer}.dso-date__dialog.sc-dso-date-picker{border-width:1px;display:flex;right:0;min-width:320px;opacity:0;position:absolute;top:100%;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;visibility:hidden;will-change:transform, opacity, visibility;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog.sc-dso-date-picker{background:rgba(25, 25, 25, 0.5);bottom:0;position:fixed;left:0;right:0;top:0;transform:translateZ(0);transform-origin:bottom center}}.dso-date__dialog.is-left.sc-dso-date-picker{left:-11px;right:auto;width:auto}.dso-date__dialog.is-active.sc-dso-date-picker{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.dso-date__dialog-content.sc-dso-date-picker{background:#fff;border:1px solid rgba(0, 0, 0, 0.1);border-radius:4px;box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);margin-left:auto;margin-right:-1px;margin-top:8px;max-width:310px;min-width:290px;padding:16px;position:relative;transform:none;width:100%;z-index:600}@media (max-width: 35.9375em){.dso-date__dialog-content.sc-dso-date-picker{border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;bottom:0;left:0;margin:0;max-width:none;min-height:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;visibility:hidden;will-change:transform, opacity, visibility}.is-active.sc-dso-date-picker .dso-date__dialog-content.sc-dso-date-picker{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}}.dso-date__table.sc-dso-date-picker{border-collapse:collapse;border-spacing:0;color:#191919;font-size:1rem;font-weight:400;line-height:1.25;min-width:280px;table-layout:fixed;text-align:center;width:100%}.dso-date__table-header.sc-dso-date-picker{font-size:0.875em;font-weight:600;height:36px;line-height:36px;text-decoration:none;text-transform:uppercase}.dso-date__cell.sc-dso-date-picker{height:40px;padding:1px;text-align:center;width:40px}.dso-date__day.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;box-shadow:0 0 0 1px transparent;color:#191919;cursor:pointer;display:inline-block;font-family:\"Asap\", sans-serif;font-variant-numeric:tabular-nums;font-weight:400;height:38px;line-height:0;padding:0;position:relative;text-align:center;vertical-align:middle;width:38px;z-index:1}.dso-date__day.is-today.sc-dso-date-picker{background:transparent;height:36px;box-shadow:0 0 0 1px #39870c;width:36px}.dso-date__day.sc-dso-date-picker:hover,.dso-date__day.sc-dso-date-picker:active{background:#39870c;color:#fff}.dso-date__day.sc-dso-date-picker:focus{background:transparent;box-shadow:0 0 0 2px #275937;color:#191919;height:34px;outline:0;width:34px}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker{background:#39870c;color:#fff}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus{background:transparent}[aria-selected=true].sc-dso-date-picker .dso-date__day.sc-dso-date-picker:focus span[aria-hidden=true].sc-dso-date-picker{background:#39870c;border:1px solid #fff;line-height:32px}.dso-date__day.is-outside.sc-dso-date-picker{background:#f2f2f2;box-shadow:none;color:#666;cursor:default;pointer-events:none}.dso-date__day.is-disabled.sc-dso-date-picker{background:#fff;cursor:default}.dso-date__day.is-disabled.sc-dso-date-picker:hover{color:#666}.dso-date__day.sc-dso-date-picker span[aria-hidden=true].sc-dso-date-picker{border-radius:50%;display:inline-block;height:34px;line-height:34px;width:34px}.dso-date__header.sc-dso-date-picker{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;width:100%}.dso-date__header.sc-dso-date-picker span.sc-dso-date-picker{font-size:0.875rem}.dso-date__nav.sc-dso-date-picker{white-space:nowrap}.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:transparent;border:1px solid #39870c;border-radius:4px;box-sizing:border-box;color:#39870c;cursor:pointer;display:inline-flex;font-size:1em;height:32px;justify-content:center;margin-left:8px;padding:0;width:32px}@media (max-width: 35.9375em){.dso-date__prev.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker{height:40px;width:40px}}.dso-date__prev.sc-dso-date-picker:hover,.dso-date__prev.sc-dso-date-picker:active,.dso-date__next.sc-dso-date-picker:hover,.dso-date__next.sc-dso-date-picker:active{background-color:#39870c;color:#fff}.dso-date__prev.sc-dso-date-picker:focus,.dso-date__next.sc-dso-date-picker:focus{background:transparent;color:#39870c}.dso-date__prev.sc-dso-date-picker:disabled,.dso-date__prev.sc-dso-date-picker:disabled:hover,.dso-date__next.sc-dso-date-picker:disabled,.dso-date__next.sc-dso-date-picker:disabled:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d;opacity:1}.dso-date__prev.sc-dso-date-picker svg.sc-dso-date-picker,.dso-date__next.sc-dso-date-picker svg.sc-dso-date-picker{margin:0 auto}.dso-date__select.sc-dso-date-picker{display:inline-flex;height:28px;line-height:28px;position:relative}.dso-date__select.sc-dso-date-picker span.sc-dso-date-picker{margin-right:4px}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker{color:#275937;cursor:pointer;font-size:1rem;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:focus+.dso-date__select-label.sc-dso-date-picker{box-shadow:0 0 0 2px #275937}.dso-date__select.sc-dso-date-picker select.sc-dso-date-picker:disabled{color:#afcf9d}.dso-date__select-label.sc-dso-date-picker{align-items:center;border-radius:4px;color:#39870c;display:flex;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.dso-date__select-label.sc-dso-date-picker span.sc-dso-date-picker{font-size:1.25rem;font-weight:600;line-height:1.25}.dso-date__select-label.sc-dso-date-picker svg.sc-dso-date-picker{width:16px;height:16px}.dso-date__mobile.sc-dso-date-picker{align-items:center;border-bottom:1px solid rgba(0, 0, 0, 0.12);display:flex;font-size:1em;justify-content:space-between;margin-bottom:20px;margin-left:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;width:120%}@media (min-width: 36em){.dso-date__mobile.sc-dso-date-picker{border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-16px;top:-16px;width:auto}}.dso-date__mobile-heading.sc-dso-date-picker{display:inline-block;font-weight:600;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.dso-date__mobile-heading.sc-dso-date-picker{display:none}}.dso-date__close.sc-dso-date-picker{-webkit-appearance:none;align-items:center;appearance:none;background-color:#fff;border:0;border-radius:50%;color:#39870c;cursor:pointer;display:flex;font-size:1em;height:32px;justify-content:center;margin-right:-4px;padding:0;width:32px}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker{margin-right:0;opacity:0}}.dso-date__close.sc-dso-date-picker:focus{box-shadow:0 0 0 2px #275937;outline:none}@media (min-width: 36em){.dso-date__close.sc-dso-date-picker:focus{opacity:1}}.dso-date__vhidden.sc-dso-date-picker{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
|
|
749
749
|
|
|
750
750
|
function range(from, to) {
|
|
751
751
|
var result = [];
|
|
@@ -767,7 +767,7 @@ const keyCode = {
|
|
|
767
767
|
RIGHT: 39,
|
|
768
768
|
DOWN: 40,
|
|
769
769
|
};
|
|
770
|
-
const DISALLOWED_CHARACTERS = /[^0-9
|
|
770
|
+
const DISALLOWED_CHARACTERS = /[^0-9\-]+/g;
|
|
771
771
|
const TRANSITION_MS = 300;
|
|
772
772
|
let DsoDatePicker$1 = class extends HTMLElement {
|
|
773
773
|
constructor() {
|
|
@@ -980,7 +980,49 @@ let DsoDatePicker$1 = class extends HTMLElement {
|
|
|
980
980
|
};
|
|
981
981
|
this.handleInputChange = (e) => {
|
|
982
982
|
const target = e.target;
|
|
983
|
-
this.setValue(target.value
|
|
983
|
+
this.setValue(target.value);
|
|
984
|
+
};
|
|
985
|
+
this.handleKeyPress = (e) => {
|
|
986
|
+
if (e.key.search(DISALLOWED_CHARACTERS) > -1) {
|
|
987
|
+
e.preventDefault();
|
|
988
|
+
}
|
|
989
|
+
};
|
|
990
|
+
this.prepareEvent = (value) => {
|
|
991
|
+
var event = {
|
|
992
|
+
component: "dso-date-picker",
|
|
993
|
+
value: "",
|
|
994
|
+
valueAsDate: undefined
|
|
995
|
+
};
|
|
996
|
+
if (value instanceof Date) {
|
|
997
|
+
event.valueAsDate = value;
|
|
998
|
+
}
|
|
999
|
+
else {
|
|
1000
|
+
event.value = value;
|
|
1001
|
+
event.valueAsDate = parseDutchDate(value);
|
|
1002
|
+
}
|
|
1003
|
+
if (event.valueAsDate) {
|
|
1004
|
+
event.value = printDutchDate(event.valueAsDate);
|
|
1005
|
+
}
|
|
1006
|
+
if (!event.valueAsDate && this.required) {
|
|
1007
|
+
event.error = "required";
|
|
1008
|
+
}
|
|
1009
|
+
if (event.value && !event.valueAsDate) {
|
|
1010
|
+
event.error = "invalid";
|
|
1011
|
+
}
|
|
1012
|
+
if (event.valueAsDate && (this.min || this.max)) {
|
|
1013
|
+
const min = parseDutchDate(this.min);
|
|
1014
|
+
const max = parseDutchDate(this.max);
|
|
1015
|
+
const clampValue = clamp(event.valueAsDate, min, max);
|
|
1016
|
+
if (clampValue !== event.valueAsDate && clampValue === min) {
|
|
1017
|
+
event.valueAsDate = undefined;
|
|
1018
|
+
event.error = "min-range";
|
|
1019
|
+
}
|
|
1020
|
+
else if (clampValue !== event.valueAsDate && clampValue === max) {
|
|
1021
|
+
event.valueAsDate = undefined;
|
|
1022
|
+
event.error = "max-range";
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1025
|
+
return event;
|
|
984
1026
|
};
|
|
985
1027
|
this.processFocusedDayNode = (element) => {
|
|
986
1028
|
this.focusedDayNode = element;
|
|
@@ -1072,27 +1114,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
|
|
|
1072
1114
|
this.focusedDay = clamp(day, parseDutchDate(this.min), parseDutchDate(this.max));
|
|
1073
1115
|
}
|
|
1074
1116
|
setValue(value) {
|
|
1075
|
-
|
|
1076
|
-
component: "dso-date-picker",
|
|
1077
|
-
value: "",
|
|
1078
|
-
valueAsDate: undefined
|
|
1079
|
-
};
|
|
1080
|
-
if (value instanceof Date) {
|
|
1081
|
-
event.valueAsDate = value;
|
|
1082
|
-
}
|
|
1083
|
-
else {
|
|
1084
|
-
event.value = value;
|
|
1085
|
-
event.valueAsDate = parseDutchDate(value);
|
|
1086
|
-
}
|
|
1087
|
-
if (event.valueAsDate) {
|
|
1088
|
-
event.value = printDutchDate(event.valueAsDate);
|
|
1089
|
-
}
|
|
1090
|
-
if (!event.valueAsDate && this.required) {
|
|
1091
|
-
event.error = "required";
|
|
1092
|
-
}
|
|
1093
|
-
if (event.value && !event.valueAsDate) {
|
|
1094
|
-
event.error = "invalid";
|
|
1095
|
-
}
|
|
1117
|
+
const event = this.prepareEvent(value);
|
|
1096
1118
|
this.value = event.value;
|
|
1097
1119
|
this.dateChange.emit(event);
|
|
1098
1120
|
}
|
|
@@ -1127,7 +1149,7 @@ let DsoDatePicker$1 = class extends HTMLElement {
|
|
|
1127
1149
|
if (maxDate) {
|
|
1128
1150
|
maxYear = Math.min(maxYear, maxDate.getFullYear());
|
|
1129
1151
|
}
|
|
1130
|
-
return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
|
|
1152
|
+
return (h(Host, null, h("div", { class: "dso-date" }, h("div", { class: "dso-date__input-wrapper" }, h("input", { class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: this.role, required: this.required ? true : undefined, "aria-autocomplete": "none", onKeyPress: this.handleKeyPress, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: element => (this.datePickerInput = element) }), h("button", { type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: element => (this.datePickerButton = element) }, h("span", { class: "dso-date__toggle-icon" }, h("dso-icon", { icon: "calendar" })), h("span", { class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", null, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { class: {
|
|
1131
1153
|
"dso-date__dialog": true,
|
|
1132
1154
|
"is-left": this.direction === "left",
|
|
1133
1155
|
"is-active": this.open,
|
|
@@ -1362,6 +1384,42 @@ var tabbable = function tabbable(el, options) {
|
|
|
1362
1384
|
return tabbableNodes;
|
|
1363
1385
|
};
|
|
1364
1386
|
|
|
1387
|
+
var focusable = function focusable(el, options) {
|
|
1388
|
+
options = options || {};
|
|
1389
|
+
var candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
|
|
1390
|
+
return candidates;
|
|
1391
|
+
};
|
|
1392
|
+
|
|
1393
|
+
var isTabbable = function isTabbable(node, options) {
|
|
1394
|
+
options = options || {};
|
|
1395
|
+
|
|
1396
|
+
if (!node) {
|
|
1397
|
+
throw new Error('No node provided');
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
if (matches.call(node, candidateSelector) === false) {
|
|
1401
|
+
return false;
|
|
1402
|
+
}
|
|
1403
|
+
|
|
1404
|
+
return isNodeMatchingSelectorTabbable(options, node);
|
|
1405
|
+
};
|
|
1406
|
+
|
|
1407
|
+
var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
|
|
1408
|
+
|
|
1409
|
+
var isFocusable = function isFocusable(node, options) {
|
|
1410
|
+
options = options || {};
|
|
1411
|
+
|
|
1412
|
+
if (!node) {
|
|
1413
|
+
throw new Error('No node provided');
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
if (matches.call(node, focusableCandidateSelector) === false) {
|
|
1417
|
+
return false;
|
|
1418
|
+
}
|
|
1419
|
+
|
|
1420
|
+
return isNodeMatchingSelectorFocusable(options, node);
|
|
1421
|
+
};
|
|
1422
|
+
|
|
1365
1423
|
const dropdownMenuCss = ":host(:focus){outline:none}:host{--di-check-wit:url(\"data:image/svg+xml,%3csvg id='check' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z'/%3e %3c/svg%3e\");--di-chevron-down:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-down-wit:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-scampi:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23676cb0%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");--di-chevron-up-wit:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: white%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:inline-block;position:relative}";
|
|
1366
1424
|
|
|
1367
1425
|
let DropdownMenu = class extends HTMLElement {
|
|
@@ -1520,7 +1578,7 @@ let DropdownMenu = class extends HTMLElement {
|
|
|
1520
1578
|
static get style() { return dropdownMenuCss; }
|
|
1521
1579
|
};
|
|
1522
1580
|
|
|
1523
|
-
const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:\"\";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:1000}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap
|
|
1581
|
+
const headerCss = ":host{--di-chevron-down-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-down' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M12%2c16%2c5.29%2c9.63a.93.93%2c0%2c0%2c1%2c0-1.35%2c1%2c1%2c0%2c0%2c1%2c1.42%2c0l5.29%2c5%2c5.29-5a1%2c1%2c0%2c0%2c1%2c1.42%2c0%2c.91.91%2c0%2c0%2c1%2c0%2c1.34Z'/%3e %3c/svg%3e\");--di-chevron-up-bosgroen:url(\"data:image/svg+xml,%3csvg id='chevron-up' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M18%2c16a1%2c1%2c0%2c0%2c1-.71-.28l-5.29-5-5.29%2c5a1%2c1%2c0%2c0%2c1-1.42%2c0%2c.93.93%2c0%2c0%2c1%2c0-1.35L12%2c8l6.71%2c6.38a.91.91%2c0%2c0%2c1%2c0%2c1.34A1%2c1%2c0%2c0%2c1%2c18%2c16Z'/%3e %3c/svg%3e\");display:block}.dso-header{border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;padding:0 16px;position:relative}@media screen and (min-width: 768px){.dso-header{align-items:center}}@media screen and (max-width: 991px){.dso-header.use-drop-down{flex-wrap:nowrap}}.logo-container{display:flex;flex-wrap:wrap;padding-bottom:16px;padding-top:16px}@media screen and (max-width: 767px){.logo-container{max-width:200px}}.logo-container+.dropdown dso-dropdown-menu{position:static}@media screen and (min-width: 768px){.sub-logo{margin-left:24px}}@media screen and (max-width: 767px){.sub-logo{flex-basis:100%}}.login,.logout{margin-right:16px}.profile a,.logout a,.login a{text-decoration:none;color:#39870c;font-weight:600}.profile a:hover,.profile a:focus,.logout a:hover,.logout a:focus,.login a:hover,.login a:focus{text-decoration:none}.profile a:active,.logout a:active,.login a:active{text-decoration:underline}.dso-header-session{display:flex;margin-left:auto}.dso-header-session .profile a{margin-left:8px}.dso-header-session .profile+.logout{border-left:3px solid #ccc;margin-left:16px;padding-left:16px}.dso-navbar{flex-basis:100%}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn::after{content:\"\";display:inline-block;margin-left:8px}dso-dropdown-menu>.dso-primary::after,dso-dropdown-menu>.btn-primary::after{background:var(--dso-icon, var(--di-chevron-down-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}dso-dropdown-menu>.dso-secondary::after,dso-dropdown-menu>.btn-default::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}dso-dropdown-menu>.dso-secondary:hover::after,dso-dropdown-menu>.btn-default:hover::after{--dso-icon:var(--di-chevron-down-wit)}dso-dropdown-menu>.dso-tertiary::after,dso-dropdown-menu>.btn-link::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;position:relative;top:-2px}dso-dropdown-menu>.dso-tertiary:hover::after,dso-dropdown-menu>.btn-link:hover::after{--dso-icon:var(--di-chevron-down-scampi)}dso-dropdown-menu .dso-group-label{color:#999;font-size:0.875em;font-weight:400;margin:0;padding:4px 20px 2px;text-transform:uppercase}dso-dropdown-menu ul{margin:0;padding:0}dso-dropdown-menu ul:not(:last-child){border-bottom:1px solid #e5e5e5;margin-bottom:11px;padding-bottom:11px}dso-dropdown-menu .dso-dropdown-options{background-clip:padding-box;background-color:#fff;border-radius:4px;border:1px solid rgba(0, 0, 0, 0.15);box-shadow:0 8px 10px 1px rgba(0, 0, 0, 0.4);font-size:16px;margin:2px 0 0;min-width:160px;padding:5px 0;position:absolute;text-align:left;top:100%;z-index:1000}dso-dropdown-menu .dso-dropdown-options li{list-style:none}dso-dropdown-menu .dso-dropdown-options li a:visited{color:#191919}dso-dropdown-menu .dso-dropdown-options li a,dso-dropdown-menu .dso-dropdown-options li button{text-decoration:none;clear:both;color:#191919;display:block;font-weight:400;line-height:1.5;padding:3px 20px;text-decoration:none;white-space:nowrap}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li a:active,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus,dso-dropdown-menu .dso-dropdown-options li button:active{text-decoration:underline}dso-dropdown-menu .dso-dropdown-options li a:hover,dso-dropdown-menu .dso-dropdown-options li a:focus,dso-dropdown-menu .dso-dropdown-options li button:hover,dso-dropdown-menu .dso-dropdown-options li button:focus{background-color:#39870c;border-color:#39870c;color:#fff;text-decoration:none}dso-dropdown-menu .dso-dropdown-options li button{background-color:transparent;border:0;border-radius:0;text-align:inherit;width:100%}dso-dropdown-menu[dropdown-align=right] .dso-dropdown-options{right:0}dso-dropdown-menu[open]>.dso-primary::after,dso-dropdown-menu[open]>.btn-primary::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-secondary::after,dso-dropdown-menu[open]>.btn-default::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-secondary:hover::after,dso-dropdown-menu[open]>.btn-default:hover::after{--dso-icon:var(--di-chevron-up-wit)}dso-dropdown-menu[open]>.dso-tertiary::after,dso-dropdown-menu[open]>.btn-link::after{--dso-icon:var(--di-chevron-up)}dso-dropdown-menu[open]>.dso-tertiary:hover::after,dso-dropdown-menu[open]>.btn-link:hover::after{--dso-icon:var(--di-chevron-up-scampi)}dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em}dso-dropdown-menu[checkable] .dso-group-label{padding-left:40px}dso-dropdown-menu[checkable] li a,dso-dropdown-menu[checkable] li button{padding-left:40px}dso-dropdown-menu[checkable] li.dso-checked a:not(:focus),dso-dropdown-menu[checkable] li.dso-checked button:not(:focus){background-color:#39870c;border-color:#39870c;color:#fff}dso-dropdown-menu[checkable] li.dso-checked a::before,dso-dropdown-menu[checkable] li.dso-checked button::before{background:var(--dso-icon, var(--di-check-wit)) no-repeat;background-position:center;background-size:cover;height:24px;vertical-align:top;width:24px;content:\"\";display:block;float:left;margin-left:-32px;margin-right:8px}dso-dropdown-menu button{align-items:flex-end;background-color:transparent;border:0;display:flex;font-family:Asap, sans-serif;padding-right:32px}dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down-bosgroen)) no-repeat;background-position:center;background-size:cover;height:1.2em;vertical-align:top;width:1.2em;content:\"\";display:inline-block;margin-left:8px;position:absolute;right:0;top:50%;transform:translateY(-50%)}@media screen and (max-width: 767px){dso-dropdown-menu{top:12px}}dso-dropdown-menu .dso-dropdown-options{border:0;border-radius:0}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:320px}@media screen and (max-width: 991px){dso-dropdown-menu .dso-dropdown-options dso-dropdown-options ul{width:100%}}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a{color:#275937;font-size:1.25rem;padding:16px}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li a:hover{background-color:#fff;color:#275937;text-decoration:underline}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li.dso-active a{font-weight:600}dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li+li{border-top:1px solid #ccc}.dropdown{margin-left:auto}@media screen and (max-width: 767px){.dropdown dso-dropdown-menu{margin-top:28px}}.dropdown dso-dropdown-menu .dso-dropdown-options{left:0;right:0;top:100%}.dropdown dso-dropdown-menu[open] button::after{background:var(--dso-icon, var(--di-chevron-up)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dropdown dso-dropdown-menu button{color:#39870c;font-size:16px;font-weight:600;position:relative}.dropdown dso-dropdown-menu button:hover,.dropdown dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dropdown dso-dropdown-menu button::after{background:var(--dso-icon, var(--di-chevron-down)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.dso-nav{align-items:end;column-gap:32px;display:flex;list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.dso-nav>li{margin-bottom:4px}.dso-nav>li>a{display:block}.dso-nav>li>a,.dso-nav>li>a:hover,.dso-nav>li>a:focus,.dso-nav>li>a:visited{color:#275937}.dso-nav>li.dso-active,.dso-nav>li.is-active{margin-bottom:0}.dso-nav>li.dso-active>a,.dso-nav>li.is-active>a{border-bottom:4px solid #8b4a6a;font-weight:bold}.dso-nav.dso-nav-main>li>a{text-decoration:none;font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;white-space:nowrap}.dso-nav.dso-nav-main>li>a:hover,.dso-nav.dso-nav-main>li>a:focus,.dso-nav.dso-nav-main>li>a:active{text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options{top:calc(100% + 3px)}.dso-nav.dso-nav-main dso-dropdown-menu button{font-size:1.25em;line-height:1;margin-top:8px;padding:16px 0;align-items:center;color:#275937;padding-right:32px}.dso-nav.dso-nav-main dso-dropdown-menu button:hover,.dso-nav.dso-nav-main dso-dropdown-menu button:active{cursor:pointer;text-decoration:underline}.dso-nav.dso-nav-main dso-dropdown-menu button::after{top:auto;transform:none}.dso-nav.dso-nav-sub>li{display:inline-block}.dso-nav.dso-nav-sub>li>a{text-decoration:none;font-size:16px;margin-top:4px;padding:4px 8px 3px}.dso-nav.dso-nav-sub>li>a:hover,.dso-nav.dso-nav-sub>li>a:focus,.dso-nav.dso-nav-sub>li>a:active{text-decoration:underline}.dso-nav .menu-user-home{margin-left:auto}.dso-nav .menu-user-home dso-icon{height:1em;margin-right:8px;position:relative;top:-2px;width:1.2em}";
|
|
1524
1582
|
|
|
1525
1583
|
const minDesktopViewportWidth = 992;
|
|
1526
1584
|
let Header = class extends HTMLElement {
|
|
@@ -2272,7 +2330,7 @@ let Icon = class extends HTMLElement {
|
|
|
2272
2330
|
static get style() { return iconCss; }
|
|
2273
2331
|
};
|
|
2274
2332
|
|
|
2275
|
-
const infoCss = ":host{--di-times-
|
|
2333
|
+
const infoCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{--di-times-grijs90:url(\"data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e\");display:block;background-color:#f2f2f2;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host>button::before{background:var(--dso-icon, var(--di-times-grijs90)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:inline-block}:host(:not([active]):not([fixed])){display:none}*,*::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}";
|
|
2276
2334
|
|
|
2277
2335
|
let Info = class extends HTMLElement {
|
|
2278
2336
|
constructor() {
|
|
@@ -2329,7 +2387,7 @@ Label.statusMap = new Map([
|
|
|
2329
2387
|
['danger', 'Fout']
|
|
2330
2388
|
]);
|
|
2331
2389
|
|
|
2332
|
-
const mapBaseLayersCss = ":host{display:block}*,*::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}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}";
|
|
2390
|
+
const mapBaseLayersCss = ":host{display:block}*,*::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}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
|
|
2333
2391
|
|
|
2334
2392
|
let MapBaseLayers = class extends HTMLElement {
|
|
2335
2393
|
constructor() {
|
|
@@ -2337,17 +2395,32 @@ let MapBaseLayers = class extends HTMLElement {
|
|
|
2337
2395
|
this.__registerHost();
|
|
2338
2396
|
attachShadow(this);
|
|
2339
2397
|
this.baseLayerChange = createEvent(this, "baseLayerChange", 7);
|
|
2398
|
+
this.selectableRefs = {};
|
|
2340
2399
|
}
|
|
2341
2400
|
baseLayerChangeHandler(baseLayer) {
|
|
2342
2401
|
this.baseLayerChange.emit({ activeBaseLayer: baseLayer });
|
|
2343
2402
|
}
|
|
2403
|
+
componentDidRender() {
|
|
2404
|
+
this.baseLayers
|
|
2405
|
+
.filter(l => { var _a, _b; return !l.disabled && ((_b = (_a = this.previousBaselayers) === null || _a === void 0 ? void 0 : _a.find(p => p.id === l.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
|
|
2406
|
+
.forEach(o => {
|
|
2407
|
+
var _a;
|
|
2408
|
+
(_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
|
|
2409
|
+
});
|
|
2410
|
+
this.previousBaselayers = this.baseLayers;
|
|
2411
|
+
}
|
|
2344
2412
|
render() {
|
|
2345
|
-
|
|
2413
|
+
for (const ref in this.selectableRefs) {
|
|
2414
|
+
delete this.selectableRefs[ref];
|
|
2415
|
+
}
|
|
2416
|
+
return (h("fieldset", { class: "form-group dso-radios" }, h("legend", { class: "sr-only" }, "Achtergrond"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { class: "dso-field-container" }, this.baseLayers.map(baseLayer => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, ref: ref => this.selectableRefs[baseLayer.id] = ref, onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info
|
|
2417
|
+
? h("p", { slot: "info" }, baseLayer.info)
|
|
2418
|
+
: null))))));
|
|
2346
2419
|
}
|
|
2347
2420
|
static get style() { return mapBaseLayersCss; }
|
|
2348
2421
|
};
|
|
2349
2422
|
|
|
2350
|
-
const mapControlsCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}header,.content{padding:16px}header{border-bottom:1px solid #ccc;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}";
|
|
2423
|
+
const mapControlsCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}:host{background-color:#fff;border:1px solid #ccc;bottom:0;display:block;font-family:Asap, sans-serif;position:absolute;top:0;left:100%;transition:transform 300ms ease;width:300px}*,*::after,*::before{box-sizing:border-box}:host([open]){box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.3);transform:translateX(-100%)}:host([open]) #toggle-visibility-button{display:none}#toggle-visibility-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);font-weight:600;margin-right:16px;padding:8px 16px;white-space:nowrap;position:absolute;right:calc(100% + 56px);top:16px}#toggle-visibility-button:focus,#toggle-visibility-button:focus-visible{outline-offset:2px}#toggle-visibility-button:active{outline:0}#toggle-visibility-button.extern::after,#toggle-visibility-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#toggle-visibility-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#toggle-visibility-button:active{background-color:#275937;border-color:#275937;color:#fff}#toggle-visibility-button[disabled],#toggle-visibility-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#toggle-visibility-button.btn-sm{line-height:16px}#toggle-visibility-button.btn-sm dso-icon,#toggle-visibility-button.btn-sm svg.di,#toggle-visibility-button.btn-sm.extern::after,#toggle-visibility-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#toggle-visibility-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#toggle-visibility-button.download:hover::after{--dso-icon:var(--di-download-wit)}#toggle-visibility-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#toggle-visibility-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#toggle-visibility-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#toggle-visibility-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#toggle-visibility-button dso-icon,#toggle-visibility-button svg.di{margin-left:-8px;margin-right:8px}#toggle-visibility-button span+dso-icon,#toggle-visibility-button span+svg.di{margin-left:8px;margin-right:-8px}#toggle-visibility-button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons{border-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);display:flex;flex-wrap:wrap;flex:0 0;position:absolute;right:calc(100% + 16px);top:16px}#zoom-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;flex:0 0 100%;height:40px;min-width:auto;width:40px}#zoom-buttons button:focus,#zoom-buttons button:focus-visible{outline-offset:2px}#zoom-buttons button:active{outline:0}#zoom-buttons button.extern::after,#zoom-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#zoom-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}#zoom-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}#zoom-buttons button[disabled],#zoom-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}#zoom-buttons button.btn-sm{line-height:16px}#zoom-buttons button.btn-sm dso-icon,#zoom-buttons button.btn-sm svg.di,#zoom-buttons button.btn-sm.extern::after,#zoom-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}#zoom-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#zoom-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}#zoom-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#zoom-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#zoom-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}#zoom-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#zoom-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}#zoom-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}#zoom-buttons button+button{border-radius:0;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #ccc}#close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent;padding:0;position:absolute;right:16px;top:16px}#close-button:focus,#close-button:focus-visible{outline-offset:2px}#close-button:active{outline:0}#close-button.extern::after,#close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}#close-button[disabled]{color:#afcf9d}#close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}#close-button:not([disabled]):active{color:#676cb0}#close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}#close-button.extern::after,#close-button.download::after{position:relative;top:-2px}#close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}#close-button.download:not([disabled]):hover::after,#close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}#close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}#close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}#close-button.extern:not([disabled]):hover::after,#close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}#close-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}section{display:flex;flex-direction:column;height:100%}header,.content{padding:16px}header{border-bottom:1px solid #ccc;flex-grow:0;position:relative}header h2{color:#275937;font-family:\"Asap\", sans-serif;line-height:1;margin:0}.content{flex-grow:1;overflow-y:auto}";
|
|
2351
2424
|
|
|
2352
2425
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, privateMap) {
|
|
2353
2426
|
if (!privateMap.has(receiver)) {
|
|
@@ -2398,7 +2471,7 @@ let MapControls = class extends HTMLElement {
|
|
|
2398
2471
|
};
|
|
2399
2472
|
_closeButtonElement = new WeakMap(), _toggleButtonElement = new WeakMap();
|
|
2400
2473
|
|
|
2401
|
-
const mapOverlaysCss = ":host{display:block}*,*::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}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}";
|
|
2474
|
+
const mapOverlaysCss = ":host{display:block}*,*::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}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
|
|
2402
2475
|
|
|
2403
2476
|
let MapOverlays = class extends HTMLElement {
|
|
2404
2477
|
constructor() {
|
|
@@ -2406,13 +2479,28 @@ let MapOverlays = class extends HTMLElement {
|
|
|
2406
2479
|
this.__registerHost();
|
|
2407
2480
|
attachShadow(this);
|
|
2408
2481
|
this.toggleOverlay = createEvent(this, "toggleOverlay", 7);
|
|
2482
|
+
this.selectableRefs = {};
|
|
2409
2483
|
}
|
|
2410
2484
|
overlayChangeHandler(overlay, e) {
|
|
2411
2485
|
const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;
|
|
2412
2486
|
this.toggleOverlay.emit({ overlay, checked });
|
|
2413
2487
|
}
|
|
2488
|
+
componentDidRender() {
|
|
2489
|
+
this.overlays
|
|
2490
|
+
.filter(o => { var _a, _b; return !o.disabled && ((_b = (_a = this.previousOverlays) === null || _a === void 0 ? void 0 : _a.find(p => p.id === o.id)) === null || _b === void 0 ? void 0 : _b.disabled) === true; })
|
|
2491
|
+
.forEach(o => {
|
|
2492
|
+
var _a;
|
|
2493
|
+
(_a = this.selectableRefs[o.id]) === null || _a === void 0 ? void 0 : _a.toggleInfo(false);
|
|
2494
|
+
});
|
|
2495
|
+
this.previousOverlays = this.overlays;
|
|
2496
|
+
}
|
|
2414
2497
|
render() {
|
|
2415
|
-
|
|
2498
|
+
for (const ref in this.selectableRefs) {
|
|
2499
|
+
delete this.selectableRefs[ref];
|
|
2500
|
+
}
|
|
2501
|
+
return (h("fieldset", { class: "form-group dso-checkboxes" }, h("legend", { class: "sr-only" }, "Kaartlagen"), h("div", { class: "dso-label-container" }, h("span", { class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { class: "dso-field-container" }, this.overlays.map(overlay => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, ref: ref => this.selectableRefs[overlay.id] = ref, onDsoChange: e => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info
|
|
2502
|
+
? h("p", { slot: "info" }, overlay.info)
|
|
2503
|
+
: null))))));
|
|
2416
2504
|
}
|
|
2417
2505
|
static get style() { return mapOverlaysCss; }
|
|
2418
2506
|
};
|
|
@@ -2955,6 +3043,9 @@ let Selectable = class extends HTMLElement {
|
|
|
2955
3043
|
this.infoActive = false;
|
|
2956
3044
|
this.fallbackIdentifier = createIdentifier('DsoSelectable');
|
|
2957
3045
|
}
|
|
3046
|
+
async toggleInfo(active) {
|
|
3047
|
+
this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
|
|
3048
|
+
}
|
|
2958
3049
|
componentDidLoad() {
|
|
2959
3050
|
var _a;
|
|
2960
3051
|
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
@@ -5041,7 +5132,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
|
|
|
5041
5132
|
: h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
|
|
5042
5133
|
};
|
|
5043
5134
|
|
|
5044
|
-
const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content a,:host .tree-content a:visited{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::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}";
|
|
5135
|
+
const treeViewCss = ":host ul{list-style-type:none}:host ul[role=tree]{padding-left:0}:host li[role=treeitem]>ul{padding-left:1.5em}:host .tree-branch-control{cursor:pointer;display:inline-block;margin:8px 0;vertical-align:top}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;width:calc(100% - 24px)}:host .tree-content.active{font-weight:700}:host .tree-content.active:hover{text-decoration:underline}:host .tree-content.active a{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content a,:host .tree-content a:visited{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content dso-icon{font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::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}";
|
|
5045
5136
|
|
|
5046
5137
|
let TreeView = class extends HTMLElement {
|
|
5047
5138
|
constructor() {
|
|
@@ -5196,6 +5287,815 @@ let TreeView = class extends HTMLElement {
|
|
|
5196
5287
|
static get style() { return treeViewCss; }
|
|
5197
5288
|
};
|
|
5198
5289
|
|
|
5290
|
+
/*!
|
|
5291
|
+
* focus-trap 6.7.3
|
|
5292
|
+
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
|
|
5293
|
+
*/
|
|
5294
|
+
|
|
5295
|
+
function ownKeys(object, enumerableOnly) {
|
|
5296
|
+
var keys = Object.keys(object);
|
|
5297
|
+
|
|
5298
|
+
if (Object.getOwnPropertySymbols) {
|
|
5299
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
5300
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
5301
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
5302
|
+
})), keys.push.apply(keys, symbols);
|
|
5303
|
+
}
|
|
5304
|
+
|
|
5305
|
+
return keys;
|
|
5306
|
+
}
|
|
5307
|
+
|
|
5308
|
+
function _objectSpread2(target) {
|
|
5309
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
5310
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
5311
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
5312
|
+
_defineProperty(target, key, source[key]);
|
|
5313
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
5314
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
5315
|
+
});
|
|
5316
|
+
}
|
|
5317
|
+
|
|
5318
|
+
return target;
|
|
5319
|
+
}
|
|
5320
|
+
|
|
5321
|
+
function _defineProperty(obj, key, value) {
|
|
5322
|
+
if (key in obj) {
|
|
5323
|
+
Object.defineProperty(obj, key, {
|
|
5324
|
+
value: value,
|
|
5325
|
+
enumerable: true,
|
|
5326
|
+
configurable: true,
|
|
5327
|
+
writable: true
|
|
5328
|
+
});
|
|
5329
|
+
} else {
|
|
5330
|
+
obj[key] = value;
|
|
5331
|
+
}
|
|
5332
|
+
|
|
5333
|
+
return obj;
|
|
5334
|
+
}
|
|
5335
|
+
|
|
5336
|
+
var activeFocusTraps = function () {
|
|
5337
|
+
var trapQueue = [];
|
|
5338
|
+
return {
|
|
5339
|
+
activateTrap: function activateTrap(trap) {
|
|
5340
|
+
if (trapQueue.length > 0) {
|
|
5341
|
+
var activeTrap = trapQueue[trapQueue.length - 1];
|
|
5342
|
+
|
|
5343
|
+
if (activeTrap !== trap) {
|
|
5344
|
+
activeTrap.pause();
|
|
5345
|
+
}
|
|
5346
|
+
}
|
|
5347
|
+
|
|
5348
|
+
var trapIndex = trapQueue.indexOf(trap);
|
|
5349
|
+
|
|
5350
|
+
if (trapIndex === -1) {
|
|
5351
|
+
trapQueue.push(trap);
|
|
5352
|
+
} else {
|
|
5353
|
+
// move this existing trap to the front of the queue
|
|
5354
|
+
trapQueue.splice(trapIndex, 1);
|
|
5355
|
+
trapQueue.push(trap);
|
|
5356
|
+
}
|
|
5357
|
+
},
|
|
5358
|
+
deactivateTrap: function deactivateTrap(trap) {
|
|
5359
|
+
var trapIndex = trapQueue.indexOf(trap);
|
|
5360
|
+
|
|
5361
|
+
if (trapIndex !== -1) {
|
|
5362
|
+
trapQueue.splice(trapIndex, 1);
|
|
5363
|
+
}
|
|
5364
|
+
|
|
5365
|
+
if (trapQueue.length > 0) {
|
|
5366
|
+
trapQueue[trapQueue.length - 1].unpause();
|
|
5367
|
+
}
|
|
5368
|
+
}
|
|
5369
|
+
};
|
|
5370
|
+
}();
|
|
5371
|
+
|
|
5372
|
+
var isSelectableInput = function isSelectableInput(node) {
|
|
5373
|
+
return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
|
|
5374
|
+
};
|
|
5375
|
+
|
|
5376
|
+
var isEscapeEvent = function isEscapeEvent(e) {
|
|
5377
|
+
return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
|
|
5378
|
+
};
|
|
5379
|
+
|
|
5380
|
+
var isTabEvent = function isTabEvent(e) {
|
|
5381
|
+
return e.key === 'Tab' || e.keyCode === 9;
|
|
5382
|
+
};
|
|
5383
|
+
|
|
5384
|
+
var delay = function delay(fn) {
|
|
5385
|
+
return setTimeout(fn, 0);
|
|
5386
|
+
}; // Array.find/findIndex() are not supported on IE; this replicates enough
|
|
5387
|
+
// of Array.findIndex() for our needs
|
|
5388
|
+
|
|
5389
|
+
|
|
5390
|
+
var findIndex = function findIndex(arr, fn) {
|
|
5391
|
+
var idx = -1;
|
|
5392
|
+
arr.every(function (value, i) {
|
|
5393
|
+
if (fn(value)) {
|
|
5394
|
+
idx = i;
|
|
5395
|
+
return false; // break
|
|
5396
|
+
}
|
|
5397
|
+
|
|
5398
|
+
return true; // next
|
|
5399
|
+
});
|
|
5400
|
+
return idx;
|
|
5401
|
+
};
|
|
5402
|
+
/**
|
|
5403
|
+
* Get an option's value when it could be a plain value, or a handler that provides
|
|
5404
|
+
* the value.
|
|
5405
|
+
* @param {*} value Option's value to check.
|
|
5406
|
+
* @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.
|
|
5407
|
+
* @returns {*} The `value`, or the handler's returned value.
|
|
5408
|
+
*/
|
|
5409
|
+
|
|
5410
|
+
|
|
5411
|
+
var valueOrHandler = function valueOrHandler(value) {
|
|
5412
|
+
for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
5413
|
+
params[_key - 1] = arguments[_key];
|
|
5414
|
+
}
|
|
5415
|
+
|
|
5416
|
+
return typeof value === 'function' ? value.apply(void 0, params) : value;
|
|
5417
|
+
};
|
|
5418
|
+
|
|
5419
|
+
var getActualTarget = function getActualTarget(event) {
|
|
5420
|
+
// NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the
|
|
5421
|
+
// shadow host. However, event.target.composedPath() will be an array of
|
|
5422
|
+
// nodes "clicked" from inner-most (the actual element inside the shadow) to
|
|
5423
|
+
// outer-most (the host HTML document). If we have access to composedPath(),
|
|
5424
|
+
// then use its first element; otherwise, fall back to event.target (and
|
|
5425
|
+
// this only works for an _open_ shadow DOM; otherwise,
|
|
5426
|
+
// composedPath()[0] === event.target always).
|
|
5427
|
+
return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;
|
|
5428
|
+
};
|
|
5429
|
+
|
|
5430
|
+
var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
5431
|
+
// SSR: a live trap shouldn't be created in this type of environment so this
|
|
5432
|
+
// should be safe code to execute if the `document` option isn't specified
|
|
5433
|
+
var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
|
|
5434
|
+
|
|
5435
|
+
var config = _objectSpread2({
|
|
5436
|
+
returnFocusOnDeactivate: true,
|
|
5437
|
+
escapeDeactivates: true,
|
|
5438
|
+
delayInitialFocus: true
|
|
5439
|
+
}, userOptions);
|
|
5440
|
+
|
|
5441
|
+
var state = {
|
|
5442
|
+
// @type {Array<HTMLElement>}
|
|
5443
|
+
containers: [],
|
|
5444
|
+
// list of objects identifying the first and last tabbable nodes in all containers/groups in
|
|
5445
|
+
// the trap
|
|
5446
|
+
// NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
|
|
5447
|
+
// is active, but the trap should never get to a state where there isn't at least one group
|
|
5448
|
+
// with at least one tabbable node in it (that would lead to an error condition that would
|
|
5449
|
+
// result in an error being thrown)
|
|
5450
|
+
// @type {Array<{
|
|
5451
|
+
// container: HTMLElement,
|
|
5452
|
+
// firstTabbableNode: HTMLElement|null,
|
|
5453
|
+
// lastTabbableNode: HTMLElement|null,
|
|
5454
|
+
// nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
|
|
5455
|
+
// }>}
|
|
5456
|
+
tabbableGroups: [],
|
|
5457
|
+
nodeFocusedBeforeActivation: null,
|
|
5458
|
+
mostRecentlyFocusedNode: null,
|
|
5459
|
+
active: false,
|
|
5460
|
+
paused: false,
|
|
5461
|
+
// timer ID for when delayInitialFocus is true and initial focus in this trap
|
|
5462
|
+
// has been delayed during activation
|
|
5463
|
+
delayInitialFocusTimer: undefined
|
|
5464
|
+
};
|
|
5465
|
+
var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
|
|
5466
|
+
|
|
5467
|
+
var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {
|
|
5468
|
+
return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];
|
|
5469
|
+
};
|
|
5470
|
+
|
|
5471
|
+
var containersContain = function containersContain(element) {
|
|
5472
|
+
return !!(element && state.containers.some(function (container) {
|
|
5473
|
+
return container.contains(element);
|
|
5474
|
+
}));
|
|
5475
|
+
};
|
|
5476
|
+
/**
|
|
5477
|
+
* Gets the node for the given option, which is expected to be an option that
|
|
5478
|
+
* can be either a DOM node, a string that is a selector to get a node, `false`
|
|
5479
|
+
* (if a node is explicitly NOT given), or a function that returns any of these
|
|
5480
|
+
* values.
|
|
5481
|
+
* @param {string} optionName
|
|
5482
|
+
* @returns {undefined | false | HTMLElement | SVGElement} Returns
|
|
5483
|
+
* `undefined` if the option is not specified; `false` if the option
|
|
5484
|
+
* resolved to `false` (node explicitly not given); otherwise, the resolved
|
|
5485
|
+
* DOM node.
|
|
5486
|
+
* @throws {Error} If the option is set, not `false`, and is not, or does not
|
|
5487
|
+
* resolve to a node.
|
|
5488
|
+
*/
|
|
5489
|
+
|
|
5490
|
+
|
|
5491
|
+
var getNodeForOption = function getNodeForOption(optionName) {
|
|
5492
|
+
var optionValue = config[optionName];
|
|
5493
|
+
|
|
5494
|
+
if (typeof optionValue === 'function') {
|
|
5495
|
+
for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
5496
|
+
params[_key2 - 1] = arguments[_key2];
|
|
5497
|
+
}
|
|
5498
|
+
|
|
5499
|
+
optionValue = optionValue.apply(void 0, params);
|
|
5500
|
+
}
|
|
5501
|
+
|
|
5502
|
+
if (!optionValue) {
|
|
5503
|
+
if (optionValue === undefined || optionValue === false) {
|
|
5504
|
+
return optionValue;
|
|
5505
|
+
} // else, empty string (invalid), null (invalid), 0 (invalid)
|
|
5506
|
+
|
|
5507
|
+
|
|
5508
|
+
throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
|
|
5509
|
+
}
|
|
5510
|
+
|
|
5511
|
+
var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
|
|
5512
|
+
|
|
5513
|
+
if (typeof optionValue === 'string') {
|
|
5514
|
+
node = doc.querySelector(optionValue); // resolve to node, or null if fails
|
|
5515
|
+
|
|
5516
|
+
if (!node) {
|
|
5517
|
+
throw new Error("`".concat(optionName, "` as selector refers to no known node"));
|
|
5518
|
+
}
|
|
5519
|
+
}
|
|
5520
|
+
|
|
5521
|
+
return node;
|
|
5522
|
+
};
|
|
5523
|
+
|
|
5524
|
+
var getInitialFocusNode = function getInitialFocusNode() {
|
|
5525
|
+
var node = getNodeForOption('initialFocus'); // false explicitly indicates we want no initialFocus at all
|
|
5526
|
+
|
|
5527
|
+
if (node === false) {
|
|
5528
|
+
return false;
|
|
5529
|
+
}
|
|
5530
|
+
|
|
5531
|
+
if (node === undefined) {
|
|
5532
|
+
// option not specified: use fallback options
|
|
5533
|
+
if (containersContain(doc.activeElement)) {
|
|
5534
|
+
node = doc.activeElement;
|
|
5535
|
+
} else {
|
|
5536
|
+
var firstTabbableGroup = state.tabbableGroups[0];
|
|
5537
|
+
var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode; // NOTE: `fallbackFocus` option function cannot return `false` (not supported)
|
|
5538
|
+
|
|
5539
|
+
node = firstTabbableNode || getNodeForOption('fallbackFocus');
|
|
5540
|
+
}
|
|
5541
|
+
}
|
|
5542
|
+
|
|
5543
|
+
if (!node) {
|
|
5544
|
+
throw new Error('Your focus-trap needs to have at least one focusable element');
|
|
5545
|
+
}
|
|
5546
|
+
|
|
5547
|
+
return node;
|
|
5548
|
+
};
|
|
5549
|
+
|
|
5550
|
+
var updateTabbableNodes = function updateTabbableNodes() {
|
|
5551
|
+
state.tabbableGroups = state.containers.map(function (container) {
|
|
5552
|
+
var tabbableNodes = tabbable(container); // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
|
|
5553
|
+
// are a superset of tabbable nodes
|
|
5554
|
+
|
|
5555
|
+
var focusableNodes = focusable(container);
|
|
5556
|
+
|
|
5557
|
+
if (tabbableNodes.length > 0) {
|
|
5558
|
+
return {
|
|
5559
|
+
container: container,
|
|
5560
|
+
firstTabbableNode: tabbableNodes[0],
|
|
5561
|
+
lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
|
|
5562
|
+
|
|
5563
|
+
/**
|
|
5564
|
+
* Finds the __tabbable__ node that follows the given node in the specified direction,
|
|
5565
|
+
* in this container, if any.
|
|
5566
|
+
* @param {HTMLElement} node
|
|
5567
|
+
* @param {boolean} [forward] True if going in forward tab order; false if going
|
|
5568
|
+
* in reverse.
|
|
5569
|
+
* @returns {HTMLElement|undefined} The next tabbable node, if any.
|
|
5570
|
+
*/
|
|
5571
|
+
nextTabbableNode: function nextTabbableNode(node) {
|
|
5572
|
+
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
5573
|
+
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
|
|
5574
|
+
// from the DOM order), this __will not work__ because the list of focusableNodes,
|
|
5575
|
+
// while it contains tabbable nodes, does not sort its nodes in any order other
|
|
5576
|
+
// than DOM order, because it can't: Where would you place focusable (but not
|
|
5577
|
+
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
|
|
5578
|
+
// Support for positive tabindex is already broken and hard to manage (possibly
|
|
5579
|
+
// not supportable, TBD), so this isn't going to make things worse than they
|
|
5580
|
+
// already are, and at least makes things better for the majority of cases where
|
|
5581
|
+
// tabindex is either 0/unset or negative.
|
|
5582
|
+
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
|
|
5583
|
+
var nodeIdx = focusableNodes.findIndex(function (n) {
|
|
5584
|
+
return n === node;
|
|
5585
|
+
});
|
|
5586
|
+
|
|
5587
|
+
if (forward) {
|
|
5588
|
+
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
|
|
5589
|
+
return isTabbable(n);
|
|
5590
|
+
});
|
|
5591
|
+
}
|
|
5592
|
+
|
|
5593
|
+
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
|
|
5594
|
+
return isTabbable(n);
|
|
5595
|
+
});
|
|
5596
|
+
}
|
|
5597
|
+
};
|
|
5598
|
+
}
|
|
5599
|
+
|
|
5600
|
+
return undefined;
|
|
5601
|
+
}).filter(function (group) {
|
|
5602
|
+
return !!group;
|
|
5603
|
+
}); // remove groups with no tabbable nodes
|
|
5604
|
+
// throw if no groups have tabbable nodes and we don't have a fallback focus node either
|
|
5605
|
+
|
|
5606
|
+
if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option
|
|
5607
|
+
) {
|
|
5608
|
+
throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
|
|
5609
|
+
}
|
|
5610
|
+
};
|
|
5611
|
+
|
|
5612
|
+
var tryFocus = function tryFocus(node) {
|
|
5613
|
+
if (node === false) {
|
|
5614
|
+
return;
|
|
5615
|
+
}
|
|
5616
|
+
|
|
5617
|
+
if (node === doc.activeElement) {
|
|
5618
|
+
return;
|
|
5619
|
+
}
|
|
5620
|
+
|
|
5621
|
+
if (!node || !node.focus) {
|
|
5622
|
+
tryFocus(getInitialFocusNode());
|
|
5623
|
+
return;
|
|
5624
|
+
}
|
|
5625
|
+
|
|
5626
|
+
node.focus({
|
|
5627
|
+
preventScroll: !!config.preventScroll
|
|
5628
|
+
});
|
|
5629
|
+
state.mostRecentlyFocusedNode = node;
|
|
5630
|
+
|
|
5631
|
+
if (isSelectableInput(node)) {
|
|
5632
|
+
node.select();
|
|
5633
|
+
}
|
|
5634
|
+
};
|
|
5635
|
+
|
|
5636
|
+
var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
|
|
5637
|
+
var node = getNodeForOption('setReturnFocus', previousActiveElement);
|
|
5638
|
+
return node ? node : node === false ? false : previousActiveElement;
|
|
5639
|
+
}; // This needs to be done on mousedown and touchstart instead of click
|
|
5640
|
+
// so that it precedes the focus event.
|
|
5641
|
+
|
|
5642
|
+
|
|
5643
|
+
var checkPointerDown = function checkPointerDown(e) {
|
|
5644
|
+
var target = getActualTarget(e);
|
|
5645
|
+
|
|
5646
|
+
if (containersContain(target)) {
|
|
5647
|
+
// allow the click since it ocurred inside the trap
|
|
5648
|
+
return;
|
|
5649
|
+
}
|
|
5650
|
+
|
|
5651
|
+
if (valueOrHandler(config.clickOutsideDeactivates, e)) {
|
|
5652
|
+
// immediately deactivate the trap
|
|
5653
|
+
trap.deactivate({
|
|
5654
|
+
// if, on deactivation, we should return focus to the node originally-focused
|
|
5655
|
+
// when the trap was activated (or the configured `setReturnFocus` node),
|
|
5656
|
+
// then assume it's also OK to return focus to the outside node that was
|
|
5657
|
+
// just clicked, causing deactivation, as long as that node is focusable;
|
|
5658
|
+
// if it isn't focusable, then return focus to the original node focused
|
|
5659
|
+
// on activation (or the configured `setReturnFocus` node)
|
|
5660
|
+
// NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
|
|
5661
|
+
// which will result in the outside click setting focus to the node
|
|
5662
|
+
// that was clicked, whether it's focusable or not; by setting
|
|
5663
|
+
// `returnFocus: true`, we'll attempt to re-focus the node originally-focused
|
|
5664
|
+
// on activation (or the configured `setReturnFocus` node)
|
|
5665
|
+
returnFocus: config.returnFocusOnDeactivate && !isFocusable(target)
|
|
5666
|
+
});
|
|
5667
|
+
return;
|
|
5668
|
+
} // This is needed for mobile devices.
|
|
5669
|
+
// (If we'll only let `click` events through,
|
|
5670
|
+
// then on mobile they will be blocked anyways if `touchstart` is blocked.)
|
|
5671
|
+
|
|
5672
|
+
|
|
5673
|
+
if (valueOrHandler(config.allowOutsideClick, e)) {
|
|
5674
|
+
// allow the click outside the trap to take place
|
|
5675
|
+
return;
|
|
5676
|
+
} // otherwise, prevent the click
|
|
5677
|
+
|
|
5678
|
+
|
|
5679
|
+
e.preventDefault();
|
|
5680
|
+
}; // In case focus escapes the trap for some strange reason, pull it back in.
|
|
5681
|
+
|
|
5682
|
+
|
|
5683
|
+
var checkFocusIn = function checkFocusIn(e) {
|
|
5684
|
+
var target = getActualTarget(e);
|
|
5685
|
+
var targetContained = containersContain(target); // In Firefox when you Tab out of an iframe the Document is briefly focused.
|
|
5686
|
+
|
|
5687
|
+
if (targetContained || target instanceof Document) {
|
|
5688
|
+
if (targetContained) {
|
|
5689
|
+
state.mostRecentlyFocusedNode = target;
|
|
5690
|
+
}
|
|
5691
|
+
} else {
|
|
5692
|
+
// escaped! pull it back in to where it just left
|
|
5693
|
+
e.stopImmediatePropagation();
|
|
5694
|
+
tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
|
|
5695
|
+
}
|
|
5696
|
+
}; // Hijack Tab events on the first and last focusable nodes of the trap,
|
|
5697
|
+
// in order to prevent focus from escaping. If it escapes for even a
|
|
5698
|
+
// moment it can end up scrolling the page and causing confusion so we
|
|
5699
|
+
// kind of need to capture the action at the keydown phase.
|
|
5700
|
+
|
|
5701
|
+
|
|
5702
|
+
var checkTab = function checkTab(e) {
|
|
5703
|
+
var target = getActualTarget(e);
|
|
5704
|
+
updateTabbableNodes();
|
|
5705
|
+
var destinationNode = null;
|
|
5706
|
+
|
|
5707
|
+
if (state.tabbableGroups.length > 0) {
|
|
5708
|
+
// make sure the target is actually contained in a group
|
|
5709
|
+
// NOTE: the target may also be the container itself if it's focusable
|
|
5710
|
+
// with tabIndex='-1' and was given initial focus
|
|
5711
|
+
var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
|
|
5712
|
+
var container = _ref.container;
|
|
5713
|
+
return container.contains(target);
|
|
5714
|
+
});
|
|
5715
|
+
var containerGroup = containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
|
|
5716
|
+
|
|
5717
|
+
if (containerIndex < 0) {
|
|
5718
|
+
// target not found in any group: quite possible focus has escaped the trap,
|
|
5719
|
+
// so bring it back in to...
|
|
5720
|
+
if (e.shiftKey) {
|
|
5721
|
+
// ...the last node in the last group
|
|
5722
|
+
destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
|
|
5723
|
+
} else {
|
|
5724
|
+
// ...the first node in the first group
|
|
5725
|
+
destinationNode = state.tabbableGroups[0].firstTabbableNode;
|
|
5726
|
+
}
|
|
5727
|
+
} else if (e.shiftKey) {
|
|
5728
|
+
// REVERSE
|
|
5729
|
+
// is the target the first tabbable node in a group?
|
|
5730
|
+
var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
|
|
5731
|
+
var firstTabbableNode = _ref2.firstTabbableNode;
|
|
5732
|
+
return target === firstTabbableNode;
|
|
5733
|
+
});
|
|
5734
|
+
|
|
5735
|
+
if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target, false))) {
|
|
5736
|
+
// an exception case where the target is either the container itself, or
|
|
5737
|
+
// a non-tabbable node that was given focus (i.e. tabindex is negative
|
|
5738
|
+
// and user clicked on it or node was programmatically given focus)
|
|
5739
|
+
// and is not followed by any other tabbable node, in which
|
|
5740
|
+
// case, we should handle shift+tab as if focus were on the container's
|
|
5741
|
+
// first tabbable node, and go to the last tabbable node of the LAST group
|
|
5742
|
+
startOfGroupIndex = containerIndex;
|
|
5743
|
+
}
|
|
5744
|
+
|
|
5745
|
+
if (startOfGroupIndex >= 0) {
|
|
5746
|
+
// YES: then shift+tab should go to the last tabbable node in the
|
|
5747
|
+
// previous group (and wrap around to the last tabbable node of
|
|
5748
|
+
// the LAST group if it's the first tabbable node of the FIRST group)
|
|
5749
|
+
var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
|
|
5750
|
+
var destinationGroup = state.tabbableGroups[destinationGroupIndex];
|
|
5751
|
+
destinationNode = destinationGroup.lastTabbableNode;
|
|
5752
|
+
}
|
|
5753
|
+
} else {
|
|
5754
|
+
// FORWARD
|
|
5755
|
+
// is the target the last tabbable node in a group?
|
|
5756
|
+
var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
|
|
5757
|
+
var lastTabbableNode = _ref3.lastTabbableNode;
|
|
5758
|
+
return target === lastTabbableNode;
|
|
5759
|
+
});
|
|
5760
|
+
|
|
5761
|
+
if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target) && !isTabbable(target) && !containerGroup.nextTabbableNode(target))) {
|
|
5762
|
+
// an exception case where the target is the container itself, or
|
|
5763
|
+
// a non-tabbable node that was given focus (i.e. tabindex is negative
|
|
5764
|
+
// and user clicked on it or node was programmatically given focus)
|
|
5765
|
+
// and is not followed by any other tabbable node, in which
|
|
5766
|
+
// case, we should handle tab as if focus were on the container's
|
|
5767
|
+
// last tabbable node, and go to the first tabbable node of the FIRST group
|
|
5768
|
+
lastOfGroupIndex = containerIndex;
|
|
5769
|
+
}
|
|
5770
|
+
|
|
5771
|
+
if (lastOfGroupIndex >= 0) {
|
|
5772
|
+
// YES: then tab should go to the first tabbable node in the next
|
|
5773
|
+
// group (and wrap around to the first tabbable node of the FIRST
|
|
5774
|
+
// group if it's the last tabbable node of the LAST group)
|
|
5775
|
+
var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
|
|
5776
|
+
|
|
5777
|
+
var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
|
|
5778
|
+
destinationNode = _destinationGroup.firstTabbableNode;
|
|
5779
|
+
}
|
|
5780
|
+
}
|
|
5781
|
+
} else {
|
|
5782
|
+
// NOTE: the fallbackFocus option does not support returning false to opt-out
|
|
5783
|
+
destinationNode = getNodeForOption('fallbackFocus');
|
|
5784
|
+
}
|
|
5785
|
+
|
|
5786
|
+
if (destinationNode) {
|
|
5787
|
+
e.preventDefault();
|
|
5788
|
+
tryFocus(destinationNode);
|
|
5789
|
+
} // else, let the browser take care of [shift+]tab and move the focus
|
|
5790
|
+
|
|
5791
|
+
};
|
|
5792
|
+
|
|
5793
|
+
var checkKey = function checkKey(e) {
|
|
5794
|
+
if (isEscapeEvent(e) && valueOrHandler(config.escapeDeactivates, e) !== false) {
|
|
5795
|
+
e.preventDefault();
|
|
5796
|
+
trap.deactivate();
|
|
5797
|
+
return;
|
|
5798
|
+
}
|
|
5799
|
+
|
|
5800
|
+
if (isTabEvent(e)) {
|
|
5801
|
+
checkTab(e);
|
|
5802
|
+
return;
|
|
5803
|
+
}
|
|
5804
|
+
};
|
|
5805
|
+
|
|
5806
|
+
var checkClick = function checkClick(e) {
|
|
5807
|
+
if (valueOrHandler(config.clickOutsideDeactivates, e)) {
|
|
5808
|
+
return;
|
|
5809
|
+
}
|
|
5810
|
+
|
|
5811
|
+
var target = getActualTarget(e);
|
|
5812
|
+
|
|
5813
|
+
if (containersContain(target)) {
|
|
5814
|
+
return;
|
|
5815
|
+
}
|
|
5816
|
+
|
|
5817
|
+
if (valueOrHandler(config.allowOutsideClick, e)) {
|
|
5818
|
+
return;
|
|
5819
|
+
}
|
|
5820
|
+
|
|
5821
|
+
e.preventDefault();
|
|
5822
|
+
e.stopImmediatePropagation();
|
|
5823
|
+
}; //
|
|
5824
|
+
// EVENT LISTENERS
|
|
5825
|
+
//
|
|
5826
|
+
|
|
5827
|
+
|
|
5828
|
+
var addListeners = function addListeners() {
|
|
5829
|
+
if (!state.active) {
|
|
5830
|
+
return;
|
|
5831
|
+
} // There can be only one listening focus trap at a time
|
|
5832
|
+
|
|
5833
|
+
|
|
5834
|
+
activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event
|
|
5835
|
+
// that caused the focus trap activation.
|
|
5836
|
+
|
|
5837
|
+
state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
|
|
5838
|
+
tryFocus(getInitialFocusNode());
|
|
5839
|
+
}) : tryFocus(getInitialFocusNode());
|
|
5840
|
+
doc.addEventListener('focusin', checkFocusIn, true);
|
|
5841
|
+
doc.addEventListener('mousedown', checkPointerDown, {
|
|
5842
|
+
capture: true,
|
|
5843
|
+
passive: false
|
|
5844
|
+
});
|
|
5845
|
+
doc.addEventListener('touchstart', checkPointerDown, {
|
|
5846
|
+
capture: true,
|
|
5847
|
+
passive: false
|
|
5848
|
+
});
|
|
5849
|
+
doc.addEventListener('click', checkClick, {
|
|
5850
|
+
capture: true,
|
|
5851
|
+
passive: false
|
|
5852
|
+
});
|
|
5853
|
+
doc.addEventListener('keydown', checkKey, {
|
|
5854
|
+
capture: true,
|
|
5855
|
+
passive: false
|
|
5856
|
+
});
|
|
5857
|
+
return trap;
|
|
5858
|
+
};
|
|
5859
|
+
|
|
5860
|
+
var removeListeners = function removeListeners() {
|
|
5861
|
+
if (!state.active) {
|
|
5862
|
+
return;
|
|
5863
|
+
}
|
|
5864
|
+
|
|
5865
|
+
doc.removeEventListener('focusin', checkFocusIn, true);
|
|
5866
|
+
doc.removeEventListener('mousedown', checkPointerDown, true);
|
|
5867
|
+
doc.removeEventListener('touchstart', checkPointerDown, true);
|
|
5868
|
+
doc.removeEventListener('click', checkClick, true);
|
|
5869
|
+
doc.removeEventListener('keydown', checkKey, true);
|
|
5870
|
+
return trap;
|
|
5871
|
+
}; //
|
|
5872
|
+
// TRAP DEFINITION
|
|
5873
|
+
//
|
|
5874
|
+
|
|
5875
|
+
|
|
5876
|
+
trap = {
|
|
5877
|
+
activate: function activate(activateOptions) {
|
|
5878
|
+
if (state.active) {
|
|
5879
|
+
return this;
|
|
5880
|
+
}
|
|
5881
|
+
|
|
5882
|
+
var onActivate = getOption(activateOptions, 'onActivate');
|
|
5883
|
+
var onPostActivate = getOption(activateOptions, 'onPostActivate');
|
|
5884
|
+
var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
|
|
5885
|
+
|
|
5886
|
+
if (!checkCanFocusTrap) {
|
|
5887
|
+
updateTabbableNodes();
|
|
5888
|
+
}
|
|
5889
|
+
|
|
5890
|
+
state.active = true;
|
|
5891
|
+
state.paused = false;
|
|
5892
|
+
state.nodeFocusedBeforeActivation = doc.activeElement;
|
|
5893
|
+
|
|
5894
|
+
if (onActivate) {
|
|
5895
|
+
onActivate();
|
|
5896
|
+
}
|
|
5897
|
+
|
|
5898
|
+
var finishActivation = function finishActivation() {
|
|
5899
|
+
if (checkCanFocusTrap) {
|
|
5900
|
+
updateTabbableNodes();
|
|
5901
|
+
}
|
|
5902
|
+
|
|
5903
|
+
addListeners();
|
|
5904
|
+
|
|
5905
|
+
if (onPostActivate) {
|
|
5906
|
+
onPostActivate();
|
|
5907
|
+
}
|
|
5908
|
+
};
|
|
5909
|
+
|
|
5910
|
+
if (checkCanFocusTrap) {
|
|
5911
|
+
checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
|
|
5912
|
+
return this;
|
|
5913
|
+
}
|
|
5914
|
+
|
|
5915
|
+
finishActivation();
|
|
5916
|
+
return this;
|
|
5917
|
+
},
|
|
5918
|
+
deactivate: function deactivate(deactivateOptions) {
|
|
5919
|
+
if (!state.active) {
|
|
5920
|
+
return this;
|
|
5921
|
+
}
|
|
5922
|
+
|
|
5923
|
+
clearTimeout(state.delayInitialFocusTimer); // noop if undefined
|
|
5924
|
+
|
|
5925
|
+
state.delayInitialFocusTimer = undefined;
|
|
5926
|
+
removeListeners();
|
|
5927
|
+
state.active = false;
|
|
5928
|
+
state.paused = false;
|
|
5929
|
+
activeFocusTraps.deactivateTrap(trap);
|
|
5930
|
+
var onDeactivate = getOption(deactivateOptions, 'onDeactivate');
|
|
5931
|
+
var onPostDeactivate = getOption(deactivateOptions, 'onPostDeactivate');
|
|
5932
|
+
var checkCanReturnFocus = getOption(deactivateOptions, 'checkCanReturnFocus');
|
|
5933
|
+
|
|
5934
|
+
if (onDeactivate) {
|
|
5935
|
+
onDeactivate();
|
|
5936
|
+
}
|
|
5937
|
+
|
|
5938
|
+
var returnFocus = getOption(deactivateOptions, 'returnFocus', 'returnFocusOnDeactivate');
|
|
5939
|
+
|
|
5940
|
+
var finishDeactivation = function finishDeactivation() {
|
|
5941
|
+
delay(function () {
|
|
5942
|
+
if (returnFocus) {
|
|
5943
|
+
tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
|
|
5944
|
+
}
|
|
5945
|
+
|
|
5946
|
+
if (onPostDeactivate) {
|
|
5947
|
+
onPostDeactivate();
|
|
5948
|
+
}
|
|
5949
|
+
});
|
|
5950
|
+
};
|
|
5951
|
+
|
|
5952
|
+
if (returnFocus && checkCanReturnFocus) {
|
|
5953
|
+
checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
|
|
5954
|
+
return this;
|
|
5955
|
+
}
|
|
5956
|
+
|
|
5957
|
+
finishDeactivation();
|
|
5958
|
+
return this;
|
|
5959
|
+
},
|
|
5960
|
+
pause: function pause() {
|
|
5961
|
+
if (state.paused || !state.active) {
|
|
5962
|
+
return this;
|
|
5963
|
+
}
|
|
5964
|
+
|
|
5965
|
+
state.paused = true;
|
|
5966
|
+
removeListeners();
|
|
5967
|
+
return this;
|
|
5968
|
+
},
|
|
5969
|
+
unpause: function unpause() {
|
|
5970
|
+
if (!state.paused || !state.active) {
|
|
5971
|
+
return this;
|
|
5972
|
+
}
|
|
5973
|
+
|
|
5974
|
+
state.paused = false;
|
|
5975
|
+
updateTabbableNodes();
|
|
5976
|
+
addListeners();
|
|
5977
|
+
return this;
|
|
5978
|
+
},
|
|
5979
|
+
updateContainerElements: function updateContainerElements(containerElements) {
|
|
5980
|
+
var elementsAsArray = [].concat(containerElements).filter(Boolean);
|
|
5981
|
+
state.containers = elementsAsArray.map(function (element) {
|
|
5982
|
+
return typeof element === 'string' ? doc.querySelector(element) : element;
|
|
5983
|
+
});
|
|
5984
|
+
|
|
5985
|
+
if (state.active) {
|
|
5986
|
+
updateTabbableNodes();
|
|
5987
|
+
}
|
|
5988
|
+
|
|
5989
|
+
return this;
|
|
5990
|
+
}
|
|
5991
|
+
}; // initialize container elements
|
|
5992
|
+
|
|
5993
|
+
trap.updateContainerElements(elements);
|
|
5994
|
+
return trap;
|
|
5995
|
+
};
|
|
5996
|
+
|
|
5997
|
+
const ViewerGridFilterpanelButtons = ({ onApply, onCancel }) => (h("div", { class: "filterpanel-buttons" },
|
|
5998
|
+
h("button", { type: "button", class: "cancel-button", onClick: onCancel },
|
|
5999
|
+
h("span", null, "Annuleren")),
|
|
6000
|
+
h("button", { type: "button", class: "apply-button", onClick: onApply },
|
|
6001
|
+
h("span", null, "Toepassen"),
|
|
6002
|
+
h("dso-icon", { icon: "chevron-right" }))));
|
|
6003
|
+
|
|
6004
|
+
const viewerGridCss = "button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}h1,.h1,h2,.h2,h3,.h3{margin-top:24px}h1{color:#275937;font-size:2rem;font-weight:700}h2{color:#275937;font-size:1.5rem;font-weight:700}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-top:12px}h4{color:#275937;font-size:1rem;font-weight:600}h5{color:#191919;font-size:1rem;font-weight:600}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:12px}*,*::after,*::before{box-sizing:border-box}:host{display:flex;height:100vh;overflow:hidden;position:relative}:host([small]) .dso-map-panel{flex-basis:375px;min-width:0;max-width:375px}@media screen and (max-width: 375px){:host([small]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:0;transition:none}}:host([medium]) .dso-map-panel{flex-basis:624px;min-width:375px;max-width:624px}@media screen and (max-width: 624px){:host([medium]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:375px;transition:none}}:host([large]) .dso-map-panel{flex-basis:60%;min-width:768px;max-width:1024px}@media screen and (max-width: 768px){:host([large]) .dso-map-panel{flex-basis:100vw;max-width:100vw;min-width:768px;transition:none}}.shrink,.expand,.overlay-close-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;border:0;color:#39870c;line-height:1;padding:0;background-color:transparent}.shrink:focus,.shrink:focus-visible,.expand:focus,.expand:focus-visible,.overlay-close-button:focus,.overlay-close-button:focus-visible{outline-offset:2px}.shrink:active,.expand:active,.overlay-close-button:active{outline:0}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{color:#afcf9d}.shrink:not([disabled]):hover,.expand:not([disabled]):hover,.overlay-close-button:not([disabled]):hover{color:#676cb0;text-decoration:underline}.shrink:not([disabled]):active,.expand:not([disabled]):active,.overlay-close-button:not([disabled]):active{color:#676cb0}.shrink.btn-align,.expand.btn-align,.overlay-close-button.btn-align{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}.shrink.extern::after,.shrink.download::after,.expand.extern::after,.expand.download::after,.overlay-close-button.extern::after,.overlay-close-button.download::after{position:relative;top:-2px}.shrink.download::after,.expand.download::after,.overlay-close-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.download[disabled]::after,.expand.download[disabled]::after,.overlay-close-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.shrink.download:not([disabled]):hover::after,.shrink.download:not([disabled]):active::after,.expand.download:not([disabled]):hover::after,.expand.download:not([disabled]):active::after,.overlay-close-button.download:not([disabled]):hover::after,.overlay-close-button.download:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}.shrink.extern::after,.expand.extern::after,.overlay-close-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.shrink.extern[disabled]::after,.expand.extern[disabled]::after,.overlay-close-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.shrink.extern:not([disabled]):hover::after,.shrink.extern:not([disabled]):active::after,.expand.extern:not([disabled]):hover::after,.expand.extern:not([disabled]):active::after,.overlay-close-button.extern:not([disabled]):hover::after,.overlay-close-button.extern:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}.shrink dso-icon+span:not(.sr-only),.shrink svg.di+span:not(.sr-only),.shrink span:not(.sr-only)+dso-icon,.shrink span:not(.sr-only)+svg.di,.expand dso-icon+span:not(.sr-only),.expand svg.di+span:not(.sr-only),.expand span:not(.sr-only)+dso-icon,.expand span:not(.sr-only)+svg.di,.overlay-close-button dso-icon+span:not(.sr-only),.overlay-close-button svg.di+span:not(.sr-only),.overlay-close-button span:not(.sr-only)+dso-icon,.overlay-close-button span:not(.sr-only)+svg.di{margin-left:8px}.shrink dso-icon,.shrink svg.di,.shrink span,.expand dso-icon,.expand svg.di,.expand span,.overlay-close-button dso-icon,.overlay-close-button svg.di,.overlay-close-button span{vertical-align:middle}.shrink:hover,.expand:hover,.overlay-close-button:hover{cursor:pointer}.shrink[disabled],.expand[disabled],.overlay-close-button[disabled]{display:none}.overlay-close-button{position:absolute;top:8px;right:16px}.overlay-close-button .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-map-panel{background-color:#fff;box-shadow:2px 0 8px 0 rgba(0, 0, 0, 0.4);flex-shrink:0;flex-grow:0;padding-right:8px;position:relative;transition:flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;z-index:1}.dso-map-panel .dso-filterblok-address{font-weight:bold;margin:8px 0}.dso-map-panel .main{height:100%;overflow-y:scroll;padding:8px 16px}.sizing-buttons{left:calc(100% + 1px);overflow-x:hidden;padding:0 4px 4px 0;position:absolute;top:16px;transition:left 0.2s ease-in;width:44px;z-index:-1}.sizing-buttons button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;border:0;padding:8px;border-radius:0;border-bottom-right-radius:4px;border-top-right-radius:4px;box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4);flex:0 0 100%;height:40px;min-width:auto;width:40px}.sizing-buttons button:focus,.sizing-buttons button:focus-visible{outline-offset:2px}.sizing-buttons button:active{outline:0}.sizing-buttons button.extern::after,.sizing-buttons button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.sizing-buttons button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.sizing-buttons button:active{background-color:#275937;border-color:#275937;color:#fff}.sizing-buttons button[disabled],.sizing-buttons button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.sizing-buttons button.btn-sm{line-height:16px}.sizing-buttons button.btn-sm dso-icon,.sizing-buttons button.btn-sm svg.di,.sizing-buttons button.btn-sm.extern::after,.sizing-buttons button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.sizing-buttons button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.download:hover::after{--dso-icon:var(--di-download-wit)}.sizing-buttons button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.sizing-buttons button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.sizing-buttons button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.sizing-buttons button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.sizing-buttons button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sizing-buttons button:focus-visible{background-color:#39870c;border-color:#39870c;color:#fff;outline:none}.sizing-buttons button:hover dso-icon{color:#fff}.map{height:100%;width:100%;overflow:hidden}#filterpanel,.overlay{background-color:#fff;height:100%;overflow-y:auto;position:absolute;z-index:2}#filterpanel{box-shadow:2px 0 5px #666;padding:40px 16px 8px;left:0;max-width:896px;width:calc(100vw - 40px)}@media screen and (max-width: 768px){#filterpanel{width:100vw}#filterpanel::before{display:none !important}}#filterpanel::before{content:\"\";display:block;position:fixed;top:0;bottom:0;right:0;left:896px;background-color:rgba(0, 0, 0, 0.5)}@media screen and (max-width: 936px){#filterpanel::before{left:auto;width:40px}}.overlay{box-shadow:-2px 0 5px #666;padding:40px 16px 8px;right:0;width:624px}@media screen and (max-width: 624px){.overlay{width:100vw}}.overlay::before{content:\"\";display:block;position:fixed;top:0;bottom:0;left:0;right:624px;background-color:rgba(0, 0, 0, 0.5)}.filterpanel-buttons{text-align:right}.filterpanel-buttons .cancel-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#fff;border-color:#39870c;color:#39870c;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .cancel-button:focus,.filterpanel-buttons .cancel-button:focus-visible{outline-offset:2px}.filterpanel-buttons .cancel-button:active{outline:0}.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button:hover{background-color:#39870c;border-color:#39870c;color:#fff}.filterpanel-buttons .cancel-button:active{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .cancel-button[disabled],.filterpanel-buttons .cancel-button[disabled]:hover{background-color:#fff;border-color:#afcf9d;color:#afcf9d}.filterpanel-buttons .cancel-button.btn-sm{line-height:16px}.filterpanel-buttons .cancel-button.btn-sm dso-icon,.filterpanel-buttons .cancel-button.btn-sm svg.di,.filterpanel-buttons .cancel-button.btn-sm.extern::after,.filterpanel-buttons .cancel-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button.download::after{background:var(--dso-icon, var(--di-download)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.download:hover::after{--dso-icon:var(--di-download-wit)}.filterpanel-buttons .cancel-button.download[disabled]::after{--dso-icon:var(--di-download-grasgroen-40)}.filterpanel-buttons .cancel-button.extern::after{background:var(--dso-icon, var(--di-external-link)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .cancel-button.extern:hover::after{--dso-icon:var(--di-external-link-wit)}.filterpanel-buttons .cancel-button.extern[disabled]::after{--dso-icon:var(--di-external-link-grasgroen-40)}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .cancel-button span+dso-icon,.filterpanel-buttons .cancel-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .cancel-button dso-icon,.filterpanel-buttons .cancel-button svg.di,.filterpanel-buttons .cancel-button.extern::after,.filterpanel-buttons .cancel-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button{display:inline-block;font-size:1em;font-weight:500;margin-bottom:0;text-decoration:none;touch-action:manipulation;text-align:left;user-select:none;vertical-align:middle;background-color:#39870c;border-color:#39870c;color:#fff;border-width:1px;border-style:solid;border-radius:4px;line-height:1.5;min-width:56px;padding:11px 15px;line-height:16px}.filterpanel-buttons .apply-button:focus,.filterpanel-buttons .apply-button:focus-visible{outline-offset:2px}.filterpanel-buttons .apply-button:active{outline:0}.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button:hover{background-color:#275937;border-color:#275937;color:#fff}.filterpanel-buttons .apply-button:active{background-color:#15301e;border-color:#15301e;color:#fff}.filterpanel-buttons .apply-button[disabled],.filterpanel-buttons .apply-button[disabled]:hover{background-color:#afcf9d;border-color:#afcf9d;color:#fff}.filterpanel-buttons .apply-button.btn-sm{line-height:16px}.filterpanel-buttons .apply-button.btn-sm dso-icon,.filterpanel-buttons .apply-button.btn-sm svg.di,.filterpanel-buttons .apply-button.btn-sm.extern::after,.filterpanel-buttons .apply-button.btn-sm.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .apply-button.download::after{background:var(--dso-icon, var(--di-download-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button.extern::after{background:var(--dso-icon, var(--di-external-link-wit)) no-repeat;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di{margin-left:-8px;margin-right:8px}.filterpanel-buttons .apply-button span+dso-icon,.filterpanel-buttons .apply-button span+svg.di{margin-left:8px;margin-right:-8px}.filterpanel-buttons .apply-button dso-icon,.filterpanel-buttons .apply-button svg.di,.filterpanel-buttons .apply-button.extern::after,.filterpanel-buttons .apply-button.download::after{margin-bottom:-4px;margin-top:-4px}.filterpanel-buttons .cancel-button+.apply-button{margin-left:16px}";
|
|
6005
|
+
|
|
6006
|
+
let ViewerGrid = class extends HTMLElement {
|
|
6007
|
+
constructor() {
|
|
6008
|
+
super();
|
|
6009
|
+
this.__registerHost();
|
|
6010
|
+
attachShadow(this);
|
|
6011
|
+
this.closeOverlay = createEvent(this, "closeOverlay", 7);
|
|
6012
|
+
this.filterpanelCancel = createEvent(this, "filterpanelCancel", 7);
|
|
6013
|
+
this.filterpanelApply = createEvent(this, "filterpanelApply", 7);
|
|
6014
|
+
this.filterpanelOpen = false;
|
|
6015
|
+
this.overlayOpen = false;
|
|
6016
|
+
this.mainSize = "large";
|
|
6017
|
+
this.filterpanelSlot = null;
|
|
6018
|
+
this.overlaySlot = null;
|
|
6019
|
+
this.shrinkMain = () => {
|
|
6020
|
+
this.mainSize = this.mainSize == "large" ? "medium" : "small";
|
|
6021
|
+
};
|
|
6022
|
+
this.expandMain = () => {
|
|
6023
|
+
this.mainSize = this.mainSize == "small" ? "medium" : "large";
|
|
6024
|
+
};
|
|
6025
|
+
this.keyDownListener = (event) => {
|
|
6026
|
+
if (event.key != "Escape") {
|
|
6027
|
+
return;
|
|
6028
|
+
}
|
|
6029
|
+
this.closeOverlay.emit(event);
|
|
6030
|
+
};
|
|
6031
|
+
}
|
|
6032
|
+
updateFocusTrap() {
|
|
6033
|
+
var _a, _b;
|
|
6034
|
+
if (this.filterpanelOpen && this.overlayOpen) {
|
|
6035
|
+
return;
|
|
6036
|
+
}
|
|
6037
|
+
if (this.filterpanelFocustrap) {
|
|
6038
|
+
if (this.filterpanelOpen && !((_a = this.filterpanel) === null || _a === void 0 ? void 0 : _a.hidden)) {
|
|
6039
|
+
this.filterpanelFocustrap.activate();
|
|
6040
|
+
this.host.addEventListener("keydown", this.keyDownListener);
|
|
6041
|
+
}
|
|
6042
|
+
else {
|
|
6043
|
+
this.filterpanelFocustrap.deactivate();
|
|
6044
|
+
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
6045
|
+
}
|
|
6046
|
+
}
|
|
6047
|
+
if (this.overlayFocustrap) {
|
|
6048
|
+
if (this.overlayOpen && !((_b = this.overlay) === null || _b === void 0 ? void 0 : _b.hidden)) {
|
|
6049
|
+
this.overlayFocustrap.activate();
|
|
6050
|
+
this.host.addEventListener("keydown", this.keyDownListener);
|
|
6051
|
+
}
|
|
6052
|
+
else {
|
|
6053
|
+
this.overlayFocustrap.deactivate();
|
|
6054
|
+
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
6055
|
+
}
|
|
6056
|
+
}
|
|
6057
|
+
}
|
|
6058
|
+
connectedCallback() {
|
|
6059
|
+
this.filterpanelSlot = this.host.querySelector("div[slot='filterpanel']");
|
|
6060
|
+
this.overlaySlot = this.host.querySelector("div[slot='overlay']");
|
|
6061
|
+
}
|
|
6062
|
+
componentDidLoad() {
|
|
6063
|
+
if (this.filterpanel && this.filterpanelSlot) {
|
|
6064
|
+
this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {
|
|
6065
|
+
escapeDeactivates: false,
|
|
6066
|
+
allowOutsideClick: true,
|
|
6067
|
+
});
|
|
6068
|
+
}
|
|
6069
|
+
if (this.overlay && this.overlaySlot) {
|
|
6070
|
+
this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {
|
|
6071
|
+
escapeDeactivates: false,
|
|
6072
|
+
allowOutsideClick: true,
|
|
6073
|
+
});
|
|
6074
|
+
}
|
|
6075
|
+
this.updateFocusTrap();
|
|
6076
|
+
}
|
|
6077
|
+
componentDidUpdate() {
|
|
6078
|
+
this.updateFocusTrap();
|
|
6079
|
+
}
|
|
6080
|
+
disconnectedCallback() {
|
|
6081
|
+
var _a, _b;
|
|
6082
|
+
(_a = this.overlayFocustrap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
6083
|
+
(_b = this.filterpanelFocustrap) === null || _b === void 0 ? void 0 : _b.deactivate();
|
|
6084
|
+
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
6085
|
+
}
|
|
6086
|
+
handleFilterpanelApply(mouseEvent) {
|
|
6087
|
+
this.filterpanelApply.emit({ originalEvent: mouseEvent });
|
|
6088
|
+
}
|
|
6089
|
+
handleFilterpanelCancel(mouseEvent) {
|
|
6090
|
+
this.filterpanelCancel.emit({ originalEvent: mouseEvent });
|
|
6091
|
+
}
|
|
6092
|
+
render() {
|
|
6093
|
+
return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel" }, h("div", { class: "sizing-buttons" }, h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain }, h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain }, h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => this.filterpanel = element }, h("h2", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: e => this.handleFilterpanelApply(e), onCancel: e => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.closeOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }))));
|
|
6094
|
+
}
|
|
6095
|
+
get host() { return this; }
|
|
6096
|
+
static get style() { return viewerGridCss; }
|
|
6097
|
+
};
|
|
6098
|
+
|
|
5199
6099
|
const DsoAlert = /*@__PURE__*/proxyCustomElement(Alert, [1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]);
|
|
5200
6100
|
const DsoAttachmentsCounter = /*@__PURE__*/proxyCustomElement(AttachmentsCounter, [1,"dso-attachments-counter",{"count":[2]}]);
|
|
5201
6101
|
const DsoAutosuggest = /*@__PURE__*/proxyCustomElement(Autosuggest, [6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]);
|
|
@@ -5220,6 +6120,7 @@ const DsoSelectable = /*@__PURE__*/proxyCustomElement(Selectable, [1,"dso-select
|
|
|
5220
6120
|
const DsoToggletip = /*@__PURE__*/proxyCustomElement(Toggletip, [1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]);
|
|
5221
6121
|
const DsoTooltip = /*@__PURE__*/proxyCustomElement(Tooltip, [1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32]},[[0,"click","listenClick"]]]);
|
|
5222
6122
|
const DsoTreeView = /*@__PURE__*/proxyCustomElement(TreeView, [1,"dso-tree-view",{"collection":[16]}]);
|
|
6123
|
+
const DsoViewerGrid = /*@__PURE__*/proxyCustomElement(ViewerGrid, [1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]);
|
|
5223
6124
|
const defineCustomElements = (opts) => {
|
|
5224
6125
|
if (typeof customElements !== 'undefined') {
|
|
5225
6126
|
[
|
|
@@ -5246,7 +6147,8 @@ const defineCustomElements = (opts) => {
|
|
|
5246
6147
|
DsoSelectable,
|
|
5247
6148
|
DsoToggletip,
|
|
5248
6149
|
DsoTooltip,
|
|
5249
|
-
DsoTreeView
|
|
6150
|
+
DsoTreeView,
|
|
6151
|
+
DsoViewerGrid
|
|
5250
6152
|
].forEach(cmp => {
|
|
5251
6153
|
if (!customElements.get(cmp.is)) {
|
|
5252
6154
|
customElements.define(cmp.is, cmp, opts);
|
|
@@ -5255,4 +6157,4 @@ const defineCustomElements = (opts) => {
|
|
|
5255
6157
|
}
|
|
5256
6158
|
};
|
|
5257
6159
|
|
|
5258
|
-
export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHeader, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, defineCustomElements };
|
|
6160
|
+
export { DsoAlert, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoDatePicker, DsoDropdownMenu, DsoHeader, DsoHelpcenterPanel, DsoHighlightBox, DsoIcon, DsoInfo, DsoInfoButton, DsoLabel, DsoMapBaseLayers, DsoMapControls, DsoMapOverlays, DsoOzonContent, DsoProgressBar, DsoProgressIndicator, DsoSelectable, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, defineCustomElements };
|