@dso-toolkit/core 47.0.0 → 48.0.0

package/dist/components/dso-accordion.d.ts

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

package/dist/components/dso-accordion.js

@@ -0,0 +1,316 @@
+import { getRenderingRef, forceUpdate, proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2000);
+const stencilSubscription = () => {
+    if (typeof getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        var _a;
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoToggleSection = createEvent(this, "dsoToggleSection", 7);
+    this.variant = "default";
+    this.reverseAlign = false;
+    this.allowMultipleOpen = false;
+    const { state } = createStore({
+      variant: this.variant || "default",
+      reverseAlign: this.reverseAlign,
+    });
+    this.accordionState = state;
+  }
+  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]"));
+      // By removing the first section, it is kept open;
+      openSections.shift();
+      openSections.forEach((section) => this.controlOpenAttribute(section, false));
+    }
+  }
+  async getState() {
+    return this.accordionState;
+  }
+  /** 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") {
+      sectionElement = sections[sectionElement];
+    }
+    if (!(sectionElement instanceof HTMLElement) || !sections.includes(sectionElement)) {
+      return;
+    }
+    const sectionIsOpen = this.isSectionOpen(sectionElement);
+    if (this.allowMultipleOpen) {
+      this.controlOpenAttribute(sectionElement, !sectionIsOpen);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    if (sectionIsOpen) {
+      this.controlOpenAttribute(sectionElement, false);
+      this.emitToggleEvent(sectionElement, sections, event);
+      return;
+    }
+    await this.closeOpenSections();
+    this.controlOpenAttribute(sectionElement, true);
+    this.emitToggleEvent(sectionElement, sections, event);
+  }
+  /** 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));
+  }
+  render() {
+    return (h(Host, { class: {
+        "dso-accordion": true,
+      } }, h("slot", null)));
+  }
+  emitToggleEvent(sectionElement, sections, e) {
+    this.dsoToggleSection.emit({
+      originalEvent: e,
+      section: {
+        element: sectionElement,
+        open: this.isSectionOpen(sectionElement),
+      },
+      sections,
+    });
+  }
+  isSectionOpen(sectionElement) {
+    return typeof sectionElement.getAttribute("open") === "string";
+  }
+  controlOpenAttribute(sectionElement, setAttribute) {
+    if (setAttribute) {
+      sectionElement.setAttribute("open", "");
+    }
+    else {
+      sectionElement.removeAttribute("open");
+    }
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "variant": ["updateVariant"],
+    "reverseAlign": ["updateReverseAlign"],
+    "allowMultipleOpen": ["watchAllowMultiple"]
+  }; }
+  static get style() { return accordionCss; }
+}, [1, "dso-accordion", {
+    "variant": [513],
+    "reverseAlign": [516, "reverse-align"],
+    "allowMultipleOpen": [516, "allow-multiple-open"],
+    "getState": [64],
+    "toggleSection": [64],
+    "closeOpenSections": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+
+const DsoAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAccordion, defineCustomElement };

package/dist/components/dso-alert.d.ts

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

package/dist/components/dso-alert.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$2 } from './icon.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-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}";
+
+const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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)));
+  }
+  static get style() { return alertCss; }
+}, [1, "dso-alert", {
+    "status": [1],
+    "roleAlert": [4, "role-alert"]
+  }]);
+Alert.statusMap = new Map([
+  ["success", "Gelukt"],
+  ["info", "Opmerking"],
+  ["warning", "Waarschuwing"],
+  ["error", "Fout"],
+]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-alert", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Alert);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoAlert = Alert;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAlert, defineCustomElement };

package/dist/components/dso-attachments-counter.d.ts

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

package/dist/components/dso-attachments-counter.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.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}";
+
+const AttachmentsCounter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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" })));
+  }
+  static get style() { return attachmentsCounterCss; }
+}, [1, "dso-attachments-counter", {
+    "count": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-attachments-counter", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-attachments-counter":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AttachmentsCounter);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoAttachmentsCounter = AttachmentsCounter;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAttachmentsCounter, defineCustomElement };

package/dist/components/dso-autosuggest.d.ts

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