@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/esm/dso-pagination.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-771c1291.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-1a4dda48.js';
 
 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}";
 
-let Pagination = class {
+const Pagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoSelectPage = createEvent(this, "dsoSelectPage", 7);
@@ -11,10 +11,10 @@ let Pagination = class {
       medium: 9,
       large: 11,
     };
-    /**
-     * This function is called to format the href
-     */
-    this.formatHref = (page) => '#' + page;
+    this.availablePositions = undefined;
+    this.totalPages = undefined;
+    this.currentPage = undefined;
+    this.formatHref = (page) => "#" + page;
   }
   /**
    * Listens to the dsoSizeChange event on Responsive Element
@@ -29,39 +29,37 @@ let Pagination = class {
       isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
     });
   }
-  ;
   componentDidLoad() {
     var _a;
-    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]));
+    (_a = this.responsiveElement) === null || _a === void 0 ? void 0 : _a.getSize().then((size) => (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])));
   }
   render() {
-    var _a;
+    var _a, _b, _c;
     if (!this.totalPages) {
       return null;
     }
     if (this.availablePositions === undefined) {
-      return (h("dso-responsive-element", { ref: element => this.responsiveElement = element }));
+      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(pages[0]), "aria-label": "Vorige", onClick: e => currentPage && this.clickHandler(e, pages[currentPage - 2]) }, 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(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => currentPage && this.clickHandler(e, pages[currentPage]) }, h("dso-icon", { icon: "chevron-right" }))))));
+    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
+    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.
+    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
+    if (totalPages + 2 <= availablePositions) {
+      // + 2 voor de vorige en volgende knop
       return Array.from({ length: totalPages }, (_value, i) => i + 1);
     }
     if (availablePositions === 3) {
@@ -70,11 +68,7 @@ let Pagination = class {
     if (availablePositions === 5) {
       return [1, currentPage, totalPages];
     }
-    return [
-      1,
-      ...this.getPageRange(currentPage, availablePositions, totalPages),
-      totalPages
-    ];
+    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];
   }
   getPageRange(currentPage, availablePositions, totalPages) {
     const range = [];
@@ -111,16 +105,16 @@ let Pagination = class {
     return range.filter((v, i, a) => a.indexOf(v) === i);
   }
   showEllipsisAfterFirst(pages, page, availablePositions) {
-    return pages.indexOf(page) === 0 &&
+    return (pages.indexOf(page) === 0 &&
       pages[pages.length - 1] > availablePositions - 2 &&
-      !pages.some(p => p === 2) &&
-      availablePositions >= 7;
+      !pages.some((p) => p === 2) &&
+      availablePositions >= 7);
   }
   showEllipsisBeforeLast(pages, page, availablePositions, totalPages) {
-    return pages.indexOf(page) === pages.length - 1 &&
+    return (pages.indexOf(page) === pages.length - 1 &&
       pages[pages.length - 1] > availablePositions - 2 &&
-      !pages.some(p => p === totalPages - 1) &&
-      availablePositions >= 7;
+      !pages.some((p) => p === totalPages - 1) &&
+      availablePositions >= 7);
   }
   get host() { return getElement(this); }
 };

package/dist/esm/dso-progress-bar.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, h } from './index-771c1291.js';
+import { r as registerInstance, h } from './index-1a4dda48.js';
 
-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:0.875rem;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 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%}";
 
-let ProgressBar = class {
+const ProgressBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.progress = undefined;
     this.min = 0;
     this.max = 100;
   }

package/dist/esm/dso-progress-indicator.entry.js

@@ -1,19 +1,22 @@
-import { r as registerInstance, h, H as Host } from './index-771c1291.js';
+import { r as registerInstance, h, H as Host } from './index-1a4dda48.js';
 
 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}";
 
-let Progressindicator = class {
+const Progressindicator = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    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); }
+    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)));
   }
 };

package/dist/esm/dso-responsive-element.entry.js

@@ -1,30 +1,33 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-771c1291.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-1a4dda48.js';
 
 const responsiveElementCss = ":host{display:block}";
 
 const elementSizes = [
   {
-    width: 624, alias: 'large'
+    width: 624,
+    alias: "large",
   },
   {
-    width: 375, alias: 'medium'
+    width: 375,
+    alias: "medium",
   },
   {
-    width: 0, alias: 'small'
-  }
+    width: 0,
+    alias: "small",
+  },
 ];
-let ResponsiveElement = class {
+const ResponsiveElement = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
-    this.sizeAlias = elementSizes[0].alias;
-    this.sizeWidth = 0;
     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;
+      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;
@@ -36,7 +39,7 @@ let ResponsiveElement = class {
     this.observer.unobserve(this.host);
   }
   render() {
-    return (h(Host, { small: this.sizeAlias === 'small', medium: this.sizeAlias === 'medium', large: this.sizeAlias === 'large' }, h("slot", null)));
+    return (h(Host, { small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", null)));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/dso-table.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-1a4dda48.js';
+import { d as debounce_1 } from './index-f2bf58ce.js';
+import { c as createFocusTrap } from './focus-trap.esm-33203b60.js';
+import { v as v4 } from './v4-d398bde5.js';
+import './index.esm-8fc07ad8.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 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  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\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 (min-width: 768px) {\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  }\n  :host .dso-modal .dso-dialog {\n    animation: 1s ease-out 0s 1 slideInFromTop;\n    margin: auto;\n    margin-top: 15vh;\n    max-width: 640px;\n    opacity: 1;\n  }\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 {\n    max-width: 100%;\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  max-width: calc(100% - 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-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
+
+const Table = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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` } })), 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;
+    document.body.classList.add("dso-modal-open");
+    this.modalActive = true;
+  }
+  closeModal() {
+    this.placeholderHeight = undefined;
+    document.body.classList.remove("dso-modal-open", "dso-modal-open");
+    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 getElement(this); }
+};
+Table.style = tableCss;
+
+export { Table as dso_table };

package/dist/esm/dso-toggletip.entry.js

@@ -1,13 +1,10 @@
-import { r as registerInstance, h, F as Fragment, a as getElement } from './index-771c1291.js';
+import { r as registerInstance, h, F as Fragment, a as getElement } from './index-1a4dda48.js';
 
 const toggletipCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}:host(:focus){outline:none}";
 
-let Toggletip = class {
+const Toggletip = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.active = false;
-    this.label = "Toelichting";
-    this.position = "right";
     this.click = () => {
       this.active ? this.close() : this.open();
     };
@@ -28,16 +25,21 @@ let Toggletip = class {
     };
     this.keyDownListener = (event) => {
       var _a;
-      if (!event.defaultPrevented && event.key == "Escape") {
+      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", { id: "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, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
+    return (h(Fragment, null, h("dso-info-button", { id: "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, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/dso-toolkit.js

@@ -1,7 +1,7 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-771c1291.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-1a4dda48.js';
 
 /*
- Stencil Client Patch Browser v2.10.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-autosuggest",[[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"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"closeOpenSections":[64]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[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]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return bootstrapLazy([["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64]}]]],["dso-header",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-alert",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-autosuggest",[[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"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"focused":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"ariaId":[32],"hasFooter":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"closeOpenSections":[64]}]]],["dso-badge",[[1,"dso-badge",{"status":[1]}]]],["dso-banner",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2",[[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]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
 });