@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/collection/components/table/table.css

@@ -0,0 +1,283 @@
+@keyframes slideInFromTop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+:host {
+  display: block;
+  margin-bottom: 24px;
+}
+
+.dso-header h2 {
+  color: #275937;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.dso-header .dso-close {
+  color: #275937;
+}
+
+:host .dso-modal {
+  inset: 0px;
+  height: 100%;
+  position: fixed;
+  z-index: 530;
+}
+:host .dso-modal .dso-dialog {
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+}
+:host .dso-modal .dso-header {
+  border-bottom: 1px solid #ccc;
+  padding: 16px;
+  position: relative;
+}
+:host .dso-modal .dso-header h2 {
+  color: #275937;
+  margin: 0;
+  max-width: calc(100% - 24px);
+}
+:host .dso-modal .dso-header .dso-close {
+  background-color: transparent;
+  border: 0;
+  height: 32px;
+  padding: 0;
+  position: absolute;
+  right: 13px;
+  text-align: center;
+  top: 16px;
+  width: 32px;
+}
+:host .dso-modal .dso-body {
+  height: calc(100% - 96px - 1.5rem);
+  max-height: calc(70vh - 144px - 1.5em);
+  min-height: 1.5rem;
+  overflow-x: auto;
+  padding: 32px;
+}
+:host .dso-modal .dso-body p {
+  margin: 0 0 16px;
+}
+:host .dso-modal .dso-body ul,
+:host .dso-modal .dso-body ol {
+  margin-bottom: 16px;
+}
+:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+:host .dso-modal .dso-body pre {
+  margin: 0 0 16px;
+}
+:host .dso-modal .dso-body blockquote {
+  padding: 16px 24px;
+}
+:host .dso-modal .dso-body dso-highlight-box,
+:host .dso-modal .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+:host .dso-modal .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+:host .dso-modal .dso-footer {
+  min-height: 80px;
+  padding: 0 32px 32px;
+  text-align: right;
+}
+@media screen and (min-width: 768px) {
+  :host .dso-modal {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 530;
+  }
+  :host .dso-modal .dso-dialog {
+    animation: 1s ease-out 0s 1 slideInFromTop;
+    margin: auto;
+    margin-top: 15vh;
+    max-width: 640px;
+    opacity: 1;
+  }
+  :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 {
+    margin-left: 16px;
+  }
+  :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 {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  :host .dso-modal {
+    max-width: 100%;
+  }
+  :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 {
+    margin-left: 0;
+  }
+  :host .dso-modal .dso-footer button {
+    text-align: center;
+    width: 100%;
+  }
+  :host .dso-modal .dso-footer button + button {
+    margin-top: 8px;
+  }
+  :host .dso-modal .dso-footer button.dso-tertiary,
+:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
+:host .dso-modal .dso-footer button.btn-link span {
+    float: none;
+  }
+}
+
+.dso-modal .dso-dialog.dso-table-dialog {
+  max-width: calc(100% - 2rem);
+}
+@media screen and (max-width: 767px) {
+  .dso-modal .dso-dialog.dso-table-dialog {
+    max-width: 100%;
+  }
+}
+
+:host([is-responsive]) .dso-table-body {
+  border: 1px solid #ccc;
+  margin-bottom: 0;
+  overflow-y: hidden;
+  width: 100%;
+}
+:host([is-responsive]) .dso-table-body.dso-body {
+  width: calc(100% - 64px);
+}
+
+.dso-table-utilities {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.dso-table-utilities .dso-responsive-message {
+  margin-bottom: 0;
+}
+.dso-table-utilities .dso-responsive-message:only-child {
+  width: 100%;
+}
+.dso-table-utilities .open-modal-button:only-child {
+  margin-left: auto;
+}
+
+.dso-responsive-message {
+  font-size: 0.8em;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: center;
+}
+
+.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+.dso-tertiary:focus, .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-tertiary:active {
+  outline: 0;
+}
+.dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.dso-tertiary:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+.dso-tertiary:not([disabled]):active {
+  color: #676cb0;
+}
+.dso-tertiary.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.dso-tertiary.dso-spinner-left::before {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+.dso-tertiary.dso-spinner-right::after {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+.dso-tertiary dso-icon + span:not(.sr-only),
+.dso-tertiary svg.di + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + dso-icon,
+.dso-tertiary span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
+.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
+.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
+  margin-left: 4px;
+}
+.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),
+.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
+.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-left: 0;
+}
+.dso-tertiary dso-icon,
+.dso-tertiary svg.di,
+.dso-tertiary span {
+  vertical-align: middle;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dso-table-placeholder {
+  box-shadow: inset 0 0 0 1px #ccc;
+  display: grid;
+  place-content: center;
+}

package/dist/collection/components/table/table.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/table/table.js

@@ -0,0 +1,135 @@
+import { h, Host } from "@stencil/core";
+import debounce from "debounce";
+import { createFocusTrap } from "focus-trap";
+import { v4 } from "uuid";
+export class Table {
+  constructor() {
+    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((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);
+    }
+  }
+  static get is() { return "dso-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "noModal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prevents the table being   opened in a modal."
+        },
+        "attribute": "no-modal",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "isResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the table is currently horizontally scrollable"
+        },
+        "attribute": "is-responsive",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "modalActive": {},
+      "placeholderHeight": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/toggletip/toggletip.js

@@ -1,9 +1,6 @@
-import { h, Component, Fragment, Element, Prop, State } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 export class Toggletip {
   constructor() {
-    this.active = false;
-    this.label = "Toelichting";
-    this.position = "right";
     this.click = () => {
       this.active ? this.close() : this.open();
     };
@@ -24,102 +21,112 @@ export class Toggletip {
     };
     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))));
   }
   static get is() { return "dso-toggletip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["toggletip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["toggletip.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"Toelichting\""
-    },
-    "position": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
-        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "position",
-      "reflect": false,
-      "defaultValue": "\"right\""
-    },
-    "small": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+  static get originalStyleUrls() {
+    return {
+      "$": ["toggletip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toggletip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Toelichting\""
       },
-      "attribute": "small",
-      "reflect": false
-    },
-    "secondary": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean | undefined",
-        "references": {}
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "\"right\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "small",
+        "reflect": false
       },
-      "attribute": "secondary",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "active": {}
-  }; }
+      "secondary": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "secondary",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "active": {}
+    };
+  }
   static get elementRef() { return "host"; }
 }