@dso-toolkit/core 41.0.1 → 43.1.0

package/dist/collection/components/progress-bar/progress-bar.css

@@ -30,7 +30,7 @@
   background-color: #39870c;
   color: #fff;
   float: left;
-  font-size: 14px;
+  font-size: 0.875rem;
   height: 100%;
   line-height: 16px;
   text-align: center;

package/dist/collection/components/toggletip/toggletip.js

@@ -23,30 +23,18 @@ export class Toggletip {
       }
     };
     this.keyDownListener = (event) => {
+      var _a;
       if (!event.defaultPrevented && event.key == "Escape") {
         this.close();
-        this.button.focus();
+        (_a = this.infoButton) === null || _a === void 0 ? void 0 : _a.setFocus();
         event.preventDefault();
       }
       return;
     };
   }
-  componentDidRender() {
-    var _a, _b, _c;
-    const infoButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("dso-info-button");
-    if (!infoButton) {
-      throw Error("dso-info-button not found");
-    }
-    this.infoButton = infoButton;
-    const button = (_c = (_b = this.infoButton) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
-    if (!button) {
-      throw Error("button not found");
-    }
-    this.button = button;
-  }
   render() {
     return (h(Fragment, null,
-      h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }),
+      h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: element => this.infoButton = element }),
       h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small },
         h("slot", null))));
   }

package/dist/collection/components/tooltip/tooltip.css

@@ -59,7 +59,7 @@
   border-radius: 4px;
   color: #191919;
   display: inline-block;
-  font-size: 16px;
+  font-size: 1rem;
   max-width: 640px;
   padding: 8px 16px;
   position: relative;

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,
@@ -412,13 +443,21 @@ h6,
   color: #afcf9d;
 }
 .sizing-buttons button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .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;
@@ -558,7 +650,7 @@ h6,
   line-height: 1.5;
   min-width: 56px;
   padding: 11px 15px;
-  line-height: 16px;
+  line-height: 1rem;
 }
 .filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {
   outline-offset: 2px;
@@ -590,13 +682,21 @@ h6,
   color: #afcf9d;
 }
 .filterpanel-buttons .cancel-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .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;
@@ -659,7 +820,7 @@ h6,
   line-height: 1.5;
   min-width: 56px;
   padding: 11px 15px;
-  line-height: 16px;
+  line-height: 1rem;
 }
 .filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {
   outline-offset: 2px;
@@ -691,13 +852,21 @@ h6,
   color: #fff;
 }
 .filterpanel-buttons .apply-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .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;
 }