@dso-toolkit/core 45.2.0 → 46.0.0

package/dist/cjs/clsx.m-b81c6b86.js

@@ -0,0 +1,5 @@
+'use strict';
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+exports.clsx = clsx;

package/dist/cjs/{create-identifier-fa070b11.js → create-identifier-6ee2a08b.js}

@@ -4,9 +4,7 @@
  * Form random hash
  */
 function chr4() {
-  return Math.random()
-    .toString(16)
-    .slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
 /**
  * Create random identifier with a prefix

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

@@ -2,14 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
+const index = require('./index-ecec64a0.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:1px solid transparent;border-top-width:0}: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),:host(.dso-accordion-compact) .dso-section-body{border:0;border-top:1px solid #ccc;padding-top:0}:host(.dso-accordion-compact):last-child{border-bottom:1px solid #ccc}:host(.dso-accordion-compact) .dso-section-body{margin-top:0;padding-bottom:12px}: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) {
     index.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;
   }
@@ -17,14 +23,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;
         index.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() {
@@ -41,40 +47,38 @@ 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 (index.h(index.Host, { class: {
-        'dso-accordion-section': true,
-        ['dso-accordion-' + variant]: true,
-        'dso-nested-accordion': this.hasNestedSection,
-      } }, index.h(Handle, { heading: this.heading }, index.h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, 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), index.h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' })))
-      : (index.h(index.Fragment, null, index.h("dso-icon", { icon: this.open ? 'chevron-up' : 'chevron-down' }), this.state && index.h("span", { class: "sr-only" }, stateMap[this.state]), index.h("span", null, this.handleTitle), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.status && index.h("span", { class: "dso-status" }, this.status), index.h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("div", { class: "dso-section-body", style: this.open ? {} : { display: 'none' } }, index.h("slot", null))));
+        "dso-accordion-section": true,
+        ["dso-accordion-" + variant]: true,
+        "dso-nested-accordion": this.hasNestedSection,
+      } }, index.h(Handle, { heading: this.heading }, index.h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, 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), index.h("dso-icon", { icon: this.open ? "chevron-up" : "chevron-down" }))) : (index.h(index.Fragment, null, index.h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), this.state && index.h("span", { class: "sr-only" }, stateMap[this.state]), index.h("span", null, this.handleTitle), hasAddons && (index.h("div", { class: "dso-section-handle-addons" }, this.status && index.h("span", { class: "dso-status" }, this.status), index.h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), index.h("div", { class: "dso-section-body", style: this.open ? {} : { display: "none" } }, index.h("slot", null))));
   }
   get host() { return index.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 index.h("h2", { class: "dso-section-handle" }, children);
-    case 'h3':
+    case "h3":
       return index.h("h3", { class: "dso-section-handle" }, children);
-    case 'h4':
+    case "h4":
       return index.h("h4", { class: "dso-section-handle" }, children);
-    case 'h5':
+    case "h5":
       return index.h("h5", { class: "dso-section-handle" }, children);
   }
 };
 const HandleElement = ({ handleUrl, onClick, open }, children) => {
   if (handleUrl) {
-    return (index.h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+    return (index.h("a", { href: handleUrl, onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
   }
-  return (index.h("button", { type: "button", onClick: onClick, "aria-expanded": open ? 'true' : 'false' }, children));
+  return (index.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 index.h(HandleStateIcon, { state: state });
   }
@@ -86,23 +90,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 (index.h("dso-icon", { icon: "status-danger" }));
+  if (state === "danger") {
+    return index.h("dso-icon", { icon: "status-danger" });
   }
-  if (state === 'success') {
-    return (index.h("dso-icon", { icon: "status-success" }));
+  if (state === "success") {
+    return index.h("dso-icon", { icon: "status-success" });
   }
-  if (state === 'info') {
-    return (index.h("dso-icon", { icon: "status-info" }));
+  if (state === "info") {
+    return index.h("dso-icon", { icon: "status-info" });
   }
-  if (state === 'warning') {
-    return (index.h("dso-icon", { icon: "status-warning" }));
+  if (state === "warning") {
+    return index.h("dso-icon", { icon: "status-warning" });
   }
 };
 AccordionSection.style = accordionSectionCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
+const index = require('./index-ecec64a0.js');
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);
@@ -197,33 +197,31 @@ const createStore = (defaultState, shouldUpdate) => {
 
 const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
 
-let Accordion = class {
+const Accordion = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dsoToggleSection = index.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() {
@@ -231,8 +229,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)) {
@@ -255,13 +253,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 (index.h(index.Host, { class: {
-        'dso-accordion': true
+        "dso-accordion": true,
       } }, index.h("slot", null)));
   }
   emitToggleEvent(sectionElement, sections, e) {
@@ -275,14 +273,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 index.getElement(this); }

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

@@ -2,28 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-ecec64a0.js');
+const clsx_m = require('./clsx.m-b81c6b86.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}";
 
-let Alert = class {
+const Alert = class {
   constructor(hostRef) {
     index.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 (index.h("div", { class: clsx_m.clsx('alert', `alert-${this.status}`), role: this.roleAlert ? 'alert' : undefined }, index.h("dso-icon", { icon: 'status-' + this.status }), index.h("span", { class: "sr-only" }, status, ":"), index.h("slot", null)));
+    return (index.h("div", { class: clsx_m.clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, index.h("dso-icon", { icon: "status-" + this.status }), index.h("span", { class: "sr-only" }, status, ":"), index.h("slot", null)));
   }
 };
 Alert.statusMap = new Map([
-  ['success', 'Gelukt'],
-  ['info', 'Opmerking'],
-  ['warning', 'Waarschuwing'],
-  ['danger', 'Fout']
+  ["success", "Gelukt"],
+  ["info", "Opmerking"],
+  ["warning", "Waarschuwing"],
+  ["danger", "Fout"],
 ]);
 Alert.style = alertCss;
 

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

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
+const index = require('./index-ecec64a0.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) {
     index.registerInstance(this, hostRef);
+    this.count = undefined;
   }
   render() {
-    return (index.h("span", { class: "dso-attachments" }, this.count, " ", index.h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? 'n' : ''), index.h("dso-icon", { icon: "paperclip" })));
+    return (index.h("span", { class: "dso-attachments" }, this.count, " ", index.h("span", { class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), index.h("dso-icon", { icon: "paperclip" })));
   }
 };
 AttachmentsCounter.style = attachmentsCounterCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
+const index = require('./index-ecec64a0.js');
 const index$1 = require('./index-794ad37a.js');
-const v4 = require('./v4-8e8d6fbc.js');
+const v4 = require('./v4-abb5dc0c.js');
 
 function escapeStringRegexp(string) {
 	if (typeof string !== 'string') {
@@ -20,37 +20,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) {
     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);
-    /**
-     * 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.v4();
     this.inputId = v4.v4();
     this.labelId = v4.v4();
@@ -63,14 +38,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) {
@@ -82,29 +57,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:
@@ -112,6 +87,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();
@@ -127,7 +112,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();
     }
   }
@@ -171,12 +156,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 index.h("mark", null, valuePart);
@@ -197,7 +182,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() {
@@ -206,7 +191,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() {
@@ -217,7 +202,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() {
@@ -228,24 +213,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();
     }
   }
@@ -266,23 +251,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 (index.h(index.Fragment, null, index.h("slot", null), this.loading && this.showLoading
-      ? index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))
-      : index.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) => (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("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type
-          ? (index.h("span", { class: "type" }, suggestion.type))
-          : undefined)))
-        : this.notFound
-          ? index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel
-            ? this.markTerms(`${this.inputValue} is niet gevonden.`, terms)
-            : index.h("span", null, this.notFoundLabel)))
-          : undefined)));
+    const terms = this.input.value.split(" ").filter((t) => t);
+    return (index.h(index.Fragment, null, index.h("slot", null), this.loading && this.showLoading ? (index.h("div", { class: "autosuggest-progress-box" }, index.h("dso-progress-indicator", { label: this.loadingLabel }))) : (index.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) => (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("span", { class: "value" }, this.markTerms(suggestion.value, terms)), suggestion.type ? index.h("span", { class: "type" }, suggestion.type) : undefined)))) : this.notFound ? (index.h("li", null, index.h("span", { class: "value" }, !this.notFoundLabel ? (this.markTerms(`${this.inputValue} is niet gevonden.`, terms)) : (index.h("span", null, this.notFoundLabel))))) : undefined))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-ecec64a0.js');
+const clsx_m = require('./clsx.m-b81c6b86.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) {
     index.registerInstance(this, hostRef);
+    this.status = undefined;
   }
   render() {
-    return (index.h("span", { class: clsx_m.clsx('dso-badge', { [`badge-${this.status}`]: this.status }) }, index.h("slot", null)));
+    return (index.h("span", { class: clsx_m.clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, index.h("slot", null)));
   }
 };
 Badge.style = badgeCss;

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

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4066351a.js');
-const clsx_m = require('./clsx.m-b00fa5e1.js');
+const index = require('./index-ecec64a0.js');
+const clsx_m = require('./clsx.m-b81c6b86.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) {
     index.registerInstance(this, hostRef);
+    this.status = undefined;
   }
   render() {
-    return (index.h("section", { class: clsx_m.clsx('dso-banner', `alert-${this.status}`), role: "alert" }, index.h("slot", null)));
+    return (index.h("section", { class: clsx_m.clsx("dso-banner", `alert-${this.status}`), role: "alert" }, index.h("slot", null)));
   }
 };
 Banner.style = bannerCss;