@dso-toolkit/core 34.2.1 → 35.0.0

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

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { mapColspecs } from './colspec/colspec-mapper';
+import { Colgroup } from './table-colgroup';
+import { Rows } from './table-rows';
+function mapData(node) {
+  var _a, _b, _c;
+  const tgroup = node.querySelector(':scope > tgroup');
+  const colAttribute = (_a = tgroup === null || tgroup === void 0 ? void 0 : tgroup.getAttribute('cols')) !== null && _a !== void 0 ? _a : undefined;
+  const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;
+  return {
+    caption: (_c = (_b = node.querySelector(':scope > title')) === null || _b === void 0 ? void 0 : _b.textContent) !== null && _c !== void 0 ? _c : undefined,
+    colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(':scope > colspec')) : undefined,
+    headRows: Array.from(node.querySelectorAll(':scope > tgroup > thead > row')),
+    bodyRows: Array.from(node.querySelectorAll(':scope > tgroup > tbody > row'))
+  };
+}
+export class OzonContentTableNode {
+  constructor() {
+    this.name = 'table';
+    this.handles = ['title', 'tgroup', 'colspec', 'thead', 'tbody', 'row', 'cell'];
+  }
+  render(node, context) {
+    const { caption, colspecs, headRows, bodyRows } = mapData(node);
+    return (h("table", { class: "table" },
+      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 })))));
+  }
+}

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

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

package/dist/collection/components/ozon-content/ozon-content-context.interface.js

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

package/dist/collection/components/ozon-content/ozon-content-mapper.js

@@ -0,0 +1,76 @@
+import { Fragment, h } from '@stencil/core';
+import { OzonContentAlNode } from './nodes/al.node';
+import { OzonContentDocumentNode } from './nodes/document.node';
+import { OzonContentExtRefNode } from './nodes/ext-ref.node';
+import { OzonContentIllustratieNode } from './nodes/illustratie.node';
+import { OzonContentInhoudNode } from './nodes/inhoud.node';
+import { OzonContentInlineNodes } from './nodes/inline.nodes';
+import { OzonContentIntRefNode } from './nodes/int-ref.node';
+import { OzonContentNootNode } from './nodes/noot.node';
+import { OzonContentTableNode } from './nodes/table.node';
+import { OzonContentTextNode } from './nodes/text.node';
+import { OzonContentFallbackNode } from './nodes/fallback.node';
+export class Mapper {
+  constructor() {
+    this.mappers = [
+      new OzonContentTextNode(),
+      new OzonContentDocumentNode(),
+      new OzonContentInhoudNode(),
+      new OzonContentIntRefNode(),
+      new OzonContentExtRefNode(),
+      new OzonContentAlNode(),
+      new OzonContentInlineNodes(),
+      new OzonContentIllustratieNode(),
+      new OzonContentNootNode(),
+      new OzonContentTableNode()
+    ];
+    this.skip = this.mappers.reduce((t, m) => {
+      if (m.handles) {
+        t.push(...m.handles);
+      }
+      return t;
+    }, []);
+    this.fallbackNode = new OzonContentFallbackNode();
+    this.domParser = new DOMParser();
+  }
+  findMapper(name) {
+    var _a;
+    if (this.skip.includes(name)) {
+      return undefined;
+    }
+    return (_a = this.mappers.find(m => {
+      if (Array.isArray(m.name)) {
+        return m.name.includes(name);
+      }
+      return m.name === name;
+    })) !== null && _a !== void 0 ? _a : this.fallbackNode;
+  }
+  mapNodeToJsx(node, context, path) {
+    var _a, _b;
+    if (node instanceof NodeList) {
+      return h(Fragment, null, Array.from(node).map(n => this.mapNodeToJsx(n, context, path)));
+    }
+    if (Array.isArray(node)) {
+      return h(Fragment, null, node.map(n => this.mapNodeToJsx(n, context, path)));
+    }
+    const nodeName = node instanceof Element ? node.localName : node.nodeName;
+    const mapper = this.findMapper(nodeName);
+    const identity = (_a = mapper === null || mapper === void 0 ? void 0 : mapper.identify) === null || _a === void 0 ? void 0 : _a.call(mapper, node);
+    const state = identity ? context.state[identity] : undefined;
+    const setState = identity ? (state) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: state })) : undefined;
+    return (_b = mapper === null || mapper === void 0 ? void 0 : mapper.render(node, {
+      mapNodeToJsx: n => this.mapNodeToJsx(n, context, [...path, node]),
+      emitAnchorClick: context.emitAnchorClick,
+      setState,
+      state,
+      path
+    })) !== null && _b !== void 0 ? _b : h(Fragment, null);
+  }
+  transform(xml, context) {
+    if (!this.cache || this.cache.xml !== xml) {
+      this.cache = { xml, document: this.domParser.parseFromString(xml, 'text/xml') };
+    }
+    const xmlDocument = this.cache.document;
+    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);
+  }
+}

package/dist/collection/components/ozon-content/ozon-content-node-context.interface.js

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

package/dist/collection/components/ozon-content/ozon-content-node-state.interface.js

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

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

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

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

@@ -1,22 +1,22 @@
-dso-ozon-content {
+:host {
   display: block;
 }
 
 .noot {
   text-decoration: none;
 }
-.noot:not(.dso-open) + .od-Al {
+.noot:not(.dso-open) + * {
   display: none;
 }
-.noot.dso-open + .od-Al {
+.noot.dso-open + * {
   display: block;
 }
-.noot + .od-Al {
+.noot + * {
   margin: 4px 0;
   padding: 8px 32px 8px 8px;
   position: relative;
 }
-.noot + .od-Al > a {
+.noot + * > a {
   display: block;
   height: 24px;
   position: absolute;
@@ -25,7 +25,7 @@ dso-ozon-content {
   top: 0;
   width: 24px;
 }
-.noot + .od-Al > a::before {
+.noot + * > a::before {
   background: var(--dso-icon, var(--di-times-zwart)) no-repeat;
   background-position: center;
   background-size: cover;
@@ -35,10 +35,18 @@ dso-ozon-content {
   content: "";
   display: block;
 }
-.noot + .od-Al {
+.noot + * {
   background-color: #ebf3e6;
 }
 
+span[role=paragraph] {
+  display: block;
+}
+
+.fallback {
+  display: block;
+}
+
 .od-Term {
   font-weight: 700;
 }

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

@@ -1,29 +1,21 @@
-import { h, Event, Component, Prop, Listen } from '@stencil/core';
-import { OzonContentTransformer } from './ozon-content.transformer';
+import { Component, Event, Prop, State, } from '@stencil/core';
+import { Mapper } from './ozon-content-mapper';
 export class OzonContent {
-  handleClick(event) {
-    this.transformer.handleClickEvent(event);
-  }
-  componentWillLoad() {
-    this.transformer = new OzonContentTransformer(this.anchorClick);
-  }
-  componentWillRender() {
-    this.transformer.setContent(this.content);
+  constructor() {
+    this.state = {};
+    this.mapper = new Mapper();
   }
   render() {
-    return h("div", { class: "dso-rich-content", ref: el => this.container = el });
-  }
-  componentDidRender() {
     var _a;
-    const content = this.transformer.content;
-    if (this.container && content) {
-      this.container.replaceChildren(...Array.from(content));
-    }
-    else {
-      (_a = this.container) === null || _a === void 0 ? void 0 : _a.replaceChildren();
-    }
+    const context = {
+      state: this.state,
+      setState: state => this.state = state,
+      emitAnchorClick: this.anchorClick.emit
+    };
+    return this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
   }
   static get is() { return "dso-ozon-content"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ozon-content.scss"]
   }; }
@@ -35,11 +27,11 @@ export class OzonContent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | undefined",
+        "resolved": "string | undefined",
         "references": {}
       },
-      "required": true,
+      "required": false,
       "optional": false,
       "docs": {
         "tags": [],
@@ -49,6 +41,9 @@ export class OzonContent {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "state": {}
+  }; }
   static get events() { return [{
       "method": "anchorClick",
       "name": "anchorClick",
@@ -60,21 +55,14 @@ export class OzonContent {
         "text": ""
       },
       "complexType": {
-        "original": "ContentAnchor",
-        "resolved": "ContentAnchor",
+        "original": "OzonContentAnchorClick",
+        "resolved": "OzonContentAnchorClick",
         "references": {
-          "ContentAnchor": {
+          "OzonContentAnchorClick": {
             "location": "import",
             "path": "./ozon-content.interfaces"
           }
         }
       }
     }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }

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

@@ -24,21 +24,37 @@ h2,
 .h2,
 h3,
 .h3 {
+  margin-bottom: 16px;
   margin-top: 24px;
 }
 
+h1,
+.h1 {
+  line-height: 1.25;
+}
+
 h1 {
   color: #275937;
   font-size: 2rem;
   font-weight: 700;
 }
 
+h2,
+.h2 {
+  line-height: 1.33;
+}
+
 h2 {
   color: #275937;
   font-size: 1.5rem;
   font-weight: 700;
 }
 
+h3,
+.h3 {
+  line-height: 1.2;
+}
+
 h3 {
   color: #275937;
   font-size: 1.25rem;
@@ -51,23 +67,35 @@ h5,
 .h5,
 h6,
 .h6 {
+  margin-bottom: 16px;
   margin-top: 12px;
 }
 
+h4,
+.h4 {
+  line-height: 1.5;
+}
+
 h4 {
   color: #275937;
   font-size: 1rem;
   font-weight: 600;
 }
 
+h5,
+.h5 {
+  line-height: 1.5;
+}
+
 h5 {
   color: #191919;
   font-size: 1rem;
   font-weight: 600;
 }
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: 12px;
+h6,
+.h6 {
+  line-height: 1.5;
 }
 
 *,

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,12 @@ export const DsoIcon: {
   new (): DsoIcon;
 };
 
+interface DsoImageOverlay extends Components.DsoImageOverlay, HTMLElement {}
+export const DsoImageOverlay: {
+  prototype: DsoImageOverlay;
+  new (): DsoImageOverlay;
+};
+
 interface DsoInfo extends Components.DsoInfo, HTMLElement {}
 export const DsoInfo: {
   prototype: DsoInfo;