@dso-toolkit/core 100.3.1 → 101.0.0

package/dist/bundle/{p-BeyBvNPm.js → p-D9oE1q7k.js}

@@ -1,7 +1,8 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
-import { p as positionTooltip, T as Tooltip } from './p-DFhKaDMe.js';
-import { d as defineCustomElement$2 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$1 } from './p-TaOl3xYb.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
+import { T as ToggletipController, i as isEventOutside } from './p-C49HfF1N.js';
+import { T as Tooltip } from './p-DZCYhv_b.js';
+import { d as defineCustomElement$2 } from './p-DixhcduG.js';
+import { d as defineCustomElement$1 } from './p-NElTvMxv.js';
 
 const ozonContentToggletipCss = () => `*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;max-inline-size:480px}.dso-tooltip .tooltip-inner{--_dso-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}:host{--_dso-rich-content-margin-block:8px;--_dso-scrollable-border-radius:4px;--_dso-scrollable-container-padding-inline:16px;--_dso-scrollable-container-padding-block:8px;display:inline}::slotted(:not([slot=label])){cursor:default !important}.toggletip-button{display:inline-block;font-size:1em;font-weight:500;margin-block-end:0;text-decoration:none;touch-action:manipulation;text-align:var(--_dso-button-text-align, start);user-select:none;vertical-align:middle;background-clip:padding-box}.toggletip-button:focus,.toggletip-button:focus-visible{outline-offset:2px}.toggletip-button:active{outline:0}.toggletip-button{border:0;color:var(--_dso-ozon-content-toggletip-color, #2b5780);line-height:1;padding:0;background-color:transparent;cursor:pointer;vertical-align:baseline;display:inline;overflow-wrap:break-word;user-select:text;white-space:nowrap}.toggletip-button,.toggletip-button:hover,.toggletip-button:focus-visible,.toggletip-button:active{text-decoration-line:var(--_dso-ozon-content-toggletip-text-decoration, underline);text-decoration-style:dotted;text-underline-offset:15%}.toggletip-button .toggletip-label{white-space:normal}.toggletip-button dso-icon{margin-inline-start:4px}`;
 
@@ -12,6 +13,13 @@ const OzonContentToggletip = /*@__PURE__*/ proxyCustomElement(class OzonContentT
             this.__registerHost();
         }
         this.__attachShadow();
+        this.toggletipController = new ToggletipController({
+            getReferenceElement: () => this.container,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => "top",
+        });
         this.active = false;
         this.toggle = () => {
             this.active = !this.active;
@@ -34,9 +42,8 @@ const OzonContentToggletip = /*@__PURE__*/ proxyCustomElement(class OzonContentT
         if (!this.active)
             return;
         const path = event.composedPath();
-        const clickedInsideHost = path.includes(this.host);
         const clickedInsideTooltip = this.tooltipElRef && path.includes(this.tooltipElRef);
-        if (!clickedInsideHost && !clickedInsideTooltip) {
+        if (isEventOutside(this.host, event) && !clickedInsideTooltip) {
             this.toggle();
         }
         if (clickedInsideTooltip) {
@@ -47,34 +54,13 @@ const OzonContentToggletip = /*@__PURE__*/ proxyCustomElement(class OzonContentT
         }
     }
     componentDidRender() {
-        if (!this.cleanUpFunction && this.active && this.container && this.tooltipElRef && this.tooltipArrowElRef) {
-            this.cleanUpFunction = positionTooltip({
-                referenceElement: this.container,
-                tipRef: this.tooltipElRef,
-                tipArrowRef: this.tooltipArrowElRef,
-                placementTip: "top",
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunction && this.tooltipElRef) {
-            if (this.active) {
-                this.tooltipElRef?.showPopover();
-            }
-            else {
-                this.tooltipElRef?.hidePopover();
-                this.cleanUpTooltip();
-            }
-        }
+        this.toggletipController.update(this.active);
     }
     disconnectedCallback() {
-        this.cleanUpTooltip();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
+        this.toggletipController.dispose();
     }
     render() {
-        return (h(Fragment, { key: 'f1f9ee358e6db049bc2e4792660ecd016f89925e' }, h("span", { key: '845275c8cc2b837a5028da7250b6aac7a566166d', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '3cdba48b5c02cac0557e4807e199dfb3d82c1136' }, h("span", { key: '35ed9591f66f5ca84111a450e3d84bd75fcf5dac', class: "toggletip-label" }, h("slot", { key: '36d332e4eac11e50f931b064b84b38d42ea21ccb', name: "label" })), "\u2060", h("dso-icon", { key: '4bbe18257d6c771750e583c835d765410895deb0', icon: this.icon }))), !this.icon && h("slot", { key: 'ca9fb64f35d9d2dfce8f4457a01af773d46baef7', name: "label" })), h(Tooltip, { key: '9f540f602278f87c15281c7b904eff6c5474b995', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '0b7d5618d8427ec7e72d22e3346ca352554de69d', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '8c7cbaff4a8842efabed9ea8b9275fc0b3a947ee' })))));
+        return (h(Fragment, { key: '57bc000d9ae9edf8f0e41c52545686bf19a644e5' }, h("span", { key: '4b0ae2bd310269c4bcb2f999523c4d1360859b5b', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '9d7d66a9cded8985b67003ee9babb76fcfd4f888' }, h("span", { key: '05dbe58544c10df33d5716d9cfd820aa3880556a', class: "toggletip-label" }, h("slot", { key: '7d3fe87c04cd0ee8e25418cba2d977d729bce437', name: "label" })), "\u2060", h("dso-icon", { key: '0d186f4459a5ac8a9a17154dffc139b18cb0eb70', icon: this.icon }))), !this.icon && h("slot", { key: '94f8037c3854965fff3a0579b263924f6e6162a3', name: "label" })), h(Tooltip, { key: '667d087ce9c7c5f0c61fd7eb64b55a3ceff16cbd', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '7e5642bb9ecda5e0a1080e14fec75208ec345bf1', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '5aaa2d84764df8d02088f4fe3c77ac13a450fcdd' })))));
     }
     get host() { return this; }
     static get style() { return ozonContentToggletipCss(); }

package/dist/bundle/{p-BVLZrKNg.js → p-DHj0KBgK.js}

@@ -1,4 +1,4 @@
-import { h, F as Fragment } from './p-CiFTQ7lb.js';
+import { h, F as Fragment } from './p-DtUeWj74.js';
 
 const AnnotationListRenvooiValues = ({ values }) => {
     return (h(Fragment, null, values?.map((v, i) => (h(Fragment, null, i > 0 && ", ", h("dso-renvooi", { value: v }))))));

package/dist/bundle/{p-DFhKaDMe.js → p-DZCYhv_b.js}

@@ -1,5 +1,5 @@
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, b as shift, d as arrow, h as hide, s as size } from './p-Cybcqk9K.js';
-import { h } from './p-CiFTQ7lb.js';
+import { h } from './p-DtUeWj74.js';
 
 /**
  * Positions the Tooltip relative to its reference element.

package/dist/bundle/{p-D33uqBOM.js → p-D_wg33r9.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 
 const expandableCss = () => `:host([enable-animation]){display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transition:grid-template-rows 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host([enable-animation]:not([open=true])) .slot-container{min-block-size:0;visibility:hidden;transition:visibility 260ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:not([enable-animation])),:host([enable-animation=false]){display:none}:host([open][enable-animation]:not([open=false])){grid-template-rows:1fr;opacity:1}:host([open][enable-animation]:not([open=false])) .slot-container{visibility:visible}:host([open]:not([enable-animation]):not([open=false])),:host([open][enable-animation=false]:not([open=false])){display:block}*,*::after,*::before{box-sizing:border-box}`;
@@ -46,10 +46,10 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends H {
         }
     }
     render() {
-        return (h(Host, { key: '27aa43cd7a129ede2ac42e1f36957be51497bb80', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'a0469ae8e68f3d121fcdab6fc08b8a92018d9ab0', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: 'b9e104e23b5eeceebd860c607cb9c68dc1506184', class: "slot-container" }, h("slot", { key: 'd623667f451248271ebf78ee7896a51936e4c0cd' }))));
+            }) }, h("div", { key: '1fbfd59136f816df3d8b44c6c7dd54c8201435aa', class: "slot-container" }, h("slot", { key: '6e7247668ff0ea70589c3b654a2b52b22379a717' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/{p-BydRjBUc.js → p-DcRIbRiR.js}

@@ -1,8 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-CiFTQ7lb.js';
-import { p as positionTooltip, T as Tooltip } from './p-DFhKaDMe.js';
-import { d as defineCustomElement$3 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$2 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$1 } from './p-TaOl3xYb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DtUeWj74.js';
+import { T as ToggletipController, i as isEventOutside } from './p-C49HfF1N.js';
+import { T as Tooltip } from './p-DZCYhv_b.js';
+import { d as defineCustomElement$3 } from './p-DixhcduG.js';
+import { d as defineCustomElement$2 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$1 } from './p-NElTvMxv.js';
 
 const infoButtonCss = () => `:host{--_dso-scrollable-border-radius:4px;--_dso-scrollable-container-padding-inline:16px;--_dso-scrollable-container-padding-block:8px;--_dso-icon-button-position:static;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;max-inline-size:640px}.dso-tooltip .tooltip-inner{--_dso-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dso-info-button-margin-inline-start, 8px)}`;
 
@@ -14,6 +15,13 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
         }
         this.__attachShadow();
         this.dsoToggle = createEvent(this, "dsoToggle", 7);
+        this.toggletipController = new ToggletipController({
+            getReferenceElement: () => this.button,
+            getTipElement: () => this.toggletipElRef,
+            getTipArrowElement: () => this.toggletipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => this.toggletipPlacement,
+        });
         /**
          * Whether the InfoButton is active.
          */
@@ -32,7 +40,7 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
             if (!this.toggletipActive) {
                 return;
             }
-            if (!event.composedPath().includes(this.host)) {
+            if (isEventOutside(this.host, event)) {
                 this.closeToggletip();
             }
         };
@@ -73,42 +81,10 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
     }
     closeToggletip() {
         this.toggletipActive = false;
-        if (this.toggletipElRef?.isConnected && this.toggletipElRef.matches(":popover-open")) {
-            this.toggletipElRef.hidePopover();
-        }
-        this.cleanUpTooltip();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
+        this.toggletipController.update(false);
     }
     componentDidRender() {
-        if (!this.hasToggletip) {
-            this.toggletipElRef?.hidePopover();
-            this.cleanUpTooltip();
-            return;
-        }
-        if (!this.cleanUpFunction &&
-            this.toggletipActive &&
-            this.button &&
-            this.toggletipElRef &&
-            this.toggletipArrowElRef) {
-            this.cleanUpFunction = positionTooltip({
-                referenceElement: this.button,
-                tipRef: this.toggletipElRef,
-                tipArrowRef: this.toggletipArrowElRef,
-                placementTip: this.toggletipPlacement,
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunction) {
-            if (this.toggletipActive) {
-                this.toggletipElRef?.showPopover();
-            }
-            else {
-                this.closeToggletip();
-            }
-        }
+        this.toggletipController.update(this.hasToggletip && this.toggletipActive);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => {
@@ -120,12 +96,12 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
         });
     }
     disconnectedCallback() {
-        this.closeToggletip();
+        this.toggletipController.dispose();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'f89df0ddad22608cc30c910b1fd4a0352516cee6', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '8f46b9c1930d3e546ab604620b19241e3628a3d1', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: '2f6cbae1716c36b47e9ddb608682abdec648564b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'fc29889f2ea054cc48ee22ecde9ebeb4ba414d32', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '44b45316c3785a231fb8c214710c0689f8db7e08', name: "toggletip" }))))));
+        return (h(Host, { key: 'b38212731ef3325d9d9b87919248494ce7eb27ab', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '3f5e645d8e69e01b1342914c330f7951bd3d38cc', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: '01af1c555dadef251f3076c9137fd5d3cff3d34a', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'd5b69968072ca345f825685643a9d371b62a6562', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '01f5101e35bfb869909b1b9788c88dcdc9d91351', name: "toggletip" }))))));
     }
     get host() { return this; }
     static get style() { return infoButtonCss(); }

package/dist/bundle/{p-LAIYa8JB.js → p-DdHRX4cC.js}

@@ -1,11 +1,12 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-CiFTQ7lb.js';
-import { A as AnnotationBody } from './p-CkzyPAOs.js';
-import { w as watcher, A as AnnotationGewijzigdeLocatie, a as AnnotationSymbolSlot } from './p-DdH_IPw_.js';
-import { d as defineCustomElement$5 } from './p-Bj6TmNEh.js';
-import { d as defineCustomElement$4 } from './p-DSn98k7j.js';
-import { d as defineCustomElement$3 } from './p-3mY5bRq3.js';
-import { d as defineCustomElement$2 } from './p-Cg-toWNU.js';
-import { d as defineCustomElement$1 } from './p-CMm0xWy5.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DtUeWj74.js';
+import { A as AnnotationBody } from './p-Brr0tC8B.js';
+import { w as watcher, A as AnnotationGewijzigdeLocatie, a as AnnotationSymbolSlot } from './p-CMhiuOhg.js';
+import { d as defineCustomElement$6 } from './p-DixhcduG.js';
+import { d as defineCustomElement$5 } from './p-B1sfJaTU.js';
+import { d as defineCustomElement$4 } from './p-CEzwBNry.js';
+import { d as defineCustomElement$3 } from './p-CvUpjPda.js';
+import { d as defineCustomElement$2 } from './p-mwUKtKZg.js';
+import { d as defineCustomElement$1 } from './p-CbLp6uks.js';
 
 const annotationCss = () => `a{overflow-wrap:anywhere;background-color:transparent;color:var(--_dso-link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--_dso-link-hover-color);text-decoration:underline}a:active{text-decoration:none}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--_dso-link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom -3px right 0;background-image:var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-grasgroen)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-scampi)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom -3px right 0;background-image:var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-grasgroen)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-scampi)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom -3px left 0;background-image:var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-grasgroen)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-scampi)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.5em 1.5em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom -3px left 0;background-image:var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-grasgroen)))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-scampi)))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:#000}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_dso-link-color:currentColor;--_dso-link-hover-color:currentColor;--_dso-link-visited-color:currentColor;--_dso-link-download-icon:var(--_dso-di-download-zwart);--_dso-link-extern-icon:var(--_dso-di-external-link-zwart);--_dso-link-phone-icon:var(--_dso-di-call-zwart);--_dso-link-mail-icon:var(--_dso-di-mail-outline-zwart);--_dso-link-list-chevron-icon:var(--_dso-di-chevron-right-zwart);--_dso-icon-button-secondary-active-color:#fff;--_dso-icon-button-secondary-active-background-color:#1f472c;--_dso-icon-button-secondary-toggled-color:#fff;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-toggled-color:#275937;--_dso-icon-button-tertiary-toggled-hover-color:#1b3e27;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-download-icon:var(--_dso-di-download-zwart);--_dso-button-tertiary-external-link-icon:var(--_dso-di-external-link-zwart);--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:#000;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}`;
 
@@ -27,7 +28,7 @@ const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocat
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (h(AnnotationBody, { key: '2b422f0518dcf047a46cccdd2772d14beed5d484', 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: '31c1814b37b8d5d3f38f4c09d65739bb64e455fa', 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(); }
@@ -41,7 +42,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-annotation-locatie", "dso-icon", "dso-icon-button", "dso-label", "dso-renvooi", "dso-slide-toggle"];
+    const components = ["dso-annotation-locatie", "dso-icon", "dso-icon-button", "dso-label", "dso-renvooi", "dso-slide-toggle", "dso-truncate"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-annotation-locatie":
             if (!customElements.get(transformTag(tagName))) {
@@ -50,25 +51,30 @@ function defineCustomElement() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "dso-label":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "dso-renvooi":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "dso-slide-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "dso-truncate":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$1();
             }

package/dist/bundle/{p-Bj6TmNEh.js → p-DixhcduG.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, t as transformTag } from './p-CiFTQ7lb.js';
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-DtUeWj74.js';
 
 var asterisk = `<svg id="asterisk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path fill="currentColor" d="M9.0105 18.6425C8.6385 19.1473 8.2575 19.4 7.8705 19.4C7.48125 19.4 7.09275 19.232 6.70425 18.8953C6.31575 18.5578 6.1215 18.23 6.1215 17.9098C6.1215 17.5903 6.27375 17.2618 6.5775 16.925L9.4155 12.935L5.6145 11.723C4.872 11.4875 4.5 11.1005 4.5 10.5613C4.5 10.2583 4.551 9.98902 4.65225 9.75352C4.85475 9.04627 5.277 8.69302 5.919 8.69302C6.054 8.69302 6.29025 8.72677 6.6285 8.79427L10.5308 10.0565V5.91502C10.5308 4.90477 11.037 4.40002 12.051 4.40002C13.0635 4.40002 13.5712 4.90477 13.5712 5.91502V10.0565L17.3715 8.79427C17.709 8.72677 17.9963 8.69302 18.2333 8.69302C18.4695 8.69302 18.7395 8.86102 19.0433 9.19777C19.3478 9.53527 19.5 9.98077 19.5 10.5365C19.5 11.0915 19.1287 11.4875 18.3855 11.723L14.5335 12.935L17.4225 16.925C17.6925 17.228 17.8275 17.5475 17.8275 17.885C17.8275 18.2218 17.6333 18.5585 17.2448 18.8953C16.8562 19.232 16.476 19.4 16.1047 19.4C15.7327 19.4 15.3615 19.1473 14.9895 18.6425L12 14.45L9.0105 18.6425Z"/>