@dso-toolkit/core 54.3.0 → 56.0.0

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

@@ -1,547 +1,4 @@
-import { h, Fragment, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { i as isTabbable } from './index.esm.js';
-import { c as clsx } from './clsx.m.js';
-import { v as v4 } from './v4.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((n) => {
-      const nodeName = getNodeName(n);
-      return nodeName === "Al" || nodeName === "Opschrift";
-    });
-    const content = mapNodeToJsx(node.childNodes);
-    return nestedAl ? h("span", { role: "paragraph" }, content) : h("p", null, content);
-  }
-}
-
-class OzonContentBronNode {
-  constructor() {
-    this.name = "Bron";
-  }
-  render(node, { mapNodeToJsx }) {
-    return h("span", { class: "dso-ozon-bron" }, mapNodeToJsx(node.childNodes));
-  }
-}
-
-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)));
-  }
-}
-
-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));
-  }
-}
-
-const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
-  return (h("span", { class: "figuur-bijschrift" },
-    bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud),
-    bron && (h(Fragment, null,
-      `${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;
-    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 = childNodes.find((n) => getNodeName(n) === "Bron");
-    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: (_b = bijschriftNode.getAttribute("locatie")) !== null && _b !== void 0 ? _b : "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: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : 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 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 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.childNodes;
-        return (h("li", { class: "od-Li" },
-          liNummer && h("span", { class: "od-LiNummer" }, mapNodeToJsx(liNummer)),
-          mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
-      })),
-      sluiting && mapNodeToJsx(sluiting)));
-  }
-}
-
-class OzonContentNieuweTekstNode {
-  constructor() {
-    this.name = "NieuweTekst";
-  }
-  render(node, { mapNodeToJsx }) {
-    return h("ins", null, 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")))))));
-  }
-}
-
-class OzonContentOpschriftNode {
-  constructor() {
-    this.name = "Opschrift";
-  }
-  render(node, { mapNodeToJsx }) {
-    return h(Fragment, null, mapNodeToJsx(node.childNodes));
-  }
-}
-
-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")),
-    editAction: node.getAttribute("wijzigactie"),
-  };
-}
-class OzonContentTableNode {
-  constructor() {
-    this.name = "table";
-    this.handles = ["title", "tgroup", "colspec", "thead", "tbody", "row", "cell"];
-    this.id = v4();
-  }
-  render(node, context) {
-    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);
-    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
-    return (h("dso-table", null,
-      h("table", Object.assign({ class: clsx("table dso-table-vertical-lines", {
-          "dso-del": editAction === "verwijder",
-          "dso-ins": editAction === "voegtoe",
-        }) }, (bron ? { "aria-describedby": this.id } : {})),
-        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 })))),
-      bron && h("div", { id: this.id }, context.mapNodeToJsx(bron))));
-  }
-}
-
-class OzonContentTextNode {
-  constructor() {
-    this.name = "#text";
-  }
-  render(node) {
-    return h(Fragment, null, node.textContent);
-  }
-}
-
-class OzonContentVerwijderdeTekstNode {
-  constructor() {
-    this.name = "VerwijderdeTekst";
-  }
-  render(node, { mapNodeToJsx }) {
-    return h("del", null, mapNodeToJsx(node.childNodes));
-  }
-}
-
-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(),
-      new OzonContentBronNode(),
-      new OzonContentNieuweTekstNode(),
-      new OzonContentVerwijderdeTekstNode(),
-    ];
-    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 ? (s) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: s })) : 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 = "ins.sc-dso-ozon-content {\n  background-color: #e4f1d4;\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n  color: #000;\n  text-decoration: none;\n}\n\n.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: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #173521;\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-bron.sc-dso-ozon-content {\n  font-style: italic;\n  font-size: 0.75rem;\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}\n\n.dso-del.sc-dso-ozon-content {\n  background-color: #f5d8dc;\n  color: #000;\n  text-decoration: line-through;\n}\n.dso-del.sc-dso-ozon-content a.sc-dso-ozon-content {\n  color: #000;\n}\n\n.dso-ins.sc-dso-ozon-content {\n  background-color: #e4f1d4;\n  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);\n  color: #000;\n}\n.dso-ins.sc-dso-ozon-content a.sc-dso-ozon-content {\n  color: #000;\n}";
-
-const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent 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((eventTarget) => eventTarget === this.host || (eventTarget instanceof HTMLElement && isTabbable(eventTarget))) === 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;
-  } });
-}
+import { O as OzonContent, d as defineCustomElement$1 } from './ozon-content.js';
 
 const DsoOzonContent = OzonContent;
 const defineCustomElement = defineCustomElement$1;