@dso-toolkit/core 45.0.1 → 45.2.0

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

@@ -0,0 +1,296 @@
+@keyframes slideInFromTop {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dso-modal .dso-dialog {
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+}
+.dso-modal .dso-header {
+  border-bottom: 1px solid #ccc;
+  min-height: 32px;
+  padding: 16px;
+  position: relative;
+}
+.dso-modal .dso-header h2 {
+  margin: 0;
+  max-width: calc(100% - 24px);
+}
+.dso-modal .dso-header .dso-close {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  color: #39870c;
+  height: 32px;
+  padding: 0;
+  position: absolute;
+  right: 13px;
+  text-align: center;
+  top: 16px;
+  width: 32px;
+}
+.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 {
+  margin: 0 0 16px;
+}
+.dso-modal .dso-body ul,
+.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) {
+  padding-inline-start: 24px;
+}
+.dso-modal .dso-body pre {
+  margin: 0 0 16px;
+}
+.dso-modal .dso-body blockquote {
+  padding: 16px 24px;
+}
+.dso-modal .dso-body dso-highlight-box,
+.dso-modal .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+.dso-modal .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+.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 {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 530;
+  }
+  .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 {
+    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 {
+    margin-left: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  .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 {
+    margin-left: 0;
+  }
+  .dso-modal .dso-footer button {
+    text-align: center;
+    width: 100%;
+  }
+  .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 {
+    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);
+}
+@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,146 @@
+import { h, Component, Element, Host, Prop, State } 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;
+  }
+  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;
+    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))))));
+  }
+  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/table/table.template.js

@@ -0,0 +1,26 @@
+import { html } from 'lit-html';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+export function tableTemplate({ noModal, content, }) {
+  return html `
+    <dso-table
+      ?no-modal=${noModal}
+    >
+      <table class="table">
+        <caption>${content.caption}</caption>
+
+        <thead>
+          <tr>
+            ${content.head.map(col => html `<th scope="col">${col}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${content.rows.map(row => html `
+            <tr>
+              ${row.map((col, index) => index === 0 ? html `<th scope="row">${unsafeHTML(col)}</th>` : html `<td>${unsafeHTML(col)}</td>`)}
+            </tr>
+          `)}
+        </tbody>
+      </table>
+    </dso-table>
+  `;
+}

package/dist/collection/components/toggletip/toggletip.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: inline-block;
+}
+
 :host(:focus) {
   outline: none;
 }