@dso-toolkit/core 34.2.1 → 36.1.0

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

@@ -1,6 +1,6 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 export function labelTemplate({ status, label, button, compact, symbol }) {
   return html `
     <dso-label

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

@@ -1,7 +1,7 @@
 // Keep in sync with packages\css\src\components\list\list.template.ts (https://github.com/dso-toolkit/dso-toolkit/issues/1438)
 import { Type } from '@dso-toolkit/sources';
 import { html } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map';
+import { classMap } from 'lit-html/directives/class-map.js';
 function ul(children, modifier) {
   return html `
     <ul class="${classMap({

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

@@ -1,41 +1,39 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
-  return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _closeButtonElement, _toggleButtonElement;
+var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
 import { Component, h, Host, Prop, Event, State, Watch } from '@stencil/core';
 const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
 export class MapControls {
   constructor() {
     this.open = false;
     this.hideContent = !this.open;
-    _closeButtonElement.set(this, void 0);
-    _toggleButtonElement.set(this, void 0);
+    _MapControls_closeButtonElement.set(this, void 0);
+    _MapControls_toggleButtonElement.set(this, void 0);
   }
   watchOpen(open) {
     if (open) {
       this.hideContent = false;
-      setTimeout(() => __classPrivateFieldGet(this, _closeButtonElement).focus(), transitionDuration);
+      setTimeout(() => __classPrivateFieldGet(this, _MapControls_closeButtonElement, "f").focus(), transitionDuration);
     }
     else {
       setTimeout(() => {
         this.hideContent = true;
-        __classPrivateFieldGet(this, _toggleButtonElement).focus();
+        __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f").focus();
       }, transitionDuration);
     }
   }
   render() {
     return (h(Host, null,
-      h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _toggleButtonElement, element) },
+      h("button", { type: "button", id: "toggle-visibility-button", onClick: () => this.open = !this.open, ref: element => __classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f") },
         h("dso-icon", { icon: "layers" }),
         h("span", null, "Kaartlagen")),
       h("div", { id: "zoom-buttons" },
@@ -48,7 +46,7 @@ export class MapControls {
       h("section", { hidden: this.hideContent },
         h("header", null,
           h("h2", null, "Kaartlagen"),
-          h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _closeButtonElement, element) },
+          h("button", { type: "button", id: "close-button", onClick: () => this.open = false, ref: element => __classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f") },
             h("span", null, "Sluit dialoog"),
             h("dso-icon", { icon: "times" }))),
         h("div", { class: "content" },
@@ -146,4 +144,4 @@ export class MapControls {
       "methodName": "watchOpen"
     }]; }
 }
-_closeButtonElement = new WeakMap(), _toggleButtonElement = new WeakMap();
+_MapControls_closeButtonElement = new WeakMap(), _MapControls_toggleButtonElement = new WeakMap();

package/dist/collection/components/ozon-content/get-node-name.function.js

@@ -0,0 +1,9 @@
+export function getNodeName(node) {
+  if (node instanceof Element) {
+    return node.localName;
+  }
+  if (node.nodeName.includes(':')) {
+    return node.nodeName.substring(node.nodeName.indexOf(':') + 1);
+  }
+  return node.nodeName;
+}

package/dist/collection/components/ozon-content/nodes/al.node.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
+export class OzonContentAlNode {
+  constructor() {
+    this.name = 'Al';
+  }
+  render(node, { mapNodeToJsx, path }) {
+    const nestedAl = path.some(node => getNodeName(node) === 'Al');
+    const content = mapNodeToJsx(node.childNodes);
+    return nestedAl
+      ? h("span", { role: "paragraph" }, content)
+      : h("p", null, content);
+  }
+}

package/dist/collection/components/ozon-content/nodes/document.node.js

@@ -0,0 +1,9 @@
+import { Fragment, h } from '@stencil/core';
+export class OzonContentDocumentNode {
+  constructor() {
+    this.name = '#document';
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/nodes/ext-ref.node.js

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+export class OzonContentExtRefNode {
+  constructor() {
+    this.name = [
+      'ExtRef',
+      'ExtIoRef'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    var _a;
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+      h("span", { class: "sr-only" }, "opent in nieuw venster"),
+      mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/fallback.node.js

@@ -0,0 +1,11 @@
+import { h } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
+export class OzonContentFallbackNode {
+  constructor() {
+    // This name does not match any elements
+    this.name = ['<fallback>'];
+  }
+  render(node, { mapNodeToJsx }) {
+    return (h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/illustratie.node.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export class OzonContentIllustratieNode {
+  constructor() {
+    this.name = [
+      'Illustratie',
+      'InlineTekstAfbeelding'
+    ];
+  }
+  render(node) {
+    var _a, _b, _c, _d;
+    return (h("img", { src: (_a = node.getAttribute('naam')) !== null && _a !== void 0 ? _a : undefined, alt: (_b = node.getAttribute('naam')) !== null && _b !== void 0 ? _b : undefined, height: (_c = node.getAttribute('hoogte')) !== null && _c !== void 0 ? _c : undefined, width: (_d = node.getAttribute('breedte')) !== null && _d !== void 0 ? _d : undefined }));
+  }
+}

package/dist/collection/components/ozon-content/nodes/inhoud.node.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+export class OzonContentInhoudNode {
+  constructor() {
+    this.name = [
+      'Inhoud',
+      'Opschrift',
+      'ContainerBlocksType',
+      'BlockMixedcontentMetMaximaleInlinesMarkersPopupsType'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("div", { class: "dso-rich-content" }, mapNodeToJsx(node.childNodes));
+  }
+}

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

@@ -0,0 +1,21 @@
+import { h } from '@stencil/core';
+export class OzonContentInlineNodes {
+  constructor() {
+    this.name = [
+      'sub',
+      'sup',
+      'strong',
+      'b',
+      'u',
+      'i',
+      'br'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    if (node.localName === 'br') {
+      return h("br", null);
+    }
+    const Tag = node.localName;
+    return h(Tag, null, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/nodes/int-ref.node.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export class OzonContentIntRefNode {
+  constructor() {
+    this.name = 'IntRef';
+  }
+  render(node, { mapNodeToJsx, emitAnchorClick }) {
+    const ref = node.getAttribute('ref');
+    if (!ref) {
+      return mapNodeToJsx(node.childNodes);
+    }
+    const intRefOnClick = (event) => {
+      event.preventDefault();
+      const target = event.currentTarget;
+      if (!(target instanceof HTMLAnchorElement)) {
+        return;
+      }
+      const { href } = target;
+      emitAnchorClick({
+        href,
+        documentComponent: ref,
+        originalEvent: event
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}

package/dist/collection/components/ozon-content/nodes/noot.node.js

@@ -0,0 +1,27 @@
+import { h, Fragment } from '@stencil/core';
+import { getNodeName } from '../get-node-name.function';
+export class OzonContentNootNode {
+  constructor() {
+    this.name = 'Noot';
+    this.handles = ['NootNummer'];
+  }
+  identify() {
+    return 'Noot';
+  }
+  render(node, { mapNodeToJsx, state: openNoteId, setState }) {
+    var _a, _b;
+    const noteId = node.getAttribute('id');
+    if (!noteId) {
+      console.error('Noot node without id', node);
+      return h(Fragment, null);
+    }
+    const noteControlsId = `dso-ozon-note-${noteId}`;
+    const childNodes = Array.from(node.childNodes);
+    const nootNummer = (_b = (_a = childNodes.find(n => getNodeName(n) === 'NootNummer')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : noteId;
+    return (h(Fragment, null,
+      h("sup", null,
+        h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? 'true' : 'false' }, nootNummer)),
+      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true },
+        h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
+  }
+}

package/dist/collection/components/ozon-content/nodes/table.node/colspec/colspec-mapper.js

@@ -0,0 +1,39 @@
+export function mapColspecs(count, nodeList) {
+  const elements = Array.from(nodeList);
+  const totalWidth = getTotalWidth(elements);
+  return {
+    totalWidth,
+    count,
+    columns: elements.map((element, index) => {
+      var _a;
+      const colNumber = element.getAttribute('colnum');
+      return {
+        name: (_a = element.getAttribute('colname')) !== null && _a !== void 0 ? _a : '',
+        number: colNumber ? parseInt(colNumber, 10) : index + 1,
+        width: getWidth(totalWidth, element)
+      };
+    })
+  };
+}
+function getTotalWidth(elements) {
+  return elements.reduce((totalWidth, element) => {
+    var _a, _b;
+    const width = (_b = (_a = element.getAttribute('colwidth')) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/, '')) !== null && _b !== void 0 ? _b : '';
+    const colWidth = parseInt(width, 10);
+    return totalWidth + (isNaN(colWidth) ? 0 : colWidth);
+  }, 0);
+}
+function getWidth(totalWidth, element) {
+  const width = element.getAttribute('colwidth');
+  if (!width) {
+    return undefined;
+  }
+  if (width === '*') {
+    return '100%';
+  }
+  if (width.includes('*') || width.match(/^[\d+]$/)) {
+    const colWidth = parseInt(width.replace(/[^0-9]/, ''), 10);
+    return `${Math.round(colWidth / totalWidth * 100)}%`;
+  }
+  return width;
+}

package/dist/collection/components/ozon-content/nodes/table.node/colspec/colspec.interface.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/collection/components/ozon-content/nodes/table.node/index.js

@@ -0,0 +1 @@
+export { OzonContentTableNode } from './table.node';

package/dist/collection/components/ozon-content/nodes/table.node/table-cell.js

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core/internal';
+function getData(cell) {
+  return {
+    moreRows: cell.getAttribute('morerows'),
+    nameStart: cell.getAttribute('namest'),
+    nameEnd: cell.getAttribute('nameend')
+  };
+}
+function getColspan({ columns }, nameStart, nameEnd) {
+  const colspecStart = columns.find(c => c.name === nameStart);
+  const colspecEnd = columns.find(c => c.name === nameEnd);
+  if (!colspecStart || !colspecEnd) {
+    return undefined;
+  }
+  const colspan = colspecEnd.number - colspecStart.number + 1;
+  return colspan === 1 ? undefined : colspan;
+}
+export const Cell = ({ context: { mapNodeToJsx }, colspecs, cell }) => {
+  const { moreRows, nameStart, nameEnd } = getData(cell);
+  const td = {
+    rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,
+    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined
+  };
+  return (h("td", Object.assign({}, td), mapNodeToJsx(cell.childNodes)));
+};

package/dist/collection/components/ozon-content/nodes/table.node/table-colgroup.js

@@ -0,0 +1,4 @@
+import { Fragment, h } from '@stencil/core';
+export const Colgroup = ({ colspecs }) => (colspecs.columns.length > 0
+  ? (h("colgroup", null, colspecs.columns.map(colspec => (h("col", { style: { width: colspec.width } })))))
+  : h(Fragment, null));

package/dist/collection/components/ozon-content/nodes/table.node/table-rows.js

@@ -0,0 +1,5 @@
+import { Fragment, h } from '@stencil/core';
+import { Cell } from './table-cell';
+export const Rows = ({ context, colspecs, rows }) => {
+  return (h(Fragment, null, rows.map(row => (h("tr", null, Array.from(row.children).map(cell => (h(Cell, { cell: cell, colspecs: colspecs, context: context }))))))));
+};

package/dist/collection/components/ozon-content/nodes/table.node/table.node.js

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { mapColspecs } from './colspec/colspec-mapper';
+import { Colgroup } from './table-colgroup';
+import { Rows } from './table-rows';
+function mapData(node) {
+  var _a, _b, _c;
+  const tgroup = node.querySelector(':scope > tgroup');
+  const colAttribute = (_a = tgroup === null || tgroup === void 0 ? void 0 : tgroup.getAttribute('cols')) !== null && _a !== void 0 ? _a : undefined;
+  const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;
+  return {
+    caption: (_c = (_b = node.querySelector(':scope > title')) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : undefined,
+    colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(':scope > colspec')) : undefined,
+    headRows: Array.from(node.querySelectorAll(':scope > tgroup > thead > row')),
+    bodyRows: Array.from(node.querySelectorAll(':scope > tgroup > tbody > row'))
+  };
+}
+export class OzonContentTableNode {
+  constructor() {
+    this.name = 'table';
+    this.handles = ['title', 'tgroup', 'colspec', 'thead', 'tbody', 'row', 'cell'];
+  }
+  render(node, context) {
+    const { caption, colspecs, headRows, bodyRows } = mapData(node);
+    return (h("table", { class: "table" },
+      caption && (h("caption", null, caption)),
+      colspecs && (h(Colgroup, { colspecs: colspecs })),
+      headRows.length > 0 && (h("thead", null,
+        h(Rows, { rows: headRows, colspecs: colspecs, context: context }))),
+      bodyRows.length > 0 && (h("tbody", null,
+        h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))));
+  }
+}

package/dist/collection/components/ozon-content/nodes/text.node.js

@@ -0,0 +1,9 @@
+import { Fragment, h } from '@stencil/core';
+export class OzonContentTextNode {
+  constructor() {
+    this.name = '#text';
+  }
+  render(node) {
+    return h(Fragment, null, node.textContent);
+  }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,80 @@
+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 { OzonContentInhoudNode } from './nodes/inhoud.node';
+import { OzonContentInlineNodes } from './nodes/inline.nodes';
+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';
+export class Mapper {
+  constructor() {
+    this.mappers = [
+      new OzonContentTextNode(),
+      new OzonContentDocumentNode(),
+      new OzonContentInhoudNode(),
+      new OzonContentIntRefNode(),
+      new OzonContentExtRefNode(),
+      new OzonContentAlNode(),
+      new OzonContentInlineNodes(),
+      new OzonContentIllustratieNode(),
+      new OzonContentNootNode(),
+      new OzonContentTableNode()
+    ];
+    this.skip = this.mappers.reduce((t, m) => {
+      if (m.handles) {
+        t.push(...m.handles);
+      }
+      return t;
+    }, []);
+    this.fallbackNode = new OzonContentFallbackNode();
+    this.domParser = new DOMParser();
+  }
+  findMapper(name) {
+    var _a;
+    if (this.skip.includes(name)) {
+      return undefined;
+    }
+    return (_a = this.mappers.find(m => {
+      if (Array.isArray(m.name)) {
+        return m.name.includes(name);
+      }
+      return m.name === name;
+    })) !== null && _a !== void 0 ? _a : this.fallbackNode;
+  }
+  mapNodeToJsx(node, context, path) {
+    var _a;
+    if (node instanceof NodeList) {
+      return h(Fragment, null, Array.from(node).map(n => this.mapNodeToJsx(n, context, path)));
+    }
+    if (Array.isArray(node)) {
+      return h(Fragment, null, node.map(n => this.mapNodeToJsx(n, context, path)));
+    }
+    const nodeName = getNodeName(node);
+    const mapper = this.findMapper(nodeName);
+    if (!mapper) {
+      return h(Fragment, null);
+    }
+    const identity = (_a = mapper.identify) === null || _a === void 0 ? void 0 : _a.call(mapper, node);
+    const state = identity ? context.state[identity] : undefined;
+    const setState = identity ? (state) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: state })) : undefined;
+    return mapper.render(node, {
+      mapNodeToJsx: n => this.mapNodeToJsx(n, context, [...path, node]),
+      emitAnchorClick: context.emitAnchorClick,
+      setState,
+      state,
+      path
+    });
+  }
+  transform(xml, context) {
+    if (!this.cache || this.cache.xml !== xml) {
+      this.cache = { xml, document: this.domParser.parseFromString(xml, 'text/xml') };
+    }
+    const xmlDocument = this.cache.document;
+    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);
+  }
+}

package/dist/collection/components/ozon-content/ozon-content-node-context.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ozon-content/ozon-content-node-state.interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,42 +1,103 @@
-dso-ozon-content {
+:host {
   display: block;
 }
 
-.noot {
+button.toggle-note {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
   text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
+button.toggle-note:focus, button.toggle-note:focus-visible {
+  outline-offset: 2px;
+}
+button.toggle-note:active {
+  outline: 0;
+}
+button.toggle-note.extern::after, button.toggle-note.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
 }
-.noot:not(.dso-open) + .od-Al {
-  display: none;
+button.toggle-note[disabled] {
+  color: #afcf9d;
 }
-.noot.dso-open + .od-Al {
-  display: block;
+button.toggle-note:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+}
+button.toggle-note:not([disabled]):active {
+  color: #676cb0;
 }
-.noot + .od-Al {
-  margin: 4px 0;
-  padding: 8px 32px 8px 8px;
+button.toggle-note.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
   position: relative;
 }
-.noot + .od-Al > a {
-  display: block;
-  height: 24px;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  top: 0;
-  width: 24px;
-}
-.noot + .od-Al > a::before {
-  background: var(--dso-icon, var(--di-times-zwart)) no-repeat;
+button.toggle-note.extern::after, button.toggle-note.download::after {
+  position: relative;
+  top: -2px;
+}
+button.toggle-note.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
   height: 1.5em;
   vertical-align: top;
   width: 1.5em;
-  content: "";
+}
+button.toggle-note.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+button.toggle-note.download:not([disabled]):hover::after, button.toggle-note.download:not([disabled]):active::after {
+  --dso-icon: var(--di-download-scampi);
+}
+button.toggle-note.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+button.toggle-note.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+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-icon + span:not(.sr-only),
+button.toggle-note svg.di + span:not(.sr-only),
+button.toggle-note span:not(.sr-only) + dso-icon,
+button.toggle-note span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+button.toggle-note dso-icon,
+button.toggle-note svg.di,
+button.toggle-note span {
+  vertical-align: middle;
+}
+
+span[role=section],
+span[role=paragraph] {
   display: block;
 }
-.noot + .od-Al {
-  background-color: #ebf3e6;
+
+.fallback {
+  display: block;
 }
 
 .od-Term {