@dso-toolkit/core 45.1.0 → 46.0.0

package/dist/esm/dso-ozon-content.entry.js

@@ -1,35 +1,33 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-771c1291.js';
-import { i as isTabbable } from './index.esm-4510c39e.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-1a4dda48.js';
+import { i as isTabbable } from './index.esm-8fc07ad8.js';
 
 function getNodeName(node) {
   if (node instanceof Element) {
     return node.localName;
   }
-  if (node.nodeName.includes(':')) {
-    return node.nodeName.substring(node.nodeName.indexOf(':') + 1);
+  if (node.nodeName.includes(":")) {
+    return node.nodeName.substring(node.nodeName.indexOf(":") + 1);
   }
   return node.nodeName;
 }
 
 class OzonContentAlNode {
   constructor() {
-    this.name = 'Al';
+    this.name = "Al";
   }
   render(node, { mapNodeToJsx, path }) {
-    const nestedAl = path.some(node => {
+    const nestedAl = path.some((node) => {
       const nodeName = getNodeName(node);
-      return nodeName === 'Al' || nodeName === 'Opschrift';
+      return nodeName === "Al" || nodeName === "Opschrift";
     });
     const content = mapNodeToJsx(node.childNodes);
-    return nestedAl
-      ? h("span", { role: "paragraph" }, content)
-      : h("p", null, content);
+    return nestedAl ? h("span", { role: "paragraph" }, content) : h("p", null, content);
   }
 }
 
 class OzonContentDocumentNode {
   constructor() {
-    this.name = '#document';
+    this.name = "#document";
   }
   render(node, { mapNodeToJsx }) {
     return h(Fragment, null, mapNodeToJsx(node.childNodes));
@@ -38,13 +36,10 @@ class OzonContentDocumentNode {
 
 class OzonContentExtRefNode {
   constructor() {
-    this.name = [
-      'ExtRef',
-      'ExtIoRef'
-    ];
+    this.name = ["ExtRef", "ExtIoRef"];
   }
   render(node, { mapNodeToJsx }) {
-    const href = node.tagName === 'ExtIoRef' ? node.getAttribute('href') : node.getAttribute('ref');
+    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)));
@@ -54,13 +49,11 @@ class OzonContentExtRefNode {
 const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
   return (h("span", { class: "figuur-bijschrift" },
     bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud),
-    bron && (`${bijschrift ? ' ' : ''}(bron: ${mapNodeToJsx(bron)})`)));
+    bron && `${bijschrift ? " " : ""}(bron: ${mapNodeToJsx(bron)})`));
 };
 class OzonContentFiguurNode {
   constructor() {
-    this.name = [
-      'Figuur',
-    ];
+    this.name = ["Figuur"];
   }
   setImageDimensions(imageElement, schaal) {
     const { naturalHeight, naturalWidth } = imageElement;
@@ -75,45 +68,42 @@ class OzonContentFiguurNode {
   render(node, { mapNodeToJsx }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const childNodes = Array.from(node.childNodes);
-    const titel = (_a = childNodes.find(n => getNodeName(n) === 'Titel')) === null || _a === void 0 ? void 0 : _a.textContent;
-    const bron = (_b = childNodes.find(n => getNodeName(n) === 'Bron')) === null || _b === void 0 ? void 0 : _b.childNodes;
-    const illustratieNode = childNodes.find(n => getNodeName(n) === 'Illustratie');
-    const bijschriftNode = childNodes.find(n => getNodeName(n) === 'Bijschrift');
+    const titel = (_a = childNodes.find((n) => getNodeName(n) === "Titel")) === null || _a === void 0 ? void 0 : _a.textContent;
+    const bron = (_b = childNodes.find((n) => getNodeName(n) === "Bron")) === null || _b === void 0 ? void 0 : _b.childNodes;
+    const illustratieNode = childNodes.find((n) => getNodeName(n) === "Illustratie");
+    const bijschriftNode = childNodes.find((n) => getNodeName(n) === "Bijschrift");
     if (illustratieNode instanceof Element) {
       const illustratie = {
-        naam: illustratieNode.getAttribute('naam'),
-        breedte: illustratieNode.getAttribute('breedte'),
-        hoogte: illustratieNode.getAttribute('hoogte'),
-        uitlijning: illustratieNode.getAttribute('uitlijning'),
-        alt: illustratieNode.getAttribute('alt'),
-        schaal: illustratieNode.getAttribute('schaal'),
+        naam: illustratieNode.getAttribute("naam"),
+        breedte: illustratieNode.getAttribute("breedte"),
+        hoogte: illustratieNode.getAttribute("hoogte"),
+        uitlijning: illustratieNode.getAttribute("uitlijning"),
+        alt: illustratieNode.getAttribute("alt"),
+        schaal: illustratieNode.getAttribute("schaal"),
       };
-      const bijschrift = bijschriftNode instanceof Element ? {
-        inhoud: bijschriftNode.childNodes,
-        locatie: (_c = bijschriftNode.getAttribute('locatie')) !== null && _c !== void 0 ? _c : 'onder',
-      }
+      const bijschrift = bijschriftNode instanceof Element
+        ? {
+          inhoud: bijschriftNode.childNodes,
+          locatie: (_c = bijschriftNode.getAttribute("locatie")) !== null && _c !== void 0 ? _c : "onder",
+        }
         : undefined;
-      return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : 'onder'}` },
-        titel && (h("span", { class: "figuur-titel" }, titel)),
-        (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === 'boven' && h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }),
+      return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` },
+        titel && h("span", { class: "figuur-titel" }, titel),
+        (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })),
         h("dso-image-overlay", null,
           h("div", { slot: "titel" },
             h("span", null, titel)),
           h("img", { src: (_d = illustratie.naam) !== null && _d !== void 0 ? _d : undefined, alt: (_g = (_f = (_e = illustratie.alt) !== null && _e !== void 0 ? _e : titel) !== null && _f !== void 0 ? _f : illustratie.naam) !== null && _g !== void 0 ? _g : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }),
           h("div", { slot: "bijschrift" },
             h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))),
-        ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === 'onder' || (!bijschrift && bron)) && h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })));
+        ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
     }
   }
 }
 
 class OzonContentInhoudNode {
   constructor() {
-    this.name = [
-      'Inhoud',
-      'ContainerBlocksType',
-      'BlockMixedcontentMetMaximaleInlinesMarkersPopupsType'
-    ];
+    this.name = ["Inhoud", "ContainerBlocksType", "BlockMixedcontentMetMaximaleInlinesMarkersPopupsType"];
   }
   render(node, { mapNodeToJsx }) {
     return h("div", { class: "dso-rich-content" }, mapNodeToJsx(node.childNodes));
@@ -122,20 +112,17 @@ class OzonContentInhoudNode {
 
 class OzonContentInlineTekstAfbeeldingNode {
   constructor() {
-    this.name = [
-      'InlineTekstAfbeelding',
-      'Illustratie',
-    ];
+    this.name = ["InlineTekstAfbeelding", "Illustratie"];
   }
   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 }));
+    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 }));
   }
 }
 
 class OzonContentOpschriftNode {
   constructor() {
-    this.name = 'Opschrift';
+    this.name = "Opschrift";
   }
   render(node, { mapNodeToJsx }) {
     return h(Fragment, null, mapNodeToJsx(node.childNodes));
@@ -144,18 +131,10 @@ class OzonContentOpschriftNode {
 
 class OzonContentInlineNodes {
   constructor() {
-    this.name = [
-      'sub',
-      'sup',
-      'strong',
-      'b',
-      'u',
-      'i',
-      'br'
-    ];
+    this.name = ["sub", "sup", "strong", "b", "u", "i", "br"];
   }
   render(node, { mapNodeToJsx }) {
-    if (node.localName === 'br') {
+    if (node.localName === "br") {
       return h("br", null);
     }
     const Tag = node.localName;
@@ -165,10 +144,10 @@ class OzonContentInlineNodes {
 
 class OzonContentIntIoRefNode {
   constructor() {
-    this.name = 'IntIoRef';
+    this.name = "IntIoRef";
   }
   render(node, { mapNodeToJsx, emitAnchorClick }) {
-    const ref = node.getAttribute('ref');
+    const ref = node.getAttribute("ref");
     if (!ref) {
       return mapNodeToJsx(node.childNodes);
     }
@@ -183,7 +162,7 @@ class OzonContentIntIoRefNode {
         node: this.name,
         href,
         documentComponent: ref,
-        originalEvent: event
+        originalEvent: event,
       });
     };
     return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
@@ -192,10 +171,10 @@ class OzonContentIntIoRefNode {
 
 class OzonContentIntRefNode {
   constructor() {
-    this.name = 'IntRef';
+    this.name = "IntRef";
   }
   render(node, { mapNodeToJsx, emitAnchorClick }) {
-    const ref = node.getAttribute('ref');
+    const ref = node.getAttribute("ref");
     if (!ref) {
       return mapNodeToJsx(node.childNodes);
     }
@@ -210,7 +189,7 @@ class OzonContentIntRefNode {
         node: this.name,
         href,
         documentComponent: ref,
-        originalEvent: event
+        originalEvent: event,
       });
     };
     return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
@@ -219,27 +198,27 @@ class OzonContentIntRefNode {
 
 class OzonContentNootNode {
   constructor() {
-    this.name = 'Noot';
-    this.handles = ['NootNummer'];
+    this.name = "Noot";
+    this.handles = ["NootNummer"];
   }
   identify() {
-    return 'Noot';
+    return "Noot";
   }
   render(node, { mapNodeToJsx, state: openNoteId, setState }) {
     var _a, _b;
-    const noteId = node.getAttribute('id');
+    const noteId = node.getAttribute("id");
     if (!noteId) {
-      console.error('Noot node without id', node);
+      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;
+    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("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, descriptive: true },
-        h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
+        h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(":scope > Al")))))));
   }
 }
 
@@ -251,52 +230,50 @@ function mapColspecs(count, nodeList) {
     count,
     columns: elements.map((element, index) => {
       var _a;
-      const colNumber = element.getAttribute('colnum');
+      const colNumber = element.getAttribute("colnum");
       return {
-        name: (_a = element.getAttribute('colname')) !== null && _a !== void 0 ? _a : '',
+        name: (_a = element.getAttribute("colname")) !== null && _a !== void 0 ? _a : "",
         number: colNumber ? parseInt(colNumber, 10) : index + 1,
-        width: getWidth(totalWidth, element)
+        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 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');
+  const width = element.getAttribute("colwidth");
   if (!width) {
     return undefined;
   }
-  if (width === '*') {
-    return '100%';
+  if (width === "*") {
+    return "100%";
   }
-  if (width.includes('*') || width.match(/^[\d+]$/)) {
-    const colWidth = parseInt(width.replace(/[^0-9]/, ''), 10);
-    return `${Math.round(colWidth / totalWidth * 100)}%`;
+  if (width.includes("*") || width.match(/^[\d+]$/)) {
+    const colWidth = parseInt(width.replace(/[^0-9]/, ""), 10);
+    return `${Math.round((colWidth / totalWidth) * 100)}%`;
   }
   return width;
 }
 
-const Colgroup = ({ colspecs }) => (colspecs.columns.length > 0
-  ? (h("colgroup", null, colspecs.columns.map(colspec => (h("col", { style: { width: colspec.width } })))))
-  : h(Fragment, null));
+const Colgroup = ({ colspecs }) => colspecs.columns.length > 0 ? (h("colgroup", null, colspecs.columns.map((colspec) => (h("col", { style: { width: colspec.width } }))))) : (h(Fragment, null));
 
 function getData(cell) {
   return {
-    moreRows: cell.getAttribute('morerows'),
-    nameStart: cell.getAttribute('namest'),
-    nameEnd: cell.getAttribute('nameend')
+    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);
+  const colspecStart = columns.find((c) => c.name === nameStart);
+  const colspecEnd = columns.find((c) => c.name === nameEnd);
   if (!colspecStart || !colspecEnd) {
     return undefined;
   }
@@ -307,47 +284,48 @@ 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
+    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,
   };
-  return (h("td", Object.assign({}, td), mapNodeToJsx(cell.childNodes)));
+  return h("td", Object.assign({}, td), mapNodeToJsx(cell.childNodes));
 };
 
 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 }))))))));
+  return (h(Fragment, null, rows.map((row) => (h("tr", null, Array.from(row.children).map((cell) => (h(Cell, { cell: cell, colspecs: colspecs, context: context }))))))));
 };
 
 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 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'))
+    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")),
   };
 }
 class OzonContentTableNode {
   constructor() {
-    this.name = 'table';
-    this.handles = ['title', 'tgroup', 'colspec', 'thead', 'tbody', 'row', 'cell'];
+    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 })))));
+    return (h("dso-table", null,
+      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 }))))));
   }
 }
 
 class OzonContentTextNode {
   constructor() {
-    this.name = '#text';
+    this.name = "#text";
   }
   render(node) {
     return h(Fragment, null, node.textContent);
@@ -357,10 +335,34 @@ class OzonContentTextNode {
 class OzonContentFallbackNode {
   constructor() {
     // This name does not match any elements
-    this.name = ['<fallback>'];
+    this.name = ["<fallback>"];
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes));
+  }
+}
+
+class OzonContentLijstNode {
+  constructor() {
+    this.name = "Lijst";
   }
   render(node, { mapNodeToJsx }) {
-    return (h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes)));
+    var _a;
+    const childNodes = Array.from(node.childNodes);
+    const aanhef = childNodes.find((n) => getNodeName(n) === "Lijstaanhef");
+    const sluiting = childNodes.find((n) => getNodeName(n) === "Lijstsluiting");
+    const listItems = childNodes.filter((n) => getNodeName(n) === "Li");
+    return (h("div", { class: "dso-ozon-lijst od-Lijst" },
+      aanhef && mapNodeToJsx(aanhef),
+      h("ul", { class: (_a = node.getAttribute("type")) !== null && _a !== void 0 ? _a : "" }, listItems.map((item) => {
+        var _a;
+        const itemNodes = Array.from(item.childNodes);
+        const liNummer = (_a = itemNodes.find((n) => getNodeName(n) === "LiNummer")) === null || _a === void 0 ? void 0 : _a.textContent;
+        return (h("li", { class: "od-Li" },
+          liNummer && h("span", { class: "od-LiNummer" }, liNummer),
+          mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
+      })),
+      sluiting && mapNodeToJsx(sluiting)));
   }
 }
 
@@ -380,6 +382,7 @@ class Mapper {
       new OzonContentTableNode(),
       new OzonContentIntIoRefNode(),
       new OzonContentFiguurNode(),
+      new OzonContentLijstNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {
@@ -395,20 +398,20 @@ class Mapper {
     if (this.skip.includes(name)) {
       return undefined;
     }
-    return (_a = this.mappers.find(m => {
+    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;
+    })) !== 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)));
+      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)));
+      return h(Fragment, null, node.map((n) => this.mapNodeToJsx(n, context, path)));
     }
     const nodeName = getNodeName(node);
     const mapper = this.findMapper(nodeName);
@@ -417,59 +420,46 @@ class Mapper {
     }
     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;
+    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]),
+      mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),
       emitAnchorClick: context.emitAnchorClick,
       setState,
       state,
-      path
+      path,
     });
   }
   transform(xml, context) {
     if (!this.cache || this.cache.xml !== xml) {
-      this.cache = { xml, document: this.domParser.parseFromString(xml, 'text/xml') };
+      this.cache = { xml, document: this.domParser.parseFromString(xml, "text/xml") };
     }
     const xmlDocument = this.cache.document;
     return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);
   }
 }
 
-const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n  color: #275937;\n  font-weight: 600;\n  text-decoration: none;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n[interactive=sub].sc-dso-ozon-content-h {\n  color: #191919;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content svg.di.di-chevron-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-chevron-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-up.sc-dso-ozon-content {\n  margin-left: 4px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-left].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-right].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-up.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-left].sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-right].sc-dso-ozon-content {\n  margin-left: 0;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content, .od-Lijstaanhef.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.od-LiNummer.sc-dso-ozon-content {\n  float: left;\n  min-width: 0.7em;\n  padding-right: 0.3em;\n  text-align: right;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content {\n  margin-bottom: 16px;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-top: 0.25rem;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-titel.sc-dso-ozon-content {\n  color: #8b4a6a;\n  display: block;\n  font-weight: 500;\n  padding-bottom: 0.5rem;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
+const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n  color: #275937;\n  font-weight: 600;\n  text-decoration: none;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n[interactive=sub].sc-dso-ozon-content-h {\n  color: #191919;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content svg.di.di-chevron-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-chevron-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-up.sc-dso-ozon-content {\n  margin-left: 4px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-left].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-right].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-up.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-left].sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-right].sc-dso-ozon-content {\n  margin-left: 0;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content {\n  margin-bottom: 16px;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-top: 0.25rem;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-titel.sc-dso-ozon-content {\n  color: #8b4a6a;\n  display: block;\n  font-weight: 500;\n  padding-bottom: 0.5rem;\n}\n\n.dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstaanhef.sc-dso-ozon-content, .dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstsluiting.sc-dso-ozon-content {\n  margin-bottom: 1rem;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content {\n  list-style: none;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content {\n  position: relative;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content > span.od-LiNummer.sc-dso-ozon-content {\n  position: absolute;\n  left: -44px;\n  text-align: right;\n  width: 40px;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
 
-let OzonContent = class {
+const OzonContent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.dsoAnchorClick = createEvent(this, "dsoAnchorClick", 7);
     this.dsoClick = createEvent(this, "dsoClick", 7);
-    /**
-     * Setting this property creates dso-ozon-content as inline element instead of a block element.
-     */
+    this.mapper = new Mapper();
+    this.content = undefined;
     this.inline = false;
-    /**
-     * Marks content as deleted using visual and accessible clues.
-     */
     this.deleted = false;
-    /**
-     * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.
-     *
-     * **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) {
     // '' is `true`: <dso-ozon-content interactive>
-    if (this.interactive !== '' && !this.interactive) {
+    if (this.interactive !== "" && !this.interactive) {
       return;
     }
-    const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
+    const doIt = e.composedPath().find((e) => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
     if (doIt) {
       this.dsoClick.emit({ originalEvent: e });
     }
@@ -478,10 +468,10 @@ let OzonContent = class {
     var _a;
     const context = {
       state: this.state,
-      setState: state => this.state = state,
-      emitAnchorClick: this.dsoAnchorClick.emit
+      setState: (state) => (this.state = state),
+      emitAnchorClick: this.dsoAnchorClick.emit,
     };
-    const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
+    const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : "", context);
     if (this.deleted) {
       return (h("section", null, h("slot", { name: "prefix" }), h("span", { class: "deleted-start" }, "Begin verwijderd element"), transformed, h("span", { class: "deleted-end" }, "Einde verwijderd element"), h("slot", { name: "suffix" })));
     }