@dso-toolkit/core 47.0.0 → 48.0.0

package/dist/components/dso-pagination.js

@@ -0,0 +1,159 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { i as isModifiedEvent } from './is-modified-event.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './responsive-element.js';
+
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+
+const Pagination = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoSelectPage = createEvent(this, "dsoSelectPage", 7);
+    this.sizePositionsMap = {
+      small: 7,
+      medium: 9,
+      large: 11,
+    };
+    this.availablePositions = undefined;
+    this.totalPages = undefined;
+    this.currentPage = undefined;
+    this.formatHref = (page) => "#" + page;
+  }
+  /**
+   * Listens to the dsoSizeChange event on Responsive Element
+   */
+  sizeChangeHandler(event) {
+    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);
+  }
+  clickHandler(e, page) {
+    this.dsoSelectPage.emit({
+      originalEvent: e,
+      page,
+      isModifiedEvent: isModifiedEvent(e),
+    });
+  }
+  componentDidLoad() {
+    var _a;
+    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.totalPages) {
+      return null;
+    }
+    if (this.availablePositions === undefined) {
+      return h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) });
+    }
+    const availablePositions = this.availablePositions;
+    const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
+    const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
+    return (h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, h("ul", { class: "pagination" }, h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (h(Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions, pages[pages.length - 1]) && (h("li", null, h("span", null, "..."))), h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (h("span", { "aria-current": "page" }, page)) : (h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (h("li", null, h("span", null, "...")))))), h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages); } }, h("dso-icon", { icon: "chevron-right" }))))));
+  }
+  getAvailablePositions(sizePositions) {
+    if (sizePositions % 2 === 0) {
+      // Even aantal posities zorgt voor een scheve pagination
+      return sizePositions - 1;
+    }
+    if (sizePositions <= 3) {
+      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.
+      return 3;
+    }
+    return sizePositions;
+  }
+  getPages(currentPage, availablePositions, totalPages) {
+    if (totalPages + 2 <= availablePositions) {
+      // + 2 voor de vorige en volgende knop
+      return Array.from({ length: totalPages }, (_value, i) => i + 1);
+    }
+    if (availablePositions === 3) {
+      return [currentPage];
+    }
+    if (availablePositions === 5) {
+      return [1, currentPage, totalPages];
+    }
+    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
+  }
+  getPageRange(currentPage, availablePositions, totalPages) {
+    const range = [];
+    const positionRange = Math.floor(availablePositions / 2);
+    if (currentPage <= positionRange) {
+      for (let i = 2; i <= availablePositions - 4; i++) {
+        range.push(i);
+      }
+    }
+    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {
+      if (positionRange === 1) {
+        if (currentPage > totalPages - 2) {
+          range.push(totalPages - 2);
+        }
+        range.push(currentPage);
+        if (currentPage < 3) {
+          range.push(3);
+        }
+      }
+      if (positionRange > 1) {
+        const pagesBeforeOrAfter = positionRange - 3;
+        for (let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange); i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange); i++) {
+          if (i > 2 && i < totalPages - 1) {
+            range.push(i);
+          }
+        }
+      }
+    }
+    if (currentPage > totalPages - positionRange) {
+      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {
+        range.push(i);
+      }
+    }
+    return range.filter((v, i, a) => a.indexOf(v) === i);
+  }
+  showEllipsisAfterFirst(pages, page, availablePositions) {
+    return (pages.indexOf(page) === 0 &&
+      pages[pages.length - 1] > availablePositions - 2 &&
+      !pages.some((p) => p === 2) &&
+      availablePositions >= 7);
+  }
+  showEllipsisBeforeLast(pages, page, availablePositions, totalPages) {
+    return (pages.indexOf(page) === pages.length - 1 &&
+      pages[pages.length - 1] > availablePositions - 2 &&
+      !pages.some((p) => p === totalPages - 1) &&
+      availablePositions >= 7);
+  }
+  get host() { return this; }
+  static get style() { return paginationCss; }
+}, [1, "dso-pagination", {
+    "totalPages": [2, "total-pages"],
+    "currentPage": [2, "current-page"],
+    "formatHref": [16],
+    "availablePositions": [32]
+  }, [[0, "dsoSizeChange", "sizeChangeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-pagination", "dso-icon", "dso-responsive-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pagination);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-responsive-element":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoPagination = Pagination;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoPagination, defineCustomElement };

package/dist/components/dso-progress-bar.d.ts

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

package/dist/components/dso-progress-bar.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const progressBarCss = ":host{display: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}.progress{margin-bottom:8px}.progress #progress-bar-label{font-size:14px;margin-top:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}";
+
+const ProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.progress = undefined;
+    this.min = 0;
+    this.max = 100;
+  }
+  render() {
+    const progressNumber = Math.round(this.progress);
+    const progressPercentage = `${progressNumber}%`;
+    return (h("div", { class: "progress" }, h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { style: { width: `${progressPercentage}` } })), h("span", { id: "progress-bar-label" }, h("slot", null))));
+  }
+  static get style() { return progressBarCss; }
+}, [1, "dso-progress-bar", {
+    "progress": [2],
+    "min": [2],
+    "max": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ProgressBar);
+      }
+      break;
+  } });
+}
+
+const DsoProgressBar = ProgressBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoProgressBar, defineCustomElement };

package/dist/components/dso-progress-indicator.d.ts

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

package/dist/components/dso-progress-indicator.js

@@ -0,0 +1,6 @@
+import { P as Progressindicator, d as defineCustomElement$1 } from './progress-indicator.js';
+
+const DsoProgressIndicator = Progressindicator;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoProgressIndicator, defineCustomElement };

package/dist/components/dso-responsive-element.d.ts

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

package/dist/components/dso-responsive-element.js

@@ -0,0 +1,6 @@
+import { R as ResponsiveElement, d as defineCustomElement$1 } from './responsive-element.js';
+
+const DsoResponsiveElement = ResponsiveElement;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoResponsiveElement, defineCustomElement };

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

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

package/dist/components/dso-selectable.js

@@ -0,0 +1,6 @@
+import { S as Selectable, d as defineCustomElement$1 } from './selectable.js';
+
+const DsoSelectable = Selectable;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoSelectable, defineCustomElement };

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

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

package/dist/components/dso-table.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as debounce_1 } from './index2.js';
+import { c as createFocusTrap } from './focus-trap.esm.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { v as v4 } from './v4.js';
+
+const tableCss = "@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  margin-top: 15vh;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 640px;\n  opacity: 1;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body ul,\n:host .dso-modal .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal .dso-body dso-highlight-box,\n:host .dso-modal .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 0 32px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n:host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n:host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #676cb0;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.labelledbyId = v4();
+    this.noModal = false;
+    this.isResponsive = false;
+    this.modalActive = false;
+    this.placeholderHeight = undefined;
+  }
+  startResponsiveBehavior() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
+  }
+  componentWillLoad() {
+    this.resizeObserver = new ResizeObserver(debounce_1((entries) => this.setResponsiveTable(entries), 200));
+  }
+  componentDidLoad() {
+    this.startResponsiveBehavior();
+  }
+  componentDidRender() {
+    this.setFocusTrap();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  render() {
+    var _a, _b;
+    const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+    return (h(Host, null, this.modalActive && this.placeholderHeight && (h("div", { class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { class: "dso-modal-overlay" }), h("div", { class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" }))))), this.modalActive && (h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))), h("div", { class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", null))))));
+  }
+  openModal() {
+    this.placeholderHeight = this.host.clientHeight;
+    this.modalActive = true;
+  }
+  closeModal() {
+    this.placeholderHeight = undefined;
+    this.modalActive = false;
+  }
+  setFocusTrap() {
+    var _a, _b;
+    if (this.modalActive && this.focusTrapElement && !this.trap) {
+      this.trap = createFocusTrap([this.host, this.focusTrapElement], {
+        escapeDeactivates: true,
+        clickOutsideDeactivates: (e) => {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {
+            this.closeModal();
+            return false;
+          }
+          return true;
+        },
+        setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+        onDeactivate: () => this.closeModal(),
+        tabbableOptions: {
+          getShadowRoot: true,
+        },
+      }).activate();
+    }
+    else if (!this.modalActive && this.trap) {
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      delete this.trap;
+    }
+  }
+  setResponsiveTable([dsoTable]) {
+    const tableElement = dsoTable.target.querySelector("table");
+    if (dsoTable && tableElement instanceof HTMLTableElement) {
+      this.isResponsive =
+        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
+    }
+  }
+  get host() { return this; }
+  static get style() { return tableCss; }
+}, [1, "dso-table", {
+    "noModal": [516, "no-modal"],
+    "isResponsive": [516, "is-responsive"],
+    "modalActive": [32],
+    "placeholderHeight": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-table", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoTable = Table;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoTable, defineCustomElement };

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

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

package/dist/components/dso-toggletip.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './info-button.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}:host(:focus){outline:none}";
+
+const Toggletip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.click = () => {
+      this.active ? this.close() : this.open();
+    };
+    this.open = () => {
+      this.active = true;
+      this.host.addEventListener("keydown", this.keyDownListener);
+      this.host.addEventListener("focusout", this.focusOutListener);
+    };
+    this.close = () => {
+      this.host.removeEventListener("focusout", this.focusOutListener);
+      this.host.removeEventListener("keydown", this.keyDownListener);
+      this.active = false;
+    };
+    this.focusOutListener = (event) => {
+      if (!this.host.contains(event.relatedTarget)) {
+        this.close();
+      }
+    };
+    this.keyDownListener = (event) => {
+      var _a;
+      if (!event.defaultPrevented && event.key === "Escape") {
+        this.close();
+        (_a = this.infoButton) === null || _a === void 0 ? void 0 : _a.setFocus();
+        event.preventDefault();
+      }
+      return;
+    };
+    this.active = false;
+    this.label = "Toelichting";
+    this.position = "right";
+    this.small = undefined;
+    this.secondary = undefined;
+  }
+  render() {
+    return (h(Fragment, null, h("dso-info-button", { "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { stateless: true, descriptive: true, id: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return toggletipCss; }
+}, [1, "dso-toggletip", {
+    "label": [1],
+    "position": [1],
+    "small": [4],
+    "secondary": [4],
+    "active": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-toggletip", "dso-icon", "dso-info-button", "dso-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-toggletip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toggletip);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-info-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoToggletip = Toggletip;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoToggletip, defineCustomElement };

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

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

package/dist/components/dso-tooltip.js

@@ -0,0 +1,6 @@
+import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
+
+const DsoTooltip = Tooltip;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoTooltip, defineCustomElement };

package/dist/components/dso-tree-view.d.ts

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