@dso-toolkit/core 45.1.0 → 46.0.0

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 = "@media screen and (min-width: 481px){.alert{padding:19px 16px 19px 63px}}@media screen and (max-width: 480px){.alert{padding:63px 16px 16px}}: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}.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-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) {
     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"],
+  ["danger", "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;