@dso-toolkit/core 34.2.1 → 35.0.0

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[0,"dso-ozon-content",{"content":[1]},[[0,"click","handleClick"]]]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["dso-map-base-layers.cjs",[[1,"dso-map-base-layers",{"baseLayers":[16]}]]],["dso-map-overlays.cjs",[[1,"dso-map-overlays",{"overlays":[16]}]]],["dso-header.cjs",[[1,"dso-header",{"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"isLoggedIn":[4,"is-logged-in"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-tree-view.cjs",[[1,"dso-tree-view",{"collection":[16]}]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]}]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"focused":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"hover":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"mainSize":[32]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32]},[[4,"click","onDocumentClick"]]]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[1]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[2,"dso-ozon-content",{"content":[1],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[1],"block":[4]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"position":[1],"for":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1]}]]],["dso-info_2.cjs",[[1,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "./components/helpcenter-panel/helpcenter-panel.js",
     "./components/highlight-box/highlight-box.js",
     "./components/icon/icon.js",
+    "./components/image-overlay/image-overlay.js",
     "./components/info/info.js",
     "./components/label/label.js",
     "./components/map-base-layers/map-base-layers.js",

package/dist/collection/components/autosuggest/autosuggest.js

@@ -5,7 +5,11 @@ import escapeStringRegexp from "escape-string-regexp";
 export class Autosuggest {
   constructor() {
     /**
-     * The suggestions for the value of the slotted input element
+     * The suggestions for the value of the slotted input element. Optionally a
+     * Suggestion can have a `type` and `item`.
+     *
+     * The `type` is used to style the suggestion. `item` can be use to reference
+     * the original object that was used to create the suggestion.
      */
     this.suggestions = [];
     /**
@@ -238,7 +242,7 @@ export class Autosuggest {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The suggestions for the value of the slotted input element"
+        "text": "The suggestions for the value of the slotted input element. Optionally a\nSuggestion can have a `type` and `item`.\n\nThe `type` is used to style the suggestion. `item` can be use to reference\nthe original object that was used to create the suggestion."
       },
       "defaultValue": "[]"
     },

package/dist/collection/components/highlight-box/highlight-box.template.js

@@ -1,5 +1,6 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { iconTemplate } from '../icon/icon.template';
 export function highlightBoxTemplate({ yellow, white, dropShadow, border, step, icon, richContent }) {
   return html `
@@ -11,7 +12,9 @@ export function highlightBoxTemplate({ yellow, white, dropShadow, border, step,
       ?border=${border}
     >
       ${icon && iconTemplate({ icon }, 'icon')}
-      ${richContent}
+      <div class="dso-rich-content">
+        ${typeof richContent === 'string' ? unsafeHTML(richContent) : richContent}
+      </div>
     </dso-highlight-box>
   `;
 }

package/dist/collection/components/image-overlay/image-overlay.css

@@ -0,0 +1,263 @@
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+button[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+:host(:hover) .open,
+.open:focus {
+  opacity: 1;
+}
+
+.open {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  opacity: 0;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+.open:focus, .open:focus-visible {
+  outline-offset: 2px;
+}
+.open:active {
+  outline: 0;
+}
+.open.extern::after, .open.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.open:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.open[disabled], .open[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.open.btn-sm {
+  line-height: 16px;
+}
+.open.btn-sm dso-icon,
+.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.open.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.open.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.open.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.open.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.open.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.open > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dimmer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  padding: 32px;
+  background-color: rgba(255, 255, 255, 0.8);
+  justify-content: center;
+}
+
+.wrapper {
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
+  position: relative;
+  z-index: 20;
+  align-self: center;
+  line-height: 0;
+}
+.wrapper img {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+}
+
+.close {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-width: 56px;
+  padding: 11px 15px;
+  border: 0;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
+  min-width: auto;
+  padding: 8px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.close:focus, .close:focus-visible {
+  outline-offset: 2px;
+}
+.close:active {
+  outline: 0;
+}
+.close.extern::after, .close.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close:hover {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.close:active {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.close[disabled], .close[disabled]:hover {
+  background-color: #fff;
+  border-color: #afcf9d;
+  color: #afcf9d;
+}
+.close.btn-sm {
+  line-height: 16px;
+}
+.close.btn-sm dso-icon,
+.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after {
+  margin-bottom: -4px;
+  margin-top: -4px;
+}
+.close.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close.download:hover::after {
+  --dso-icon: var(--di-download-wit);
+}
+.close.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.close.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 1.5em;
+  vertical-align: top;
+  width: 1.5em;
+}
+.close.extern:hover::after {
+  --dso-icon: var(--di-external-link-wit);
+}
+.close.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.close > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}

package/dist/collection/components/image-overlay/image-overlay.js

@@ -0,0 +1,72 @@
+import { Component, Element, forceUpdate, h, Host, State } from "@stencil/core";
+import { createFocusTrap } from 'focus-trap';
+export class ImageOverlay {
+  constructor() {
+    this.active = false;
+    this.focused = false;
+  }
+  componentDidLoad() {
+    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+  }
+  render() {
+    var _a;
+    const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
+    return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
+        var _a;
+        (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
+      } },
+      this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
+        h("div", { class: "wrapper" },
+          h("img", { src: src, alt: alt }),
+          h("button", { type: "button", class: "close", onClick: () => this.active = false },
+            h("dso-icon", { icon: "times" }),
+            h("span", null, "Sluiten"))))),
+      h("slot", null),
+      h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
+        h("dso-icon", { icon: "external-link" }),
+        h("span", null, "Afbeelding vergroot weergeven"))));
+  }
+  componentDidRender() {
+    var _a, _b;
+    if (this.active && this.wrapperElement && !this.trap) {
+      this.trap = createFocusTrap(this.wrapperElement, {
+        escapeDeactivates: true,
+        clickOutsideDeactivates: (e) => {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
+            this.active = false;
+            return false;
+          }
+          return true;
+        },
+        setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+        onDeactivate: () => this.active = false
+      }).activate();
+    }
+    else if (!this.active && this.trap) {
+      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+      delete this.trap;
+    }
+  }
+  static get is() { return "dso-image-overlay"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["./image-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["image-overlay.css"]
+  }; }
+  static get states() { return {
+    "active": {},
+    "focused": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/image-overlay/image-overlay.template.js

@@ -0,0 +1,7 @@
+import { html } from "lit-html";
+import { imageTemplate } from '@dso-toolkit/css/src/components/image/image.template';
+export function imageOverlayTemplate({ image }) {
+  return html `
+    <dso-image-overlay>${imageTemplate(image)}</dso-image-overlay>
+  `;
+}

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

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export class OzonContentAlNode {
+  constructor() {
+    this.name = 'Al';
+  }
+  render(node, { mapNodeToJsx, path }) {
+    const nestedAl = path.some(node => node.nodeName === 'Al');
+    const content = mapNodeToJsx(node.childNodes);
+    return nestedAl
+      ? h("span", { role: "paragraph" }, content)
+      : h("p", null, content);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Fragment, h } from '@stencil/core';
+export class OzonContentDocumentNode {
+  constructor() {
+    this.name = '#document';
+  }
+  render(node, { mapNodeToJsx }) {
+    return h(Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}

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

@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+export class OzonContentExtRefNode {
+  constructor() {
+    this.name = [
+      'ExtRef',
+      'ExtIoRef'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    var _a;
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+      h("span", { class: "sr-only" }, "opent in nieuw venster"),
+      mapNodeToJsx(node.childNodes)));
+  }
+}

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

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+export class OzonContentFallbackNode {
+  constructor() {
+    // This name does not match any elements
+    this.name = ['<fallback>'];
+  }
+  render(node, { mapNodeToJsx }) {
+    return (h("span", { class: `fallback od-${node instanceof Element ? node.localName : node.nodeName}` }, mapNodeToJsx(node.childNodes)));
+  }
+}

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

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+export class OzonContentIllustratieNode {
+  constructor() {
+    this.name = [
+      'Illustratie',
+      'InlineTekstAfbeelding'
+    ];
+  }
+  render(node) {
+    var _a, _b, _c, _d;
+    return (h("img", { src: (_a = node.getAttribute('naam')) !== null && _a !== void 0 ? _a : undefined, alt: (_b = node.getAttribute('naam')) !== null && _b !== void 0 ? _b : undefined, height: (_c = node.getAttribute('hoogte')) !== null && _c !== void 0 ? _c : undefined, width: (_d = node.getAttribute('breedte')) !== null && _d !== void 0 ? _d : undefined }));
+  }
+}

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

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+export class OzonContentInhoudNode {
+  constructor() {
+    this.name = [
+      'Inhoud',
+      'Opschrift',
+      'ContainerBlocksType',
+      'BlockMixedcontentMetMaximaleInlinesMarkersPopupsType'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("div", { class: "dso-rich-content" }, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/nodes/inline.nodes.js

@@ -0,0 +1,21 @@
+import { h } from '@stencil/core';
+export class OzonContentInlineNodes {
+  constructor() {
+    this.name = [
+      'sub',
+      'sup',
+      'strong',
+      'b',
+      'u',
+      'i',
+      'br'
+    ];
+  }
+  render(node, { mapNodeToJsx }) {
+    if (node.localName === 'br') {
+      return h("br", null);
+    }
+    const Tag = node.localName;
+    return h(Tag, null, mapNodeToJsx(node.childNodes));
+  }
+}

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

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export class OzonContentIntRefNode {
+  constructor() {
+    this.name = 'IntRef';
+  }
+  render(node, { mapNodeToJsx, emitAnchorClick }) {
+    const ref = node.getAttribute('ref');
+    if (!ref) {
+      return mapNodeToJsx(node.childNodes);
+    }
+    const intRefOnClick = (event) => {
+      event.preventDefault();
+      const target = event.currentTarget;
+      if (!(target instanceof HTMLAnchorElement)) {
+        return;
+      }
+      const { href } = target;
+      emitAnchorClick({
+        href,
+        documentComponent: ref,
+        originalEvent: event
+      });
+    };
+    return (h("a", { href: `#${ref}`, onClick: intRefOnClick }, mapNodeToJsx(node.childNodes)));
+  }
+}

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

@@ -0,0 +1,27 @@
+import { h, Fragment } from '@stencil/core';
+export class OzonContentNootNode {
+  constructor() {
+    this.name = 'Noot';
+    this.handles = ['NootNummer'];
+  }
+  identify(node) {
+    var _a;
+    return (_a = node.getAttribute("id")) !== null && _a !== void 0 ? _a : undefined;
+  }
+  render(node, { mapNodeToJsx, state: noteIsOpen, setState }) {
+    var _a, _b;
+    const noteId = (_a = node.getAttribute('id')) !== null && _a !== void 0 ? _a : undefined;
+    const noteControlsId = noteId && `dso-ozon-note-${noteId}`;
+    const noteHref = noteId && `#${noteControlsId}`;
+    const childNodes = Array.from(node.childNodes);
+    const nootNummer = (_b = childNodes.find(n => n.nodeName === 'NootNummer')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const onClickNote = (event) => {
+      event.preventDefault();
+      setState === null || setState === void 0 ? void 0 : setState(!noteIsOpen);
+    };
+    return (h(Fragment, null,
+      h("a", { class: { noot: true, "dso-open": !!noteIsOpen }, href: noteHref, "aria-controls": noteControlsId, "aria-expanded": noteIsOpen ? "true" : "false", onClick: onClickNote },
+        h("sup", null, nootNummer)),
+      h("span", { id: noteControlsId, role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al'))))));
+  }
+}

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

@@ -0,0 +1,39 @@
+export function mapColspecs(count, nodeList) {
+  const elements = Array.from(nodeList);
+  const totalWidth = getTotalWidth(elements);
+  return {
+    totalWidth,
+    count,
+    columns: elements.map((element, index) => {
+      var _a;
+      const colNumber = element.getAttribute('colnum');
+      return {
+        name: (_a = element.getAttribute('colname')) !== null && _a !== void 0 ? _a : '',
+        number: colNumber ? parseInt(colNumber, 10) : index + 1,
+        width: getWidth(totalWidth, element)
+      };
+    })
+  };
+}
+function getTotalWidth(elements) {
+  return elements.reduce((totalWidth, element) => {
+    var _a, _b;
+    const width = (_b = (_a = element.getAttribute('colwidth')) === null || _a === void 0 ? void 0 : _a.replace(/[^0-9]/, '')) !== null && _b !== void 0 ? _b : '';
+    const colWidth = parseInt(width, 10);
+    return totalWidth + (isNaN(colWidth) ? 0 : colWidth);
+  }, 0);
+}
+function getWidth(totalWidth, element) {
+  const width = element.getAttribute('colwidth');
+  if (!width) {
+    return undefined;
+  }
+  if (width === '*') {
+    return '100%';
+  }
+  if (width.includes('*') || width.match(/^[\d+]$/)) {
+    const colWidth = parseInt(width.replace(/[^0-9]/, ''), 10);
+    return `${Math.round(colWidth / totalWidth * 100)}%`;
+  }
+  return width;
+}

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

@@ -0,0 +1,2 @@
+;
+export {};

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

@@ -0,0 +1 @@
+export { OzonContentTableNode } from './table.node';

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

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core/internal';
+function getData(cell) {
+  return {
+    moreRows: cell.getAttribute('morerows'),
+    nameStart: cell.getAttribute('namest'),
+    nameEnd: cell.getAttribute('nameend')
+  };
+}
+function getColspan({ columns }, nameStart, nameEnd) {
+  const colspecStart = columns.find(c => c.name === nameStart);
+  const colspecEnd = columns.find(c => c.name === nameEnd);
+  if (!colspecStart || !colspecEnd) {
+    return undefined;
+  }
+  const colspan = colspecEnd.number - colspecStart.number + 1;
+  return colspan === 1 ? undefined : colspan;
+}
+export const Cell = ({ context: { mapNodeToJsx }, colspecs, cell }) => {
+  const { moreRows, nameStart, nameEnd } = getData(cell);
+  const td = {
+    rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,
+    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined
+  };
+  return (h("td", Object.assign({}, td), mapNodeToJsx(cell.childNodes)));
+};

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

@@ -0,0 +1,4 @@
+import { Fragment, h } from '@stencil/core';
+export const Colgroup = ({ colspecs }) => (colspecs.columns.length > 0
+  ? (h("colgroup", null, colspecs.columns.map(colspec => (h("col", { style: { width: colspec.width } })))))
+  : h(Fragment, null));

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

@@ -0,0 +1,5 @@
+import { Fragment, h } from '@stencil/core';
+import { Cell } from './table-cell';
+export const Rows = ({ context, colspecs, rows }) => {
+  return (h(Fragment, null, rows.map(row => (h("tr", null, Array.from(row.children).map(cell => (h(Cell, { cell: cell, colspecs: colspecs, context: context }))))))));
+};