@dso-toolkit/core 78.1.0 → 79.0.0-pre.1
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/bundle/dso-accordion-section.js +5 -5
- package/dist/bundle/dso-action-list-item.js +1 -1
- package/dist/bundle/dso-advanced-select.js +3 -3
- package/dist/bundle/dso-alert.js +1 -1
- package/dist/bundle/dso-annotation-activiteit.js +4 -4
- package/dist/bundle/dso-annotation-gebiedsaanwijzing.js +4 -4
- package/dist/bundle/dso-annotation-kaart.js +2 -2
- package/dist/bundle/dso-annotation-locatie.js +1 -1
- package/dist/bundle/dso-annotation-omgevingsnormwaarde.js +4 -4
- package/dist/bundle/dso-attachments-counter.js +1 -1
- package/dist/bundle/dso-autosuggest.js +3 -3
- package/dist/bundle/dso-card.js +1 -1
- package/dist/bundle/dso-date-picker-legacy.js +1 -1
- package/dist/bundle/dso-document-card.js +1 -1
- package/dist/bundle/dso-document-component.js +1 -1
- package/dist/bundle/dso-dropdown-menu.js +1 -1
- package/dist/bundle/dso-header.js +98 -97
- package/dist/bundle/dso-header.js.map +1 -1
- package/dist/bundle/dso-highlight-box.js +1 -1
- package/dist/bundle/dso-icon.js +1 -1
- package/dist/bundle/dso-image-overlay.js +1 -1
- package/dist/bundle/dso-info-button.js +1 -1
- package/dist/bundle/dso-info.js +1 -1
- package/dist/bundle/dso-input-range.js +2 -2
- package/dist/bundle/dso-label.js +1 -1
- package/dist/bundle/dso-legend-item.js +6 -6
- package/dist/bundle/dso-list-button.js +5 -5
- package/dist/bundle/dso-logo.js +2 -2
- package/dist/bundle/dso-logo.js.map +1 -1
- package/dist/bundle/dso-map-base-layers.js +5 -5
- package/dist/bundle/dso-map-controls.js +3 -3
- package/dist/bundle/dso-map-overlays.js +5 -5
- package/dist/bundle/dso-mark-bar.js +2 -2
- package/dist/bundle/dso-modal.js +3 -3
- package/dist/bundle/dso-onboarding-tip.js +2 -2
- package/dist/bundle/dso-ozon-content.js +1 -1
- package/dist/bundle/dso-pagination.js +2 -2
- package/dist/bundle/dso-panel.js +1 -1
- package/dist/bundle/dso-plekinfo-card.js +2 -2
- package/dist/bundle/dso-progress-bar.js +1 -1
- package/dist/bundle/dso-progress-indicator.js +1 -1
- package/dist/bundle/dso-project-item.js +4 -4
- package/dist/bundle/dso-responsive-element.js +1 -1
- package/dist/bundle/dso-scrollable.js +1 -1
- package/dist/bundle/dso-selectable.js +1 -1
- package/dist/bundle/dso-skiplink.js +2 -2
- package/dist/bundle/dso-slide-toggle.js +1 -1
- package/dist/bundle/dso-survey-rating.js +4 -4
- package/dist/bundle/dso-table.js +1 -1
- package/dist/bundle/dso-tabs.js +1 -1
- package/dist/bundle/dso-toggletip.js +1 -1
- package/dist/bundle/dso-tooltip.js +1 -1
- package/dist/bundle/dso-tree-view.js +3 -3
- package/dist/bundle/dso-viewer-grid.js +1 -1
- package/dist/bundle/dsot-document-component-demo.js +12 -12
- package/dist/bundle/{p-lE-KxpG-.js → p-7ffg336s.js} +3 -3
- package/dist/bundle/{p-lE-KxpG-.js.map → p-7ffg336s.js.map} +1 -1
- package/dist/bundle/{p-BZUv4Fwx.js → p-B3Alb07i.js} +6 -6
- package/dist/bundle/{p-BZUv4Fwx.js.map → p-B3Alb07i.js.map} +1 -1
- package/dist/bundle/{p-CUZmPl-a.js → p-BELL2NPR.js} +7 -7
- package/dist/bundle/{p-CUZmPl-a.js.map → p-BELL2NPR.js.map} +1 -1
- package/dist/bundle/{p-BQF5fCSD.js → p-BOvMM9C8.js} +3 -3
- package/dist/bundle/{p-BQF5fCSD.js.map → p-BOvMM9C8.js.map} +1 -1
- package/dist/bundle/{p-BnSdv9VD.js → p-B_9Gan2F.js} +10 -10
- package/dist/bundle/{p-BnSdv9VD.js.map → p-B_9Gan2F.js.map} +1 -1
- package/dist/bundle/{p-D0gB2lgu.js → p-Bgqhjszl.js} +3 -3
- package/dist/bundle/{p-D0gB2lgu.js.map → p-Bgqhjszl.js.map} +1 -1
- package/dist/bundle/{p-D92MZVkr.js → p-BqKuHNTU.js} +3 -3
- package/dist/bundle/{p-D92MZVkr.js.map → p-BqKuHNTU.js.map} +1 -1
- package/dist/bundle/{p-DNULhBX2.js → p-BrQ3aUVb.js} +3 -3
- package/dist/bundle/{p-DNULhBX2.js.map → p-BrQ3aUVb.js.map} +1 -1
- package/dist/bundle/{p-C2Ek2dWW.js → p-Bxrualn7.js} +40 -36
- package/dist/bundle/p-Bxrualn7.js.map +1 -0
- package/dist/bundle/{p-DcxEm1dI.js → p-C5KKL3gn.js} +7 -7
- package/dist/bundle/{p-DcxEm1dI.js.map → p-C5KKL3gn.js.map} +1 -1
- package/dist/bundle/{p-CwKyBrf3.js → p-CEFYoazH.js} +4 -4
- package/dist/bundle/{p-CwKyBrf3.js.map → p-CEFYoazH.js.map} +1 -1
- package/dist/bundle/{p-CXEXoC_s.js → p-CeXiA7z5.js} +3 -3
- package/dist/bundle/{p-CXEXoC_s.js.map → p-CeXiA7z5.js.map} +1 -1
- package/dist/bundle/{p-WmD5BfeO.js → p-CynPODEC.js} +4 -4
- package/dist/bundle/{p-WmD5BfeO.js.map → p-CynPODEC.js.map} +1 -1
- package/dist/bundle/{p-Dt1j98T1.js → p-DAJsc8Jk.js} +3 -3
- package/dist/bundle/{p-Dt1j98T1.js.map → p-DAJsc8Jk.js.map} +1 -1
- package/dist/bundle/{p--iZjxqv3.js → p-DrWTFwlB.js} +4 -4
- package/dist/bundle/{p--iZjxqv3.js.map → p-DrWTFwlB.js.map} +1 -1
- package/dist/bundle/{p-D3I3eS2K.js → p-DrrX-h-R.js} +4 -4
- package/dist/bundle/{p-D3I3eS2K.js.map → p-DrrX-h-R.js.map} +1 -1
- package/dist/bundle/{p-BLPc0VWK.js → p-S0YMB18e.js} +6 -6
- package/dist/bundle/{p-BLPc0VWK.js.map → p-S0YMB18e.js.map} +1 -1
- package/dist/bundle/{p-CH8BjCNJ.js → p-X4ksz0z1.js} +6 -6
- package/dist/bundle/{p-CH8BjCNJ.js.map → p-X4ksz0z1.js.map} +1 -1
- package/dist/bundle/{p-CYNNmESE.js → p-_H6ui1La.js} +3 -3
- package/dist/bundle/{p-CYNNmESE.js.map → p-_H6ui1La.js.map} +1 -1
- package/dist/bundle/{p-ChsWtZdt.js → p-uUOjJ6kU.js} +4 -4
- package/dist/bundle/{p-ChsWtZdt.js.map → p-uUOjJ6kU.js.map} +1 -1
- package/dist/cjs/dso-alert_6.cjs.entry.js +2 -2
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +37 -33
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.entry.cjs.js.map +1 -1
- package/dist/cjs/dso-header.cjs.entry.js +91 -89
- package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-header.entry.cjs.js.map +1 -1
- package/dist/cjs/dso-highlight-box.cjs.entry.js +1 -1
- package/dist/cjs/dso-icon.cjs.entry.js +1 -1
- package/dist/cjs/dso-info-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
- package/dist/cjs/dso-input-range.cjs.entry.js +2 -2
- package/dist/cjs/dso-label_3.cjs.entry.js +4 -4
- package/dist/cjs/dso-legend-item.cjs.entry.js +1 -1
- package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
- package/dist/cjs/dso-logo.cjs.entry.js +2 -2
- package/dist/cjs/dso-logo.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-logo.entry.cjs.js.map +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 +1 -1
- package/dist/cjs/dso-onboarding-tip.cjs.entry.js +1 -1
- 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 +2 -2
- 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-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dso-tree-view.cjs.entry.js +1 -1
- package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +37 -39
- package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/collection/components/header/header.css +28 -28
- package/dist/collection/components/header/header.interfaces.js.map +1 -1
- package/dist/collection/components/header/header.js +126 -107
- package/dist/collection/components/header/header.js.map +1 -1
- package/dist/collection/components/header/menu-item.functional-component.js +6 -0
- package/dist/collection/components/header/menu-item.functional-component.js.map +1 -0
- 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 +1 -1
- package/dist/collection/components/list-button/list-button.js +1 -1
- package/dist/collection/components/logo/logo.css +2 -8
- 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 +1 -1
- package/dist/collection/components/onboarding-tip/onboarding-tip.js +1 -1
- package/dist/collection/components/ozon-content/ozon-content.js +1 -1
- 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/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.js +1 -1
- package/dist/collection/components/survey-rating/survey-rating.js +2 -2
- 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 +1 -1
- package/dist/components/dropdown-menu.js +38 -34
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dso-header.js +96 -95
- package/dist/components/dso-header.js.map +1 -1
- 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 +1 -1
- package/dist/components/dso-list-button.js +1 -1
- package/dist/components/dso-logo.js +2 -2
- package/dist/components/dso-logo.js.map +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 +1 -1
- package/dist/components/dso-onboarding-tip.js +1 -1
- 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.js +2 -2
- package/dist/components/dso-tabs.js +1 -1
- package/dist/components/dso-tree-view.js +1 -1
- package/dist/components/dso-viewer-grid.js +1 -1
- package/dist/components/icon.js +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 +1 -1
- package/dist/components/progress-indicator.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 +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-dropdown-menu.entry.esm.js.map +1 -1
- package/dist/dso-toolkit/dso-header.entry.esm.js.map +1 -1
- package/dist/dso-toolkit/dso-logo.entry.esm.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/{p-53466f70.entry.js → p-01e90e48.entry.js} +2 -2
- package/dist/dso-toolkit/{p-78a12530.entry.js → p-071846be.entry.js} +2 -2
- package/dist/dso-toolkit/{p-8128fe57.entry.js → p-08efe022.entry.js} +2 -2
- package/dist/dso-toolkit/{p-f055ab17.entry.js → p-1cc4cc04.entry.js} +2 -2
- package/dist/dso-toolkit/{p-6aff6420.entry.js → p-257a4650.entry.js} +2 -2
- package/dist/dso-toolkit/p-2660ebab.entry.js +2 -0
- package/dist/dso-toolkit/p-2660ebab.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-443a78e5.entry.js → p-275e5ec7.entry.js} +2 -2
- package/dist/dso-toolkit/{p-3300fe1e.entry.js → p-2cec1fea.entry.js} +2 -2
- package/dist/dso-toolkit/{p-53a81213.entry.js → p-445aba67.entry.js} +2 -2
- package/dist/dso-toolkit/{p-7731d7bb.entry.js → p-55637fe3.entry.js} +2 -2
- package/dist/dso-toolkit/{p-c359f83e.entry.js → p-67b6a838.entry.js} +2 -2
- package/dist/dso-toolkit/{p-b245449a.entry.js → p-6902ffb5.entry.js} +2 -2
- package/dist/dso-toolkit/{p-17219f16.entry.js → p-81711068.entry.js} +2 -2
- package/dist/dso-toolkit/p-82a89d77.entry.js +2 -0
- package/dist/dso-toolkit/p-82a89d77.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-afaee982.entry.js → p-898de91a.entry.js} +2 -2
- package/dist/dso-toolkit/{p-02491a35.entry.js → p-9566b0a7.entry.js} +2 -2
- package/dist/dso-toolkit/p-9b2ca189.entry.js +2 -0
- package/dist/dso-toolkit/{p-3522c1dd.entry.js.map → p-9b2ca189.entry.js.map} +1 -1
- package/dist/dso-toolkit/{p-16255f29.entry.js → p-a38fbc5c.entry.js} +2 -2
- package/dist/dso-toolkit/{p-5c0322dc.entry.js → p-a62f368d.entry.js} +2 -2
- package/dist/dso-toolkit/{p-d51d9d66.entry.js → p-add3ca45.entry.js} +2 -2
- package/dist/dso-toolkit/{p-04d6ae97.entry.js → p-b4931ff4.entry.js} +2 -2
- package/dist/dso-toolkit/{p-f8557ec8.entry.js → p-b4ba87ac.entry.js} +2 -2
- package/dist/dso-toolkit/{p-ea71badf.entry.js → p-c45258d3.entry.js} +2 -2
- package/dist/dso-toolkit/{p-d0e82c62.entry.js → p-d864f7da.entry.js} +2 -2
- package/dist/dso-toolkit/{p-4d885de2.entry.js → p-d947dd25.entry.js} +2 -2
- package/dist/dso-toolkit/{p-1aa49aa7.entry.js → p-e299ac60.entry.js} +2 -2
- package/dist/dso-toolkit/{p-8fd586d4.entry.js → p-ef042313.entry.js} +2 -2
- package/dist/dso-toolkit/{p-fd42a8cd.entry.js → p-f2a61198.entry.js} +2 -2
- package/dist/dso-toolkit/{p-218b1fe3.entry.js → p-f4a1a07b.entry.js} +2 -2
- package/dist/dso-toolkit/p-f65ace88.entry.js +2 -0
- package/dist/dso-toolkit/p-f65ace88.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-43564b05.entry.js → p-f9bc4e87.entry.js} +2 -2
- package/dist/esm/dso-alert_6.entry.js +2 -2
- package/dist/esm/dso-dropdown-menu.entry.js +37 -33
- package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
- package/dist/esm/dso-header.entry.js +92 -90
- package/dist/esm/dso-header.entry.js.map +1 -1
- package/dist/esm/dso-highlight-box.entry.js +1 -1
- package/dist/esm/dso-icon.entry.js +1 -1
- package/dist/esm/dso-info-button.entry.js +1 -1
- package/dist/esm/dso-info_2.entry.js +2 -2
- package/dist/esm/dso-input-range.entry.js +2 -2
- package/dist/esm/dso-label_3.entry.js +4 -4
- package/dist/esm/dso-legend-item.entry.js +1 -1
- package/dist/esm/dso-list-button.entry.js +1 -1
- package/dist/esm/dso-logo.entry.js +2 -2
- package/dist/esm/dso-logo.entry.js.map +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 +1 -1
- package/dist/esm/dso-onboarding-tip.entry.js +1 -1
- 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 +2 -2
- 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-tooltip.entry.js +1 -1
- package/dist/esm/dso-tree-view.entry.js +1 -1
- package/dist/esm/dso-viewer-grid.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +2 -1
- package/dist/types/components/header/header.d.ts +38 -26
- package/dist/types/components/header/header.interfaces.d.ts +2 -0
- package/dist/types/components/header/menu-item.functional-component.d.ts +9 -0
- package/dist/types/components.d.ts +20 -18
- package/package.json +3 -3
- package/dist/bundle/p-C2Ek2dWW.js.map +0 -1
- package/dist/dso-toolkit/p-1a06ea3b.entry.js +0 -2
- package/dist/dso-toolkit/p-1a06ea3b.entry.js.map +0 -1
- package/dist/dso-toolkit/p-3522c1dd.entry.js +0 -2
- package/dist/dso-toolkit/p-6a813c6c.entry.js +0 -2
- package/dist/dso-toolkit/p-6a813c6c.entry.js.map +0 -1
- package/dist/dso-toolkit/p-a85afaa8.entry.js +0 -2
- package/dist/dso-toolkit/p-a85afaa8.entry.js.map +0 -1
- /package/dist/dso-toolkit/{p-53466f70.entry.js.map → p-01e90e48.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-78a12530.entry.js.map → p-071846be.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-8128fe57.entry.js.map → p-08efe022.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-f055ab17.entry.js.map → p-1cc4cc04.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-6aff6420.entry.js.map → p-257a4650.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-443a78e5.entry.js.map → p-275e5ec7.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-3300fe1e.entry.js.map → p-2cec1fea.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-53a81213.entry.js.map → p-445aba67.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-7731d7bb.entry.js.map → p-55637fe3.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-c359f83e.entry.js.map → p-67b6a838.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-b245449a.entry.js.map → p-6902ffb5.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-17219f16.entry.js.map → p-81711068.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-afaee982.entry.js.map → p-898de91a.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-02491a35.entry.js.map → p-9566b0a7.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-16255f29.entry.js.map → p-a38fbc5c.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-5c0322dc.entry.js.map → p-a62f368d.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-d51d9d66.entry.js.map → p-add3ca45.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-04d6ae97.entry.js.map → p-b4931ff4.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-f8557ec8.entry.js.map → p-b4ba87ac.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-ea71badf.entry.js.map → p-c45258d3.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-d0e82c62.entry.js.map → p-d864f7da.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-4d885de2.entry.js.map → p-d947dd25.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-1aa49aa7.entry.js.map → p-e299ac60.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-8fd586d4.entry.js.map → p-ef042313.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-fd42a8cd.entry.js.map → p-f2a61198.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-218b1fe3.entry.js.map → p-f4a1a07b.entry.js.map} +0 -0
- /package/dist/dso-toolkit/{p-43564b05.entry.js.map → p-f9bc4e87.entry.js.map} +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment } from './p-Dm38fPV4.js';
|
|
2
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
-
import { d as defineCustomElement$2 } from './p-
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
2
|
+
import { d as defineCustomElement$3 } from './p-7ffg336s.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-uUOjJ6kU.js';
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-BrQ3aUVb.js';
|
|
5
5
|
|
|
6
6
|
const toggletipCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}";
|
|
7
7
|
|
|
@@ -53,7 +53,7 @@ const Toggletip = /*@__PURE__*/ proxyCustomElement(class Toggletip extends H {
|
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
render() {
|
|
56
|
-
return (h(Fragment, null, h("dso-info-button", { key: '
|
|
56
|
+
return (h(Fragment, null, h("dso-info-button", { key: 'ed1c4c1dd5ff84030e74ce568666481a546dbef5', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '48d22cbdbf55a6b73b72b1b52047329661af9837', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '9261b395053da5a89f5d4d2edf6f7e0e6661a95b' }))));
|
|
57
57
|
}
|
|
58
58
|
get host() { return this; }
|
|
59
59
|
static get style() { return toggletipCss; }
|
|
@@ -94,6 +94,6 @@ function defineCustomElement() {
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
export { Toggletip as T, defineCustomElement as d };
|
|
97
|
-
//# sourceMappingURL=p-
|
|
97
|
+
//# sourceMappingURL=p-S0YMB18e.js.map
|
|
98
98
|
|
|
99
|
-
//# sourceMappingURL=p-
|
|
99
|
+
//# sourceMappingURL=p-S0YMB18e.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-S0YMB18e.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,yPAAyP;;MCQjQ,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: inline-block;\r\n\r\n // tooltip arrow placement exceptions\r\n --tooltip-margin-block-start: 0;\r\n --tooltip-margin-inline-start: 3px;\r\n --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n outline: none;\r\n z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /**\r\n * Toggletip label.\r\n */\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /**\r\n * Toggletip position.\r\n */\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /**\r\n * Set to true for small Toggletip.\r\n */\r\n @Prop()\r\n small?: boolean;\r\n\r\n /**\r\n * Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n if (this.active) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
|
|
2
2
|
import { A as AnnotationBody } from './p-VjABABA3.js';
|
|
3
3
|
import { w as watcher, A as AnnotationGewijzigdeLocatie, a as AnnotationSymbolSlot } from './p-DgQ6L0IZ.js';
|
|
4
|
-
import { d as defineCustomElement$5 } from './p-
|
|
5
|
-
import { d as defineCustomElement$4 } from './p-
|
|
4
|
+
import { d as defineCustomElement$5 } from './p-7ffg336s.js';
|
|
5
|
+
import { d as defineCustomElement$4 } from './p-BELL2NPR.js';
|
|
6
6
|
import { d as defineCustomElement$3 } from './p-B3BAWGAx.js';
|
|
7
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
-
import { d as defineCustomElement$1 } from './p-
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-BqKuHNTU.js';
|
|
8
|
+
import { d as defineCustomElement$1 } from './p-BrQ3aUVb.js';
|
|
9
9
|
|
|
10
10
|
const annotationCss = "@charset \"UTF-8\";a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a .sr-only+:is(dso-icon,svg.di){margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
|
|
11
11
|
|
|
@@ -75,6 +75,6 @@ function defineCustomElement() {
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
export { AnnotationLocatie as A, defineCustomElement as d };
|
|
78
|
-
//# sourceMappingURL=p-
|
|
78
|
+
//# sourceMappingURL=p-X4ksz0z1.js.map
|
|
79
79
|
|
|
80
|
-
//# sourceMappingURL=p-
|
|
80
|
+
//# sourceMappingURL=p-X4ksz0z1.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-X4ksz0z1.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,2pLAA2pL;;MCiBpqL,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n display: block;\r\n padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n display: flex;\r\n gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n font-weight: 500;\r\n overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n margin-block: 0;\r\n\r\n .content:has(+ dso-label) {\r\n margin-inline-end: units.$u1 * 0.5;\r\n }\r\n}\r\n\r\n.annotation-data {\r\n font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n tag: \"dso-annotation-locatie\",\r\n styleUrl: \"../annotation.scss\",\r\n shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n /**\r\n * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n */\r\n @Prop({ reflect: true })\r\n wijzigactie?: AnnotationWijzigactie;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de annotatie actief is.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n */\r\n @Prop({ reflect: true })\r\n gewijzigdeLocatie?: boolean;\r\n\r\n /**\r\n * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n */\r\n @Event()\r\n dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n /**\r\n * De noemer van de locatie.\r\n */\r\n @Prop()\r\n locatieNoemer?: RenvooiValue | string;\r\n\r\n @Element()\r\n private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n private watcher = watcher(this.host);\r\n\r\n connectedCallback(): void {\r\n this.watcher.watch();\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.watcher.unwatch();\r\n }\r\n\r\n render() {\r\n const hasSymbool = this.watcher.hasSymbool();\r\n\r\n return (\r\n <AnnotationBody\r\n symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n active={this.active}\r\n dsoActiveChange={this.dsoActiveChange}\r\n title={\r\n <>\r\n <span class=\"content\">\r\n <dso-renvooi value={this.locatieNoemer} />\r\n </span>\r\n {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n </>\r\n }\r\n />\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
|
|
2
2
|
import { c as clsx } from './p-ChV9xqsO.js';
|
|
3
3
|
import { i as i18n } from './p-B_kXuEcW.js';
|
|
4
|
-
import { d as defineCustomElement$1 } from './p-
|
|
4
|
+
import { d as defineCustomElement$1 } from './p-7ffg336s.js';
|
|
5
5
|
|
|
6
6
|
const translations = {
|
|
7
7
|
en: {
|
|
@@ -73,6 +73,6 @@ function defineCustomElement() {
|
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
export { Alert as A, defineCustomElement as d };
|
|
76
|
-
//# sourceMappingURL=p-
|
|
76
|
+
//# sourceMappingURL=p-_H6ui1La.js.map
|
|
77
77
|
|
|
78
|
-
//# sourceMappingURL=p-
|
|
78
|
+
//# sourceMappingURL=p-_H6ui1La.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-_H6ui1La.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,8uCAA8uC;;MCalvC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA0BnD;IAxBC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-alert\": {\r\n close: \"Close\",\r\n success: \"Success\",\r\n info: \"Notice\",\r\n warning: \"Warning\",\r\n error: \"Error\",\r\n },\r\n },\r\n nl: {\r\n \"dso-alert\": {\r\n close: \"Sluiten\",\r\n success: \"Gelukt\",\r\n info: \"Opmerking\",\r\n warning: \"Waarschuwing\",\r\n error: \"Fout\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/alert\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n margin-block-start: units.$u3;\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.alert {\r\n @include alert.root();\r\n\r\n &.dso-compact {\r\n min-block-size: alert.$inline-padding;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-alert\",\r\n styleUrl: \"alert.scss\",\r\n shadow: true,\r\n})\r\nexport class Alert {\r\n @Element()\r\n host!: HTMLDsoAlertElement;\r\n\r\n /**\r\n * Set status of alert\r\n */\r\n @Prop({ reflect: true })\r\n status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n /**\r\n * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n */\r\n @Prop()\r\n roleAlert?: boolean;\r\n\r\n /**\r\n * Show alert as compact variant (without icon)\r\n */\r\n @Prop({ reflect: true })\r\n compact?: boolean;\r\n\r\n /**\r\n * When `false` the close button in the alert will not be rendered.\r\n */\r\n @Prop()\r\n closable = false;\r\n\r\n /**\r\n * Emitted when the user closes the Alert.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n const status = this.text(this.status);\r\n if (!status) {\r\n throw new Error(`Invalid status ${this.status}`);\r\n }\r\n\r\n return (\r\n <div\r\n class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n role={this.roleAlert ? \"alert\" : undefined}\r\n >\r\n {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n <span class=\"sr-only\">{status}:</span>\r\n <slot></slot>\r\n\r\n {this.closable && (\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 }\r\n}\r\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-Dm38fPV4.js';
|
|
2
2
|
import { c as clsx } from './p-ChV9xqsO.js';
|
|
3
|
-
import { d as defineCustomElement$1 } from './p-
|
|
3
|
+
import { d as defineCustomElement$1 } from './p-7ffg336s.js';
|
|
4
4
|
|
|
5
5
|
const infoButtonCss = "@charset \"UTF-8\";:host{display:inline-block}*,*::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}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";
|
|
6
6
|
|
|
@@ -28,7 +28,7 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
|
|
|
28
28
|
this.dsoToggle.emit({ originalEvent: e, active: this.active });
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: 'eb293ebed30eed249b8be309def6ead14b1cf24a', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '3e288bbba8b56cc92ca338df47811cbdded8a3df', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '9c11b0fcb3d77c441e7732d098fe14f4538cb2f5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'aff325d3fefac7a17259b40753104177dc3ac8f6', class: "sr-only" }, this.label))));
|
|
32
32
|
}
|
|
33
33
|
static get style() { return infoButtonCss; }
|
|
34
34
|
}, [257, "dso-info-button", {
|
|
@@ -58,6 +58,6 @@ function defineCustomElement() {
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
export { InfoButton as I, defineCustomElement as d };
|
|
61
|
-
//# sourceMappingURL=p-
|
|
61
|
+
//# sourceMappingURL=p-uUOjJ6kU.js.map
|
|
62
62
|
|
|
63
|
-
//# sourceMappingURL=p-
|
|
63
|
+
//# sourceMappingURL=p-uUOjJ6kU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-uUOjJ6kU.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,icAAic;;MCU1c,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAeE,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAQb;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,uBAAuB;AAqChC;AA7BC;;AAEG;AAEH,IAAA,MAAM,QAAQ,GAAA;;QACZ,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGd,IAAA,YAAY,CAAC,CAAa,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;IAGhE,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAA,EACrF,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,EAAA,eAAA,EACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,EAAa,CAAA,EAC/E,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n display: inline-block;\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\nbutton {\r\n @include info-button.root();\r\n\r\n cursor: pointer;\r\n vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n display: block;\r\n}\r\n","import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /**\r\n * Whether the InfoButton is active.\r\n */\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /**\r\n * For secondary Info Button.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /**\r\n * The label.\r\n */\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /**\r\n * Emitted when the user activates the Info Button.\r\n */\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /**\r\n * To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1301,7 +1301,7 @@ const OzonContent = class {
|
|
|
1301
1301
|
urlResolver: this.urlResolver,
|
|
1302
1302
|
};
|
|
1303
1303
|
const transformed = mapper.transform(this.content, context);
|
|
1304
|
-
return index.h(index.Fragment, { key: '
|
|
1304
|
+
return index.h(index.Fragment, { key: '9daf19e0d011db075655dc8352f866d8167173b3' }, transformed);
|
|
1305
1305
|
}
|
|
1306
1306
|
static get watchers() { return {
|
|
1307
1307
|
"content": ["contentWatcher"]
|
|
@@ -1373,7 +1373,7 @@ const Table = class {
|
|
|
1373
1373
|
render() {
|
|
1374
1374
|
var _a, _b, _c;
|
|
1375
1375
|
const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
|
|
1376
|
-
return (index.h(index.Host, { key: '
|
|
1376
|
+
return (index.h(index.Host, { key: '5953cc01c1eb25f20bf44b20d91091c6398bf938', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '848e53047bfca26a6f0c8cc1b014ca48c2ee2540', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { key: '4bdd3f62085641103af4cc9469b5caf1d4f89b56', class: "dso-modal-overlay" }), index.h("div", { key: '6f21154d50a873ed118f42b68762861db360cea3', class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ key: '2240f097c3f06b7145742a9cb2cbd6b59d7fe6e5', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (index.h("div", { key: '3a8b0929f7a16736add3a505f9e8c6fe0a98f14a', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { key: 'fa982924130e442bf31f4241d2a7d9017a869dec', class: "dso-responsive-message" }, index.h("span", { key: 'f693422c76f65f066c23b85781db45593794727b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { key: '0ed185c75afd0afa0fed98e91b37928f5689150f', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { key: '843045b7dd0352c6086d9cbeaf5ede722ebab9fd', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", { key: '799a93a9bbb45e81bb28ce7962b6bfb6d496e110' }, "vergroten"), index.h("dso-icon", { key: '6cb6608bfbc75fda7097d772ee348e0128808155', icon: "external-link" }))))), this.modalActive && (index.h("div", { key: '50d963ebb8a22c31a3f7afdc3f10787d948fbc57', class: "dso-header" }, index.h("h2", { key: '182a1f7c968e360295a260798cbd46d15e00d22d', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { key: '2590c8227264090f867af9b2768de31a68ea47ac', type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { key: '7683598fc37fb2da97292ab4fa13621f2f1c20e6', icon: "times" }), index.h("span", { key: 'fe6b5126af1678abef39cfd9fc983356323dd2d5', class: "sr-only" }, "Sluiten")))), index.h("div", { key: '0ef436349c8c72aa96f61fc7a84284d6b0a2e5e1', class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", { key: 'f3d14e2988b79b07a0f4235ff6b3f82b04807de2' }))))));
|
|
1377
1377
|
}
|
|
1378
1378
|
openModal() {
|
|
1379
1379
|
this.placeholderHeight = this.host.clientHeight;
|
|
@@ -34,6 +34,38 @@ const DropdownMenu = class {
|
|
|
34
34
|
this.toggleOptions(false);
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
+
this.keyDownListener = (event) => {
|
|
38
|
+
if (event.defaultPrevented || !this.open) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
switch (event.key) {
|
|
42
|
+
case "Tab":
|
|
43
|
+
if (event.shiftKey) {
|
|
44
|
+
this.tabInPopup(this.tabbables(true), -1);
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
this.tabInPopup(this.tabbables(true), 1);
|
|
48
|
+
}
|
|
49
|
+
break;
|
|
50
|
+
case "ArrowDown":
|
|
51
|
+
this.tabInPopup(this.tabbables(false), 1);
|
|
52
|
+
break;
|
|
53
|
+
case "ArrowUp":
|
|
54
|
+
this.tabInPopup(this.tabbables(false), -1);
|
|
55
|
+
break;
|
|
56
|
+
case "Escape":
|
|
57
|
+
this.escape();
|
|
58
|
+
break;
|
|
59
|
+
case " ":
|
|
60
|
+
if (event.target instanceof HTMLElement) {
|
|
61
|
+
event.target.click();
|
|
62
|
+
}
|
|
63
|
+
break;
|
|
64
|
+
default:
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
};
|
|
37
69
|
this.escape = () => {
|
|
38
70
|
this.button.focus();
|
|
39
71
|
this.toggleOptions(false);
|
|
@@ -126,41 +158,13 @@ const DropdownMenu = class {
|
|
|
126
158
|
this.cleanUp = undefined;
|
|
127
159
|
}
|
|
128
160
|
}
|
|
161
|
+
connectedCallback() {
|
|
162
|
+
this.host.addEventListener("keydown", this.keyDownListener);
|
|
163
|
+
}
|
|
129
164
|
disconnectedCallback() {
|
|
165
|
+
this.host.removeEventListener("keydown", this.keyDownListener);
|
|
130
166
|
this.toggleOptions(false);
|
|
131
167
|
}
|
|
132
|
-
keyDownListener(event) {
|
|
133
|
-
if (event.defaultPrevented || !this.open) {
|
|
134
|
-
return;
|
|
135
|
-
}
|
|
136
|
-
switch (event.key) {
|
|
137
|
-
case "Tab":
|
|
138
|
-
if (event.shiftKey) {
|
|
139
|
-
this.tabInPopup(this.tabbables(true), -1);
|
|
140
|
-
}
|
|
141
|
-
else {
|
|
142
|
-
this.tabInPopup(this.tabbables(true), 1);
|
|
143
|
-
}
|
|
144
|
-
break;
|
|
145
|
-
case "ArrowDown":
|
|
146
|
-
this.tabInPopup(this.tabbables(false), 1);
|
|
147
|
-
break;
|
|
148
|
-
case "ArrowUp":
|
|
149
|
-
this.tabInPopup(this.tabbables(false), -1);
|
|
150
|
-
break;
|
|
151
|
-
case "Escape":
|
|
152
|
-
this.escape();
|
|
153
|
-
break;
|
|
154
|
-
case " ":
|
|
155
|
-
if (event.target instanceof HTMLElement) {
|
|
156
|
-
event.target.click();
|
|
157
|
-
}
|
|
158
|
-
break;
|
|
159
|
-
default:
|
|
160
|
-
return;
|
|
161
|
-
}
|
|
162
|
-
event.preventDefault();
|
|
163
|
-
}
|
|
164
168
|
tabInPopup(tabbables, direction) {
|
|
165
169
|
var _a;
|
|
166
170
|
const currentIndex = tabbables.findIndex((e) => e === getActiveElement.getActiveElement());
|
|
@@ -174,7 +178,7 @@ const DropdownMenu = class {
|
|
|
174
178
|
(_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
175
179
|
}
|
|
176
180
|
render() {
|
|
177
|
-
return (index.h(index.Host, { key: '
|
|
181
|
+
return (index.h(index.Host, { key: 'ca433c0742f0b1a86f40f821dde1ced6c103f6d5', onFocusout: this.focusOutListener }, index.h("slot", { key: '049bbf82db468f4912615b75628f82335b2b13ab', name: "toggle" }), index.h("div", { key: 'a480ad769709596bac365e26186d0ff39d4a9646', popover: "manual", ref: (element) => (this.popoverElement = element) }, index.h("slot", { key: '6aa0977a24f5af0acc2883b2afe7a7a99ec26f7d' }))));
|
|
178
182
|
}
|
|
179
183
|
get host() { return index.getElement(this); }
|
|
180
184
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-dropdown-menu.entry.cjs.js","mappings":"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","names":["tabbable","uuidv4","autoUpdate","computePosition","offset","flip","getActiveElement","h","Host"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n private popoverElement: HTMLDivElement | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n if (this.popoverElement && !this.cleanUp) {\r\n const element = this.popoverElement;\r\n this.cleanUp = autoUpdate(this.button, element, () => {\r\n computePosition(this.button, element, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(this.dropdownOptionsOffset),\r\n flip({\r\n padding: this.dropdownOptionsOffset,\r\n }),\r\n ],\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n }).then(({ x, y }) => {\r\n Object.assign(element.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.toggleOptions();\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.toggleOptions(false);\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n private toggleOptions(force?: boolean) {\r\n this.open = force ?? !this.open;\r\n if (this.popoverElement?.isConnected) {\r\n this.popoverElement?.togglePopover(this.open);\r\n }\r\n\r\n if (!this.open && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.toggleOptions(false);\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.toggleOptions(false);\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented || !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.toggleOptions(false);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-dropdown-menu.entry.cjs.js","mappings":"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","names":["tabbable","uuidv4","autoUpdate","computePosition","offset","flip","getActiveElement","h","Host"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n private popoverElement: HTMLDivElement | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n if (this.popoverElement && !this.cleanUp) {\r\n const element = this.popoverElement;\r\n this.cleanUp = autoUpdate(this.button, element, () => {\r\n computePosition(this.button, element, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(this.dropdownOptionsOffset),\r\n flip({\r\n padding: this.dropdownOptionsOffset,\r\n }),\r\n ],\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n }).then(({ x, y }) => {\r\n Object.assign(element.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.toggleOptions();\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.toggleOptions(false);\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n private toggleOptions(force?: boolean) {\r\n this.open = force ?? !this.open;\r\n if (this.popoverElement?.isConnected) {\r\n this.popoverElement?.togglePopover(this.open);\r\n }\r\n\r\n if (!this.open && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n this.toggleOptions(false);\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.toggleOptions(false);\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented || !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.toggleOptions(false);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dso-dropdown-menu.entry.cjs.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n private popoverElement: HTMLDivElement | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n if (this.popoverElement && !this.cleanUp) {\r\n const element = this.popoverElement;\r\n this.cleanUp = autoUpdate(this.button, element, () => {\r\n computePosition(this.button, element, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(this.dropdownOptionsOffset),\r\n flip({\r\n padding: this.dropdownOptionsOffset,\r\n }),\r\n ],\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n }).then(({ x, y }) => {\r\n Object.assign(element.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.toggleOptions();\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.toggleOptions(false);\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n private toggleOptions(force?: boolean) {\r\n this.open = force ?? !this.open;\r\n if (this.popoverElement?.isConnected) {\r\n this.popoverElement?.togglePopover(this.open);\r\n }\r\n\r\n if (!this.open && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.toggleOptions(false);\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.toggleOptions(false);\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented || !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n }\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.toggleOptions(false);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["tabbable","uuidv4","autoUpdate","computePosition","offset","flip","getActiveElement","h","Host"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dso-dropdown-menu.entry.cjs.js","sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n /**\r\n * Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n */\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /**\r\n * Alignment of the dropdown\r\n */\r\n @Prop()\r\n dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n /**\r\n * Space between button and dropdown options\r\n */\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /**\r\n * Whether the menu is checkable.\r\n */\r\n @Prop()\r\n checkable = false;\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n private popoverElement: HTMLDivElement | undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n if (this.popoverElement && !this.cleanUp) {\r\n const element = this.popoverElement;\r\n this.cleanUp = autoUpdate(this.button, element, () => {\r\n computePosition(this.button, element, {\r\n strategy: \"fixed\",\r\n middleware: [\r\n offset(this.dropdownOptionsOffset),\r\n flip({\r\n padding: this.dropdownOptionsOffset,\r\n }),\r\n ],\r\n placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n }).then(({ x, y }) => {\r\n Object.assign(element.style, {\r\n left: `${x}px`,\r\n top: `${y}px`,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n const composedPath = event.composedPath();\r\n\r\n if (this.isToggleButtonEvent(composedPath)) {\r\n this.toggleOptions();\r\n } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n this.toggleOptions(false);\r\n }\r\n }\r\n\r\n private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.button);\r\n }\r\n\r\n private isMenuItemEvent(composedPath: EventTarget[]) {\r\n return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n }\r\n\r\n private toggleOptions(force?: boolean) {\r\n this.open = force ?? !this.open;\r\n if (this.popoverElement?.isConnected) {\r\n this.popoverElement?.togglePopover(this.open);\r\n }\r\n\r\n if (!this.open && this.cleanUp) {\r\n this.cleanUp();\r\n this.cleanUp = undefined;\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n this.toggleOptions(false);\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (\r\n this.open &&\r\n (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n ) {\r\n this.toggleOptions(false);\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented || !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.toggleOptions(false);\r\n };\r\n\r\n render() {\r\n return (\r\n <Host onFocusout={this.focusOutListener}>\r\n <slot name=\"toggle\" />\r\n <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"names":["tabbable","uuidv4","autoUpdate","computePosition","offset","flip","getActiveElement","h","Host"],"mappings":"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"}
|