@dso-toolkit/core 87.0.0 → 88.0.0

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '275f1aedb67e7f7d2a3b175b1d854991fa140d1d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '7a140ce9a83b75e66db7b2f12f41c2882809274c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '9e45d98aaaaf256d9918712b32dfdfea9a8706ec' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '47ff506349a95fed3165177c16b5848ca5bd9daf', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'b74f351887d2020407a9c6644dabd26e6acc4f4b', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '6216b30f46b181cdac39adafe6fdf3364e160a55' }, "Heel moeilijk"), h("span", { key: '2c6746373095d09ef5cd19c2015cb240545d4ef9' }, "Heel makkelijk")), h("div", { key: '380e5d754686bb2ecd8be0c56a3efe33f60c010b', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '377269b580cbd00a35fe11f1049ecaf5a5c4487d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '2a9ef6ea761083ac436e86b9644730e756287a0c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '9218605298ca17dc79826d0660937724b1aa279f' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '180a6a112d5d7bb085881b6b84836b65e7941cf6', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'd889f88a9b50c4360a6b2bc206eabc3f2903bac0', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '200f9de2f49f1c19399fe57ddf55ef8866f1414e' }, "Heel moeilijk"), h("span", { key: 'bca6f67d09010dfa473d1ff001c38f3d6e215eba' }, "Heel makkelijk")), h("div", { key: 'cba9624f28dd7e53c818fd84e7135729f0a657d4', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'd32cc8c9a15a36021dfa87a1fc24edab0a4020a8', type: "submit", class: "dso-secondary" }, h("span", { key: 'accce3605b3e1df8490c898491aa7318eb4f8874' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'bc3e579eb238799419595dc1e0f4df33c35c53e7', type: "submit", class: "dso-secondary" }, h("span", { key: 'df9c766f74fe501293e72fc6291f9bbe64c8910d' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.js

@@ -36,7 +36,7 @@ export class Table {
     render() {
         var _a, _b, _c;
         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();
-        return (h(Host, { key: '5228dc08b77f9a9a1e1a1a7a1b8ae1bcdbb1c3f2', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '513adf4c64ffa560597f976443340595e55c338a', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), h("div", { class: "dso-body dso-table-body" }, h("slot", null))))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        return (h(Host, { key: '95fda5af5dda45cb55f0b37efee38bcaa99d84ac', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '388222068c1ed781740424faabce63a39764ff1c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), h("div", { class: "dso-body dso-table-body" }, h("slot", null))))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/tabs.js

@@ -64,7 +64,7 @@ export class Tabs {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'ae03ef906dabd5ed64da40b57f818ce447427844' }, h("div", { key: '79c2eeca63a44a81c7d5623b763b52e152f834b8', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd3d8396c36601f30b25de572cccf8f02a411abed' })), h("div", { key: '67e6607cc3cc09d2511b38cdb0b218095bfcf2a2', role: "tabpanel", tabindex: "0" }, h("slot", { key: '25164b17aea879289bc7b5f1e43b61ae78e980dd', name: "panel" }))));
+        return (h(Host, { key: 'b430219c96edf6edf2ed4016acd351fe73d2ab09' }, h("div", { key: '6d3bbbefcd781cbdf454d99d4997fc0bce695f79', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '94650f25cc3330c3a99ec9adc97b57cc31085e63' })), h("div", { key: 'c9096ce7f23e183cc61752e2774afe9dd4c1fb3a', role: "tabpanel", tabindex: "0" }, h("slot", { key: '8226777ee10de8cf42661549f0cb6bef7c0ca54c', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: 'd2362057fd3eea7804036862cd899a1d45d6f87b' }, h("dso-icon", { key: 'd52a8f555c066921d32a8ecbfc36a51f2a1ccd1e', icon: "clock" }), h("slot", { key: 'b2722bab4ea3ca7af50fc857abb185f0c8f03280' }), h("slot", { key: '22950f32ed35f10c8bc3df9be90271195abee3dc', name: "button" })));
+        return (h(Fragment, { key: '8ff21b653f7eabfa2d8c26aa873c456dd79b7dae' }, h("dso-icon", { key: 'dd2abde6521d77468808e5ab37cbaf3a9a8d77dd', icon: "clock" }), h("slot", { key: '595ab3d3e30f98abaeb40b2840462274a33de83b' }), h("slot", { key: '03a8e2060bec34dd1dbe078cd100a47b7474f9b4', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggletip/toggletip.js

@@ -44,7 +44,7 @@ export class Toggletip {
         };
     }
     render() {
-        return (h(Fragment, { key: '6e0399d384bf9b2c8d5fd2f242108c1779540937' }, h("dso-info-button", { key: 'caffd2a1c29b0132d9716193a9b8d5a7be2338f3', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '078fa24444c5369fb2f7aa2b130016ac6f1d39aa', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'f8c6586d7f0ce98038e8208ff18f7f8ebbdace8a' }))));
+        return (h(Fragment, { key: 'e4df77108aca160620fea4790bf975eeb57d7043' }, h("dso-info-button", { key: '0b86a3272e62ed4adbe2afa973c610ba54947f10', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '1f1adb0eb1098d2d5d60402005d6fb67b595d167', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'd49b58fa8b6ddeeeee2d6954e0df07b07669adf8' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -189,7 +189,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '40393c2c46a62aa1815fd5ae117076bd872b60c1', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: 'e46b816c3fa8662956c23789f04815e4f9acf9d2', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'b2d2455680d0fd4883d3a3b15234cfda84392152', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'ccd2fdff0934bd705539afa2fec476294cb433e3', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '4f1f21efcb92b8771aa9a2458c5e92883460ea59' })))));
+        return (h(Host, { key: '6186fdcbf9e8bae5e3e4ee74c0d8b50e6fcb700b', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '7021fed0ee65f1ce5ec74383b4cd1b2a5ccab1b3', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '87a3097f75676fee2ea94899b94065af958fa49e', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '4c4d10446ce05f816ce32fdfd4eb103cb0e58394', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'a520b11e7a7d930df5c4466e2f3583c71616a811' })))));
     }
     activatePopper() {
         var _a;

package/dist/collection/components/tree-view/tree-view.js

@@ -174,7 +174,7 @@ export class TreeView {
     }
     render() {
         var _a;
-        return (h("div", { key: '5735f8e7460d269cdb8a6338b54ee96c28cef98b', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '2973a236f58916e0246920d437ad7056c0ef7031', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'ab7c4a9d862e3f99c50365d744d6376366737d3d', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'a41b478cccd6b39ee30b47ca28c5a34549a270a0', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -158,7 +158,7 @@ export class ViewerGrid {
         }
     }
     render() {
-        return (h(Fragment, { key: '9847a3c1ddb49b69fbf1a51bb07b69ca9ed4ce4c' }, h("slot", { key: '03fbfa717048b5015d61661d2d5433c0faf47565', name: "top-bar" }), h("div", { key: 'f09b17224d46fdab51a389444384040770efe332', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '598db232e64fd9040ec6398adc877889fb761e3e', class: "dso-navbar" }, h("ul", { key: '378b508931543448dbc6a5b754a2a4aae7e04aac', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '096e23cb054e8c359d9b5f2de4286250f509a79a', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: 'cf3d94936fec7e69ff26a7f80cdc8c9ee3741071', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '0b380945565d55094b04572573cce83f986d2fc4', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'e9e22c7b6deedb4feed6331ea1178315386fc1b6', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '9460fa66bd7bb1449a6447b94fb462af18861cc9', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'e800a7a3d49dff9cd4eb624114a1135fcb1c5506', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
+        return (h(Fragment, { key: 'd1d81c9db00b4fb1394e9938ed698a78e2f54976' }, h("slot", { key: '8523d2e37a153f3b8e6521e1d4a07f0395c67180', name: "top-bar" }), h("div", { key: '64e25d1b9c82661ead44a20dc43fc60b3400b8a9', class: "viewer-grid-columns" }, this.tabView && (h("nav", { key: '5b3975cd300000076405acd470f1bcc2ed6581f1', class: "dso-navbar" }, h("ul", { key: '8d987841d10e4806ce6025fb81db489d1f583410', class: "dso-nav dso-nav-sub" }, viewerGridTabs.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(MainPanel, { key: '21baa34326e6cce24feef6ae8ac2237520c6dd90', tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView || (this.tabView && this.activeTab === "search")) && (h(FilterPanel, { key: '4f00c13af3676b1dbfb97a05a4c644ed0aa027f2', open: this.filterPanelOpen, title: this.filterPanelTitle, ref: (element) => (this.filterPanel = element), dsoCloseFilterPanel: (e) => this.dsoCloseFilterPanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'b397c8a90326fd24ebdcd8148d0222dc7038e131', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ae239735328e35dc97e8fc7653fad4c886dab9eb', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '1a12d6aa3431c11db288a0b07ebb51b772a27df7', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'ee5b23969f8ace7db8d94adce586d8fd91fea08b', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) }))));
     }
     static get is() { return "dso-viewer-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/functional-components/tooltip/position-tooltip.function.js

@@ -1,4 +1,4 @@
-import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, hide, offset, shift, size } from "@floating-ui/dom";
 /**
  * Positions the Tooltip relative to its reference element.
  * The position is recalculated automatically on scroll, resize, or
@@ -6,13 +6,13 @@ import { arrow, autoUpdate, computePosition, flip, hide, offset, shift } from "@
  * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.
  */
 export function positionTooltip(options) {
-    const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible = false, } = options;
+    const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible, restrictContentElement, } = options;
     return autoUpdate(referenceElement, tipRef, () => {
         const padding = 5;
-        const arrowLength = tipArrowRef.offsetWidth;
-        const axisOffsetCalc = Math.sqrt(2 * arrowLength ** 2);
+        const arrowOffsetWidth = tipArrowRef.offsetWidth;
+        const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);
         const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;
-        const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;
+        const arrowPadding = arrowOffsetWidth * Math.sqrt(2) * 1.5;
         const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;
         // Set placement to top if viewport is small and topPositionSmallViewPort is set to true
         const placement = smallViewport ? "top" : placementTip;
@@ -30,12 +30,21 @@ export function positionTooltip(options) {
                     padding,
                 }),
                 arrow({
-                    padding: arrowPadding,
+                    padding: arrowOffsetWidth,
                     element: tipArrowRef,
                 }),
                 hide({
-                    padding: arrowPadding + arrowLength + padding,
+                    padding: arrowOffsetWidth + padding,
                 }),
+                restrictContentElement &&
+                    size({
+                        apply({ availableHeight, availableWidth }) {
+                            Object.assign(restrictContentElement.style, {
+                                maxHeight: `${availableHeight - padding}px`,
+                                maxWidth: `${availableWidth - padding * 2}px`,
+                            });
+                        },
+                    }),
             ],
             placement,
         }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {
@@ -85,7 +94,7 @@ export function positionTooltip(options) {
                     bottom: "",
                     left: arrowX ? `${arrowX}px` : "",
                     top: arrowY ? `${arrowY}px` : "",
-                    [staticSide]: `${-arrowLength / 2}px`,
+                    [staticSide]: `${-arrowOffsetWidth / 2}px`,
                     transform: `rotate(${angle}deg)`,
                 });
             }

package/dist/collection/functional-components/tooltip/position-tooltip.function.js.map

@@ -1 +1 @@
-{"version":3,"file":"position-tooltip.function.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/position-tooltip.function.ts"],"names":[],"mappings":"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","sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/**\r\n * Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n */\r\nexport function positionTooltip(options: TooltipOptions) {\r\n  const {\r\n    referenceElement,\r\n    tipRef,\r\n    tipArrowRef,\r\n    placementTip,\r\n    topPositionSmallViewPort,\r\n    halfMainAxisOffset,\r\n    forceVisible = false,\r\n  } = options;\r\n\r\n  return autoUpdate(referenceElement, tipRef, () => {\r\n    const padding = 5;\r\n    const arrowLength = tipArrowRef.offsetWidth;\r\n    const axisOffsetCalc = Math.sqrt(2 * arrowLength ** 2);\r\n    const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n    const arrowPadding = arrowLength * Math.sqrt(2) * 1.5;\r\n    const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n    // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n    const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n    computePosition(referenceElement, tipRef, {\r\n      strategy: \"fixed\",\r\n      middleware: [\r\n        offset({\r\n          mainAxis: mainAxisOffset,\r\n          alignmentAxis: -arrowPadding,\r\n        }),\r\n        flip({\r\n          padding,\r\n        }),\r\n        shift({\r\n          padding,\r\n        }),\r\n        arrow({\r\n          padding: arrowPadding,\r\n          element: tipArrowRef,\r\n        }),\r\n        hide({\r\n          padding: arrowPadding + arrowLength + padding,\r\n        }),\r\n      ],\r\n      placement,\r\n    }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n      if (middlewareData.hide) {\r\n        // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n        const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n        Object.assign(tipRef.style, {\r\n          // Both of these properties have a CSS transition\r\n          visibility: disappear ? \"hidden\" : \"visible\",\r\n          opacity: disappear ? 0 : 1,\r\n        });\r\n      }\r\n\r\n      Object.assign(tipRef.style, {\r\n        left: `${x}px`,\r\n        top: `${y}px`,\r\n        strategy,\r\n      });\r\n\r\n      const side = computedPlacement.split(\"-\")[0];\r\n\r\n      const staticSide = side\r\n        ? {\r\n            top: \"bottom\",\r\n            right: \"left\",\r\n            bottom: \"top\",\r\n            left: \"right\",\r\n          }[side]\r\n        : \"top\";\r\n\r\n      let angle;\r\n      switch (staticSide) {\r\n        default:\r\n        case \"top\":\r\n          angle = 45;\r\n          break;\r\n        case \"right\":\r\n          angle = 135;\r\n          break;\r\n        case \"bottom\":\r\n          angle = 225;\r\n          break;\r\n        case \"left\":\r\n          angle = 315;\r\n          break;\r\n      }\r\n\r\n      if (middlewareData.arrow && staticSide) {\r\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n        Object.assign(tipArrowRef.style, {\r\n          right: \"\",\r\n          bottom: \"\",\r\n          left: arrowX ? `${arrowX}px` : \"\",\r\n          top: arrowY ? `${arrowY}px` : \"\",\r\n          [staticSide]: `${-arrowLength / 2}px`,\r\n          transform: `rotate(${angle}deg)`,\r\n        });\r\n      }\r\n    });\r\n  });\r\n}\r\n"]}
+{"version":3,"file":"position-tooltip.function.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/position-tooltip.function.ts"],"names":[],"mappings":"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","sourcesContent":["import { Placement, arrow, autoUpdate, computePosition, flip, hide, offset, shift, size } from \"@floating-ui/dom\";\r\n\r\nimport { TooltipOptions } from \"./tooltip.interfaces\";\r\n\r\n/**\r\n * Positions the Tooltip relative to its reference element.\r\n * The position is recalculated automatically on scroll, resize, or\r\n * element changes via `autoUpdate`, but is otherwise based only on the\r\n * provided arguments 'placementTip', 'topPositionSmallViewPort' and 'halfMainAxisOffset'.\r\n */\r\nexport function positionTooltip(options: TooltipOptions) {\r\n  const {\r\n    referenceElement,\r\n    tipRef,\r\n    tipArrowRef,\r\n    placementTip,\r\n    topPositionSmallViewPort,\r\n    halfMainAxisOffset,\r\n    forceVisible,\r\n    restrictContentElement,\r\n  } = options;\r\n\r\n  return autoUpdate(referenceElement, tipRef, () => {\r\n    const padding = 5;\r\n    const arrowOffsetWidth = tipArrowRef.offsetWidth;\r\n    const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);\r\n    const mainAxisOffset = halfMainAxisOffset ? axisOffsetCalc / 2 : axisOffsetCalc;\r\n    const arrowPadding = arrowOffsetWidth * Math.sqrt(2) * 1.5;\r\n    const smallViewport = topPositionSmallViewPort && document.body.clientWidth < 992;\r\n\r\n    // Set placement to top if viewport is small and topPositionSmallViewPort is set to true\r\n    const placement: Placement = smallViewport ? \"top\" : placementTip;\r\n\r\n    computePosition(referenceElement, tipRef, {\r\n      strategy: \"fixed\",\r\n      middleware: [\r\n        offset({\r\n          mainAxis: mainAxisOffset,\r\n          alignmentAxis: -arrowPadding,\r\n        }),\r\n        flip({\r\n          padding,\r\n        }),\r\n        shift({\r\n          padding,\r\n        }),\r\n        arrow({\r\n          padding: arrowOffsetWidth,\r\n          element: tipArrowRef,\r\n        }),\r\n        hide({\r\n          padding: arrowOffsetWidth + padding,\r\n        }),\r\n        restrictContentElement &&\r\n          size({\r\n            apply({ availableHeight, availableWidth }) {\r\n              Object.assign(restrictContentElement.style, {\r\n                maxHeight: `${availableHeight - padding}px`,\r\n                maxWidth: `${availableWidth - padding * 2}px`,\r\n              });\r\n            },\r\n          }),\r\n      ],\r\n      placement,\r\n    }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {\r\n      if (middlewareData.hide) {\r\n        // Tooltip needs to be visible at all times on small viewports or when forceVisible is true\r\n        const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;\r\n\r\n        Object.assign(tipRef.style, {\r\n          // Both of these properties have a CSS transition\r\n          visibility: disappear ? \"hidden\" : \"visible\",\r\n          opacity: disappear ? 0 : 1,\r\n        });\r\n      }\r\n\r\n      Object.assign(tipRef.style, {\r\n        left: `${x}px`,\r\n        top: `${y}px`,\r\n        strategy,\r\n      });\r\n\r\n      const side = computedPlacement.split(\"-\")[0];\r\n\r\n      const staticSide = side\r\n        ? {\r\n            top: \"bottom\",\r\n            right: \"left\",\r\n            bottom: \"top\",\r\n            left: \"right\",\r\n          }[side]\r\n        : \"top\";\r\n\r\n      let angle;\r\n      switch (staticSide) {\r\n        default:\r\n        case \"top\":\r\n          angle = 45;\r\n          break;\r\n        case \"right\":\r\n          angle = 135;\r\n          break;\r\n        case \"bottom\":\r\n          angle = 225;\r\n          break;\r\n        case \"left\":\r\n          angle = 315;\r\n          break;\r\n      }\r\n\r\n      if (middlewareData.arrow && staticSide) {\r\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\r\n\r\n        Object.assign(tipArrowRef.style, {\r\n          right: \"\",\r\n          bottom: \"\",\r\n          left: arrowX ? `${arrowX}px` : \"\",\r\n          top: arrowY ? `${arrowY}px` : \"\",\r\n          [staticSide]: `${-arrowOffsetWidth / 2}px`,\r\n          transform: `rotate(${angle}deg)`,\r\n        });\r\n      }\r\n    });\r\n  });\r\n}\r\n"]}

package/dist/collection/functional-components/tooltip/tooltip.functional-component.js

@@ -3,7 +3,7 @@ import { clsx } from "clsx";
 export const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", id: "tooltip", class: clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
         e.stopPropagation();
         if (e.propertyName === "opacity" && !visible) {
-            onAfterHidden();
+            onAfterHidden === null || onAfterHidden === void 0 ? void 0 : onAfterHidden();
         }
     } }, h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), h("div", { class: "tooltip-inner" }, children)));
 //# sourceMappingURL=tooltip.functional-component.js.map

package/dist/collection/functional-components/tooltip/tooltip.functional-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.functional-component.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/tooltip.functional-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAS5B,MAAM,CAAC,MAAM,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,EACR,EAAE,CAAC,CACH,WACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7C,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAED,YAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,GAAS;IAC5D,WAAK,KAAK,EAAC,eAAe,IAAE,QAAQ,CAAO,CACvC,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n  visible: boolean;\r\n  onAfterHidden: () => void;\r\n  tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n  tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n  { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n  children,\r\n) => (\r\n  <div\r\n    popover=\"manual\"\r\n    id=\"tooltip\"\r\n    class={clsx([\"dso-tooltip\", { visible }])}\r\n    ref={tipElementRef}\r\n    onTransitionEnd={(e) => {\r\n      e.stopPropagation();\r\n\r\n      if (e.propertyName === \"opacity\" && !visible) {\r\n        onAfterHidden();\r\n      }\r\n    }}\r\n  >\r\n    <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n    <div class=\"tooltip-inner\">{children}</div>\r\n  </div>\r\n);\r\n"]}
+{"version":3,"file":"tooltip.functional-component.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/tooltip.functional-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAS5B,MAAM,CAAC,MAAM,OAAO,GAAsC,CACxD,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAC7D,QAAQ,EACR,EAAE,CAAC,CACH,WACE,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EACzC,GAAG,EAAE,aAAa,EAClB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC;YAC7C,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,CAAC;QACpB,CAAC;IACH,CAAC;IAED,YAAM,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,kBAAkB,GAAS;IAC5D,WAAK,KAAK,EAAC,eAAe,IAAE,QAAQ,CAAO,CACvC,CACP,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\ninterface TooltipProps {\r\n  visible: boolean;\r\n  onAfterHidden?: () => void;\r\n  tipElementRef: (ref: HTMLDivElement | undefined) => void;\r\n  tipArrowElementRef: (ref: HTMLSpanElement | undefined) => void;\r\n}\r\n\r\nexport const Tooltip: FunctionalComponent<TooltipProps> = (\r\n  { visible, onAfterHidden, tipElementRef, tipArrowElementRef },\r\n  children,\r\n) => (\r\n  <div\r\n    popover=\"manual\"\r\n    id=\"tooltip\"\r\n    class={clsx([\"dso-tooltip\", { visible }])}\r\n    ref={tipElementRef}\r\n    onTransitionEnd={(e) => {\r\n      e.stopPropagation();\r\n\r\n      if (e.propertyName === \"opacity\" && !visible) {\r\n        onAfterHidden?.();\r\n      }\r\n    }}\r\n  >\r\n    <span class=\"tooltip-arrow\" ref={tipArrowElementRef}></span>\r\n    <div class=\"tooltip-inner\">{children}</div>\r\n  </div>\r\n);\r\n"]}

package/dist/collection/functional-components/tooltip/tooltip.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.interfaces.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/tooltip.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { Placement, autoUpdate } from \"@floating-ui/dom\";\r\n\r\nexport type TooltipClean = ReturnType<typeof autoUpdate>;\r\n\r\nexport type TooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\r\n\r\nexport type TooltipOptions = {\r\n  referenceElement: HTMLElement;\r\n  tipRef: HTMLElement;\r\n  tipArrowRef: HTMLElement;\r\n  placementTip: Placement;\r\n  topPositionSmallViewPort?: boolean;\r\n  halfMainAxisOffset?: boolean;\r\n  forceVisible?: boolean;\r\n};\r\n"]}
+{"version":3,"file":"tooltip.interfaces.js","sourceRoot":"","sources":["../../../../src/functional-components/tooltip/tooltip.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { Placement, autoUpdate } from \"@floating-ui/dom\";\r\n\r\nexport type TooltipClean = ReturnType<typeof autoUpdate>;\r\n\r\nexport type TooltipPlacement = \"top\" | \"right\" | \"bottom\" | \"left\";\r\n\r\nexport type TooltipOptions = {\r\n  referenceElement: HTMLElement;\r\n  tipRef: HTMLElement;\r\n  tipArrowRef: HTMLElement;\r\n  placementTip: Placement;\r\n  topPositionSmallViewPort?: boolean;\r\n  halfMainAxisOffset?: boolean;\r\n  forceVisible?: boolean;\r\n  restrictContentElement?: HTMLElement;\r\n};\r\n"]}

package/dist/components/alert.js

@@ -46,7 +46,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: 'eeea4a67248e5fdc7e2c7d32b042c9efd31adaa4', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: '612cbefcdb765a9cd89ff685511c3bad873f351f', class: "icon-status", icon: "status-" + this.status }), h("span", { key: 'df7fe6801059b92da19617cdc016ca63c6511c10', class: "sr-only" }, status, ":"), h("slot", { key: '7cf677407b4873800de0829ee5bf09c489dace0e' }), this.closable && (h("dso-icon-button", { key: '7203acfb2ec0d89b940f7d9676f968ffce0b436a', label: this.text("close"), variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
+        return (h("div", { key: '00aec42517954eba58249fc009660d4945dc1d2f', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'd9de90358fc3d7e710c00fe4b71ee850a7ed4a36', class: "icon-status", icon: "status-" + this.status }), h("span", { key: '68684113c72945a8198d76ae5eed28349703bf92', class: "sr-only" }, status, ":"), h("slot", { key: 'aa926b4baa6b7079253b60a3f7d3482acc9177c7' }), this.closable && (h("dso-icon-button", { key: '709ca720b697b6fe9514d65d07c650908b76ec7a', label: this.text("close"), variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }))));
     }
     get host() { return this; }
     static get style() { return alertCss(); }

package/dist/components/annotation-locatie.js

@@ -28,7 +28,7 @@ const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocat
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '662684126533447bdee1394221937203261601be', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+        return (h(AnnotationBody, { key: 'f73c4480e55cea90ca7774c1d53fe9132c2af190', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
     }
     get host() { return this; }
     static get style() { return annotationCss(); }

package/dist/components/attachments-counter.js

@@ -12,7 +12,7 @@ const AttachmentsCounter = /*@__PURE__*/ proxyCustomElement(class AttachmentsCou
         this.__attachShadow();
     }
     render() {
-        return (h("span", { key: 'cd8239d516bd4ea96cdb3d6273d092e1441aa5bb', class: "dso-attachments" }, this.count, " ", h("span", { key: 'b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e', icon: "paperclip" })));
+        return (h("span", { key: '5f3b8b2a8d9815c3c29772c9ba6bf2064d0b19ba', class: "dso-attachments" }, this.count, " ", h("span", { key: 'c74586ff0b984718507a1d1b6afa0cda132c247e', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '0041e344074720593cae7eb02bf88cc87473e97b', icon: "paperclip" })));
     }
     static get style() { return attachmentsCounterCss(); }
 }, [257, "dso-attachments-counter", {

package/dist/components/badge.js

@@ -12,7 +12,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h("span", { key: '095800d791026bfb4646c989b73b3d909d5b7bea', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'cb1f36e18ffeaba5dd856326490bc10cfee2c174' })));
+        return (h("span", { key: 'd20169d335ed19b75e78a1a47a48b7f15def3a9c', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '41c032fd6fde927a2e785a7d0d37ad1ba3b2e234' })));
     }
     static get style() { return badgeCss(); }
 }, [257, "dso-badge", {

package/dist/components/button-group.js

@@ -36,7 +36,7 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
         return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (h("div", { key: '0cd0a65e9b4ed512a7f51248628b5729e591e5a9', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '529bd12bf8558e3d8f0a7d76bb49c9c0200714ed' })));
+        return (h("div", { key: 'd7dd9d6e5796f85c941c712cf473e179f7ad2b7a', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '77c25c765cb23b10cc011b1d120b89330054846f' })));
     }
     get host() { return this; }
     static get style() { return buttonGroupCss(); }

package/dist/components/document-component.js

@@ -1472,8 +1472,8 @@ const DocumentComponent = /*@__PURE__*/ proxyCustomElement(class DocumentCompone
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: 'e8b3f6c9a0f95cf511a789523fa626399645b0d1', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'addc3c305d121404543bfcdbc80afdc3c19717e7', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'dc5990c86a3a38e37bb8d1806c484d78804786ec', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '3d825ebd13153d39ee4b5f5eeabf50da08fe02ef', class: "heading" }, h(Heading, { key: 'ff103cfb3048a6a783425927588f8a58a0eed97e', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'e4493f8d04962def05cf67fdffcebcab5b794c7b', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '2e21bb78811a2ffac56c53f34f9b2a144ee0505c' }, this.notApplicable && h("span", { key: '15dfa298522909bc66067f6bd7d6b39014d0630e', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "alternativeTitle"); }), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'b2ad2f095efbd771ce9853a777e3f04f632777e5', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '409d6dae13585d5b4ed800c806232a68eba87408', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '3e8bc5d14fa7b2d1060e5942df891931cbc01d68' }, h("dso-badge", { key: '6bc3a6ccc23648be283b5e09034112f1409b2e72', status: this.badgeStatus, "aria-describedby": "badge-description" }, this.badge), this.badgeTooltip && h("dso-tooltip", { key: '43509e839acbc3edbe43a10817d62eab8a54d2c7', id: "badge-description" }, this.badgeTooltip))), (this.label || this.annotated) && (h("div", { key: '4f2bac0ec8703935ba49a0eca117940b154b1bde', class: "addons" }, this.label && (h("dso-label", { key: '5c2fe3471dbd7cdf135aab24bb2c3a983caa904a', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'ad610cda27c1708b8100801230d930fd7ef45295', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: 'b51b292b7866e66b7ffa8bf1a951e3f2a90e8322', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '153d796c0ff48df41a219ba9d0c54d653af66857', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '8865355a005148c60c02fba8342e4c19d0412ea0', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '1fcd6a303d2d8b876a56446672c8d6da2320e651', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '9b3016ee0a20a18d88b4ff70561c9bfda998052f', class: "content", part: "_content" }, h(AantekenAlert, { key: '01c53e87e0e8f8e83d89e662718eedc2be827716', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'd5cc5d980de13b68f73cbed2262e0dbfdf3fcae6', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '7101da20508b40f14193df30203d86be52051eb0', class: "children-container", part: "_children-container" }, h("slot", { key: '3ca16120cfdd26d9451807c3d0efffd7573ec075' }))));
+        return (h(Host, { key: '68f4fb252bc7a1657867c8462f02c37acfcfd795', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'dbb571c223fa1ef537e7dea1cdf2e52493fdc5a4', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '461c603eab7110053373f2b5c224dadb9b7a1e11', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '956832b500e8fd2af29a324c6396e87957c08e1a', class: "heading" }, h(Heading, { key: 'd4d1ba7715f0760697ba7b19beedc91a76da1719', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '981740a7b2e5af9a9fbec99c5ac7b8f87b5e98e2', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '71d8c07c0ac6444fb8be558201e0c427259b684f' }, this.notApplicable && h("span", { key: 'e339b003b6603fa435c2ed0fc2cf47d2b67b41e9', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "alternativeTitle"); }), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '00b0e9074b2d34a39f64b68cb454379345f9e673', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '4c6a480b2c9197c5d8f3479ad747b0533949db18', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'd2dedc1f3fc8e3a05f6a023954876a30f87d4abf' }, h("dso-badge", { key: '3254a799ccfe8325520ee0b34ee1f1e93b27c087', status: this.badgeStatus, "aria-describedby": "badge-description" }, this.badge), this.badgeTooltip && h("dso-tooltip", { key: 'b949264eefb558b54b747083d2540cad06304887', id: "badge-description" }, this.badgeTooltip))), (this.label || this.annotated) && (h("div", { key: '4d3d3681167f76034eb96d30ef3febceb1118567', class: "addons" }, this.label && (h("dso-label", { key: '81d39d5e996b62fd98cc086e2f99ed9e7b5271f8', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '4aaf2a51790cb50355e3bc8eeb08f39c1355f76b', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: '867c144ed5290d09684622a0f292b69a2d5d99ef', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '40209342743374c35afb80c3627a80bdd9f91f17', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '26a7fedc702cb16941b065a110f05a2eb20e7b63', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '8f7cb218e8cabbc070a6782ca49c215f9802570c', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '0d7ff1c5143320acdccf7b8f4662e661e765acfa', class: "content", part: "_content" }, h(AantekenAlert, { key: '1959a7c591ba1947bc03667450c4e159f5e1ed67', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '702b0bd57cb52ceb8e4e7d34e728d0c41305ed48', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'b4917c7fc168fa02fa7c8d0377c9f351257a36a3', class: "children-container", part: "_children-container" }, h("slot", { key: 'c5ffa83d96e186675aa81fcc14681372e0095e24' }))));
     }
     static get style() { return documentComponentCss(); }
 }, [257, "dso-document-component", {

package/dist/components/dropdown-menu.js

@@ -180,7 +180,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '28f8eb6a00bf4a1b139c917e44ce8de42067e8c6', onFocusout: this.focusOutListener }, h("slot", { key: 'fcf093b872932b1f604ae3d5f93391189ac60bbb', name: "toggle" }), h("div", { key: '2a621a9cdcf5817faf1354640a0062caa5c5fe04', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '68633d9a0c505d120acac96e15058d44e01d9a00' }))));
+        return (h(Host, { key: '59b1f150f35e5af275cf928d8b776122af646e8b', onFocusout: this.focusOutListener }, h("slot", { key: '5b362762db082f147eefe8db1b53c3e7e8075ee6', name: "toggle" }), h("div", { key: '3fa0dabc6161774c541e69b7784fd1a41273ba14', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '41564bd57e586458088373db77ad8212a1850e44' }))));
     }
     get host() { return this; }
     static get style() { return dropdownMenuCss(); }

package/dist/components/dso-accordion-section.js

@@ -197,14 +197,14 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class AccordionSection
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
         const showSlideToggle = this.activatable && variant === "compact-black" && !reverseAlign;
-        return (h(Host, { key: '2e65f0a85688c2d52a1a337e90fdce86870bf713', class: {
+        return (h(Host, { key: '31e4276d0f660ead0bcc763e90fc77c9e749e63d', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: !!variant,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
                 ["dso-accordion-wijzigactie-" + this.wijzigactie]: !!this.wijzigactie,
                 "dso-accordion-section-activate": showSlideToggle,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: '0ba35033762292d6467ba90f7df97e169c870db5', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '95c07f60960daf7d2718e6bd4fdd4723b1b9a1c3', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" })))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '72113b4b9c53aa6ca84d481464e0e1bc39e57c6d', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '6a2e4e4ab8bace1e7ba6784c81bb1c1171774ffc', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '9e5190299f7eda51678bf06e172525fd378b05e8' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h(Handle, { key: 'fadb4d98d40451b8e0cdba4cfbd3c3ec5f5ad0fe', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { key: '0fe9cf5dbad8bfd098be16a6cf0ce94e43e6911a', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, showSlideToggle: showSlideToggle, active: this.active, onActiveChange: this.handleActiveChange, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (h(Fragment, null, this.icon && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("dso-renvooi", { value: this.handleTitle }), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" })))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && h("span", { class: "sr-only" }, stateMap[this.status]), h("span", null, h("dso-renvooi", { value: this.handleTitle }), this.isNeutral && (h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.label && (h("dso-label", { status: this.labelStatus, compact: true }, this.label)), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.statusDescription && h("span", { class: "dso-status" }, this.statusDescription), h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("dso-expandable", { key: '36a11547a19a592d3eb25bdc99a3d9183cb10082', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, h("div", { key: '813c331b4f16038b5bfffbff3090e5f5d5812b65', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, h("slot", { key: '609c1f85731d4f9c68da283bf34876267590c7a2' })))));
     }
     get host() { return this; }
     static get style() { return accordionSectionCss(); }

package/dist/components/dso-accordion-section.js.map

@@ -1 +1 @@
-{"file":"dso-accordion-section.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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/link\";\r\n\r\n@use \"../accordion.variables\" as accordion-variables;\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  --_dso-accordion-margin-block-end: 0;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion-variables.$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 link.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      color: colors.$zwart;\r\n      font-size: typography.$font-size-small;\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-variables.$handle-line-height;\r\n    margin: 0;\r\n    padding-block: accordion-variables.$block-padding;\r\n    padding-inline: accordion-variables.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 100%;\r\n    overflow-wrap: anywhere;\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.$u1;\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-variables.$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  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\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\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\n\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\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      <Fragment>\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      </Fragment>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Fragment>\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    </Fragment>\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 | 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]: !!variant,\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"],"version":3}
+{"file":"dso-accordion-section.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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/link\";\r\n\r\n@use \"../accordion.variables\" as accordion-variables;\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  --_dso-accordion-margin-block-end: 0;\r\n\r\n  .dso-section-handle {\r\n    font-size: 1em;\r\n    font-weight: 600;\r\n    line-height: accordion-variables.$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 link.clean();\r\n    }\r\n\r\n    .dso-status {\r\n      color: colors.$zwart;\r\n      font-size: typography.$font-size-small;\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-variables.$handle-line-height;\r\n    margin: 0;\r\n    padding-block: accordion-variables.$block-padding;\r\n    padding-inline: accordion-variables.$inline-padding;\r\n    text-align: start;\r\n    inline-size: 100%;\r\n    overflow-wrap: anywhere;\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.$u1;\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-variables.$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  Fragment,\r\n  FunctionalComponent,\r\n  Host,\r\n  Method,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { DsoSlideToggleCustomEvent } from \"../../../components\";\r\nimport { ExpandableAnimationEndEvent } from \"../../expandable/expandable.interfaces\";\r\nimport { LabelStatus } from \"../../label/label.interfaces\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { SlideToggleActiveEvent } from \"../../slide-toggle/slide-toggle.interfaces\";\r\nimport { AccordionInternalState } from \"../accordion.interfaces\";\r\n\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\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      <Fragment>\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      </Fragment>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Fragment>\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    </Fragment>\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 | 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]: !!variant,\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"],"version":3}

package/dist/components/dso-accordion.js

@@ -318,7 +318,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         return this.accordionState;
     }
     render() {
-        return (h(Host, { key: 'a86cfcda16f93c5bb818a2c5b3566f8a493c77d8' }, h("slot", { key: 'e171013f8b1a480c9ceb386a4fa820ab3e04647a' })));
+        return (h(Host, { key: '9488887d4b47c470a237c25e369b013eeeb55ef9' }, h("slot", { key: '7c6ef21c22e84d486f3d71230b042f0119a89388' })));
     }
     get host() { return this; }
     static get style() { return accordionCss(); }