@dso-toolkit/core 41.0.1 → 43.1.0

package/dist/collection/components/label/label.js

@@ -1,17 +1,91 @@
-import { Component, h, Prop, Event, State } from '@stencil/core';
+import { Component, h, Prop, Event, State, Element, Fragment, Watch } from '@stencil/core';
 import clsx from 'clsx';
+function hasEllipses(el) {
+  return el.scrollWidth > el.clientWidth;
+}
 export class Label {
+  constructor() {
+    this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
+    this.keydownListenerActive = false;
+    this.keyDownListener = (event) => {
+      if (event.key == 'Escape') {
+        this.textHover = false;
+        this.textFocus = false;
+      }
+    };
+  }
+  watchTruncate(truncate) {
+    if (truncate) {
+      this.startTruncate();
+    }
+    else {
+      this.stopTruncate();
+    }
+  }
+  watchTooltipActive() {
+    if (!this.keydownListenerActive && (this.textHover || this.textFocus)) {
+      document.addEventListener('keydown', this.keyDownListener);
+      this.keydownListenerActive = true;
+    }
+    if (!this.textHover && !this.textFocus) {
+      document.removeEventListener('keydown', this.keyDownListener);
+      this.keydownListenerActive = false;
+    }
+  }
+  truncateLabel() {
+    setTimeout(() => {
+      if (this.labelContent) {
+        this.truncatedContent = hasEllipses(this.labelContent) ? this.host.innerText : undefined;
+      }
+    });
+  }
+  componentDidLoad() {
+    if (this.truncate) {
+      this.startTruncate();
+    }
+  }
+  disconnectedCallback() {
+    this.stopTruncate();
+  }
+  startTruncate() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.truncateLabel();
+    });
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
+    this.resizeObserver.observe(this.host);
+    this.truncateLabel();
+  }
+  stopTruncate() {
+    var _a;
+    document.removeEventListener('keydown', this.keyDownListener);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver.unobserve(this.host);
+    this.truncatedContent = undefined;
+    this.keydownListenerActive = false;
+  }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) },
-      h("slot", { name: "symbol" }),
-      status && (h("span", { class: "sr-only" },
-        status,
-        ": ")),
-      h("slot", null),
-      this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.hover = true, onMouseLeave: () => this.hover = false },
-        h("span", { class: "sr-only" }, "Verwijder"),
-        h("dso-icon", { icon: "times" })))));
+    return (h(Fragment, null,
+      h("span", { id: "toggle-anchor", class: clsx('dso-label', {
+          [`dso-label-${this.status}`]: this.status,
+          'dso-compact': this.compact && !this.removable,
+          'dso-hover': this.removeHover || this.removeFocus,
+        }) },
+        h("slot", { name: "symbol" }),
+        status && (h("span", { class: "sr-only" },
+          status,
+          ": ")),
+        h("span", { class: clsx('dso-label-content', {
+            'dso-truncate': !!this.truncate,
+          }), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false },
+          h("slot", null)),
+        this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false },
+          h("span", { class: "sr-only" }, "Verwijder"),
+          h("dso-icon", { icon: "times" })))),
+      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -72,10 +146,31 @@ export class Label {
       },
       "attribute": "status",
       "reflect": false
+    },
+    "truncate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "truncate",
+      "reflect": false
     }
   }; }
   static get states() { return {
-    "hover": {}
+    "removeHover": {},
+    "removeFocus": {},
+    "textHover": {},
+    "textFocus": {},
+    "truncatedContent": {}
   }; }
   static get events() { return [{
       "method": "removeClick",
@@ -97,10 +192,21 @@ export class Label {
         }
       }
     }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "truncate",
+      "methodName": "watchTruncate"
+    }, {
+      "propName": "textHover",
+      "methodName": "watchTooltipActive"
+    }, {
+      "propName": "textFocus",
+      "methodName": "watchTooltipActive"
+    }]; }
 }
 Label.statusMap = new Map([
   ['info', 'Opmerking'],
   ['success', 'Gelukt'],
   ['warning', 'Waarschuwing'],
-  ['danger', 'Fout']
+  ['danger', 'Fout'],
 ]);

package/dist/collection/components/label/label.template.js

@@ -1,11 +1,12 @@
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-export function labelTemplate({ status, label, button, compact, symbol }) {
+export function labelTemplate({ status, label, button, compact, truncate, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
       @removeClick=${ifDefined(button === null || button === void 0 ? void 0 : button.onClick)}
+      ?truncate=${truncate}
       ?compact=${compact}
       ?removable=${button}
     >

package/dist/collection/components/list/list.template.js

@@ -1,12 +1,13 @@
 // Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
 import { Type } from '@dso-toolkit/sources';
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { classMap } from 'lit-html/directives/class-map.js';
 function ul(children, modifier) {
   return html `
     <ul class="${classMap({
     'list-group': modifier === 'group',
-    'dso-columns-list': modifier === 'columns'
+    'dso-columns-list': modifier === 'columns',
+    'dso-img-list': modifier === 'img-list'
   })}">
       ${children}
     </ul>
@@ -16,7 +17,8 @@ function ol(children, modifier) {
   return html `
     <ol class="${classMap({
     'list-group': modifier === 'group',
-    'dso-columns-list': modifier === 'columns'
+    'dso-columns-list': modifier === 'columns',
+    'dso-img-list': modifier === 'img-list'
   })}">
       ${children}
     </ol>
@@ -26,7 +28,12 @@ export function listTemplate({ type, items, modifier }) {
   const children = html `
     ${items.map(item => html `
       <li class="${classMap({ 'list-group-item': modifier === 'group' })}">
-        ${item}
+        ${modifier === 'img-list' ?
+    html `
+            <img src=${item.imgSrc} />
+          `
+    : nothing}
+        ${item.text}
       </li>
     `)}
   `;

package/dist/collection/components/map-controls/map-controls.css

@@ -104,13 +104,21 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 #toggle-visibility-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 #toggle-visibility-button.btn-sm dso-icon,
-#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after {
+#toggle-visibility-button.btn-sm svg.di, #toggle-visibility-button.btn-sm.extern::after, #toggle-visibility-button.btn-sm.download::after, #toggle-visibility-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+#toggle-visibility-button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+#toggle-visibility-button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 #toggle-visibility-button.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -149,6 +157,59 @@ button::-moz-focus-inner {
   margin-left: 8px;
   margin-right: -8px;
 }
+#toggle-visibility-button.dso-spinner-left[disabled], #toggle-visibility-button.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+#toggle-visibility-button.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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+#toggle-visibility-button.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+#toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+#toggle-visibility-button.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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+#toggle-visibility-button.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+#toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 #toggle-visibility-button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
@@ -225,13 +286,21 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 #zoom-buttons button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 #zoom-buttons button.btn-sm dso-icon,
-#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after {
+#zoom-buttons button.btn-sm svg.di, #zoom-buttons button.btn-sm.extern::after, #zoom-buttons button.btn-sm.download::after, #zoom-buttons button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+#zoom-buttons button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+#zoom-buttons button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 #zoom-buttons button.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -270,6 +339,59 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+#zoom-buttons button.dso-spinner-left[disabled], #zoom-buttons button.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+#zoom-buttons button.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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+#zoom-buttons button.dso-spinner-left:not([disabled]):hover::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: %23fff; 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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+#zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+#zoom-buttons button.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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+#zoom-buttons button.dso-spinner-right:not([disabled]):hover::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: %23fff; 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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+#zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 #zoom-buttons button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
@@ -320,6 +442,9 @@ button::-moz-focus-inner {
 #close-button[disabled] {
   color: #afcf9d;
 }
+#close-button[disabled].dso-spinner-left, #close-button[disabled].dso-spinner-right {
+  color: #39870c;
+}
 #close-button:not([disabled]):hover {
   color: #676cb0;
   text-decoration: underline;
@@ -364,6 +489,26 @@ button::-moz-focus-inner {
 #close-button.extern:not([disabled]):hover::after, #close-button.extern:not([disabled]):active::after {
   --dso-icon: var(--di-external-link-scampi);
 }
+#close-button.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;
+}
+#close-button.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;
+}
 #close-button > span {
   position: absolute;
   width: 1px;

package/dist/collection/components/ozon-content/nodes/figuur.node.js

@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
+export class OzonContentFiguurNode {
+  constructor() {
+    this.name = [
+      'Figuur',
+    ];
+  }
+  render(node) {
+    var _a, _b, _c, _d, _e;
+    const childNodes = Array.from(node.childNodes);
+    const titel = (_a = childNodes.find(n => getNodeName(n) === 'Titel')) === null || _a === void 0 ? void 0 : _a.textContent;
+    const bijschrift = (_b = childNodes.find(n => getNodeName(n) === 'Bijschrift')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const illustratieNode = childNodes.find(n => getNodeName(n) === 'Illustratie');
+    if (illustratieNode instanceof Element) {
+      return (h("div", { class: "dso-ozon-figuur" },
+        h("dso-image-overlay", null,
+          h("img", { src: (_c = illustratieNode.getAttribute('naam')) !== null && _c !== void 0 ? _c : undefined, alt: (_e = (_d = titel !== null && titel !== void 0 ? titel : illustratieNode.getAttribute('alt')) !== null && _d !== void 0 ? _d : illustratieNode.getAttribute('naam')) !== null && _e !== void 0 ? _e : undefined })),
+        bijschrift && (h("span", { class: "figuur-bijschrift" }, bijschrift))));
+    }
+  }
+}

package/dist/collection/components/ozon-content/nodes/{illustratie.node.js → inline-tekst-afbeelding.node.js}

@@ -1,9 +1,9 @@
 import { h } from '@stencil/core';
-export class OzonContentIllustratieNode {
+export class OzonContentInlineTekstAfbeeldingNode {
   constructor() {
     this.name = [
+      'InlineTekstAfbeelding',
       'Illustratie',
-      'InlineTekstAfbeelding'
     ];
   }
   render(node) {

package/dist/collection/components/ozon-content/nodes/int-io-ref.node.js

@@ -0,0 +1,27 @@
+import { h } from '@stencil/core';
+export class OzonContentIntIoRefNode {
+  constructor() {
+    this.name = 'IntIoRef';
+  }
+  render(node, { mapNodeToJsx, emitAnchorClick }) {
+    const ref = node.getAttribute('ref');
+    if (!ref) {
+      return mapNodeToJsx(node.childNodes);
+    }
+    const intRefOnClick = (event) => {
+      event.preventDefault();
+      const target = event.currentTarget;
+      if (!(target instanceof HTMLAnchorElement)) {
+        return;
+      }
+      const { href } = target;
+      emitAnchorClick({
+        node: this.name,
+        href,
+        documentComponent: ref,
+        originalEvent: event
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/int-ref.node.js

@@ -16,6 +16,7 @@ export class OzonContentIntRefNode {
       }
       const { href } = target;
       emitAnchorClick({
+        node: this.name,
         href,
         documentComponent: ref,
         originalEvent: event

package/dist/collection/components/ozon-content/ozon-content-mapper.js

@@ -2,10 +2,12 @@ import { Fragment, h } from '@stencil/core';
 import { OzonContentAlNode } from './nodes/al.node';
 import { OzonContentDocumentNode } from './nodes/document.node';
 import { OzonContentExtRefNode } from './nodes/ext-ref.node';
-import { OzonContentIllustratieNode } from './nodes/illustratie.node';
+import { OzonContentFiguurNode } from './nodes/figuur.node';
 import { OzonContentInhoudNode } from './nodes/inhoud.node';
+import { OzonContentInlineTekstAfbeeldingNode } from './nodes/inline-tekst-afbeelding.node';
 import { OzonContentOpschriftNode } from './nodes/opschrift.node';
 import { OzonContentInlineNodes } from './nodes/inline.nodes';
+import { OzonContentIntIoRefNode } from './nodes/int-io-ref.node';
 import { OzonContentIntRefNode } from './nodes/int-ref.node';
 import { OzonContentNootNode } from './nodes/noot.node';
 import { OzonContentTableNode } from './nodes/table.node';
@@ -23,9 +25,11 @@ export class Mapper {
       new OzonContentExtRefNode(),
       new OzonContentAlNode(),
       new OzonContentInlineNodes(),
-      new OzonContentIllustratieNode(),
+      new OzonContentInlineTekstAfbeeldingNode(),
       new OzonContentNootNode(),
-      new OzonContentTableNode()
+      new OzonContentTableNode(),
+      new OzonContentIntIoRefNode(),
+      new OzonContentFiguurNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {

package/dist/collection/components/ozon-content/ozon-content.css

@@ -69,6 +69,9 @@ button.toggle-note.extern::after, button.toggle-note.download::after {
 button.toggle-note[disabled] {
   color: #afcf9d;
 }
+button.toggle-note[disabled].dso-spinner-left, button.toggle-note[disabled].dso-spinner-right {
+  color: #39870c;
+}
 button.toggle-note:not([disabled]):hover {
   color: #676cb0;
   text-decoration: underline;
@@ -113,6 +116,26 @@ button.toggle-note.extern[disabled]::after {
 button.toggle-note.extern:not([disabled]):hover::after, button.toggle-note.extern:not([disabled]):active::after {
   --dso-icon: var(--di-external-link-scampi);
 }
+button.toggle-note.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;
+}
+button.toggle-note.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;
+}
 button.toggle-note dso-icon + span:not(.sr-only),
 button.toggle-note svg.di + span:not(.sr-only),
 button.toggle-note span:not(.sr-only) + dso-icon,
@@ -169,15 +192,9 @@ span[role=paragraph] {
   text-align: right;
 }
 
-.od-Figuur img {
-  margin-left: 25px;
-  max-width: 100%;
-  height: auto;
-}
-
-.od-Figuur .od-Bijschrift {
+.dso-ozon-figuur .figuur-bijschrift {
+  display: block;
   font-size: 0.75rem;
-  margin-left: 25px;
   padding-bottom: 2.5rem;
 }
 

package/dist/collection/components/ozon-content/ozon-content.js

@@ -40,9 +40,11 @@ export class OzonContent {
     const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
     if (this.deleted) {
       return (h("section", null,
+        h("slot", { name: "prefix" }),
         h("span", { class: "deleted-start" }, "Begin verwijderd element"),
         transformed,
-        h("span", { class: "deleted-end" }, "Einde verwijderd element")));
+        h("span", { class: "deleted-end" }, "Einde verwijderd element"),
+        h("slot", { name: "suffix" })));
     }
     return (h(Host, { onClick: (e) => this.handleHostOnClick(e) },
       h("slot", { name: "prefix" }),

package/dist/collection/components/pagination/pagination.css

@@ -14,7 +14,7 @@
 .pagination > li {
   display: inline-block;
   font-weight: bold;
-  line-height: 28px;
+  line-height: calc(2rem - 4px);
   text-align: center;
   vertical-align: middle;
 }
@@ -23,10 +23,10 @@
   align-items: center;
   color: #39870c;
   display: flex;
-  height: 32px;
+  height: 2rem;
   justify-content: center;
   position: relative;
-  width: 32px;
+  width: 2rem;
 }
 .pagination > li > a:active,
 .pagination > li > span:active {
@@ -37,7 +37,7 @@
   border-radius: 50%;
 }
 .pagination > li a {
-  line-height: 32px;
+  line-height: 2rem;
   text-decoration: none;
 }
 .pagination > li a:hover, .pagination > li a:focus {

package/dist/collection/components/pagination/pagination.js

@@ -15,19 +15,22 @@ export class Pagination {
   }
   ;
   render() {
+    var _a;
     if (!this.totalPages) {
       return null;
     }
+    const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
     const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
+    const currentPageOutOfBounds = currentPage < pages[0] || currentPage > pages[pages.length - 1];
     return (h("ul", { class: "pagination" },
-      h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage - 2]) },
+      h("li", { class: (currentPage <= pages[0] || currentPageOutOfBounds) ? '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("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
+      pages.map(page => (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))))),
-      h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage]) },
+      h("li", { class: (currentPage >= pages[pages.length - 1] || currentPageOutOfBounds) ? '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" })))));
   }
   static get is() { return "dso-pagination"; }