@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/bundle/dsot-document-component-demo.js

@@ -1,20 +1,20 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
-import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as defineCustomElement$9 } from './p-CuUjEAKj.js';
-import { d as defineCustomElement$h } from './p--_zCrLW5.js';
-import { d as defineCustomElement$g } from './p-C0F5ddGm.js';
-import { d as defineCustomElement$f } from './p-BM-R_z20.js';
-import { d as defineCustomElement$e } from './p-DegYTrRA.js';
-import { d as defineCustomElement$d } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$c } from './p-DpRZJt_D.js';
-import { d as defineCustomElement$b } from './p-Yu8u8KO1.js';
-import { d as defineCustomElement$a } from './p-BJqFBnN6.js';
-import { d as defineCustomElement$8 } from './p-DrTyWXYp.js';
-import { d as defineCustomElement$7 } from './p-C0j2UArC.js';
-import { d as defineCustomElement$6 } from './p-DVDxAvhs.js';
-import { d as defineCustomElement$5 } from './p-BWiGIQ1w.js';
-import { d as defineCustomElement$4 } from './p-kBBh-4zI.js';
-import { d as defineCustomElement$3 } from './p-ChdQ7Urg.js';
-import { d as defineCustomElement$2 } from './p-CBhOl8xD.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DmmKAUIT.js';
+import { g as getDefaultExportFromCjs, c as commonjsGlobal, d as defineCustomElement$9 } from './p-DiyFr3Np.js';
+import { d as defineCustomElement$h } from './p-BNhgCEjt.js';
+import { d as defineCustomElement$g } from './p-DnEMX0HG.js';
+import { d as defineCustomElement$f } from './p-ByAqDYup.js';
+import { d as defineCustomElement$e } from './p-BVZJjDvd.js';
+import { d as defineCustomElement$d } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$c } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$b } from './p-Dgducv6v.js';
+import { d as defineCustomElement$a } from './p-B6OelUh-.js';
+import { d as defineCustomElement$8 } from './p-uBQHEbAs.js';
+import { d as defineCustomElement$7 } from './p-Bu6cCiCZ.js';
+import { d as defineCustomElement$6 } from './p-BW1PprKl.js';
+import { d as defineCustomElement$5 } from './p-srgNz1ix.js';
+import { d as defineCustomElement$4 } from './p-Bbf_KhJ-.js';
+import { d as defineCustomElement$3 } from './p-C3e8S8uz.js';
+import { d as defineCustomElement$2 } from './p-DzcBPvon.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1733,7 +1733,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
             }
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && (embeddedDocuments === null || embeddedDocuments === void 0 ? void 0 : embeddedDocuments.documentComponents.length) && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: () => this.handleAnnotationToggle(documentComponent), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { type } = documentComponent;
@@ -1752,14 +1752,13 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         await this.loadData();
     }
     getEmbeddedDocumentComponents(documentEmbedded) {
-        var _a, _b;
-        if ((_a = documentEmbedded === null || documentEmbedded === void 0 ? void 0 : documentEmbedded._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpDocumentComponenten) {
+        if (documentEmbedded?._embedded?.ontwerpDocumentComponenten) {
             return {
                 documentComponents: documentEmbedded._embedded.ontwerpDocumentComponenten,
                 ontwerp: true,
             };
         }
-        if ((_b = documentEmbedded === null || documentEmbedded === void 0 ? void 0 : documentEmbedded._embedded) === null || _b === void 0 ? void 0 : _b.documentComponenten) {
+        if (documentEmbedded?._embedded?.documentComponenten) {
             return {
                 documentComponents: documentEmbedded._embedded.documentComponenten,
                 ontwerp: false,
@@ -1768,8 +1767,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         return undefined;
     }
     concatEmbeddedDocumentComponents(documentComponent) {
-        var _a, _b;
-        const embeddedDocuments = [...((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents) !== null && _b !== void 0 ? _b : [])];
+        const embeddedDocuments = [...(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents ?? [])];
         for (const d of embeddedDocuments) {
             embeddedDocuments.push(...this.concatEmbeddedDocumentComponents(d));
         }
@@ -1781,15 +1779,14 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         return sampleSize(documentComponents, size);
     }
     async loadData() {
-        var _a, _b;
         if (!this.jsonFile) {
             this.response = undefined;
             this.document = undefined;
             return;
         }
         this.response = await fetch(this.jsonFile).then((r) => r.json());
-        this.document = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents[0];
-        if (((_b = this.document) === null || _b === void 0 ? void 0 : _b.type) === "LICHAAM") {
+        this.document = this.getEmbeddedDocumentComponents(this.response)?.documentComponents[0];
+        if (this.document?.type === "LICHAAM") {
             this.notApplicable = this.selectRandomDocumentComponents(this.document);
             this.filtered = this.selectRandomDocumentComponents(this.document, this.notApplicable);
         }
@@ -1830,9 +1827,9 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         return this.activeAnnotationSelectables.includes(documentComponent);
     }
     hasFilteredChildren(documentComponent) {
-        var _a, _b;
         return (this.filtered.includes(documentComponent) ||
-            ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.some((d) => this.hasFilteredChildren(d))) !== null && _b !== void 0 ? _b : false));
+            (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) => this.hasFilteredChildren(d)) ??
+                false));
     }
     isOpen(documentComponent) {
         return documentComponent.type === "LID" || this.openDefault
@@ -1849,13 +1846,11 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         return this.notApplicable.includes(documentComponent);
     }
     hasNestedDraft(documentComponent) {
-        var _a, _b;
-        return ((_b = (_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d))) !== null && _b !== void 0 ? _b : false);
+        return (this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d)) ?? false);
     }
     showContent(documentComponent) {
-        var _a;
         return (this.isOpen(documentComponent) &&
-            !!(((_a = this.getEmbeddedDocumentComponents(documentComponent)) === null || _a === void 0 ? void 0 : _a.documentComponents.length) || documentComponent.inhoud));
+            !!(this.getEmbeddedDocumentComponents(documentComponent)?.documentComponents.length || documentComponent.inhoud));
     }
     recursiveToggleState(documentComponent) {
         const embeddedDocuments = this.getEmbeddedDocumentComponents(documentComponent);
@@ -1873,16 +1868,19 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
             documentComponent.type === "LID");
     }
     render() {
-        var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '3f41bdd6e8edc176973587904d57b63ed2e76e35', class: "dso-document-components" }, h("div", { key: 'cb4c5ad68081f18ce4216b209fe6e2d4f801a5a6', class: "dso-navbar" }, h("ul", { key: '466d7c0f495bb3c94f239d1a05ecf6dbe3e64fbd', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'e06d0bf9ea919bb770b6273968e98a1dfa78da41', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '327ff28c284a5c3013977765a60d82c522dfec81', class: "dso-document-components" }, h("div", { key: 'ccf964eb00f61fec36e9fcf18860a7cf9c1f002a', class: "dso-navbar" }, h("ul", { key: 'bd30f31d69c519d67187069de1a7cdd27b6c5302', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '3074a1afa2a47c6da0cd716726b2aec58d63974f', path: [this.document] })));
     }
     static get watchers() { return {
-        "jsonFile": ["jsonFileWatcher"],
-        "openDefault": ["openDefaultWatcher"]
+        "jsonFile": [{
+                "jsonFileWatcher": 0
+            }],
+        "openDefault": [{
+                "openDefaultWatcher": 0
+            }]
     }; }
     static get style() { return documentComponentDemoCss(); }
-}, [258, "dsot-document-component-demo", {
+}, [2, "dsot-document-component-demo", {
         "showCanvas": [516, "show-canvas"],
         "showBesluitversie": [4, "show-besluitversie"],
         "jsonFile": [1, "json-file"],
@@ -1898,8 +1896,12 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
         "notApplicable": [32],
         "activeAnnotationSelectables": [32]
     }, undefined, {
-        "jsonFile": ["jsonFileWatcher"],
-        "openDefault": ["openDefaultWatcher"]
+        "jsonFile": [{
+                "jsonFileWatcher": 0
+            }],
+        "openDefault": [{
+                "openDefaultWatcher": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -1999,6 +2001,3 @@ const DsotDocumentComponentDemo = DocumentComponentDemo;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsotDocumentComponentDemo, defineCustomElement };
-//# sourceMappingURL=dsot-document-component-demo.js.map
-
-//# sourceMappingURL=dsot-document-component-demo.js.map

package/dist/bundle/index.d.ts

@@ -32,6 +32,8 @@ export interface SetPlatformOptions {
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
 
+export * from '../types';
+
 /**
  * Utility to define all custom elements within this package using the tag name provided in the component's source.
  * When defining each custom element, it will also check it's safe to define by:

package/dist/bundle/index.js

@@ -1,5 +1,5 @@
-import { t as transformTag } from './p-DBWrx_3r.js';
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DBWrx_3r.js';
+import { t as transformTag } from './p-DmmKAUIT.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-DmmKAUIT.js';
 import { DsoAccordion } from './dso-accordion.js';
 import { DsoAccordionSection } from './dso-accordion-section.js';
 import { DsoActionList } from './dso-action-list.js';
@@ -36,6 +36,7 @@ import { DsoInfoButton } from './dso-info-button.js';
 import { DsoInputRange } from './dso-input-range.js';
 import { DsoLabel } from './dso-label.js';
 import { DsoLegend } from './dso-legend.js';
+import { DsoLegendGroup } from './dso-legend-group.js';
 import { DsoLegendItem } from './dso-legend-item.js';
 import { DsoListButton } from './dso-list-button.js';
 import { DsoLogo } from './dso-logo.js';
@@ -57,6 +58,7 @@ import { DsoProjectItem } from './dso-project-item.js';
 import { DsoRenvooi } from './dso-renvooi.js';
 import { DsoResponsiveElement } from './dso-responsive-element.js';
 import { DsoScrollable } from './dso-scrollable.js';
+import { DsoSegmentedButton } from './dso-segmented-button.js';
 import { DsoSelectable } from './dso-selectable.js';
 import { DsoSkiplink } from './dso-skiplink.js';
 import { DsoSlideToggle } from './dso-slide-toggle.js';
@@ -110,6 +112,7 @@ const defineCustomElements = (opts) => {
             DsoInputRange,
             DsoLabel,
             DsoLegend,
+            DsoLegendGroup,
             DsoLegendItem,
             DsoListButton,
             DsoLogo,
@@ -131,6 +134,7 @@ const defineCustomElements = (opts) => {
             DsoRenvooi,
             DsoResponsiveElement,
             DsoScrollable,
+            DsoSegmentedButton,
             DsoSelectable,
             DsoSkiplink,
             DsoSlideToggle,
@@ -153,6 +157,3 @@ const defineCustomElements = (opts) => {
 };
 
 export { defineCustomElements };
-//# sourceMappingURL=index.js.map
-
-//# sourceMappingURL=index.js.map

package/dist/bundle/{p-CVTNNCuw.js → p-0JNed3EY.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
-import { p as positionTooltip, T as Tooltip } from './p-DJ_Iuzp2.js';
-import { d as defineCustomElement$3 } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$2 } from './p-DpRZJt_D.js';
-import { d as defineCustomElement$1 } from './p-ecEmdirb.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DmmKAUIT.js';
+import { p as positionTooltip, T as Tooltip } from './p-BzrfS3rM.js';
+import { d as defineCustomElement$3 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$2 } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$1 } from './p-cvGwDktk.js';
 
 const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;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;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-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)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
 
@@ -36,10 +36,9 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
             }
         };
         this.focusOutHandler = (event) => {
-            var _a;
             if (!this.host.contains(event.relatedTarget)) {
                 this.toggletipActive = false;
-                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+                this.toggletipElRef?.hidePopover();
             }
         };
     }
@@ -47,12 +46,11 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
      * To set focus to the toggle button.
      */
     async setFocus() {
-        var _a, _b, _c;
         if (this.secondary) {
-            (_a = this.buttonSecondary) === null || _a === void 0 ? void 0 : _a.focus();
+            this.buttonSecondary?.focus();
         }
         else {
-            (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
+            this.button?.setFocus?.();
         }
     }
     handleToggle(originalEvent) {
@@ -64,14 +62,12 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
         }
     }
     cleanupTooltip() {
-        var _a;
-        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanUp?.();
         this.cleanUp = undefined;
     }
     componentDidRender() {
-        var _a, _b, _c;
         if (!this.hasToggletip) {
-            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            this.toggletipElRef?.hidePopover();
             this.cleanupTooltip();
             return;
         }
@@ -86,10 +82,10 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
         }
         if (this.cleanUp) {
             if (this.toggletipActive) {
-                (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+                this.toggletipElRef?.showPopover();
             }
             else {
-                (_c = this.toggletipElRef) === null || _c === void 0 ? void 0 : _c.hidePopover();
+                this.toggletipElRef?.hidePopover();
                 this.cleanupTooltip();
             }
         }
@@ -104,15 +100,14 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends H {
         });
     }
     disconnectedCallback() {
-        var _a;
         this.cleanupTooltip();
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { 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) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: 'a80bae5b9e9e1126bbc4a0b0f72c59f0b90f33a8', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '73189990daa593b27f1a3d89e6dff380eedac29e', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '7b944161e7a9c0db7824628619623b97f82498fd', name: "toggletip" }))))));
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-solid" : "info-outline" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: '14e4a2b7ee946bdc7ad3d58e0b0dea60e2fd3082', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '863a4084ea35ff69626dccbd6ed452011f52df59', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'f7a5e95329542b9cbbce015f495f4c9ac3204eff', name: "toggletip" }))))));
     }
     get host() { return this; }
     static get style() { return infoButtonCss(); }
@@ -155,6 +150,3 @@ function defineCustomElement() {
 }
 
 export { InfoButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-CVTNNCuw.js.map
-
-//# sourceMappingURL=p-CVTNNCuw.js.map

package/dist/bundle/p-B6OelUh-.js

@@ -0,0 +1,172 @@
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DmmKAUIT.js';
+import { c as clsx } from './p-ChV9xqsO.js';
+import { d as debounce } from './p-baWVwd8J.js';
+import { d as defineCustomElement$3 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$2 } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$1 } from './p-DzcBPvon.js';
+
+const labelCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;max-inline-size:100%}:host([removable]) .dso-truncate.dso-label-content{max-inline-size:calc(100% - 28px)}:host([truncate]) .dso-label-content{display:inline-block;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}::slotted([slot=symbol]){background-color:#fff;background-color:#fff;display:block;float:inline-start;block-size:20px;margin-block-start:0;margin-inline-end:8px;inline-size:24px;overflow:hidden;position:relative}.dso-label{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#f2f2f2;color:#191919;display:inline-flex;align-items:center;padding-block:4px;padding-inline:8px;max-inline-size:100%;font-weight:normal;border-radius:4px;line-height:1.5}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label.dso-label-info{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-info a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label.dso-label-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#6ca4d9;color:#191919}.dso-label.dso-label-primary{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-primary a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.dso-label.dso-label-primary{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#275937;color:#fff}.dso-label.dso-label-success{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-success a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.dso-label.dso-label-success{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#39870c;color:#fff}.dso-label.dso-label-warning{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-warning a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label.dso-label-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#dcd400;color:#191919}.dso-label.dso-label-error{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-error a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.dso-label.dso-label-error{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{--_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;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}.dso-label.dso-label-attention a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}.dso-label.dso-label-attention{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff}.dso-label.dso-label-filter{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-filter a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label.dso-label-filter{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#e1ecf7;color:#191919;border-inline-start:5px solid #6ca4d9}.dso-label.dso-label-toegevoegd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-toegevoegd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label.dso-label-toegevoegd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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}.dso-label.dso-label-verwijderd{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}.dso-label.dso-label-verwijderd a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}.dso-label.dso-label-verwijderd{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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){.dso-label.dso-label-verwijderd{font-family:sans-serif}}.dso-label.dso-compact{padding-block:0;padding-inline:8px}dso-icon-button{float:inline-end;margin-inline-start:8px;margin-inline-end:-4px}`;
+
+const resizeObserver = new ResizeObserver(debounce((entries) => {
+    entries.forEach(({ target }) => {
+        if (isDsoLabelComponent(target)) {
+            target._truncateLabel();
+        }
+    });
+}, 150));
+function isDsoLabelComponent(element) {
+    return element.tagName === "DSO-LABEL";
+}
+function hasEllipses(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
+        this.isTruncated = false;
+        this.labelText = "";
+    }
+    watchRemovable(removable) {
+        if (removable) {
+            this.startMutationObserver();
+        }
+        else {
+            this.stopMutationObserver();
+        }
+    }
+    watchTruncate(truncate) {
+        if (truncate) {
+            this.startTruncate();
+        }
+        else {
+            this.stopTruncate();
+        }
+    }
+    keyDownListener(event) {
+        if (event.key === "Escape") {
+            this.textHover = false;
+            this.textFocus = false;
+        }
+    }
+    /**
+     * @internal
+     */
+    async _truncateLabel() {
+        setTimeout(() => {
+            this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);
+        });
+    }
+    syncLabelText() {
+        this.labelText = this.host.textContent?.trim() ?? "";
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.startTruncate();
+        }
+        if (this.removable) {
+            this.startMutationObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.stopTruncate();
+        this.stopMutationObserver(true);
+    }
+    /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */
+    startMutationObserver() {
+        this.mutationObserver = new MutationObserver(() => this.syncLabelText());
+        this.mutationObserver.observe(this.host, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        this.syncLabelText();
+    }
+    stopMutationObserver(force = false) {
+        if (force || !(this.truncate && this.removable)) {
+            this.mutationObserver?.disconnect();
+            delete this.mutationObserver;
+        }
+    }
+    startTruncate() {
+        resizeObserver.observe(this.host);
+        this.startMutationObserver();
+        this._truncateLabel();
+    }
+    stopTruncate() {
+        resizeObserver.unobserve(this.host);
+        this.stopMutationObserver();
+        this.isTruncated = false;
+    }
+    render() {
+        return (h(Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+                [`dso-label-${this.status}`]: this.status,
+                "dso-compact": this.compact && !this.removable,
+                "dso-hover": this.removeHover || this.removeFocus,
+            }) }, h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), h("span", { key: '33c09c55755434fa98b9bc2933abb3a25ff10ad0', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '4dce1156ff95a3a1b6b4b97a60e578276c04f7be' })), this.removable && (h("dso-icon-button", { key: '338bfa3fc65328eaa5551eaf2c2299f8b04344b9', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '806049fdf2222eea9b5bb074907566e64a03340f', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "removable": [{
+                "watchRemovable": 0
+            }],
+        "truncate": [{
+                "watchTruncate": 0
+            }]
+    }; }
+    static get style() { return labelCss(); }
+}, [257, "dso-label", {
+        "compact": [516],
+        "removable": [516],
+        "status": [513],
+        "truncate": [516],
+        "removeHover": [32],
+        "removeFocus": [32],
+        "textHover": [32],
+        "textFocus": [32],
+        "isTruncated": [32],
+        "labelText": [32],
+        "_truncateLabel": [64]
+    }, [[4, "keydown", "keyDownListener"]], {
+        "removable": [{
+                "watchRemovable": 0
+            }],
+        "truncate": [{
+                "watchTruncate": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-label", "dso-icon", "dso-icon-button", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-label":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Label);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-icon-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Label as L, defineCustomElement as d };

package/dist/bundle/{p-VxbAefvg.js → p-BDvMDDCP.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
-import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$1 } from './p-DpRZJt_D.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DmmKAUIT.js';
+import { d as defineCustomElement$2 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$1 } from './p-CYWYJZS6.js';
 
-const infoCss = () => `:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-zwart"))}:host{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#f2f2f2;color:#191919}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.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)}`;
+const infoCss = () => `:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-zwart"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"))}:host{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_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:#f2f2f2;color:#191919}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}*,*::after,*::before{box-sizing:border-box}.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)}`;
 
 const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
     constructor(registerHost) {
@@ -14,7 +14,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends H {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get style() { return infoCss(); }
 }, [257, "dso-info", {
@@ -46,6 +46,3 @@ function defineCustomElement() {
 }
 
 export { Info as I, defineCustomElement as d };
-//# sourceMappingURL=p-VxbAefvg.js.map
-
-//# sourceMappingURL=p-VxbAefvg.js.map