@dso-toolkit/core 68.3.0 → 68.5.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-accordion-section.cjs.entry.js +26 -6
- package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-alert_6.cjs.entry.js +21 -8
- package/dist/cjs/dso-alert_6.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +1 -1
- package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +1 -1
- package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +2 -2
- 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 +2 -2
- package/dist/cjs/dso-input-range.cjs.entry.js +2 -2
- package/dist/cjs/dso-label_3.cjs.entry.js +193 -0
- package/dist/cjs/dso-label_3.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-legend-item.cjs.entry.js +2 -2
- package/dist/cjs/dso-list-button.cjs.entry.js +2 -2
- package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-logo.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
- package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
- package/dist/cjs/dso-mark-bar.cjs.entry.js +1 -1
- package/dist/cjs/dso-modal.cjs.entry.js +2 -2
- package/dist/cjs/dso-plekinfo-card.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-project-item.cjs.entry.js +1 -1
- package/dist/cjs/dso-responsive-element.cjs.entry.js +1 -1
- package/dist/cjs/dso-scrollable.cjs.entry.js +2 -2
- package/dist/cjs/dso-skiplink.cjs.entry.js +1 -1
- package/dist/cjs/dso-survey-rating.cjs.entry.js +44 -0
- package/dist/cjs/dso-survey-rating.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dso-toggletip.cjs.entry.js +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/{dso-label_2.cjs.entry.js → dso-tooltip.cjs.entry.js} +8 -123
- package/dist/cjs/dso-tooltip.cjs.entry.js.map +1 -0
- package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +2 -2
- package/dist/cjs/dsot-document-component-demo.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/accordion/components/accordion-section.css +44 -10
- package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map +1 -1
- package/dist/collection/components/accordion/components/accordion-section.js +85 -5
- package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
- package/dist/collection/components/document-component/document-component.js +38 -4
- package/dist/collection/components/document-component/document-component.js.map +1 -1
- package/dist/collection/components/document-component/document-component.models.js.map +1 -1
- package/dist/collection/components/document-component-demo/document-component.demo.js +1 -1
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +1 -1
- package/dist/collection/components/helpcenter-panel/helpcenter-panel.js +2 -2
- package/dist/collection/components/highlight-box/highlight-box.js +1 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/info/info.js +1 -1
- package/dist/collection/components/info-button/info-button.js +1 -1
- package/dist/collection/components/input-range/input-range.js +2 -2
- package/dist/collection/components/label/label.js +3 -3
- package/dist/collection/components/legend-item/legend-item.js +2 -2
- package/dist/collection/components/list-button/list-button.css +0 -7
- package/dist/collection/components/list-button/list-button.js +1 -1
- package/dist/collection/components/logo/logo.js +1 -1
- package/dist/collection/components/map-base-layers/map-base-layers.js +1 -1
- package/dist/collection/components/map-controls/map-controls.js +1 -1
- package/dist/collection/components/map-overlays/map-overlays.js +1 -1
- package/dist/collection/components/mark-bar/mark-bar.js +1 -1
- package/dist/collection/components/modal/modal.js +2 -2
- package/dist/collection/components/ozon-content/nodes/{opschrift.node.js → kop.node.js} +3 -3
- package/dist/collection/components/ozon-content/nodes/kop.node.js.map +1 -0
- package/dist/collection/components/ozon-content/ozon-content-context.interface.js.map +1 -1
- package/dist/collection/components/ozon-content/ozon-content-mapper.js +8 -4
- package/dist/collection/components/ozon-content/ozon-content-mapper.js.map +1 -1
- package/dist/collection/components/ozon-content/ozon-content.js +26 -1
- package/dist/collection/components/ozon-content/ozon-content.js.map +1 -1
- package/dist/collection/components/panel/panel.css +3 -2
- package/dist/collection/components/plekinfo-card/plekinfo-card.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/progress-indicator/progress-indicator.js +1 -1
- package/dist/collection/components/project-item/project-item.js +1 -1
- package/dist/collection/components/renvooi/renvooi.js +1 -1
- package/dist/collection/components/responsive-element/responsive-element.js +1 -1
- package/dist/collection/components/scrollable/scrollable.js +2 -2
- package/dist/collection/components/selectable/selectable.js +1 -1
- package/dist/collection/components/skiplink/skiplink.js +1 -1
- package/dist/collection/components/slide-toggle/slide-toggle.css +5 -0
- package/dist/collection/components/slide-toggle/slide-toggle.js +2 -1
- package/dist/collection/components/slide-toggle/slide-toggle.js.map +1 -1
- package/dist/collection/components/survey-rating/survey-rating.css +392 -0
- package/dist/collection/components/survey-rating/survey-rating.interfaces.js +2 -0
- package/dist/collection/components/survey-rating/survey-rating.interfaces.js.map +1 -0
- package/dist/collection/components/survey-rating/survey-rating.js +84 -0
- package/dist/collection/components/survey-rating/survey-rating.js.map +1 -0
- package/dist/collection/components/table/table.js +1 -1
- package/dist/collection/components/tabs/tabs.js +1 -1
- package/dist/collection/components/toggletip/toggletip.js +1 -1
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/collection/components/tree-view/tree-view.js +1 -1
- package/dist/collection/components/viewer-grid/viewer-grid.js +2 -2
- package/dist/components/document-component.js +2 -1
- package/dist/components/document-component.js.map +1 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/dso-accordion-section.js +44 -16
- package/dist/components/dso-accordion-section.js.map +1 -1
- package/dist/components/dso-helpcenter-panel.js +2 -2
- package/dist/components/dso-highlight-box.js +1 -1
- package/dist/components/dso-input-range.js +2 -2
- package/dist/components/dso-legend-item.js +2 -2
- package/dist/components/dso-list-button.js +2 -2
- package/dist/components/dso-list-button.js.map +1 -1
- package/dist/components/dso-logo.js +1 -1
- package/dist/components/dso-map-base-layers.js +1 -1
- package/dist/components/dso-map-controls.js +1 -1
- package/dist/components/dso-map-overlays.js +1 -1
- package/dist/components/dso-mark-bar.js +1 -1
- package/dist/components/dso-modal.js +2 -2
- package/dist/components/dso-plekinfo-card.js +1 -1
- package/dist/components/dso-progress-bar.js +1 -1
- package/dist/components/dso-project-item.js +1 -1
- package/dist/components/dso-skiplink.js +1 -1
- package/dist/components/dso-survey-rating.d.ts +11 -0
- package/dist/components/dso-survey-rating.js +70 -0
- package/dist/components/dso-survey-rating.js.map +1 -0
- package/dist/components/dso-tabs.js +1 -1
- package/dist/components/dso-tree-view.js +1 -1
- package/dist/components/dso-viewer-grid.js +2 -2
- package/dist/components/dsot-document-component-demo.js +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/info-button.js +1 -1
- package/dist/components/info.js +1 -1
- package/dist/components/label.js +3 -3
- package/dist/components/ozon-content.js +20 -6
- package/dist/components/ozon-content.js.map +1 -1
- package/dist/components/panel.js +1 -1
- package/dist/components/panel.js.map +1 -1
- package/dist/components/progress-indicator.js +1 -1
- package/dist/components/renvooi.js +1 -1
- package/dist/components/responsive-element.js +1 -1
- package/dist/components/scrollable.js +2 -2
- package/dist/components/selectable.js +1 -1
- package/dist/components/slide-toggle.js +3 -3
- package/dist/components/slide-toggle.js.map +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/toggletip.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-b3deb707.entry.js → p-0499bdce.entry.js} +2 -2
- package/dist/dso-toolkit/p-0499bdce.entry.js.map +1 -0
- package/dist/dso-toolkit/p-0dcef2bb.entry.js +2 -0
- package/dist/dso-toolkit/p-0dcef2bb.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-df6c1f5f.entry.js → p-11e367b3.entry.js} +2 -2
- package/dist/dso-toolkit/{p-a6df0d43.entry.js → p-1746cde9.entry.js} +2 -2
- package/dist/dso-toolkit/p-1746cde9.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-f1dc313d.entry.js → p-1ec998ba.entry.js} +2 -2
- package/dist/dso-toolkit/{p-35186e39.entry.js → p-236e6d02.entry.js} +2 -2
- package/dist/dso-toolkit/p-2aaad2dd.entry.js +2 -0
- package/dist/dso-toolkit/{p-3270708a.entry.js → p-3033a7f3.entry.js} +2 -2
- package/dist/dso-toolkit/p-323455dc.entry.js +2 -0
- package/dist/dso-toolkit/p-323455dc.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-ad38ad02.entry.js → p-40d7c6bf.entry.js} +2 -2
- package/dist/dso-toolkit/{p-ee7e35f5.entry.js → p-4bcf2efb.entry.js} +2 -2
- package/dist/dso-toolkit/{p-7e626a87.entry.js → p-4e8fa5f6.entry.js} +2 -2
- package/dist/dso-toolkit/p-55306107.entry.js +2 -0
- package/dist/dso-toolkit/{p-fccb414d.entry.js.map → p-55306107.entry.js.map} +1 -1
- package/dist/dso-toolkit/{p-7e2c9463.entry.js → p-5cdbbba6.entry.js} +2 -2
- package/dist/dso-toolkit/{p-faa6b9d5.entry.js → p-5ec31b61.entry.js} +2 -2
- package/dist/dso-toolkit/{p-8b5409ad.entry.js → p-60e40f8f.entry.js} +2 -2
- package/dist/dso-toolkit/p-631af6b1.entry.js +2 -0
- package/dist/dso-toolkit/p-631af6b1.entry.js.map +1 -0
- package/dist/dso-toolkit/p-8597633a.entry.js +2 -0
- package/dist/dso-toolkit/{p-1aefb8a6.entry.js.map → p-8597633a.entry.js.map} +1 -1
- package/dist/dso-toolkit/{p-e8064fba.entry.js → p-880d04c4.entry.js} +2 -2
- package/dist/dso-toolkit/p-898ad366.entry.js +2 -0
- package/dist/dso-toolkit/p-898ad366.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-acfb9f16.entry.js → p-9331c2fc.entry.js} +2 -2
- package/dist/dso-toolkit/{p-e19e851b.entry.js → p-943ad4a8.entry.js} +2 -2
- package/dist/dso-toolkit/{p-80c945ed.entry.js → p-984d922e.entry.js} +2 -2
- package/dist/dso-toolkit/{p-d9cb06fc.entry.js → p-99d7326e.entry.js} +2 -2
- package/dist/dso-toolkit/{p-007802e5.entry.js → p-9d176f6f.entry.js} +2 -2
- package/dist/dso-toolkit/{p-3be76968.entry.js → p-a496f58f.entry.js} +2 -2
- package/dist/dso-toolkit/{p-8a3e9f50.entry.js → p-b57af35d.entry.js} +2 -2
- package/dist/dso-toolkit/p-b5c5ca39.entry.js +2 -0
- package/dist/dso-toolkit/{p-9dbebb2e.entry.js.map → p-b5c5ca39.entry.js.map} +1 -1
- package/dist/dso-toolkit/{p-8cc798d5.entry.js → p-cf32927d.entry.js} +2 -2
- package/dist/dso-toolkit/{p-1f14320f.entry.js → p-d3131297.entry.js} +2 -2
- package/dist/dso-toolkit/p-e4f473e2.entry.js +2 -0
- package/dist/dso-toolkit/p-e4f473e2.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-fd989862.entry.js → p-e9d15fae.entry.js} +2 -2
- package/dist/dso-toolkit/{p-a341b666.entry.js → p-ed33d023.entry.js} +2 -2
- package/dist/esm/dso-accordion-section.entry.js +26 -6
- package/dist/esm/dso-accordion-section.entry.js.map +1 -1
- package/dist/esm/dso-alert_6.entry.js +21 -8
- package/dist/esm/dso-alert_6.entry.js.map +1 -1
- package/dist/esm/dso-annotation-locatie_2.entry.js +1 -1
- package/dist/esm/dso-annotation-locatie_2.entry.js.map +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +1 -1
- package/dist/esm/dso-helpcenter-panel.entry.js +2 -2
- 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 +2 -2
- package/dist/esm/dso-input-range.entry.js +2 -2
- package/dist/esm/dso-label_3.entry.js +187 -0
- package/dist/esm/dso-label_3.entry.js.map +1 -0
- package/dist/esm/dso-legend-item.entry.js +2 -2
- package/dist/esm/dso-list-button.entry.js +2 -2
- package/dist/esm/dso-list-button.entry.js.map +1 -1
- package/dist/esm/dso-logo.entry.js +1 -1
- package/dist/esm/dso-map-base-layers.entry.js +1 -1
- package/dist/esm/dso-map-controls.entry.js +1 -1
- package/dist/esm/dso-map-overlays.entry.js +1 -1
- package/dist/esm/dso-mark-bar.entry.js +1 -1
- package/dist/esm/dso-modal.entry.js +2 -2
- package/dist/esm/dso-plekinfo-card.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-project-item.entry.js +1 -1
- package/dist/esm/dso-responsive-element.entry.js +1 -1
- package/dist/esm/dso-scrollable.entry.js +2 -2
- package/dist/esm/dso-skiplink.entry.js +1 -1
- package/dist/esm/dso-survey-rating.entry.js +40 -0
- package/dist/esm/dso-survey-rating.entry.js.map +1 -0
- package/dist/esm/dso-tabs.entry.js +1 -1
- package/dist/esm/dso-toggletip.entry.js +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/{dso-label_2.entry.js → dso-tooltip.entry.js} +5 -119
- package/dist/esm/dso-tooltip.entry.js.map +1 -0
- package/dist/esm/dso-tree-view.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +2 -2
- package/dist/esm/dsot-document-component-demo.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/accordion/components/accordion-section.d.ts +16 -1
- package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts +11 -0
- package/dist/types/components/document-component/document-component.d.ts +7 -0
- package/dist/types/components/document-component/document-component.models.d.ts +1 -1
- package/dist/types/components/ozon-content/nodes/{opschrift.node.d.ts → kop.node.d.ts} +2 -2
- package/dist/types/components/ozon-content/ozon-content-context.interface.d.ts +1 -0
- package/dist/types/components/ozon-content/ozon-content.d.ts +4 -0
- package/dist/types/components/survey-rating/survey-rating.d.ts +16 -0
- package/dist/types/components/survey-rating/survey-rating.interfaces.d.ts +15 -0
- package/dist/types/components.d.ts +84 -2
- package/package.json +3 -3
- package/dist/cjs/dso-label_2.cjs.entry.js.map +0 -1
- package/dist/cjs/dso-renvooi_2.cjs.entry.js +0 -76
- package/dist/cjs/dso-renvooi_2.cjs.entry.js.map +0 -1
- package/dist/collection/components/ozon-content/nodes/opschrift.node.js.map +0 -1
- package/dist/dso-toolkit/p-03e5e9e1.entry.js +0 -2
- package/dist/dso-toolkit/p-1ad6315b.entry.js +0 -2
- package/dist/dso-toolkit/p-1ad6315b.entry.js.map +0 -1
- package/dist/dso-toolkit/p-1aefb8a6.entry.js +0 -2
- package/dist/dso-toolkit/p-7e0130d8.entry.js +0 -2
- package/dist/dso-toolkit/p-7e0130d8.entry.js.map +0 -1
- package/dist/dso-toolkit/p-9dbebb2e.entry.js +0 -2
- package/dist/dso-toolkit/p-a6df0d43.entry.js.map +0 -1
- package/dist/dso-toolkit/p-b3deb707.entry.js.map +0 -1
- package/dist/dso-toolkit/p-eb04878c.entry.js +0 -2
- package/dist/dso-toolkit/p-eb04878c.entry.js.map +0 -1
- package/dist/dso-toolkit/p-fca1f5bd.entry.js +0 -2
- package/dist/dso-toolkit/p-fca1f5bd.entry.js.map +0 -1
- package/dist/dso-toolkit/p-fccb414d.entry.js +0 -2
- package/dist/esm/dso-label_2.entry.js.map +0 -1
- package/dist/esm/dso-renvooi_2.entry.js +0 -71
- package/dist/esm/dso-renvooi_2.entry.js.map +0 -1
- /package/dist/dso-toolkit/{p-df6c1f5f.entry.js.map → p-11e367b3.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-f1dc313d.entry.js.map → p-1ec998ba.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-35186e39.entry.js.map → p-236e6d02.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-03e5e9e1.entry.js.map → p-2aaad2dd.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-3270708a.entry.js.map → p-3033a7f3.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-ad38ad02.entry.js.map → p-40d7c6bf.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-ee7e35f5.entry.js.map → p-4bcf2efb.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-7e626a87.entry.js.map → p-4e8fa5f6.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-7e2c9463.entry.js.map → p-5cdbbba6.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-faa6b9d5.entry.js.map → p-5ec31b61.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-8b5409ad.entry.js.map → p-60e40f8f.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-e8064fba.entry.js.map → p-880d04c4.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-acfb9f16.entry.js.map → p-9331c2fc.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-e19e851b.entry.js.map → p-943ad4a8.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-80c945ed.entry.js.map → p-984d922e.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-d9cb06fc.entry.js.map → p-99d7326e.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-007802e5.entry.js.map → p-9d176f6f.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-3be76968.entry.js.map → p-a496f58f.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-8a3e9f50.entry.js.map → p-b57af35d.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-8cc798d5.entry.js.map → p-cf32927d.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-1f14320f.entry.js.map → p-d3131297.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-fd989862.entry.js.map → p-e9d15fae.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-a341b666.entry.js.map → p-ed33d023.entry.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n,c as t,h as e,F as o,a as i}from"./p-abc59cdf.js";import{i as s}from"./p-078b7eca.js";const r={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};const a=":host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n outline: 0;\n}\n.toggle-visibility-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.toggle-visibility-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button {\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(\n 100% + 56px\n );\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.zoom-buttons button:active {\n outline: 0;\n}\n.zoom-buttons button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.zoom-buttons button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button {\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-start-start-radius: 4px;\n border-start-end-radius: 4px;\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-end-start-radius: 4px;\n border-end-end-radius: 4px;\n border-block-start: 1px solid #ccc;\n}\n.zoom-buttons button:focus-visible {\n outline-offset: -1px;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.close-button[disabled] {\n color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #173521;\n}\n.close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n .toggle-visibility-button {\n block-size: 40px;\n margin-inline-end: 0;\n min-inline-size: auto;\n inset-inline-end: calc(100% + 16px);\n inline-size: 40px;\n }\n .toggle-visibility-button dso-icon {\n margin-inline-end: 0;\n }\n .toggle-visibility-button span {\n visibility: hidden;\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}";const l=a;var d=undefined&&undefined.__classPrivateFieldGet||function(n,t,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!o:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(n):o?o.value:t.get(n)};var c=undefined&&undefined.__classPrivateFieldSet||function(n,t,e,o,i){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?i.call(n,e):i?i.value=e:t.set(n,e),e};var b,f;const g=300;const p=class{constructor(e){n(this,e);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.open=false;this.hideContent=!this.open;this.text=s((()=>this.host),r);b.set(this,void 0);f.set(this,void 0)}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=d(this,b,"f"))===null||n===void 0?void 0:n.focus()}),g)}else{setTimeout((()=>{var n;this.hideContent=true;(n=d(this,f,"f"))===null||n===void 0?void 0:n.focus()}),g)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return e(o,null,e("button",{key:"573ea039111c0e7deaad1ea3d98f61624094b9e4",type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>c(this,f,n,"f")},e("dso-icon",{key:"d7b086353a46416f632560849e6fed86e7fffd1c",icon:"layers"}),e("span",{key:"a00dd91224e379ab8742930d67b3bc8ea826afc6"},this.text("layersButton"))),e("div",{key:"910fe57b1529c546558af71b787572a4b915ad97",class:"zoom-buttons"},e("button",{key:"3552d4bcd383653c9892c7a16c8496e360a01f8d",type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},e("span",{key:"033cef82cce00e476d36845132b6c489ad4375b1"},this.text("zoomIn")),e("dso-icon",{key:"c2b8c167418ebe7841660788a5eeebbe25a88618",icon:"plus"})),e("button",{key:"14138f8ff799838ef69bd9e2b3c4f81a5a9b07d9",type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},e("span",{key:"c0838a34699e52396769a7b141f763a693ddcf51"},this.text("zoomOut")),e("dso-icon",{key:"ad6c13bb2ea3619418087a61a798aed603a275e0",icon:"minus"}))),e("section",{key:"4de42199feb4079206e6f4b9c6e496a9477d6efb",hidden:this.hideContent},e("header",{key:"544ef6d84816744e1f438a4a1a6d1fa72e8d18e0"},e("h2",{key:"bdf400d3caf3dafd8d519e456f93cacc17a83029"},this.text("title")),e("button",{key:"65688a5d69a7515a6876717333f1f0b91c68bf35",type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>c(this,b,n,"f")},e("span",{key:"ffb2ce7c427be0ce964fe3248723c781ada74bc5"},this.text("hidePanel",{title:this.text("title")})),e("dso-icon",{key:"c0b7c4ca0bc3b77d0a11f9c73f9e88aba0fe7e9f",icon:"times"}))),e("dso-scrollable",{key:"0629184078ee836679679826b7b6d2a49d680b62"},e("div",{key:"25c5e5428505beacc6e38358b3188b6674e325b1",class:"content"},e("slot",{key:"2b89f160818bac188a431826cc95857b27927b33"})))))}get host(){return i(this)}static get watchers(){return{open:["watchOpen"]}}};b=new WeakMap,f=new WeakMap;p.style=l;export{p as dso_map_controls};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as n,c as t,h as e,F as o,a as i}from"./p-abc59cdf.js";import{i as s}from"./p-078b7eca.js";const r={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};const a=":host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.toggle-visibility-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n outline: 0;\n}\n.toggle-visibility-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.toggle-visibility-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.toggle-visibility-button {\n border: 0;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(\n 100% + 56px\n );\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n border-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n display: flex;\n flex-wrap: wrap;\n flex: 0 0;\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n.zoom-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.zoom-buttons button:active {\n outline: 0;\n}\n.zoom-buttons button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.zoom-buttons button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.zoom-buttons button {\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-start-start-radius: 4px;\n border-start-end-radius: 4px;\n flex: 0 0 100%;\n block-size: 40px;\n min-inline-size: auto;\n inline-size: 40px;\n}\n.zoom-buttons button + button {\n border-radius: 0;\n border-end-start-radius: 4px;\n border-end-end-radius: 4px;\n border-block-start: 1px solid #ccc;\n}\n.zoom-buttons button:focus-visible {\n outline-offset: -1px;\n}\n\n.close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.close-button[disabled] {\n color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n color: #173521;\n}\n.close-button.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.close-button.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-button > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: \"Asap\", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n .toggle-visibility-button {\n block-size: 40px;\n margin-inline-end: 0;\n min-inline-size: auto;\n inset-inline-end: calc(100% + 16px);\n inline-size: 40px;\n }\n .toggle-visibility-button dso-icon {\n margin-inline-end: 0;\n }\n .toggle-visibility-button span {\n visibility: hidden;\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}";const l=a;var d=undefined&&undefined.__classPrivateFieldGet||function(n,t,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?n!==t||!o:!t.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(n):o?o.value:t.get(n)};var c=undefined&&undefined.__classPrivateFieldSet||function(n,t,e,o,i){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?n!==t||!i:!t.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?i.call(n,e):i?i.value=e:t.set(n,e),e};var b,f;const g=300;const p=class{constructor(e){n(this,e);this.dsoZoomIn=t(this,"dsoZoomIn",7);this.dsoZoomOut=t(this,"dsoZoomOut",7);this.dsoToggle=t(this,"dsoToggle",7);this.open=false;this.hideContent=!this.open;this.text=s((()=>this.host),r);b.set(this,void 0);f.set(this,void 0)}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=d(this,b,"f"))===null||n===void 0?void 0:n.focus()}),g)}else{setTimeout((()=>{var n;this.hideContent=true;(n=d(this,f,"f"))===null||n===void 0?void 0:n.focus()}),g)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return e(o,null,e("button",{key:"e3daf3337eedad7c5647aba5338124b785983e1b",type:"button",id:"toggle-visibility-button",class:"toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>c(this,f,n,"f")},e("dso-icon",{key:"544229b40319921cc34d1cff3dd35c18083e6426",icon:"layers"}),e("span",{key:"60b70ebd862eed50d89bbb03eb6903126339c707"},this.text("layersButton"))),e("div",{key:"11e20f505a895847b26855c21ecb77e5609887fb",class:"zoom-buttons"},e("button",{key:"82a95b3706eb3677585b917c60a8295234e08aa4",type:"button",onClick:n=>this.dsoZoomIn.emit(n),disabled:this.disableZoom==="in"||this.disableZoom==="both"},e("span",{key:"c36b8b13aa2cae68355de9b0953197f88f75c0c7"},this.text("zoomIn")),e("dso-icon",{key:"9337e9539ca5a4711b9a74c3d4df14913d4da35d",icon:"plus"})),e("button",{key:"3e934fa88dd063bf43ae0cf71ee645c38dbce819",type:"button",onClick:n=>this.dsoZoomOut.emit(n),disabled:this.disableZoom==="out"||this.disableZoom==="both"},e("span",{key:"481834440a06b12eb939b32c0d6c47ff4045fdf1"},this.text("zoomOut")),e("dso-icon",{key:"4aeb93804aed494572abf20a04c67b826281a993",icon:"minus"}))),e("section",{key:"2ccc0d76a2e6ba9236981143b7038cd76184e631",hidden:this.hideContent},e("header",{key:"ced060f6dbe63557ab9322e995f1f2bf7f54dcb0"},e("h2",{key:"6a5087e44dccd7a6e4b70e8bfe102acd0cf74c93"},this.text("title")),e("button",{key:"8a3279fb0403298d171fe80a822805dddf08ca65",type:"button",class:"close-button",onClick:n=>this.toggleVisibility(n),ref:n=>c(this,b,n,"f")},e("span",{key:"2d206ad92727822002a9046b4d764b7620ff6d87"},this.text("hidePanel",{title:this.text("title")})),e("dso-icon",{key:"ad32fd102f5d546b9e7edefec7fa9b02f0b06e3b",icon:"times"}))),e("dso-scrollable",{key:"e559b2f524287861013a2b81e657475bfd90ad61"},e("div",{key:"950ba389a922e37f015a58cf8d8cf609cb1fa1fd",class:"content"},e("slot",{key:"f38f9391f552411af6d7593b1a39f3d4e5f6a9cc"})))))}get host(){return i(this)}static get watchers(){return{open:["watchOpen"]}}};b=new WeakMap,f=new WeakMap;p.style=l;export{p as dso_map_controls};
|
|
2
|
+
//# sourceMappingURL=p-5ec31b61.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n,c as t,h as e,F as r}from"./p-abc59cdf.js";import{c as i}from"./p-4573c419.js";var o=1/0,u=9007199254740991,s=17976931348623157e292,a=0/0;var f="[object Arguments]",c="[object Function]",d="[object GeneratorFunction]",l="[object Map]",h="[object Object]",v="[object Promise]",p="[object Set]",b="[object String]",m="[object Symbol]",y="[object WeakMap]";var g="[object DataView]";var j=/[\\^$.*+?()[\]{}|]/g;var C=/^\s+|\s+$/g;var w=/^[-+]0x[0-9a-f]+$/i;var D=/^0b[01]+$/i;var A=/^\[object .+?Constructor\]$/;var O=/^0o[0-7]+$/i;var k=/^(?:0|[1-9]\d*)$/;var I="\\ud800-\\udfff",$="\\u0300-\\u036f\\ufe20-\\ufe23",T="\\u20d0-\\u20f0",F="\\ufe0e\\ufe0f";var S="["+I+"]",M="["+$+T+"]",x="\\ud83c[\\udffb-\\udfff]",E="(?:"+M+"|"+x+")",z="[^"+I+"]",L="(?:\\ud83c[\\udde6-\\uddff]){2}",R="[\\ud800-\\udbff][\\udc00-\\udfff]",W="\\u200d";var V=E+"?",_="["+F+"]?",K="(?:"+W+"(?:"+[z,L,R].join("|")+")"+_+V+")*",N=_+V+K,P="(?:"+[z+M+"?",M,L,R,S].join("|")+")";var B=RegExp(x+"(?="+x+")|"+P+N,"g");var G=RegExp("["+W+I+$+T+F+"]");var X=parseInt;var H=typeof i=="object"&&i&&i.Object===Object&&i;var q=typeof self=="object"&&self&&self.Object===Object&&self;var J=H||q||Function("return this")();function Q(n,t){var e=-1,r=n?n.length:0,i=Array(r);while(++e<r){i[e]=t(n[e],e,n)}return i}function U(n){return n.split("")}function Y(n,t){var e=-1,r=Array(n);while(++e<n){r[e]=t(e)}return r}function Z(n,t){return Q(t,(function(t){return n[t]}))}function nn(n,t){return n==null?undefined:n[t]}function tn(n){return G.test(n)}function en(n){var t=false;if(n!=null&&typeof n.toString!="function"){try{t=!!(n+"")}catch(n){}}return t}function rn(n){var t,e=[];while(!(t=n.next()).done){e.push(t.value)}return e}function on(n){var t=-1,e=Array(n.size);n.forEach((function(n,r){e[++t]=[r,n]}));return e}function un(n,t){return function(e){return n(t(e))}}function sn(n){var t=-1,e=Array(n.size);n.forEach((function(n){e[++t]=n}));return e}function an(n){return tn(n)?fn(n):U(n)}function fn(n){return n.match(B)||[]}var cn=Function.prototype,dn=Object.prototype;var ln=J["__core-js_shared__"];var hn=function(){var n=/[^.]+$/.exec(ln&&ln.keys&&ln.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();var vn=cn.toString;var pn=dn.hasOwnProperty;var bn=dn.toString;var mn=RegExp("^"+vn.call(pn).replace(j,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var yn=J.Symbol,gn=yn?yn.iterator:undefined,jn=dn.propertyIsEnumerable;var Cn=Math.floor,wn=un(Object.keys,Object),Dn=Math.random;var An=Kn(J,"DataView"),On=Kn(J,"Map"),kn=Kn(J,"Promise"),In=Kn(J,"Set"),$n=Kn(J,"WeakMap");var Tn=Hn(An),Fn=Hn(On),Sn=Hn(kn),Mn=Hn(In),xn=Hn($n);function En(n,t){var e=Un(n)||Qn(n)?Y(n.length,String):[];var r=e.length,i=!!r;for(var o in n){if((t||pn.call(n,o))&&!(i&&(o=="length"||Pn(o,r)))){e.push(o)}}return e}function zn(n,t,e){if(n===n){if(e!==undefined){n=n<=e?n:e}if(t!==undefined){n=n>=t?n:t}}return n}function Ln(n){return bn.call(n)}function Rn(n){if(!et(n)||Gn(n)){return false}var t=nt(n)||en(n)?mn:A;return t.test(Hn(n))}function Wn(n){if(!Xn(n)){return wn(n)}var t=[];for(var e in Object(n)){if(pn.call(n,e)&&e!="constructor"){t.push(e)}}return t}function Vn(n,t){return n+Cn(Dn()*(t-n+1))}function _n(n,t){var e=-1,r=n.length;t||(t=Array(r));while(++e<r){t[e]=n[e]}return t}function Kn(n,t){var e=nn(n,t);return Rn(e)?e:undefined}var Nn=Ln;if(An&&Nn(new An(new ArrayBuffer(1)))!=g||On&&Nn(new On)!=l||kn&&Nn(kn.resolve())!=v||In&&Nn(new In)!=p||$n&&Nn(new $n)!=y){Nn=function(n){var t=bn.call(n),e=t==h?n.constructor:undefined,r=e?Hn(e):undefined;if(r){switch(r){case Tn:return g;case Fn:return l;case Sn:return v;case Mn:return p;case xn:return y}}return t}}function Pn(n,t){t=t==null?u:t;return!!t&&(typeof n=="number"||k.test(n))&&(n>-1&&n%1==0&&n<t)}function Bn(n,t,e){if(!et(e)){return false}var r=typeof t;if(r=="number"?Yn(e)&&Pn(t,e.length):r=="string"&&t in e){return Jn(e[t],n)}return false}function Gn(n){return!!hn&&hn in n}function Xn(n){var t=n&&n.constructor,e=typeof t=="function"&&t.prototype||dn;return n===e}function Hn(n){if(n!=null){try{return vn.call(n)}catch(n){}try{return n+""}catch(n){}}return""}function qn(n,t,e){var r=-1,i=ut(n),o=i.length,u=o-1;if(e?Bn(n,t,e):t===undefined){t=1}else{t=zn(at(t),0,o)}while(++r<t){var s=Vn(r,u),a=i[s];i[s]=i[r];i[r]=a}i.length=t;return i}function Jn(n,t){return n===t||n!==n&&t!==t}function Qn(n){return Zn(n)&&pn.call(n,"callee")&&(!jn.call(n,"callee")||bn.call(n)==f)}var Un=Array.isArray;function Yn(n){return n!=null&&tt(n.length)&&!nt(n)}function Zn(n){return rt(n)&&Yn(n)}function nt(n){var t=et(n)?bn.call(n):"";return t==c||t==d}function tt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=u}function et(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function rt(n){return!!n&&typeof n=="object"}function it(n){return typeof n=="string"||!Un(n)&&rt(n)&&bn.call(n)==b}function ot(n){return typeof n=="symbol"||rt(n)&&bn.call(n)==m}function ut(n){if(!n){return[]}if(Yn(n)){return it(n)?an(n):_n(n)}if(gn&&n[gn]){return rn(n[gn]())}var t=Nn(n),e=t==l?on:t==p?sn:dt;return e(n)}function st(n){if(!n){return n===0?n:0}n=ft(n);if(n===o||n===-o){var t=n<0?-1:1;return t*s}return n===n?n:0}function at(n){var t=st(n),e=t%1;return t===t?e?t-e:t:0}function ft(n){if(typeof n=="number"){return n}if(ot(n)){return a}if(et(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=et(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(C,"");var e=D.test(n);return e||O.test(n)?X(n.slice(2),e?2:8):w.test(n)?a:+n}function ct(n){return Yn(n)?En(n):Wn(n)}function dt(n){return n?Z(n,ct(n)):[]}var lt=qn;var ht=1/0,vt=9007199254740991,pt=17976931348623157e292,bt=0/0;var mt="[object Function]",yt="[object GeneratorFunction]",gt="[object Symbol]";var jt=/^\s+|\s+$/g;var Ct=/^[-+]0x[0-9a-f]+$/i;var wt=/^0b[01]+$/i;var Dt=/^0o[0-7]+$/i;var At=/^(?:0|[1-9]\d*)$/;var Ot=parseFloat,kt=parseInt;var It=Object.prototype;var $t=It.toString;var Tt=Math.floor,Ft=Math.min,St=Math.random;function Mt(n,t){return n+Tt(St()*(t-n+1))}function xt(n,t){t=t==null?vt:t;return!!t&&(typeof n=="number"||At.test(n))&&(n>-1&&n%1==0&&n<t)}function Et(n,t,e){if(!Vt(e)){return false}var r=typeof t;if(r=="number"?Lt(e)&&xt(t,e.length):r=="string"&&t in e){return zt(e[t],n)}return false}function zt(n,t){return n===t||n!==n&&t!==t}function Lt(n){return n!=null&&Wt(n.length)&&!Rt(n)}function Rt(n){var t=Vt(n)?$t.call(n):"";return t==mt||t==yt}function Wt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=vt}function Vt(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function _t(n){return!!n&&typeof n=="object"}function Kt(n){return typeof n=="symbol"||_t(n)&&$t.call(n)==gt}function Nt(n){if(!n){return n===0?n:0}n=Pt(n);if(n===ht||n===-ht){var t=n<0?-1:1;return t*pt}return n===n?n:0}function Pt(n){if(typeof n=="number"){return n}if(Kt(n)){return bt}if(Vt(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=Vt(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(jt,"");var e=wt.test(n);return e||Dt.test(n)?kt(n.slice(2),e?2:8):Ct.test(n)?bt:+n}function Bt(n,t,e){if(e&&typeof e!="boolean"&&Et(n,t,e)){t=e=undefined}if(e===undefined){if(typeof t=="boolean"){e=t;t=undefined}else if(typeof n=="boolean"){e=n;n=undefined}}if(n===undefined&&t===undefined){n=0;t=1}else{n=Nt(n);if(t===undefined){t=n;n=0}else{t=Nt(t)}}if(n>t){var r=n;n=t;t=r}if(e||n%1||t%1){var i=St();return Ft(n+i*(t-n+Ot("1e-"+((i+"").length-1))),t)}return Mt(n,t)}var Gt=Bt;const Xt=".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}";const Ht=Xt;const qt=class{constructor(i){n(this,i);this.dsotOzonContentAnchorClick=t(this,"dsotOzonContentAnchorClick",7);this.dsotTableOfContentsClick=t(this,"dsotTableOfContentsClick",3);this.showCanvas=false;this.openDefault=false;this.mode="document";this.openOrClosed=[];this.openedAnnotation=[];this.filtered=[];this.notApplicable=[];this.activeAnnotationSelectables=[];this.handleRecursiveToggle=(n,t)=>{const e=this.getEmbeddedDocumentComponents(n);if(!e){return}for(const n of e.documentComponents){this.handleOpenToggle(n,t.next)}};this.DocumentComponent=({path:n})=>{const t=n.at(-1);if(!t||this.mode==="table-of-contents"&&t.type==="LID"){return e(r,null)}const{DocumentComponent:i}=this;const o=this.getEmbeddedDocumentComponents(t);return e("dso-document-component",{annotated:this.isAnnotated(t),bevatOntwerpInformatie:!!t.bevatOntwerpInformatie,filtered:this.isOpen(t)?this.isFiltered(t):this.hasFilteredChildren(t),genesteOntwerpInformatie:this.hasNestedDraft(t),gereserveerd:t.gereserveerd,heading:"h2",inhoud:t.inhoud,label:t.labelXml,openAnnotation:this.isOpenedAnnotation(t),notApplicable:this.isNotApplicable(t)||n.some((n=>this.isNotApplicable(n))),nummer:t.nummerXml,onDsoAnnotationToggle:()=>this.handleAnnotationToggle(t),onDsoOpenToggle:()=>this.handleOpenToggle(t),onDsoOzonContentAnchorClick:n=>this.handleOzonContentAnchorClick(n),open:this.isOpen(t),opschrift:t.opschrift,type:t.type,vervallen:t.vervallen,wijzigactie:t.wijzigactie,recursiveToggle:this.recursiveToggleState(t),onDsoRecursiveToggle:n=>this.handleRecursiveToggle(t,n.detail),mode:this.mode,href:this.mode==="table-of-contents"?"/document/"+t.documentTechnischId:undefined,onDsoTableOfContentsClick:n=>this.handleTableOfContentsClick(n)},this.isOpenedAnnotation(t)&&e("div",{slot:"annotations"},e("dso-annotation-locatie",{active:this.isCheckedSlideToggle(t),"gewijzigde-locatie":true,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(t)},e("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(t)&&(o===null||o===void 0?void 0:o.documentComponents.length)&&e("ul",{class:"dso-document-component-list"},o.documentComponents.map((t=>e("li",{key:t.documentTechnischId},e(i,{path:[...n,t]}))))))};this.MenuButton=({documentComponent:n})=>{const{labelXml:t,nummerXml:i,type:o}=n;return e("button",{type:"button",onClick:()=>this.document=n},!t&&!i?e("span",null,e("i",null,o)):e(r,null,t&&e(r,null,e("dso-ozon-content",{content:t,inline:true})),i&&e(r,null," ",e("dso-ozon-content",{content:i,inline:true}))))}}async jsonFileWatcher(){this.openOrClosed=[];await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[];await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(n){var t,e;if((t=n===null||n===void 0?void 0:n._embedded)===null||t===void 0?void 0:t.ontwerpTekststructuurDocumentComponenten){return{documentComponents:n._embedded.ontwerpTekststructuurDocumentComponenten,ontwerp:true}}if((e=n===null||n===void 0?void 0:n._embedded)===null||e===void 0?void 0:e.tekststructuurDocumentComponenten){return{documentComponents:n._embedded.tekststructuurDocumentComponenten,ontwerp:false}}return undefined}concatEmbeddedDocumentComponents(n){var t,e;const r=[...(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents)!==null&&e!==void 0?e:[]];for(const n of r){r.push(...this.concatEmbeddedDocumentComponents(n))}return r}selectRandomDocumentComponents(n,t=[]){const e=this.concatEmbeddedDocumentComponents(n).filter((n=>!t.includes(n)));const r=Gt(0,Math.floor(e.length/10));return lt(e,r)}async loadData(){var n,t;if(!this.jsonFile){this.response=undefined;this.document=undefined;return}this.response=await fetch(this.jsonFile).then((n=>n.json()));this.document=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents[0];if(((t=this.document)===null||t===void 0?void 0:t.type)==="LICHAAM"){this.notApplicable=this.selectRandomDocumentComponents(this.document);this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)}else{this.notApplicable=[];this.filtered=[]}}handleOpenToggle(n,t){const e=typeof t==="boolean"?t:this.openOrClosed.includes(n);if(e&&this.openOrClosed.includes(n)){this.openOrClosed=this.openOrClosed.filter((t=>t!==n))}else if(!e&&!this.openOrClosed.includes(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleAnnotationToggle(n){this.openedAnnotation=this.isOpenedAnnotation(n)?this.openedAnnotation.filter((t=>t!==n)):[...this.openedAnnotation,n];if(!this.isOpen(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleSelectableChange(n){this.activeAnnotationSelectables=this.isCheckedSlideToggle(n)?this.activeAnnotationSelectables.filter((t=>t!==n)):[...this.activeAnnotationSelectables,n]}handleOzonContentAnchorClick(n){this.dsotOzonContentAnchorClick.emit(n.detail)}handleTableOfContentsClick(n){this.dsotTableOfContentsClick.emit(n.detail)}isCheckedSlideToggle(n){return this.activeAnnotationSelectables.includes(n)}hasFilteredChildren(n){var t,e;return this.filtered.includes(n)||((e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>this.hasFilteredChildren(n))))!==null&&e!==void 0?e:false)}isOpen(n){return n.type==="LID"||this.openDefault?!this.openOrClosed.includes(n):this.openOrClosed.includes(n)}isOpenedAnnotation(n){return this.openedAnnotation.includes(n)}isFiltered(n){return this.filtered.includes(n)}isNotApplicable(n){return this.notApplicable.includes(n)}hasNestedDraft(n){var t,e;return(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>!!n.bevatOntwerpInformatie||this.hasNestedDraft(n))))!==null&&e!==void 0?e:false}showContent(n){var t;return this.isOpen(n)&&!!(((t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.length)||n.inhoud)}recursiveToggleState(n){const t=this.getEmbeddedDocumentComponents(n);if(!t||t.documentComponents.length<=1||!t.documentComponents.some((n=>n.type==="ARTIKEL"))){return undefined}return t.documentComponents.every((n=>this.isOpen(n)))}isAnnotated(n){return n.type==="DIVISIE"||n.type==="DIVISIETEKST"||n.type==="ARTIKEL"||n.type==="LID"}render(){var n,t;const{DocumentComponent:r,MenuButton:i}=this;return e("dso-responsive-element",{key:"487ea5957411bf8fe8bf42b34555076ae30079a6",class:"dso-document-components"},e("div",{key:"312dbb3e48673150f6d3a2318e3387994f186d14",class:"dso-navbar"},e("ul",{key:"9f0f29ddd997906ef4a071dcc70ffb48342863bd",class:"dso-nav dso-nav-sub"},(t=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents)===null||t===void 0?void 0:t.map((n=>e("li",{class:this.document===n?"dso-active":undefined},e(i,{documentComponent:n})))))),this.document&&e(r,{key:"5ac9f2dc49fcf37166bea36d3c00d415d55e35a9",path:[this.document]}))}static get watchers(){return{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}}};qt.style=Ht;export{qt as dsot_document_component_demo};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as n,c as t,h as e,F as r}from"./p-abc59cdf.js";import{c as i}from"./p-4573c419.js";var o=1/0,u=9007199254740991,s=17976931348623157e292,a=0/0;var f="[object Arguments]",c="[object Function]",d="[object GeneratorFunction]",l="[object Map]",h="[object Object]",v="[object Promise]",p="[object Set]",b="[object String]",m="[object Symbol]",y="[object WeakMap]";var g="[object DataView]";var j=/[\\^$.*+?()[\]{}|]/g;var C=/^\s+|\s+$/g;var w=/^[-+]0x[0-9a-f]+$/i;var D=/^0b[01]+$/i;var A=/^\[object .+?Constructor\]$/;var O=/^0o[0-7]+$/i;var k=/^(?:0|[1-9]\d*)$/;var I="\\ud800-\\udfff",$="\\u0300-\\u036f\\ufe20-\\ufe23",T="\\u20d0-\\u20f0",F="\\ufe0e\\ufe0f";var S="["+I+"]",M="["+$+T+"]",x="\\ud83c[\\udffb-\\udfff]",E="(?:"+M+"|"+x+")",z="[^"+I+"]",L="(?:\\ud83c[\\udde6-\\uddff]){2}",R="[\\ud800-\\udbff][\\udc00-\\udfff]",W="\\u200d";var V=E+"?",_="["+F+"]?",K="(?:"+W+"(?:"+[z,L,R].join("|")+")"+_+V+")*",N=_+V+K,P="(?:"+[z+M+"?",M,L,R,S].join("|")+")";var B=RegExp(x+"(?="+x+")|"+P+N,"g");var G=RegExp("["+W+I+$+T+F+"]");var X=parseInt;var H=typeof i=="object"&&i&&i.Object===Object&&i;var q=typeof self=="object"&&self&&self.Object===Object&&self;var J=H||q||Function("return this")();function Q(n,t){var e=-1,r=n?n.length:0,i=Array(r);while(++e<r){i[e]=t(n[e],e,n)}return i}function U(n){return n.split("")}function Y(n,t){var e=-1,r=Array(n);while(++e<n){r[e]=t(e)}return r}function Z(n,t){return Q(t,(function(t){return n[t]}))}function nn(n,t){return n==null?undefined:n[t]}function tn(n){return G.test(n)}function en(n){var t=false;if(n!=null&&typeof n.toString!="function"){try{t=!!(n+"")}catch(n){}}return t}function rn(n){var t,e=[];while(!(t=n.next()).done){e.push(t.value)}return e}function on(n){var t=-1,e=Array(n.size);n.forEach((function(n,r){e[++t]=[r,n]}));return e}function un(n,t){return function(e){return n(t(e))}}function sn(n){var t=-1,e=Array(n.size);n.forEach((function(n){e[++t]=n}));return e}function an(n){return tn(n)?fn(n):U(n)}function fn(n){return n.match(B)||[]}var cn=Function.prototype,dn=Object.prototype;var ln=J["__core-js_shared__"];var hn=function(){var n=/[^.]+$/.exec(ln&&ln.keys&&ln.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();var vn=cn.toString;var pn=dn.hasOwnProperty;var bn=dn.toString;var mn=RegExp("^"+vn.call(pn).replace(j,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var yn=J.Symbol,gn=yn?yn.iterator:undefined,jn=dn.propertyIsEnumerable;var Cn=Math.floor,wn=un(Object.keys,Object),Dn=Math.random;var An=Kn(J,"DataView"),On=Kn(J,"Map"),kn=Kn(J,"Promise"),In=Kn(J,"Set"),$n=Kn(J,"WeakMap");var Tn=Hn(An),Fn=Hn(On),Sn=Hn(kn),Mn=Hn(In),xn=Hn($n);function En(n,t){var e=Un(n)||Qn(n)?Y(n.length,String):[];var r=e.length,i=!!r;for(var o in n){if((t||pn.call(n,o))&&!(i&&(o=="length"||Pn(o,r)))){e.push(o)}}return e}function zn(n,t,e){if(n===n){if(e!==undefined){n=n<=e?n:e}if(t!==undefined){n=n>=t?n:t}}return n}function Ln(n){return bn.call(n)}function Rn(n){if(!et(n)||Gn(n)){return false}var t=nt(n)||en(n)?mn:A;return t.test(Hn(n))}function Wn(n){if(!Xn(n)){return wn(n)}var t=[];for(var e in Object(n)){if(pn.call(n,e)&&e!="constructor"){t.push(e)}}return t}function Vn(n,t){return n+Cn(Dn()*(t-n+1))}function _n(n,t){var e=-1,r=n.length;t||(t=Array(r));while(++e<r){t[e]=n[e]}return t}function Kn(n,t){var e=nn(n,t);return Rn(e)?e:undefined}var Nn=Ln;if(An&&Nn(new An(new ArrayBuffer(1)))!=g||On&&Nn(new On)!=l||kn&&Nn(kn.resolve())!=v||In&&Nn(new In)!=p||$n&&Nn(new $n)!=y){Nn=function(n){var t=bn.call(n),e=t==h?n.constructor:undefined,r=e?Hn(e):undefined;if(r){switch(r){case Tn:return g;case Fn:return l;case Sn:return v;case Mn:return p;case xn:return y}}return t}}function Pn(n,t){t=t==null?u:t;return!!t&&(typeof n=="number"||k.test(n))&&(n>-1&&n%1==0&&n<t)}function Bn(n,t,e){if(!et(e)){return false}var r=typeof t;if(r=="number"?Yn(e)&&Pn(t,e.length):r=="string"&&t in e){return Jn(e[t],n)}return false}function Gn(n){return!!hn&&hn in n}function Xn(n){var t=n&&n.constructor,e=typeof t=="function"&&t.prototype||dn;return n===e}function Hn(n){if(n!=null){try{return vn.call(n)}catch(n){}try{return n+""}catch(n){}}return""}function qn(n,t,e){var r=-1,i=ut(n),o=i.length,u=o-1;if(e?Bn(n,t,e):t===undefined){t=1}else{t=zn(at(t),0,o)}while(++r<t){var s=Vn(r,u),a=i[s];i[s]=i[r];i[r]=a}i.length=t;return i}function Jn(n,t){return n===t||n!==n&&t!==t}function Qn(n){return Zn(n)&&pn.call(n,"callee")&&(!jn.call(n,"callee")||bn.call(n)==f)}var Un=Array.isArray;function Yn(n){return n!=null&&tt(n.length)&&!nt(n)}function Zn(n){return rt(n)&&Yn(n)}function nt(n){var t=et(n)?bn.call(n):"";return t==c||t==d}function tt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=u}function et(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function rt(n){return!!n&&typeof n=="object"}function it(n){return typeof n=="string"||!Un(n)&&rt(n)&&bn.call(n)==b}function ot(n){return typeof n=="symbol"||rt(n)&&bn.call(n)==m}function ut(n){if(!n){return[]}if(Yn(n)){return it(n)?an(n):_n(n)}if(gn&&n[gn]){return rn(n[gn]())}var t=Nn(n),e=t==l?on:t==p?sn:dt;return e(n)}function st(n){if(!n){return n===0?n:0}n=ft(n);if(n===o||n===-o){var t=n<0?-1:1;return t*s}return n===n?n:0}function at(n){var t=st(n),e=t%1;return t===t?e?t-e:t:0}function ft(n){if(typeof n=="number"){return n}if(ot(n)){return a}if(et(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=et(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(C,"");var e=D.test(n);return e||O.test(n)?X(n.slice(2),e?2:8):w.test(n)?a:+n}function ct(n){return Yn(n)?En(n):Wn(n)}function dt(n){return n?Z(n,ct(n)):[]}var lt=qn;var ht=1/0,vt=9007199254740991,pt=17976931348623157e292,bt=0/0;var mt="[object Function]",yt="[object GeneratorFunction]",gt="[object Symbol]";var jt=/^\s+|\s+$/g;var Ct=/^[-+]0x[0-9a-f]+$/i;var wt=/^0b[01]+$/i;var Dt=/^0o[0-7]+$/i;var At=/^(?:0|[1-9]\d*)$/;var Ot=parseFloat,kt=parseInt;var It=Object.prototype;var $t=It.toString;var Tt=Math.floor,Ft=Math.min,St=Math.random;function Mt(n,t){return n+Tt(St()*(t-n+1))}function xt(n,t){t=t==null?vt:t;return!!t&&(typeof n=="number"||At.test(n))&&(n>-1&&n%1==0&&n<t)}function Et(n,t,e){if(!Vt(e)){return false}var r=typeof t;if(r=="number"?Lt(e)&&xt(t,e.length):r=="string"&&t in e){return zt(e[t],n)}return false}function zt(n,t){return n===t||n!==n&&t!==t}function Lt(n){return n!=null&&Wt(n.length)&&!Rt(n)}function Rt(n){var t=Vt(n)?$t.call(n):"";return t==mt||t==yt}function Wt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=vt}function Vt(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function _t(n){return!!n&&typeof n=="object"}function Kt(n){return typeof n=="symbol"||_t(n)&&$t.call(n)==gt}function Nt(n){if(!n){return n===0?n:0}n=Pt(n);if(n===ht||n===-ht){var t=n<0?-1:1;return t*pt}return n===n?n:0}function Pt(n){if(typeof n=="number"){return n}if(Kt(n)){return bt}if(Vt(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=Vt(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(jt,"");var e=wt.test(n);return e||Dt.test(n)?kt(n.slice(2),e?2:8):Ct.test(n)?bt:+n}function Bt(n,t,e){if(e&&typeof e!="boolean"&&Et(n,t,e)){t=e=undefined}if(e===undefined){if(typeof t=="boolean"){e=t;t=undefined}else if(typeof n=="boolean"){e=n;n=undefined}}if(n===undefined&&t===undefined){n=0;t=1}else{n=Nt(n);if(t===undefined){t=n;n=0}else{t=Nt(t)}}if(n>t){var r=n;n=t;t=r}if(e||n%1||t%1){var i=St();return Ft(n+i*(t-n+Ot("1e-"+((i+"").length-1))),t)}return Mt(n,t)}var Gt=Bt;const Xt=".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}";const Ht=Xt;const qt=class{constructor(i){n(this,i);this.dsotOzonContentAnchorClick=t(this,"dsotOzonContentAnchorClick",7);this.dsotTableOfContentsClick=t(this,"dsotTableOfContentsClick",3);this.showCanvas=false;this.openDefault=false;this.mode="document";this.openOrClosed=[];this.openedAnnotation=[];this.filtered=[];this.notApplicable=[];this.activeAnnotationSelectables=[];this.handleRecursiveToggle=(n,t)=>{const e=this.getEmbeddedDocumentComponents(n);if(!e){return}for(const n of e.documentComponents){this.handleOpenToggle(n,t.next)}};this.DocumentComponent=({path:n})=>{const t=n.at(-1);if(!t||this.mode==="table-of-contents"&&t.type==="LID"){return e(r,null)}const{DocumentComponent:i}=this;const o=this.getEmbeddedDocumentComponents(t);return e("dso-document-component",{annotated:this.isAnnotated(t),bevatOntwerpInformatie:!!t.bevatOntwerpInformatie,filtered:this.isOpen(t)?this.isFiltered(t):this.hasFilteredChildren(t),genesteOntwerpInformatie:this.hasNestedDraft(t),gereserveerd:t.gereserveerd,heading:"h2",inhoud:t.inhoud,label:t.labelXml,openAnnotation:this.isOpenedAnnotation(t),notApplicable:this.isNotApplicable(t)||n.some((n=>this.isNotApplicable(n))),nummer:t.nummerXml,onDsoAnnotationToggle:()=>this.handleAnnotationToggle(t),onDsoOpenToggle:()=>this.handleOpenToggle(t),onDsoOzonContentAnchorClick:n=>this.handleOzonContentAnchorClick(n),open:this.isOpen(t),opschrift:t.opschrift,type:t.type,vervallen:t.vervallen,wijzigactie:t.wijzigactie,recursiveToggle:this.recursiveToggleState(t),onDsoRecursiveToggle:n=>this.handleRecursiveToggle(t,n.detail),mode:this.mode,href:this.mode==="table-of-contents"?"/document/"+t.documentTechnischId:undefined,onDsoTableOfContentsClick:n=>this.handleTableOfContentsClick(n)},this.isOpenedAnnotation(t)&&e("div",{slot:"annotations"},e("dso-annotation-locatie",{active:this.isCheckedSlideToggle(t),"gewijzigde-locatie":true,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(t)},e("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(t)&&(o===null||o===void 0?void 0:o.documentComponents.length)&&e("ul",{class:"dso-document-component-list"},o.documentComponents.map((t=>e("li",{key:t.documentTechnischId},e(i,{path:[...n,t]}))))))};this.MenuButton=({documentComponent:n})=>{const{labelXml:t,nummerXml:i,type:o}=n;return e("button",{type:"button",onClick:()=>this.document=n},!t&&!i?e("span",null,e("i",null,o)):e(r,null,t&&e(r,null,e("dso-ozon-content",{content:t,inline:true})),i&&e(r,null," ",e("dso-ozon-content",{content:i,inline:true}))))}}async jsonFileWatcher(){this.openOrClosed=[];await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[];await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(n){var t,e;if((t=n===null||n===void 0?void 0:n._embedded)===null||t===void 0?void 0:t.ontwerpTekststructuurDocumentComponenten){return{documentComponents:n._embedded.ontwerpTekststructuurDocumentComponenten,ontwerp:true}}if((e=n===null||n===void 0?void 0:n._embedded)===null||e===void 0?void 0:e.tekststructuurDocumentComponenten){return{documentComponents:n._embedded.tekststructuurDocumentComponenten,ontwerp:false}}return undefined}concatEmbeddedDocumentComponents(n){var t,e;const r=[...(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents)!==null&&e!==void 0?e:[]];for(const n of r){r.push(...this.concatEmbeddedDocumentComponents(n))}return r}selectRandomDocumentComponents(n,t=[]){const e=this.concatEmbeddedDocumentComponents(n).filter((n=>!t.includes(n)));const r=Gt(0,Math.floor(e.length/10));return lt(e,r)}async loadData(){var n,t;if(!this.jsonFile){this.response=undefined;this.document=undefined;return}this.response=await fetch(this.jsonFile).then((n=>n.json()));this.document=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents[0];if(((t=this.document)===null||t===void 0?void 0:t.type)==="LICHAAM"){this.notApplicable=this.selectRandomDocumentComponents(this.document);this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)}else{this.notApplicable=[];this.filtered=[]}}handleOpenToggle(n,t){const e=typeof t==="boolean"?t:this.openOrClosed.includes(n);if(e&&this.openOrClosed.includes(n)){this.openOrClosed=this.openOrClosed.filter((t=>t!==n))}else if(!e&&!this.openOrClosed.includes(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleAnnotationToggle(n){this.openedAnnotation=this.isOpenedAnnotation(n)?this.openedAnnotation.filter((t=>t!==n)):[...this.openedAnnotation,n];if(!this.isOpen(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleSelectableChange(n){this.activeAnnotationSelectables=this.isCheckedSlideToggle(n)?this.activeAnnotationSelectables.filter((t=>t!==n)):[...this.activeAnnotationSelectables,n]}handleOzonContentAnchorClick(n){this.dsotOzonContentAnchorClick.emit(n.detail)}handleTableOfContentsClick(n){this.dsotTableOfContentsClick.emit(n.detail)}isCheckedSlideToggle(n){return this.activeAnnotationSelectables.includes(n)}hasFilteredChildren(n){var t,e;return this.filtered.includes(n)||((e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>this.hasFilteredChildren(n))))!==null&&e!==void 0?e:false)}isOpen(n){return n.type==="LID"||this.openDefault?!this.openOrClosed.includes(n):this.openOrClosed.includes(n)}isOpenedAnnotation(n){return this.openedAnnotation.includes(n)}isFiltered(n){return this.filtered.includes(n)}isNotApplicable(n){return this.notApplicable.includes(n)}hasNestedDraft(n){var t,e;return(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>!!n.bevatOntwerpInformatie||this.hasNestedDraft(n))))!==null&&e!==void 0?e:false}showContent(n){var t;return this.isOpen(n)&&!!(((t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.length)||n.inhoud)}recursiveToggleState(n){const t=this.getEmbeddedDocumentComponents(n);if(!t||t.documentComponents.length<=1||!t.documentComponents.some((n=>n.type==="ARTIKEL"))){return undefined}return t.documentComponents.every((n=>this.isOpen(n)))}isAnnotated(n){return n.type==="DIVISIE"||n.type==="DIVISIETEKST"||n.type==="ARTIKEL"||n.type==="LID"}render(){var n,t;const{DocumentComponent:r,MenuButton:i}=this;return e("dso-responsive-element",{key:"0bdcbedac77e5fff00d9be2e0b2e725edf2ec07f",class:"dso-document-components"},e("div",{key:"b9068348ddfc4c5dd46d4b65eeb2a0bb28a02d8b",class:"dso-navbar"},e("ul",{key:"e57f4fbd2da501279edd93b0e29fa210319ded13",class:"dso-nav dso-nav-sub"},(t=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents)===null||t===void 0?void 0:t.map((n=>e("li",{class:this.document===n?"dso-active":undefined},e(i,{documentComponent:n})))))),this.document&&e(r,{key:"64016b330af123112c59778dcd783c2a22f3a71f",path:[this.document]}))}static get watchers(){return{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}}};qt.style=Ht;export{qt as dsot_document_component_demo};
|
|
2
|
+
//# sourceMappingURL=p-60e40f8f.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as n,f as s,h as t,F as c,H as d,a as e}from"./p-abc59cdf.js";const a={success:"succes:",info:"info:",warning:"waarschuwing:",danger:"fout:",error:"fout:"};const i='*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus-visible{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:flex-start;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding-block:12px;padding-inline:16px;text-align:start;inline-size:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button dso-icon.dso-section-handle-chevron,:host .dso-section-handle>a dso-icon.dso-section-handle-chevron{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(0)}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-inline-end:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-inline-start:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-attachments-counter,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-inline-start:16px}:host .dso-section-handle>button>dso-label,:host .dso-section-handle>a>dso-label{margin-inline-start:auto;padding-inline-start:8px;word-break:normal}:host .dso-section-handle>button>dso-label+dso-icon:last-child,:host .dso-section-handle>button>dso-label+.dso-section-handle-addons:last-child,:host .dso-section-handle>a>dso-label+dso-icon:last-child,:host .dso-section-handle>a>dso-label+.dso-section-handle-addons:last-child{margin-inline-start:8px}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:first-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:first-child{transform:rotate(90deg)}:host([open]:not([open=false])) .dso-section-handle>button .dso-section-handle-chevron:last-child,:host([open]:not([open=false])) .dso-section-handle>a .dso-section-handle-chevron:last-child{transform:rotate(-180deg)}.dso-section-body{background-color:#fff;border-block-start:0}.dso-section-body .dso-section-body-content{padding-block:20px 16px;padding-inline:16px}:host(.dso-accordion-default){border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle .dso-status{text-decoration:underline}:host(.dso-accordion-default) .dso-section-body{border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle{background-color:#8b4a6a;border-radius:0}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-handle .dso-status{color:#000}:host(.dso-accordion-compact) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-compact-black) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black) .dso-section-handle a,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black) .dso-section-handle a:hover,:host(.dso-accordion-compact-black) .dso-section-handle a:active,:host(.dso-accordion-compact-black) .dso-section-handle a.active,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider):hover,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{border-block-end:1px solid transparent;border-block-start:1px solid #ccc}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider){color:#000;padding-block-end:11px;padding-inline-start:0;padding-block-start:11px}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a:active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle a.active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):hover,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider):active,:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle button:not(.dso-slider).active{color:#000}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-body .dso-section-body-content{padding-inline-start:32px;padding-block-start:0;padding-inline-end:0}:host(.dso-accordion-compact-black.dso-accordion-section-activate) .dso-section-handle{display:flex}:host(.dso-accordion-compact-black.dso-accordion-section-activate) dso-slide-toggle{margin-block-start:11px;margin-inline:8px}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe){background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) .dso-section-body{background-color:#e4f1d4}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) a:is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder){font-family:sans-serif}}:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) .dso-section-body{background-color:#f5d8dc}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-handle button{padding-inline-start:16px}:host(.dso-accordion-compact-black.dso-accordion-reverse-align) .dso-section-body .dso-section-body-content{padding-inline-start:16px;padding-inline-end:0}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a.active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:hover,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button:active,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button.active{color:#000}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact-black[open]:not([open=false]))>.dso-section-body{border-block-start:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body{padding-block-end:0}:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=false]))>.dso-section-body dso-accordion-section:last-child{border-block-end:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#000}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5}:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#000;--dso-icon:var(--di-paperclip-zwart)}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not([open=false]):not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=false])){background-color:#fff}:host(.dso-accordion-neutral) .dso-section-handle{background-color:transparent;border:none;border-radius:4px;margin-block-end:2px}:host(.dso-accordion-neutral) .dso-section-handle a,:host(.dso-accordion-neutral) .dso-section-handle button{color:#000;padding-block:5px;padding-inline:0 16px}:host(.dso-accordion-neutral) .dso-section-handle a:hover,:host(.dso-accordion-neutral) .dso-section-handle a:active,:host(.dso-accordion-neutral) .dso-section-handle a.active,:host(.dso-accordion-neutral) .dso-section-handle button:hover,:host(.dso-accordion-neutral) .dso-section-handle button:active,:host(.dso-accordion-neutral) .dso-section-handle button.active{color:#000}:host(.dso-accordion-neutral) .dso-section-handle a .info-icon,:host(.dso-accordion-neutral) .dso-section-handle button .info-icon{color:#39870c;margin-inline-start:8px}:host(.dso-accordion-neutral) .dso-section-handle dso-icon,:host(.dso-accordion-neutral) .dso-section-handle svg.di{vertical-align:top}:host(.dso-accordion-neutral) .dso-section-body[open],:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide){background-color:transparent;border:1px solid #275937;box-shadow:1px 3px 4px rgba(0, 0, 0, 0.5);margin-block:-2px 0}:host(.dso-accordion-neutral) .dso-section-body[open].dso-animate-ready,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide).dso-animate-ready{transition-property:grid-template-rows, margin-block, border}:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:16px}@media screen and (min-width: 480px){:host(.dso-accordion-neutral) .dso-section-body[open] .dso-section-body-content,:host(.dso-accordion-neutral) .dso-section-body:not(.dso-hide) .dso-section-body-content{padding-block:16px 24px;padding-inline:32px}}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle{background-color:transparant;border-radius:0;border-start-start-radius:4px;border-start-end-radius:4px}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button{color:#000}:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-neutral[open]:not([open=false]))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-neutral[open]:not([open=false])) .dso-section-body{margin-block-end:16px;margin-block-start:2px}:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=false])) .dso-section-body{background-color:#e5e5e5}';const r=i;const l=window["_dsoLog"]===true?console.log.bind(console.log):function(){};const h=({handleUrl:o,onClick:n,open:s,showSlideToggle:d,active:e,onActiveChange:a,handleElementRef:i},r)=>{if(o){return t(c,null,t("a",{href:o,onClick:n,"aria-expanded":s?"true":"false",ref:i},r),d&&t("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))}return t(c,null,t("button",{type:"button",onClick:n,"aria-expanded":s?"true":"false",ref:i},r),d&&t("dso-slide-toggle",{accessibleLabel:"Toon op kaart",checked:e,onDsoActiveChange:a}))};const p=({heading:o,ref:n},s)=>{switch(o){default:case"h2":return t("h2",{ref:n,class:"dso-section-handle"},s);case"h3":return t("h3",{ref:n,class:"dso-section-handle"},s);case"h4":return t("h4",{ref:n,class:"dso-section-handle"},s);case"h5":return t("h5",{ref:n,class:"dso-section-handle"},s)}};const b=({state:o,icon:n,attachmentCount:s})=>{if(o){return t(u,{state:o})}if(s){return t("dso-attachments-counter",{count:s})}if(n){return t("dso-icon",{icon:n})}};const u=({state:o})=>{if(o==="error"){return t("dso-icon",{icon:"status-error"})}if(o==="danger"){return t("dso-icon",{icon:"status-danger"})}if(o==="success"){return t("dso-icon",{icon:"status-success"})}if(o==="info"){return t("dso-icon",{icon:"status-info"})}if(o==="warning"){return t("dso-icon",{icon:"status-warning"})}};const f=class{constructor(s){o(this,s);this.dsoActiveChange=n(this,"dsoActiveChange",7);this.dsoToggleClick=n(this,"dsoToggleClick",3);this.dsoAnimationStart=n(this,"dsoAnimationStart",3);this.dsoAnimationEnd=n(this,"dsoAnimationEnd",3);this.heading="h2";this.open=false;this.hasNestedAccordion=false;this.activatable=false;this.active=false;this.hover=false;this.handleClick=o=>{this.dsoToggleClick.emit({originalEvent:o,open:!this.open})};this.handleActiveChange=o=>{this.dsoActiveChange.emit({current:Boolean(this.active),next:!this.active,originalEvent:o})};this.handleExpandableAnimationStart=o=>{this.dsoAnimationStart.emit({animation:this.open?"opening":"closing",scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})};this.handleExpandableAnimationEnd=o=>{this.dsoAnimationEnd.emit({open:this.open,scrollIntoView:(n="auto")=>this.scrollIntoView(o.detail.bodyHeight,n)})}}async focusHandle(){var o;(o=this.handleElementRef)===null||o===void 0?void 0:o.focus()}get containsNestedAccordion(){return this.host.querySelector("dso-accordion")!==null}componentWillLoad(){var o;(o=this.accordion)===null||o===void 0?void 0:o._getState().then((o=>{this.accordionState=o;s(this.host)}))}get isNeutral(){var o;return((o=this.accordionState)===null||o===void 0?void 0:o.variant)==="neutral"}async scrollIntoView(o,n="auto"){var s,t;l(`DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(o)}, behavior: ${JSON.stringify(n)})`);const c=(s=this.sectionBody)===null||s===void 0?void 0:s.getBoundingClientRect();const d=(t=this.sectionHeading)===null||t===void 0?void 0:t.getBoundingClientRect();l(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(c)};`);l(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(d)};`);l(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);l(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);if(!c||!d||!this.accordionState){l(`DSO Toolkit [Accordion Section] returning`);return}const e=d.top+d.height+(this.open?o!==null&&o!==void 0?o:0:0);l(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(e)};`);l(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);const a=this.host.getBoundingClientRect();const i=window.scrollY||document.documentElement.scrollTop||document.body.scrollTop;const r=document.documentElement.clientTop||document.body.clientTop||0;const h=a.top+i-r;l("DSO Toolkit [Accordion Section] scroll",{box:a,scrollTop:i,clientTop:r,top:h});if(e>window.innerHeight){l(`DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(e>window.innerHeight)};`);const o=e-d.top;const s=o>window.innerHeight;l(`DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(o)};`);l(`DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(s)};`);window.scrollTo({top:s?h:h-(window.innerHeight-o),behavior:n})}else if(d.top<0){l(`DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(d.top<0)};`);window.scrollTo({top:h,behavior:n})}}get accordion(){return this.host.closest("dso-accordion")}render(){var o;const{variant:n,reverseAlign:s}=(o=this.accordionState)!==null&&o!==void 0?o:{};const e=!!this.statusDescription||!!this.status||!!this.icon||!!this.attachmentCount;const i=this.activatable&&n==="compact-black"&&!s;return t(d,{key:"302ecdd924ef798129b5392bab0c4f68f8f336c3",class:{"dso-accordion-section":true,["dso-accordion-"+n]:true,"dso-nested-accordion":this.hasNestedAccordion||this.containsNestedAccordion,"dso-accordion-reverse-align":s!==null&&s!==void 0?s:false,["dso-accordion-wijzigactie-"+this.wijzigactie]:!!this.wijzigactie,"dso-accordion-section-activate":i},hidden:!n,onMouseenter:()=>this.hover=true,onMouseleave:()=>this.hover=false},t(p,{key:"d7649622cd04633ade160f308f8835c4fd73b9a2",heading:this.heading,ref:o=>this.sectionHeading=o},t(h,{key:"2a1d87aca48d30b232c2366202820e2b5b7ed50c",handleUrl:this.handleUrl,onClick:this.handleClick,open:this.open,showSlideToggle:i,active:this.active,onActiveChange:this.handleActiveChange,handleElementRef:o=>this.handleElementRef=o},s?t(c,null,this.icon&&t("div",{class:"dso-section-handle-addons"},t(b,{icon:this.icon})),t("dso-renvooi",{value:this.handleTitle}),this.label&&t("dso-label",{status:this.labelStatus,compact:true},this.label),t("div",{class:"dso-section-handle-addons"},this.statusDescription&&t("span",{class:"dso-status"},this.statusDescription),t("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-down"}))):t(c,null,t("dso-icon",{class:"dso-section-handle-chevron",icon:"chevron-right"}),this.status&&t("span",{class:"sr-only"},a[this.status]),t("span",null,t("dso-renvooi",{value:this.handleTitle}),this.isNeutral&&t("dso-icon",{class:"info-icon",icon:this.open||this.hover?"info-active":"info"})),this.label&&t("dso-label",{status:this.labelStatus,compact:true},this.label),e&&t("div",{class:"dso-section-handle-addons"},this.statusDescription&&t("span",{class:"dso-status"},this.statusDescription),t(b,{state:this.status,icon:this.icon,attachmentCount:this.attachmentCount}))))),t("dso-expandable",{key:"3290c74aea72b6a4fcc4c6e2bf313346ba4bf330",class:"dso-section-body",open:this.open,enableAnimation:true,minimumHeight:this.isNeutral?0:4,onDsoExpandableAnimationStart:this.handleExpandableAnimationStart,onDsoExpandableAnimationEnd:this.handleExpandableAnimationEnd},t("div",{key:"0d629aacbef4cba170e3809c89bc94be3e7330e1",class:"dso-section-body-content",ref:o=>this.sectionBody=o},t("slot",{key:"ad20e4c72f67b5e59adc97be338fd414ee3f374b"}))))}get host(){return e(this)}};f.style=r;export{f as dso_accordion_section};
|
|
2
|
+
//# sourceMappingURL=p-631af6b1.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stateMap","success","info","warning","danger","error","accordionSectionCss","DsoAccordionSectionStyle0","log","window","console","bind","HandleElement","handleUrl","onClick","open","showSlideToggle","active","onActiveChange","handleElementRef","children","h","Fragment","href","ref","accessibleLabel","checked","onDsoActiveChange","type","Handle","heading","class","HandleIcon","state","icon","attachmentCount","HandleStateIcon","count","AccordionSection","constructor","hostRef","this","hasNestedAccordion","activatable","hover","handleClick","event","dsoToggleClick","emit","originalEvent","handleActiveChange","dsoActiveChange","current","Boolean","next","handleExpandableAnimationStart","e","dsoAnimationStart","animation","scrollIntoView","behavior","detail","bodyHeight","handleExpandableAnimationEnd","dsoAnimationEnd","focusHandle","_a","focus","containsNestedAccordion","host","querySelector","componentWillLoad","accordion","_getState","then","accordionState","forceUpdate","isNeutral","variant","JSON","stringify","bodyClientRect","sectionBody","getBoundingClientRect","headingClientRect","_b","sectionHeading","sectionBottomY","top","height","innerHeight","box","scrollTop","scrollY","document","documentElement","body","clientTop","expandedAccordionHeight","shouldScrollToTopOfSection","scrollTo","closest","render","reverseAlign","hasAddons","statusDescription","status","Host","key","wijzigactie","hidden","onMouseenter","onMouseleave","element","value","handleTitle","label","labelStatus","compact","enableAnimation","minimumHeight","onDsoExpandableAnimationStart","onDsoExpandableAnimationEnd"],"sources":["src/components/accordion/components/accordion-section.interfaces.ts","src/components/accordion/components/accordion-section.scss?tag=dso-accordion-section&encapsulation=shadow","src/components/accordion/components/accordion-section.tsx"],"sourcesContent":["export type AccordionSectionState = \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\";\r\n\r\nexport type AccordionHeading = \"h2\" | \"h3\" | \"h4\" | \"h5\";\r\n\r\nexport type AccordionSectionWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport const stateMap: Record<AccordionSectionState, string> = {\r\n success: \"succes:\",\r\n info: \"info:\",\r\n warning: \"waarschuwing:\",\r\n danger: \"fout:\",\r\n error: \"fout:\",\r\n};\r\n\r\nexport interface AccordionSectionToggleClickEvent {\r\n /**\r\n * The original MouseEvent that triggered the click.\r\n *\r\n * In case the Section Handle is an <a> this event can be used to preventDefault() so the framework router is reponsible for navigating the user.\r\n */\r\n originalEvent?: MouseEvent;\r\n\r\n /**\r\n * The requested state. If the Accordion Section is closed, `open = true`.\r\n */\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionAnimationStartEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * Whether or not the Accordion opening or closing.\r\n */\r\n animation: \"opening\" | \"closing\";\r\n}\r\n\r\nexport interface AccordionSectionAnimationEndEvent {\r\n /**\r\n * Helper function to scroll the Accordion Section into view.\r\n */\r\n scrollIntoView(behavior?: ScrollBehavior): void;\r\n\r\n /**\r\n * The state of the Accordion Section after animation.\r\n */\r\n open: boolean;\r\n}\r\n\r\nexport interface AccordionSectionActiveChangeEvent {\r\n /**\r\n * De current status van de Accordion Section.\r\n */\r\n current: boolean;\r\n\r\n /**\r\n * De desired status van de Accordion Section.\r\n */\r\n next: boolean;\r\n\r\n originalEvent: Event;\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/accordion\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"accordion-section-theme-compact\";\r\n@use \"accordion-section-theme-compact-black\";\r\n@use \"accordion-section-theme-conclusion\";\r\n@use \"accordion-section-theme-default\";\r\n@use \"accordion-section-theme-neutral\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n display: block;\r\n\r\n .dso-section-handle {\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n position: relative;\r\n\r\n > a:active {\r\n text-decoration: none;\r\n }\r\n\r\n a {\r\n @include anchor.clean();\r\n }\r\n\r\n .dso-status {\r\n font-weight: 400;\r\n }\r\n }\r\n\r\n .dso-section-handle > button,\r\n .dso-section-handle > a {\r\n align-items: flex-start;\r\n background-color: transparent;\r\n border: 0;\r\n cursor: pointer;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n font-size: 1em;\r\n font-weight: 600;\r\n line-height: accordion.$handle-line-height;\r\n margin: 0;\r\n padding-block: accordion.$block-padding;\r\n padding-inline: accordion.$inline-padding;\r\n text-align: start;\r\n inline-size: 100%;\r\n word-break: break-word;\r\n\r\n dso-icon {\r\n flex-shrink: 0;\r\n\r\n &.dso-section-handle-chevron {\r\n @include utilities.transition(transform);\r\n\r\n transform: rotate(0);\r\n }\r\n }\r\n\r\n > .dso-section-handle-addons:first-child,\r\n > dso-icon:first-child {\r\n margin-inline-end: units.$u1;\r\n }\r\n\r\n > dso-icon:last-child {\r\n margin-inline-start: auto;\r\n }\r\n\r\n > .dso-section-handle-addons:last-child {\r\n margin-inline-start: auto;\r\n\r\n dso-attachments-counter,\r\n dso-icon {\r\n margin-inline-start: units.$u2;\r\n }\r\n }\r\n\r\n > dso-label {\r\n margin-inline-start: auto;\r\n padding-inline-start: units.$u1;\r\n word-break: normal;\r\n\r\n & + dso-icon:last-child,\r\n & + .dso-section-handle-addons:last-child {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([open]:not([open=\"false\"])) {\r\n .dso-section-handle {\r\n > button,\r\n > a {\r\n .dso-section-handle-chevron {\r\n &:first-child {\r\n transform: rotate(90deg);\r\n }\r\n\r\n &:last-child {\r\n transform: rotate(-180deg);\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-section-body {\r\n background-color: colors.$wit;\r\n border-block-start: 0;\r\n\r\n .dso-section-body-content {\r\n padding-block: units.$u2 + accordion.$border-radius units.$u2;\r\n padding-inline: units.$u2;\r\n }\r\n}\r\n\r\n// Default\r\n:host(.dso-accordion-default) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default();\r\n}\r\n\r\n:host(.dso-accordion-default[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open();\r\n}\r\n\r\n:host(.dso-accordion-default.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-default.dso-web-component-accordion-default-open-nested();\r\n}\r\n\r\n// Compact\r\n:host(.dso-accordion-compact) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open();\r\n}\r\n\r\n:host(.dso-accordion-compact.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact.dso-web-component-accordion-compact-open-nested();\r\n}\r\n\r\n// Compact black\r\n:host(.dso-accordion-compact-black) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-section-activate) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black();\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-activate();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-voegtoe) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-voegtoe();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-wijzigactie-verwijder) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-verwijder();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-accordion-reverse-align) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-reverse();\r\n}\r\n\r\n:host(.dso-accordion-compact-black[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open();\r\n}\r\n\r\n:host(.dso-accordion-compact-black.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-compact-black.dso-web-component-accordion-compact-black-open-nested();\r\n}\r\n\r\n// Conclusion\r\n:host(.dso-accordion-conclusion) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion();\r\n}\r\n\r\n:host(.dso-accordion-conclusion[open]:not([open=\"false\"]):not(.dso-nested-accordion)) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open();\r\n}\r\n\r\n:host(.dso-accordion-conclusion.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-conclusion.dso-web-component-accordion-conclusion-open-nested();\r\n}\r\n\r\n// Neutral\r\n:host(.dso-accordion-neutral) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral();\r\n}\r\n\r\n:host(.dso-accordion-neutral[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open();\r\n}\r\n\r\n:host(.dso-accordion-neutral.dso-nested-accordion[open]:not([open=\"false\"])) {\r\n @include accordion-section-theme-neutral.dso-web-component-accordion-neutral-open-nested();\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n forceUpdate,\r\n Fragment,\r\n FunctionalComponent,\r\n h,\r\n Host,\r\n Method,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\n\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\nimport {\r\n AccordionHeading,\r\n AccordionSectionActiveChangeEvent,\r\n AccordionSectionAnimationEndEvent,\r\n AccordionSectionAnimationStartEvent,\r\n AccordionSectionState,\r\n AccordionSectionToggleClickEvent,\r\n AccordionSectionWijzigactie,\r\n stateMap,\r\n} from \"./accordion-section.interfaces\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\n\r\n// eslint-disable-next-line no-console\r\nconst log = (window as any)[\"_dsoLog\"] === true ? console.log.bind(console.log) : function () {};\r\n\r\nconst HandleElement: FunctionalComponent<{\r\n handleUrl: string | undefined;\r\n open: boolean;\r\n showSlideToggle: boolean;\r\n active: boolean;\r\n onActiveChange: (e: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => void;\r\n handleElementRef: (element: HTMLAnchorElement | HTMLButtonElement | undefined) => void;\r\n onClick: (e: MouseEvent) => void;\r\n}> = ({ handleUrl, onClick, open, showSlideToggle, active, onActiveChange, handleElementRef }, children) => {\r\n if (handleUrl) {\r\n return (\r\n <>\r\n <a href={handleUrl} onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </a>\r\n {showSlideToggle && (\r\n <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n )}\r\n </>\r\n );\r\n }\r\n\r\n return (\r\n <>\r\n <button type=\"button\" onClick={onClick} aria-expanded={open ? \"true\" : \"false\"} ref={handleElementRef}>\r\n {children}\r\n </button>\r\n {showSlideToggle && (\r\n <dso-slide-toggle accessibleLabel=\"Toon op kaart\" checked={active} onDsoActiveChange={onActiveChange} />\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nconst Handle: FunctionalComponent<{\r\n heading: AccordionHeading;\r\n ref: (element: HTMLHeadingElement | undefined) => void;\r\n}> = ({ heading, ref }, children) => {\r\n switch (heading) {\r\n default:\r\n case \"h2\":\r\n return (\r\n <h2 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h2>\r\n );\r\n case \"h3\":\r\n return (\r\n <h3 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h3>\r\n );\r\n case \"h4\":\r\n return (\r\n <h4 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h4>\r\n );\r\n case \"h5\":\r\n return (\r\n <h5 ref={ref} class=\"dso-section-handle\">\r\n {children}\r\n </h5>\r\n );\r\n }\r\n};\r\n\r\nconst HandleIcon: FunctionalComponent<{\r\n state?: AccordionSectionState;\r\n icon?: string;\r\n attachmentCount?: number;\r\n}> = ({ state, icon, attachmentCount }) => {\r\n if (state) {\r\n return <HandleStateIcon state={state} />;\r\n }\r\n\r\n if (attachmentCount) {\r\n return <dso-attachments-counter count={attachmentCount}></dso-attachments-counter>;\r\n }\r\n\r\n if (icon) {\r\n return <dso-icon icon={icon}></dso-icon>;\r\n }\r\n};\r\n\r\nconst HandleStateIcon: FunctionalComponent<{ state: AccordionSectionState }> = ({ state }) => {\r\n if (state === \"error\") {\r\n return <dso-icon icon=\"status-error\"></dso-icon>;\r\n }\r\n\r\n if (state === \"danger\") {\r\n return <dso-icon icon=\"status-danger\"></dso-icon>;\r\n }\r\n\r\n if (state === \"success\") {\r\n return <dso-icon icon=\"status-success\"></dso-icon>;\r\n }\r\n\r\n if (state === \"info\") {\r\n return <dso-icon icon=\"status-info\"></dso-icon>;\r\n }\r\n\r\n if (state === \"warning\") {\r\n return <dso-icon icon=\"status-warning\"></dso-icon>;\r\n }\r\n};\r\n\r\n@Component({\r\n tag: \"dso-accordion-section\",\r\n styleUrl: \"accordion-section.scss\",\r\n shadow: true,\r\n})\r\nexport class AccordionSection implements ComponentInterface {\r\n private accordionState?: AccordionInternalState;\r\n\r\n private sectionBody?: HTMLDivElement;\r\n\r\n private sectionHeading?: HTMLHeadingElement;\r\n\r\n @Element()\r\n host!: HTMLDsoAccordionSectionElement;\r\n\r\n /**\r\n * The title of the handle\r\n */\r\n @Prop()\r\n handleTitle!: RenvooiValue | undefined;\r\n\r\n /**\r\n * An optional 'wijzigactie' that signals if the section is added or removed.\r\n */\r\n @Prop()\r\n wijzigactie?: AccordionSectionWijzigactie;\r\n\r\n /**\r\n * Which heading element to use.\r\n */\r\n @Prop()\r\n heading: AccordionHeading = \"h2\";\r\n\r\n /**\r\n * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`\r\n */\r\n @Prop()\r\n handleUrl?: string;\r\n\r\n /**\r\n * `state` takes precedence over `attachmentCount` and `icon`\r\n */\r\n @Prop()\r\n status?: AccordionSectionState;\r\n\r\n /**\r\n * `attachmentCount` takes precedence over `icon`\r\n */\r\n @Prop()\r\n attachmentCount?: number;\r\n\r\n /**\r\n * To set an icon in the heading handle.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n /**\r\n * The status of the section.\r\n */\r\n @Prop()\r\n statusDescription?: string;\r\n\r\n /**\r\n * Set the Accordion Section open.\r\n */\r\n @Prop({ reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Set when this Accordion Section contains or will contain an Accordion.\r\n */\r\n @Prop({ reflect: true })\r\n hasNestedAccordion = false;\r\n\r\n /**\r\n * The label to be displayed in the heading handle inside a Label (optional)\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The status of the Label in the heading handle (optional)\r\n */\r\n @Prop()\r\n labelStatus?: LabelStatus;\r\n\r\n /**\r\n * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays\r\n * on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false.\r\n */\r\n @Prop({ reflect: true })\r\n activatable = false;\r\n\r\n /**\r\n * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is\r\n * `activatable`.\r\n */\r\n @Prop({ reflect: true })\r\n active = false;\r\n\r\n /**\r\n * An optional event listener for changes on the value of property `active`.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AccordionSectionActiveChangeEvent>;\r\n\r\n /**\r\n * Calling this method will set focus to the handle.\r\n */\r\n @Method()\r\n async focusHandle() {\r\n this.handleElementRef?.focus();\r\n }\r\n\r\n @State()\r\n hover = false;\r\n\r\n get containsNestedAccordion() {\r\n return this.host.querySelector(\"dso-accordion\") !== null;\r\n }\r\n\r\n componentWillLoad() {\r\n this.accordion?._getState().then((state) => {\r\n this.accordionState = state;\r\n\r\n forceUpdate(this.host);\r\n });\r\n }\r\n\r\n get isNeutral() {\r\n return this.accordionState?.variant === \"neutral\";\r\n }\r\n\r\n private async scrollIntoView(bodyHeight: number | undefined, behavior: ScrollBehavior = \"auto\"): Promise<void> {\r\n log(\r\n `DSO Toolkit [Accordion Section] scrollIntoView(bodyHeight: ${JSON.stringify(\r\n bodyHeight,\r\n )}, behavior: ${JSON.stringify(behavior)})`,\r\n );\r\n\r\n const bodyClientRect = this.sectionBody?.getBoundingClientRect();\r\n const headingClientRect = this.sectionHeading?.getBoundingClientRect();\r\n\r\n log(`DSO Toolkit [Accordion Section] const bodyClientRect = ${JSON.stringify(bodyClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] const headingClientRect = ${JSON.stringify(headingClientRect)};`);\r\n log(`DSO Toolkit [Accordion Section] this.accordionState = ${JSON.stringify(this.accordionState)};`);\r\n log(`DSO Toolkit [Accordion Section] this.open = ${JSON.stringify(this.open)};`);\r\n\r\n if (!bodyClientRect || !headingClientRect || !this.accordionState) {\r\n log(`DSO Toolkit [Accordion Section] returning`);\r\n\r\n return;\r\n }\r\n\r\n // this y is relative to the top of the viewport.\r\n const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (bodyHeight ?? 0) : 0);\r\n\r\n log(`DSO Toolkit [Accordion Section] const sectionBottomY = ${JSON.stringify(sectionBottomY)};`);\r\n log(`DSO Toolkit [Accordion Section] window.innerHeight = ${JSON.stringify(window.innerHeight)};`);\r\n\r\n const box = this.host.getBoundingClientRect();\r\n\r\n const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;\r\n const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;\r\n const top = box.top + scrollTop - clientTop;\r\n\r\n log(\"DSO Toolkit [Accordion Section] scroll\", { box, scrollTop, clientTop, top });\r\n\r\n if (sectionBottomY > window.innerHeight) {\r\n log(\r\n `DSO Toolkit [Accordion Section] sectionBottomY > window.innerHeight === ${JSON.stringify(\r\n sectionBottomY > window.innerHeight,\r\n )};`,\r\n );\r\n\r\n const expandedAccordionHeight = sectionBottomY - headingClientRect.top;\r\n const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;\r\n\r\n log(\r\n `DSO Toolkit [Accordion Section] const expandedAccordionHeight = ${JSON.stringify(expandedAccordionHeight)};`,\r\n );\r\n log(\r\n `DSO Toolkit [Accordion Section] const shouldScrollToTopOfSection = ${JSON.stringify(\r\n shouldScrollToTopOfSection,\r\n )};`,\r\n );\r\n\r\n window.scrollTo({\r\n top: shouldScrollToTopOfSection ? top : top - (window.innerHeight - expandedAccordionHeight),\r\n behavior,\r\n });\r\n } else if (headingClientRect.top < 0) {\r\n log(\r\n `DSO Toolkit [Accordion Section] headingClientRect.top < 0 === ${JSON.stringify(headingClientRect.top < 0)};`,\r\n );\r\n\r\n window.scrollTo({\r\n top,\r\n behavior,\r\n });\r\n }\r\n }\r\n\r\n private get accordion() {\r\n return this.host.closest(\"dso-accordion\");\r\n }\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n this.dsoToggleClick.emit({\r\n originalEvent: event,\r\n open: !this.open,\r\n });\r\n };\r\n\r\n private handleActiveChange = (event: DsoSlideToggleCustomEvent<SlideToggleActiveEvent>) => {\r\n this.dsoActiveChange.emit({\r\n current: Boolean(this.active),\r\n next: !this.active,\r\n originalEvent: event,\r\n });\r\n };\r\n\r\n private handleExpandableAnimationStart = (e: CustomEvent<any>) => {\r\n this.dsoAnimationStart.emit({\r\n animation: this.open ? \"opening\" : \"closing\",\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n private handleExpandableAnimationEnd = (e: CustomEvent<ExpandableAnimationEndEvent>) => {\r\n this.dsoAnimationEnd.emit({\r\n open: this.open,\r\n scrollIntoView: (behavior: ScrollBehavior = \"auto\") => this.scrollIntoView(e.detail.bodyHeight, behavior),\r\n });\r\n };\r\n\r\n /**\r\n * Emitted when the user activates the toggle button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoToggleClick!: EventEmitter<AccordionSectionToggleClickEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section starts its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationStart!: EventEmitter<AccordionSectionAnimationStartEvent>;\r\n\r\n /**\r\n * Event emitted when the Accordion Section completes its toggle animation.\r\n */\r\n @Event({ bubbles: false })\r\n dsoAnimationEnd!: EventEmitter<AccordionSectionAnimationEndEvent>;\r\n\r\n private handleElementRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n render() {\r\n const { variant, reverseAlign } = this.accordionState ?? {};\r\n const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;\r\n const showSlideToggle = this.activatable && variant === \"compact-black\" && !reverseAlign;\r\n\r\n return (\r\n <Host\r\n class={{\r\n \"dso-accordion-section\": true,\r\n [\"dso-accordion-\" + variant]: true,\r\n \"dso-nested-accordion\": this.hasNestedAccordion || this.containsNestedAccordion,\r\n \"dso-accordion-reverse-align\": reverseAlign ?? false,\r\n [\"dso-accordion-wijzigactie-\" + this.wijzigactie]: !!this.wijzigactie,\r\n \"dso-accordion-section-activate\": showSlideToggle,\r\n }}\r\n hidden={!variant}\r\n onMouseenter={() => (this.hover = true)}\r\n onMouseleave={() => (this.hover = false)}\r\n >\r\n <Handle heading={this.heading} ref={(element) => (this.sectionHeading = element)}>\r\n <HandleElement\r\n handleUrl={this.handleUrl}\r\n onClick={this.handleClick}\r\n open={this.open}\r\n showSlideToggle={showSlideToggle}\r\n active={this.active}\r\n onActiveChange={this.handleActiveChange}\r\n handleElementRef={(e) => (this.handleElementRef = e)}\r\n >\r\n {reverseAlign ? (\r\n <Fragment>\r\n {this.icon && (\r\n <div class=\"dso-section-handle-addons\">\r\n <HandleIcon icon={this.icon} />\r\n </div>\r\n )}\r\n <dso-renvooi value={this.handleTitle} />\r\n {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-down\"></dso-icon>\r\n </div>\r\n </Fragment>\r\n ) : (\r\n <Fragment>\r\n <dso-icon class=\"dso-section-handle-chevron\" icon=\"chevron-right\"></dso-icon>\r\n {this.status && <span class=\"sr-only\">{stateMap[this.status]}</span>}\r\n <span>\r\n <dso-renvooi value={this.handleTitle} />\r\n {this.isNeutral && (\r\n <dso-icon class=\"info-icon\" icon={this.open || this.hover ? \"info-active\" : \"info\"} />\r\n )}\r\n </span>\r\n {this.label && (\r\n <dso-label status={this.labelStatus} compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n {hasAddons && (\r\n <div class=\"dso-section-handle-addons\">\r\n {this.statusDescription && <span class=\"dso-status\">{this.statusDescription}</span>}\r\n <HandleIcon state={this.status} icon={this.icon} attachmentCount={this.attachmentCount} />\r\n </div>\r\n )}\r\n </Fragment>\r\n )}\r\n </HandleElement>\r\n </Handle>\r\n <dso-expandable\r\n class=\"dso-section-body\"\r\n open={this.open}\r\n enableAnimation\r\n minimumHeight={this.isNeutral ? 0 : 4}\r\n onDsoExpandableAnimationStart={this.handleExpandableAnimationStart}\r\n onDsoExpandableAnimationEnd={this.handleExpandableAnimationEnd}\r\n >\r\n <div class=\"dso-section-body-content\" ref={(element) => (this.sectionBody = element)}>\r\n <slot />\r\n </div>\r\n </dso-expandable>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"8EAMO,MAAMA,EAAkD,CAC7DC,QAAS,UACTC,KAAM,QACNC,QAAS,gBACTC,OAAQ,QACRC,MAAO,SCXT,MAAMC,EAAsB,wziBAC5B,MAAAC,EAAeD,ECkCf,MAAME,EAAOC,OAAe,aAAe,KAAOC,QAAQF,IAAIG,KAAKD,QAAQF,KAAO,aAElF,MAAMI,EAQD,EAAGC,YAAWC,UAASC,OAAMC,kBAAiBC,SAAQC,iBAAgBC,oBAAoBC,KAC7F,GAAIP,EAAW,CACb,OACEQ,EAAAC,EAAA,KACED,EAAA,KAAGE,KAAMV,EAAWC,QAASA,EAAO,gBAAiBC,EAAO,OAAS,QAASS,IAAKL,GAChFC,GAEFJ,GACCK,EAAA,oBAAkBI,gBAAgB,gBAAgBC,QAAST,EAAQU,kBAAmBT,I,CAM9F,OACEG,EAAAC,EAAA,KACED,EAAA,UAAQO,KAAK,SAASd,QAASA,EAAO,gBAAiBC,EAAO,OAAS,QAASS,IAAKL,GAClFC,GAEFJ,GACCK,EAAA,oBAAkBI,gBAAgB,gBAAgBC,QAAST,EAAQU,kBAAmBT,IAEvF,EAIP,MAAMW,EAGD,EAAGC,UAASN,OAAOJ,KACtB,OAAQU,GACN,QACA,IAAK,KACH,OACET,EAAA,MAAIG,IAAKA,EAAKO,MAAM,sBACjBX,GAGP,IAAK,KACH,OACEC,EAAA,MAAIG,IAAKA,EAAKO,MAAM,sBACjBX,GAGP,IAAK,KACH,OACEC,EAAA,MAAIG,IAAKA,EAAKO,MAAM,sBACjBX,GAGP,IAAK,KACH,OACEC,EAAA,MAAIG,IAAKA,EAAKO,MAAM,sBACjBX,G,EAMX,MAAMY,EAID,EAAGC,QAAOC,OAAMC,sBACnB,GAAIF,EAAO,CACT,OAAOZ,EAACe,EAAe,CAACH,MAAOA,G,CAGjC,GAAIE,EAAiB,CACnB,OAAOd,EAAA,2BAAyBgB,MAAOF,G,CAGzC,GAAID,EAAM,CACR,OAAOb,EAAA,YAAUa,KAAMA,G,GAI3B,MAAME,EAAyE,EAAGH,YAChF,GAAIA,IAAU,QAAS,CACrB,OAAOZ,EAAA,YAAUa,KAAK,gB,CAGxB,GAAID,IAAU,SAAU,CACtB,OAAOZ,EAAA,YAAUa,KAAK,iB,CAGxB,GAAID,IAAU,UAAW,CACvB,OAAOZ,EAAA,YAAUa,KAAK,kB,CAGxB,GAAID,IAAU,OAAQ,CACpB,OAAOZ,EAAA,YAAUa,KAAK,e,CAGxB,GAAID,IAAU,UAAW,CACvB,OAAOZ,EAAA,YAAUa,KAAK,kB,SASbI,EAAgB,MAL7B,WAAAC,CAAAC,G,gNA+BEC,KAAAX,QAA4B,KAoC5BW,KAAA1B,KAAO,MAMP0B,KAAAC,mBAAqB,MAmBrBD,KAAAE,YAAc,MAOdF,KAAAxB,OAAS,MAiBTwB,KAAAG,MAAQ,MA4FAH,KAAAI,YAAeC,IACrBL,KAAKM,eAAeC,KAAK,CACvBC,cAAeH,EACf/B,MAAO0B,KAAK1B,MACZ,EAGI0B,KAAAS,mBAAsBJ,IAC5BL,KAAKU,gBAAgBH,KAAK,CACxBI,QAASC,QAAQZ,KAAKxB,QACtBqC,MAAOb,KAAKxB,OACZgC,cAAeH,GACf,EAGIL,KAAAc,+BAAkCC,IACxCf,KAAKgB,kBAAkBT,KAAK,CAC1BU,UAAWjB,KAAK1B,KAAO,UAAY,UACnC4C,eAAgB,CAACC,EAA2B,SAAWnB,KAAKkB,eAAeH,EAAEK,OAAOC,WAAYF,IAChG,EAGInB,KAAAsB,6BAAgCP,IACtCf,KAAKuB,gBAAgBhB,KAAK,CACxBjC,KAAM0B,KAAK1B,KACX4C,eAAgB,CAACC,EAA2B,SAAWnB,KAAKkB,eAAeH,EAAEK,OAAOC,WAAYF,IAChG,C,CA3HJ,iBAAMK,G,OACJC,EAAAzB,KAAKtB,oBAAgB,MAAA+C,SAAA,SAAAA,EAAEC,O,CAMzB,2BAAIC,GACF,OAAO3B,KAAK4B,KAAKC,cAAc,mBAAqB,I,CAGtD,iBAAAC,G,OACEL,EAAAzB,KAAK+B,aAAS,MAAAN,SAAA,SAAAA,EAAEO,YAAYC,MAAMzC,IAChCQ,KAAKkC,eAAiB1C,EAEtB2C,EAAYnC,KAAK4B,KAAK,G,CAI1B,aAAIQ,G,MACF,QAAOX,EAAAzB,KAAKkC,kBAAc,MAAAT,SAAA,SAAAA,EAAEY,WAAY,S,CAGlC,oBAAMnB,CAAeG,EAAgCF,EAA2B,Q,QACtFpD,EACE,8DAA8DuE,KAAKC,UACjElB,iBACciB,KAAKC,UAAUpB,OAGjC,MAAMqB,GAAiBf,EAAAzB,KAAKyC,eAAW,MAAAhB,SAAA,SAAAA,EAAEiB,wBACzC,MAAMC,GAAoBC,EAAA5C,KAAK6C,kBAAc,MAAAD,SAAA,SAAAA,EAAEF,wBAE/C3E,EAAI,0DAA0DuE,KAAKC,UAAUC,OAC7EzE,EAAI,6DAA6DuE,KAAKC,UAAUI,OAChF5E,EAAI,yDAAyDuE,KAAKC,UAAUvC,KAAKkC,oBACjFnE,EAAI,+CAA+CuE,KAAKC,UAAUvC,KAAK1B,UAEvE,IAAKkE,IAAmBG,IAAsB3C,KAAKkC,eAAgB,CACjEnE,EAAI,6CAEJ,M,CAIF,MAAM+E,EAAiBH,EAAkBI,IAAMJ,EAAkBK,QAAUhD,KAAK1B,KAAQ+C,IAAU,MAAVA,SAAU,EAAVA,EAAc,EAAK,GAE3GtD,EAAI,0DAA0DuE,KAAKC,UAAUO,OAC7E/E,EAAI,wDAAwDuE,KAAKC,UAAUvE,OAAOiF,iBAElF,MAAMC,EAAMlD,KAAK4B,KAAKc,wBAEtB,MAAMS,EAAYnF,OAAOoF,SAAWC,SAASC,gBAAgBH,WAAaE,SAASE,KAAKJ,UACxF,MAAMK,EAAYH,SAASC,gBAAgBE,WAAaH,SAASE,KAAKC,WAAa,EACnF,MAAMT,EAAMG,EAAIH,IAAMI,EAAYK,EAElCzF,EAAI,yCAA0C,CAAEmF,MAAKC,YAAWK,YAAWT,QAE3E,GAAID,EAAiB9E,OAAOiF,YAAa,CACvClF,EACE,2EAA2EuE,KAAKC,UAC9EO,EAAiB9E,OAAOiF,iBAI5B,MAAMQ,EAA0BX,EAAiBH,EAAkBI,IACnE,MAAMW,EAA6BD,EAA0BzF,OAAOiF,YAEpElF,EACE,mEAAmEuE,KAAKC,UAAUkB,OAEpF1F,EACE,sEAAsEuE,KAAKC,UACzEmB,OAIJ1F,OAAO2F,SAAS,CACdZ,IAAKW,EAA6BX,EAAMA,GAAO/E,OAAOiF,YAAcQ,GACpEtC,Y,MAEG,GAAIwB,EAAkBI,IAAM,EAAG,CACpChF,EACE,iEAAiEuE,KAAKC,UAAUI,EAAkBI,IAAM,OAG1G/E,OAAO2F,SAAS,CACdZ,MACA5B,Y,EAKN,aAAYY,GACV,OAAO/B,KAAK4B,KAAKgC,QAAQ,gB,CAoD3B,MAAAC,G,MACE,MAAMxB,QAAEA,EAAOyB,aAAEA,IAAiBrC,EAAAzB,KAAKkC,kBAAc,MAAAT,SAAA,EAAAA,EAAI,GACzD,MAAMsC,IAAc/D,KAAKgE,qBAAuBhE,KAAKiE,UAAYjE,KAAKP,QAAUO,KAAKN,gBACrF,MAAMnB,EAAkByB,KAAKE,aAAemC,IAAY,kBAAoByB,EAE5E,OACElF,EAACsF,EAAI,CAAAC,IAAA,2CACH7E,MAAO,CACL,wBAAyB,KACzB,CAAC,iBAAmB+C,GAAU,KAC9B,uBAAwBrC,KAAKC,oBAAsBD,KAAK2B,wBACxD,8BAA+BmC,IAAY,MAAZA,SAAY,EAAZA,EAAgB,MAC/C,CAAC,6BAA+B9D,KAAKoE,eAAgBpE,KAAKoE,YAC1D,iCAAkC7F,GAEpC8F,QAAShC,EACTiC,aAAc,IAAOtE,KAAKG,MAAQ,KAClCoE,aAAc,IAAOvE,KAAKG,MAAQ,OAElCvB,EAACQ,EAAM,CAAA+E,IAAA,2CAAC9E,QAASW,KAAKX,QAASN,IAAMyF,GAAaxE,KAAK6C,eAAiB2B,GACtE5F,EAACT,EAAa,CAAAgG,IAAA,2CACZ/F,UAAW4B,KAAK5B,UAChBC,QAAS2B,KAAKI,YACd9B,KAAM0B,KAAK1B,KACXC,gBAAiBA,EACjBC,OAAQwB,KAAKxB,OACbC,eAAgBuB,KAAKS,mBACrB/B,iBAAmBqC,GAAOf,KAAKtB,iBAAmBqC,GAEjD+C,EACClF,EAACC,EAAQ,KACNmB,KAAKP,MACJb,EAAA,OAAKU,MAAM,6BACTV,EAACW,EAAU,CAACE,KAAMO,KAAKP,QAG3Bb,EAAA,eAAa6F,MAAOzE,KAAK0E,cACxB1E,KAAK2E,OACJ/F,EAAA,aAAWqF,OAAQjE,KAAK4E,YAAaC,QAAO,MACzC7E,KAAK2E,OAGV/F,EAAA,OAAKU,MAAM,6BACRU,KAAKgE,mBAAqBpF,EAAA,QAAMU,MAAM,cAAcU,KAAKgE,mBAC1DpF,EAAA,YAAUU,MAAM,6BAA6BG,KAAK,mBAItDb,EAACC,EAAQ,KACPD,EAAA,YAAUU,MAAM,6BAA6BG,KAAK,kBACjDO,KAAKiE,QAAUrF,EAAA,QAAMU,MAAM,WAAW/B,EAASyC,KAAKiE,SACrDrF,EAAA,YACEA,EAAA,eAAa6F,MAAOzE,KAAK0E,cACxB1E,KAAKoC,WACJxD,EAAA,YAAUU,MAAM,YAAYG,KAAMO,KAAK1B,MAAQ0B,KAAKG,MAAQ,cAAgB,UAG/EH,KAAK2E,OACJ/F,EAAA,aAAWqF,OAAQjE,KAAK4E,YAAaC,QAAO,MACzC7E,KAAK2E,OAGTZ,GACCnF,EAAA,OAAKU,MAAM,6BACRU,KAAKgE,mBAAqBpF,EAAA,QAAMU,MAAM,cAAcU,KAAKgE,mBAC1DpF,EAACW,EAAU,CAACC,MAAOQ,KAAKiE,OAAQxE,KAAMO,KAAKP,KAAMC,gBAAiBM,KAAKN,sBAOnFd,EAAA,kBAAAuF,IAAA,2CACE7E,MAAM,mBACNhB,KAAM0B,KAAK1B,KACXwG,gBAAe,KACfC,cAAe/E,KAAKoC,UAAY,EAAI,EACpC4C,8BAA+BhF,KAAKc,+BACpCmE,4BAA6BjF,KAAKsB,8BAElC1C,EAAA,OAAAuF,IAAA,2CAAK7E,MAAM,2BAA2BP,IAAMyF,GAAaxE,KAAKyC,YAAc+B,GAC1E5F,EAAA,QAAAuF,IAAA,+C","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as o,c as d,h as s,a as l}from"./p-abc59cdf.js";import{g as a}from"./p-c8f6f8d9.js";import{i}from"./p-078b7eca.js";import{v as e}from"./p-82796232.js";const r={en:{"dso-modal":{close:"Close",dialog:"Dialog"}},nl:{"dso-modal":{close:"Sluiten",dialog:"Dialoog"}}};const t="@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}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}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dt-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";const n=t;const c=class{constructor(s){o(this,s);this.dsoClose=d(this,"dsoClose",7);this.ariaId=e();this.dialogRole="dialog";this.returnFocus=undefined;this.showCloseButton=true;this.text=i((()=>this.host),r)}get hasFooter(){return this.host.querySelector("[slot='footer']")!==null}componentDidLoad(){var o;if((o=this.htmlDialogElement)===null||o===void 0?void 0:o.isConnected){const o=a();if(o instanceof HTMLElement){this.returnFocusElement=o}this.htmlDialogElement.showModal()}}disconnectedCallback(){var o,d,s;(o=this.htmlDialogElement)===null||o===void 0?void 0:o.close();if(this.returnFocus===false){return}(s=(d=this.returnFocus)!==null&&d!==void 0?d:this.returnFocusElement)===null||s===void 0?void 0:s.focus()}render(){var o;return s("dialog",{key:"8a4e6f91d25b50780037a2fc20cf88f2497c3ca3",class:"dso-modal",role:(o=this.dialogRole)!==null&&o!==void 0?o:undefined,"aria-modal":"true","aria-labelledby":this.ariaId,ref:o=>this.htmlDialogElement=o,onCancel:o=>{o.preventDefault();this.dsoClose.emit({originalEvent:o})}},s("div",{key:"bc6a6e22adef96679de72b34bfee6733bb102146",class:"dso-dialog",role:"document"},this.modalTitle?s("div",{class:"dso-header"},s("h2",{id:this.ariaId},this.modalTitle),this.showCloseButton&&s("button",{type:"button",class:"dso-close",onClick:o=>this.dsoClose.emit({originalEvent:o})},s("dso-icon",{icon:"times"}),s("span",{class:"sr-only"},this.text("close")))):s("span",{class:"sr-only",id:this.ariaId},this.text("dialog")),s("dso-scrollable",{key:"00d0e3416057db625debbca6864e4c122f077a8b"},s("div",{key:"85b2458ff18da11cc67b32d9748ab3f948584c11",class:"dso-body",tabIndex:0},s("slot",{key:"113504936cd8303d8c13fe08e53dd9598129861d",name:"body"}))),this.hasFooter&&s("div",{key:"bb6f912fb03acb460cb1622e0d1c524cff46f93e",class:"dso-footer"},s("slot",{key:"bf86c1a798bf355e56ada1c34b044ffa7840066a",name:"footer"}))))}get host(){return l(this)}};c.style=n;export{c as dso_modal};
|
|
2
|
+
//# sourceMappingURL=p-8597633a.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["translations","en","close","dialog","nl","modalCss","DsoModalStyle0","Modal","constructor","hostRef","this","ariaId","v4","dialogRole","returnFocus","undefined","showCloseButton","text","i18n","host","hasFooter","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","activeElement","getActiveElement","HTMLElement","returnFocusElement","showModal","disconnectedCallback","_c","_b","focus","render","h","key","class","role","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-modal\": {\r\n close: \"Close\",\r\n dialog: \"Dialog\",\r\n },\r\n },\r\n nl: {\r\n \"dso-modal\": {\r\n close: \"Sluiten\",\r\n dialog: \"Dialoog\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n dialogRole: string | null = \"dialog\";\r\n\r\n /**\r\n * The element to return focus to after the modal is closed.\r\n *\r\n * * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n */\r\n @Prop()\r\n returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement | undefined;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.dialogRole ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"mappings":"
|
|
1
|
+
{"version":3,"names":["translations","en","close","dialog","nl","modalCss","DsoModalStyle0","Modal","constructor","hostRef","this","ariaId","v4","dialogRole","returnFocus","undefined","showCloseButton","text","i18n","host","hasFooter","querySelector","componentDidLoad","_a","htmlDialogElement","isConnected","activeElement","getActiveElement","HTMLElement","returnFocusElement","showModal","disconnectedCallback","_c","_b","focus","render","h","key","class","role","ref","element","onCancel","e","preventDefault","dsoClose","emit","originalEvent","modalTitle","id","type","onClick","icon","tabIndex","name"],"sources":["src/components/modal/modal.i18n.ts","src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-modal\": {\r\n close: \"Close\",\r\n dialog: \"Dialog\",\r\n },\r\n },\r\n nl: {\r\n \"dso-modal\": {\r\n close: \"Sluiten\",\r\n dialog: \"Dialoog\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n :host dialog {\r\n @include modal.fullscreen();\r\n }\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n dso-icon {\r\n color: modal.$close-icon-color;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { translations } from \"./modal.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-modal\",\r\n styleUrl: \"modal.scss\",\r\n shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n private htmlDialogElement?: HTMLDialogElement;\r\n\r\n @Element()\r\n host!: HTMLDsoModalElement;\r\n\r\n @State()\r\n ariaId = v4();\r\n\r\n /**\r\n * when set the modal will be shown in fullscreen.\r\n */\r\n @Prop({ reflect: true })\r\n fullscreen?: boolean;\r\n\r\n /**\r\n * The title of the Modal.\r\n */\r\n @Prop()\r\n modalTitle?: string;\r\n\r\n /**\r\n * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n */\r\n @Prop()\r\n dialogRole: string | null = \"dialog\";\r\n\r\n /**\r\n * The element to return focus to after the modal is closed.\r\n *\r\n * * `undefined` will return focus to the previously focused element (default).\r\n * * `false` will not return focus to any element.\r\n * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n */\r\n @Prop()\r\n returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n /**\r\n * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n *\r\n * Needs `modalTitle` to be set.\r\n */\r\n @Prop()\r\n showCloseButton = true;\r\n\r\n private returnFocusElement: HTMLElement | undefined;\r\n\r\n /**\r\n * Emitted when the user wants to close the Modal.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n get hasFooter() {\r\n return this.host.querySelector(\"[slot='footer']\") !== null;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidLoad(): void {\r\n if (this.htmlDialogElement?.isConnected) {\r\n const activeElement = getActiveElement();\r\n if (activeElement instanceof HTMLElement) {\r\n this.returnFocusElement = activeElement;\r\n }\r\n\r\n this.htmlDialogElement.showModal();\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.htmlDialogElement?.close();\r\n\r\n if (this.returnFocus === false) {\r\n return;\r\n }\r\n\r\n (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n }\r\n\r\n render() {\r\n return (\r\n <dialog\r\n class=\"dso-modal\"\r\n role={this.dialogRole ?? undefined}\r\n aria-modal=\"true\"\r\n aria-labelledby={this.ariaId}\r\n ref={(element) => (this.htmlDialogElement = element)}\r\n onCancel={(e) => {\r\n e.preventDefault();\r\n\r\n this.dsoClose.emit({ originalEvent: e });\r\n }}\r\n >\r\n <div class=\"dso-dialog\" role=\"document\">\r\n {this.modalTitle ? (\r\n <div class=\"dso-header\">\r\n <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n {this.showCloseButton && (\r\n <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">{this.text(\"close\")}</span>\r\n </button>\r\n )}\r\n </div>\r\n ) : (\r\n <span class=\"sr-only\" id={this.ariaId}>\r\n {this.text(\"dialog\")}\r\n </span>\r\n )}\r\n\r\n <dso-scrollable>\r\n <div class=\"dso-body\" tabIndex={0}>\r\n <slot name=\"body\" />\r\n </div>\r\n </dso-scrollable>\r\n\r\n {this.hasFooter && (\r\n <div class=\"dso-footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n )}\r\n </div>\r\n </dialog>\r\n );\r\n }\r\n}\r\n"],"mappings":"gKAEO,MAAMA,EAAyB,CACpCC,GAAI,CACF,YAAa,CACXC,MAAO,QACPC,OAAQ,WAGZC,GAAI,CACF,YAAa,CACXF,MAAO,UACPC,OAAQ,aCZd,MAAME,EAAW,0lNACjB,MAAAC,EAAeD,E,MCaFE,EAAK,MALlB,WAAAC,CAAAC,G,6CAYEC,KAAAC,OAASC,IAkBTF,KAAAG,WAA4B,SAU5BH,KAAAI,YAA+CC,UAQ/CL,KAAAM,gBAAkB,KAcVN,KAAAO,KAAOC,GAAK,IAAMR,KAAKS,MAAMnB,E,CAJrC,aAAIoB,GACF,OAAOV,KAAKS,KAAKE,cAAc,qBAAuB,I,CAKxD,gBAAAC,G,MACE,IAAIC,EAAAb,KAAKc,qBAAiB,MAAAD,SAAA,SAAAA,EAAEE,YAAa,CACvC,MAAMC,EAAgBC,IACtB,GAAID,aAAyBE,YAAa,CACxClB,KAAKmB,mBAAqBH,C,CAG5BhB,KAAKc,kBAAkBM,W,EAI3B,oBAAAC,G,WACER,EAAAb,KAAKc,qBAAiB,MAAAD,SAAA,SAAAA,EAAErB,QAExB,GAAIQ,KAAKI,cAAgB,MAAO,CAC9B,M,EAGFkB,GAACC,EAAAvB,KAAKI,eAAW,MAAAmB,SAAA,EAAAA,EAAIvB,KAAKmB,sBAAmB,MAAAG,SAAA,SAAAA,EAAEE,O,CAGjD,MAAAC,G,MACE,OACEC,EAAA,UAAAC,IAAA,2CACEC,MAAM,YACNC,MAAMhB,EAAAb,KAAKG,cAAU,MAAAU,SAAA,EAAAA,EAAIR,UAAS,aACvB,OAAM,kBACAL,KAAKC,OACtB6B,IAAMC,GAAa/B,KAAKc,kBAAoBiB,EAC5CC,SAAWC,IACTA,EAAEC,iBAEFlC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,GAAI,GAG1CP,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aAAaC,KAAK,YAC1B7B,KAAKsC,WACJZ,EAAA,OAAKE,MAAM,cACTF,EAAA,MAAIa,GAAIvC,KAAKC,QAASD,KAAKsC,YAC1BtC,KAAKM,iBACJoB,EAAA,UAAQc,KAAK,SAASZ,MAAM,YAAYa,QAAUR,GAAMjC,KAAKmC,SAASC,KAAK,CAAEC,cAAeJ,KAC1FP,EAAA,YAAUgB,KAAK,UACfhB,EAAA,QAAME,MAAM,WAAW5B,KAAKO,KAAK,YAKvCmB,EAAA,QAAME,MAAM,UAAUW,GAAIvC,KAAKC,QAC5BD,KAAKO,KAAK,WAIfmB,EAAA,kBAAAC,IAAA,4CACED,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WAAWe,SAAU,GAC9BjB,EAAA,QAAAC,IAAA,2CAAMiB,KAAK,WAId5C,KAAKU,WACJgB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACTF,EAAA,QAAAC,IAAA,2CAAMiB,KAAK,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as e,h as o}from"./p-abc59cdf.js";import{i as t}from"./p-2d694112.js";const s=":host{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:2;display:block;inline-size:100vw}*,*::after,*::before{box-sizing:border-box}a{position:absolute;inset-inline-start:50%;inset-block-start:16px;display:inline-block;inline-size:1px;block-size:1px;overflow:hidden;background-color:#fff;border-radius:2px;clip:rect(1px, 1px, 1px, 1px);color:var(--link-color);white-space:nowrap;text-decoration:none;transform:translate(-50%);box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)}a:focus-visible{inline-size:auto;block-size:auto;padding:8px;clip:auto;white-space:normal;outline-offset:2px}";const n=s;const r=class{constructor(o){i(this,o);this.dsoSkiplinkClick=e(this,"dsoSkiplinkClick",7)}clickEventHandler(i){if(!(i.target instanceof HTMLElement)||!this.to){return}return this.dsoSkiplinkClick.emit({originalEvent:i,isModifiedEvent:t(i)})}render(){return o("a",{key:"c4f0355b8a63e27a60e10694ace01f2f14b25768",href:`#${this.to}`,onClick:i=>this.clickEventHandler(i)},this.label,o("dso-icon",{key:"5e4772a2100670675a21a00dd9b1db09209c051e",icon:"chevron-right"}))}};r.style=n;export{r as dso_skiplink};
|
|
2
|
+
//# sourceMappingURL=p-880d04c4.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as n,h as r,F as o}from"./p-abc59cdf.js";const a=':host {\n display: block;\n position: absolute;\n inset-block-end: 16px;\n inset-inline-start: 16px;\n inline-size: 370px;\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n border-radius: 4px;\n}\n@media screen and (max-width: 480px) {\n :host {\n inline-size: 320px;\n inset-block-end: 0;\n inset-inline-start: 0;\n --panel-heading-padding-inline-start: 8px;\n --panel-body-padding-inline: 8px;\n }\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.visual-rating-labels {\n display: flex;\n justify-content: space-between;\n margin-block: 8px;\n}\n\ninput[type=radio] {\n appearance: none;\n cursor: pointer;\n position: absolute;\n margin-inline: 0;\n margin-block: 0;\n inset-block: 8px 0;\n inset-inline: 0;\n z-index: 1;\n}\n\nlabel {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 48px;\n block-size: 48px;\n border: 1px solid #ccc;\n border-inline-end-width: 0;\n padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n label {\n inline-size: 43px;\n block-size: 43px;\n }\n}\nlabel:hover {\n background-color: #f2f2f2;\n}\nlabel:active {\n background-color: #e5e5e5;\n}\nlabel:first-of-type {\n border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n border-inline-end-width: 1px;\n border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n border-radius: 0 3px 0 0;\n}\nlabel::before {\n content: "";\n display: block;\n position: absolute;\n inset-block-start: 0;\n block-size: 8px;\n inline-size: 100%;\n border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #b62f41;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-1::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-1::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-1::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-1::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #ce3f51;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-2::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-2::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-2::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-2::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #e17000;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-3::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-3::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-3::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-3::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #dcd400;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-4::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-4::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-4::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-4::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #79b929;\n border-color: #ccc;\n color: #191919;\n}\nlabel.survey-rating-5::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));\n}\nlabel.survey-rating-5::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));\n}\nlabel.survey-rating-5::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));\n}\nlabel.survey-rating-5::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #39870c;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-6::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-6::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-6::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-6::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n --link-color: currentColor;\n --link-hover-color: currentColor;\n --link-visited-color: currentColor;\n background-color: #275937;\n border-color: #ccc;\n color: #fff;\n}\nlabel.survey-rating-7::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\nlabel.survey-rating-7::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\nlabel.survey-rating-7::before a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));\n}\nlabel.survey-rating-7::before a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {\n background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n margin-block-start: 16px;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\nbutton.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary {\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\nbutton.dso-secondary.dso-small {\n line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url("data:image/svg+xml,%3Csvg class=\'spinner\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class=\'path\' fill=\'none\' stroke-width=\'10\' stroke-linecap=\'butt\' cx=\'50\' cy=\'50\' r=\'45\'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}';const i=a;const s=class{constructor(r){e(this,r);this.dsoSubmit=n(this,"dsoSubmit",7);this.dsoClose=n(this,"dsoClose",7)}handleForm(e){e.preventDefault();this.dsoSubmit.emit({rating:this.rating,scale:{start:1,end:7},originalEvent:e})}handleChange(e){const n=e.target;this.rating=Number(n.value)}render(){const e=["Heel moeilijk","Moeilijk","Redelijk moeilijk","Neutraal","Redelijk makkelijk","Makkelijk","Heel makkelijk"];return r("dso-panel",{key:"ee2d66c3664442953dfa287dbb234f1c2b24973d",emphasized:true,onDsoCloseClick:e=>this.dsoClose.emit({originalEvent:e})},r("h2",{key:"1762bf6ae0ce6c7603bdcf6986e233f71e7a48f1",slot:"heading"},"Help ons met een onderzoek"),r("strong",{key:"b0a318ab699be1e36b6044b115becc6682bd0bb3"},"Hoe moeilijk of makkelijk was deze taak om uit te voeren"),r("form",{key:"3d66888af1d2d535f4723346029f9edbc03102a3",onSubmit:e=>this.handleForm(e)},r("div",{key:"66ed1a08b68aaa791ba1772bf2cf81f305745829",class:"visual-rating-labels","aria-hidden":"true"},r("span",{key:"a0edb09da125715b09186138db492a516ecbe6ea"},"Heel moeilijk"),r("span",{key:"e0d3b6c28a88a4edeca0689cb5b8c62bf074ac48"},"Heel makkelijk")),r("div",{key:"2730d1b4941f078c506bbda76af4843157abc22c",role:"radiogroup"},e.map(((e,n)=>{const a=n+1;return r(o,null,r("label",{class:`survey-rating-${a}`},a,r("span",{class:"sr-only"},e),r("input",{type:"radio",name:"rating",value:a,checked:a===this.rating,onChange:e=>this.handleChange(e)})))}))),r("button",{key:"4b5a9454231d24e64cc4e09385b2161262982de7",type:"submit",class:"dso-secondary"},r("span",{key:"6d6e9f53abec5e1522e5a8b04eea8793c354f101"},"Antwoord verzenden"))))}};s.style=i;export{s as dso_survey_rating};
|
|
2
|
+
//# sourceMappingURL=p-898ad366.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["surveyRatingCss","DsoSurveyRatingStyle0","SurveyRating","handleForm","e","preventDefault","this","dsoSubmit","emit","rating","scale","start","end","originalEvent","handleChange","target","Number","value","render","ratings","h","key","emphasized","onDsoCloseClick","dsoClose","slot","onSubmit","class","role","map","index","ratingNumber","Fragment","type","name","checked","onChange"],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n display: block;\r\n position: absolute;\r\n inset-block-end: units.$u2;\r\n inset-inline-start: units.$u2;\r\n inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n inset-block-end: 0;\r\n inset-inline-start: 0;\r\n\r\n --panel-heading-padding-inline-start: #{units.$u1};\r\n --panel-body-padding-inline: #{units.$u1};\r\n }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n cursor: pointer;\r\n position: absolute;\r\n margin-inline: 0;\r\n margin-block: 0;\r\n inset-block: units.$u1 0;\r\n inset-inline: 0;\r\n z-index: 1;\r\n}\r\n\r\nlabel {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n border-inline-end-width: 0;\r\n padding-block-start: units.$u1;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n }\r\n\r\n &:hover {\r\n background-color: survey-rating-variables.$survey-rating-color-hover;\r\n }\r\n\r\n &:active {\r\n background-color: survey-rating-variables.$survey-rating-color-active;\r\n }\r\n\r\n &:first-of-type {\r\n border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n survey-rating-variables.$survey-rating-border-radius;\r\n\r\n &::before {\r\n border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &:last-of-type {\r\n border-inline-end-width: 1px;\r\n border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n &::before {\r\n border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n display: block;\r\n position: absolute;\r\n inset-block-start: 0;\r\n block-size: units.$u1;\r\n inline-size: 100%;\r\n border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n }\r\n\r\n &:has(input:checked) {\r\n font-weight: bold;\r\n }\r\n\r\n @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n $color: map.get($survey-rating, color);\r\n\r\n &.survey-rating-#{$i} {\r\n &::before,\r\n &:has(input:checked) {\r\n @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n }\r\n }\r\n }\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n\r\n &.dso-secondary {\r\n @include button.secondary($base-styling: true);\r\n }\r\n\r\n margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-survey-rating\",\r\n styleUrl: \"survey-rating.scss\",\r\n shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n private rating: number | undefined;\r\n\r\n /**\r\n * Emitted when user submits the Survey Rating.\r\n */\r\n @Event()\r\n dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n /**\r\n * Emitted when the user wants to close the Survey Rating.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n private handleForm(e: Event): void {\r\n e.preventDefault();\r\n this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n }\r\n\r\n private handleChange(e: Event): void {\r\n const target = e.target as HTMLInputElement;\r\n this.rating = Number(target.value);\r\n }\r\n\r\n render() {\r\n const ratings = [\r\n \"Heel moeilijk\",\r\n \"Moeilijk\",\r\n \"Redelijk moeilijk\",\r\n \"Neutraal\",\r\n \"Redelijk makkelijk\",\r\n \"Makkelijk\",\r\n \"Heel makkelijk\",\r\n ];\r\n\r\n return (\r\n <dso-panel emphasized onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n <h2 slot=\"heading\">Help ons met een onderzoek</h2>\r\n <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren</strong>\r\n <form onSubmit={(e) => this.handleForm(e)}>\r\n <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n <span>Heel moeilijk</span>\r\n <span>Heel makkelijk</span>\r\n </div>\r\n <div role=\"radiogroup\">\r\n {ratings.map((rating, index) => {\r\n const ratingNumber = index + 1;\r\n\r\n return (\r\n <>\r\n <label class={`survey-rating-${ratingNumber}`}>\r\n {ratingNumber}\r\n <span class=\"sr-only\">{rating}</span>\r\n <input\r\n type=\"radio\"\r\n name=\"rating\"\r\n value={ratingNumber}\r\n checked={ratingNumber === this.rating}\r\n onChange={(e) => this.handleChange(e)}\r\n />\r\n </label>\r\n </>\r\n );\r\n })}\r\n </div>\r\n <button type=\"submit\" class=\"dso-secondary\">\r\n <span>Antwoord verzenden</span>\r\n </button>\r\n </form>\r\n </dso-panel>\r\n );\r\n }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAkB,wglBACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,iGAef,UAAAC,CAAWC,GACjBA,EAAEC,iBACFC,KAAKC,UAAUC,KAAK,CAAEC,OAAQH,KAAKG,OAAQC,MAAO,CAAEC,MAAO,EAAGC,IAAK,GAAKC,cAAeT,G,CAGjF,YAAAU,CAAaV,GACnB,MAAMW,EAASX,EAAEW,OACjBT,KAAKG,OAASO,OAAOD,EAAOE,M,CAG9B,MAAAC,GACE,MAAMC,EAAU,CACd,gBACA,WACA,oBACA,WACA,qBACA,YACA,kBAGF,OACEC,EAAA,aAAAC,IAAA,2CAAWC,WAAU,KAACC,gBAAkBnB,GAAME,KAAKkB,SAAShB,KAAK,CAAEK,cAAeT,KAChFgB,EAAA,MAAAC,IAAA,2CAAII,KAAK,WAAS,8BAClBL,EAAA,UAAAC,IAAA,wGACAD,EAAA,QAAAC,IAAA,2CAAMK,SAAWtB,GAAME,KAAKH,WAAWC,IACrCgB,EAAA,OAAAC,IAAA,2CAAKM,MAAM,uBAAsB,cAAa,QAC5CP,EAAA,QAAAC,IAAA,6DACAD,EAAA,QAAAC,IAAA,+DAEFD,EAAA,OAAAC,IAAA,2CAAKO,KAAK,cACPT,EAAQU,KAAI,CAACpB,EAAQqB,KACpB,MAAMC,EAAeD,EAAQ,EAE7B,OACEV,EAAAY,EAAA,KACEZ,EAAA,SAAOO,MAAO,iBAAiBI,KAC5BA,EACDX,EAAA,QAAMO,MAAM,WAAWlB,GACvBW,EAAA,SACEa,KAAK,QACLC,KAAK,SACLjB,MAAOc,EACPI,QAASJ,IAAiBzB,KAAKG,OAC/B2B,SAAWhC,GAAME,KAAKQ,aAAaV,MAGtC,KAITgB,EAAA,UAAAC,IAAA,2CAAQY,KAAK,SAASN,MAAM,iBAC1BP,EAAA,QAAAC,IAAA,oE","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,f as t,h as s,H as a,a as r}from"./p-abc59cdf.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,f as t,h as s,H as a,a as r}from"./p-abc59cdf.js";const i="*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";const o=i;const c=class{constructor(t){e(this,t);this.keyUpHandler=e=>{if(!(e.target instanceof HTMLElement)){return}switch(e.key){case"ArrowRight":case"ArrowDown":this.moveFocusToNextTab(e.target);break;case"ArrowLeft":case"ArrowUp":this.moveFocusToPreviousTab(e.target);break;default:return}}}get enabledTabs(){return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce(((e,t)=>{if(!t.disabled){e.push(t)}return e}),[])}get firstTab(){return this.enabledTabs[0]}get lastTab(){return this.enabledTabs[this.enabledTabs.length-1]}moveFocusToTab(e){e===null||e===void 0?void 0:e._dsoFocus()}moveFocusToPreviousTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s-1])!==null&&t!==void 0?t:this.lastTab;this.moveFocusToTab(a)}moveFocusToNextTab(e){var t;const s=this.enabledTabs.findIndex((t=>t===e));const a=(t=this.enabledTabs[s+1])!==null&&t!==void 0?t:this.firstTab;this.moveFocusToTab(a)}connectedCallback(){var e;(e=this.mutationObserver)!==null&&e!==void 0?e:this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{childList:true})}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return s(a,{key:"eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680"},s("div",{key:"445a0b6a745a1f45eca44ca59def6f4557904748",class:"tabs",role:"tablist",onKeyUp:this.keyUpHandler},s("slot",{key:"d344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7"})),s("div",{key:"c17a1774b3cf81c30e07c0c8446f05d8a6e86b95",role:"tabpanel",tabindex:"0"},s("slot",{key:"c32d940c2e5fe01b67919d7253bb5d2666146f6f",name:"panel"})))}get host(){return r(this)}};c.style=o;export{c as dso_tabs};
|
|
2
|
+
//# sourceMappingURL=p-9331c2fc.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as n,h as t,H as o,a as i}from"./p-abc59cdf.js";import{c as s}from"./p-8a1a6e56.js";const a=":host {\n display: block;\n padding-block: 4px;\n padding-inline: 4px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n.legend-item {\n display: flex;\n position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n margin-inline-start: 70px;\n}\n\nbutton {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton:focus, button:focus-visible {\n outline-offset: 2px;\n}\nbutton:active {\n outline: 0;\n}\nbutton {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\nbutton[disabled] {\n color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n color: #39870c;\n}\nbutton:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\nbutton:not([disabled]):active {\n color: #173521;\n}\nbutton.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\nbutton.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\nbutton.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\nbutton {\n position: absolute;\n inset-inline-end: 0;\n}";const r=a;const d=class{constructor(t){e(this,t);this.dsoRemoveClick=n(this,"dsoRemoveClick",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get selectableSlottedElement(){return this.host.querySelector(":scope > dso-selectable")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;const i=this.selectableSlottedElement!==null;return t(o,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as n,h as t,H as o,a as i}from"./p-abc59cdf.js";import{c as s}from"./p-8a1a6e56.js";const a=":host {\n display: block;\n padding-block: 4px;\n padding-inline: 4px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n.legend-item {\n display: flex;\n position: relative;\n}\n.legend-item.legend-item-symbol + .body {\n margin-inline-start: 38px;\n}\n.legend-item.legend-item-selectable + .body {\n margin-inline-start: 32px;\n}\n.legend-item.legend-item-selectable.legend-item-symbol + .body {\n margin-inline-start: 70px;\n}\n\nbutton {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\nbutton:focus, button:focus-visible {\n outline-offset: 2px;\n}\nbutton:active {\n outline: 0;\n}\nbutton {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\nbutton[disabled] {\n color: #afcf9d;\n}\nbutton[disabled].dso-spinner-left, button[disabled].dso-spinner-right {\n color: #39870c;\n}\nbutton:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\nbutton:not([disabled]):active {\n color: #173521;\n}\nbutton.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\nbutton.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\nbutton.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\nbutton.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\nbutton > span {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\nbutton {\n position: absolute;\n inset-inline-end: 0;\n}";const r=a;const d=class{constructor(t){e(this,t);this.dsoRemoveClick=n(this,"dsoRemoveClick",7);this.dsoMouseEnter=n(this,"dsoMouseEnter",7);this.dsoMouseLeave=n(this,"dsoMouseLeave",7);this.disabled=false;this.showBody=false}get symbolSlottedElement(){return this.host.querySelector("[slot='symbol']")}get selectableSlottedElement(){return this.host.querySelector(":scope > dso-selectable")}get bodySlottedElement(){return this.host.querySelector("[slot='body']")}render(){const e=this.symbolSlottedElement!==null;const n=this.bodySlottedElement!==null;const i=this.selectableSlottedElement!==null;return t(o,{key:"fc79f2d5875d2f35d0209d007d0c483b0b3a72f7",onMouseEnter:()=>this.dsoMouseEnter.emit(),onMouseLeave:()=>this.dsoMouseLeave.emit()},t("div",{key:"353c8ec1f937683c95f35efc80660867192a6a41",class:s("legend-item",{"legend-item-symbol":e,"legend-item-selectable":i})},t("div",{key:"9332a0474f37cd6bc840e77acb83367e91844d82",hidden:!e},t("slot",{key:"f773b1dbd4c596c2678251fc31ba3b8bab19d0ed",name:"symbol"})),t("div",{key:"b7d5fff4fa5cc85ef4e36f2479d615cf718d9497"},t("slot",{key:"ab9889a69d2a5ec8d57bbb142123f3e35e4899c6"})),this.disabled&&this.disabledMessage&&t("dso-toggletip",{key:"05d711b7a3af1ccf6d664a493332245a143481a5",position:"bottom"},this.disabledMessage),this.removable&&t("button",{key:"f7f40cb8c99bbe60cf94c22837be9fd4e5ea515c",id:"remove-button",type:"button",onClick:e=>this.dsoRemoveClick.emit({originalEvent:e})},t("span",{key:"bebe9f676b4a8f81e17137a4cb5a19509595bd6a",class:"sr-only"},"Legenda item verwijderen"),t("dso-icon",{key:"c68486b5f5a481336d25dd921906535ad1cc0366",icon:"trash"})),n&&!this.disabled&&t("button",{key:"fb4d95259f72734c25ad701ba1d54ceb81c1a342",id:"edit-button",type:"button",onClick:()=>this.showBody=!this.showBody},t("span",{key:"18368288cab62ff4d77d107b85bceacee6a4b6ea",class:"sr-only"},"Legenda item aanpassen"),t("dso-icon",{key:"b96d36039466662375e4d001ba7405f1f70a9ec3",icon:this.showBody?"times":"more"}))),t("div",{key:"15c61ac95b4dcd9868b95dd5f4f975fad0aa7abe",hidden:!n||this.disabled||!this.showBody,class:"body"},t("slot",{key:"5f5f529c2c048adf320c7e63dc99597a29e38ba1",name:"body"})))}get host(){return i(this)}};d.style=r;export{d as dso_legend_item};
|
|
2
|
+
//# sourceMappingURL=p-943ad4a8.entry.js.map
|