@dso-toolkit/core 42.0.0 → 43.0.0

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,

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.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"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -47,6 +47,11 @@ export class Tooltip {
         state.styles.popper = Object.assign(Object.assign({}, state.styles.popper), { maxWidth: `${width}px` });
       },
     };
+    this.keyDownListener = (event) => {
+      if (event.key === 'Escape') {
+        this.deactivate();
+      }
+    };
   }
   /**
    * Activate the tooltip (Sets the `active` attribute)
@@ -105,6 +110,7 @@ export class Tooltip {
           (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
             modifiers: [{ name: 'eventListeners', enabled: true }]
           });
+          document.addEventListener('keydown', this.keyDownListener);
         });
       }
     }
@@ -113,6 +119,7 @@ export class Tooltip {
         (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
           modifiers: [{ name: 'eventListeners', enabled: false }]
         });
+        document.removeEventListener('keydown', this.keyDownListener);
       }
       setTimeout(() => (this.hidden = true), transitionDuration);
     }

package/dist/collection/components/tree-view/tree-item.js

@@ -8,7 +8,7 @@ export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) =
         h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
           h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
       : h("dso-icon", null)),
-    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
       item.href
         ? h("a", { href: item.href, tabindex: "-1" }, item.label)

package/dist/collection/components/tree-view/tree-view.js

@@ -1,4 +1,4 @@
-import { h, Component, Event, Prop } from '@stencil/core';
+import { h, Component, Event, Prop, Method } from '@stencil/core';
 import { DsoTreeItem } from './tree-item';
 export class TreeView {
   constructor() {
@@ -66,6 +66,28 @@ export class TreeView {
       }
     };
   }
+  /**
+   * Set focus on the last item in the specified path.
+   * The consumer is responsible for providing a TreeView collection where the last item is visible.
+   * @async
+   * @returns Whether the item was found.
+   */
+  async focusItem(path) {
+    var _a;
+    const tree = this.tree;
+    if (!tree || path.length === 0) {
+      return false;
+    }
+    const itemToFocus = path[path.length - 1];
+    const elementToFocus = Array.from((_a = tree.querySelectorAll('p')) !== null && _a !== void 0 ? _a : [])
+      .filter(item => item.offsetWidth > 0 && item.offsetHeight > 0)
+      .find(item => item.dataset['itemId'] === itemToFocus.id);
+    if (!elementToFocus) {
+      return false;
+    }
+    TreeView.setFocus(tree, elementToFocus);
+    return true;
+  }
   static setFocus(tree, target) {
     if (target) {
       Array.from(tree.querySelectorAll('p'))
@@ -142,7 +164,7 @@ export class TreeView {
   }
   render() {
     var _a;
-    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e) },
+    return (h("div", { id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: element => this.tree = element },
       h("ul", { role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length })))));
   }
   static get is() { return "dso-tree-view"; }
@@ -236,4 +258,38 @@ export class TreeView {
         }
       }
     }]; }
+  static get methods() { return {
+    "focusItem": {
+      "complexType": {
+        "signature": "(path: TreeViewItem[]) => Promise<boolean>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "TreeViewItem": {
+            "location": "import",
+            "path": "./tree-view.interfaces"
+          },
+          "HTMLElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<boolean>"
+      },
+      "docs": {
+        "text": "Set focus on the last item in the specified path.\nThe consumer is responsible for providing a TreeView collection where the last item is visible.",
+        "tags": [{
+            "name": "async",
+            "text": undefined
+          }, {
+            "name": "returns",
+            "text": "Whether the item was found."
+          }]
+      }
+    }
+  }; }
 }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -200,6 +200,13 @@ h6,
 .overlay-close-button[disabled] {
   color: #afcf9d;
 }
+.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,
+.expand[disabled].dso-spinner-left,
+.expand[disabled].dso-spinner-right,
+.overlay-close-button[disabled].dso-spinner-left,
+.overlay-close-button[disabled].dso-spinner-right {
+  color: #39870c;
+}
 .shrink:not([disabled]):hover,
 .expand:not([disabled]):hover,
 .overlay-close-button:not([disabled]):hover {
@@ -270,6 +277,30 @@ h6,
 .overlay-close-button.extern:not([disabled]):active::after {
   --dso-icon: var(--di-external-link-scampi);
 }
+.shrink.dso-spinner-left::before,
+.expand.dso-spinner-left::before,
+.overlay-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;
+}
+.shrink.dso-spinner-right::after,
+.expand.dso-spinner-right::after,
+.overlay-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;
+}
 .shrink dso-icon + span:not(.sr-only),
 .shrink svg.di + span:not(.sr-only),
 .shrink span:not(.sr-only) + dso-icon,
@@ -415,10 +446,18 @@ h6,
   line-height: 16px;
 }
 .sizing-buttons button.btn-sm dso-icon,
-.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after {
+.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.sizing-buttons button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.sizing-buttons button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .sizing-buttons button.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -457,6 +496,59 @@ h6,
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.sizing-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;
+}
+.sizing-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;
+}
+.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.sizing-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;
+}
+.sizing-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;
+}
+.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 .sizing-buttons button:focus-visible {
   background-color: #39870c;
   border-color: #39870c;
@@ -593,10 +685,18 @@ h6,
   line-height: 16px;
 }
 .filterpanel-buttons .cancel-button.btn-sm dso-icon,
-.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after {
+.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .filterpanel-buttons .cancel-button.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -635,11 +735,72 @@ h6,
   margin-left: 8px;
   margin-right: -8px;
 }
+.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.filterpanel-buttons .cancel-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;
+}
+.filterpanel-buttons .cancel-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;
+}
+.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.filterpanel-buttons .cancel-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;
+}
+.filterpanel-buttons .cancel-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;
+}
+.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 .filterpanel-buttons .cancel-button dso-icon,
-.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after {
+.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.filterpanel-buttons .cancel-button.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.filterpanel-buttons .cancel-button.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .filterpanel-buttons .apply-button {
   display: inline-block;
   font-size: 1em;
@@ -694,10 +855,18 @@ h6,
   line-height: 16px;
 }
 .filterpanel-buttons .apply-button.btn-sm dso-icon,
-.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after {
+.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .filterpanel-buttons .apply-button.download::after {
   background: var(--dso-icon, var(--di-download-wit)) no-repeat;
   background-position: center;
@@ -724,11 +893,44 @@ h6,
   margin-left: 8px;
   margin-right: -8px;
 }
+.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.filterpanel-buttons .apply-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: %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;
+}
+.filterpanel-buttons .apply-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: %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;
+}
 .filterpanel-buttons .apply-button dso-icon,
-.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after {
+.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.filterpanel-buttons .apply-button.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.filterpanel-buttons .apply-button.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .filterpanel-buttons .cancel-button + .apply-button {
   margin-left: 16px;
 }