@dso-toolkit/core 43.0.0 → 44.0.0

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;
@@ -89,9 +89,13 @@
 
 .dso-truncate.dso-label-content {
   display: inline-block;
-  max-width: 184px;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: bottom;
   white-space: nowrap;
+}
+
+:host([removable]) .dso-truncate.dso-label-content {
+  max-width: calc(100% - 28px);
 }

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

@@ -1,10 +1,16 @@
-import { Component, h, Prop, Event, State, Element, Fragment, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, State, Element, Watch, Host } from '@stencil/core';
 import clsx from 'clsx';
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
 export class Label {
   constructor() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.labelText = this.host.innerText;
+      if (this.truncate) {
+        this.truncateLabel();
+      }
+    });
     this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
@@ -40,35 +46,33 @@ export class Label {
     });
   }
   componentDidLoad() {
+    this.labelText = this.host.innerText;
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
     if (this.truncate) {
       this.startTruncate();
     }
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     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(Fragment, null,
+    return (h(Host, { "aria-roledescription": (this.truncate && this.truncatedContent) ? 'Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus.' : undefined },
       h("span", { id: "toggle-anchor", class: clsx('dso-label', {
           [`dso-label-${this.status}`]: this.status,
           'dso-compact': this.compact && !this.removable,
@@ -83,9 +87,11 @@ export class Label {
           }), 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("span", { class: "sr-only" },
+            "Verwijder: ",
+            this.labelText),
           h("dso-icon", { icon: "times" })))),
-      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
+      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -170,7 +176,8 @@ export class Label {
     "removeFocus": {},
     "textHover": {},
     "textFocus": {},
-    "truncatedContent": {}
+    "truncatedContent": {},
+    "labelText": {}
   }; }
   static get events() { return [{
       "method": "removeClick",

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

@@ -1,14 +1,14 @@
 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, truncate, symbol }) {
+export function labelTemplate({ status, label, removable, onRemoveClick, compact, truncate, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
-      @removeClick=${ifDefined(button === null || button === void 0 ? void 0 : button.onClick)}
+      @removeClick=${ifDefined(onRemoveClick)}
       ?truncate=${truncate}
       ?compact=${compact}
-      ?removable=${button}
+      ?removable=${removable}
     >
       ${symbol
     ? html `

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/ext-ref.node.js

@@ -7,8 +7,8 @@ export class OzonContentExtRefNode {
     ];
   }
   render(node, { mapNodeToJsx }) {
-    var _a;
-    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+    const href = node.tagName === 'ExtIoRef' ? node.getAttribute('href') : node.getAttribute('ref');
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined },
       h("span", { class: "sr-only" }, "opent in nieuw venster"),
       mapNodeToJsx(node.childNodes)));
   }

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

@@ -15,6 +15,9 @@
   color: #39870c;
   text-decoration: underline;
   cursor: pointer;
+  color: #275937;
+  font-weight: 600;
+  text-decoration: none;
 }
 :host([interactive]):hover, :host([interactive]):focus {
   color: #676cb0;
@@ -24,6 +27,10 @@
   text-decoration: none;
 }
 
+:host([interactive=sub]) {
+  color: #191919;
+}
+
 .deleted-start,
 .deleted-end {
   position: absolute;
@@ -192,15 +199,9 @@ span[role=paragraph] {
   text-align: right;
 }
 
-.od-Figuur img {
-  margin-left: 25px;
-  max-width: 100%;
-  height: auto;
-}
-
-.od-Figuur .od-Bijschrift {
+.dso-ozon-figuur .figuur-bijschrift {
+  display: block;
   font-size: 0.75rem;
-  margin-left: 25px;
   padding-bottom: 2.5rem;
 }
 

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

@@ -16,13 +16,18 @@ export class OzonContent {
      *
      * **Do not** use this without an accessible companion element! `interactive` is only
      * meant to ease the use of the companion element for mouse/touch users.
+     *
+     * * `true`: Interactive anchor-look-alike
+     * * `"sub"`: Interactive anchor-look-alike for sub navigation
+     * * `false | undefined`: Disabled
      */
     this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
   handleHostOnClick(e) {
-    if (!this.interactive) {
+    // '' is `true`: <dso-ozon-content interactive>
+    if (this.interactive !== '' && !this.interactive) {
       return;
     }
     const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
@@ -114,18 +119,18 @@ export class OzonContent {
       "defaultValue": "false"
     },
     "interactive": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'sub' | '' | boolean",
+        "resolved": "\"\" | \"sub\" | boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users."
+        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users.\n\n* `true`: Interactive anchor-look-alike\n* `\"sub\"`: Interactive anchor-look-alike for sub navigation\n* `false | undefined`: Disabled"
       },
       "attribute": "interactive",
       "reflect": true,

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

@@ -3,9 +3,9 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function ozonContentTemplate({ content, inline, interactive, deleted, prefix, suffix, onAnchorClick, onClick }) {
   return html `
     <dso-ozon-content
+      interactive=${ifDefined(interactive || undefined)}
       .content=${content}
       ?inline=${inline}
-      ?interactive=${interactive}
       ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
       @dsoClick=${ifDefined(interactive ? onClick : undefined)}

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

@@ -153,6 +153,17 @@ h6,
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 .shrink,
 .expand,
 .overlay-close-button {
@@ -342,16 +353,6 @@ h6,
   top: 8px;
   right: 16px;
 }
-.overlay-close-button .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
 
 .dso-map-panel {
   background-color: #fff;
@@ -443,7 +444,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 +651,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 +683,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 +821,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 +853,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 {