@dso-toolkit/core 34.2.0 → 36.0.0

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

@@ -1,488 +1,358 @@
-import { r as registerInstance, c as createEvent, h } from './index-d54cae76.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent } from './index-9ec8c07f.js';
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function assertString(input) {
-  var isString = typeof input === 'string' || input instanceof String;
-
-  if (!isString) {
-    var invalidType = _typeof(input);
-
-    if (input === null) invalidType = 'null';else if (invalidType === 'object') invalidType = input.constructor.name;
-    throw new TypeError("Expected a string but received a ".concat(invalidType));
+function getNodeName(node) {
+  if (node instanceof Element) {
+    return node.localName;
   }
-}
-
-function merge() {
-  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var defaults = arguments.length > 1 ? arguments[1] : undefined;
-
-  for (var key in defaults) {
-    if (typeof obj[key] === 'undefined') {
-      obj[key] = defaults[key];
-    }
+  if (node.nodeName.includes(':')) {
+    return node.nodeName.substring(node.nodeName.indexOf(':') + 1);
   }
-
-  return obj;
+  return node.nodeName;
 }
 
-var default_fqdn_options = {
-  require_tld: true,
-  allow_underscores: false,
-  allow_trailing_dot: false,
-  allow_numeric_tld: false,
-  allow_wildcard: false
-};
-function isFQDN(str, options) {
-  assertString(str);
-  options = merge(options, default_fqdn_options);
-  /* Remove the optional trailing dot before checking validity */
-
-  if (options.allow_trailing_dot && str[str.length - 1] === '.') {
-    str = str.substring(0, str.length - 1);
+class OzonContentAlNode {
+  constructor() {
+    this.name = 'Al';
   }
-  /* Remove the optional wildcard before checking validity */
-
-
-  if (options.allow_wildcard === true && str.indexOf('*.') === 0) {
-    str = str.substring(2);
+  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);
   }
+}
 
-  var parts = str.split('.');
-  var tld = parts[parts.length - 1];
-
-  if (options.require_tld) {
-    // disallow fqdns without tld
-    if (parts.length < 2) {
-      return false;
-    }
-
-    if (!/^([a-z\u00A1-\u00A8\u00AA-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]{2,}|xn[a-z0-9-]{2,})$/i.test(tld)) {
-      return false;
-    } // disallow spaces
-
-
-    if (/\s/.test(tld)) {
-      return false;
-    }
-  } // reject numeric TLDs
-
-
-  if (!options.allow_numeric_tld && /^\d+$/.test(tld)) {
-    return false;
+class OzonContentDocumentNode {
+  constructor() {
+    this.name = '#document';
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
   }
-
-  return parts.every(function (part) {
-    if (part.length > 63) {
-      return false;
-    }
-
-    if (!/^[a-z_\u00a1-\uffff0-9-]+$/i.test(part)) {
-      return false;
-    } // disallow full-width chars
-
-
-    if (/[\uff01-\uff5e]/.test(part)) {
-      return false;
-    } // disallow parts starting or ending with hyphen
-
-
-    if (/^-|-$/.test(part)) {
-      return false;
-    }
-
-    if (!options.allow_underscores && /_/.test(part)) {
-      return false;
-    }
-
-    return true;
-  });
 }
 
-/**
-11.3.  Examples
-
-   The following addresses
-
-             fe80::1234 (on the 1st link of the node)
-             ff02::5678 (on the 5th link of the node)
-             ff08::9abc (on the 10th organization of the node)
-
-   would be represented as follows:
-
-             fe80::1234%1
-             ff02::5678%5
-             ff08::9abc%10
-
-   (Here we assume a natural translation from a zone index to the
-   <zone_id> part, where the Nth zone of any scope is translated into
-   "N".)
-
-   If we use interface names as <zone_id>, those addresses could also be
-   represented as follows:
-
-            fe80::1234%ne0
-            ff02::5678%pvc1.3
-            ff08::9abc%interface10
-
-   where the interface "ne0" belongs to the 1st link, "pvc1.3" belongs
-   to the 5th link, and "interface10" belongs to the 10th organization.
- * * */
-
-var IPv4SegmentFormat = '(?:[0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])';
-var IPv4AddressFormat = "(".concat(IPv4SegmentFormat, "[.]){3}").concat(IPv4SegmentFormat);
-var IPv4AddressRegExp = new RegExp("^".concat(IPv4AddressFormat, "$"));
-var IPv6SegmentFormat = '(?:[0-9a-fA-F]{1,4})';
-var IPv6AddressRegExp = new RegExp('^(' + "(?:".concat(IPv6SegmentFormat, ":){7}(?:").concat(IPv6SegmentFormat, "|:)|") + "(?:".concat(IPv6SegmentFormat, ":){6}(?:").concat(IPv4AddressFormat, "|:").concat(IPv6SegmentFormat, "|:)|") + "(?:".concat(IPv6SegmentFormat, ":){5}(?::").concat(IPv4AddressFormat, "|(:").concat(IPv6SegmentFormat, "){1,2}|:)|") + "(?:".concat(IPv6SegmentFormat, ":){4}(?:(:").concat(IPv6SegmentFormat, "){0,1}:").concat(IPv4AddressFormat, "|(:").concat(IPv6SegmentFormat, "){1,3}|:)|") + "(?:".concat(IPv6SegmentFormat, ":){3}(?:(:").concat(IPv6SegmentFormat, "){0,2}:").concat(IPv4AddressFormat, "|(:").concat(IPv6SegmentFormat, "){1,4}|:)|") + "(?:".concat(IPv6SegmentFormat, ":){2}(?:(:").concat(IPv6SegmentFormat, "){0,3}:").concat(IPv4AddressFormat, "|(:").concat(IPv6SegmentFormat, "){1,5}|:)|") + "(?:".concat(IPv6SegmentFormat, ":){1}(?:(:").concat(IPv6SegmentFormat, "){0,4}:").concat(IPv4AddressFormat, "|(:").concat(IPv6SegmentFormat, "){1,6}|:)|") + "(?::((?::".concat(IPv6SegmentFormat, "){0,5}:").concat(IPv4AddressFormat, "|(?::").concat(IPv6SegmentFormat, "){1,7}|:))") + ')(%[0-9a-zA-Z-.:]{1,})?$');
-function isIP(str) {
-  var version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  assertString(str);
-  version = String(version);
-
-  if (!version) {
-    return isIP(str, 4) || isIP(str, 6);
+class OzonContentExtRefNode {
+  constructor() {
+    this.name = [
+      'ExtRef',
+      'ExtIoRef'
+    ];
   }
-
-  if (version === '4') {
-    if (!IPv4AddressRegExp.test(str)) {
-      return false;
-    }
-
-    var parts = str.split('.').sort(function (a, b) {
-      return a - b;
-    });
-    return parts[3] <= 255;
+  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)));
   }
+}
 
-  if (version === '6') {
-    return !!IPv6AddressRegExp.test(str);
+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 }));
   }
-
-  return false;
 }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-/*
-options for isURL method
-
-require_protocol - if set as true isURL will return false if protocol is not present in the URL
-require_valid_protocol - isURL will check if the URL's protocol is present in the protocols option
-protocols - valid protocols can be modified with this option
-require_host - if set as false isURL will not check if host is present in the URL
-require_port - if set as true isURL will check if port is present in the URL
-allow_protocol_relative_urls - if set as true protocol relative URLs will be allowed
-validate_length - if set as false isURL will skip string length validation (IE maximum is 2083)
-
-*/
-
-var default_url_options = {
-  protocols: ['http', 'https', 'ftp'],
-  require_tld: true,
-  require_protocol: false,
-  require_host: true,
-  require_port: false,
-  require_valid_protocol: true,
-  allow_underscores: false,
-  allow_trailing_dot: false,
-  allow_protocol_relative_urls: false,
-  allow_fragments: true,
-  allow_query_components: true,
-  validate_length: true
-};
-var wrapped_ipv6 = /^\[([^\]]+)\](?::([0-9]+))?$/;
-
-function isRegExp(obj) {
-  return Object.prototype.toString.call(obj) === '[object RegExp]';
+class OzonContentInhoudNode {
+  constructor() {
+    this.name = [
+      'Inhoud',
+      'Opschrift',
+      'ContainerBlocksType',
+      'BlockMixedcontentMetMaximaleInlinesMarkersPopupsType'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("div", { class: "dso-rich-content" }, mapNodeToJsx(node.childNodes));
+  }
 }
 
-function checkHost(host, matches) {
-  for (var i = 0; i < matches.length; i++) {
-    var match = matches[i];
-
-    if (host === match || isRegExp(match) && match.test(host)) {
-      return true;
+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));
   }
-
-  return false;
 }
 
-function isURL(url, options) {
-  assertString(url);
-
-  if (!url || /[\s<>]/.test(url)) {
-    return false;
-  }
-
-  if (url.indexOf('mailto:') === 0) {
-    return false;
+class OzonContentIntRefNode {
+  constructor() {
+    this.name = 'IntRef';
   }
-
-  options = merge(options, default_url_options);
-
-  if (options.validate_length && url.length >= 2083) {
-    return false;
+  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)));
   }
+}
 
-  if (!options.allow_fragments && url.includes('#')) {
-    return false;
+class OzonContentNootNode {
+  constructor() {
+    this.name = 'Noot';
+    this.handles = ['NootNummer'];
   }
-
-  if (!options.allow_query_components && (url.includes('?') || url.includes('&'))) {
-    return false;
+  identify() {
+    return 'Noot';
   }
-
-  var protocol, auth, host, hostname, port, port_str, split, ipv6;
-  split = url.split('#');
-  url = split.shift();
-  split = url.split('?');
-  url = split.shift();
-  split = url.split('://');
-
-  if (split.length > 1) {
-    protocol = split.shift().toLowerCase();
-
-    if (options.require_valid_protocol && options.protocols.indexOf(protocol) === -1) {
-      return false;
-    }
-  } else if (options.require_protocol) {
-    return false;
-  } else if (url.substr(0, 2) === '//') {
-    if (!options.allow_protocol_relative_urls) {
-      return false;
+  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);
     }
-
-    split[0] = url.substr(2);
+    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')))))));
   }
+}
 
-  url = split.join('://');
-
-  if (url === '') {
-    return false;
+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;
   }
-
-  split = url.split('/');
-  url = split.shift();
-
-  if (url === '' && !options.require_host) {
-    return true;
+  if (width === '*') {
+    return '100%';
   }
-
-  split = url.split('@');
-
-  if (split.length > 1) {
-    if (options.disallow_auth) {
-      return false;
-    }
-
-    if (split[0] === '') {
-      return false;
-    }
-
-    auth = split.shift();
-
-    if (auth.indexOf(':') >= 0 && auth.split(':').length > 2) {
-      return false;
-    }
-
-    var _auth$split = auth.split(':'),
-        _auth$split2 = _slicedToArray(_auth$split, 2),
-        user = _auth$split2[0],
-        password = _auth$split2[1];
-
-    if (user === '' && password === '') {
-      return false;
-    }
+  if (width.includes('*') || width.match(/^[\d+]$/)) {
+    const colWidth = parseInt(width.replace(/[^0-9]/, ''), 10);
+    return `${Math.round(colWidth / totalWidth * 100)}%`;
   }
+  return width;
+}
 
-  hostname = split.join('@');
-  port_str = null;
-  ipv6 = null;
-  var ipv6_match = hostname.match(wrapped_ipv6);
-
-  if (ipv6_match) {
-    host = '';
-    ipv6 = ipv6_match[1];
-    port_str = ipv6_match[2] || null;
-  } else {
-    split = hostname.split(':');
-    host = split.shift();
+const Colgroup = ({ colspecs }) => (colspecs.columns.length > 0
+  ? (h("colgroup", null, colspecs.columns.map(colspec => (h("col", { style: { width: colspec.width } })))))
+  : h(Fragment, null));
 
-    if (split.length) {
-      port_str = split.join(':');
-    }
-  }
+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;
+}
+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)));
+};
 
-  if (port_str !== null && port_str.length > 0) {
-    port = parseInt(port_str, 10);
+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 }))))))));
+};
 
-    if (!/^[0-9]+$/.test(port_str) || port <= 0 || port > 65535) {
-      return false;
-    }
-  } else if (options.require_port) {
-    return false;
+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'))
+  };
+}
+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 })))));
   }
+}
 
-  if (options.host_whitelist) {
-    return checkHost(host, options.host_whitelist);
+class OzonContentTextNode {
+  constructor() {
+    this.name = '#text';
   }
-
-  if (!isIP(host) && !isFQDN(host, options) && (!ipv6 || !isIP(ipv6, 6))) {
-    return false;
+  render(node) {
+    return h(Fragment, null, node.textContent);
   }
+}
 
-  host = host || ipv6;
-
-  if (options.host_blacklist && checkHost(host, options.host_blacklist)) {
-    return false;
+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)));
   }
-
-  return true;
 }
 
-function transformDescriptionNote(body) {
-  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
-    const contentElement = nootElement.nextElementSibling;
-    if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
-      return;
-    }
-    const nootAnchorElement = nootElement.querySelector('a');
-    if (!(nootAnchorElement instanceof HTMLAnchorElement)) {
-      return;
-    }
-    const contentAlElement = contentElement.querySelector(':scope > .od-Al');
-    if (!(contentAlElement instanceof HTMLDivElement && contentAlElement.classList.value === 'od-Al')) {
-      return;
-    }
-    nootElement.replaceWith(...Array.from(nootElement.childNodes));
-    const contentWrapper = document.createElement('div');
-    contentWrapper.replaceChildren(...Array.from(contentAlElement.childNodes));
-    contentAlElement.replaceChildren(contentWrapper);
-    contentElement.replaceWith(contentAlElement);
-    const supElement = document.createElement('sup');
-    supElement.replaceChildren(...Array.from(nootAnchorElement.childNodes));
-    nootAnchorElement.replaceChildren(supElement);
-    const id = (index + 1).toString(10);
-    const [termId, contentId] = [`dso-ozon-term-${id}`, `dso-ozon-content-${id}`];
-    nootAnchorElement.setAttribute('href', `#${termId}`);
-    nootAnchorElement.setAttribute('id', termId);
-    nootAnchorElement.setAttribute('aria-controls', contentId);
-    nootAnchorElement.setAttribute('aria-expanded', 'false');
-    contentAlElement === null || contentAlElement === void 0 ? void 0 : contentAlElement.setAttribute('id', contentId);
-  });
-  return body;
-}
-function transformDocumentComponent(body) {
-  body.querySelectorAll('span[data-verwijst-naar-documentcomponent]').forEach(e => {
-    const a = document.createElement('a');
-    a.href = `#${e.getAttribute('data-verwijst-naar-documentcomponent')}`;
-    a.replaceChildren(...Array.from(e.childNodes));
-    e.replaceWith(a);
-  });
-  return body;
-}
-const transformers = [transformDescriptionNote, transformDocumentComponent];
-class OzonContentTransformer {
-  constructor(anchorClick) {
-    this.anchorClick = anchorClick;
+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();
-    this.eventHandlers = [this.handleValidUrls, this.handleDescriptionNoteClick, this.handleContentAnchor];
-  }
-  setContent(content) {
-    this.content = transformers.reduce((c, t) => t(c), this.domParser.parseFromString(content, 'text/html').body).children;
   }
-  handleClickEvent(event) {
-    this.eventHandlers.some(h => h.bind(this)(event.composedPath(), event));
-  }
-  handleDescriptionNoteClick(composedPath, event) {
+  findMapper(name) {
     var _a;
-    const containerIndex = composedPath.findIndex(this.isHostElement);
-    if (containerIndex === -1) {
-      return false;
+    if (this.skip.includes(name)) {
+      return undefined;
     }
-    const anchorElement = (_a = composedPath
-      .slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.find((e) => e instanceof HTMLAnchorElement && e.classList.contains('noot'));
-    if (!anchorElement) {
-      return false;
+    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)));
     }
-    event.preventDefault();
-    const open = anchorElement.classList.contains('dso-open');
-    if (open) {
-      anchorElement.classList.remove('dso-open');
-      anchorElement.setAttribute('aria-expanded', 'false');
+    if (Array.isArray(node)) {
+      return h(Fragment, null, node.map(n => this.mapNodeToJsx(n, context, path)));
     }
-    else {
-      anchorElement.classList.add('dso-open');
-      anchorElement.setAttribute('aria-expanded', 'true');
+    const nodeName = getNodeName(node);
+    const mapper = this.findMapper(nodeName);
+    if (!mapper) {
+      return h(Fragment, null);
     }
-    return true;
+    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
+    });
   }
-  handleContentAnchor(composedPath, event) {
-    if (composedPath.some(e => e instanceof HTMLAnchorElement)) {
-      event.preventDefault();
-      const anchor = composedPath.find((e) => e instanceof HTMLAnchorElement);
-      const href = anchor.href;
-      this.anchorClick.emit({
-        href,
-        documentComponent: href.substr(href.indexOf('#') + 1),
-        originalEvent: event
-      });
-      return true;
+  transform(xml, context) {
+    if (!this.cache || this.cache.xml !== xml) {
+      this.cache = { xml, document: this.domParser.parseFromString(xml, 'text/xml') };
     }
-    return false;
-  }
-  handleValidUrls(composedPath) {
-    var _a;
-    const containerIndex = composedPath.findIndex(this.isHostElement);
-    if (containerIndex === -1) {
-      return false;
-    }
-    // require_tld: false is needed to allow http://localhost
-    return (_a = composedPath.slice(0, containerIndex)) === null || _a === void 0 ? void 0 : _a.some(e => { var _a; return e instanceof HTMLAnchorElement && isURL((_a = e.getAttribute('href')) !== null && _a !== void 0 ? _a : '', { require_tld: false, require_protocol: true }); });
-  }
-  isHostElement(value) {
-    return value instanceof HTMLElement && value.tagName === 'DSO-OZON-CONTENT';
+    const xmlDocument = this.cache.document;
+    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);
   }
 }
 
-const ozonContentCss = "dso-ozon-content{display:block}.noot{text-decoration:none}.noot:not(.dso-open)+.od-Al{display:none}.noot.dso-open+.od-Al{display:block}.noot+.od-Al{margin:4px 0;padding:8px 32px 8px 8px;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;background-position:center;background-size:cover;height:1.5em;vertical-align:top;width:1.5em;content:\"\";display:block}.noot+.od-Al{background-color:#ebf3e6}.od-Term{font-weight:700}.od-Definitie,.od-Tussenkop{font-style:italic}.od-Inhoud,.od-Inhoud>.od-Lijst,.od-IntIoRef,.od-Lidnr,.od-LiNr,.od-Opschrift,.od-Tussenkop{display:inline}.od-Al,.od-Lijstaanhef{margin-bottom:0.75em}.od-IntIoRef{border-bottom:1px dotted}.od-LiNummer{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur img{margin-left:25px;max-width:100%;height:auto}.od-Figuur .od-Bijschrift{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel thead{font-weight:600}.od-Kadertekst{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}";
+const ozonContentCss = ".sc-dso-ozon-content-h{display:block}button.toggle-note.sc-dso-ozon-content{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.sc-dso-ozon-content:focus,button.toggle-note.sc-dso-ozon-content:focus-visible{outline-offset:2px}button.toggle-note.sc-dso-ozon-content:active{outline:0}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{content:\"\";display:inline-block;height:1.5em;margin-left:8px;vertical-align:top;width:1.5em}button.toggle-note[disabled].sc-dso-ozon-content{color:#afcf9d}button.toggle-note.sc-dso-ozon-content:not([disabled]):hover{color:#676cb0;text-decoration:underline}button.toggle-note.sc-dso-ozon-content:not([disabled]):active{color:#676cb0}button.toggle-note.btn-align.sc-dso-ozon-content{line-height:calc(1.5em - 1px);padding:11px 0;position:relative}button.toggle-note.extern.sc-dso-ozon-content::after,button.toggle-note.download.sc-dso-ozon-content::after{position:relative;top:-2px}button.toggle-note.download.sc-dso-ozon-content::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}button.toggle-note.download[disabled].sc-dso-ozon-content::after{--dso-icon:var(--di-download-grasgroen-40)}button.toggle-note.download.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.download.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-download-scampi)}button.toggle-note.extern.sc-dso-ozon-content::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].sc-dso-ozon-content::after{--dso-icon:var(--di-external-link-grasgroen-40)}button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):hover::after,button.toggle-note.extern.sc-dso-ozon-content:not([disabled]):active::after{--dso-icon:var(--di-external-link-scampi)}button.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{margin-left:8px}button.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{vertical-align:middle}span[role=section].sc-dso-ozon-content,span[role=paragraph].sc-dso-ozon-content{display:block}.fallback.sc-dso-ozon-content{display:block}.od-Term.sc-dso-ozon-content{font-weight:700}.od-Definitie.sc-dso-ozon-content,.od-Tussenkop.sc-dso-ozon-content{font-style:italic}.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{display:inline}.od-Al.sc-dso-ozon-content,.od-Lijstaanhef.sc-dso-ozon-content{margin-bottom:0.75em}.od-IntIoRef.sc-dso-ozon-content{border-bottom:1px dotted}.od-LiNummer.sc-dso-ozon-content{float:left;min-width:0.7em;padding-right:0.3em;text-align:right}.od-Figuur.sc-dso-ozon-content img.sc-dso-ozon-content{margin-left:25px;max-width:100%;height:auto}.od-Figuur.sc-dso-ozon-content .od-Bijschrift.sc-dso-ozon-content{font-size:0.75rem;margin-left:25px;padding-bottom:2.5rem}.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content{font-weight:600}.od-Kadertekst.sc-dso-ozon-content{border:1px solid #e5e5e5;margin-bottom:1rem;padding:1rem}";
 
 let OzonContent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.anchorClick = createEvent(this, "anchorClick", 7);
-  }
-  handleClick(event) {
-    this.transformer.handleClickEvent(event);
-  }
-  componentWillLoad() {
-    this.transformer = new OzonContentTransformer(this.anchorClick);
-  }
-  componentWillRender() {
-    this.transformer.setContent(this.content);
+    this.state = {};
+    this.mapper = new Mapper();
   }
   render() {
-    return h("div", { class: "dso-rich-content", ref: el => this.container = el });
-  }
-  componentDidRender() {
     var _a;
-    const content = this.transformer.content;
-    if (this.container && content) {
-      this.container.replaceChildren(...Array.from(content));
-    }
-    else {
-      (_a = this.container) === null || _a === void 0 ? void 0 : _a.replaceChildren();
-    }
+    const context = {
+      state: this.state,
+      setState: state => this.state = state,
+      emitAnchorClick: this.anchorClick.emit
+    };
+    return this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
   }
 };
 OzonContent.style = ozonContentCss;