@dso-toolkit/core 62.29.0 → 62.30.1

package/dist/cjs/dso-accordion-section.cjs.entry.js

@@ -170,12 +170,12 @@ const AccordionSection = class {
         var _a;
         const { variant, reverseAlign } = (_a = this.accordionState) !== null && _a !== void 0 ? _a : {};
         const hasAddons = !!this.statusDescription || !!this.status || !!this.icon || !!this.attachmentCount;
-        return (index.h(index.Host, { key: 'bb2ed90d426b9a5e64024f49286757f125eb1a84', class: {
+        return (index.h(index.Host, { key: '3133dd0868b0211136909091e056cfb54568482e', class: {
                 "dso-accordion-section": true,
                 ["dso-accordion-" + variant]: true,
                 "dso-nested-accordion": this.hasNestedAccordion || this.containsNestedAccordion,
                 "dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
-            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h(Handle, { key: 'dab26c8dc0994c6735a5c1dc718a520d580c7b53', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, index.h(HandleElement, { key: '95694c9be44d7c6cd9d7c0ad17f7fe234008f7dc', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), this.badgeMessage && index.h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && index.h("span", { class: "sr-only" }, stateMap[this.status]), index.h("span", null, this.handleTitle, this.isNeutral && (index.h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.badgeMessage && index.h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.statusDescription && index.h("span", { class: "dso-status" }, this.statusDescription), index.h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("dso-expandable", { key: '641a2a58e61b2b23c8bf8de4977d8b74e997cc6d', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, index.h("div", { key: '7e58a976e58482227bb39e6662933b0d5e2d45a0', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, index.h("slot", { key: '4bf440484e9e086430b3d7f4d55772b46d4b0e40' })))));
+            }, hidden: !variant, onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, index.h(Handle, { key: '54eb91544a496d8458693f30dac296ac93643437', heading: this.heading, ref: (element) => (this.sectionHeading = element) }, index.h(HandleElement, { key: '7d5d7221bba4f19532863ed1e87dd85e297b6101', handleUrl: this.handleUrl, onClick: this.handleClick, open: this.open, handleElementRef: (e) => (this.handleElementRef = e) }, reverseAlign ? (index.h(index.Fragment, null, hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, index.h(HandleIcon, { icon: this.icon }))), index.h("span", null, this.handleTitle), this.badgeMessage && index.h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.status && index.h("span", { class: "sr-only" }, stateMap[this.status]), index.h("span", null, this.handleTitle, this.isNeutral && (index.h("dso-icon", { class: "info-icon", icon: this.open || this.hover ? "info-active" : "info" }))), this.badgeMessage && index.h("dso-badge", { status: this.badgeStatus }, this.badgeMessage), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.statusDescription && index.h("span", { class: "dso-status" }, this.statusDescription), index.h(HandleIcon, { state: this.status, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("dso-expandable", { key: '77b23a787bfa12a62b10793207ccfe002fdf75c4', class: "dso-section-body", open: this.open, enableAnimation: true, minimumHeight: this.isNeutral ? 0 : 4, onDsoExpandableAnimationStart: this.handleExpandableAnimationStart, onDsoExpandableAnimationEnd: this.handleExpandableAnimationEnd }, index.h("div", { key: 'dbf0bdeabdd88dc27ccd1c840c5629ce96b7d1f6', class: "dso-section-body-content", ref: (element) => (this.sectionBody = element) }, index.h("slot", { key: '1c3bed92ff7ff6c910c311007a0126aed85660d7' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-accordion.cjs.entry.js

@@ -223,7 +223,7 @@ const Accordion = class {
         this.accordionState = state;
     }
     render() {
-        return (index.h(index.Host, { key: 'ff5ce15d5c8f250a00fd32179023c5640fcdaa60', class: "dso-accordion" }, index.h("slot", { key: '4d8471b5d095ccfb38184cba1c1dab7f958638aa' })));
+        return (index.h(index.Host, { key: 'b15aa4c4b93922e2416f82ce24cadf8e7116d70b', class: "dso-accordion" }, index.h("slot", { key: '84f62dd6f77fc6418278aed71d9f42eefecbe42c' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/dso-action-list-item.cjs.entry.js

@@ -17,10 +17,10 @@ const ActionListItem = class {
         this.divider = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e8990e05c76ad77722c3077377a14b8595359cf1', class: {
+        return (index.h(index.Host, { key: '0e0564d96c59c2c5eeaca5e6ee45ed971f03de8f', class: {
                 divider: this.divider,
                 "flow-line": this.flowLine,
-            } }, index.h("div", { key: 'f1f9bc9160d015bec044d56f6f9d4bdc8cfcb6c0', class: "dso-action-list-item" }, this.warning ? index.h("dso-icon", { icon: "status-warning" }) : index.h("div", { class: "dso-step-counter" }, this.step), index.h("div", { key: '4fccf3d1ae0fc47154ee934ed6e5fb067b5ff059', class: "action-list-item-content" }, this.itemTitle && index.h("h3", { key: '284707c09c1452c332353c2ac04f519ccc8fc409' }, this.itemTitle), index.h("slot", { key: 'd90f788cdbde8734a8130731808a2cb04495faa2' })))));
+            } }, index.h("div", { key: 'c79d2842dbc69454dfa625840742257cf13ede2a', class: "dso-action-list-item" }, this.warning ? index.h("dso-icon", { icon: "status-warning" }) : index.h("div", { class: "dso-step-counter" }, this.step), index.h("div", { key: '857ebcbc0287c99b59c83a7582d5ac535f0323f2', class: "action-list-item-content" }, this.itemTitle && index.h("h3", { key: '14631efd1e202ae014e835e4d624a6ecadcc3650' }, this.itemTitle), index.h("slot", { key: 'bc16fb1dd0f7f02b0a594756790eb95076e09950' })))));
     }
 };
 ActionListItem.style = DsoActionListItemStyle0;

package/dist/cjs/dso-action-list.cjs.entry.js

@@ -13,7 +13,7 @@ const ActionList = class {
         this.listTitle = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'ccfbfad51860c767b58f0d1c5f8c41beac645353' }, index.h("h2", { key: 'dee9b4b9b262637e1c4a944df6f26ec984d6d4ae' }, this.listTitle), index.h("div", { key: '2d725e445a201bf47ccb837e4251aae65bfc0ba2', class: "dso-action-list-content" }, index.h("slot", { key: '9947aab99743404054b4c5f678da57813462f9e0' }))));
+        return (index.h(index.Host, { key: '92c5b4fb4d10541ded9dc45da37e20d67fbf3361' }, index.h("h2", { key: 'd4cffb771949ce42047c5f7539820a91697bcbe8' }, this.listTitle), index.h("div", { key: '2e90dd6b0f73447fbac79f604d35007e7b70bdcb', class: "dso-action-list-content" }, index.h("slot", { key: '8a1f73818b59e8d863be019eb47b47c45b25b94b' }))));
     }
 };
 ActionList.style = DsoActionListStyle0;

package/dist/cjs/dso-advanced-select.cjs.entry.js

@@ -70,7 +70,7 @@ const AdvancedSelect = class {
     }
     handleTab(direction) {
         var _a;
-        const elements = index_esm.tabbable(this.host, { getShadowRoot: true });
+        const elements = this.host.isConnected ? index_esm.tabbable(this.host, { getShadowRoot: true }) : [];
         const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
         let nextIndex = currentIndex + direction;
         if (nextIndex >= elements.length) {
@@ -83,12 +83,12 @@ const AdvancedSelect = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Fragment, null, index.h("button", { key: '2ce96f0601a2389cb6c5b6ef2c498e47df3281bf', "aria-expanded": this.open.toString(), class: clsx.clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, index.h(ActiveGroupLabel, { key: 'db69d2251bcc1ba4eb321a0dc438ef6da78e51d1', active: this.active, options: this.options }), index.h("span", { key: 'c409b29582ae28c06435b1b847ded96678dfb83a', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), index.h("span", { key: '4f6bb9f7a0a4b5b2ef5903ca9b06500c5160e3d2', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: '6318ffbdab47a2c2af54b63559afab11a455fce1', class: "badges" }, this.options
+        return (index.h(index.Fragment, null, index.h("button", { key: '863c76d960af3d1c91e2920f9e7640acf1fcb8de', "aria-expanded": this.open.toString(), class: clsx.clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, index.h(ActiveGroupLabel, { key: '0165cc3fc03367aedda4e9a6e49ed76818bc9d7c', active: this.active, options: this.options }), index.h("span", { key: '624790ab9fefdfff15247e6e0964afa22580b8da', class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), index.h("span", { key: '1ecb6f4ed7ebea267fa0cf99b649c7ff4ae480d8', class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (index.h("span", { key: 'dbc4278fd89412fb098d9e7c360a2f4ac58cafd6', class: "badges" }, this.options
             .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
             .map((group) => {
             var _a;
             return (index.h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length));
-        }))), index.h("dso-icon", { key: 'd318272d7fbd4a517d2833528164cc3e6212cce6', icon: "caret-down" }))), this.open && (index.h("div", { key: '5fd58e337194ea6a8c2744577d6ee8099289fe40', class: "groups-container" }, index.h("ul", { key: 'da2b62d8bca19b31cb60eeaa5c420efaa0e066b3', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (index.h("li", { class: clsx.clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("ul", { class: "options" }, optionOrGroup.options.map((option) => (index.h("li", null, index.h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+        }))), index.h("dso-icon", { key: '892afcf018935d842562288b5219902044bf0b3f', icon: "caret-down" }))), this.open && (index.h("div", { key: '81651c248319f8fa5281d30cb90ff228d2b6c8cd', class: "groups-container" }, index.h("ul", { key: '9776c7284681eee6ad5128c4558872db7eda894a', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (index.h("li", { class: clsx.clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("ul", { class: "options" }, optionOrGroup.options.map((option) => (index.h("li", null, index.h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
             ("placeholder" in optionOrGroup && (index.h("li", { class: "group" }, index.h("p", { class: "group-label" }, optionOrGroup.label), index.h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (index.h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (index.h("li", null, index.h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))));
     }
     get host() { return index.getElement(this); }

package/dist/cjs/dso-advanced-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = tabbable(this.host, { getShadowRoot: true });\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"version":3}
+{"file":"dso-advanced-select.entry.cjs.js","mappings":"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","names":["isModifiedEvent","createFocusTrap","tabbable","h","clsx"],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n  display: flex;\r\n  inline-size: 100%;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  padding: 0;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: advanced-select.$border-radius;\r\n  cursor: pointer;\r\n  background-color: advanced-select.$bg-color;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n\r\n  &.open {\r\n    border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$icon-color;\r\n  }\r\n\r\n  dso-label {\r\n    margin-inline-start: advanced-select.$inline-padding * 0.5;\r\n  }\r\n}\r\n\r\n.active-option-label {\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  overflow: hidden;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  white-space: nowrap;\r\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: advanced-select.$inline-padding * 0.5;\r\n  padding-block: 0;\r\n  padding-inline: advanced-select.$inline-padding * 0.5;\r\n  margin-inline-start: auto;\r\n}\r\n\r\n.badges {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: advanced-select.$block-padding;\r\n}\r\n\r\n.groups-container {\r\n  position: relative;\r\n}\r\n\r\n.groups {\r\n  position: absolute;\r\n  inset-block-start: -1px;\r\n  inset-inline-start: 0;\r\n  inline-size: 100%;\r\n  max-block-size: 500px;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow-y: auto;\r\n  background-color: advanced-select.$bg-color;\r\n  border: 1px solid advanced-select.$border-color;\r\n  border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n  li {\r\n    &::marker {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.group {\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n\r\n  &:last-child {\r\n    border-block-end: none;\r\n  }\r\n\r\n  .option {\r\n    padding-inline-start: advanced-select.$inline-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n  }\r\n\r\n  .option-label::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    block-size: advanced-select.$option-dot-size;\r\n    inline-size: advanced-select.$option-dot-size;\r\n    inset-block: advanced-select.$block-padding auto;\r\n    inset-inline: -#{advanced-select.$option-dot-size * 2} auto;\r\n    border-radius: 50%;\r\n    @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n  }\r\n}\r\n\r\n.group-label {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$group-label-color;\r\n  font-size: advanced-select.$group-label-font-size;\r\n  font-weight: advanced-select.$group-label-font-weight;\r\n  border-block-end: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n  display: block;\r\n  padding-block: advanced-select.$group-link-block-padding;\r\n  padding-inline: advanced-select.$group-link-inline-padding;\r\n  text-align: end;\r\n  color: advanced-select.$group-link-color;\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    text-decoration: underline;\r\n  }\r\n\r\n  dso-icon {\r\n    color: advanced-select.$redirect-icon-color;\r\n  }\r\n}\r\n\r\n.group-info .option-label::before {\r\n  @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n  @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n  @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n  @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n  @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n  @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n  @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.option {\r\n  display: block;\r\n  inline-size: 100%;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  cursor: pointer;\r\n  line-height: inherit;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  border: none;\r\n  text-align: start;\r\n  background-color: advanced-select.$bg-color;\r\n\r\n  &:hover {\r\n    background-color: advanced-select.$option-hover-bg-color;\r\n\r\n    .option-label {\r\n      color: advanced-select.$option-hover-color;\r\n      font-weight: advanced-select.$option-hover-font-weight;\r\n    }\r\n  }\r\n}\r\n\r\n.option.option-active .option-label {\r\n  color: advanced-select.$option-active-color;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n  text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n  position: relative;\r\n  color: advanced-select.$option-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n  padding-inline-start: 5px;\r\n  color: advanced-select.$option-active-color;\r\n  font-size: advanced-select.$option-font-size;\r\n  font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n\r\n.placeholder {\r\n  margin: 0;\r\n  padding-block: advanced-select.$block-padding * 2;\r\n  padding-inline: advanced-select.$inline-padding;\r\n  color: advanced-select.$option-placeholder-color;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Prop,\r\n  h,\r\n  FunctionalComponent,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  State,\r\n  Fragment,\r\n  Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n  AdvancedSelectGroup,\r\n  AdvancedSelectGroupRedirect,\r\n  AdvancedSelectOption,\r\n  AdvancedSelectChangeEvent,\r\n  AdvancedSelectOptionOrGroup,\r\n  AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.interfaces\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n  tag: \"dso-advanced-select\",\r\n  styleUrl: \"advanced-select.scss\",\r\n  shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAdvancedSelectElement;\r\n\r\n  /**\r\n   * The options to display in the select.\r\n   */\r\n  @Prop()\r\n  options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n  /**\r\n   * The active option. By object reference.\r\n   */\r\n  @Prop()\r\n  active?: AdvancedSelectOption<never>;\r\n\r\n  /**\r\n   * An extra text for the active option. Only visible in the list of options.\r\n   */\r\n  @Prop()\r\n  activeHint?: string;\r\n\r\n  /**\r\n   * The open state of the options list.\r\n   */\r\n  @State()\r\n  open: boolean = false;\r\n\r\n  /**\r\n   * Emitted when user selects an option\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n  /**\r\n   * Emitted when user activates a group redirect link.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n  private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n  @Listen(\"keydown\", { target: \"window\" })\r\n  keyDownListener(event: KeyboardEvent) {\r\n    if (this.open && event.key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      this.handleTab(-1);\r\n    } else if (this.open && event.key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      this.handleTab(1);\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.open && !this.trap) {\r\n      this.createTrap();\r\n    } else if (!this.open && this.trap) {\r\n      this.removeTrap();\r\n    }\r\n  }\r\n\r\n  private toggleOpen = () => {\r\n    this.open = !this.open;\r\n  };\r\n\r\n  private createTrap() {\r\n    this.trap = createFocusTrap(this.host, {\r\n      clickOutsideDeactivates: true,\r\n      escapeDeactivates: true,\r\n      setReturnFocus: this.toggleButtonElementRef,\r\n      tabbableOptions: {\r\n        getShadowRoot: true,\r\n      },\r\n      onDeactivate: () => {\r\n        this.open = false;\r\n      },\r\n    }).activate();\r\n  }\r\n\r\n  private removeTrap() {\r\n    this.trap?.deactivate();\r\n    delete this.trap;\r\n  }\r\n\r\n  private handleTab(direction: number) {\r\n    const elements = this.host.isConnected ? tabbable(this.host, { getShadowRoot: true }) : [];\r\n    const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= elements.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = elements.length - 1;\r\n    }\r\n\r\n    elements[nextIndex]?.focus();\r\n  }\r\n\r\n  private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n    this.dsoChange.emit({ originalEvent: event, option });\r\n    this.open = false;\r\n  };\r\n\r\n  private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n    this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n    this.open = false;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          aria-expanded={this.open.toString()}\r\n          class={clsx([\"active-option\", { open: this.open }])}\r\n          type=\"button\"\r\n          onClick={this.toggleOpen}\r\n          ref={(element) => (this.toggleButtonElementRef = element)}\r\n        >\r\n          <ActiveGroupLabel active={this.active} options={this.options} />\r\n          <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n          <span class=\"active-option-aside\">\r\n            {this.options.some(\r\n              (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n            ) && (\r\n              <span class=\"badges\">\r\n                {this.options\r\n                  .filter(\r\n                    (option): option is AdvancedSelectGroup<never> =>\r\n                      \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n                  )\r\n                  .map((group) => (\r\n                    <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>\r\n                  ))}\r\n              </span>\r\n            )}\r\n            <dso-icon icon=\"caret-down\"></dso-icon>\r\n          </span>\r\n        </button>\r\n        {this.open && (\r\n          <div class=\"groups-container\">\r\n            <ul class=\"groups\">\r\n              {this.options.map(\r\n                (optionOrGroup) =>\r\n                  (\"options\" in optionOrGroup && (\r\n                    <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <ul class=\"options\">\r\n                        {optionOrGroup.options.map((option) => (\r\n                          <li>\r\n                            <OptionButton\r\n                              option={option}\r\n                              active={this.active}\r\n                              activeHint={this.activeHint}\r\n                              callback={this.handleOptionClick}\r\n                            />\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) ||\r\n                  (\"placeholder\" in optionOrGroup && (\r\n                    <li class=\"group\">\r\n                      <p class=\"group-label\">{optionOrGroup.label}</p>\r\n                      <p class=\"placeholder\">{optionOrGroup.placeholder}</p>\r\n                      {optionOrGroup.redirect && (\r\n                        <RedirectAnchor\r\n                          redirect={optionOrGroup.redirect}\r\n                          callback={this.handleRedirectClick}\r\n                        ></RedirectAnchor>\r\n                      )}\r\n                    </li>\r\n                  )) || (\r\n                    <li>\r\n                      <OptionButton\r\n                        option={optionOrGroup}\r\n                        active={this.active}\r\n                        activeHint={this.activeHint}\r\n                        callback={this.handleOptionClick}\r\n                      />\r\n                    </li>\r\n                  ),\r\n              )}\r\n            </ul>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\ninterface OptionButtonProps {\r\n  option: AdvancedSelectOption<never>;\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  activeHint: string | undefined;\r\n  callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}\r\n\r\nconst OptionButton: FunctionalComponent<OptionButtonProps> = ({ option, active, activeHint, callback }) => (\r\n  <button\r\n    class={clsx([\"option\", { \"option-active\": active === option }])}\r\n    type=\"button\"\r\n    onClick={(e) => callback(e, option)}\r\n  >\r\n    <span class=\"option-label\">{option.label}</span>\r\n    {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n  </button>\r\n);\r\n\r\ninterface RedirectAnchorProps {\r\n  redirect: AdvancedSelectGroupRedirect;\r\n  callback: (event: MouseEvent, value: AdvancedSelectGroupRedirect) => void;\r\n}\r\n\r\nconst RedirectAnchor: FunctionalComponent<RedirectAnchorProps> = ({ redirect, callback }) => (\r\n  <a class=\"group-link\" href={redirect.href} onClick={(e) => callback(e, redirect)}>\r\n    {redirect.label}\r\n    <dso-icon icon=\"chevron-right\"></dso-icon>\r\n  </a>\r\n);\r\n\r\ninterface ActiveGroupLabelProps {\r\n  active: AdvancedSelectOption<never> | undefined;\r\n  options: AdvancedSelectOptionOrGroup<never>[];\r\n}\r\n\r\nconst ActiveGroupLabel: FunctionalComponent<ActiveGroupLabelProps> = ({ active, options }) => {\r\n  const group = options.find(\r\n    (optionOrGroup): optionOrGroup is AdvancedSelectGroup<never> =>\r\n      \"options\" in optionOrGroup &&\r\n      !!optionOrGroup.options.find((option) => option === active) &&\r\n      !!optionOrGroup.activeLabel,\r\n  );\r\n\r\n  return group ? (\r\n    <dso-label compact status={group.variant}>\r\n      {group.activeLabel}\r\n    </dso-label>\r\n  ) : undefined;\r\n};\r\n"],"version":3}

package/dist/cjs/dso-alert_5.cjs.entry.js

@@ -25,7 +25,7 @@ const Alert = class {
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (index.h("div", { key: '417e26be9e6ff6536cc8c2afb9ce0122f44ecdde', class: clsx.clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && index.h("dso-icon", { key: 'bfa8f41e437b89708eba82ba1a9607cc6fb006a8', icon: "status-" + this.status }), index.h("span", { key: '1ed463e8789085f4dce8e2ce47540f3e171760b3', class: "sr-only" }, status, ":"), index.h("slot", { key: '9892c04178c20fafea1969feb551fc4917e1b915' })));
+        return (index.h("div", { key: 'cc815a0d71226a31d8777d7beef98641d5a0917d', class: clsx.clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && index.h("dso-icon", { key: 'bbf3ef40e0471b4dbf5539c06db8a671791167b1', icon: "status-" + this.status }), index.h("span", { key: '984e9f9bc25c68a13575fac2dc60966ab3bc0045', class: "sr-only" }, status, ":"), index.h("slot", { key: '70464b29837954e3fea18be9f6f8c2fc83bbd05b' })));
     }
 };
 Alert.statusMap = new Map([
@@ -1230,7 +1230,7 @@ const OzonContent = class {
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return index.h(index.Fragment, { key: 'cc00ca0c2a2ecb40fbe0fb9e09d6e5049b880d3e' }, transformed);
+        return index.h(index.Fragment, { key: '56c934de3771646d5583784675fbfcce735c8700' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]
@@ -1270,7 +1270,7 @@ const Table = class {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (index.h(index.Host, { key: '4057ccfde401b1e848b74b0a0ee2c6d6d4565b52' }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '26ab1cbdce34326b96d68a9fd0f00f4da1e05bfc', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { key: '54f22fdfc951d729ddf9dbfcb4d0888edc6af119', class: "dso-modal-overlay" }), index.h("div", { key: '57d76fbc464e1b018bcbe14bd33fadc56764f336', class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ key: '9a844d1245264529083ba743e909e9fc190104af', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (index.h("div", { key: 'd55b3419578bfee62bff8fa8c73ae7b258b772df', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { key: 'a366be082c62b388d5132a1a7869224f56e9d152', class: "dso-responsive-message" }, index.h("span", { key: 'cbf4ea36702f5409a29a41baf7f1048f73b4148b' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { key: 'a3cfdff47cd835d99780d055ba1360d0ab90905f', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { key: '806663ca1732232c687e12d8a8137a4eab21510c', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", { key: 'e8e7445859a023a0ff0e605af3b0238448fb0e6f' }, "vergroten"), index.h("dso-icon", { key: '37ee911721ae3ae7d81c18b5593d23abdee3b85d', icon: "external-link" }))))), this.modalActive && (index.h("div", { key: 'ce6093f7803f5e150d856b3777075d4fcfaaedda', class: "dso-header" }, index.h("h2", { key: 'f279c806e70ae2656c6b832b882493b0779b098a', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { key: 'e6333850a6d4a4705766c0ac2de78a18b0a13764', type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { key: '83bdf29d4b9a3c03d4a660b194b6054d1afa8fcd', icon: "times" }), index.h("span", { key: 'cb67ab8d9ba5000cd7826c7a7a86fe73fea8bc0f', class: "sr-only" }, "Sluiten")))), index.h("div", { key: '86b19f9e0ae08778cdc8646ebb0789c2d3098a0e', class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", { key: '42722e025f59fe38b332da34b4b4e53e6b4e3aaf' }))))));
+        return (index.h(index.Host, { key: '6934c29baf1a2a52622121a47cbaa457a110bcaa' }, this.modalActive && this.placeholderHeight && (index.h("div", { key: '95bc90f0f6c26bcbed4877b3ffb008ed38a39033', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && index.h("div", { key: 'f6b9c387003cfd31cbfd409a2c5e852f70f83c05', class: "dso-modal-overlay" }), index.h("div", { key: 'f5b6d711e7969d2f595afaa6b60c384fd9156e68', class: { "dso-modal": this.modalActive } }, index.h("div", Object.assign({ key: '7ed9575bf767603ec9542997fb79314e2ad3f62a', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (index.h("div", { key: '99ca7885db803ecacdd2c293e6027556af138ee9', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (index.h("div", { key: 'bad69741f0bafffa859ff245f7c3cca8012363ac', class: "dso-responsive-message" }, index.h("span", { key: 'fe3869eb853a024b2fc7d1fef1412ab7c6ed7783' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (index.h("button", { key: '5f6e9850584490a0b33188869133d1d0043ecd0b', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, index.h("span", { key: 'f322b245c215ca3212b19fc1a7adcf18f176c16d', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), index.h("span", { key: '9fb2df6a3abe878b4cd84e4dcebd08c4ea2a83da' }, "vergroten"), index.h("dso-icon", { key: 'fa709f8ad9cefbb0a7384b2bb5feece07a9ae851', icon: "external-link" }))))), this.modalActive && (index.h("div", { key: '6c86b4a24fec9edbd8cab2eb226c9d1c77e117fd', class: "dso-header" }, index.h("h2", { key: '311cd0f1a29d23f1918f7554df67b5348af863a6', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), index.h("button", { key: '21e51c50991d349e53e2fe57eaf584c519243478', type: "button", class: "dso-close", onClick: () => this.closeModal() }, index.h("dso-icon", { key: 'ae2154d5bd3360b39835aaedc4a18e6da9e54ee0', icon: "times" }), index.h("span", { key: '5c78d4923438cb45f7172b00a19fe5474313ac88', class: "sr-only" }, "Sluiten")))), index.h("div", { key: 'f43b2140da2c87e015702bbdd219e08ed8962225', class: { "dso-body": this.modalActive, "dso-table-body": true } }, index.h("slot", { key: 'fce1f821c3cbe2460e5375895d03ce3a7033ad56' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/cjs/dso-annotation-activiteit.cjs.entry.js

@@ -30,7 +30,7 @@ const AnnotationActiviteit = class {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (index.h(annotationBody.AnnotationBody, { key: '0e09fda2e18c4f6e4e38c85983df8b6862438f8d', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h("dso-renvooi", { value: this.naam }), data: index.h(index.Fragment, null, index.h("span", { class: "content" }, this.regelKwalificatie && (index.h(index.Fragment, null, index.h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, index.h("dso-renvooi", { value: this.locatieNoemers })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
+        return (index.h(annotationBody.AnnotationBody, { key: 'd25e92e8a7cb6cc5cf82ec481c577010ca9df899', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h("dso-renvooi", { value: this.naam }), data: index.h(index.Fragment, null, index.h("span", { class: "content" }, this.regelKwalificatie && (index.h(index.Fragment, null, index.h("dso-renvooi", { value: this.regelKwalificatie }), " ")), this.regelKwalificatieVoorzetsel && `${this.regelKwalificatieVoorzetsel}: `, index.h("dso-renvooi", { value: this.locatieNoemers })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-annotation-gebiedsaanwijzing.cjs.entry.js

@@ -27,7 +27,7 @@ const AnnotationGebiedsaanwijzing = class {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (index.h(annotationBody.AnnotationBody, { key: 'df0a142bc8a66479c7d862826c3703a94fd6dc56', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("span", { class: "content" }, index.h("dso-renvooi", { value: this.naam })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
+        return (index.h(annotationBody.AnnotationBody, { key: 'cc38cb93af4db4adff035757c39c344da545af4b', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("span", { class: "content" }, index.h("dso-renvooi", { value: this.naam })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-annotation-kaart.cjs.entry.js

@@ -29,7 +29,7 @@ const AnnotationKaart = class {
     }
     render() {
         const title = this.href ? (index.h("a", { class: "content", href: this.href, onClick: this.clickHandler }, index.h("dso-renvooi", { value: this.naam }))) : (index.h("span", { class: "content" }, index.h("dso-renvooi", { value: this.naam })));
-        return index.h(annotationBody.AnnotationBody, { key: 'ab0b552617589567f200d17e6adf4c443a2a4360', symbol: index.h("dso-icon", { icon: "land" }), title: title });
+        return index.h(annotationBody.AnnotationBody, { key: 'a6d42398082063958d1608220fc82967c27fc667', symbol: index.h("dso-icon", { icon: "land" }), title: title });
     }
 };
 AnnotationKaart.style = DsoAnnotationKaartStyle0;

package/dist/cjs/dso-annotation-locatie.cjs.entry.js

@@ -27,7 +27,7 @@ const AnnotationLocatie = class {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (index.h(annotationBody.AnnotationBody, { key: '64abc624caa8522b900aa75c75c343426fc00744', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("span", { class: "content" }, index.h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
+        return (index.h(annotationBody.AnnotationBody, { key: '0190bf857c4bbbb4fba151b59701ddf9d6397f18', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("span", { class: "content" }, index.h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-annotation-omgevingsnormwaarde.cjs.entry.js

@@ -30,7 +30,7 @@ const AnnotationOmgevingsnormwaarde = class {
     }
     render() {
         const hasSymbool = this.watcher.hasSymbool();
-        return (index.h(annotationBody.AnnotationBody, { key: '589438437962438402ead40af6bea35ebd72d602', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("dso-renvooi", { value: this.naam }), this.eenheid && (index.h(index.Fragment, null, " ", "(in ", index.h("dso-renvooi", { value: this.eenheid }), ")"))), data: index.h(index.Fragment, null, index.h("span", { class: "content" }, this.toelichting && index.h(index.Fragment, null, this.toelichting, ": "), index.h("dso-renvooi", { value: this.waardes })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
+        return (index.h(annotationBody.AnnotationBody, { key: '4ff358aca2214ac15d9a2b8a38b8bdbab861646d', symbol: hasSymbool ? index.h(annotationSymbolSlot.AnnotationSymbolSlot, null) : undefined, active: this.active || false, dsoActiveChange: this.dsoActiveChange, title: index.h(index.Fragment, null, index.h("dso-renvooi", { value: this.naam }), this.eenheid && (index.h(index.Fragment, null, " ", "(in ", index.h("dso-renvooi", { value: this.eenheid }), ")"))), data: index.h(index.Fragment, null, index.h("span", { class: "content" }, this.toelichting && index.h(index.Fragment, null, this.toelichting, ": "), index.h("dso-renvooi", { value: this.waardes })), this.gewijzigdeLocatie && index.h(annotationSymbolSlot.AnnotationGewijzigdeLocatie, null)) }));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-annotation-output_2.cjs.entry.js

@@ -128,7 +128,7 @@ const DocumentComponent = class {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (index.h(index.Host, { key: '63102638c909c58603a123183e2489f25e3ad423', "not-collapsible": !collapsible }, showHeading && (index.h("div", { key: 'ecabb72de6fde2d2908e7d137a31409d1387fdbb', class: "heading-container", part: "_heading-container" }, this.wijzigactie && index.h("span", { key: '4e2a0529032e98e03a05ccaa9ba56ebc2f5fd91b', class: "editaction-label" }, this.wijzigactieLabel, ":"), index.h("div", { key: '8cd91b7f3faab4f45709773754b442f51ddded8c', class: "heading" }, index.h(Heading, { key: 'bac64c70e569a009894b9dc4dbc86e993469bea0', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (index.h("button", { key: '729401d461291f30fa571d7073e6eed93fdf31c9', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, index.h("dso-icon", { key: '517cb743324726da53036f96c025f995c2e6253d', icon: this.open ? "chevron-down" : "chevron-right" }), index.h("span", { key: 'f4eaee860a64d5a7493a238aa7345e34db039f8b', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), index.h("div", { key: '35196a7d98b3618d9c8aae8844c38609dd1c1855', id: "heading-title" }, this.notApplicable && index.h("span", { key: '35f3ce86102ff10ba9bea0439b630fcbfca8b568', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (index.h(index.Fragment, null, this.label && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && index.h("span", { key: '94f7abf9d6e5f7de6fcba59f4525feff00e584eb' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (index.h("button", { key: 'f4bf9b4462a209e1b91a347b4b972405ec0f4266', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, index.h("dso-icon", { key: 'dc4ad4b147b33eb946de0e09a84b767c0daa9878', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (index.h(index.Fragment, null, index.h("dso-badge", { key: 'd170c7a32f13feac1d6cf5a2dcefacda4761905c', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), index.h("dso-tooltip", { key: 'c1172b60ca185ea8c3df906c388e2480a886a10a', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (index.h("div", { key: 'd1f96f8943f3856070abfd423e5e409f28c873c2', class: "addons" }, this.bevatOntwerpInformatie && (index.h("dso-label", { key: 'd158dc033a2f146a19fc413ca5a85b69a5332d09', status: "warning", compact: true }, "Ontwerp")), this.annotated && (index.h("dso-annotation-button", { key: 'd3c2048e413e013f70674b1de1c48c5010dd19f1', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), index.h("div", { key: '0412d56009861b74d7ece8df02851f7156ca5182', class: "annotation-container", part: "_annotation-container" }, index.h("slot", { key: 'ef083f232dd643c9728d623ca761834d82d28aa3', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (index.h("div", { key: 'c194dfe7bc12a29dc58b954ad9e37ca404eff57e', class: "content", part: "_content" }, this.gereserveerd && (index.h("dso-alert", { key: '00de952c5e5ac72d2a57dd256dbe636cb4a8c017', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && index.h("dso-alert", { key: 'f416e20ac837d8d9536ea6f847b3bca3fe603a4c', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (index.h("dso-ozon-content", { key: '3ccfcb88de6f11bb47117e976bf7ff46914be139', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), index.h("div", { key: 'f8c2445816a735a4a3c6a99ccb1eb92d32370db8', class: "children-container", part: "_children-container" }, index.h("slot", { key: '34c8a8c1d9411097a0d87368e6173c2a69414ecc' }))));
+        return (index.h(index.Host, { key: 'b58d5638cdc2baa27b29ab24b1d056c5b831edef', "not-collapsible": !collapsible }, showHeading && (index.h("div", { key: '4a03f1690f88b499e75f0aaa5e08e7e6b670bb04', class: "heading-container", part: "_heading-container" }, this.wijzigactie && index.h("span", { key: '42ad3650002d46638a15c86e2d73147db1f87329', class: "editaction-label" }, this.wijzigactieLabel, ":"), index.h("div", { key: '2c51b6455745fe9de599ac0981c995941cf82b7f', class: "heading" }, index.h(Heading, { key: '5c4dccc3126facc699918efec646b6830c520926', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (index.h("button", { key: '20137bc7f81bbbf106ca57ee18a195f187a404f1', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, index.h("dso-icon", { key: '3fa4d8ea6284129167c6c8af758f8c4df814c4b4', icon: this.open ? "chevron-down" : "chevron-right" }), index.h("span", { key: '6b31c222a7b6ea0130b240f97db3a9a5e838ae9b', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), index.h("div", { key: 'c8b58b97973c9cfa4512e3f3ba8cffe3256631dc', id: "heading-title" }, this.notApplicable && index.h("span", { key: '1b7b144db61cb4de89ee6db908fb8c019fce35d1', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (index.h(index.Fragment, null, this.label && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (index.h(index.Fragment, null, " ", index.h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && index.h("span", { key: '3145d4a9770106d5905c201843b761da01197704' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (index.h("button", { key: '3da46a302becf7fc053a12ccf40f851da302ac35', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, index.h("dso-icon", { key: '956fd191d436e9ca3db63cdd2a6758525ff53c40', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (index.h(index.Fragment, null, index.h("dso-badge", { key: 'ea3322cda942a520c762d9cf47b78ef2d0de93bc', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), index.h("dso-tooltip", { key: '2b5a389fd8df54aebcffbe5d563804040bdf8303', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (index.h("div", { key: 'da9d4ab3c25909f5e520fba0d9cca12850cf2f11', class: "addons" }, this.bevatOntwerpInformatie && (index.h("dso-label", { key: '82463b4e03bf223d46724ee4a1b738c22069c1e3', status: "warning", compact: true }, "Ontwerp")), this.annotated && (index.h("dso-annotation-button", { key: '7d7dbb4b16e80e77665aa298e30a0f56c29905c1', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), index.h("div", { key: '1c2b3eb723fd7a0f6a9d164b1f5a399d140ee734', class: "annotation-container", part: "_annotation-container" }, index.h("slot", { key: '5fa1feea2f662e9b5151373adbc500af9a9ea6c7', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (index.h("div", { key: 'afa20ac5589ab1b7a00ede6289254da8c69c473a', class: "content", part: "_content" }, this.gereserveerd && (index.h("dso-alert", { key: '1d635014deadaae35ad913666091fccb4aef1f74', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && index.h("dso-alert", { key: '8fbb2f351a6f224a43014585e3c4931483e5db17', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (index.h("dso-ozon-content", { key: '5e02fe6a60b43b9c49d8f29e4cdd5a81a27120ee', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), index.h("div", { key: '9dff5e697a06d8a03eaeb7abfdad6ea0c56d6932', class: "children-container", part: "_children-container" }, index.h("slot", { key: '6cd5072f0781c17b3376159b5358ffca2e153cbd' }))));
     }
 };
 DocumentComponent.style = DsoDocumentComponentStyle0;

package/dist/cjs/dso-attachments-counter.cjs.entry.js

@@ -13,7 +13,7 @@ const AttachmentsCounter = class {
         this.count = undefined;
     }
     render() {
-        return (index.h("span", { key: '6c3e26ea68c2dc819ea9322ee98238ca159fca6e', class: "dso-attachments" }, this.count, " ", index.h("span", { key: 'e9df7eff3fc69047df9d4a132774022ca731afa4', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), index.h("dso-icon", { key: '0bbad9b1793a77960800759d9409c472b3b51596', icon: "paperclip" })));
+        return (index.h("span", { key: '02905e5d45afa01c0e427181af881ac17fa5e433', class: "dso-attachments" }, this.count, " ", index.h("span", { key: 'a6d8fc7f088f3d7b9512e27292d890cf5198ece6', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), index.h("dso-icon", { key: 'bcf3895d516ec5ef28526d4da53c07f1f5bba66a', icon: "paperclip" })));
     }
 };
 AttachmentsCounter.style = DsoAttachmentsCounterStyle0;

package/dist/cjs/dso-autosuggest.cjs.entry.js

@@ -18,18 +18,23 @@ function escapeStringRegexp(string) {
 		.replace(/-/g, '\\x2d');
 }
 
-const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block-start:2px;padding-block:4px;padding-inline:0;position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}ul.sc-dso-autosuggest{padding-block:8px;padding-inline:0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}";
+const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}.listbox-container.sc-dso-autosuggest{inset-inline:0;inset-block-start:100%;block-size:auto;max-block-size:var(--max-block-size);min-block-size:48px;overflow-y:auto;position:absolute;z-index:200}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-block:0}.autosuggest-progress-box.sc-dso-autosuggest{padding-block:12px;padding-inline:8px}ul.sc-dso-autosuggest{padding-block:8px;padding-inline:0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding-block:4px;padding-inline:16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}";
 const DsoAutosuggestStyle0 = autosuggestCss;
 
+const maxSuggestionsViewable = 10;
+const listboxPaddingBlock = 8;
+const listboxBorderWidth = 1;
 const Autosuggest = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoSelect = index.createEvent(this, "dsoSelect", 7);
         this.dsoChange = index.createEvent(this, "dsoChange", 7);
         this.dsoSearch = index.createEvent(this, "dsoSearch", 7);
+        this.listboxItems = [];
         this.listboxId = v4.v4();
         this.inputId = v4.v4();
         this.labelId = v4.v4();
+        this.resizeObserver = new ResizeObserver(index$1.debounce(() => this.setListboxContainerMaxBlockSize(), 150));
         this.debouncedEmitValue = index$1.debounce((value) => {
             this.dsoChange.emit(value);
             this.debouncedShowLoading();
@@ -54,6 +59,8 @@ const Autosuggest = class {
                 this.openSuggestions();
             }
         };
+        this.onWindowResize = index$1.debounce(() => this.setListboxContainerMaxBlockSize(), 150);
+        this.onScrollend = () => this.setListboxContainerMaxBlockSize();
         this.onKeyDown = (event) => {
             if (event.defaultPrevented || this.loading) {
                 return;
@@ -100,6 +107,8 @@ const Autosuggest = class {
         this.selectedSuggestion = undefined;
         this.notFound = false;
         this.showLoading = false;
+        this.listItemBlockSize = 0;
+        this.listboxContainerMaxBlockSize = 0;
     }
     suggestionsWatcher() {
         this.resetSelectedSuggestion();
@@ -119,6 +128,9 @@ const Autosuggest = class {
             this.closeSuggestions();
         }
     }
+    componentDidRender() {
+        this.setListboxContainerMaxBlockSize();
+    }
     connectedCallback() {
         setTimeout(() => {
             const input = this.host.querySelector('input[type="text"]');
@@ -154,6 +166,10 @@ const Autosuggest = class {
             this.input.addEventListener("input", this.onInput);
             this.input.addEventListener("keydown", this.onKeyDown);
             this.input.addEventListener("focusin", this.onFocusIn);
+            window.addEventListener("resize", this.onWindowResize);
+            document.addEventListener("scrollend", this.onScrollend);
+            this.resizeObserver.observe(this.host);
+            this.setListboxContainerMaxBlockSize();
         });
     }
     disconnectedCallback() {
@@ -161,6 +177,27 @@ const Autosuggest = class {
         (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput);
         (_b = this.input) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.onKeyDown);
         (_c = this.input) === null || _c === void 0 ? void 0 : _c.removeEventListener("focusin", this.onFocusIn);
+        window.removeEventListener("resize", this.onWindowResize);
+        document.removeEventListener("scrollend", this.onScrollend);
+        this.resizeObserver.disconnect();
+    }
+    setListboxContainerMaxBlockSize() {
+        if (!this.listboxContainer || !this.showSuggestions) {
+            return;
+        }
+        if (this.listboxItems[0] && this.showSuggestions) {
+            this.listItemBlockSize = this.listboxItems[0].getBoundingClientRect().height;
+        }
+        const availableBlockSize = window.innerHeight - this.host.getBoundingClientRect().bottom;
+        const listboxMaxBlockSize = this.listItemBlockSize * maxSuggestionsViewable + 2 * listboxPaddingBlock + 2 * listboxBorderWidth;
+        if (availableBlockSize > this.listItemBlockSize) {
+            if (availableBlockSize < listboxMaxBlockSize) {
+                this.listboxContainerMaxBlockSize = availableBlockSize - 2 * listboxPaddingBlock;
+            }
+            else {
+                this.listboxContainerMaxBlockSize = listboxMaxBlockSize;
+            }
+        }
     }
     showInputValueNotFound(text) {
         var _a, _b;
@@ -206,50 +243,49 @@ const Autosuggest = class {
         });
     }
     selectSuggestion(suggestion) {
-        var _a;
         this.selectedSuggestion = suggestion;
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
+        this.setAriaActiveDescendant();
     }
     selectFirstSuggestion() {
-        var _a;
         if (!this.suggestions) {
             return;
         }
         this.selectedSuggestion = this.suggestions[0];
-        if (this.selectedSuggestion) {
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
-        }
+        this.setAriaActiveDescendant(true);
     }
     selectLastSuggestion() {
-        var _a;
         if (!this.suggestions) {
             return;
         }
         this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
-        if (this.selectedSuggestion) {
-            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
-        }
+        this.setAriaActiveDescendant(true);
     }
     selectNextSuggestion() {
-        var _a, _b;
+        var _a;
         if (!this.suggestions) {
             return;
         }
         const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
         this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
-        if (this.selectedSuggestion) {
-            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
-        }
+        this.setAriaActiveDescendant(true);
     }
     selectPreviousSuggestion() {
-        var _a, _b;
+        var _a;
         if (!this.suggestions) {
             return;
         }
         const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
         this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+        this.setAriaActiveDescendant(true);
+    }
+    setAriaActiveDescendant(scroll = false) {
+        var _a, _b;
         if (this.selectedSuggestion) {
-            (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+            const id = this.listboxItemId(this.selectedSuggestion);
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", id);
+            if (scroll) {
+                (_b = document.getElementById(id)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: "nearest" });
+            }
         }
     }
     resetSelectedSuggestion() {
@@ -306,11 +342,12 @@ const Autosuggest = class {
         }, []);
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("slot", { key: 'ef4290b35d4c82e2ab0aa297cd58098562484bbb' }), this.loading && this.showLoading ? (index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))) : (index.h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
+        this.listboxItems = [];
+        return (index.h(index.Fragment, null, index.h("slot", { key: '1c54ee8c0e3ecea23a23f4acfc641179908f630f' }), this.loading && this.showLoading ? (index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))) : (index.h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), style: { "--max-block-size": `${this.listboxContainerMaxBlockSize}px` } }, index.h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
             this.suggestions &&
-            this.suggestions.map((suggestion) => (index.h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, index.h("div", { class: "suggestion-row" }, index.h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (index.h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
+            this.suggestions.map((suggestion) => (index.h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value, ref: (li) => li && this.listboxItems.push(li) }, index.h("div", { class: "suggestion-row" }, index.h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (index.h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
                 this.getChunkedExtras(suggestion.extras).map((chunk, index$1) => (index.h("div", { class: "suggestion-row" }, chunk.map((c, i) => (index.h("span", { class: "extra" }, this.handleMark(suggestion, c, "extra", index$1 * 2 + i))))))))))) ||
-            (this.notFound && (index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel ? (this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)) : (index.h("span", null, this.notFoundLabel))))))))));
+            (this.notFound && (index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel ? (this.showInputValueNotFound(`${this.inputValue} is niet gevonden.`)) : (index.h("span", null, this.notFoundLabel)))))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {