@dso-toolkit/core 47.0.1 → 48.0.0

package/dist/components/dso-autosuggest.js

@@ -0,0 +1,309 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$2 } from './progress-indicator.js';
+import { v as v4 } from './v4.js';
+
+function escapeStringRegexp(string) {
+	if (typeof string !== 'string') {
+		throw new TypeError('Expected a string');
+	}
+
+	// Escape characters with special meaning either inside or outside character sets.
+	// Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+	return string
+		.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
+		.replace(/-/g, '\\x2d');
+}
+
+const autosuggestCss = ".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-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}";
+
+const Autosuggest = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoSelect = createEvent(this, "dsoSelect", 7);
+    this.dsoChange = createEvent(this, "dsoChange", 7);
+    this.dsoSearch = createEvent(this, "dsoSearch", 7);
+    this.listboxId = v4();
+    this.inputId = v4();
+    this.labelId = v4();
+    this.debouncedEmitValue = debounce_1((value) => {
+      this.dsoChange.emit(value);
+      this.debouncedShowLoading();
+    }, 200);
+    this.debouncedShowLoading = debounce_1(() => {
+      if (this.inputValue) {
+        this.showLoading = true;
+      }
+    }, this.loadingDelayed);
+    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.onFocusIn = () => {
+      if (this.suggestOnFocus) {
+        this.openSuggestions();
+      }
+    };
+    this.onKeyDown = (event) => {
+      if (event.defaultPrevented || this.loading) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          if (!this.showSuggestions) {
+            this.openSuggestions("first");
+          }
+          else {
+            this.selectNextSuggestion();
+          }
+          break;
+        case "ArrowUp":
+          if (!this.showSuggestions) {
+            this.openSuggestions("last");
+          }
+          else {
+            this.selectPreviousSuggestion();
+          }
+          break;
+        case "Tab":
+          this.closeSuggestions();
+          return;
+        case "Escape":
+          this.closeSuggestions();
+          break;
+        case "Enter":
+          this.pickSelectedValue();
+          break;
+        default:
+          return;
+      }
+      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();
+    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
+      this.openSuggestions();
+    }
+    else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
+      this.closeSuggestions();
+    }
+  }
+  onDocumentClick(event) {
+    if ((this.showSuggestions || this.notFound) &&
+      this.listbox &&
+      event.target instanceof Node &&
+      !this.listbox.contains(event.target) &&
+      this.input !== event.target) {
+      this.closeSuggestions();
+    }
+  }
+  connectedCallback() {
+    setTimeout(() => {
+      const input = this.host.querySelector('input[type="text"]');
+      if (!(input instanceof HTMLInputElement)) {
+        throw new ReferenceError("Mandatory text input not found");
+      }
+      this.input = input;
+      if (input.id) {
+        this.inputId = input.id;
+      }
+      else {
+        input.id = this.inputId;
+      }
+      if (!this.input.labels || this.input.labels.length < 1) {
+        throw new ReferenceError("Mandatory label for text input not found");
+      }
+      const label = this.input.labels[0];
+      if (label.id) {
+        this.labelId = label.id;
+      }
+      else {
+        label.id = this.labelId;
+      }
+      this.input.setAttribute("role", "combobox");
+      this.input.setAttribute("aria-haspopup", "listbox");
+      this.input.setAttribute("aria-controls", this.listboxId);
+      this.input.setAttribute("aria-expanded", "false");
+      this.input.setAttribute("autocomplete", "off");
+      this.input.setAttribute("aria-autocomplete", "list");
+      this.input.setAttribute("aria-activedescendant", "");
+      this.input.addEventListener("input", this.onInput);
+      this.input.addEventListener("keydown", this.onKeyDown);
+      this.input.addEventListener("focusin", this.onFocusIn);
+    });
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.removeEventListener("input", this.onInput);
+    (_b = this.input) === null || _b === void 0 ? void 0 : _b.removeEventListener("keydown", this.onKeyDown);
+    (_c = this.input) === null || _c === void 0 ? void 0 : _c.removeEventListener("focusin", this.onFocusIn);
+  }
+  markTerms(suggestionValue, terms) {
+    if (!suggestionValue || !terms || terms.length === 0) {
+      return [""];
+    }
+    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, "gi");
+    return suggestionValue.split(termRegex).map((valuePart) => {
+      if (!valuePart) {
+        return "";
+      }
+      if (termRegex.test(valuePart)) {
+        return h("mark", null, valuePart);
+      }
+      if (terms.length === 1) {
+        return h("span", null, valuePart);
+      }
+      return this.markTerms(valuePart, terms.slice(1));
+    });
+  }
+  selectSuggestion(suggestion) {
+    var _a;
+    this.selectedSuggestion = suggestion;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(suggestion));
+  }
+  selectFirstSuggestion() {
+    var _a;
+    if (!this.suggestions) {
+      return;
+    }
+    this.selectedSuggestion = this.suggestions[0];
+    if (this.selectedSuggestion) {
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  selectLastSuggestion() {
+    var _a;
+    if (!this.suggestions) {
+      return;
+    }
+    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];
+    if (this.selectedSuggestion) {
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  selectNextSuggestion() {
+    var _a, _b;
+    if (!this.suggestions) {
+      return;
+    }
+    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;
+    this.selectedSuggestion = (_a = this.suggestions[index + 1]) !== null && _a !== void 0 ? _a : this.suggestions[0];
+    if (this.selectedSuggestion) {
+      (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  selectPreviousSuggestion() {
+    var _a, _b;
+    if (!this.suggestions) {
+      return;
+    }
+    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;
+    this.selectedSuggestion = (_a = this.suggestions[index - 1]) !== null && _a !== void 0 ? _a : this.suggestions[this.suggestions.length - 1];
+    if (this.selectedSuggestion) {
+      (_b = this.input) === null || _b === void 0 ? void 0 : _b.setAttribute("aria-activedescendant", this.listboxItemId(this.selectedSuggestion));
+    }
+  }
+  resetSelectedSuggestion() {
+    var _a;
+    this.showLoading = !this.loadingDelayed;
+    this.notFound = false;
+    this.selectedSuggestion = undefined;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
+  }
+  openSuggestions(selectSuggestion) {
+    var _a, _b, _c, _d;
+    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;
+    (_d = this.input) === null || _d === void 0 ? void 0 : _d.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
+    if (this.showSuggestions && selectSuggestion === "first") {
+      this.selectFirstSuggestion();
+    }
+    else if (this.showSuggestions && selectSuggestion === "last") {
+      this.selectLastSuggestion();
+    }
+  }
+  closeSuggestions() {
+    var _a;
+    this.showSuggestions = false;
+    this.notFound = false;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-expanded", "false");
+    this.selectFirstSuggestion();
+  }
+  pickSelectedValue() {
+    var _a;
+    if (this.selectedSuggestion && this.showSuggestions) {
+      this.dsoSelect.emit(this.selectedSuggestion);
+    }
+    else {
+      this.dsoSearch.emit((_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
+    }
+    this.closeSuggestions();
+  }
+  listboxItemId(suggestion) {
+    if (!this.suggestions) {
+      return "";
+    }
+    return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;
+  }
+  render() {
+    var _a, _b;
+    const terms = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value.split(" ").filter((t) => t)) !== null && _b !== void 0 ? _b : [];
+    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 this; }
+  static get watchers() { return {
+    "suggestions": ["suggestionsWatcher"]
+  }; }
+  static get style() { return autosuggestCss; }
+}, [6, "dso-autosuggest", {
+    "suggestions": [16],
+    "loading": [4],
+    "loadingLabel": [1, "loading-label"],
+    "loadingDelayed": [2, "loading-delayed"],
+    "notFoundLabel": [1, "not-found-label"],
+    "suggestOnFocus": [4, "suggest-on-focus"],
+    "showSuggestions": [32],
+    "selectedSuggestion": [32],
+    "notFound": [32],
+    "showLoading": [32]
+  }, [[4, "click", "onDocumentClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-autosuggest", "dso-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-autosuggest":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Autosuggest);
+      }
+      break;
+    case "dso-progress-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoAutosuggest = Autosuggest;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAutosuggest, defineCustomElement };

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

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

package/dist/components/dso-badge.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.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}";
+
+const Badge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.status = undefined;
+  }
+  render() {
+    return (h("span", { class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
+  }
+  static get style() { return badgeCss; }
+}, [1, "dso-badge", {
+    "status": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Badge);
+      }
+      break;
+  } });
+}
+
+const DsoBadge = Badge;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoBadge, defineCustomElement };

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

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

package/dist/components/dso-banner.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+
+const bannerCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}";
+
+const Banner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.status = undefined;
+  }
+  render() {
+    return (h("section", { class: clsx("dso-banner", `alert-${this.status}`), role: "alert" }, h("slot", null)));
+  }
+  static get style() { return bannerCss; }
+}, [1, "dso-banner", {
+    "status": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-banner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Banner);
+      }
+      break;
+  } });
+}
+
+const DsoBanner = Banner;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoBanner, defineCustomElement };

package/dist/components/dso-card-container.d.ts

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

package/dist/components/dso-card-container.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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)))));
+  }
+  static get style() { return cardContainerCss; }
+}, [1, "dso-card-container", {
+    "mode": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-card-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-card-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardContainer);
+      }
+      break;
+  } });
+}
+
+const DsoCardContainer = CardContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoCardContainer, defineCustomElement };

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

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

package/dist/components/dso-card.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as isModifiedEvent } from './is-modified-event.js';
+
+const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";
+
+const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoCardClicked = createEvent(this, "dsoCardClicked", 7);
+    this.isSelectable = false;
+    this.hasImage = false;
+  }
+  clickEventHandler(e) {
+    if (!(e.target instanceof HTMLElement)) {
+      return;
+    }
+    let element = e.target;
+    while (element !== this.host && element !== null) {
+      if (element instanceof HTMLButtonElement ||
+        element instanceof HTMLAnchorElement ||
+        element instanceof HTMLInputElement ||
+        element === null) {
+        return;
+      }
+      if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {
+        element = element.parentNode.host;
+      }
+      else {
+        element = element.parentElement;
+      }
+    }
+    return this.dsoCardClicked.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+  }
+  componentWillLoad() {
+    this.isSelectable = this.host.querySelector("*[slot = 'selectable']") !== null;
+    this.hasImage = this.host.querySelector("*[slot = 'image']") !== null;
+  }
+  render() {
+    return (h(Host, { onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
+  }
+  get host() { return this; }
+  static get style() { return cardCss; }
+}, [1, "dso-card", {
+    "isSelectable": [516, "is-selectable"],
+    "hasImage": [516, "has-image"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Card);
+      }
+      break;
+  } });
+}
+
+const DsoCard = Card;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoCard, defineCustomElement };

package/dist/components/dso-date-picker.d.ts

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