@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/collection/components/image-overlay/image-overlay.css

@@ -80,7 +80,7 @@ ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add 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"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.editaction-add {
   --_dso-icon-button-tertiary-color: #191919;
@@ -94,7 +94,7 @@ ins.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper {
   outline: none;
@@ -117,7 +117,7 @@ ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):i
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add .wrapper 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"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.editaction-add .wrapper {
   --_dso-icon-button-tertiary-color: #191919;
@@ -131,7 +131,7 @@ ins.editaction-add .wrapper {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper .editaction-label {
   line-height: 1.5;
@@ -165,7 +165,7 @@ del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([hre
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove 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"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.editaction-remove {
   --_dso-icon-button-tertiary-color: #191919;
@@ -178,7 +178,7 @@ del.editaction-remove {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
@@ -208,7 +208,7 @@ del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove .wrapper 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"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.editaction-remove .wrapper {
   --_dso-icon-button-tertiary-color: #191919;
@@ -221,7 +221,7 @@ del.editaction-remove .wrapper {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }

package/dist/collection/components/image-overlay/image-overlay.js

@@ -5,7 +5,7 @@ const wijzigactieLabels = {
     voegtoe: "Toegevoegd",
 };
 const Dimmer = ({ active, src, alt, ref, close, click }, children) => active &&
-    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "times", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
+    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
 export class ImageOverlay {
     constructor() {
         this.active = false;
@@ -35,10 +35,9 @@ export class ImageOverlay {
             }
         }, 200));
         this.mutationObserver = new MutationObserver((e) => {
-            var _a, _b;
             forceUpdate(this.host);
-            if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
-                (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            if (e[0]?.type === "childList") {
+                this.resizeObserver?.disconnect();
                 // <img> is gone or a new element.
                 this.initZoomableImage();
             }
@@ -52,18 +51,15 @@ export class ImageOverlay {
         this.initZoomableImage();
     }
     componentDidRender() {
-        var _a, _b;
-        if (this.active && !((_a = this.wrapperElement) === null || _a === void 0 ? void 0 : _a.open)) {
-            (_b = this.wrapperElement) === null || _b === void 0 ? void 0 : _b.showModal();
+        if (this.active && !this.wrapperElement?.open) {
+            this.wrapperElement?.showModal();
         }
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        this.mutationObserver?.disconnect();
+        this.resizeObserver?.disconnect();
     }
     initZoomableImage() {
-        var _a;
         const imgElement = this.host.querySelector("img");
         if (!(imgElement instanceof HTMLImageElement)) {
             return;
@@ -72,7 +68,7 @@ export class ImageOverlay {
         if (imgElement.complete) {
             this.setZoomable(imgElement);
         }
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
+        this.resizeObserver?.observe(imgElement);
     }
     setZoomable(imageElement) {
         const { width, naturalWidth, height, naturalHeight } = imageElement;
@@ -82,22 +78,20 @@ export class ImageOverlay {
         return wijzigactie === "voegtoe" || wijzigactie === "verwijder";
     }
     closeZoomedImage() {
-        var _a;
-        (_a = this.wrapperElement) === null || _a === void 0 ? void 0 : _a.close();
+        this.wrapperElement?.close();
         this.active = false;
     }
     render() {
-        var _a;
-        const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
+        const { src, alt } = this.host.querySelector("img") ?? {};
         const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
         const button = this.zoomable && (h("dso-icon-button", { icon: "external-link", class: "open", variant: "map", label: "Afbeelding vergroot weergeven", ref: (element) => (this.iconButtonElement = element), onDsoClick: () => (this.active = true) }));
         if (this.wijzigactie === "verwijder") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
         if (this.wijzigactie === "voegtoe") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
         }
-        return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
+        return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
     }
     static get is() { return "dso-image-overlay"; }
     static get encapsulation() { return "shadow"; }
@@ -151,4 +145,3 @@ export class ImageOverlay {
             }];
     }
 }
-//# sourceMappingURL=image-overlay.js.map

package/dist/collection/components/info/info.css

@@ -21,7 +21,7 @@
   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"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 :host {
   --_dso-icon-button-tertiary-color: #191919;

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     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 is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }
@@ -81,4 +81,3 @@ export class Info {
             }];
     }
 }
-//# sourceMappingURL=info.js.map

package/dist/collection/components/info-button/info-button.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=info-button.interfaces.js.map

package/dist/collection/components/info-button/info-button.js

@@ -25,10 +25,9 @@ export class InfoButton {
             }
         };
         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();
             }
         };
     }
@@ -36,12 +35,11 @@ export class InfoButton {
      * 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) {
@@ -53,14 +51,12 @@ export class InfoButton {
         }
     }
     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;
         }
@@ -75,10 +71,10 @@ export class InfoButton {
         }
         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();
             }
         }
@@ -93,15 +89,14 @@ export class InfoButton {
         });
     }
     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" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }
@@ -186,7 +181,8 @@ export class InfoButton {
                         "TooltipPlacement": {
                             "location": "import",
                             "path": "../../functional-components/tooltip/tooltip.interfaces",
-                            "id": "src/functional-components/tooltip/tooltip.interfaces.ts::TooltipPlacement"
+                            "id": "src/functional-components/tooltip/tooltip.interfaces.ts::TooltipPlacement",
+                            "referenceLocation": "TooltipPlacement"
                         }
                     }
                 },
@@ -228,7 +224,8 @@ export class InfoButton {
                         "InfoButtonToggleEvent": {
                             "location": "import",
                             "path": "./info-button.interfaces",
-                            "id": "src/components/info-button/info-button.interfaces.ts::InfoButtonToggleEvent"
+                            "id": "src/components/info-button/info-button.interfaces.ts::InfoButtonToggleEvent",
+                            "referenceLocation": "InfoButtonToggleEvent"
                         }
                     }
                 }
@@ -257,4 +254,3 @@ export class InfoButton {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=info-button.js.map

package/dist/collection/components/input-range/input-range.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=input-range.interfaces.js.map

package/dist/collection/components/input-range/input-range.js

@@ -186,7 +186,8 @@ export class InputRange {
                         "InputRangeChangeEvent": {
                             "location": "import",
                             "path": "./input-range.interfaces",
-                            "id": "src/components/input-range/input-range.interfaces.ts::InputRangeChangeEvent"
+                            "id": "src/components/input-range/input-range.interfaces.ts::InputRangeChangeEvent",
+                            "referenceLocation": "InputRangeChangeEvent"
                         }
                     }
                 }
@@ -194,4 +195,3 @@ export class InputRange {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=input-range.js.map

package/dist/collection/components/label/label.css

@@ -1,37 +1,40 @@
-:host {
-  display: inline-block;
-  max-inline-size: 100%;
-  font-weight: normal;
-}
-
 *,
 *::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);
+:host {
+  display: inline-block;
+  max-inline-size: 100%;
 }
 
-.dso-label {
-  border-radius: 4px;
+:host([removable]) .dso-truncate.dso-label-content {
+  max-inline-size: calc(100% - 28px);
+}
+
+:host([truncate]) .dso-label-content {
   display: inline-block;
-  line-height: 1.5;
   max-inline-size: 100%;
-  padding-block: 4px;
-  padding-inline: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
 }
-.dso-label:focus-within, .dso-label.dso-hover {
-  text-decoration: line-through;
+
+::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;
@@ -51,7 +54,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label {
   --_dso-icon-button-tertiary-color: #191919;
@@ -64,6 +67,17 @@
   --_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;
@@ -84,7 +98,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-info {
   --_dso-icon-button-tertiary-color: #191919;
@@ -117,7 +131,7 @@
   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#email-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-primary {
   --_dso-icon-button-tertiary-color: #fff;
@@ -173,7 +187,7 @@
   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#email-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-success {
   --_dso-icon-button-tertiary-color: #fff;
@@ -229,7 +243,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-warning {
   --_dso-icon-button-tertiary-color: #191919;
@@ -262,7 +276,7 @@
   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#email-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-error {
   --_dso-icon-button-tertiary-color: #fff;
@@ -328,7 +342,7 @@
   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#email-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-label.dso-label-attention {
   --_dso-icon-button-tertiary-color: #fff;
@@ -384,7 +398,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-filter {
   --_dso-icon-button-tertiary-color: #191919;
@@ -418,7 +432,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-toegevoegd {
   --_dso-icon-button-tertiary-color: #191919;
@@ -432,7 +446,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 .dso-label.dso-label-verwijderd {
   --_dso-alert-success-border-color: #39870c;
@@ -453,7 +467,7 @@
   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#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .dso-label.dso-label-verwijderd {
   --_dso-icon-button-tertiary-color: #191919;
@@ -466,7 +480,7 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
@@ -479,22 +493,6 @@
   padding-block: 0;
   padding-inline: 8px;
 }
-.dso-label.dso-hover .dso-label-content {
-  text-decoration: line-through;
-}
-
-.dso-truncate.dso-label-content {
-  display: inline-block;
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
-  white-space: nowrap;
-}
-
-:host([removable]) .dso-truncate.dso-label-content {
-  max-inline-size: calc(100% - 28px);
-}
 
 dso-icon-button {
   float: inline-end;

package/dist/collection/components/label/label.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=label.interfaces.js.map

package/dist/collection/components/label/label.js

@@ -50,8 +50,7 @@ export class Label {
         });
     }
     syncLabelText() {
-        var _a, _b;
-        this.labelText = (_b = (_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
+        this.labelText = this.host.textContent?.trim() ?? "";
     }
     componentDidLoad() {
         if (this.truncate) {
@@ -77,9 +76,8 @@ export class Label {
         this.syncLabelText();
     }
     stopMutationObserver(force = false) {
-        var _a;
         if (force || !(this.truncate && this.removable)) {
-            (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            this.mutationObserver?.disconnect();
             delete this.mutationObserver;
         }
     }
@@ -98,9 +96,7 @@ export class 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: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx("dso-label-content", {
-                "dso-truncate": !!this.truncate,
-            }), 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: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (h("dso-icon-button", { key: '35c535b0943aef1ffc59871b43e2222c7490c6d2', variant: "tertiary", icon: "times", 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: '0c0a556cc61f34f782e9da771138e8b0e37e6647', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }) }, 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))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }
@@ -164,7 +160,8 @@ export class Label {
                         "LabelStatus": {
                             "location": "import",
                             "path": "./label.interfaces",
-                            "id": "src/components/label/label.interfaces.ts::LabelStatus"
+                            "id": "src/components/label/label.interfaces.ts::LabelStatus",
+                            "referenceLocation": "LabelStatus"
                         }
                     }
                 },
@@ -277,4 +274,3 @@ export class Label {
             }];
     }
 }
-//# sourceMappingURL=label.js.map

package/dist/collection/components/legend/legend-group/legend-group.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.legend-group-header {
+  position: relative;
+}
+.legend-group-header ::slotted(h3) {
+  margin-block: 8px !important;
+  padding-block: 4px !important;
+}
+.legend-group-header dso-icon-button {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}

package/dist/collection/components/legend/legend-group/legend-group.i18n.js

@@ -0,0 +1,14 @@
+export const translations = {
+    en: {
+        "dso-legend-group": {
+            edit: "Edit layers",
+            view: "Leave editmode",
+        },
+    },
+    nl: {
+        "dso-legend-group": {
+            edit: "Kaartlagen bewerken",
+            view: "Bewerken verlaten",
+        },
+    },
+};