@dso-toolkit/core 42.0.0 → 43.0.0

package/dist/collection/components/image-overlay/image-overlay.css

@@ -89,10 +89,18 @@ button::-moz-focus-inner {
   line-height: 16px;
 }
 .open.btn-sm dso-icon,
-.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after {
+.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.open.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.open.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .open.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -131,6 +139,59 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.open.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;
+}
+.open.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;
+}
+.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.open.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;
+}
+.open.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;
+}
+.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 
 .dimmer {
   position: fixed;
@@ -219,10 +280,18 @@ button::-moz-focus-inner {
   line-height: 16px;
 }
 .close.btn-sm dso-icon,
-.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after {
+.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.close.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.close.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .close.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -260,4 +329,57 @@ button::-moz-focus-inner {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
+}
+.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.close.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;
+}
+.close.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;
+}
+.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.close.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;
+}
+.close.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;
+}
+.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
 }

package/dist/collection/components/label/label.css

@@ -1,5 +1,6 @@
 :host {
   display: inline-block;
+  max-width: 100%;
 }
 
 *,
@@ -81,4 +82,16 @@
   color: #191919;
   border: 1px solid #ccc;
   padding: 3px 7px;
+}
+.dso-label.dso-hover .dso-label-content {
+  text-decoration: line-through;
+}
+
+.dso-truncate.dso-label-content {
+  display: inline-block;
+  max-width: 184px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
 }

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

@@ -107,10 +107,18 @@ button::-moz-focus-inner {
   line-height: 16px;
 }
 #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;
@@ -228,10 +289,18 @@ button::-moz-focus-inner {
   line-height: 16px;
 }
 #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/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

@@ -12,6 +12,7 @@ import { OzonContentTableNode } from './nodes/table.node';
 import { OzonContentTextNode } from './nodes/text.node';
 import { getNodeName } from './get-node-name.function';
 import { OzonContentFallbackNode } from './nodes/fallback.node';
+import { OzonContentIntIoRefNode } from './nodes/int-io-ref.node';
 export class Mapper {
   constructor() {
     this.mappers = [
@@ -25,7 +26,8 @@ export class Mapper {
       new OzonContentInlineNodes(),
       new OzonContentIllustratieNode(),
       new OzonContentNootNode(),
-      new OzonContentTableNode()
+      new OzonContentTableNode(),
+      new OzonContentIntIoRefNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {