@dso-toolkit/core 43.0.0 → 43.1.0

package/dist/collection/components/autosuggest/autosuggest.js

@@ -26,15 +26,25 @@ export class Autosuggest {
     this.suggestOnFocus = false;
     this.showSuggestions = false;
     this.notFound = false;
+    this.showLoading = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
-    this.debouncedEmitValue = debounce((value) => this.changeEmitter.emit(value), 200);
+    this.debouncedEmitValue = debounce((value) => {
+      this.changeEmitter.emit(value);
+      this.debouncedShowLoading();
+    }, 200);
+    this.debouncedShowLoading = debounce(() => {
+      if (this.inputValue) {
+        this.showLoading = true;
+      }
+    }, this.loadingDelayed);
     this.inputValue = '';
     this.onInput = (event) => {
       if (!(event.target instanceof HTMLInputElement)) {
         throw new Error("event.target is not instanceof HTMLInputElement");
       }
+      this.showLoading = !this.loadingDelayed;
       this.inputValue = event.target.value;
       this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
     };
@@ -186,6 +196,7 @@ export class Autosuggest {
     }
   }
   resetSelectedSuggestion() {
+    this.showLoading = !this.loadingDelayed;
     this.selectedSuggestion = undefined;
     this.input.setAttribute('aria-activedescendant', '');
   }
@@ -222,7 +233,7 @@ export class Autosuggest {
     const terms = this.input.value.split(' ').filter(t => t);
     return (h(Fragment, null,
       h("slot", null),
-      this.loading
+      this.loading && this.showLoading
         ? h("div", { class: "autosuggest-progress-box" },
           h("dso-progress-indicator", { label: this.loadingLabel }))
         : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions
@@ -303,6 +314,23 @@ export class Autosuggest {
       "reflect": false,
       "defaultValue": "\"Een moment geduld.\""
     },
+    "loadingDelayed": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "To delay progress indicator showing (in ms)."
+      },
+      "attribute": "loading-delayed",
+      "reflect": false
+    },
     "notFoundLabel": {
       "type": "string",
       "mutable": false,
@@ -342,7 +370,8 @@ export class Autosuggest {
   static get states() { return {
     "showSuggestions": {},
     "selectedSuggestion": {},
-    "notFound": {}
+    "notFound": {},
+    "showLoading": {}
   }; }
   static get events() { return [{
       "method": "selectEmitter",

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, notFoundLabel }, children) {
+export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, loadingDelayed, notFoundLabel }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
@@ -10,6 +10,7 @@ export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch,
       ?suggest-on-focus=${suggestOnFocus}
       ?loading=${loading}
       loading-label=${ifDefined(loadingLabel)}
+      loading-delayed=${ifDefined(loadingDelayed)}
       not-found-label=${ifDefined(notFoundLabel)}
     >
       ${children}

package/dist/collection/components/date-picker/date-picker.css

@@ -25,9 +25,9 @@
 .dso-date__input {
   display: block;
   width: 100%;
-  height: 40px;
+  height: calc(16px + 1.5rem);
   padding: 6px 14px;
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 1.5;
   color: #191919;
   background-color: #fff;
@@ -70,7 +70,7 @@
   border-width: 1px;
 }
 .dso-date__input[type=text] {
-  line-height: 40px;
+  line-height: calc(16px + 1.5rem);
 }
 .dso-date__input[size] {
   width: auto;

package/dist/collection/components/header/header.css

@@ -304,7 +304,7 @@ dso-dropdown-menu .dso-dropdown-options {
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-  font-size: 16px;
+  font-size: 1rem;
   margin: 2px 0 0;
   min-width: 160px;
   padding: 5px 0;
@@ -490,7 +490,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 .dropdown dso-dropdown-menu button {
   color: #39870c;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
   position: relative;
 }
@@ -568,7 +568,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 .dso-nav.dso-nav-sub > li > a {
   text-decoration: none;
-  font-size: 16px;
+  font-size: 1rem;
   margin-top: 4px;
   padding: 4px 8px 3px;
 }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -113,7 +113,7 @@
   color: #fff;
 }
 .open-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .open-button.btn-sm dso-icon,
 .open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {
@@ -246,7 +246,7 @@
   color: #afcf9d;
 }
 .close-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .close-button.btn-sm dso-icon,
 .close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {

package/dist/collection/components/highlight-box/highlight-box.css

@@ -48,7 +48,7 @@
   margin-top: 48px;
 }
 .dso-highlight-box.dso-has-counter {
-  padding-top: 40px;
+  padding-top: 2.5rem;
   position: relative;
 }
 .dso-highlight-box .dso-step-counter {
@@ -57,15 +57,20 @@
   border-radius: 50%;
   box-sizing: content-box;
   color: #fff;
-  font-size: 1.25em;
+  font-size: 1.25rem;
   font-weight: 500;
-  height: 32px;
+  height: 2rem;
   left: 16px;
-  line-height: 32px;
+  line-height: 2rem;
   position: absolute;
   text-align: center;
-  top: -24px;
-  width: 32px;
+  top: -1.5rem;
+  width: 2rem;
+}
+.dso-highlight-box .dso-step-counter svg.di {
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  width: 1.5rem;
 }
 .dso-highlight-box dso-icon {
   vertical-align: text-top;

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

@@ -86,7 +86,7 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 .open.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .open.btn-sm dso-icon,
 .open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {
@@ -277,7 +277,7 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 .close.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .close.btn-sm dso-icon,
 .close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {

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

@@ -1,29 +1,67 @@
-import { Component, Element, forceUpdate, h, Host, State } from "@stencil/core";
+import { Component, Element, forceUpdate, h, Host, Listen, State } from "@stencil/core";
+import debounce from 'debounce';
 import { createFocusTrap } from 'focus-trap';
 export class ImageOverlay {
   constructor() {
     this.active = false;
     this.focused = false;
+    this.zoomable = false;
+  }
+  loadListener(event) {
+    if (event.target instanceof HTMLImageElement) {
+      this.setZoomable(event.target);
+    }
   }
   componentDidLoad() {
-    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.resizeObserver = new ResizeObserver(debounce(() => {
+      const imgElement = this.host.querySelector('img');
+      if (imgElement instanceof HTMLImageElement) {
+        this.setZoomable(imgElement);
+      }
+    }, 200));
+    this.mutationObserver = new MutationObserver((e) => {
+      var _a, _b;
+      forceUpdate(this.host);
+      if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === 'childList') {
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        // <img> is gone or a new element.
+        this.initZoomableImage();
+      }
+    });
     this.mutationObserver.observe(this.host, {
       attributes: true,
-      subtree: true
+      subtree: true,
+      attributeFilter: ['src', 'alt'],
+      childList: true,
     });
+    this.initZoomableImage();
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
     (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+  }
+  initZoomableImage() {
+    var _a;
+    const imgElement = this.host.querySelector('img');
+    if (!(imgElement instanceof HTMLImageElement)) {
+      return;
+    }
+    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
+    if (imgElement.complete) {
+      this.setZoomable(imgElement);
+    }
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
+  }
+  setZoomable(imageElement) {
+    const { width, naturalWidth, height, naturalHeight } = imageElement;
+    this.zoomable = width < naturalWidth || height < naturalHeight;
   }
   render() {
     var _a;
     const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
-    return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
-        var _a;
-        (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
-      } },
+    return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
       this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
         h("div", { class: "wrapper" },
           h("img", { src: src, alt: alt }),
@@ -31,9 +69,9 @@ export class ImageOverlay {
             h("dso-icon", { icon: "times" }),
             h("span", null, "Sluiten"))))),
       h("slot", null),
-      h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
+      this.zoomable && (h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
         h("dso-icon", { icon: "external-link" }),
-        h("span", null, "Afbeelding vergroot weergeven"))));
+        h("span", null, "Afbeelding vergroot weergeven")))));
   }
   componentDidRender() {
     var _a, _b;
@@ -66,7 +104,15 @@ export class ImageOverlay {
   }; }
   static get states() { return {
     "active": {},
-    "focused": {}
+    "focused": {},
+    "zoomable": {}
   }; }
   static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "load",
+      "method": "loadListener",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/info-button/info-button.js

@@ -1,15 +1,19 @@
-import { h, Component, Event, Prop } from '@stencil/core';
+import { h, Component, Event, Prop, Method } from '@stencil/core';
 import clsx from 'clsx';
 export class InfoButton {
   constructor() {
     this.label = 'Toelichting bij optie';
   }
+  async setFocus() {
+    var _a;
+    (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   handleToggle(e) {
     this.active = !this.active;
     this.toggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
+    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) },
       h("span", { class: "sr-only" }, this.label)));
   }
   static get is() { return "dso-info-button"; }
@@ -94,4 +98,22 @@ export class InfoButton {
         }
       }
     }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }

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

@@ -39,7 +39,7 @@
   border-radius: 0 4px 4px 0;
   color: inherit;
   float: right;
-  font-size: 16px;
+  font-size: 1rem;
   margin-bottom: -4px;
   margin-left: 8px;
   margin-right: -4px;

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

@@ -104,7 +104,7 @@ 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.dso-spinner::before {
@@ -286,7 +286,7 @@ 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.dso-spinner::before {

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/ozon-content-mapper.js

@@ -2,17 +2,18 @@ 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';
 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 = [
@@ -24,10 +25,11 @@ export class Mapper {
       new OzonContentExtRefNode(),
       new OzonContentAlNode(),
       new OzonContentInlineNodes(),
-      new OzonContentIllustratieNode(),
+      new OzonContentInlineTekstAfbeeldingNode(),
       new OzonContentNootNode(),
       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

@@ -192,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/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/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/viewer-grid/viewer-grid.css

@@ -443,7 +443,7 @@ 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.dso-spinner::before {
@@ -650,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;
@@ -682,7 +682,7 @@ 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.dso-spinner::before {
@@ -820,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;
@@ -852,7 +852,7 @@ 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.dso-spinner::before {