@dso-toolkit/core 45.2.0 → 47.0.0

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

@@ -1,11 +1,17 @@
-import { r as registerInstance, f as forceUpdate, h, F as Fragment, H as Host, a as getElement } from './index-771c1291.js';
+import { r as registerInstance, f as forceUpdate, h, F as Fragment, H as Host, a as getElement } from './index-1a4dda48.js';
 
-const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host(:not([open])) .dso-section-body{display:none}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px;padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#8b4a6a;border-radius:4px}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#d1b7c4}:host(.dso-accordion-compact) .dso-section-handle{border:1px solid transparent}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact),:host(.dso-accordion-compact) .dso-section-body{border:0;border-top:1px solid #ccc}:host(.dso-accordion-compact):last-child{border-bottom:1px solid #ccc}:host(.dso-accordion-compact)+dso-accordion-section{margin-top:0}:host(.dso-accordion-compact) .dso-section-body{margin-top:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5;color:#191919}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff;border:2px solid #f2f2f2}";
+const accordionSectionCss = "*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host .dso-section-handle{font-size:1em;font-weight:600;line-height:1.375em;margin:0;position:relative}:host .dso-section-handle>a:active{text-decoration:none}:host .dso-section-handle a{text-decoration:none}:host .dso-section-handle a:hover,:host .dso-section-handle a:focus{text-decoration:none}:host .dso-section-handle a:active{text-decoration:underline}:host .dso-section-handle .dso-status{font-weight:400;text-decoration:underline}:host .dso-section-handle>button,:host .dso-section-handle>a{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;font-family:Asap, sans-serif;font-size:1em;font-weight:600;line-height:1.375em;margin:0;padding:12px 16px 12px;text-align:start;width:100%;word-break:break-word}:host .dso-section-handle>button dso-icon,:host .dso-section-handle>a dso-icon{flex-shrink:0}:host .dso-section-handle>button>.dso-section-handle-addons:first-child,:host .dso-section-handle>button>dso-icon:first-child,:host .dso-section-handle>a>.dso-section-handle-addons:first-child,:host .dso-section-handle>a>dso-icon:first-child{margin-right:8px}:host .dso-section-handle>button>dso-icon:last-child,:host .dso-section-handle>a>dso-icon:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child,:host .dso-section-handle>a>.dso-section-handle-addons:last-child{margin-left:auto}:host .dso-section-handle>button>.dso-section-handle-addons:last-child dso-icon,:host .dso-section-handle>a>.dso-section-handle-addons:last-child dso-icon{margin-left:16px}:host(:not([open])) .dso-section-body{display:none}.dso-section-body{background-color:#fff;border-top:0;margin-top:-4px;padding:20px 16px 16px}:host(.dso-accordion-default) .dso-section-handle{background-color:#fff;border:1px solid #8b4a6a;border-radius:4px}:host(.dso-accordion-default) .dso-section-handle a,:host(.dso-accordion-default) .dso-section-handle button{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-handle a:hover,:host(.dso-accordion-default) .dso-section-handle a:active,:host(.dso-accordion-default) .dso-section-handle a.active,:host(.dso-accordion-default) .dso-section-handle button:hover,:host(.dso-accordion-default) .dso-section-handle button:active,:host(.dso-accordion-default) .dso-section-handle button.active{color:#8b4a6a}:host(.dso-accordion-default) .dso-section-body{border:1px solid #8b4a6a;border-radius:0 0 4px 4px}:host(.dso-accordion-default[open])>.dso-section-handle{background-color:#8b4a6a;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}:host(.dso-accordion-default[open])>.dso-section-handle a,:host(.dso-accordion-default[open])>.dso-section-handle button{color:#fff}:host(.dso-accordion-default[open])>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-default[open])>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#fff;--dso-icon:var(--di-paperclip-wit)}:host(.dso-accordion-default.dso-nested-accordion[open]) .dso-section-body{background-color:#e5e5e5}:host(.dso-accordion-compact) .dso-section-handle{border-bottom:1px solid transparent;border-top:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-handle a,:host(.dso-accordion-compact) .dso-section-handle button{color:#39870c;padding-bottom:11px;padding-left:0;padding-top:11px}:host(.dso-accordion-compact) .dso-section-handle a:hover,:host(.dso-accordion-compact) .dso-section-handle a:active,:host(.dso-accordion-compact) .dso-section-handle a.active,:host(.dso-accordion-compact) .dso-section-handle button:hover,:host(.dso-accordion-compact) .dso-section-handle button:active,:host(.dso-accordion-compact) .dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact) .dso-section-body{padding-left:32px;padding-top:0;padding-right:0}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle a,:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-handle button{padding-left:16px}:host(.dso-accordion-compact.dso-accordion-reverse-align) .dso-section-body{padding-left:16px;padding-right:0}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:transparent}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a.active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:hover,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button:active,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button.active{color:#39870c}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-compact[open]:not(.dso-nested-accordion))>.dso-section-body{border-top:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body{padding-bottom:0}:host(.dso-accordion-compact.dso-nested-accordion[open])>.dso-section-body dso-accordion-section:last-child{border-bottom:0}:host(.dso-accordion-conclusion) .dso-section-handle{background-color:#f2f2f2;border:1px solid #f2f2f2}:host(.dso-accordion-conclusion) .dso-section-handle a,:host(.dso-accordion-conclusion) .dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion) .dso-section-handle a:hover,:host(.dso-accordion-conclusion) .dso-section-handle a:active,:host(.dso-accordion-conclusion) .dso-section-handle a.active,:host(.dso-accordion-conclusion) .dso-section-handle button:hover,:host(.dso-accordion-conclusion) .dso-section-handle button:active,:host(.dso-accordion-conclusion) .dso-section-handle button.active{background-color:#e5e5e5;color:#191919}:host(.dso-accordion-conclusion) .dso-section-body{border:2px solid #f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle{background-color:#f2f2f2}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button{color:#191919}:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle a dso-attachments-counter,:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion))>.dso-section-handle button dso-attachments-counter{--dso-attachments-counter-color:#666;--dso-icon:var(--di-paperclip-grijs)}:host(.dso-accordion-conclusion.dso-nested-accordion[open]){background-color:#fff}";
 
-let AccordionSection = class {
+const AccordionSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.heading = 'h2';
+    this.handleTitle = undefined;
+    this.heading = "h2";
+    this.handleUrl = undefined;
+    this.state = undefined;
+    this.attachmentCount = undefined;
+    this.icon = undefined;
+    this.status = undefined;
     this.open = false;
     this.hasNestedSection = false;
   }
@@ -13,14 +19,14 @@ let AccordionSection = class {
     const accordion = this.host.parentElement;
     if (isAccordion(accordion)) {
       this.accordion = accordion;
-      accordion.getState().then(state => {
+      accordion.getState().then((state) => {
         this.accordionState = state;
         forceUpdate(this.host);
       });
     }
   }
   componentDidLoad() {
-    this.hasNestedSection = this.host.querySelector('dso-accordion') !== null;
+    this.hasNestedSection = this.host.querySelector("dso-accordion") !== null;
   }
   /** Toggle this section */
   async toggleSection() {
@@ -37,40 +43,39 @@ let AccordionSection = class {
       return;
     }
     const { variant, reverseAlign } = this.accordionState;
-    const hasAddons = this.status || this.state || this.icon || this.attachmentCount;
+    const hasAddons = !!this.status || !!this.state || !!this.icon || !!this.attachmentCount;
     return (h(Host, { class: {
-        'dso-accordion-section': true,
-        ['dso-accordion-' + variant]: true,
-        'dso-nested-accordion': this.hasNestedSection,
-      } }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign
-      ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' })))
-      : (h(Fragment, null, h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: "dso-section-body", style: this.open ? {} : { display: 'none' } }, h("slot", null))));
+        "dso-accordion-section": true,
+        ["dso-accordion-" + variant]: true,
+        "dso-nested-accordion": this.hasNestedSection,
+        "dso-accordion-reverse-align": this.accordionState.reverseAlign,
+      } }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { icon: this.open ? "chevron-up" : "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: "dso-section-body", style: this.open ? {} : { display: "none" } }, h("slot", null))));
   }
   get host() { return getElement(this); }
 };
 function isAccordion(element) {
-  return element instanceof HTMLElement && 'getState' in element;
+  return element instanceof HTMLElement && "getState" in element;
 }
 const Handle = ({ heading }, children) => {
   switch (heading) {
     default:
-    case 'h2':
+    case "h2":
       return h("h2", { class: "dso-section-handle" }, children);
-    case 'h3':
+    case "h3":
       return h("h3", { class: "dso-section-handle" }, children);
-    case 'h4':
+    case "h4":
       return h("h4", { class: "dso-section-handle" }, children);
-    case 'h5':
+    case "h5":
       return h("h5", { class: "dso-section-handle" }, children);
   }
 };
 const HandleElement = ({ handleUrl, onClick, open }, children) => {
   if (handleUrl) {
-    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+    return (h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
   }
-  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+  return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
 };
-const HandleIcon = ({ state, icon, attachmentCount }) => {
+const HandleIcon = ({ state, icon, attachmentCount, }) => {
   if (state) {
     return h(HandleStateIcon, { state: state });
   }
@@ -82,23 +87,23 @@ const HandleIcon = ({ state, icon, attachmentCount }) => {
   }
 };
 const stateMap = {
-  success: 'succes:',
-  info: 'info:',
-  warning: 'waarschuwing:',
-  danger: 'fout:'
+  success: "succes:",
+  info: "info:",
+  warning: "waarschuwing:",
+  danger: "fout:",
 };
 const HandleStateIcon = ({ state }) => {
-  if (state === 'danger') {
-    return (h("dso-icon", { icon: "status-danger" }));
+  if (state === "danger") {
+    return h("dso-icon", { icon: "status-danger" });
   }
-  if (state === 'success') {
-    return (h("dso-icon", { icon: "status-success" }));
+  if (state === "success") {
+    return h("dso-icon", { icon: "status-success" });
   }
-  if (state === 'info') {
-    return (h("dso-icon", { icon: "status-info" }));
+  if (state === "info") {
+    return h("dso-icon", { icon: "status-info" });
   }
-  if (state === 'warning') {
-    return (h("dso-icon", { icon: "status-warning" }));
+  if (state === "warning") {
+    return h("dso-icon", { icon: "status-warning" });
   }
 };
 AccordionSection.style = accordionSectionCss;

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

@@ -1,4 +1,4 @@
-import { g as getRenderingRef, f as forceUpdate, r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-771c1291.js';
+import { g as getRenderingRef, f as forceUpdate, r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-1a4dda48.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -193,33 +193,31 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
 
-let Accordion = class {
+const Accordion = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoToggleSection = createEvent(this, "dsoToggleSection", 7);
-    this.variant = 'default';
-    /** Places the chevron at the opposite side. Note: this mode does not display `state`, `attachmentCount` or `status` props on child `<dso-accordion-section>` elements */
+    this.variant = "default";
     this.reverseAlign = false;
-    /** Allows multiple sections to be open at the same time. */
     this.allowMultipleOpen = false;
     const { state } = createStore({
-      variant: this.variant || 'default',
+      variant: this.variant || "default",
       reverseAlign: this.reverseAlign,
     });
     this.accordionState = state;
   }
-  updateVariant(variant = 'default') {
-    this.accordionState.variant = variant || 'default';
+  updateVariant(variant = "default") {
+    this.accordionState.variant = variant || "default";
   }
   updateReverseAlign(reverseAlign) {
     this.accordionState.reverseAlign = reverseAlign;
   }
   watchAllowMultiple(allowMultipleOpen) {
     if (!allowMultipleOpen) {
-      const openSections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section[open]'));
+      const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
       // By removing the first section, it is kept open;
       openSections.shift();
-      openSections.forEach(section => this.controlOpenAttribute(section, false));
+      openSections.forEach((section) => this.controlOpenAttribute(section, false));
     }
   }
   async getState() {
@@ -227,8 +225,8 @@ let Accordion = class {
   }
   /** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section. */
   async toggleSection(sectionElement, event) {
-    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
-    if (typeof sectionElement === 'number') {
+    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
+    if (typeof sectionElement === "number") {
       sectionElement = sections[sectionElement];
     }
     if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
@@ -251,13 +249,13 @@ let Accordion = class {
   }
   /** Closes all sections belonging to this accordion. */
   async closeOpenSections() {
-    const sections = Array.from(this.host.querySelectorAll(':scope > dso-accordion-section'));
-    const openSections = sections.filter(s => this.isSectionOpen(s));
-    openSections.forEach(section => this.controlOpenAttribute(section, false));
+    const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
+    const openSections = sections.filter((s) => this.isSectionOpen(s));
+    openSections.forEach((section) => this.controlOpenAttribute(section, false));
   }
   render() {
     return (h(Host, { class: {
-        'dso-accordion': true
+        "dso-accordion": true,
       } }, h("slot", null)));
   }
   emitToggleEvent(sectionElement, sections, e) {
@@ -271,14 +269,14 @@ let Accordion = class {
     });
   }
   isSectionOpen(sectionElement) {
-    return typeof sectionElement.getAttribute('open') === 'string';
+    return typeof sectionElement.getAttribute("open") === "string";
   }
   controlOpenAttribute(sectionElement, setAttribute) {
     if (setAttribute) {
-      sectionElement.setAttribute('open', '');
+      sectionElement.setAttribute("open", "");
     }
     else {
-      sectionElement.removeAttribute('open');
+      sectionElement.removeAttribute("open");
     }
   }
   get host() { return getElement(this); }

package/dist/esm/dso-alert.entry.js

@@ -1,25 +1,27 @@
-import { r as registerInstance, h } from './index-771c1291.js';
-import { c as clsx } from './clsx.m-071989db.js';
+import { r as registerInstance, h } from './index-1a4dda48.js';
+import { c as clsx } from './clsx.m-25174a58.js';
 
-const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-danger{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
+const alertCss = ":host{display:block}:host(:not(:first-child)){margin-top:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{border:1px solid transparent;line-height:1.5;margin-bottom:24px;min-height:64px;position:relative}@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}.alert:not(:first-child){margin-top:24px}.alert.alert-success{color:#191919;background-color:#e4f1d4;border-color:#e4f1d4}.alert.alert-error{color:#191919;background-color:#f5d8dc;border-color:#f5d8dc}.alert.alert-warning{color:#191919;background-color:#f8f6cc;border-color:#f8f6cc}.alert.alert-info{color:#191919;background-color:#e1ecf7;border-color:#e1ecf7}.alert dso-icon{left:15px;position:absolute;top:15px;height:32px;width:32px}";
 
-let Alert = class {
+const Alert = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.status = undefined;
+    this.roleAlert = undefined;
   }
   render() {
     const status = Alert.statusMap.get(this.status);
     if (!status) {
       throw new Error(`Invalid status ${this.status}`);
     }
-    return (h("div", { class: clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, h("dso-icon", { icon: 'status-' + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
+    return (h("div", { class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { icon: "status-" + this.status }), h("span", { class: "sr-only" }, status, ":"), h("slot", null)));
   }
 };
 Alert.statusMap = new Map([
-  ['success', 'Gelukt'],
-  ['info', 'Opmerking'],
-  ['warning', 'Waarschuwing'],
-  ['danger', 'Fout']
+  ["success", "Gelukt"],
+  ["info", "Opmerking"],
+  ["warning", "Waarschuwing"],
+  ["error", "Fout"],
 ]);
 Alert.style = alertCss;
 

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

@@ -1,13 +1,14 @@
-import { r as registerInstance, h } from './index-771c1291.js';
+import { r as registerInstance, h } from './index-1a4dda48.js';
 
 const attachmentsCounterCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-attachments{color:var(--dso-attachments-counter-color, #666);display:inline-block;font-weight:400;text-decoration:none;white-space:nowrap}";
 
-let AttachmentsCounter = class {
+const AttachmentsCounter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.count = undefined;
   }
   render() {
-    return (h("span", { class: "dso-attachments" }, this.count, " ", h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : ''), h("dso-icon", { icon: "paperclip" })));
+    return (h("span", { class: "dso-attachments" }, this.count, " ", h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { icon: "paperclip" })));
   }
 };
 AttachmentsCounter.style = attachmentsCounterCss;

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-771c1291.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-1a4dda48.js';
 import { d as debounce_1 } from './index-f2bf58ce.js';
-import { v as v4 } from './v4-fa4bb814.js';
+import { v as v4 } from './v4-d398bde5.js';
 
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
@@ -16,37 +16,12 @@ function escapeStringRegexp(string) {
 
 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-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}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{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";
 
-let Autosuggest = class {
+const Autosuggest = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoSelect = createEvent(this, "dsoSelect", 7);
     this.dsoChange = createEvent(this, "dsoChange", 7);
     this.dsoSearch = createEvent(this, "dsoSearch", 7);
-    /**
-     * The suggestions for the value of the slotted input element. Optionally a
-     * Suggestion can have a `type` and `item`.
-     *
-     * The `type` is used to style the suggestion. `item` can be use to reference
-     * the original object that was used to create the suggestion.
-     *
-     * The value should be null when no suggestions have been fetched.
-     */
-    this.suggestions = null;
-    /**
-     * Shows progress indicator when fetching results.
-     */
-    this.loading = false;
-    /**
-     * To override progress indicator's default loading label.
-     */
-    this.loadingLabel = "Een moment geduld.";
-    /**
-     * Whether the previous suggestions will be presented when the input gets focus again.
-     */
-    this.suggestOnFocus = false;
-    this.showSuggestions = false;
-    this.notFound = false;
-    this.showLoading = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
@@ -59,14 +34,14 @@ let Autosuggest = class {
         this.showLoading = true;
       }
     }, this.loadingDelayed);
-    this.inputValue = '';
+    this.inputValue = "";
     this.onInput = (event) => {
       if (!(event.target instanceof HTMLInputElement)) {
         throw new Error("event.target is not instanceof HTMLInputElement");
       }
       this.showLoading = !this.loadingDelayed;
       this.inputValue = event.target.value;
-      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
+      this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
     };
     this.onFocusIn = () => {
       if (this.suggestOnFocus) {
@@ -78,29 +53,29 @@ let Autosuggest = class {
         return;
       }
       switch (event.key) {
-        case 'ArrowDown':
+        case "ArrowDown":
           if (!this.showSuggestions) {
-            this.openSuggestions('first');
+            this.openSuggestions("first");
           }
           else {
             this.selectNextSuggestion();
           }
           break;
-        case 'ArrowUp':
+        case "ArrowUp":
           if (!this.showSuggestions) {
-            this.openSuggestions('last');
+            this.openSuggestions("last");
           }
           else {
             this.selectPreviousSuggestion();
           }
           break;
-        case 'Tab':
+        case "Tab":
           this.closeSuggestions();
           return;
-        case 'Escape':
+        case "Escape":
           this.closeSuggestions();
           break;
-        case 'Enter':
+        case "Enter":
           this.pickSelectedValue();
           break;
         default:
@@ -108,6 +83,16 @@ let Autosuggest = class {
       }
       event.preventDefault();
     };
+    this.suggestions = null;
+    this.loading = false;
+    this.loadingLabel = "Een moment geduld.";
+    this.loadingDelayed = undefined;
+    this.notFoundLabel = undefined;
+    this.suggestOnFocus = false;
+    this.showSuggestions = false;
+    this.selectedSuggestion = undefined;
+    this.notFound = false;
+    this.showLoading = false;
   }
   suggestionsWatcher() {
     this.resetSelectedSuggestion();
@@ -123,7 +108,7 @@ let Autosuggest = class {
       this.listbox &&
       event.target instanceof Node &&
       !this.listbox.contains(event.target) &&
-      this.input != event.target) {
+      this.input !== event.target) {
       this.closeSuggestions();
     }
   }
@@ -167,12 +152,12 @@ let Autosuggest = class {
   }
   markTerms(suggestionValue, terms) {
     if (!suggestionValue || !terms || terms.length === 0) {
-      return [''];
+      return [""];
     }
-    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, 'gi');
+    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
     return suggestionValue.split(termRegex).map((valuePart) => {
       if (!valuePart) {
-        return '';
+        return "";
       }
       if (termRegex.test(valuePart)) {
         return h("mark", null, valuePart);
@@ -193,7 +178,7 @@ let Autosuggest = class {
     }
     this.selectedSuggestion = this.suggestions[0];
     if (this.selectedSuggestion) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectLastSuggestion() {
@@ -202,7 +187,7 @@ let Autosuggest = class {
     }
     this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
     if (this.selectedSuggestion) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectNextSuggestion() {
@@ -213,7 +198,7 @@ let Autosuggest = class {
     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) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   selectPreviousSuggestion() {
@@ -224,24 +209,24 @@ let Autosuggest = class {
     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];
     if (this.selectedSuggestion) {
-      this.input.setAttribute('aria-activedescendant', this.listboxItemId(this.selectedSuggestion));
+      this.input.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
     }
   }
   resetSelectedSuggestion() {
     this.showLoading = !this.loadingDelayed;
     this.notFound = false;
     this.selectedSuggestion = undefined;
-    this.input.setAttribute('aria-activedescendant', '');
+    this.input.setAttribute("aria-activedescendant", "");
   }
   openSuggestions(selectSuggestion) {
     var _a, _b, _c;
     this.showSuggestions = (_a = (this.suggestions && this.suggestions.length > 0)) !== null && _a !== void 0 ? _a : false;
     this.notFound = (_c = ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) === 0) !== null && _c !== void 0 ? _c : false;
     this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
-    if (this.showSuggestions && selectSuggestion === 'first') {
+    if (this.showSuggestions && selectSuggestion === "first") {
       this.selectFirstSuggestion();
     }
-    else if (this.showSuggestions && selectSuggestion === 'last') {
+    else if (this.showSuggestions && selectSuggestion === "last") {
       this.selectLastSuggestion();
     }
   }
@@ -262,23 +247,13 @@ let Autosuggest = class {
   }
   listboxItemId(suggestion) {
     if (!this.suggestions) {
-      return '';
+      return "";
     }
     return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
   }
   render() {
-    const terms = this.input.value.split(' ').filter(t => t);
-    return (h(Fragment, null, h("slot", null), this.loading && this.showLoading
-      ? h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))
-      : h("ul", { role: "listbox", 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) => (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 }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
-          ? (h("span", { class: "type" }, suggestion.type))
-          : undefined)))
-        : this.notFound
-          ? h("li", null, h("span", { class: "value" }, !this.notFoundLabel
-            ? this.markTerms(`${this.inputValue} is niet gevonden.`, terms)
-            : h("span", null, this.notFoundLabel)))
-          : undefined)));
+    const terms = this.input.value.split(" ").filter((t) => t);
+    return (h(Fragment, null, h("slot", null), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", 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) => (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 }, h("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type ? h("span", { class: "type" }, suggestion.type) : undefined)))) : this.notFound ? (h("li", null, h("span", { class: "value" }, !this.notFoundLabel ? (this.markTerms(`${this.inputValue} is niet gevonden.`, terms)) : (h("span", null, this.notFoundLabel))))) : undefined))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/dso-badge.entry.js

@@ -1,14 +1,15 @@
-import { r as registerInstance, h } from './index-771c1291.js';
-import { c as clsx } from './clsx.m-071989db.js';
+import { r as registerInstance, h } from './index-1a4dda48.js';
+import { c as clsx } from './clsx.m-25174a58.js';
 
 const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
 
-let Badge = class {
+const Badge = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.status = undefined;
   }
   render() {
-    return (h("span", { class: clsx('dso-badge', { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
+    return (h("span", { class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
   }
 };
 Badge.style = badgeCss;

package/dist/esm/dso-banner.entry.js

@@ -1,14 +1,15 @@
-import { r as registerInstance, h } from './index-771c1291.js';
-import { c as clsx } from './clsx.m-071989db.js';
+import { r as registerInstance, h } from './index-1a4dda48.js';
+import { c as clsx } from './clsx.m-25174a58.js';
 
 const bannerCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
 
-let Banner = class {
+const Banner = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.status = undefined;
   }
   render() {
-    return (h("section", { class: clsx('dso-banner', `alert-${this.status}`), role: "alert" }, h("slot", null)));
+    return (h("section", { class: clsx("dso-banner", `alert-${this.status}`), role: "alert" }, h("slot", null)));
   }
 };
 Banner.style = bannerCss;

package/dist/esm/dso-card-container.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, F as Fragment } from './index-1a4dda48.js';
+
+const cardContainerCss = ":host .dso-card-list{padding-left:0;list-style:none;border-bottom:1px solid #ccc;margin-top:-1px}:host .dso-card-grid{display:grid;gap:32px;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr}";
+
+const CardContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mode = "list";
+  }
+  render() {
+    return (h(Fragment, null, this.mode === "list" && (h("ul", { class: "dso-card-list" }, h("slot", null))), this.mode === "grid" && (h("div", { class: "dso-card-grid" }, h("slot", null)))));
+  }
+};
+CardContainer.style = cardContainerCss;
+
+export { CardContainer as dso_card_container };