@dso-toolkit/core 86.0.0 → 88.0.0

package/dist/bundle/dso-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
 
 const cardCss = () => `a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#download"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#download-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0;background-image:var(--_dso-di-background-image, url("./di.svg#external-link"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#external-link-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#call-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="tel:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#call-scampi"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0;background-image:var(--_dso-di-background-image, url("./di.svg#email-grasgroen"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^="mailto:"]:focus-visible{background-image:var(--_dso-di-background-image, url("./di.svg#email-scampi"))}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([is-selectable]:not([is-selectable=false])) .dso-card-container{display:grid;grid-template-columns:1fr minmax(0, 100%)}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-heading,:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-content{grid-column:2/-1}:host([is-selectable]:not([is-selectable=false])) .dso-card-container .dso-card-selectable{grid-row:span 2;margin-inline-end:8px}:host([active]:not([active=false])) .dso-card-container{background-color:#e5e5e5}.dso-card-container{padding-block:16px;padding-inline:16px;inline-size:100%;block-size:100%}.dso-card-container:has(.dso-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}.dso-card-container .dso-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-card-container .dso-card-heading{flex-wrap:wrap}}.dso-card-container .dso-card-heading+.dso-card-content{margin-block-start:8px}.heading-anchor{display:flex;gap:4px;color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor dso-icon{flex-shrink:0}.heading-anchor .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)}::slotted([slot=selectable]){font-size:0 !important;--_dt-selectable-padding-inline-start:24px;--_dt-selectable-input-wrapper-margin-inline-start:-24px;--_dt-selectable-input-wrapper-padding-inline-start:24px}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;font-size:1.125em !important;font-weight:700 !important;color:#275937 !important;line-height:1.25 !important}::slotted([slot=content]){--_dt-rich-content-margin-block:8px;--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0}::slotted([slot=interactions]){display:flex !important;justify-content:space-between !important;margin-inline-start:auto !important}@media screen and (max-width: 480px){::slotted([slot=interactions]){flex-basis:100% !important;margin-block-start:16px !important}}`;
 
@@ -36,8 +36,8 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '0b9c26d1a491eead187bdcc26d2b6b57817eca31', "is-selectable": isSelectable }, h("div", { key: 'b52c62ddcee54a435c5d8212721612877a07b972', class: "dso-card-container" }, h("div", { key: 'a07e3907ba0c6455f8ccb36958ece3220af93eab', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'fa8bde0f224549caf881623a0ceb5745d07abce2', name: "selectable" })), h("div", { key: '34962e8d62f38925d2009d14669c5686690fcbfa', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '754585f88fe4bc2a0dc90de191e81654ad01c0f0', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '90cb149fe3d70cbc8b6db973ba2341ec0091a4e1', name: "heading" }), h("dso-icon", { key: '61731f3b68644ce94fbb82880714370fad5d9211', icon: "external-link" }), h("span", { key: 'ef03c618b979ec850b6ebb79efa5b26a19e218ca', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '64d6243c5aef5cc6359ddc86745420c67e257989', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '1df2c690db408fc0c3cd7bc952d9c6e390ae0614', name: "heading" }), h("dso-icon", { key: 'b2720002592fd8bd947c86ca4b3199c5cff73535', icon: "download" })))) || (h("a", { key: '5d1e9b8f8c3cd1a98d1a77699b3083b6c2b323f6', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd9c93d3289412d714ed543dea3ecb4a299242959', name: "heading" }), h("dso-icon", { key: 'deadcd1ae3ae36e346a6ab050f7a085a4b2afe0d', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '53c596e25689b490a4e8a6cb059cbc8e60d7d3f4', name: "interactions" })), h("div", { key: '9237379b0b91ce0d0e3a4797aa19389e8aa99356', class: "dso-card-content" }, h("slot", { key: '63d29f83f27cd4be3251c161bee697bea774ae92', name: "content" })))));
+        return (h(Host, { key: '4a662a01a8ab0f9688b117430b04910df9fd1896', "is-selectable": isSelectable }, h("div", { key: 'bd91995a69f16b9d65e227921b5b343a2b66361b', class: "dso-card-container" }, h("div", { key: '021ad62b7cf97e7b5a7a600f9f22254ab68a8bb0', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '83abedddbdd80fb06b5540a0ac74f7b0cd2d872b', name: "selectable" })), h("div", { key: '1141401a3b97386885408f54578cc1ccc9de8759', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '9dd1677f6d851f449db4b4089e72235bb1522381', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '7f9455d2cb58b57913268520bd23990e66edc196', name: "heading" }), h("dso-icon", { key: '7be05c89ba03a84c914fe7d667ce049882bb36a6', icon: "external-link" }), h("span", { key: '01b67eaffee2bfed512f53f2f9f74b4ea1fdde6d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: 'cb592b317ec5800f9f05539ce39d0dfd0de473c1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '01cf0be3ab6e228774b5598a499e29d61aff9e2f', name: "heading" }), h("dso-icon", { key: 'cbbce504a6afc0896bd930c64a3e40d35d55c69b', icon: "download" })))) || (h("a", { key: 'a9b391befe2df29e0d3dd6c338880e3b7b4aa0a3', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c0d3e45e17bb689bf448d5252acacb07c2e4fd99', name: "heading" }), h("dso-icon", { key: '232b9e41e144541c81e5e55c463a9995bca7cd50', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'e5b32580f112e88093664df1fd7eaa206c10855a', name: "interactions" })), h("div", { key: '3f8d51e89795c6bbc88d2e7cb16732952cead8b2', class: "dso-card-content" }, h("slot", { key: 'fc439678df642efced533af5f24949e9f68ff345', name: "content" })))));
     }
     get host() { return this; }
     static get style() { return cardCss(); }

package/dist/bundle/dso-contact-information.js

@@ -11,7 +11,7 @@ const ContactInformation = /*@__PURE__*/ proxyCustomElement(class ContactInforma
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '509b3f51fa023a5b58d46e40252b917971afb600', class: "dso-contact-information" }, h("slot", { key: '281b8ad46ec6f591a9fc4d6d565d4dc847979ab7', name: "heading" }), h("slot", { key: '2de8f14e5116bf5bda27ef17f287b711997fd82c', name: "anchor-items" }), h("slot", { key: 'e67e73ff0b3785f5e13e76b01467484007378fbf', name: "info-items" })));
+        return (h("div", { key: '03131f6f72e2786b94d5a34e4cc162c93aca37a2', class: "dso-contact-information" }, h("slot", { key: 'c4cea848d9b56e306f4d33bf26a25df47c24d0b9', name: "heading" }), h("slot", { key: 'b40df1ea3bbf3231ae850afa11fa62e4a71f5841', name: "anchor-items" }), h("slot", { key: '5348cfdbc1c30cd4996999a28aa146f559a01d92', name: "info-items" })));
     }
     static get style() { return contactInformationCss(); }
 }, [257, "dso-contact-information"]);

package/dist/bundle/dso-cursor-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoCursorTooltip extends Components.DsoCursorTooltip, HTMLElement {}
+export const DsoCursorTooltip: {
+    prototype: DsoCursorTooltip;
+    new (): DsoCursorTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/bundle/dso-cursor-tooltip.js

@@ -0,0 +1,38 @@
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+
+const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_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-wit"))}: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-wit"))}: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-wit"))}: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-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
+
+const CursorTooltip = /*@__PURE__*/ proxyCustomElement(class CursorTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: 'd7c7a7a5ca50fb6d6ca51fd5486855d34fa87595', class: "dso-cursor-tooltip" }, h("slot", { key: 'f8f4af09e02a486bbc22c9efcca3e796110ee201' })));
+    }
+    static get style() { return cursorTooltipCss(); }
+}, [257, "dso-cursor-tooltip"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-cursor-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-cursor-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), CursorTooltip);
+            }
+            break;
+    } });
+}
+
+const DsoCursorTooltip = CursorTooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoCursorTooltip, defineCustomElement };
+//# sourceMappingURL=dso-cursor-tooltip.js.map
+
+//# sourceMappingURL=dso-cursor-tooltip.js.map

package/dist/bundle/dso-cursor-tooltip.js.map

@@ -0,0 +1 @@
+{"file":"dso-cursor-tooltip.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2pDAA2pD,CAAC;;MCO/qD,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;IACxB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC9B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/cursor-tooltip/cursor-tooltip.scss?tag=dso-cursor-tooltip&encapsulation=shadow","src/components/cursor-tooltip/cursor-tooltip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(rgba(colors.$zwart, 0.75), \"tooltip\");\r\n\r\n  position: relative;\r\n  display: inline-block;\r\n  pointer-events: none;\r\n  overflow: unset;\r\n  max-inline-size: 360px;\r\n  margin-inline: units.$u1;\r\n  padding-inline: units.$u2;\r\n  padding-block: units.$u1;\r\n  border-radius: 4px;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 0;\r\n    transform: translateX(-50%) translateY(-100%);\r\n    border-inline-start: units.$u1 solid transparent;\r\n    border-inline-end: units.$u1 solid transparent;\r\n    border-block-end: units.$u1 solid rgba(colors.$zwart, 0.75);\r\n    filter: none;\r\n    pointer-events: none;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-cursor-tooltip\",\r\n  styleUrl: \"cursor-tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class CursorTooltip implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-cursor-tooltip\">\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-date-picker.js

@@ -150,7 +150,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     }
     render() {
         var _a;
-        return (h("input", { key: 'c1b94c74d3a2858b7e6aa5adb59265d2e0c4cead', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '6f1578829a919a36fb98128cb807d082e33c986f', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return this; }
     static get style() { return datePickerCss(); }

package/dist/bundle/dso-document-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, t as transformTag } from './p-DBWrx_3r.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
 
 const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .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)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dt-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
 
@@ -35,7 +35,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return this.host.querySelector("[slot='interactions']");
     }
     render() {
-        return (h("div", { key: '7ad84c77cd9cad0cfe796d71d9889cd42a46dcff', class: "dso-document-card-container" }, h("div", { key: 'cd01ffeccf94bdf273afb2f0356610895ee2209c', class: "dso-document-card-heading" }, h("a", { key: '1272f0fb728edeb32ce9ad2dba93a3cb44f4c69a', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'acedac80a682a895706e45846230656d381c46cc', class: "icon-container" }, h("dso-icon", { key: '0808cc4158363e032e566f55783d4d81d8d00f7b', icon: "chevron-right" }), h("slot", { key: '0523647b2f8aafffabe191a0d0e985055581737f', name: "heading" })))), h("div", { key: 'bc5e9ca39e326cd9fdd0849b890b864de925f774', class: "dso-document-card-type" }, h("slot", { key: '22d9f6b73539a9e0a414b59a7c92c9bcddb70a52', name: "type" })), h("div", { key: 'a891f27126d774e6c50277d25fb4c72cc16d62a5', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '64199f7e9d2e0ae1fe039083d79a868b9760139b', name: "meta" }), h("slot", { key: '9dfbe5e04c8abfd93aff4982f9bd383170d711d5', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '7855de2e14a64d8b68c1840264082f96f48d895b', name: "interactions" }))));
+        return (h("div", { key: 'c72b21d24a1d8cddeb53808ebf8d7e04f60036f8', class: "dso-document-card-container" }, h("div", { key: '75256d968cd55399b5c8eb3b4b30a38dffad9b83', class: "dso-document-card-heading" }, h("a", { key: 'a43c1bc6c5e03b5a00e3593380a3d95118ce9d02', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '2c270a800db99c77c9b2800ca73c12e30ef83efd', class: "icon-container" }, h("dso-icon", { key: 'b712516ef47e844366872eca75a8050cedfab48b', icon: "chevron-right" }), h("slot", { key: 'ac375e345c607f0d9c97dbeae2be353dae327a43', name: "heading" })))), h("div", { key: '497d02ed37eae4648615e49caafbf080188ca1b2', class: "dso-document-card-type" }, h("slot", { key: 'cd3a3383991e8ab9a9ec5218c09b6d5f0597143b', name: "type" })), h("div", { key: '165974a97a18323fe9e8d02029df3598e93ad763', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: 'd6a1085eb9e8868053322efe49473222417f7dba', name: "meta" }), h("slot", { key: '7089e7150743a67472cd8c23e93b49a8f5f4620a', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '70f02c9f9d7851d6022634d83f139a1223d03889', name: "interactions" }))));
     }
     get host() { return this; }
     static get style() { return documentCardCss(); }

package/dist/bundle/dso-document-component.js

@@ -1,4 +1,4 @@
-import { D as DocumentComponent, d as defineCustomElement$1 } from './p-BKg8_fA-.js';
+import { D as DocumentComponent, d as defineCustomElement$1 } from './p-BvzNzaC8.js';
 
 const DsoDocumentComponent = DocumentComponent;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-dropdown-menu.js

@@ -1,4 +1,4 @@
-import { D as DropdownMenu, d as defineCustomElement$1 } from './p-CytM1Biw.js';
+import { D as DropdownMenu, d as defineCustomElement$1 } from './p-dcbs8fsg.js';
 
 const DsoDropdownMenu = DropdownMenu;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-expandable.js

@@ -1,4 +1,4 @@
-import { E as Expandable, d as defineCustomElement$1 } from './p-CEAGN3Bt.js';
+import { E as Expandable, d as defineCustomElement$1 } from './p-CkRbdaNs.js';
 
 const DsoExpandable = Expandable;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-header.js

@@ -2,8 +2,8 @@ import { h, p as proxyCustomElement, H, d as createEvent, f as forceUpdate, c as
 import { c as clsx } from './p-ChV9xqsO.js';
 import { i as i18n } from './p-pxiVAmq4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-CytM1Biw.js';
-import { d as defineCustomElement$2 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$3 } from './p-dcbs8fsg.js';
+import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
 
 const translations = {
     en: {
@@ -160,7 +160,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
         }
     }
     render() {
-        return (h(Host, { key: '228fb75a1651e9674939baf063450690f28c4976', "is-compact": this.isCompact }, h("div", { key: '33568c3eb674b8d22e62ceb4efd9ea78a73b5ea3', class: "dso-header" }, h("div", { key: '895c3dc52a24defdb752cd1961dd5219b1d505a2', class: "logo-container" }, h("slot", { key: '5f911f80f477c4d902bb96cc6ca1d941aa80324e', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '305ef493b091a74d76ed4f4a109c7a2eb025950e', "is-compact": this.isCompact }, h("div", { key: '7b316c39fb646174bcb852cabf823004f47565c7', class: "dso-header" }, h("div", { key: '0939fd1ef3d64f34c44c4177a2d031d1b700a324', class: "logo-container" }, h("slot", { key: '9b417bdb99968e034ea9283cf81206db28a6d4ba', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
         return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));

package/dist/bundle/dso-highlight-box.js

@@ -13,7 +13,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '49ad2a72f1a776d093c82afbc2843084575c2cdf', "has-counter": hasCounter }, hasCounter && h("div", { key: '76d449915cb077afa494e3527824b721772defa9', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '640640745b99f80117b9e97a80f9eb00b285b330', name: "icon" })), h("slot", { key: 'cdf119170cc1c86332eb9a8c249a741aa7174d94' })));
+        return (h(Host, { key: '9ed65a845d685ecb62b44ac4df2ee4c57a92d8a4', "has-counter": hasCounter }, hasCounter && h("div", { key: '57392d31cbc22d059e0d037679c06a08ecfff5e8', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '044da0d260d9d9257cc4ab0a48622aeba11d2f8d', name: "icon" })), h("slot", { key: '67e1cf3f59845e6451ac20cfbe8003df4089bd8d' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss(); }
@@ -21,6 +21,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
         "yellow": [516],
         "border": [516],
         "white": [516],
+        "green": [516],
         "dropShadow": [516, "drop-shadow"],
         "step": [514]
     }]);

package/dist/bundle/dso-highlight-box.js.map

@@ -1 +1 @@
-{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a while Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,uuBAAuuB,CAAC;;MCO1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAwCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n  @include highlight-box.root();\r\n\r\n  display: block;\r\n  container-type: inline-size;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-highlight-box\",\r\n  styleUrl: \"highlight-box.scss\",\r\n  shadow: true,\r\n})\r\nexport class HighlightBox {\r\n  /**\r\n   * For yellow Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  yellow?: boolean;\r\n\r\n  /**\r\n   * For a bordered Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  border?: boolean;\r\n\r\n  /**\r\n   * For a white Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  white?: boolean;\r\n\r\n  /**\r\n   * For a green Highlight Box.\r\n   */\r\n  @Prop({ reflect: true })\r\n  green?: boolean;\r\n\r\n  /**\r\n   * For an Highlight Box with a drop shadow.\r\n   */\r\n  @Prop({ reflect: true })\r\n  dropShadow?: boolean;\r\n\r\n  /**\r\n   * To create a step indicator.\r\n   */\r\n  @Prop({ reflect: true })\r\n  step?: number;\r\n\r\n  @Element()\r\n  private element!: HTMLDsoHighlightBoxElement;\r\n\r\n  render() {\r\n    const hasCounter = this.step || !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n    return (\r\n      <Host has-counter={hasCounter}>\r\n        {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-history-item.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-C0EnGYRN.js';
+import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
 
 const historyItemCss = () => `:host{border-block-end:1px solid #e5e5e5;display:flex;gap:8px;inline-size:100%;padding-block:16px}:host:has(.history-item-title a:is(:hover,:focus-visible)){background-color:#f2f2f2}*,*::after,*::before{box-sizing:border-box}:host([type=tijdelijk-regelingdeel]) .history-item-status-message{color:#8b4a6a}:host([type=tijdelijk-regelingdeel-besluit]) .history-item-status-message{color:#8b4a6a}:host([type=waarschuwing]) .history-item-status-message{color:#b62f41}.history-item-date,.history-item-content{display:flex;flex-direction:column}.history-item-date{flex:0 0 90px}.history-item-status-message,.history-item-warning{display:flex}.history-item-status-message dso-icon,.history-item-warning dso-icon{flex-shrink:0;margin-inline-end:8px}.history-item-warning{color:#b62f41}.history-item-title,.history-item-explanation,.history-item-warning{margin-block-start:8px;margin-inline-start:32px}.title-anchor{color:#39870c;font-weight:600;text-decoration:none}.title-anchor:hover{color:#39870c;text-decoration:underline}.title-anchor:visited{color:#39870c}`;
 
@@ -46,7 +46,7 @@ const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: '540840de191624a2a899117ab993346ad010addf' }, h("div", { key: 'a6c83fd5a9f776ff6a9af660bc52f6c9aa40e609', class: "history-item-date" }, h("slot", { key: 'cbec4ec21d97bcd969f2d757d118378e5bc99b80', name: "date" })), h("div", { key: '5d2ebd3b7669d770b1f6c4f87aab2dfef24ecb7d', class: "history-item-content" }, h("div", { key: 'da987825824c7b0b9d77d55b6a7756c2a057d9b5', class: "history-item-status-message" }, h("dso-icon", { key: '1efaac069ba0b9a9809f574ff87d0bd72e00fc54', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '4a0cb1eb1af2997086c895e50d79d9d60916d402', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '6f469044cc80f25ea3b8e29b572e4832a9c05cd3', class: "history-item-title" }, h("a", { key: '1b8872feb8d4fe27c8849abc804da2159ca57882', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'ecb8d1339350840104fa20ce9809feadc507f100', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '68e8f7a37f9a9dc77723ab7c1e357acf0c1ec107', class: "history-item-explanation" }, h("slot", { key: '964f77c8f75253092be241b72fe8e189ef908a46', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'b7687ba9fb1ba7ca3c9d87a3a3225e2e535e7d0f', class: "history-item-warning" }, h("dso-icon", { key: '02d0b36eb925ba6a6b187f329066c9326b014e00', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'b2a75c28f4523afa1c96409fbd7d970ac6772d90', name: "warning" }))))));
+        return (h(Fragment, { key: '8cfda0c27b483a01888f2c81413fc0d90ba2e43b' }, h("div", { key: '456e4002b8f510bf0eea433b75432c2eea2f0544', class: "history-item-date" }, h("slot", { key: '48947f94875b10154f7d039a29fd6b36adfe0bbf', name: "date" })), h("div", { key: '05fa9da1f7908628e1c15fdfa9a7204bea6f4a1f', class: "history-item-content" }, h("div", { key: 'aa31efe35bfcea60d17f0fd5e974c83268eeec40', class: "history-item-status-message" }, h("dso-icon", { key: '513c99028ec6a4f78e3169b8d2b9e5a442de7a1d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'd5fe6da657e7dba4f0209ff7d08ab4934dadb3ba', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '39d8e70b1c49c84c3770a45394653ec43b257211', class: "history-item-title" }, h("a", { key: 'f126b0823432b853e3b921feee1fa7a7bacc0fe3', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6639a69f724c4a6653e723f5ae427ff62b3ba972', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '9f9caab19a09a0de025fca3cc37588c712336f5d', class: "history-item-explanation" }, h("slot", { key: '23179fa7f11c8a5d2b5d8819de2039cae303d7b1', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '321e1f83f4e446689e1cbd93d7e44cd53c6f1b05', class: "history-item-warning" }, h("dso-icon", { key: 'be8d3a9e358e7087f644b56f0045accc2019ce15', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'c65a0e9a11f4954aaa9c5890180a3034d6b9393c', name: "warning" }))))));
     }
     get host() { return this; }
     static get style() { return historyItemCss(); }

package/dist/bundle/dso-icon-button.js

@@ -1,4 +1,4 @@
-import { I as IconButton, d as defineCustomElement$1 } from './p-BGRoDyj6.js';
+import { I as IconButton, d as defineCustomElement$1 } from './p-Dzpqkbo5.js';
 
 const DsoIconButton = IconButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-C0EnGYRN.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-Btk7RWKm.js';
 
 const DsoIcon = Icon;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-image-overlay.js

@@ -1,4 +1,4 @@
-import { I as ImageOverlay, d as defineCustomElement$1 } from './p-CCDR-SCb.js';
+import { I as ImageOverlay, d as defineCustomElement$1 } from './p-DQdpjvm1.js';
 
 const DsoImageOverlay = ImageOverlay;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info-button.js

@@ -1,4 +1,4 @@
-import { I as InfoButton, d as defineCustomElement$1 } from './p-CPgqc4eE.js';
+import { I as InfoButton, d as defineCustomElement$1 } from './p-zIbIgzeg.js';
 
 const DsoInfoButton = InfoButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-info.js

@@ -1,4 +1,4 @@
-import { I as Info, d as defineCustomElement$1 } from './p-CAGq_ycS.js';
+import { I as Info, d as defineCustomElement$1 } from './p-X1EWJbJ_.js';
 
 const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-input-range.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
 
-const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-runnable-track{border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-webkit-slider-thumb{border-radius:50%}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-track{border:1px solid #666;border-radius:0.5rem}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c}.input::-moz-range-thumb:hover{background-color:#275937}.input::-moz-range-thumb{border-color:transparent;border-radius:50%}`;
+const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;
 
 const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends H {
     constructor(registerHost) {
@@ -19,13 +19,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends H {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'd187af008bb6acdfacf391f509ab83d17eaef891', id: "description", hidden: true }, this.description)), h("span", { key: 'f1041606979f3cb05eec80fae45d2ea8c901fadf', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '18d055df50d550b68b11511fab87cc3e9bd17bae', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '1048b041a13dbf244b2d6fe76dccf8f97a2d7b4b', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '438056be852e2b4136de65cec13faa6a6c43418b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '0c10b36570bf6ccbadf38e5b110d3b8f5c950521', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '8b3f86e7c42f0dffdc2b550f365c4bdc91627ffc', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss(); }

package/dist/bundle/dso-input-range.js.map

@@ -1 +1 @@
-{"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,6uCAA6uC,CAAC;;MCS9vC,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n\r\n  padding: 0.5rem;\r\n\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n\r\n  min-inline-size: 5ch;\r\n\r\n  &.min {\r\n    text-align: end;\r\n  }\r\n\r\n  &.max {\r\n    text-align: start;\r\n  }\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n\r\n  appearance: none;\r\n\r\n  background-color: transparent;\r\n\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.55rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 0.5rem;\r\n\r\n    background-color: colors.$grijs-10;\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n\r\n    appearance: none;\r\n\r\n    margin-block-start: -0.5rem;\r\n\r\n    background-color: colors.$grasgroen;\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n\r\n    border-color: transparent;\r\n    border-radius: 50%;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter min\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter max\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ukCAAukC,CAAC;;MCSxlC,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EACrC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,aAAA,EAAa,MAAM,EAAA,EACrC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.625rem;\r\n  padding-block: 0.5rem;\r\n  inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n  flex-shrink: 0;\r\n  min-inline-size: 20px;\r\n}\r\n\r\n.input {\r\n  flex-grow: 1;\r\n  appearance: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  &::-webkit-slider-runnable-track {\r\n    block-size: 0.5rem;\r\n    background-color: colors.$grijs-10;\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  &::-webkit-slider-thumb {\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n    appearance: none;\r\n    margin-block-start: -0.55rem;\r\n    background-color: colors.$grasgroen;\r\n    border-radius: 50%;\r\n\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n  }\r\n\r\n  &::-moz-range-track {\r\n    box-sizing: border-box;\r\n    block-size: 0.5rem;\r\n    background-color: colors.$grijs-10;\r\n    border: 1px solid colors.$grijs-60;\r\n    border-radius: 0.5rem;\r\n\r\n    &:hover {\r\n      background-color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  &::-moz-range-thumb {\r\n    box-sizing: border-box;\r\n    block-size: 1.5rem;\r\n    inline-size: 1.5rem;\r\n    appearance: none;\r\n    margin-block-start: -0.5rem;\r\n    background-color: colors.$grasgroen;\r\n    border-radius: 50%;\r\n    border-color: transparent;\r\n\r\n    &:hover {\r\n      background-color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-input-range\",\r\n  styleUrl: \"input-range.scss\",\r\n  shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n  /**\r\n   * The minimum value of the range.\r\n   */\r\n  @Prop()\r\n  min?: number;\r\n\r\n  /**\r\n   * The maximum value of the range.\r\n   */\r\n  @Prop()\r\n  max?: number;\r\n\r\n  /**\r\n   * The value of the range.\r\n   */\r\n  @Prop()\r\n  value?: number;\r\n\r\n  /**\r\n   * The step to increment the value by.\r\n   */\r\n  @Prop()\r\n  step?: number;\r\n\r\n  /**\r\n   * The label of the range.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The unit of the range.\r\n   */\r\n  @Prop()\r\n  unit: string = \"\";\r\n\r\n  /**\r\n   * The description of the range.\r\n   */\r\n  @Prop()\r\n  description?: string;\r\n\r\n  /**\r\n   * Emitted when the value has changed.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoInputRangeElement;\r\n\r\n  render() {\r\n    const min = this.min || 0;\r\n    const max = this.max || 100;\r\n    const step = this.step || 1;\r\n\r\n    return (\r\n      <>\r\n        {this.description && (\r\n          <span id=\"description\" hidden>\r\n            {this.description}\r\n          </span>\r\n        )}\r\n        <span class=\"counter\" aria-hidden=\"true\">\r\n          {min}\r\n          {this.unit}\r\n        </span>\r\n        <input\r\n          type=\"range\"\r\n          min={this.min}\r\n          max={this.max}\r\n          value={this.value}\r\n          class=\"input\"\r\n          aria-label={this.label}\r\n          aria-describedby={this.description ? \"description\" : undefined}\r\n          onChange={(event) =>\r\n            this.dsoChange.emit({\r\n              originalEvent: event,\r\n              value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n              max,\r\n              min,\r\n              step,\r\n            })\r\n          }\r\n        />\r\n        <span class=\"counter\" aria-hidden=\"true\">\r\n          {max}\r\n          {this.unit}\r\n        </span>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-label.js

@@ -1,4 +1,4 @@
-import { L as Label, d as defineCustomElement$1 } from './p-q0UGoBNE.js';
+import { L as Label, d as defineCustomElement$1 } from './p-CFQ1xnYr.js';
 
 const DsoLabel = Label;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-legend-item.js

@@ -1,13 +1,14 @@
 import { p as proxyCustomElement, H, d as createEvent, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$7 } from './p-C0EnGYRN.js';
-import { d as defineCustomElement$6 } from './p-BGRoDyj6.js';
-import { d as defineCustomElement$5 } from './p-CPgqc4eE.js';
-import { d as defineCustomElement$4 } from './p-BFOCXUdD.js';
-import { d as defineCustomElement$3 } from './p-OF4HG_oT.js';
-import { d as defineCustomElement$2 } from './p-CJ5GzbS9.js';
+import { d as defineCustomElement$8 } from './p-Btk7RWKm.js';
+import { d as defineCustomElement$7 } from './p-Dzpqkbo5.js';
+import { d as defineCustomElement$6 } from './p-zIbIgzeg.js';
+import { d as defineCustomElement$5 } from './p-ecEmdirb.js';
+import { d as defineCustomElement$4 } from './p-kBBh-4zI.js';
+import { d as defineCustomElement$3 } from './p-Bx-lyRDw.js';
+import { d as defineCustomElement$2 } from './p-CBhOl8xD.js';
 
-const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex;justify-content:center;align-content:center;align-items:center}.legend-item-right-content dso-slide-toggle{display:flex;align-self:center;line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
+const legendItemCss = () => `:host{display:block;padding-block:4px}*,*::after,*::before{box-sizing:border-box}::slotted(span[slot=symbol]){background-color:#fff;display:block;float:inline-start;block-size:26px;margin-block-start:0;margin-inline-end:8px;inline-size:30px;overflow:hidden;position:relative}::slotted(h3){margin:0 !important}::slotted([slot=options]){margin-block-start:8px}.legend-item{display:flex;position:relative}.legend-item.legend-item-symbol+.options{margin-block-start:8px}.legend-item dso-icon-button.active{--_dso-icon-button-tertiary-color:#173521}.legend-item-right-content{margin-inline-start:auto;display:flex}.legend-item-right-content dso-slide-toggle{line-height:1;margin-inline-start:8px;padding-block-start:0 !important}`;
 
 const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
     constructor(registerHost) {
@@ -48,7 +49,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
         if (label === null || label === void 0 ? void 0 : label.textContent) {
             accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;
         }
-        return (h(Host, { key: '113e4cc95985fed9befcc75cf7dd49d431a6a724', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '32b00c02feaa2107691c0f57cb508be44417033b', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '7fedb010d0ff7d53acddef537be6c6009f250f84' }, h("slot", { key: 'a566482b9b60fe5e69f74d2af4c3c093f01c8665', name: "symbol" }))), h("div", { key: 'd6c4fbe4e9dfbf52dd02255d3bad704de7edb313' }, h("slot", { key: 'bfa9d87992c0cab9d034260153e634158f4b6c3a', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '13927a8346bf1c2b34c83bcc5ab9fed9e3394789', position: "bottom" }, this.disabledMessage)), h("div", { key: 'daf55817441d0156625630afb68be8209a7ff96a', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '15d1448d3338cda2bae8c395f1a376f5c8b37449', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '851d2b0d696a8c2271f3ae5a610115606773899c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'b29ccf455d9326c56ec6f9d5cbc3d07302718773', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8ce07dd6a490e7853ab464690af7a07f23bc7cae', name: "options" })))));
+        return (h(Host, { key: '24af81db658898c1bc2317422cbb6ab38196083d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '174173193d7302d22d265e02a4147c6877241d0f', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '568089b5a568b92d12665a7c0eb78d3315c2c947' }, h("slot", { key: '325f14f024dca0edf52c2684097be1ca5eb6f014', name: "symbol" }))), h("div", { key: 'e72d3ac238b30577082a0edc4ab68de1d3b16f15' }, h("slot", { key: 'a1b4d6b740bd8a5ee32adcc5e40268bfd472c680', name: "label" })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '9bc17eafc23c61d8b53005d02fa4aacad6ca2d8d', position: "bottom" }, this.disabledMessage)), h("div", { key: '9208ae5adae3f59e0ab0a20c0a32b65cc3fbc40f', class: "legend-item-right-content" }, this.active && hasOptions && !this.disabled && (h("dso-icon-button", { key: '6489bc065e692b8dce8edb7a56d1d5672f8d21cd', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: 'bb79e502289dd11de8db82d78e00bade9b0a451c', accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'a3c74cdd73815b7519c9126d278da02c0281dfb6', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b932318fd0ccb55f02e60e5e49e339453b61d955', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss(); }
@@ -63,7 +64,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
+    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-legend-item":
             if (!customElements.get(transformTag(tagName))) {
@@ -72,15 +73,20 @@ function defineCustomElement$1() {
             break;
         case "dso-icon":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "dso-icon-button":
             if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "dso-scrollable":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }

package/dist/bundle/dso-legend-item.js.map

@@ -1 +1 @@
-{"file":"dso-legend-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n  @include symbol-mixins.symbolContainer(\r\n    legend-item-variables.$symbol-block-size,\r\n    legend-item-variables.$symbol-inline-size\r\n  );\r\n}\r\n\r\n::slotted(h3) {\r\n  margin: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n  margin-block-start: units.$u1;\r\n}\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol + .options {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  dso-icon-button.active {\r\n    --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n  }\r\n}\r\n\r\n.legend-item-right-content {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-content: center;\r\n  align-items: center;\r\n\r\n  dso-slide-toggle {\r\n    display: flex;\r\n    align-self: center;\r\n    line-height: 1;\r\n    margin-inline-start: 8px;\r\n    padding-block-start: 0 !important;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot=\"label\">...</h3>` or\r\n * `<span slot=\"label\">...</span>`\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    const label = this.host.querySelector(\"span[slot='label']\");\r\n    let accessibleLabel = \"Maak actief\";\r\n    if (label?.textContent) {\r\n      accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;\r\n    }\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot name=\"label\" />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel={accessibleLabel}\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-legend-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n  display: block;\r\n  padding-block: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n  @include symbol-mixins.symbolContainer(\r\n    legend-item-variables.$symbol-block-size,\r\n    legend-item-variables.$symbol-inline-size\r\n  );\r\n}\r\n\r\n::slotted(h3) {\r\n  margin: 0 !important;\r\n}\r\n\r\n::slotted([slot=\"options\"]) {\r\n  margin-block-start: units.$u1;\r\n}\r\n\r\n.legend-item {\r\n  display: flex;\r\n  position: relative;\r\n\r\n  &.legend-item-symbol + .options {\r\n    margin-block-start: units.$u1;\r\n  }\r\n\r\n  dso-icon-button.active {\r\n    --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n  }\r\n}\r\n\r\n.legend-item-right-content {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n\r\n  dso-slide-toggle {\r\n    line-height: 1;\r\n    margin-inline-start: 8px;\r\n    padding-block-start: 0 !important;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/**\r\n * @slot label - The label for this Legend Item. Should be targetted with either `<h3 slot=\"label\">...</h3>` or\r\n * `<span slot=\"label\">...</span>`\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n */\r\n@Component({\r\n  tag: \"dso-legend-item\",\r\n  styleUrl: \"legend-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendItemElement;\r\n\r\n  /**\r\n   * To disable the Legend Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Message to be shown behind a toggletip when the Legend Item is disabled\r\n   */\r\n  @Prop()\r\n  disabledMessage?: string;\r\n\r\n  /**\r\n   * Controls whether this Legend Item can be active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  activatable?: boolean;\r\n\r\n  /**\r\n   * Controls whether this Legend Item is active or not\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n  /**\r\n   * Emitted when the mouse enters the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseEnter!: EventEmitter;\r\n\r\n  /**\r\n   * Emitted when the mouse leaves the Legend Item\r\n   */\r\n  @Event()\r\n  dsoMouseLeave!: EventEmitter;\r\n\r\n  @State()\r\n  showOptions = false;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get optionsSlottedElement() {\r\n    return this.host.querySelector(\"[slot='options']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n    const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n    const label = this.host.querySelector(\"span[slot='label']\");\r\n    let accessibleLabel = \"Maak actief\";\r\n    if (label?.textContent) {\r\n      accessibleLabel = `Maak ${label.textContent.toLowerCase()} actief`;\r\n    }\r\n\r\n    return (\r\n      <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n        <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n          {hasSymbol && (\r\n            <div>\r\n              <slot name=\"symbol\" />\r\n            </div>\r\n          )}\r\n          <div>\r\n            <slot name=\"label\" />\r\n          </div>\r\n          {this.disabled && this.disabledMessage && (\r\n            <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n          )}\r\n\r\n          <div class=\"legend-item-right-content\">\r\n            {this.active && hasOptions && !this.disabled && (\r\n              <dso-icon-button\r\n                label=\"Opties\"\r\n                icon=\"more\"\r\n                variant=\"tertiary\"\r\n                class={{ active: this.showOptions }}\r\n                id=\"edit-button\"\r\n                onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n              />\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel={accessibleLabel}\r\n                checked={this.active}\r\n                disabled={this.disabled}\r\n                onDsoActiveChange={(e) =>\r\n                  this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n        {hasOptions && (\r\n          <div hidden={this.disabled || !this.showOptions} class=\"options\">\r\n            <slot name=\"options\" />\r\n          </div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-legend.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$4 } from './p-C0EnGYRN.js';
-import { d as defineCustomElement$3 } from './p-BGRoDyj6.js';
-import { d as defineCustomElement$2 } from './p-DP6XV8DY.js';
+import { d as defineCustomElement$4 } from './p-Btk7RWKm.js';
+import { d as defineCustomElement$3 } from './p-Dzpqkbo5.js';
+import { d as defineCustomElement$2 } from './p-ecEmdirb.js';
 
-const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3)}:host .topbar{padding-block:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dso-scrollable-container-padding-inline:16px;max-block-size:52vh}`;
+const legendCss = () => `*,*::after,*::before{box-sizing:border-box}:host{position:relative;display:block;inline-size:344px;background-color:#fff;box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.3);border-radius:4px}:host .topbar{padding-block-start:8px;padding-inline:16px}:host .topbar .tabs{inline-size:100%;padding:0;list-style:none;display:inline-flex;border-block-end:1px solid #ccc}:host .topbar .tabs .tab{font-size:inherit;font-family:inherit;line-height:inherit;background-color:transparent;cursor:pointer;display:block;border:0;color:#275937;padding-block:6px;padding-inline:8px;border-block-end:4px solid transparent}:host .topbar .tabs .tab:hover{text-decoration:underline}:host .topbar .tabs .tab.active{font-weight:bold;border-color:#8b4a6a}:host .topbar .close-button{position:absolute;inset-block-start:8px;inset-inline-end:8px}:host .content{--_dso-form-group-margin-block-end:0;--_dt-scrollable-container-border-end-start-radius:4px;--_dt-scrollable-container-border-end-end-radius:4px;--_dt-scrollable-container-padding-inline:16px;max-block-size:52vh;border-end-start-radius:4px;border-end-end-radius:4px}`;
 
 const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
     constructor(registerHost) {
@@ -75,7 +75,7 @@ const Legend = /*@__PURE__*/ proxyCustomElement(class Legend extends H {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '26e817d9f760e220fcba00aed980bf2bd7ee1697' }, h("div", { key: 'd9fed11954d8f4df4480fae12d361e134aafe7f3', class: "topbar" }, h("div", { key: 'e9f21c805928ffee5ee26293011704983ca46ebd', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '1c51e117733829cd351074be0ace4dad008f1eeb', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: 'ef59ecc0c8221fbbec78df269b476aa43872a138', class: "content" }, h("div", { key: '6f4f8d627425c6d85c39953e0355ee2c48b969d5', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '2a57288315327f31330eb2389f0b0d01de51a783' })))));
+        return (h(Host, { key: '4f1295cd75af42eeaf438cc7b92604054993bdeb' }, h("div", { key: 'f1473d16ec2b6b5035c9aa88dbad40a4233a1529', class: "topbar" }, h("div", { key: 'f33777d4ab012cecb17105abb8299426995c86d2', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", Object.assign({ class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false" }, (!tabItem.active ? { tabIndex: -1 } : {}), { onClick: this.clickHandler }), tabItem.label)))), h("dso-icon-button", { key: '8fc17eeefc63ca51e296212eeeadbfc8ab731d18', icon: "times", variant: "tertiary", label: "Sluit legenda", class: "close-button", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) })), h("dso-scrollable", { key: '553566be6236dde866e739364e7a19aa918d32a8', class: "content" }, h("div", { key: '9348aad31e38e42f208301773d58fa784d71c751', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '55fd88c643f65474bb691e4100e493c28b22a358' })))));
     }
     get host() { return this; }
     static get style() { return legendCss(); }

package/dist/bundle/dso-legend.js.map

@@ -1 +1 @@
-{"file":"dso-legend.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend/legend.scss?tag=dso-legend&encapsulation=shadow","src/components/legend/legend.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  position: relative;\r\n  display: block;\r\n  inline-size: 344px;\r\n  background-color: colors.$wit;\r\n  box-shadow: 0 0 units.$u1 0 rgba(0, 0, 0, 0.3);\r\n\r\n  .topbar {\r\n    padding-block: units.$u1;\r\n    padding-inline: units.$u2;\r\n\r\n    .tabs {\r\n      inline-size: 100%;\r\n      padding: 0;\r\n      list-style: none;\r\n      display: inline-flex;\r\n      border-block-end: 1px solid colors.$grijs-20;\r\n\r\n      .tab {\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        line-height: inherit;\r\n        background-color: transparent;\r\n        cursor: pointer;\r\n        display: block;\r\n        border: 0;\r\n        color: colors.$bosgroen;\r\n        padding-block: 6px;\r\n        padding-inline: units.$u1;\r\n        border-block-end: units.$u1 * 0.5 solid transparent;\r\n\r\n        &:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &.active {\r\n          font-weight: bold;\r\n          border-color: colors.$mauve;\r\n        }\r\n      }\r\n    }\r\n\r\n    .close-button {\r\n      position: absolute;\r\n      inset-block-start: units.$u1;\r\n      inset-inline-end: units.$u1;\r\n    }\r\n  }\r\n\r\n  .content {\r\n    --_dso-form-group-margin-block-end: 0;\r\n    --_dso-scrollable-container-padding-inline: #{units.$u2};\r\n\r\n    max-block-size: 52vh;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-legend.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/legend/legend.scss?tag=dso-legend&encapsulation=shadow","src/components/legend/legend.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"legend.variables\" as legend-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  position: relative;\r\n  display: block;\r\n  inline-size: 344px;\r\n  background-color: colors.$wit;\r\n  box-shadow: 0 0 units.$u1 0 rgba(0, 0, 0, 0.3);\r\n  border-radius: legend-variables.$border-radius;\r\n\r\n  .topbar {\r\n    padding-block-start: units.$u1;\r\n    padding-inline: units.$u2;\r\n\r\n    .tabs {\r\n      inline-size: 100%;\r\n      padding: 0;\r\n      list-style: none;\r\n      display: inline-flex;\r\n      border-block-end: 1px solid colors.$grijs-20;\r\n\r\n      .tab {\r\n        font-size: inherit;\r\n        font-family: inherit;\r\n        line-height: inherit;\r\n        background-color: transparent;\r\n        cursor: pointer;\r\n        display: block;\r\n        border: 0;\r\n        color: colors.$bosgroen;\r\n        padding-block: 6px;\r\n        padding-inline: units.$u1;\r\n        border-block-end: units.$u1 * 0.5 solid transparent;\r\n\r\n        &:hover {\r\n          text-decoration: underline;\r\n        }\r\n\r\n        &.active {\r\n          font-weight: bold;\r\n          border-color: colors.$mauve;\r\n        }\r\n      }\r\n    }\r\n\r\n    .close-button {\r\n      position: absolute;\r\n      inset-block-start: units.$u1;\r\n      inset-inline-end: units.$u1;\r\n    }\r\n  }\r\n\r\n  .content {\r\n    --_dso-form-group-margin-block-end: 0;\r\n    --_dt-scrollable-container-border-end-start-radius: #{legend-variables.$border-radius};\r\n    --_dt-scrollable-container-border-end-end-radius: #{legend-variables.$border-radius};\r\n    --_dt-scrollable-container-padding-inline: #{units.$u2};\r\n\r\n    max-block-size: 52vh;\r\n    border-end-start-radius: legend-variables.$border-radius;\r\n    border-end-end-radius: legend-variables.$border-radius;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { LegendCloseEvent, LegendContentSwitchEvent, LegendTabItem } from \"./legend.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-legend\",\r\n  styleUrl: \"legend.scss\",\r\n  shadow: true,\r\n})\r\nexport class Legend implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoLegendElement;\r\n\r\n  /**\r\n   * TabItems in the legend topbar\r\n   */\r\n  @Prop()\r\n  tabItems: LegendTabItem[] = [];\r\n\r\n  /**\r\n   * Emitted when a tabItem is pressed.\r\n   */\r\n  @Event()\r\n  dsoContentSwitch!: EventEmitter<LegendContentSwitchEvent>;\r\n\r\n  /**\r\n   * Emitted when the user closes the Legend.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<LegendCloseEvent>;\r\n\r\n  private get tabs() {\r\n    return Array.from(this.host.shadowRoot!.querySelectorAll<HTMLButtonElement>('[role=\"tab\"]'));\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.tabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.tabs[this.tabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLButtonElement | undefined) {\r\n    tab?.focus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.tabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.tabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  // A button handles an \"enter\" and a \"space\" keypress as a normal click.\"\r\n  private clickHandler = (e: MouseEvent) => {\r\n    const index = this.tabs.findIndex((tab) => tab === e.currentTarget);\r\n    const tabItem = this.tabItems[index];\r\n\r\n    if (!tabItem || tabItem.active) {\r\n      return;\r\n    }\r\n\r\n    this.dsoContentSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"topbar\">\r\n          <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n            {this.tabItems.map((tabItem) => (\r\n              <button\r\n                class={clsx(\"tab\", { active: tabItem.active })}\r\n                role=\"tab\"\r\n                aria-selected={tabItem.active ? \"true\" : \"false\"}\r\n                {...(!tabItem.active ? { tabIndex: -1 } : {})}\r\n                onClick={this.clickHandler}\r\n              >\r\n                {tabItem.label}\r\n              </button>\r\n            ))}\r\n          </div>\r\n\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            label=\"Sluit legenda\"\r\n            class=\"close-button\"\r\n            onClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        </div>\r\n\r\n        <dso-scrollable class=\"content\">\r\n          <div role=\"tabpanel\" tabIndex={0}>\r\n            <slot />\r\n          </div>\r\n        </dso-scrollable>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}