@dso-toolkit/core 47.0.0 → 48.0.0

package/dist/components/info-button.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const infoButtonCss = ":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}button{background-color:transparent;color:#39870c;border:0;margin-left:8px;padding:0;cursor:pointer;vertical-align:top}button.dso-info-secondary{color:#666}dso-icon{display:block}";
+
+const InfoButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoToggle = createEvent(this, "dsoToggle", 7);
+    this.active = undefined;
+    this.hover = false;
+    this.secondary = undefined;
+    this.label = "Toelichting bij optie";
+  }
+  async setFocus() {
+    var _a;
+    (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  handleToggle(e) {
+    this.active = !this.active;
+    this.dsoToggle.emit({ originalEvent: e, active: this.active });
+  }
+  render() {
+    return (h(Host, { onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { type: "button", class: clsx("btn", { "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))));
+  }
+  static get style() { return infoButtonCss; }
+}, [1, "dso-info-button", {
+    "active": [1540],
+    "secondary": [4],
+    "label": [1],
+    "hover": [32],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-info-button", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-info-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InfoButton);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { InfoButton as I, defineCustomElement as d };

package/dist/components/info.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const infoCss = ":host{display:block;background-color:#f2f2f2;padding:16px 32px 16px 16px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;right:8px;top:8px}:host(:not([active]):not([fixed])){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::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}";
+
+const Info = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoClose = createEvent(this, "dsoClose", 7);
+    this.fixed = undefined;
+    this.active = undefined;
+  }
+  render() {
+    return (h(Fragment, null, h("slot", null), !this.fixed && (h("button", { type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))));
+  }
+  static get style() { return infoCss; }
+}, [1, "dso-info", {
+    "fixed": [516],
+    "active": [516]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-info", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-info":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Info);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Info as I, defineCustomElement as d };

package/dist/components/is-modified-event.js

@@ -0,0 +1,4 @@
+/** returns `true` when the event is triggered while holding Ctrl, Alt or other modifiers, or on right-click. Can be used to determine navigation. */
+const isModifiedEvent = (e) => e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey;
+
+export { isModifiedEvent as i };

package/dist/components/progress-indicator.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const progressIndicatorCss = "*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";
+
+const Progressindicator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.size = undefined;
+    this.block = undefined;
+  }
+  render() {
+    var _a;
+    const label = (_a = this.label) !== null && _a !== void 0 ? _a : "Resultaten laden: een moment geduld alstublieft.";
+    return (h(Host, null, h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("style", null, `
+                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
+                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
+                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
+              `), h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, label)));
+  }
+  static get style() { return progressIndicatorCss; }
+}, [1, "dso-progress-indicator", {
+    "label": [1],
+    "size": [513],
+    "block": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Progressindicator);
+      }
+      break;
+  } });
+}
+
+export { Progressindicator as P, defineCustomElement as d };

package/dist/components/responsive-element.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const responsiveElementCss = ":host{display:block}";
+
+const elementSizes = [
+  {
+    width: 624,
+    alias: "large",
+  },
+  {
+    width: 375,
+    alias: "medium",
+  },
+  {
+    width: 0,
+    alias: "small",
+  },
+];
+const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
+    this.observer = new ResizeObserver(([entry]) => {
+      var _a, _b;
+      const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+      this.sizeAlias = size;
+      this.dsoSizeChange.emit(size);
+    });
+    this.sizeAlias = elementSizes[0].alias;
+    this.sizeWidth = 0;
+  }
+  async getSize() {
+    return this.sizeAlias;
+  }
+  componentWillLoad() {
+    this.observer.observe(this.host);
+  }
+  disconnectedCallback() {
+    this.observer.unobserve(this.host);
+  }
+  render() {
+    return (h(Host, { small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return responsiveElementCss; }
+}, [1, "dso-responsive-element", {
+    "sizeAlias": [32],
+    "sizeWidth": [32],
+    "getSize": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-responsive-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-responsive-element":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ResponsiveElement);
+      }
+      break;
+  } });
+}
+
+export { ResponsiveElement as R, defineCustomElement as d };

package/dist/components/selectable.js

@@ -0,0 +1,108 @@
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment } from '@stencil/core/internal/client';
+import { c as createIdentifier } from './create-identifier.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './info.js';
+import { d as defineCustomElement$1 } from './info-button.js';
+
+const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 -32px;width:calc(100% + 32px)}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;padding-left:32px}.dso-selectable-input-wrapper.sc-dso-selectable:focus-within{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}";
+
+const Selectable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoChange = createEvent(this, "dsoChange", 7);
+    this.fallbackIdentifier = createIdentifier("DsoSelectable");
+    this.type = undefined;
+    this.identifier = undefined;
+    this.name = undefined;
+    this.value = undefined;
+    this.invalid = undefined;
+    this.describedById = undefined;
+    this.disabled = undefined;
+    this.required = undefined;
+    this.checked = undefined;
+    this.indeterminate = undefined;
+    this.infoFixed = undefined;
+    this.infoActive = false;
+  }
+  async toggleInfo(active) {
+    this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
+  }
+  componentDidLoad() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.mutationObserver.observe(this.host, {
+      childList: true,
+    });
+    this.setIndeterminate();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  setIndeterminate() {
+    if (!(this.input instanceof HTMLInputElement) || this.type !== "checkbox") {
+      return;
+    }
+    this.input.indeterminate = !!this.indeterminate;
+  }
+  render() {
+    var _a;
+    const hasInfo = !!this.host.querySelector('[slot="info"]');
+    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
+  }
+  getIdentifier() {
+    var _a;
+    return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "indeterminate": ["setIndeterminate"]
+  }; }
+  static get style() { return selectableCss; }
+}, [6, "dso-selectable", {
+    "type": [1],
+    "identifier": [1],
+    "name": [1],
+    "value": [1],
+    "invalid": [4],
+    "describedById": [1, "described-by-id"],
+    "disabled": [4],
+    "required": [4],
+    "checked": [4],
+    "indeterminate": [4],
+    "infoFixed": [4, "info-fixed"],
+    "infoActive": [32],
+    "toggleInfo": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-selectable", "dso-icon", "dso-info", "dso-info-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-selectable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Selectable);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "dso-info-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Selectable as S, defineCustomElement as d };