@dso-toolkit/core 47.0.1 → 48.0.0

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

@@ -0,0 +1,507 @@
+import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { i as isTabbable } from './index.esm.js';
+
+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;
+}
+
+class OzonContentAlNode {
+  constructor() {
+    this.name = "Al";
+  }
+  render(node, { mapNodeToJsx, path }) {
+    const nestedAl = path.some((node) => {
+      const nodeName = getNodeName(node);
+      return nodeName === "Al" || nodeName === "Opschrift";
+    });
+    const content = mapNodeToJsx(node.childNodes);
+    return nestedAl ? h("span", { role: "paragraph" }, content) : h("p", null, content);
+  }
+}
+
+class OzonContentDocumentNode {
+  constructor() {
+    this.name = "#document";
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}
+
+class OzonContentExtRefNode {
+  constructor() {
+    this.name = ["ExtRef", "ExtIoRef"];
+  }
+  render(node, { mapNodeToJsx }) {
+    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)));
+  }
+}
+
+const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
+  return (h("span", { class: "figuur-bijschrift" },
+    bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud),
+    bron && `${bijschrift ? " " : ""}(bron: ${mapNodeToJsx(bron)})`));
+};
+class OzonContentFiguurNode {
+  constructor() {
+    this.name = ["Figuur"];
+  }
+  setImageDimensions(imageElement, schaal) {
+    const { naturalHeight, naturalWidth } = imageElement;
+    imageElement.height = naturalHeight * (schaal / 100);
+    imageElement.width = naturalWidth * (schaal / 100);
+  }
+  onImageLoad(event, schaal) {
+    if (event.target instanceof HTMLImageElement && schaal) {
+      this.setImageDimensions(event.target, schaal);
+    }
+  }
+  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");
+    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"),
+      };
+      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 })),
+        h("dso-image-overlay", null,
+          titel && (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)) }),
+          (bijschrift || bron) && (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 }))));
+    }
+  }
+}
+
+class OzonContentInhoudNode {
+  constructor() {
+    this.name = ["Inhoud", "ContainerBlocksType", "BlockMixedcontentMetMaximaleInlinesMarkersPopupsType"];
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("div", { class: "dso-rich-content" }, mapNodeToJsx(node.childNodes));
+  }
+}
+
+class OzonContentInlineTekstAfbeeldingNode {
+  constructor() {
+    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 }));
+  }
+}
+
+class OzonContentOpschriftNode {
+  constructor() {
+    this.name = "Opschrift";
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}
+
+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));
+  }
+}
+
+class OzonContentIntIoRefNode {
+  constructor() {
+    this.name = "IntIoRef";
+  }
+  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({
+        node: this.name,
+        href,
+        documentComponent: ref,
+        originalEvent: event,
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}
+
+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({
+        node: this.name,
+        href,
+        documentComponent: ref,
+        originalEvent: event,
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}
+
+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", "aria-describedby": 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, id: noteControlsId, stateless: true, descriptive: true },
+        h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(":scope > Al")))))));
+  }
+}
+
+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;
+}
+
+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"),
+  };
+}
+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));
+};
+
+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 }))))))));
+};
+
+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("dso-table", null,
+      h("table", { class: "table dso-table-vertical-lines" },
+        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";
+  }
+  render(node) {
+    return h(Fragment, null, node.textContent);
+  }
+}
+
+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));
+  }
+}
+
+class OzonContentLijstNode {
+  constructor() {
+    this.name = "Lijst";
+  }
+  render(node, { mapNodeToJsx }) {
+    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)));
+  }
+}
+
+class Mapper {
+  constructor() {
+    this.mappers = [
+      new OzonContentTextNode(),
+      new OzonContentDocumentNode(),
+      new OzonContentInhoudNode(),
+      new OzonContentOpschriftNode(),
+      new OzonContentIntRefNode(),
+      new OzonContentExtRefNode(),
+      new OzonContentAlNode(),
+      new OzonContentInlineNodes(),
+      new OzonContentInlineTekstAfbeeldingNode(),
+      new OzonContentNootNode(),
+      new OzonContentTableNode(),
+      new OzonContentIntIoRefNode(),
+      new OzonContentFiguurNode(),
+      new OzonContentLijstNode(),
+    ];
+    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, []);
+  }
+}
+
+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}";
+
+const OzonContent = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoAnchorClick = createEvent(this, "dsoAnchorClick", 7);
+    this.dsoClick = createEvent(this, "dsoClick", 7);
+    this.mapper = new Mapper();
+    this.content = undefined;
+    this.inline = false;
+    this.deleted = false;
+    this.interactive = false;
+    this.state = {};
+  }
+  handleHostOnClick(e) {
+    // '' is `true`: <dso-ozon-content interactive>
+    if (this.interactive !== "" && !this.interactive) {
+      return;
+    }
+    const doIt = e.composedPath().find((e) => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
+    if (doIt) {
+      this.dsoClick.emit({ originalEvent: e });
+    }
+  }
+  render() {
+    var _a;
+    const context = {
+      state: this.state,
+      setState: (state) => (this.state = state),
+      emitAnchorClick: this.dsoAnchorClick.emit,
+    };
+    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" })));
+    }
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, h("slot", { name: "prefix" }), transformed, h("slot", { name: "suffix" })));
+  }
+  get host() { return this; }
+  static get style() { return ozonContentCss; }
+}, [6, "dso-ozon-content", {
+    "content": [1],
+    "inline": [516],
+    "deleted": [516],
+    "interactive": [520],
+    "state": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-ozon-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-ozon-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, OzonContent);
+      }
+      break;
+  } });
+}
+
+const DsoOzonContent = OzonContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoOzonContent, defineCustomElement };

package/dist/components/dso-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoPagination extends Components.DsoPagination, HTMLElement {}
+export const DsoPagination: {
+  prototype: DsoPagination;
+  new (): DsoPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;