@dso-toolkit/core 62.16.0 → 62.18.0

package/dist/collection/components/ozon-content/nodes/table.node/table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/nodes/table.node/table-cell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAW,MAAM,wBAAwB,CAAC;AAKpD,SAAS,OAAO,CAAC,IAAa;EAC5B,OAAO;IACL,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;IACvC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IACtC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;GACtC,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,OAAO,EAAY,EAAE,SAAiB,EAAE,OAAe;EAC3E,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC;EAC/D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC;EAC3D,IAAI,CAAC,YAAY,IAAI,CAAC,UAAU,EAAE;IAChC,OAAO,SAAS,CAAC;GAClB;EAED,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;EAE5D,OAAO,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;AAC7C,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAIZ,CAAC,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE;EACrD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;EAEvD,MAAM,EAAE,GAAmD;IACzD,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;IAC1D,OAAO,EAAE,QAAQ,IAAI,SAAS,IAAI,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS;GACjG,CAAC;EAEF,OAAO,0BAAQ,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAM,CAAC;AAC1D,CAAC,CAAC","sourcesContent":["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"]}
+{"version":3,"file":"table-cell.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/nodes/table.node/table-cell.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h } from \"@stencil/core/internal\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getColspecStartColsep({ columns }: Colspecs, nameStart: string): string | null {\r\n  const colspecStart = columns.find((c) => c.name === nameStart);\r\n\r\n  return colspecStart ? colspecStart.colsep : null;\r\n}\r\n\r\nfunction getColspecStartRowsep({ columns }: Colspecs, nameStart: string): string | null {\r\n  const colspecStart = columns.find((c) => c.name === nameStart);\r\n\r\n  return colspecStart ? colspecStart.rowsep : null;\r\n}\r\n\r\nfunction getData(cell: Element, colspecs?: Colspecs) {\r\n  const nameStart = cell.getAttribute(\"namest\");\r\n  const row = cell.parentElement;\r\n  const tgroup = row?.parentElement?.parentElement;\r\n  const table = tgroup?.parentElement;\r\n  const colsep =\r\n    cell.getAttribute(\"colsep\") ||\r\n    (colspecs && nameStart ? getColspecStartColsep(colspecs, nameStart) : null) ||\r\n    (tgroup && tgroup.getAttribute(\"colsep\")) ||\r\n    (table && table.getAttribute(\"colsep\"));\r\n  const rowsep =\r\n    cell.getAttribute(\"rowsep\") ||\r\n    (row && row.getAttribute(\"rowsep\")) ||\r\n    (colspecs && nameStart ? getColspecStartRowsep(colspecs, nameStart) : null) ||\r\n    (tgroup && tgroup.getAttribute(\"rowsep\")) ||\r\n    (table && table.getAttribute(\"rowsep\"));\r\n\r\n  return {\r\n    moreRows: cell.getAttribute(\"morerows\"),\r\n    nameStart,\r\n    nameEnd: cell.getAttribute(\"nameend\"),\r\n    colsep,\r\n    rowsep,\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, colsep, rowsep } = getData(cell, colspecs);\r\n\r\n  return (\r\n    <td\r\n      class={clsx({ \"dso-horizontal-line\": rowsep !== \"0\" }, { \"dso-vertical-line\": colsep !== \"0\" })}\r\n      rowSpan={moreRows ? parseInt(moreRows, 10) + 1 : undefined}\r\n      colSpan={colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined}\r\n    >\r\n      {mapNodeToJsx(cell.childNodes)}\r\n    </td>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/ozon-content/nodes/table.node/table.node.js

@@ -15,7 +15,8 @@ function mapData(node) {
     colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(":scope > colspec")) : undefined,
     headRows: Array.from(node.querySelectorAll(":scope > tgroup > thead > row")),
     bodyRows: Array.from(node.querySelectorAll(":scope > tgroup > tbody > row")),
-    editAction: node.getAttribute("wijzigactie"),
+    wijzigactie: node.getAttribute("wijzigactie"),
+    frame: node.getAttribute("frame") ? node.getAttribute("frame") : "all",
   };
 }
 export class OzonContentTableNode {
@@ -25,10 +26,12 @@ export class OzonContentTableNode {
     this.id = uuidv4();
   }
   render(node, context) {
-    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);
+    const { caption, colspecs, headRows, bodyRows, wijzigactie, frame } = mapData(node);
     const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
-    return (h("dso-table", null, h("table", Object.assign({ class: clsx("table dso-table-vertical-lines", {
-        [`wijzigactie-${editAction}`]: editAction,
+    return (h("dso-table", null, h("table", Object.assign({ class: clsx("table", {
+        "editaction-add": wijzigactie === "voegtoe",
+        "editaction-remove": wijzigactie === "verwijder",
+        [`dso-table-outside-lines-${frame}`]: frame,
       }) }, (bron ? { "aria-describedby": this.id } : {})), caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))), bron && h("div", { id: this.id }, context.mapNodeToJsx(bron))));
   }
 }

package/dist/collection/components/ozon-content/nodes/table.node/table.node.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.node.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/nodes/table.node/table.node.tsx"],"names":[],"mappings":"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","sourcesContent":["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            [`wijzigactie-${editAction}`]: editAction,\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"]}
+{"version":3,"file":"table.node.js","sourceRoot":"","sources":["../../../../../../src/components/ozon-content/nodes/table.node/table.node.tsx"],"names":[],"mappings":"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","sourcesContent":["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    wijzigactie: node.getAttribute(\"wijzigactie\"),\r\n    frame: node.getAttribute(\"frame\") ? node.getAttribute(\"frame\") : \"all\",\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, wijzigactie, frame } = 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\", {\r\n            \"editaction-add\": wijzigactie === \"voegtoe\",\r\n            \"editaction-remove\": wijzigactie === \"verwijder\",\r\n            [`dso-table-outside-lines-${frame}`]: frame,\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"]}

package/dist/collection/components/ozon-content/nodes/verwijderde-tekst.node.js

@@ -4,7 +4,7 @@ export class OzonContentVerwijderdeTekstNode {
     this.name = "VerwijderdeTekst";
   }
   render(node, { mapNodeToJsx }) {
-    return h("del", { class: "verwijderde-tekst" }, mapNodeToJsx(node.childNodes));
+    return h("del", { class: "removed-text" }, mapNodeToJsx(node.childNodes));
   }
 }
 //# sourceMappingURL=verwijderde-tekst.node.js.map

package/dist/collection/components/ozon-content/nodes/verwijderde-tekst.node.js.map

@@ -1 +1 @@
-{"version":3,"file":"verwijderde-tekst.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/verwijderde-tekst.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKlC,MAAM,OAAO,+BAA+B;EAA5C;IACE,SAAI,GAAG,kBAAkB,CAAC;EAK5B,CAAC;EAHC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAA0B;IAC5D,OAAO,WAAK,KAAK,EAAC,mBAAmB,IAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAO,CAAC;EAC9E,CAAC;CACF","sourcesContent":["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 class=\"verwijderde-tekst\">{mapNodeToJsx(node.childNodes)}</del>;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"verwijderde-tekst.node.js","sourceRoot":"","sources":["../../../../../src/components/ozon-content/nodes/verwijderde-tekst.node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKlC,MAAM,OAAO,+BAA+B;EAA5C;IACE,SAAI,GAAG,kBAAkB,CAAC;EAK5B,CAAC;EAHC,MAAM,CAAC,IAAa,EAAE,EAAE,YAAY,EAA0B;IAC5D,OAAO,WAAK,KAAK,EAAC,cAAc,IAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAO,CAAC;EACzE,CAAC;CACF","sourcesContent":["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 class=\"removed-text\">{mapNodeToJsx(node.childNodes)}</del>;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ozon-content/ozon-content.css

@@ -808,6 +808,76 @@ table.table.dso-table-vertical-lines > thead + tbody > tr:first-child > th,
 .dso-rich-content table.dso-table-vertical-lines > thead + tbody > tr:first-child > th {
   border-top: 0;
 }
+table.table.dso-table-outside-lines-top,
+.dso-rich-content table.dso-table-outside-lines-top {
+  border-block-start: 1px solid #666;
+}
+table.table.dso-table-outside-lines-bottom,
+.dso-rich-content table.dso-table-outside-lines-bottom {
+  border-block-end: 1px solid #ccc;
+}
+table.table.dso-table-outside-lines-topbot,
+.dso-rich-content table.dso-table-outside-lines-topbot {
+  border-block-start: 1px solid #666;
+  border-block-end: 1px solid #ccc;
+}
+table.table.dso-table-outside-lines-all,
+.dso-rich-content table.dso-table-outside-lines-all {
+  border-block-start: 1px solid #666;
+  border-block-end: 1px solid #ccc;
+}
+table.table.dso-table-outside-lines-all thead,
+.dso-rich-content table.dso-table-outside-lines-all thead {
+  border-inline-start: 1px solid #666;
+  border-inline-end: 1px solid #666;
+}
+table.table.dso-table-outside-lines-all tbody,
+.dso-rich-content table.dso-table-outside-lines-all tbody {
+  border-inline-start: 1px solid #ccc;
+  border-inline-end: 1px solid #ccc;
+}
+table.table.dso-table-outside-lines-sides thead,
+.dso-rich-content table.dso-table-outside-lines-sides thead {
+  border-inline-start: 1px solid #666;
+  border-inline-end: 1px solid #666;
+}
+table.table.dso-table-outside-lines-sides tbody,
+.dso-rich-content table.dso-table-outside-lines-sides tbody {
+  border-inline-start: 1px solid #ccc;
+  border-inline-end: 1px solid #ccc;
+}
+table.table > thead > tr > td.dso-horizontal-line,
+table.table > thead > tr > th.dso-horizontal-line,
+.dso-rich-content table > thead > tr > td.dso-horizontal-line,
+.dso-rich-content table > thead > tr > th.dso-horizontal-line {
+  border-block-end: 1px solid #666;
+}
+table.table > thead > tr > td:not(:last-child).dso-vertical-line,
+table.table > thead > tr > th:not(:last-child).dso-vertical-line,
+.dso-rich-content table > thead > tr > td:not(:last-child).dso-vertical-line,
+.dso-rich-content table > thead > tr > th:not(:last-child).dso-vertical-line {
+  border-inline-end: 1px solid #666;
+}
+table.table > tbody > tr > td:not(:last-child).dso-vertical-line,
+table.table > tbody > tr > th:not(:last-child).dso-vertical-line,
+table.table > tfoot > tr > td:not(:last-child).dso-vertical-line,
+table.table > tfoot > tr > th:not(:last-child).dso-vertical-line,
+.dso-rich-content table > tbody > tr > td:not(:last-child).dso-vertical-line,
+.dso-rich-content table > tbody > tr > th:not(:last-child).dso-vertical-line,
+.dso-rich-content table > tfoot > tr > td:not(:last-child).dso-vertical-line,
+.dso-rich-content table > tfoot > tr > th:not(:last-child).dso-vertical-line {
+  border-inline-end: 1px solid #ccc;
+}
+table.table > tbody > tr:not(:last-child) > td.dso-horizontal-line,
+table.table > tbody > tr:not(:last-child) > th.dso-horizontal-line,
+table.table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,
+table.table > tfoot > tr:not(:last-child) > th.dso-horizontal-line,
+.dso-rich-content table > tbody > tr:not(:last-child) > td.dso-horizontal-line,
+.dso-rich-content table > tbody > tr:not(:last-child) > th.dso-horizontal-line,
+.dso-rich-content table > tfoot > tr:not(:last-child) > td.dso-horizontal-line,
+.dso-rich-content table > tfoot > tr:not(:last-child) > th.dso-horizontal-line {
+  border-block-end: 1px solid #ccc;
+}
 table.table th.dso-text-left,
 table.table td.dso-text-left,
 .dso-rich-content table th.dso-text-left,
@@ -856,20 +926,20 @@ table.table > tfoot > tr > td a,
 .dso-rich-content table > tfoot > tr > td a {
   text-decoration: underline;
 }
-table.table > thead > tr > td,
-table.table > thead > tr > th,
-.dso-rich-content table > thead > tr > td,
-.dso-rich-content table > thead > tr > th {
+table.table:not([class*=dso-table-outside-lines]) > thead > tr > td,
+table.table:not([class*=dso-table-outside-lines]) > thead > tr > th,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > td,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > thead > tr > th {
   border-bottom: 1px solid #666;
 }
-table.table > tbody > tr > td,
-table.table > tbody > tr > th,
-table.table > tfoot > tr > td,
-table.table > tfoot > tr > th,
-.dso-rich-content table > tbody > tr > td,
-.dso-rich-content table > tbody > tr > th,
-.dso-rich-content table > tfoot > tr > td,
-.dso-rich-content table > tfoot > tr > th {
+table.table:not([class*=dso-table-outside-lines]) > tbody > tr > td,
+table.table:not([class*=dso-table-outside-lines]) > tbody > tr > th,
+table.table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,
+table.table:not([class*=dso-table-outside-lines]) > tfoot > tr > th,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > td,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > tbody > tr > th,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > td,
+.dso-rich-content table:not([class*=dso-table-outside-lines]) > tfoot > tr > th {
   border-bottom: 1px solid #ccc;
 }
 table.table > tbody + tbody,
@@ -1304,9 +1374,9 @@ a:visited {
   padding: 8px;
 }
 
-p.wijzigactie-voegtoe,
-span[role=paragraph].wijzigactie-voegtoe,
-table.wijzigactie-voegtoe {
+p.editaction-add,
+span[role=paragraph].editaction-add,
+table.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1315,29 +1385,29 @@ table.wijzigactie-voegtoe {
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
-p.wijzigactie-voegtoe a:is(.download, .download:hover, .download:focus-visible),
-span[role=paragraph].wijzigactie-voegtoe a:is(.download, .download:hover, .download:focus-visible),
-table.wijzigactie-voegtoe a:is(.download, .download:hover, .download:focus-visible) {
+p.editaction-add a:is(.download, .download:hover, .download:focus-visible),
+span[role=paragraph].editaction-add a:is(.download, .download:hover, .download:focus-visible),
+table.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
 }
-p.wijzigactie-voegtoe a:is(.extern, .extern:hover, .extern:focus-visible),
-span[role=paragraph].wijzigactie-voegtoe a:is(.extern, .extern:hover, .extern:focus-visible),
-table.wijzigactie-voegtoe a:is(.extern, .extern:hover, .extern:focus-visible) {
+p.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
+span[role=paragraph].editaction-add a:is(.extern, .extern:hover, .extern:focus-visible),
+table.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: url("./dso-icons.svg#img-external-link-zwart");
 }
-p.wijzigactie-voegtoe a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-span[role=paragraph].wijzigactie-voegtoe a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-table.wijzigactie-voegtoe a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+p.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+span[role=paragraph].editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+table.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-call-zwart");
 }
-p.wijzigactie-voegtoe a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-span[role=paragraph].wijzigactie-voegtoe a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-table.wijzigactie-voegtoe a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+p.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+span[role=paragraph].editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+table.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
-p.wijzigactie-verwijder,
-span[role=paragraph].wijzigactie-verwijder,
-table.wijzigactie-verwijder {
+p.editaction-remove,
+span[role=paragraph].editaction-remove,
+table.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1346,28 +1416,28 @@ table.wijzigactie-verwijder {
   color: #191919;
   text-decoration: line-through;
 }
-p.wijzigactie-verwijder a:is(.download, .download:hover, .download:focus-visible),
-span[role=paragraph].wijzigactie-verwijder a:is(.download, .download:hover, .download:focus-visible),
-table.wijzigactie-verwijder a:is(.download, .download:hover, .download:focus-visible) {
+p.editaction-remove a:is(.download, .download:hover, .download:focus-visible),
+span[role=paragraph].editaction-remove a:is(.download, .download:hover, .download:focus-visible),
+table.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
 }
-p.wijzigactie-verwijder a:is(.extern, .extern:hover, .extern:focus-visible),
-span[role=paragraph].wijzigactie-verwijder a:is(.extern, .extern:hover, .extern:focus-visible),
-table.wijzigactie-verwijder a:is(.extern, .extern:hover, .extern:focus-visible) {
+p.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
+span[role=paragraph].editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible),
+table.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: url("./dso-icons.svg#img-external-link-zwart");
 }
-p.wijzigactie-verwijder a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-span[role=paragraph].wijzigactie-verwijder a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
-table.wijzigactie-verwijder a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+p.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+span[role=paragraph].editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible),
+table.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-call-zwart");
 }
-p.wijzigactie-verwijder a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-span[role=paragraph].wijzigactie-verwijder a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
-table.wijzigactie-verwijder a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+p.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+span[role=paragraph].editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
+table.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
 
-ins.nieuwe-tekst {
+ins.new-text {
   text-decoration: none;
   --link-color: currentColor;
   --link-hover-color: currentColor;
@@ -1377,20 +1447,48 @@ ins.nieuwe-tekst {
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
-ins.nieuwe-tekst a:is(.download, .download:hover, .download:focus-visible) {
+ins.new-text a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
 }
-ins.nieuwe-tekst a:is(.extern, .extern:hover, .extern:focus-visible) {
+ins.new-text a:is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: url("./dso-icons.svg#img-external-link-zwart");
 }
-ins.nieuwe-tekst a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+ins.new-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-call-zwart");
 }
-ins.nieuwe-tekst a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+ins.new-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+ins.editaction-add {
+  display: inline-block;
+  margin-block-end: 8px;
+  padding: 8px;
+  text-decoration: none;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #e4f1d4;
+  border-color: #e4f1d4;
+  color: #191919;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
+ins.editaction-add a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: url("./dso-icons.svg#img-download-zwart");
+}
+ins.editaction-add a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: url("./dso-icons.svg#img-external-link-zwart");
+}
+ins.editaction-add a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-call-zwart");
+}
+ins.editaction-add a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-email-zwart");
+}
+ins.editaction-add p:last-child {
+  margin: 0;
+}
 
-del.verwijderde-tekst {
+del.removed-text {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1399,18 +1497,49 @@ del.verwijderde-tekst {
   color: #191919;
   text-decoration: line-through;
 }
-del.verwijderde-tekst a:is(.download, .download:hover, .download:focus-visible) {
+del.removed-text a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
 }
-del.verwijderde-tekst a:is(.extern, .extern:hover, .extern:focus-visible) {
+del.removed-text a:is(.extern, .extern:hover, .extern:focus-visible) {
   background-image: url("./dso-icons.svg#img-external-link-zwart");
 }
-del.verwijderde-tekst a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+del.removed-text a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-call-zwart");
 }
-del.verwijderde-tekst a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+del.removed-text a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+del.editaction-remove {
+  display: inline-block;
+  margin-block-end: 8px;
+  padding: 8px;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
+  background-color: #f5d8dc;
+  border-color: #f5d8dc;
+  color: #191919;
+  text-decoration: line-through;
+}
+del.editaction-remove a:is(.download, .download:hover, .download:focus-visible) {
+  background-image: url("./dso-icons.svg#img-download-zwart");
+}
+del.editaction-remove a:is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: url("./dso-icons.svg#img-external-link-zwart");
+}
+del.editaction-remove a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-call-zwart");
+}
+del.editaction-remove a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: url("./dso-icons.svg#img-email-zwart");
+}
+del.editaction-remove p:last-child {
+  margin: 0;
+}
+
+.editaction-label {
+  font-style: italic;
+}
 
 .dso-rich-content p {
   margin: 0 0 16px;

package/dist/collection/components/selectable/selectable.css

@@ -147,6 +147,10 @@
   min-height: 24px;
 }
 .dso-selectable-container .dso-selectable-input-wrapper:focus-within.dso-keyboard-focus {
+  position: relative;
+  inset-inline-start: -32px;
+  padding-inline-start: 32px;
+  margin-inline-end: -32px;
   border-radius: 2px;
   outline-offset: 3px;
   outline: 3px solid #008ccc;

package/dist/collection/components/toggletip/toggletip.css

@@ -6,6 +6,9 @@
 
 :host {
   display: inline-block;
+  --tooltip-margin-block-start: 0;
+  --tooltip-margin-inline-start: 3px;
+  --tooltip-margin-inline-end: units.$u1 * -1 !important;
 }
 
 :host(:focus) {

package/dist/collection/components/tooltip/tooltip.css

@@ -2,22 +2,6 @@
   visibility: hidden;
 }
 
-:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow {
-  margin-inline-start: 3px;
-}
-:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow {
-  margin-block-start: 0;
-}
-:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow {
-  margin-inline-start: 3px;
-}
-:host-context(dso-toggletip) *[data-popper-placement=left] {
-  margin-inline-end: -8px !important;
-}
-:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow {
-  margin-block-start: 0;
-}
-
 *,
 *::after,
 *::before {
@@ -82,7 +66,7 @@
   border-block-start-color: #fff;
   border-width: 6px;
   border-block-end-width: 0;
-  margin-inline-start: -3px;
+  margin-inline-start: var(--tooltip-margin-inline-start, -3px);
 }
 .tooltip[data-popper-placement=right] {
   margin-inline-start: 3px;
@@ -94,7 +78,7 @@
   border-inline-end-color: #fff;
   border-width: 6px;
   border-inline-start-width: 0;
-  margin-block-start: -3px;
+  margin-block-start: var(--tooltip-margin-block-start, -3px);
 }
 .tooltip[data-popper-placement=bottom] {
   margin-block-start: 3px;
@@ -106,10 +90,11 @@
   border-block-end-color: #fff;
   border-width: 6px;
   border-block-start-width: 0;
-  margin-inline-start: -3px;
+  margin-inline-start: var(--tooltip-margin-inline-start, -3px);
 }
 .tooltip[data-popper-placement=left] {
   margin-inline-start: -3px;
+  margin-inline-end: var(--tooltip-margin-inline-end, unset);
   padding-block: 0;
   padding-inline: 6px;
 }
@@ -118,5 +103,5 @@
   border-inline-start-color: #fff;
   border-width: 6px;
   border-inline-end-width: 0;
-  margin-block-start: -3px;
+  margin-block-start: var(--tooltip-margin-block-start, -3px);
 }

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -267,7 +267,8 @@ button::-moz-focus-inner {
   z-index: 100;
 }
 .dso-document-panel .sizing-buttons {
-  top: calc(50vh - 40px);
+  top: auto;
+  bottom: 16px;
   right: calc(100% + 1px);
   transition: right 200ms ease-in;
   padding: 0 0 4px 4px;