@dso-toolkit/core 79.0.0 → 79.1.0

package/dist/bundle/dso-banner.js

@@ -20,9 +20,9 @@ const Banner = /*@__PURE__*/ proxyCustomElement(class Banner extends H {
         this.icon = false;
     }
     render() {
-        return (h("section", { key: '6ec542fbb7b329d79fb6065c74be3c30edaa5bcc', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: 'd19ab00faab47b26f6cc5dbda513eabfebde19f6', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: 'c940029d0ad0ec681811cd6bb68446ccd41878c9' })));
+            }), role: "alert" }, h("slot", { key: '5b5a7b14ebf06f9d12a88ff89d9591aa643579bc' })));
     }
     static get style() { return bannerCss; }
 }, [257, "dso-banner", {

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

@@ -1,4 +1,4 @@
-import { B as ButtonGroup, d as defineCustomElement$1 } from './p-DV5Lbo3I.js';
+import { B as ButtonGroup, d as defineCustomElement$1 } from './p-8gGambFe.js';
 
 const DsoButtonGroup = ButtonGroup;
 const defineCustomElement = defineCustomElement$1;

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

@@ -13,7 +13,7 @@ const CardContainer = /*@__PURE__*/ proxyCustomElement(class CardContainer exten
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '90b07c1be81c9e8891fc3c56d9d67304347c2756', class: "dso-card-list" }, h("slot", { key: '28fd7e44a59870508de16cefaf245146004319bc' }))), this.mode === "grid" && (h("div", { key: '8a73e7edf8c218f0dee90aac272b148207c20d13', class: "dso-card-grid" }, h("slot", { key: '9406a30a0ddf5ac7d1c48b5e0003f61936945783' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'd593775800ecb1923ef9ad855255e7dd37ea591a', class: "dso-card-list" }, h("slot", { key: '7ea9f4b7e848bf3afa2039f5ec4ab14ce2573243' }))), this.mode === "grid" && (h("div", { key: 'b4ce1e46af681b37be5e7d53ee56be82a286d9c7', class: "dso-card-grid" }, h("slot", { key: '1d29ddba3f221ee0a507ba93a36869a24e4ad19f' })))));
     }
     static get style() { return cardContainerCss; }
 }, [257, "dso-card-container", {

package/dist/bundle/dso-card.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, d as Host } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.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 :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a .sr-only+:is(dso-icon,svg.di){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}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{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}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{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}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{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}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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}}";
 
@@ -34,8 +34,8 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends H {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '36c7e37e3565af414ebf091a9118b8c881ac18f7', "is-selectable": isSelectable }, h("div", { key: '69e0f342122bd4ac53ca18ea53ca9ea64c1802d1', class: "dso-card-container" }, h("div", { key: '880b4c8a61b841dfda3043f86f1b5ea37c742b44', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '985861bac731aecc3dc914a32db5bce35fc18da0', name: "selectable" })), h("div", { key: '3a77b0bcd5892f7e4a8d2e32c14d0d2eb7024144', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '756424c1507d093386d91ebd1b38f03f415071ac', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '052ff25dc558d89c3e674fb2efa4cfd9c83e385f', name: "heading" }), h("dso-icon", { key: '29f7e56fcdb75c2e4aaf2706e86197108239f1b3', icon: "external-link" }), h("span", { key: '1f8cff9385a86bd2fc4b20ee61f53019051d434d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '3a18f6a6570b8967f16526503e2a23b8eea1937e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c50da6e83a090f725853154d3cbcd46b159ce893', name: "heading" }), h("dso-icon", { key: '06f7c304bffeab5264d2efb08490f00fe5ddf970', icon: "download" })))) || (h("a", { key: '17359530043bde8ca2c8c31a541667da26241c26', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd6e44c271ee256b1f4ab024836854077dd7802ed', name: "heading" }), h("dso-icon", { key: '0d3445bd395ad3df910a42e93cdd3da375315fc9', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '916c08c993eb995d6f572d0d3ae03eb69d17b755', name: "interactions" })), h("div", { key: '464f37a71643a16f2c63aa7ffaa9b0dda9b331fc', class: "dso-card-content" }, h("slot", { key: 'd05e86980f31e1af748768f5b8791fad464cc559', name: "content" })))));
+        return (h(Host, { key: '4054a302510ad07362d9089c942e58995baa99be', "is-selectable": isSelectable }, h("div", { key: '6bc8237ad90d02bfe4b3f051c616ce1fa5c2e93e', class: "dso-card-container" }, h("div", { key: '655658b4979420b339e0acd1e25d799b36ab8d33', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '441362e9baa84ea7366fd1eeda03bb694c3af304', name: "selectable" })), h("div", { key: 'b38fc0c9bbbb2fa228936039b6a4897ac1c27ad2', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: 'df8998e9b31aa38b61595cd49012b8f3ff51464e', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'b4685d2a490ed81e6eb7082a537a28fbae4d6072', name: "heading" }), h("dso-icon", { key: 'eb741b5b1d283c333e06ae0c87eb501aacb741b5', icon: "external-link" }), h("span", { key: '6f88b705b3967c9dd6b03419b6f18a7b1e77dc15', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: 'e0cf75a7c96ded19a96d96f4451c973336a1a507', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c33e908eedae868f081bff313f0981449852de12', name: "heading" }), h("dso-icon", { key: 'ff774bc81320ea2f532f816de3a14c35899fb3ac', icon: "download" })))) || (h("a", { key: 'e0160cd81ad54b2665e5c87b49769aa8cf31fcfd', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '48dff93e79734127e2e578c1b8d28c2c6bf67085', name: "heading" }), h("dso-icon", { key: '89d2c5f135e95204702b1b76725c694da3e3ba8b', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '177b551119e7b08ed23d501199d1ec57a60e6a95', name: "interactions" })), h("div", { key: '11a6c27534df33821844c9ff6ea602517f1602b0', class: "dso-card-content" }, h("slot", { key: '0145480ad4b5b50a80dcaa6c816e7cab3784d06f', name: "content" })))));
     }
     get host() { return this; }
     static get style() { return cardCss; }

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

@@ -9,7 +9,7 @@ const ContactInformation = /*@__PURE__*/ proxyCustomElement(class ContactInforma
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'a511c3b7e61371a74f3e55c0a71abaf56768cb52', class: "dso-contact-information" }, h("slot", { key: '98fae6e8614de0c46fb8fb5d55e77f5807dc4231', name: "heading" }), h("slot", { key: 'b84cd2bcc9a9874110d302b16ece15d37ab35896', name: "anchor-items" }), h("slot", { key: '32bae418af1a46f538c8cb4dde38e347f99cf7b1', name: "info-items" })));
+        return (h("div", { key: 'bbabd0b1c2088b6e7fffdd7c51dcbad08205a7e7', class: "dso-contact-information" }, h("slot", { key: 'e002381ccc600ede34f2d024d9ff6afa992d497b', name: "heading" }), h("slot", { key: 'f03b77b304836ccfe8cf48b310ea79f6fbdebb61', name: "anchor-items" }), h("slot", { key: 'b73bae3565c07464938d138c31fe5a9f3156e1f4', name: "info-items" })));
     }
     static get style() { return contactInformationCss; }
 }, [257, "dso-contact-information"]);

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

@@ -1,6 +1,6 @@
 import { h, p as proxyCustomElement, H, e as createEvent, d as Host } from './p-Dm38fPV4.js';
 import { c as createIdentifier } from './p-DSyv-znO.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.js';
 
 const localization = {
     buttonLabel: "Kies datum",
@@ -713,14 +713,14 @@ const DsoDatePickerLegacy$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePick
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '0b1ec6d7508b3bd54868d792da349f56723c49f7' }, h("div", { key: '3760db6ad5de67e53d9b663f21d9fa7c19c0c47a', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f757525e60df0cd5566dba5c188cb9e6483f057d', class: "dso-date__input-wrapper" }, h("input", { key: 'c8ef8c3fb2524c1b996d0eedd5061b4c9b406738', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '0b43d6689f0e9a450b3f5ea98bb7e61739552847', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: 'fd6f7ae09f4f28fc80f5e59022080a4340cd57ff', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'd956ec013af3fa9969e159093bdc9e83da2040cd', icon: "calendar" })), h("span", { key: '5fb48f01acb482324f576afb50884dfc8bf8ac5c', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'a9e593f6baedfd379febefd8b3259433314b7a03' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '58475a8e3df7056be4486e40c566d8f589bfc4b9', class: {
+        return (h(Host, { key: '396b32409bc093895e3f35d18dba8bd7e6777f46' }, h("div", { key: 'd5a5787fcc7f6a5126a266ff5add00b7ff586cba', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '85fd7e86974ab53580fb452ac1f18bc12a907c6d', class: "dso-date__input-wrapper" }, h("input", { key: 'b4f2997aa317cdf00396ff49d6c0a5f72764d503', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'e2b34c1e6d804f6bf96aaea34daea995c59cbec5', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '578b0315ed115d28f7906d585914bc6dae2a40cc', class: "dso-date__toggle-icon" }, h("dso-icon", { key: '90488726ea142805085372ed273ef6a10691f85a', icon: "calendar" })), h("span", { key: '34d925fe5facf889afa518e64150121df6e0ade7', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '53471bfd4a6d8a3dd7a27582fadbf847f824f1dd' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '6a292ed13e8dfa5b972c8f1133238a535511cb8e', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'b9aaf2ee2e85356ebbb97c81ec6d2fc60d433aba', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: 'd5b24a9d0967a9389486c6d2d62c7df973092360', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a7fa892c6141fb05cd9d5e25941b58d3f33103d8', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '9ee19bb1e9323ded05446ea3f3e6a52817a32302', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '0b0f38cf720508e49a03b3336d22b484db8db0a9', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '55688d9e29a9d0e703cf9b05e064670f0eba97ae', icon: "times" }), h("span", { key: 'c851850368265c521ae301d7c9e0c753157d5739', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '0e768e06ffca70d595b49199cc43394f893f1936', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '650fce41916c3ddf60c5148d58300846cbc41bc2' }, h("h2", { key: '93e6938990982c205dbf34105dcfb7beeedfe5fb', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'e956e5066fbd5c56f33cdcacd9f4530a90bd1967', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'a4c988914df53fd0d0af4c808ee1094a72c15bdc', class: "dso-date__select" }, h("select", { key: 'ab5b9dd4f543d13278b4dd65edfae89c00339cc9', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'f8bb4ca24600a728f81e4247ef94641794ad84e3', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '1582c6e4e4d89c4339f791c43e3fc01e18f03989', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '3158d79a673e502aaa701fc41a2a15dd6ba5dc4b', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fcc075c9782196ec11a77f5d6aa703b8e48cea78', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'bee7a83296c5f1f3bfe498c0392f41bebb9fd27d', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '3f66fe3d47a25baea3d7c148b1f5bec301f2bc29', icon: "times" }), h("span", { key: 'c5d4618409573374228a7e4489cdbfe1c66fdd7c', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'd9ba961084fb524b7f94139ce2a9857e9f7e1b0d', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '37d0dbcc0d777aafd31866d81dd758372585e908' }, h("h2", { key: 'de0e154dc96dc4e5cb3bcd2e588201a6cc5c9259', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'cd0ffce7c78da9bf2d49bdca4d0394341608e249', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '48230fd3e09c932282bbb4990eda095cb95fce06', class: "dso-date__select" }, h("select", { key: 'f00134b32f100aefd5c61a4de98e221ed09137a2', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '55a1a117e095115fc80403ca836df2e69951f745', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd18823683d95dae481d4da151cd45637918c6e46' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '087bdd2d44ec99c7ded483fe930e166f91ccd0b4', icon: "chevron-down" }))), h("label", { key: 'f96ca586396432132d9482cbfac0a8896cf8c46d', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'ea7f1f0e42bf3344dab30e1a9aa9eff497ca11b5', class: "dso-date__select" }, h("select", { key: 'ab06d22ec2edd4b1d4828b47d4d495932ffd8e14', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '094f3bab580202d91c94658a5084812547c44017', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '1e4eabb3b6a4a546a79c43f91e18f8abffe9cf51' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'ecc4a276f2dd83053cb3759eda3a56bd4161f265', icon: "chevron-down" })))), h("div", { key: 'bbc9b3fad3a82919a006fd78befe7c88140ac97e', class: "dso-date__nav" }, h("button", { key: 'f8d45217ff383c4e140fc34e083fa163908510bb', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'f4a8cee55b8c3c8d5fa4db365e3a88137bc2ab3e', icon: "chevron-left" }), h("span", { key: '2f860a03cda77d7c9621906eb2ebb218635ef4cc', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '2222d594e39d8e7f39400777dc43a00d35f002a5', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '080cf2578b603e2c50e6bf4a50c3f1b4f9189db1', icon: "chevron-right" }), h("span", { key: 'b8388d0ccbd1a04a27737f6948d8bb6013b0322f', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'b9043d6761d0dbe9ce13ba0e4d26f646e0b2ffa5', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: 'a1670f7170408e13a577b9bb65ce222e02341af6', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'c0878373562b07a3c4860c766219da9289734fd3' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '64b610f732f03334432be7ccdc60fa634b83b5b1', icon: "chevron-down" }))), h("label", { key: 'bb21bbcb63a45b503d26f9c50fa0ab987a7d7081', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '9a2ecf4ed6c4396a15ccadd40f2c04d9bf60dcbc', class: "dso-date__select" }, h("select", { key: 'a1a935ba195eca516b0a94e129ed320c64dd43ef', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'b16f15541e3637b65b39dd0b8e871710e36e59bb', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '64a6a5a00cbcf3ee9268c478cf2c1ff2d40e0abe' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'c0744674bcbba803aeaeca6ac1d684a1e7d3894a', icon: "chevron-down" })))), h("div", { key: '433d90659d6521b41a8cccd7683fad3da0bd4b2a', class: "dso-date__nav" }, h("button", { key: 'b40b6fd0c99e18e9f033cf1d41127194404408a1', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'e658b36996f0d2e3d9c164f746b66220a75dcbbf', icon: "chevron-left" }), h("span", { key: '499a5213ff977b13bd36ff4e91d83730a13ab51d', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'dcd28b6b36bfbf16de2fe529e5dbf4e65920c66b', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '034b916fa47349e82bdf2a95c9dab465784f1499', icon: "chevron-right" }), h("span", { key: '184cef66312cdcea2a50d0dcc218a55963577398', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '254d598e4ed0ca17332abef195292828262712c7', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     get element() { return this; }
     static get style() { return datePickerLegacyCss; }

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

@@ -148,7 +148,7 @@ const DsoDatePicker$1 = /*@__PURE__*/ proxyCustomElement(class DsoDatePicker ext
     }
     render() {
         var _a;
-        return (h("input", { key: 'a3e6335fedd3f1934ae485f331130c4975a7c009', 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: 'f2fe8194c48bed2392736327c79db4420da4b14a', 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, e as createEvent, f as forceUpdate, h } from './p-Dm38fPV4.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.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=meta]){display:flex !important;justify-content:space-between !important;flex-shrink:0 !important;align-self:end !important}@media screen and (max-width: 480px){::slotted([slot=meta]){flex-basis:100% !important;margin-block-start:16px !important}}::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;overflow:hidden;clip:rect(0, 0, 0, 0);border: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}";
 
@@ -30,7 +30,7 @@ const DocumentCard = /*@__PURE__*/ proxyCustomElement(class DocumentCard extends
         return this.host.querySelector("[slot='meta']");
     }
     render() {
-        return (h("div", { key: 'a56e8db95294c83dfa5b558e47d72ee36c22c523', class: "dso-document-card-container" }, h("div", { key: '14fce780fceba683eb4e30cc6f060f7c7ff1dbce', class: "dso-document-card-heading" }, h("a", { key: '3423b19ac876cdd90135094d8d0b1430c4a53d0e', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '611617cd46d12105826465a46c3eb6ac41cb8dc4', class: "icon-container" }, h("dso-icon", { key: '84e9dc5793d9eb51b7748268df8c5b87cb27b24e', icon: "chevron-right" }), h("slot", { key: 'fdbb9ef5d508c67d7432e4aa6dd57d17f4bc730d', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '054d80082247a4eb97136f8e6d199229cb75edf6', name: "meta" })), h("div", { key: 'b7099c9ceaacf8691392fab1cfce9684b83babe2', class: "dso-document-card-type" }, h("slot", { key: '1e7a73fe9efa71d7362ae366ee1f4823b55720d6', name: "type" })), h("div", { key: '34309e92ede40ea37abfe3fc09d7e5270c56c7e9', class: "dso-document-card-status" }, h("slot", { key: 'c708100dfa943e139d3d17e5bd02dcffd02f185e', name: "status" }))));
+        return (h("div", { key: 'bbd724d0e936c3f7adb87aff14b8e30b85c7b0c9', class: "dso-document-card-container" }, h("div", { key: '4e8689ef58c31d4f490f105afe64b17c4f764cca', class: "dso-document-card-heading" }, h("a", { key: 'f8aa9dbc91f3307d6d7042599fab6d7d9ee110c7', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '35815a6a48d9ff6666197b0facbf30b4eef242cf', class: "icon-container" }, h("dso-icon", { key: '80a301e406813a4874aa64a565ef9cef7663a494', icon: "chevron-right" }), h("slot", { key: '79bb4598f8e89d9ac047347910c3e0dae3877fbf', name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '94090520fef0be8297eeb50848e67ef2b3440367', name: "meta" })), h("div", { key: '5499a344d6a3b3e486df41e789cc1eb20634cbd2', class: "dso-document-card-type" }, h("slot", { key: '0f535e6c5b5574e9844e5ccb6a3fcb0f4fb15770', name: "type" })), h("div", { key: 'da465fb5a9994e922a87954beebfc95b64b04d06', class: "dso-document-card-status" }, h("slot", { key: 'eac2432d9123f912c7d37270c570e6dc23ca147b', name: "status" }))));
     }
     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-CovD19j0.js';
+import { D as DocumentComponent, d as defineCustomElement$1 } from './p-CMO4UirQ.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-BgQ0LxOv.js';
+import { D as DropdownMenu, d as defineCustomElement$1 } from './p-oGRWyph0.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-DJptKNU4.js';
+import { E as Expandable, d as defineCustomElement$1 } from './p-C8fuhhYl.js';
 
 const DsoExpandable = Expandable;
 const defineCustomElement = defineCustomElement$1;

package/dist/bundle/dso-header.js

@@ -2,8 +2,8 @@ import { h, p as proxyCustomElement, H, e as createEvent, f as forceUpdate, d as
 import { c as clsx } from './p-ChV9xqsO.js';
 import { i as i18n } from './p-B_kXuEcW.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
-import { d as defineCustomElement$3 } from './p-BgQ0LxOv.js';
-import { d as defineCustomElement$2 } from './p-BTM2KYEF.js';
+import { d as defineCustomElement$3 } from './p-oGRWyph0.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.js';
 
 const translations = {
     en: {
@@ -159,7 +159,7 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'f72d9f1acbd5b8fd0ba398cf43cc22f1ee07c899', "is-compact": this.isCompact }, h("div", { key: '6c66bf734a3f88ffdc357b6dcdc6226b7c24f2cc', class: "dso-header" }, h("div", { key: '363201a9db9097cf5125b98881e4833015f17abf', class: "logo-container" }, h("slot", { key: 'f9668b6900acbb14140f626377c70a030b03c969', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'b507d3eb3598597f7722fca9a9163013e0294291', "is-compact": this.isCompact }, h("div", { key: 'fb47a63d706442a5b140388c5e330de5f95dc476', class: "dso-header" }, h("div", { key: 'b9351cbe605c7357af4da5d3682a87252c3f950e', class: "logo-container" }, h("slot", { key: '89aac2265810ea41b491483fccef79ee7eb22372', 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

@@ -11,7 +11,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'a17c902d2d0218ca9535995de35277932314703a', "has-counter": hasCounter }, hasCounter && h("div", { key: '51784bd453e91291a9b6f89f63a53860bd0015dd', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '48e88b38b2ea9e9b696db3830bb489ffcf129ff6', name: "icon" })), h("slot", { key: 'cd1d9e7ab981c5c155c624dc604a58b6b5a1ca65' })));
+        return (h(Host, { key: '92f1193d1be8513927d98a516266dc58bdf90595', "has-counter": hasCounter }, hasCounter && h("div", { key: '6f74f4dc98f935ca8ee0f95530a3679c94250c43', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'f9e0dd343429a6f8c55e693d987eeec1e2c28c1c', name: "icon" })), h("slot", { key: '867c1fcafd7864e0d631180e25a7c181a155a042' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss; }

package/dist/bundle/dso-history-item.d.ts

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

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

@@ -0,0 +1,79 @@
+import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, F as Fragment } from './p-Dm38fPV4.js';
+import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
+import { d as defineCustomElement$2 } from './p-Dwv_hVo9.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=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}";
+
+const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoClick = createEvent(this, "dsoClick", 3);
+        this.typeIcons = {
+            ontwerp: "pencil",
+            "in-werking": "document",
+            "tijdelijk-regelingdeel": "document",
+            waarschuwing: "status-warning-inline",
+            besluit: "hammer",
+        };
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof H) || !this.href) {
+            return;
+        }
+        return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    get titleSlottedElement() {
+        return this.host.querySelector("[slot='title']");
+    }
+    get explanationSlottedElement() {
+        return this.host.querySelector("[slot='explanation']");
+    }
+    get warningSlottedElement() {
+        return this.host.querySelector("[slot='warning']");
+    }
+    render() {
+        return (h(Fragment, { key: '03b2a5c27abfebab61b6099131114398a2c4fdbd' }, h("div", { key: '102a2efbeaf63257c2927aa77c5a7fe3057c39be', class: "history-item-date" }, h("slot", { key: '4cf89b9e55c8b015de363190ca0939db382a46a3', name: "date" })), h("div", { key: '119142bfa00ef20b76c7aae1604d171d47d92a2d', class: "history-item-content" }, h("div", { key: '7d251c14c4a31842b5c0628eebb4483a5d6a4ab1', class: "history-item-status-message" }, h("dso-icon", { key: '9f9057cc900cc54649ee6c1a4f7075c5ef853d93', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '813c6354f2b29d0a2605e74fde8b9e7ecb993a28', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '4b9e2a03c557ca302d745343276064503b16475b', class: "history-item-title" }, h("a", { key: '859217e78f2b0665bc58ddc12fc8a68634fe7fbe', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'b2c820d4ca1424ab2850f04fd7d6967395a62ddc', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: 'bb9acb8eac2cc3eae221a6ee9d5c93cccd8a9bfc', class: "history-item-explanation" }, h("slot", { key: 'a26746173f1c32cc3ef6a3d4a3517fbdaa4f58ae', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '244f130873fc0dd937e115fffdfb3fa3c2c56dad', class: "history-item-warning" }, h("dso-icon", { key: '22309670f01412115df0faa265201fbf44afd271', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '7dae3bbbad535d05726fd69d8830bfa9352846be', name: "warning" }))))));
+    }
+    get host() { return this; }
+    static get style() { return historyItemCss; }
+}, [257, "dso-history-item", {
+        "type": [513],
+        "href": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-history-item", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-history-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HistoryItem);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoHistoryItem = HistoryItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoHistoryItem, defineCustomElement };
+//# sourceMappingURL=dso-history-item.js.map
+
+//# sourceMappingURL=dso-history-item.js.map

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

@@ -0,0 +1 @@
+{"file":"dso-history-item.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/history-item/history-item.scss?tag=dso-history-item&encapsulation=shadow","src/components/history-item/history-item.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@use \"history-item.variables\" as history-item-variables;\r\n\r\n:host {\r\n  border-block-end: 1px solid colors.$grijs-10;\r\n  display: flex;\r\n  gap: units.$u1;\r\n  inline-size: 100%;\r\n  padding-block: units.$u2;\r\n\r\n  &:has(.history-item-title a:is(:hover, :focus-visible)) {\r\n    background-color: history-item-variables.$background-color-hover;\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([type=\"tijdelijk-regelingdeel\"]) {\r\n  .history-item-status-message {\r\n    color: history-item-variables.$tijdelijke-regeldingdeel-color;\r\n  }\r\n}\r\n\r\n:host([type=\"waarschuwing\"]) {\r\n  .history-item-status-message {\r\n    color: history-item-variables.$waarschuwing-color;\r\n  }\r\n}\r\n\r\n.history-item-date,\r\n.history-item-content {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.history-item-date {\r\n  flex: 0 0 90px;\r\n}\r\n\r\n.history-item-status-message,\r\n.history-item-warning {\r\n  display: flex;\r\n\r\n  dso-icon {\r\n    flex-shrink: 0;\r\n    margin-inline-end: units.$u1;\r\n  }\r\n}\r\n\r\n.history-item-warning {\r\n  color: history-item-variables.$waarschuwing-color;\r\n}\r\n\r\n.history-item-title,\r\n.history-item-explanation,\r\n.history-item-warning {\r\n  margin-block-start: units.$u1;\r\n  margin-inline-start: units.$u4;\r\n}\r\n\r\n.title-anchor {\r\n  color: history-item-variables.$title-anchor-color;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    color: history-item-variables.$title-anchor-color;\r\n    text-decoration: underline;\r\n  }\r\n\r\n  &:visited {\r\n    color: history-item-variables.$title-anchor-color;\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Prop,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HistoryItemClickEvent, HistoryItemType } from \"./history-item.interfaces\";\r\n\r\n/**\r\n * @slot date - The slot to place a string that holds a date in.\r\n * @slot status - The slot to place the status message in.\r\n * @slot title - An optional slot to place the title in. When used, the property `href` must be set.\r\n * @slot explanation - An optional slot to place explanation in.\r\n * @slot warning - An optional slot to place a warning in.\r\n */\r\n@Component({\r\n  tag: \"dso-history-item\",\r\n  styleUrl: \"history-item.scss\",\r\n  shadow: true,\r\n})\r\nexport class HistoryItem implements ComponentInterface {\r\n  private typeIcons: Record<HistoryItemType, string> = {\r\n    ontwerp: \"pencil\",\r\n    \"in-werking\": \"document\",\r\n    \"tijdelijk-regelingdeel\": \"document\",\r\n    waarschuwing: \"status-warning-inline\",\r\n    besluit: \"hammer\",\r\n  };\r\n\r\n  @Element()\r\n  host!: HTMLDsoHistoryItemElement;\r\n\r\n  /**\r\n   * The type of History Item\r\n   */\r\n  @Prop({ reflect: true })\r\n  type!: HistoryItemType;\r\n\r\n  /**\r\n   * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the History Item title is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<HistoryItemClickEvent>;\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 });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get titleSlottedElement() {\r\n    return this.host.querySelector(\"[slot='title']\");\r\n  }\r\n\r\n  get explanationSlottedElement() {\r\n    return this.host.querySelector(\"[slot='explanation']\");\r\n  }\r\n\r\n  get warningSlottedElement() {\r\n    return this.host.querySelector(\"[slot='warning']\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <div class=\"history-item-date\">\r\n          <slot name=\"date\"></slot>\r\n        </div>\r\n        <div class=\"history-item-content\">\r\n          <div class=\"history-item-status-message\">\r\n            <dso-icon icon={this.typeIcons[this.type]} aria-hidden=\"true\"></dso-icon>\r\n            <slot name=\"status\"></slot>\r\n          </div>\r\n          {this.titleSlottedElement !== null && this.href && (\r\n            <div class=\"history-item-title\">\r\n              <a href={this.href} class=\"title-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n                <slot name=\"title\"></slot>\r\n              </a>\r\n            </div>\r\n          )}\r\n          {this.explanationSlottedElement !== null && (\r\n            <div class=\"history-item-explanation\">\r\n              <slot name=\"explanation\"></slot>\r\n            </div>\r\n          )}\r\n          {this.warningSlottedElement !== null && (\r\n            <div class=\"history-item-warning\">\r\n              <dso-icon icon=\"status-warning-inline\" role=\"img\" aria-label=\"Waarschuwing\"></dso-icon>\r\n              <slot name=\"warning\"></slot>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-icon-button.d.ts

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

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

@@ -0,0 +1,9 @@
+import { I as IconButton, d as defineCustomElement$1 } from './p--HbwCvQM.js';
+
+const DsoIconButton = IconButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoIconButton, defineCustomElement };
+//# sourceMappingURL=dso-icon-button.js.map
+
+//# sourceMappingURL=dso-icon-button.js.map

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

@@ -0,0 +1 @@
+{"file":"dso-icon-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/bundle/dso-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './p-BTM2KYEF.js';
+import { I as Icon, d as defineCustomElement$1 } from './p-Dwv_hVo9.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-piO4yUd2.js';
+import { I as ImageOverlay, d as defineCustomElement$1 } from './p-DdLngpp0.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-DiF7pR4b.js';
+import { I as InfoButton, d as defineCustomElement$1 } from './p-DqxeHQ0G.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-ZJRJQtDU.js';
+import { I as Info, d as defineCustomElement$1 } from './p-CF3bHKY3.js';
 
 const DsoInfo = Info;
 const defineCustomElement = defineCustomElement$1;

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

@@ -17,13 +17,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: '7ac9735224c60c717a0ebff59e2f8c40623e2f34', id: "description", hidden: true }, this.description)), h("span", { key: 'fd65b63bda56de9516e6bef05781777b13cc8245', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8a0a67fff0a51267565ad447c572e4ba0d20009a', 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: '098b822ccb2f239856ca274aaec653cfe246b752', id: "description", hidden: true }, this.description)), h("span", { key: '622dc86272619d04bc0b3598e860710192d29978', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'af033e92eee7428ae9f574670da849edc5a9bcda', 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: '3d22eb9d281b35f52a0cdaa3565448375e1435c9', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'ef0e067089568fba4bf42f8a749944e49929781f', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss; }

package/dist/bundle/dso-label.js

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

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

@@ -1,12 +1,13 @@
 import { p as proxyCustomElement, H, e as createEvent, f as forceUpdate, h, d as Host } from './p-Dm38fPV4.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$6 } from './p-BTM2KYEF.js';
-import { d as defineCustomElement$5 } from './p-DiF7pR4b.js';
-import { d as defineCustomElement$4 } from './p-D_cMLm_E.js';
-import { d as defineCustomElement$3 } from './p-BkcOHFAA.js';
-import { d as defineCustomElement$2 } from './p-DZfdc557.js';
+import { d as defineCustomElement$7 } from './p-Dwv_hVo9.js';
+import { d as defineCustomElement$6 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$5 } from './p-DqxeHQ0G.js';
+import { d as defineCustomElement$4 } from './p-ZUzIHCVc.js';
+import { d as defineCustomElement$3 } from './p-BaN2YPhJ.js';
+import { d as defineCustomElement$2 } from './p-BOnELf-b.js';
 
-const legendItemCss = ":host {\n  display: block;\n  padding-block: 4px;\n  padding-inline: 4px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.legend-item {\n  display: flex;\n  position: relative;\n}\n.legend-item.legend-item-symbol + .options {\n  margin-block-start: 8px;\n}\n\n.legend-item-right-content {\n  margin-inline-start: auto;\n}\n.legend-item-right-content button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.legend-item-right-content button:focus, .legend-item-right-content button:focus-visible {\n  outline-offset: 2px;\n}\n.legend-item-right-content button:active {\n  outline: 0;\n}\n.legend-item-right-content button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.legend-item-right-content button[disabled] {\n  color: #afcf9d;\n}\n.legend-item-right-content button[disabled].dso-spinner-left, .legend-item-right-content button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.legend-item-right-content button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.legend-item-right-content button:not([disabled]):active {\n  color: #173521;\n}\n.legend-item-right-content button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.legend-item-right-content button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.legend-item-right-content button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.legend-item-right-content button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.legend-item-right-content button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.legend-item-right-content button {\n  cursor: pointer;\n}\n.legend-item-right-content button.active {\n  color: #173521;\n}\n.legend-item-right-content dso-slide-toggle {\n  align-self: center;\n  margin-inline-start: 8px;\n  padding-block-start: 0 !important;\n}";
+const legendItemCss = ":host{display:block;padding-block:4px;padding-inline: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}.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 LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
     constructor() {
@@ -40,7 +41,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends H {
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: '1d6ebd8e4e44def711159ff010ae953591685edc', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '868a7ed26078613600d7d17b924d9ea7a53ac2e0', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'f3aff3d785c632eb19a7c3a8ccb13e94806cf540' }, h("slot", { key: 'd06beb41e33003d99c9af7b7b5489dcb66d95444', name: "symbol" }))), h("div", { key: '62899aa2b2af8fb2d63d05930a9f037b88e86163' }, h("slot", { key: 'cc600cec4847cc747971829a9bec5e1abf05026e' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '0cce99e34253be6c1474a632fd99e1d010a6b991', position: "bottom" }, this.disabledMessage)), h("div", { key: 'e059795274ad6f453a67ea387d9a625664741e16', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("button", { key: '4912cff1ef7d48aeb7e552e0c99b72ecf174d9f0', id: "edit-button", type: "button", onClick: () => (this.showOptions = !this.showOptions), class: { active: this.showOptions } }, h("span", { key: '638b176ba12e1301acbc320eb12c47258706607d', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: 'aa285d1922ce4dd2b9f8b14f73b4c81a4fe8d1ff', icon: "more" }))), this.activatable && (h("dso-slide-toggle", { key: '87c752671a44f9edb700a18127248394b28ce5e3', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'af0b47ff57eb123ba06d0ff8836421f6c02d429b', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'b6b4e60ccaaa06a849be5f73fd2f2636a023a34e', name: "options" })))));
+        return (h(Host, { key: 'bb29c154cabdd5638eceb98f115f47ffdc849f19', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'fcc8adc7e164038c43702e6c894cb4c99a2fa87d', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd697b6969913b69eb382042d3c9872d7a055b3e2' }, h("slot", { key: '4b6a6ca641bdd2db1add8228012c26fb367252fd', name: "symbol" }))), h("div", { key: '4cb27d216c269153de29456506ed3283ec5b4ab3' }, h("slot", { key: '10daf3e2bef4dd1242823dff74451744cc602705' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '5e74c5da1011113459866077ae3f748fec94ef06', position: "bottom" }, this.disabledMessage)), h("div", { key: 'fae4cbfad614f554e081759fe7b437a7d4b96608', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '58f75ebffb71903c24498cf517970dfb960d9447', 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: '331c30242153ea9e87063b8a784406bc527b543a', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '7800987198ece6fb7127d576b1f2c92fa812d511', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '00faad1a8a92ea7d3f5ff32e770f16004cb13b37', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss; }
@@ -55,7 +56,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["dso-legend-item", "dso-icon", "dso-info-button", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
+    const components = ["dso-legend-item", "dso-icon", "dso-icon-button", "dso-info-button", "dso-slide-toggle", "dso-toggletip", "dso-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "dso-legend-item":
             if (!customElements.get(tagName)) {
@@ -63,6 +64,11 @@ function defineCustomElement$1() {
             }
             break;
         case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "dso-icon-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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/components/legend-item/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  padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\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\r\n.legend-item-right-content {\r\n  margin-inline-start: auto;\r\n\r\n  button {\r\n    @include button.tertiary($icon-only: true, $modifiers: false);\r\n\r\n    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n    & {\r\n      cursor: pointer;\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$bosgroen-140;\r\n    }\r\n  }\r\n\r\n  dso-slide-toggle {\r\n    align-self: center;\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 The label for this Legend Item\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 });\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    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 />\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            {hasOptions && !this.disabled && (\r\n              <button\r\n                id=\"edit-button\"\r\n                type=\"button\"\r\n                onClick={() => (this.showOptions = !this.showOptions)}\r\n                class={{ active: this.showOptions }}\r\n              >\r\n                <span class=\"sr-only\">Legenda item aanpassen</span>\r\n                <dso-icon icon=\"more\" />\r\n              </button>\r\n            )}\r\n            {this.activatable && (\r\n              <dso-slide-toggle\r\n                accessibleLabel=\"Maak actief\"\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  padding-inline: 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.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 The label for this Legend Item\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 });\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    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 />\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            {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=\"Maak actief\"\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}