@dso-toolkit/core 45.2.0 → 47.0.0

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

@@ -6,25 +6,43 @@
     opacity: 1;
   }
 }
-.dso-modal .dso-dialog {
+: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);
 }
-.dso-modal .dso-header {
+:host .dso-modal .dso-header {
   border-bottom: 1px solid #ccc;
-  min-height: 32px;
   padding: 16px;
   position: relative;
 }
-.dso-modal .dso-header h2 {
+:host .dso-modal .dso-header h2 {
+  color: #275937;
   margin: 0;
   max-width: calc(100% - 24px);
 }
-.dso-modal .dso-header .dso-close {
+:host .dso-modal .dso-header .dso-close {
   background-color: transparent;
   border: 0;
-  cursor: pointer;
-  color: #39870c;
   height: 32px;
   padding: 0;
   position: absolute;
@@ -33,55 +51,45 @@
   top: 16px;
   width: 32px;
 }
-.dso-modal .dso-body {
+: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;
 }
-.dso-modal .dso-body p {
+:host .dso-modal .dso-body p {
   margin: 0 0 16px;
 }
-.dso-modal .dso-body ul,
-.dso-modal .dso-body ol {
+:host .dso-modal .dso-body ul,
+:host .dso-modal .dso-body ol {
   margin-bottom: 16px;
 }
-.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+: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;
 }
-.dso-modal .dso-body pre {
+:host .dso-modal .dso-body pre {
   margin: 0 0 16px;
 }
-.dso-modal .dso-body blockquote {
+:host .dso-modal .dso-body blockquote {
   padding: 16px 24px;
 }
-.dso-modal .dso-body dso-highlight-box,
-.dso-modal .dso-body .dso-highlight-box {
+:host .dso-modal .dso-body dso-highlight-box,
+:host .dso-modal .dso-body .dso-highlight-box {
   margin-bottom: 24px;
 }
-.dso-modal .dso-body img {
+:host .dso-modal .dso-body img {
   height: auto;
   max-width: 100%;
 }
-.dso-modal .dso-footer {
+:host .dso-modal .dso-footer {
   min-height: 80px;
   padding: 0 32px 32px;
   text-align: right;
 }
-.dso-modal .dso-footer .dso-tertiary,
-.dso-modal .dso-footer .btn-link {
-  float: left;
-  line-height: calc(1.5em - 1px);
-  padding: 11px 0;
-  position: relative;
-}
-.dso-modal.dso-confirm .dso-footer button:first-child {
-  float: left;
-}
 @media screen and (min-width: 768px) {
-  .dso-modal {
+  :host .dso-modal {
     bottom: 0;
     height: 100%;
     left: 0;
@@ -90,62 +98,41 @@
     top: 0;
     z-index: 530;
   }
-  .dso-modal .dso-dialog {
+  :host .dso-modal .dso-dialog {
     animation: 1s ease-out 0s 1 slideInFromTop;
     margin: auto;
     margin-top: 15vh;
     max-width: 640px;
     opacity: 1;
   }
-  .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .btn-default, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .btn-default, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .btn-default, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .btn-default {
+  :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;
   }
-  .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .btn + .btn-link, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn-link, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn-link, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn-link {
+  :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) {
-  .dso-modal {
+  :host .dso-modal {
     max-width: 100%;
   }
-  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  :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;
   }
-  .dso-modal .dso-footer button {
+  :host .dso-modal .dso-footer button {
     text-align: center;
     width: 100%;
   }
-  .dso-modal .dso-footer button + button {
+  :host .dso-modal .dso-footer button + button {
     margin-top: 8px;
   }
-  .dso-modal .dso-footer button.dso-tertiary,
-.dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
-.dso-modal .dso-footer button.btn-link span {
+  :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;
   }
 }
 
-: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;
-}
-
 .dso-modal .dso-dialog.dso-table-dialog {
   max-width: calc(100% - 2rem);
 }

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

@@ -1,22 +1,21 @@
-import { h, Component, Element, Host, Prop, State } from '@stencil/core';
-import debounce from 'debounce';
-import { createFocusTrap } from 'focus-trap';
-import { v4 } from 'uuid';
+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();
-    /** Prevents the table being   opened in a modal. */
     this.noModal = false;
-    /** Indicates whether the table is currently horizontally scrollable */
     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));
+    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));
   }
   componentDidLoad() {
     this.startResponsiveBehavior();
@@ -29,37 +28,18 @@ export class Table {
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    var _a;
-    const caption = (_a = this.host.querySelector(':scope > table > caption')) === null || _a === void 0 ? void 0 : _a.textContent;
-    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))))));
+    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');
+    document.body.classList.add("dso-modal-open");
     this.modalActive = true;
   }
   closeModal() {
     this.placeholderHeight = undefined;
-    document.body.classList.remove('dso-modal-open', 'dso-modal-open');
+    document.body.classList.remove("dso-modal-open", "dso-modal-open");
     this.modalActive = false;
   }
   setFocusTrap() {
@@ -78,7 +58,7 @@ export class Table {
         onDeactivate: () => this.closeModal(),
         tabbableOptions: {
           getShadowRoot: true,
-        }
+        },
       }).activate();
     }
     else if (!this.modalActive && this.trap) {
@@ -87,60 +67,69 @@ export class Table {
     }
   }
   setResponsiveTable([dsoTable]) {
-    const tableElement = dsoTable.target.querySelector('table');
+    const tableElement = dsoTable.target.querySelector("table");
     if (dsoTable && tableElement instanceof HTMLTableElement) {
-      this.isResponsive = Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
+      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"
+  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"
       },
-      "attribute": "is-responsive",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "modalActive": {},
-    "placeholderHeight": {}
-  }; }
+      "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"; }
 }