@dso-toolkit/core 54.3.0 → 56.0.0

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

@@ -1 +1 @@
-{"file":"dso-ozon-content.js","mappings":"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","names":["uuidv4"],"sources":["./src/components/ozon-content/get-node-name.function.ts","./src/components/ozon-content/nodes/al.node.tsx","./src/components/ozon-content/nodes/bron.node.tsx","./src/components/ozon-content/nodes/document.node.tsx","./src/components/ozon-content/nodes/ext-ref.node.tsx","./src/components/ozon-content/nodes/fallback.node.tsx","./src/components/ozon-content/nodes/figuur.node.tsx","./src/components/ozon-content/nodes/inhoud.node.tsx","./src/components/ozon-content/nodes/inline-tekst-afbeelding.node.tsx","./src/components/ozon-content/nodes/inline.nodes.tsx","./src/components/ozon-content/nodes/int-io-ref.node.tsx","./src/components/ozon-content/nodes/int-ref.node.tsx","./src/components/ozon-content/nodes/lijst.node.tsx","./src/components/ozon-content/nodes/nieuwe-tekst.node.tsx","./src/components/ozon-content/nodes/noot.node.tsx","./src/components/ozon-content/nodes/opschrift.node.tsx","./src/components/ozon-content/nodes/table.node/colspec/colspec-mapper.ts","./src/components/ozon-content/nodes/table.node/table-colgroup.tsx","./src/components/ozon-content/nodes/table.node/table-cell.tsx","./src/components/ozon-content/nodes/table.node/table-rows.tsx","./src/components/ozon-content/nodes/table.node/table.node.tsx","./src/components/ozon-content/nodes/text.node.tsx","./src/components/ozon-content/nodes/verwijderde-tekst.node.tsx","./src/components/ozon-content/ozon-content-mapper.tsx","./src/components/ozon-content/ozon-content.scss?tag=dso-ozon-content&encapsulation=scoped","./src/components/ozon-content/ozon-content.tsx"],"sourcesContent":["export function getNodeName(node: Node): string {\r\n  if (node instanceof Element) {\r\n    return node.localName;\r\n  }\r\n\r\n  if (node.nodeName.includes(\":\")) {\r\n    return node.nodeName.substring(node.nodeName.indexOf(\":\") + 1);\r\n  }\r\n\r\n  return node.nodeName;\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n  name = \"Al\";\r\n\r\n  render(node: Element, { mapNodeToJsx, path }: OzonContentNodeContext) {\r\n    const nestedAl = path.some((n) => {\r\n      const nodeName = getNodeName(n);\r\n\r\n      return nodeName === \"Al\" || nodeName === \"Opschrift\";\r\n    });\r\n\r\n    const content = mapNodeToJsx(node.childNodes);\r\n\r\n    return nestedAl ? <span role=\"paragraph\">{content}</span> : <p>{content}</p>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentBronNode implements OzonContentNode {\r\n  name = \"Bron\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class=\"dso-ozon-bron\">{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentDocumentNode implements OzonContentNode {\r\n  name = \"#document\";\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentExtRefNode implements OzonContentNode {\r\n  name = [\"ExtRef\", \"ExtIoRef\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const href = node.tagName === \"ExtIoRef\" ? node.getAttribute(\"href\") : node.getAttribute(\"ref\");\r\n\r\n    return (\r\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href={href ?? undefined}>\r\n        <span class=\"sr-only\">opent in nieuw venster </span>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentFallbackNode implements OzonContentNode {\r\n  // This name does not match any elements\r\n  name = [\"<fallback>\"];\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class={`fallback od-${getNodeName(node)}`}>{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n  bijschrift?: IBijschrift;\r\n  bron?: ChildNode;\r\n  mapNodeToJsx: (node: Node | NodeList | Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n  inhoud: NodeListOf<ChildNode>;\r\n  locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n  return (\r\n    <span class=\"figuur-bijschrift\">\r\n      {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n      {bron && (\r\n        <Fragment>\r\n          {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n          {mapNodeToJsx(bron)})\r\n        </Fragment>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n  name = [\"Figuur\"];\r\n\r\n  setImageDimensions(imageElement: HTMLImageElement, schaal: number) {\r\n    const { naturalHeight, naturalWidth } = imageElement;\r\n\r\n    imageElement.height = naturalHeight * (schaal / 100);\r\n    imageElement.width = naturalWidth * (schaal / 100);\r\n  }\r\n\r\n  onImageLoad(event: Event, schaal?: number) {\r\n    if (event.target instanceof HTMLImageElement && schaal) {\r\n      this.setImageDimensions(event.target, schaal);\r\n    }\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n    const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n    const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n    if (illustratieNode instanceof Element) {\r\n      const illustratie = {\r\n        naam: illustratieNode.getAttribute(\"naam\"),\r\n        breedte: illustratieNode.getAttribute(\"breedte\"),\r\n        hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n        uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n        alt: illustratieNode.getAttribute(\"alt\"),\r\n        schaal: illustratieNode.getAttribute(\"schaal\"),\r\n      };\r\n\r\n      const bijschrift =\r\n        bijschriftNode instanceof Element\r\n          ? {\r\n              inhoud: bijschriftNode.childNodes,\r\n              locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n            }\r\n          : undefined;\r\n\r\n      return (\r\n        <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n          {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n          {bijschrift?.locatie === \"boven\" && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n          <dso-image-overlay>\r\n            {titel && (\r\n              <div slot=\"titel\">\r\n                <span>{titel}</span>\r\n              </div>\r\n            )}\r\n            <img\r\n              src={illustratie.naam ?? undefined}\r\n              alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n              onLoad={(event: Event) => this.onImageLoad(event, Number(illustratie.schaal))}\r\n            />\r\n            {(bijschrift || bron) && (\r\n              <div slot=\"bijschrift\">\r\n                <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n              </div>\r\n            )}\r\n          </dso-image-overlay>\r\n          {(bijschrift?.locatie === \"onder\" || (!bijschrift && bron)) && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInhoudNode implements OzonContentNode {\r\n  name = [\"Inhoud\", \"ContainerBlocksType\", \"BlockMixedcontentMetMaximaleInlinesMarkersPopupsType\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <div class=\"dso-rich-content\">{mapNodeToJsx(node.childNodes)}</div>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {\r\n  name = [\"InlineTekstAfbeelding\", \"Illustratie\"];\r\n\r\n  render(node: Element) {\r\n    return (\r\n      <img\r\n        src={node.getAttribute(\"naam\") ?? undefined}\r\n        alt={node.getAttribute(\"naam\") ?? undefined}\r\n        height={node.getAttribute(\"hoogte\") ?? undefined}\r\n        width={node.getAttribute(\"breedte\") ?? undefined}\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineNodes implements OzonContentNode {\r\n  name = [\"sub\", \"sup\", \"strong\", \"b\", \"u\", \"i\", \"br\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    if (node.localName === \"br\") {\r\n      return <br />;\r\n    }\r\n\r\n    const Tag = node.localName;\r\n\r\n    return <Tag>{mapNodeToJsx(node.childNodes)}</Tag>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntIoRefNode implements OzonContentNode {\r\n  name = \"IntIoRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntRefNode implements OzonContentNode {\r\n  name = \"IntRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentLijstNode implements OzonContentNode {\r\n  name = \"Lijst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const aanhef = childNodes.find((n) => getNodeName(n) === \"Lijstaanhef\");\r\n    const sluiting = childNodes.find((n) => getNodeName(n) === \"Lijstsluiting\");\r\n    const listItems = childNodes.filter((n) => getNodeName(n) === \"Li\");\r\n\r\n    return (\r\n      <div class=\"dso-ozon-lijst od-Lijst\">\r\n        {aanhef && mapNodeToJsx(aanhef)}\r\n        <ul class={node.getAttribute(\"type\") ?? \"\"}>\r\n          {listItems.map((item) => {\r\n            const itemNodes = Array.from(item.childNodes);\r\n            const liNummer = itemNodes.find((n) => getNodeName(n) === \"LiNummer\")?.childNodes;\r\n\r\n            return (\r\n              <li class=\"od-Li\">\r\n                {liNummer && <span class=\"od-LiNummer\">{mapNodeToJsx(liNummer)}</span>}\r\n                {mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== \"LiNummer\"))}\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n        {sluiting && mapNodeToJsx(sluiting)}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNieuweTekstNode implements OzonContentNode {\r\n  name = \"NieuweTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <ins>{mapNodeToJsx(node.childNodes)}</ins>;\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNootNode implements OzonContentNode {\r\n  name = \"Noot\";\r\n\r\n  handles = [\"NootNummer\"];\r\n\r\n  identify(): string | undefined {\r\n    return \"Noot\";\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx, state: openNoteId, setState }: OzonContentNodeContext<string | undefined>) {\r\n    const noteId = node.getAttribute(\"id\");\r\n    if (!noteId) {\r\n      console.error(\"Noot node without id\", node);\r\n\r\n      return <Fragment />;\r\n    }\r\n\r\n    const noteControlsId = `dso-ozon-note-${noteId}`;\r\n\r\n    const childNodes = Array.from(node.childNodes);\r\n    const nootNummer = childNodes.find((n) => getNodeName(n) === \"NootNummer\")?.textContent ?? noteId;\r\n\r\n    return (\r\n      <>\r\n        <sup>\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle-note\"\r\n            aria-describedby={noteControlsId}\r\n            onClick={() => setState?.(openNoteId === noteId ? undefined : noteId)}\r\n            onBlur={() => setState?.(undefined)}\r\n            aria-expanded={openNoteId === noteId ? \"true\" : \"false\"}\r\n          >\r\n            {nootNummer}\r\n          </button>\r\n        </sup>\r\n        <dso-tooltip active={openNoteId === noteId} id={noteControlsId} stateless descriptive>\r\n          <span role=\"section\">{mapNodeToJsx(Array.from(node.querySelectorAll(\":scope > Al\")))}</span>\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentOpschriftNode implements OzonContentNode {\r\n  name = \"Opschrift\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { Colspecs } from \"./colspec.interface\";\r\n\r\nexport function mapColspecs(count: number, nodeList: NodeListOf<Element>): Colspecs {\r\n  const elements = Array.from(nodeList);\r\n  const totalWidth = getTotalWidth(elements);\r\n\r\n  return {\r\n    totalWidth,\r\n    count,\r\n    columns: elements.map((element, index) => {\r\n      const colNumber = element.getAttribute(\"colnum\");\r\n\r\n      return {\r\n        name: element.getAttribute(\"colname\") ?? \"\",\r\n        number: colNumber ? parseInt(colNumber, 10) : index + 1,\r\n        width: getWidth(totalWidth, element),\r\n      };\r\n    }),\r\n  };\r\n}\r\n\r\nfunction getTotalWidth(elements: Element[]): number {\r\n  return elements.reduce((totalWidth, element) => {\r\n    const width = element.getAttribute(\"colwidth\")?.replace(/[^0-9]/, \"\") ?? \"\";\r\n    const colWidth = parseInt(width, 10);\r\n\r\n    return totalWidth + (isNaN(colWidth) ? 0 : colWidth);\r\n  }, 0);\r\n}\r\n\r\nfunction getWidth(totalWidth: number, element: Element): string | undefined {\r\n  const width = element.getAttribute(\"colwidth\");\r\n\r\n  if (!width) {\r\n    return undefined;\r\n  }\r\n\r\n  if (width === \"*\") {\r\n    return \"100%\";\r\n  }\r\n\r\n  if (width.includes(\"*\") || width.match(/^[\\d+]$/)) {\r\n    const colWidth = parseInt(width.replace(/[^0-9]/, \"\"), 10);\r\n\r\n    return `${Math.round((colWidth / totalWidth) * 100)}%`;\r\n  }\r\n\r\n  return width;\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nexport const Colgroup: FunctionalComponent<{ colspecs: Colspecs }> = ({ colspecs }) =>\r\n  colspecs.columns.length > 0 ? (\r\n    <colgroup>\r\n      {colspecs.columns.map((colspec) => (\r\n        <col style={{ width: colspec.width }} />\r\n      ))}\r\n    </colgroup>\r\n  ) : (\r\n    <Fragment />\r\n  );\r\n","import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h, JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getData(cell: Element) {\r\n  return {\r\n    moreRows: cell.getAttribute(\"morerows\"),\r\n    nameStart: cell.getAttribute(\"namest\"),\r\n    nameEnd: cell.getAttribute(\"nameend\"),\r\n  };\r\n}\r\n\r\nfunction getColspan({ columns }: Colspecs, nameStart: string, nameEnd: string): number | undefined {\r\n  const colspecStart = columns.find((c) => c.name === nameStart);\r\n  const colspecEnd = columns.find((c) => c.name === nameEnd);\r\n  if (!colspecStart || !colspecEnd) {\r\n    return undefined;\r\n  }\r\n\r\n  const colspan = colspecEnd.number - colspecStart.number + 1;\r\n\r\n  return colspan === 1 ? undefined : colspan;\r\n}\r\n\r\nexport const Cell: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  cell: Element;\r\n}> = ({ context: { mapNodeToJsx }, colspecs, cell }) => {\r\n  const { moreRows, nameStart, nameEnd } = getData(cell);\r\n\r\n  const td: JSXBase.TdHTMLAttributes<HTMLTableCellElement> = {\r\n    rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,\r\n    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,\r\n  };\r\n\r\n  return <td {...td}>{mapNodeToJsx(cell.childNodes)}</td>;\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\nimport { Cell } from \"./table-cell\";\r\n\r\nexport const Rows: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  rows: Element[];\r\n}> = ({ context, colspecs, rows }) => {\r\n  return (\r\n    <>\r\n      {rows.map((row) => (\r\n        <tr>\r\n          {Array.from(row.children).map((cell) => (\r\n            <Cell cell={cell} colspecs={colspecs} context={context} />\r\n          ))}\r\n        </tr>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n","import { h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getNodeName } from \"../../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../../ozon-content-node.interface\";\r\n\r\nimport { mapColspecs } from \"./colspec/colspec-mapper\";\r\nimport { Colgroup } from \"./table-colgroup\";\r\nimport { Rows } from \"./table-rows\";\r\n\r\nfunction mapData(node: Element) {\r\n  const tgroup = node.querySelector(\":scope > tgroup\");\r\n  const colAttribute = tgroup?.getAttribute(\"cols\") ?? undefined;\r\n  const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;\r\n\r\n  return {\r\n    caption: node.querySelector(\":scope > title\")?.textContent ?? undefined,\r\n    colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(\":scope > colspec\")) : undefined,\r\n    headRows: Array.from(node.querySelectorAll(\":scope > tgroup > thead > row\")),\r\n    bodyRows: Array.from(node.querySelectorAll(\":scope > tgroup > tbody > row\")),\r\n    editAction: node.getAttribute(\"wijzigactie\"),\r\n  };\r\n}\r\n\r\nexport class OzonContentTableNode implements OzonContentNode {\r\n  name = \"table\";\r\n\r\n  handles = [\"title\", \"tgroup\", \"colspec\", \"thead\", \"tbody\", \"row\", \"cell\"];\r\n\r\n  id = uuidv4();\r\n\r\n  render(node: Element, context: OzonContentNodeContext) {\r\n    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);\r\n\r\n    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    return (\r\n      <dso-table>\r\n        <table\r\n          class={clsx(\"table dso-table-vertical-lines\", {\r\n            \"dso-del\": editAction === \"verwijder\",\r\n            \"dso-ins\": editAction === \"voegtoe\",\r\n          })}\r\n          {...(bron ? { \"aria-describedby\": this.id } : {})}\r\n        >\r\n          {caption && <caption>{caption}</caption>}\r\n          {colspecs && <Colgroup colspecs={colspecs} />}\r\n          {headRows.length > 0 && (\r\n            <thead>\r\n              <Rows rows={headRows} colspecs={colspecs} context={context}></Rows>\r\n            </thead>\r\n          )}\r\n          {bodyRows.length > 0 && (\r\n            <tbody>\r\n              <Rows rows={bodyRows} colspecs={colspecs} context={context}></Rows>\r\n            </tbody>\r\n          )}\r\n        </table>\r\n        {bron && <div id={this.id}>{context.mapNodeToJsx(bron)}</div>}\r\n      </dso-table>\r\n    );\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentTextNode implements OzonContentNode {\r\n  name = \"#text\";\r\n\r\n  render(node: Node) {\r\n    return <Fragment>{node.textContent}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentVerwijderdeTekstNode implements OzonContentNode {\r\n  name = \"VerwijderdeTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <del>{mapNodeToJsx(node.childNodes)}</del>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n  private cache: { xml: string; document: Document } | undefined;\r\n\r\n  private mappers: OzonContentNode[] = [\r\n    new OzonContentTextNode(),\r\n    new OzonContentDocumentNode(),\r\n    new OzonContentInhoudNode(),\r\n    new OzonContentOpschriftNode(),\r\n    new OzonContentIntRefNode(),\r\n    new OzonContentExtRefNode(),\r\n    new OzonContentAlNode(),\r\n    new OzonContentInlineNodes(),\r\n    new OzonContentInlineTekstAfbeeldingNode(),\r\n    new OzonContentNootNode(),\r\n    new OzonContentTableNode(),\r\n    new OzonContentIntIoRefNode(),\r\n    new OzonContentFiguurNode(),\r\n    new OzonContentLijstNode(),\r\n    new OzonContentBronNode(),\r\n    new OzonContentNieuweTekstNode(),\r\n    new OzonContentVerwijderdeTekstNode(),\r\n  ];\r\n\r\n  private skip = this.mappers.reduce<string[]>((t, m) => {\r\n    if (m.handles) {\r\n      t.push(...m.handles);\r\n    }\r\n\r\n    return t;\r\n  }, []);\r\n\r\n  private fallbackNode = new OzonContentFallbackNode();\r\n\r\n  private domParser = new DOMParser();\r\n\r\n  private findMapper(name: string): OzonContentNode | undefined {\r\n    if (this.skip.includes(name)) {\r\n      return undefined;\r\n    }\r\n\r\n    return (\r\n      this.mappers.find((m) => {\r\n        if (Array.isArray(m.name)) {\r\n          return m.name.includes(name);\r\n        }\r\n\r\n        return m.name === name;\r\n      }) ?? this.fallbackNode\r\n    );\r\n  }\r\n\r\n  mapNodeToJsx(node: Node | Node[] | NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n    if (node instanceof NodeList) {\r\n      return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    if (Array.isArray(node)) {\r\n      return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    const nodeName = getNodeName(node);\r\n    const mapper = this.findMapper(nodeName);\r\n    if (!mapper) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    const identity = mapper.identify?.(node);\r\n\r\n    const state = identity ? context.state[identity] : undefined;\r\n    const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n    return mapper.render(node, {\r\n      mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n      emitAnchorClick: context.emitAnchorClick,\r\n      setState,\r\n      state,\r\n      path,\r\n    });\r\n  }\r\n\r\n  transform(xml: string, context: OzonContentContext): JSX.Element {\r\n    if (!this.cache || this.cache.xml !== xml) {\r\n      this.cache = { xml, document: this.domParser.parseFromString(xml, \"text/xml\") };\r\n    }\r\n\r\n    const xmlDocument = this.cache.document;\r\n\r\n    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\r\n  }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n\r\n:host(:not([inline])) {\r\n  display: block;\r\n}\r\n\r\n:host([inline]) {\r\n  display: inline;\r\n}\r\n\r\n:host([deleted]) {\r\n  * {\r\n    text-decoration: line-through !important;\r\n  }\r\n}\r\n\r\n:host([interactive]) {\r\n  @include anchor.root($is-html-a-element: false);\r\n\r\n  color: colors.$bosgroen;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n}\r\n\r\n:host([interactive=\"sub\"]) {\r\n  color: colors.$grijs-90;\r\n}\r\n\r\n.deleted-start,\r\n.deleted-end {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton.toggle-note {\r\n  @include button.tertiary($modifiers: false);\r\n}\r\n\r\nspan[role=\"section\"],\r\nspan[role=\"paragraph\"] {\r\n  display: block;\r\n}\r\n\r\n.fallback {\r\n  display: block;\r\n}\r\n\r\n// Styling below copied from DSO Viewer 20211011\r\n\r\n.od-Term {\r\n  font-weight: 700;\r\n}\r\n\r\n.od-Definitie,\r\n.od-Tussenkop {\r\n  font-style: italic;\r\n}\r\n\r\n.od-Inhoud,\r\n.od-Inhoud > .od-Lijst,\r\n.od-IntIoRef,\r\n.od-Lidnr,\r\n.od-LiNr,\r\n.od-Opschrift,\r\n.od-Tussenkop {\r\n  display: inline;\r\n}\r\n\r\n.od-Al {\r\n  margin-bottom: 0.75em;\r\n}\r\n\r\n.od-IntIoRef {\r\n  border-bottom: 1px dotted;\r\n}\r\n\r\n.dso-ozon-bron {\r\n  font-style: italic;\r\n  font-size: 0.75rem;\r\n}\r\n\r\n.dso-ozon-figuur {\r\n  margin-bottom: units.$u2;\r\n\r\n  .figuur-bijschrift {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n  }\r\n\r\n  &.bijschrift-boven {\r\n    .figuur-bijschrift {\r\n      padding-bottom: 0.25rem;\r\n    }\r\n  }\r\n\r\n  &.bijschrift-onder {\r\n    .figuur-bijschrift {\r\n      padding-top: 0.25rem;\r\n    }\r\n  }\r\n\r\n  .figuur-titel {\r\n    color: colors.$mauve;\r\n    display: block;\r\n    font-weight: 500;\r\n    padding-bottom: 0.5rem;\r\n  }\r\n}\r\n\r\n.dso-ozon-lijst {\r\n  span.od-Lijstaanhef,\r\n  span.od-Lijstsluiting {\r\n    margin-bottom: units.$ru2;\r\n  }\r\n\r\n  ul {\r\n    &.expliciet {\r\n      list-style: none;\r\n\r\n      > .od-Li {\r\n        position: relative;\r\n\r\n        > span.od-LiNummer {\r\n          position: absolute;\r\n          left: units.$u6 * -1 + 4;\r\n          text-align: right;\r\n          width: units.$u5;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.od-Tabel thead {\r\n  font-weight: 600;\r\n}\r\n\r\n.od-Kadertekst {\r\n  border: 1px solid #e5e5e5;\r\n  margin-bottom: 1rem;\r\n  padding: 1rem;\r\n}\r\n\r\n.dso-del {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.dso-ins {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Host, JSX } from \"@stencil/core\";\r\nimport { isTabbable } from \"tabbable\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClick, OzonContentClick } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  scoped: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content: string | undefined;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * Marks content as deleted using visual and accessible clues.\r\n   */\r\n  @Prop({ reflect: true })\r\n  deleted = false;\r\n\r\n  /**\r\n   * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\r\n   *\r\n   * **Do not** use this without an accessible companion element! `interactive` is only\r\n   * meant to ease the use of the companion element for mouse/touch users.\r\n   *\r\n   * * `true`: Interactive anchor-look-alike\r\n   * * `\"sub\"`: Interactive anchor-look-alike for sub navigation\r\n   * * `false | undefined`: Disabled\r\n   */\r\n  @Prop({ reflect: true })\r\n  interactive: \"sub\" | \"\" | boolean = false;\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event()\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClick>;\r\n\r\n  /**\r\n   * These events are only emitted when the component is `interactive`.\r\n   */\r\n  @Event()\r\n  dsoClick!: EventEmitter<OzonContentClick>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoOzonContentElement;\r\n\r\n  private mapper = new Mapper();\r\n\r\n  private handleHostOnClick(e: UIEvent) {\r\n    // '' is `true`: <dso-ozon-content interactive>\r\n    if (this.interactive !== \"\" && !this.interactive) {\r\n      return;\r\n    }\r\n\r\n    const doIt =\r\n      e\r\n        .composedPath()\r\n        .find(\r\n          (eventTarget) => eventTarget === this.host || (eventTarget instanceof HTMLElement && isTabbable(eventTarget))\r\n        ) === this.host;\r\n\r\n    if (doIt) {\r\n      this.dsoClick.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      setState: (state) => (this.state = state),\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n    };\r\n\r\n    const transformed = this.mapper.transform(this.content ?? \"\", context);\r\n\r\n    if (this.deleted) {\r\n      return (\r\n        <section>\r\n          <slot name=\"prefix\" />\r\n          <span class=\"deleted-start\">Begin verwijderd element</span>\r\n          {transformed}\r\n          <span class=\"deleted-end\">Einde verwijderd element</span>\r\n          <slot name=\"suffix\" />\r\n        </section>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={(e: UIEvent) => this.handleHostOnClick(e)}>\r\n        <slot name=\"prefix\" />\r\n        {transformed}\r\n        <slot name=\"suffix\" />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-ozon-content.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-slide-toggle.js

@@ -1,55 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { v as v4 } from './v4.js';
-
-const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
-
-const SlideToggle = /*@__PURE__*/ proxyCustomElement(class SlideToggle extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
-    this.checked = false;
-    this.disabled = false;
-    this.accessibleLabel = undefined;
-    this.labelledbyId = undefined;
-    this.hasVisibleLabel = undefined;
-    this.identifier = v4();
-  }
-  handleSwitch(e) {
-    this.dsoActiveChange.emit({
-      originalEvent: e,
-      checked: !this.checked,
-    });
-  }
-  componentWillLoad() {
-    this.hasVisibleLabel = this.host.querySelector("*") !== null;
-  }
-  render() {
-    return (h(Fragment, null, h("button", Object.assign({ id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("rect", { width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { htmlFor: this.identifier }, h("slot", null)))));
-  }
-  get host() { return this; }
-  static get style() { return slideToggleCss; }
-}, [4, "dso-slide-toggle", {
-    "checked": [4],
-    "disabled": [4],
-    "accessibleLabel": [1, "accessible-label"],
-    "labelledbyId": [1, "labelledby-id"],
-    "identifier": [1],
-    "hasVisibleLabel": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-slide-toggle"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-slide-toggle":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SlideToggle);
-      }
-      break;
-  } });
-}
+import { S as SlideToggle, d as defineCustomElement$1 } from './slide-toggle.js';
 
 const DsoSlideToggle = SlideToggle;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/dso-slide-toggle.js.map

@@ -1 +1 @@
-{"file":"dso-slide-toggle.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,4vBAA4vB;;MCStwB,WAAW;;;;;mBAQZ,KAAK;oBAMJ,KAAK;;;;sBAqBH,EAAE,EAAE;;EAQT,YAAY,CAAC,CAAQ;IAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,aAAa,EAAE,CAAC;MAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;KACvB,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;GAC9D;EAED,MAAM;IACJ,QACE,kBACE,4BACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtE,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChF,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3D,cAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7B,eAAQ,CACF,CACT,CACA,EACH;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","./src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-slide-toggle.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/dso-table.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { v as v4 } from './v4.js';
 
-const tableCss = "@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  margin-top: 15vh;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 640px;\n  opacity: 1;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body ul,\n:host .dso-modal .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal .dso-body dso-highlight-box,\n:host .dso-modal .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 0 32px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\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  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::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}\n.dso-tertiary.dso-spinner-right::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}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\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\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
+const tableCss = "@keyframes slideInFromTop {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-bottom: 24px;\n}\n\n.dso-header {\n  min-height: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  bottom: 0;\n  height: 100%;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 530;\n  inset: 0px;\n  height: 100%;\n  position: fixed;\n  z-index: 530;\n}\n:host .dso-modal .dso-dialog {\n  animation: 1s ease-out 0s 1 slideInFromTop;\n  background-color: #fff;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  margin-left: auto;\n  margin-right: auto;\n  margin-top: clamp(40px, 15vh, 15vh);\n  max-width: 640px;\n  opacity: 1;\n}\n:host .dso-modal .dso-header {\n  border-bottom: 1px solid #ccc;\n  padding: 16px;\n  position: relative;\n}\n:host .dso-modal .dso-header h2 {\n  color: #275937;\n  margin: 0;\n  max-width: calc(100% - 24px);\n}\n:host .dso-modal .dso-header .dso-close {\n  background-color: transparent;\n  border: 0;\n  height: 32px;\n  padding: 0;\n  position: absolute;\n  right: 13px;\n  text-align: center;\n  top: 16px;\n  width: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n  height: calc(100% - 96px - 1.5rem);\n  max-height: calc(70vh - 144px - 1.5em);\n  min-height: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n  margin-bottom: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n  margin: 0 0 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n  padding: 16px 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n  margin-bottom: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n  height: auto;\n  max-width: 100%;\n}\n:host .dso-modal .dso-footer {\n  min-height: 80px;\n  padding: 16px 32px;\n  text-align: right;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {\n    margin-left: 16px;\n  }\n  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {\n    margin-left: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-width: 100%;\n    margin-top: 0;\n  }\n  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-left: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    text-align: center;\n    width: 100%;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-top: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,\n  :host .dso-modal .dso-footer button.btn-link span {\n    float: none;\n  }\n}\n@media screen and (max-height: 380px) {\n  :host .dso-modal .dso-dialog {\n    margin-bottom: 8px;\n    margin-top: 8px;\n    min-height: 216px;\n  }\n  :host .dso-modal .dso-header {\n    padding: 8px 16px;\n  }\n  :host .dso-modal .dso-header .dso-close {\n    top: 8px;\n  }\n  :host .dso-modal .dso-body {\n    padding: 16px 24px;\n  }\n  :host .dso-modal .dso-footer {\n    min-height: auto;\n    overflow: auto;\n    padding: 8px 32px;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-top: 1rem;\n  max-width: calc(100% - 2rem);\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-height: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-width: 100%;\n  }\n}\n\n:host([is-responsive]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-bottom: 0;\n  overflow-y: hidden;\n  width: 100%;\n}\n:host([is-responsive]) .dso-table-body.dso-body {\n  width: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-bottom: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  width: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-left: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-bottom: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.dso-tertiary {\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  cursor: pointer;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.dso-tertiary.dso-spinner-left::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}\n.dso-tertiary.dso-spinner-right::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}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n\n.sr-only {\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\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  bottom: 0;\n  display: block;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
 
 const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
   constructor() {

package/dist/components/dso-table.js.map

@@ -1 +1 @@
-{"file":"dso-table.js","mappings":"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","names":["debounce"],"sources":["./src/components/table/table.scss?tag=dso-table&encapsulation=shadow","./src/components/table/table.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n  display: block;\r\n  margin-bottom: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n  min-height: units.$u4;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-size: units.$font-size-h2;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .dso-close {\r\n    color: colors.$bosgroen;\r\n  }\r\n}\r\n\r\n:host .dso-modal {\r\n  @include modal.root();\r\n\r\n  inset: 0px;\r\n  height: 100%;\r\n  position: fixed;\r\n  z-index: zindex.$modal;\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n  margin-top: 1rem;\r\n  max-width: calc(100% - 2rem);\r\n\r\n  .dso-body {\r\n    $dso-body-unavailable-height: (2 * modal.$header-padding) + (modal.$footer-button-height + modal.$footer-padding);\r\n    max-height: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    max-width: 100%;\r\n  }\r\n}\r\n\r\n:host([is-responsive]) {\r\n  .dso-table-body {\r\n    border: 1px solid table.$border-color;\r\n    margin-bottom: 0;\r\n    overflow-y: hidden;\r\n    width: 100%;\r\n\r\n    &.dso-body {\r\n      width: calc(100% - modal.$body-padding * 2);\r\n    }\r\n  }\r\n}\r\n\r\n.dso-table-utilities {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-bottom: units.$u1;\r\n\r\n  .dso-responsive-message {\r\n    margin-bottom: 0;\r\n\r\n    &:only-child {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .open-modal-button {\r\n    &:only-child {\r\n      margin-left: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-responsive-message {\r\n  font-size: 0.8em;\r\n  margin-bottom: units.$u1;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n  @include modal.overlay();\r\n}\r\n\r\n.dso-table-placeholder {\r\n  box-shadow: inset 0 0 0 1px table.$border-color;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-table.js","mappings":"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","names":["debounce"],"sources":["./src/components/table/table.scss?tag=dso-table&encapsulation=shadow","./src/components/table/table.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n  display: block;\r\n  margin-bottom: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n  min-height: units.$u4;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-size: units.$font-size-h2;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .dso-close {\r\n    color: colors.$bosgroen;\r\n  }\r\n}\r\n\r\n:host .dso-modal {\r\n  @include modal.root();\r\n\r\n  inset: 0px;\r\n  height: 100%;\r\n  position: fixed;\r\n  z-index: zindex.$modal;\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n  margin-top: 1rem;\r\n  max-width: calc(100% - 2rem);\r\n\r\n  .dso-body {\r\n    $dso-body-unavailable-height: (2 * modal.$header-padding) + (modal.$footer-button-height + modal.$footer-padding);\r\n    max-height: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    max-width: 100%;\r\n  }\r\n}\r\n\r\n:host([is-responsive]) {\r\n  .dso-table-body {\r\n    border: 1px solid table.$border-color;\r\n    margin-bottom: 0;\r\n    overflow-y: hidden;\r\n    width: 100%;\r\n\r\n    &.dso-body {\r\n      width: calc(100% - modal.$body-padding * 2);\r\n    }\r\n  }\r\n}\r\n\r\n.dso-table-utilities {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-bottom: units.$u1;\r\n\r\n  .dso-responsive-message {\r\n    margin-bottom: 0;\r\n\r\n    &:only-child {\r\n      width: 100%;\r\n    }\r\n  }\r\n\r\n  .open-modal-button {\r\n    &:only-child {\r\n      margin-left: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-responsive-message {\r\n  font-size: 0.8em;\r\n  margin-bottom: units.$u1;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  cursor: pointer;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n  @include modal.overlay();\r\n}\r\n\r\n.dso-table-placeholder {\r\n  box-shadow: inset 0 0 0 1px table.$border-color;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\n","import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dsot-document-component-demo.d.ts

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

package/dist/components/dsot-document-component-demo.js

@@ -0,0 +1,202 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$d } from './alert.js';
+import { d as defineCustomElement$c } from './annotation-button.js';
+import { d as defineCustomElement$b } from './annotation-output.js';
+import { d as defineCustomElement$a } from './badge.js';
+import { d as defineCustomElement$9 } from './document-component.js';
+import { d as defineCustomElement$8 } from './expandable.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './label.js';
+import { d as defineCustomElement$5 } from './ozon-content.js';
+import { d as defineCustomElement$4 } from './responsive-element.js';
+import { d as defineCustomElement$3 } from './slide-toggle.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentComponentDemo extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.DocumentComponent = ({ path }) => {
+      var _a;
+      const documentComponent = path.at(-1);
+      const { DocumentComponent } = this;
+      return (h("ul", null, (_a = documentComponent === null || documentComponent === void 0 ? void 0 : documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.map((d, i) => (h("li", { key: d.documentTechnischId }, h("dso-document-component", { annotated: i % 3 === 2, bevatOntwerpInformatie: !!d.bevatOntwerpInformatie, filtered: this.isOpen(d) ? this.isFiltered(d) : this.hasFilteredChildren(d), genesteOntwerpInformatie: this.hasNestedDraft(d), gereserveerd: d.gereserveerd, heading: "h2", inhoud: d.inhoud, label: d.labelXml, openAnnotation: this.isOpenedAnnotation(d), notApplicable: this.isNotApplicable(d) || path.some((p) => this.isNotApplicable(p)), nummer: d.nummerXml, onDsoAnnotationToggle: () => this.handleAnnotationToggle(d), onDsoOpenToggle: (e) => this.handleOpenToggle(e, d), open: this.isOpen(d), opschrift: d.opschrift, type: d.type, vervallen: d.vervallen, wijzigactie: d.wijzigactie }, this.isOpenedAnnotation(d) && (h("dso-annotation-output", { slot: "annotation", open: true, identifier: "test", onDsoClose: () => this.handleAnnotationToggle(d) }, h("span", { slot: "title" }, "Annotaties"), h("dso-slide-toggle", { checked: this.isCheckedSlideToggle(d), onDsoActiveChange: () => this.handleSelectableChange(d) }, "Delfzijl"))), this.showContent(d) && h(DocumentComponent, { path: [...path, d] })))))));
+    };
+    this.response = undefined;
+    this.open = [];
+    this.openedAnnotation = [];
+    this.filtered = [];
+    this.notApplicable = [];
+    this.activeAnnotationSelectables = [];
+  }
+  fixData(documentComponent) {
+    var _a;
+    return Object.assign(Object.assign({}, documentComponent), { nummerXml: documentComponent.type === "LID" && !((_a = documentComponent.nummerXml) === null || _a === void 0 ? void 0 : _a.startsWith("<?"))
+        ? `<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Nummer xmlns="https://standaarden.overheid.nl/stop/imop/tekst/">${documentComponent.nummerXml}</Nummer>`
+        : documentComponent.nummerXml, _embedded: documentComponent._embedded && {
+        ontwerpTekststructuurDocumentComponenten: documentComponent._embedded.ontwerpTekststructuurDocumentComponenten.map((d) => this.fixData(d)),
+      } });
+  }
+  componentDidLoad() {
+    fetch("ozon-response.json")
+      .then((response) => response.json())
+      .then((result) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+      this.response = this.fixData(result);
+      /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
+      this.filtered = [
+        (_e = (_d = (_c = (_b = (_a = this.response) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _c === void 0 ? void 0 : _c.ontwerpTekststructuurDocumentComponenten[10]._embedded) === null || _d === void 0 ? void 0 : _d.ontwerpTekststructuurDocumentComponenten[2]._embedded) === null || _e === void 0 ? void 0 : _e.ontwerpTekststructuurDocumentComponenten[0],
+        (_j = (_h = (_g = (_f = this.response) === null || _f === void 0 ? void 0 : _f._embedded) === null || _g === void 0 ? void 0 : _g.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _h === void 0 ? void 0 : _h.ontwerpTekststructuurDocumentComponenten[10]._embedded) === null || _j === void 0 ? void 0 : _j.ontwerpTekststructuurDocumentComponenten[0],
+      ];
+      this.notApplicable = [
+        (_m = (_l = (_k = this.response) === null || _k === void 0 ? void 0 : _k._embedded) === null || _l === void 0 ? void 0 : _l.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _m === void 0 ? void 0 : _m.ontwerpTekststructuurDocumentComponenten[4],
+        (_r = (_q = (_p = (_o = this.response) === null || _o === void 0 ? void 0 : _o._embedded) === null || _p === void 0 ? void 0 : _p.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _q === void 0 ? void 0 : _q.ontwerpTekststructuurDocumentComponenten[4]._embedded) === null || _r === void 0 ? void 0 : _r.ontwerpTekststructuurDocumentComponenten[0],
+        (_v = (_u = (_t = (_s = this.response) === null || _s === void 0 ? void 0 : _s._embedded) === null || _t === void 0 ? void 0 : _t.ontwerpTekststructuurDocumentComponenten[0]._embedded) === null || _u === void 0 ? void 0 : _u.ontwerpTekststructuurDocumentComponenten[9]._embedded) === null || _v === void 0 ? void 0 : _v.ontwerpTekststructuurDocumentComponenten[1],
+      ];
+      /* eslint-enable @typescript-eslint/no-non-null-asserted-optional-chain */
+    });
+  }
+  handleOpenToggle(e, documentComponent) {
+    const isOpen = this.isOpen(documentComponent);
+    if (e.detail.open && !isOpen) {
+      this.open = [...this.open, documentComponent];
+    }
+    else if (!e.detail.open && isOpen) {
+      this.open = this.open.filter((d) => d !== documentComponent);
+    }
+  }
+  handleAnnotationToggle(documentComponent) {
+    this.openedAnnotation = this.isOpenedAnnotation(documentComponent)
+      ? this.openedAnnotation.filter((d) => d !== documentComponent)
+      : [...this.openedAnnotation, documentComponent];
+    if (!this.isOpen(documentComponent)) {
+      this.open = [...this.open, documentComponent];
+    }
+  }
+  handleSelectableChange(documentComponent) {
+    this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)
+      ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)
+      : [...this.activeAnnotationSelectables, documentComponent];
+  }
+  isCheckedSlideToggle(documentComponent) {
+    return this.activeAnnotationSelectables.includes(documentComponent);
+  }
+  hasFilteredChildren(documentComponent) {
+    var _a, _b;
+    return (this.filtered.includes(documentComponent) ||
+      ((_b = (_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.some((d) => this.hasFilteredChildren(d))) !== null && _b !== void 0 ? _b : false));
+  }
+  isOpen(documentComponent) {
+    return documentComponent.type === "LID" || this.open.includes(documentComponent);
+  }
+  isOpenedAnnotation(documentComponent) {
+    return this.openedAnnotation.includes(documentComponent);
+  }
+  isFiltered(documentComponent) {
+    return this.filtered.includes(documentComponent);
+  }
+  isNotApplicable(documentComponent) {
+    return this.notApplicable.includes(documentComponent);
+  }
+  hasNestedDraft(documentComponent) {
+    var _a, _b;
+    return ((_b = (_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.some((d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d))) !== null && _b !== void 0 ? _b : false);
+  }
+  showContent(documentComponent) {
+    var _a;
+    return (this.isOpen(documentComponent) &&
+      !!(((_a = documentComponent._embedded) === null || _a === void 0 ? void 0 : _a.ontwerpTekststructuurDocumentComponenten.length) || documentComponent.inhoud));
+  }
+  render() {
+    var _a, _b;
+    const { DocumentComponent } = this;
+    return (h("div", { style: { margin: "0 8px", borderLeft: "1px dashed pink", borderRight: "1px dashed pink" } }, h("dso-responsive-element", { class: "dso-document-components" }, (_b = (_a = this.response) === null || _a === void 0 ? void 0 : _a._embedded) === null || _b === void 0 ? void 0 : _b.ontwerpTekststructuurDocumentComponenten.map((d) => (h(Fragment, null, h(DocumentComponent, { path: [d] }), h("hr", null)))))));
+  }
+}, [0, "dsot-document-component-demo", {
+    "response": [32],
+    "open": [32],
+    "openedAnnotation": [32],
+    "filtered": [32],
+    "notApplicable": [32],
+    "activeAnnotationSelectables": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dsot-document-component-demo", "dso-alert", "dso-annotation-button", "dso-annotation-output", "dso-badge", "dso-document-component", "dso-expandable", "dso-icon", "dso-label", "dso-ozon-content", "dso-responsive-element", "dso-slide-toggle", "dso-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dsot-document-component-demo":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DocumentComponentDemo);
+      }
+      break;
+    case "dso-alert":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "dso-annotation-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "dso-annotation-output":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "dso-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "dso-document-component":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "dso-expandable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "dso-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "dso-ozon-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "dso-responsive-element":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-slide-toggle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsotDocumentComponentDemo = DocumentComponentDemo;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsotDocumentComponentDemo, defineCustomElement };
+
+//# sourceMappingURL=dsot-document-component-demo.js.map

package/dist/components/dsot-document-component-demo.js.map

@@ -0,0 +1 @@
+{"file":"dsot-document-component-demo.js","mappings":"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","names":[],"sources":["./src/components/document-component/document-component.demo.tsx"],"sourcesContent":["import { h, Component, ComponentInterface, Fragment, State } from \"@stencil/core\";\r\nimport { DocumentComponentOpenToggleEvent, DsoDocumentComponentCustomEvent } from \"../../components\";\r\n\r\ninterface DocumentComponent {\r\n  documentTechnischId: string;\r\n  type?: string;\r\n  labelXml?: string;\r\n  nummerXml?: string;\r\n  opschrift?: string;\r\n  inhoud?: string;\r\n  gereserveerd?: boolean;\r\n  vervallen?: boolean;\r\n  bevatOntwerpInformatie?: boolean;\r\n  wijzigactie?: \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n  _embedded?: {\r\n    ontwerpTekststructuurDocumentComponenten: DocumentComponent[];\r\n  };\r\n}\r\n\r\n@Component({\r\n  tag: \"dsot-document-component-demo\",\r\n})\r\nexport class DocumentComponentDemo implements ComponentInterface {\r\n  @State()\r\n  response?: DocumentComponent;\r\n\r\n  @State()\r\n  open: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  openedAnnotation: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  filtered: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  notApplicable: DocumentComponent[] = [];\r\n\r\n  @State()\r\n  activeAnnotationSelectables: DocumentComponent[] = [];\r\n\r\n  private fixData(documentComponent: DocumentComponent): DocumentComponent {\r\n    return {\r\n      ...documentComponent,\r\n      nummerXml:\r\n        documentComponent.type === \"LID\" && !documentComponent.nummerXml?.startsWith(\"<?\")\r\n          ? `<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?><Nummer xmlns=\"https://standaarden.overheid.nl/stop/imop/tekst/\">${documentComponent.nummerXml}</Nummer>`\r\n          : documentComponent.nummerXml,\r\n      _embedded: documentComponent._embedded && {\r\n        ontwerpTekststructuurDocumentComponenten:\r\n          documentComponent._embedded.ontwerpTekststructuurDocumentComponenten.map((d) => this.fixData(d)),\r\n      },\r\n    };\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    fetch(\"ozon-response.json\")\r\n      .then((response) => response.json())\r\n      .then((result) => {\r\n        this.response = this.fixData(result);\r\n\r\n        /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */\r\n        this.filtered = [\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[10]!._embedded?.ontwerpTekststructuurDocumentComponenten[2]!\r\n            ._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[10]!._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n        ];\r\n\r\n        this.notApplicable = [\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[4]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[4]!._embedded?.ontwerpTekststructuurDocumentComponenten[0]!,\r\n          this.response?._embedded?.ontwerpTekststructuurDocumentComponenten[0]!._embedded\r\n            ?.ontwerpTekststructuurDocumentComponenten[9]!._embedded?.ontwerpTekststructuurDocumentComponenten[1]!,\r\n        ];\r\n        /* eslint-enable @typescript-eslint/no-non-null-asserted-optional-chain */\r\n      });\r\n  }\r\n\r\n  private handleOpenToggle(\r\n    e: DsoDocumentComponentCustomEvent<DocumentComponentOpenToggleEvent>,\r\n    documentComponent: DocumentComponent\r\n  ) {\r\n    const isOpen = this.isOpen(documentComponent);\r\n\r\n    if (e.detail.open && !isOpen) {\r\n      this.open = [...this.open, documentComponent];\r\n    } else if (!e.detail.open && isOpen) {\r\n      this.open = this.open.filter((d) => d !== documentComponent);\r\n    }\r\n  }\r\n\r\n  private handleAnnotationToggle(documentComponent: DocumentComponent) {\r\n    this.openedAnnotation = this.isOpenedAnnotation(documentComponent)\r\n      ? this.openedAnnotation.filter((d) => d !== documentComponent)\r\n      : [...this.openedAnnotation, documentComponent];\r\n\r\n    if (!this.isOpen(documentComponent)) {\r\n      this.open = [...this.open, documentComponent];\r\n    }\r\n  }\r\n\r\n  private handleSelectableChange(documentComponent: DocumentComponent) {\r\n    this.activeAnnotationSelectables = this.isCheckedSlideToggle(documentComponent)\r\n      ? this.activeAnnotationSelectables.filter((d) => d !== documentComponent)\r\n      : [...this.activeAnnotationSelectables, documentComponent];\r\n  }\r\n\r\n  private isCheckedSlideToggle(documentComponent: DocumentComponent) {\r\n    return this.activeAnnotationSelectables.includes(documentComponent);\r\n  }\r\n\r\n  private hasFilteredChildren(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      this.filtered.includes(documentComponent) ||\r\n      (documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.some((d) => this.hasFilteredChildren(d)) ??\r\n        false)\r\n    );\r\n  }\r\n\r\n  private isOpen(documentComponent: DocumentComponent): boolean {\r\n    return documentComponent.type === \"LID\" || this.open.includes(documentComponent);\r\n  }\r\n\r\n  private isOpenedAnnotation(documentComponent: DocumentComponent): boolean {\r\n    return this.openedAnnotation.includes(documentComponent);\r\n  }\r\n\r\n  private isFiltered(documentComponent: DocumentComponent): boolean {\r\n    return this.filtered.includes(documentComponent);\r\n  }\r\n\r\n  private isNotApplicable(documentComponent: DocumentComponent): boolean {\r\n    return this.notApplicable.includes(documentComponent);\r\n  }\r\n\r\n  private hasNestedDraft(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.some(\r\n        (d) => !!d.bevatOntwerpInformatie || this.hasNestedDraft(d)\r\n      ) ?? false\r\n    );\r\n  }\r\n\r\n  private showContent(documentComponent: DocumentComponent): boolean {\r\n    return (\r\n      this.isOpen(documentComponent) &&\r\n      !!(documentComponent._embedded?.ontwerpTekststructuurDocumentComponenten.length || documentComponent.inhoud)\r\n    );\r\n  }\r\n\r\n  private DocumentComponent = ({ path }: DocumentComponentProps) => {\r\n    const documentComponent = path.at(-1);\r\n\r\n    const { DocumentComponent } = this;\r\n\r\n    return (\r\n      <ul>\r\n        {documentComponent?._embedded?.ontwerpTekststructuurDocumentComponenten.map((d, i) => (\r\n          <li key={d.documentTechnischId}>\r\n            <dso-document-component\r\n              annotated={i % 3 === 2}\r\n              bevatOntwerpInformatie={!!d.bevatOntwerpInformatie}\r\n              filtered={this.isOpen(d) ? this.isFiltered(d) : this.hasFilteredChildren(d)}\r\n              genesteOntwerpInformatie={this.hasNestedDraft(d)}\r\n              gereserveerd={d.gereserveerd}\r\n              heading=\"h2\"\r\n              inhoud={d.inhoud}\r\n              label={d.labelXml}\r\n              openAnnotation={this.isOpenedAnnotation(d)}\r\n              notApplicable={this.isNotApplicable(d) || path.some((p) => this.isNotApplicable(p))}\r\n              nummer={d.nummerXml}\r\n              onDsoAnnotationToggle={() => this.handleAnnotationToggle(d)}\r\n              onDsoOpenToggle={(e) => this.handleOpenToggle(e, d)}\r\n              open={this.isOpen(d)}\r\n              opschrift={d.opschrift}\r\n              type={d.type}\r\n              vervallen={d.vervallen}\r\n              wijzigactie={d.wijzigactie}\r\n            >\r\n              {this.isOpenedAnnotation(d) && (\r\n                <dso-annotation-output\r\n                  slot=\"annotation\"\r\n                  open\r\n                  identifier=\"test\"\r\n                  onDsoClose={() => this.handleAnnotationToggle(d)}\r\n                >\r\n                  <span slot=\"title\">Annotaties</span>\r\n                  <dso-slide-toggle\r\n                    checked={this.isCheckedSlideToggle(d)}\r\n                    onDsoActiveChange={() => this.handleSelectableChange(d)}\r\n                  >\r\n                    Delfzijl\r\n                  </dso-slide-toggle>\r\n                </dso-annotation-output>\r\n              )}\r\n              {this.showContent(d) && <DocumentComponent path={[...path, d]} />}\r\n            </dso-document-component>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    const { DocumentComponent } = this;\r\n\r\n    return (\r\n      <div style={{ margin: \"0 8px\", borderLeft: \"1px dashed pink\", borderRight: \"1px dashed pink\" }}>\r\n        <dso-responsive-element class=\"dso-document-components\">\r\n          {this.response?._embedded?.ontwerpTekststructuurDocumentComponenten.map((d) => (\r\n            <>\r\n              <DocumentComponent path={[d]} />\r\n              <hr />\r\n            </>\r\n          ))}\r\n        </dso-responsive-element>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\ninterface DocumentComponentProps {\r\n  path: DocumentComponent[];\r\n}\r\n"],"version":3}