@dso-toolkit/core 36.3.0 → 37.0.0

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -123,17 +123,17 @@
   background: var(--dso-icon, var(--di-download-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open-button.extern::after {
   background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open-button dso-icon,
 .open-button svg.di {
@@ -223,9 +223,9 @@
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -237,9 +237,9 @@
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -261,9 +261,9 @@
   background: var(--dso-icon, var(--di-times)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   content: "";
   display: inline-block;
   position: absolute;
@@ -278,9 +278,9 @@
   background: var(--dso-icon, var(--di-times-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close-button.close {
   display: none;

package/dist/collection/components/highlight-box/highlight-box.css

@@ -52,7 +52,7 @@
   position: relative;
 }
 .dso-highlight-box .dso-step-counter {
-  background-color: #39870c;
+  background-color: #275937;
   border: 8px solid #79b929;
   border-radius: 50%;
   box-sizing: content-box;
@@ -66,4 +66,7 @@
   text-align: center;
   top: -24px;
   width: 32px;
+}
+.dso-highlight-box dso-icon {
+  vertical-align: text-top;
 }

package/dist/collection/components/icon/icon.css

@@ -1,8 +1,8 @@
 :host {
   display: inline-block;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 
 *,

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

@@ -97,9 +97,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -111,9 +111,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .open.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -227,9 +227,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -241,9 +241,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .close.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);

package/dist/collection/components/info/info.css

@@ -37,9 +37,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-times-grijs90)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   content: "";
   display: inline-block;
 }

package/dist/collection/components/map-controls/map-controls.css

@@ -115,9 +115,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #toggle-visibility-button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -129,9 +129,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #toggle-visibility-button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -236,9 +236,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #zoom-buttons button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -250,9 +250,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #zoom-buttons button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -340,9 +340,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #close-button.download[disabled]::after {
   --dso-icon: var(--di-download-grasgroen-40);
@@ -354,9 +354,9 @@ button::-moz-focus-inner {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 #close-button.extern[disabled]::after {
   --dso-icon: var(--di-external-link-grasgroen-40);

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

@@ -5,7 +5,10 @@ export class OzonContentAlNode {
     this.name = 'Al';
   }
   render(node, { mapNodeToJsx, path }) {
-    const nestedAl = path.some(node => getNodeName(node) === 'Al');
+    const nestedAl = path.some(node => {
+      const nodeName = getNodeName(node);
+      return nodeName === 'Al' || nodeName === 'Opschrift';
+    });
     const content = mapNodeToJsx(node.childNodes);
     return nestedAl
       ? h("span", { role: "paragraph" }, content)

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

@@ -3,7 +3,6 @@ export class OzonContentInhoudNode {
   constructor() {
     this.name = [
       'Inhoud',
-      'Opschrift',
       'ContainerBlocksType',
       'BlockMixedcontentMetMaximaleInlinesMarkersPopupsType'
     ];

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

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

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

@@ -4,6 +4,7 @@ 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 { OzonContentOpschriftNode } from './nodes/opschrift.node';
 import { OzonContentInlineNodes } from './nodes/inline.nodes';
 import { OzonContentIntRefNode } from './nodes/int-ref.node';
 import { OzonContentNootNode } from './nodes/noot.node';
@@ -17,6 +18,7 @@ export class Mapper {
       new OzonContentTextNode(),
       new OzonContentDocumentNode(),
       new OzonContentInhoudNode(),
+      new OzonContentOpschriftNode(),
       new OzonContentIntRefNode(),
       new OzonContentExtRefNode(),
       new OzonContentAlNode(),

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

@@ -1,7 +1,27 @@
-:host {
+:host(:not([inline])) {
   display: block;
 }
 
+:host([inline]) {
+  display: inline;
+}
+
+:host([deleted]) * {
+  text-decoration: line-through !important;
+}
+
+.deleted-start,
+.deleted-end {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 button.toggle-note {
   display: inline-block;
   font-size: 1em;
@@ -55,9 +75,9 @@ button.toggle-note.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 button.toggle-note.download[disabled]::after {
   --dso-icon: var(--di-download-grasgroen-40);
@@ -69,9 +89,9 @@ button.toggle-note.extern::after {
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 button.toggle-note.extern[disabled]::after {
   --dso-icon: var(--di-external-link-grasgroen-40);

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

@@ -1,7 +1,15 @@
-import { Component, Event, Prop, State, } from '@stencil/core';
+import { h, Component, Event, Prop, State } from '@stencil/core';
 import { Mapper } from './ozon-content-mapper';
 export class OzonContent {
   constructor() {
+    /**
+     * Setting this property creates dso-ozon-content as inline element instead of a block element.
+     */
+    this.inline = false;
+    /**
+     * Marks content as deleted using visual and accessible clues.
+     */
+    this.deleted = false;
     this.state = {};
     this.mapper = new Mapper();
   }
@@ -12,7 +20,14 @@ export class OzonContent {
       setState: state => this.state = state,
       emitAnchorClick: this.anchorClick.emit
     };
-    return this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
+    const transformed = this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
+    if (this.deleted) {
+      return (h("section", null,
+        h("span", { class: "deleted-start" }, "Begin verwijderd element"),
+        transformed,
+        h("span", { class: "deleted-end" }, "Einde verwijderd element")));
+    }
+    return transformed;
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }
@@ -35,10 +50,46 @@ export class OzonContent {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "The XML to be rendered."
       },
       "attribute": "content",
       "reflect": false
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Setting this property creates dso-ozon-content as inline element instead of a block element."
+      },
+      "attribute": "inline",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "deleted": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Marks content as deleted using visual and accessible clues."
+      },
+      "attribute": "deleted",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -1,8 +1,10 @@
 import { html } from 'lit-html';
-export function ozonContentTemplate({ content, onAnchorClick }) {
+export function ozonContentTemplate({ content, inline, deleted, onAnchorClick }) {
   return html `
     <dso-ozon-content
       .content=${content}
+      ?inline=${inline}
+      ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
     ></dso-ozon-content>
   `;

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

@@ -232,9 +232,9 @@ h6,
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .shrink.download[disabled]::after,
 .expand.download[disabled]::after,
@@ -254,9 +254,9 @@ h6,
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .shrink.extern[disabled]::after,
 .expand.extern[disabled]::after,
@@ -423,9 +423,9 @@ h6,
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .sizing-buttons button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -437,9 +437,9 @@ h6,
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .sizing-buttons button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -601,9 +601,9 @@ h6,
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .filterpanel-buttons .cancel-button.download:hover::after {
   --dso-icon: var(--di-download-wit);
@@ -615,9 +615,9 @@ h6,
   background: var(--dso-icon, var(--di-external-link)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .filterpanel-buttons .cancel-button.extern:hover::after {
   --dso-icon: var(--di-external-link-wit);
@@ -702,17 +702,17 @@ h6,
   background: var(--dso-icon, var(--di-download-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .filterpanel-buttons .apply-button.extern::after {
   background: var(--dso-icon, var(--di-external-link-wit)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
 }
 .filterpanel-buttons .apply-button dso-icon,
 .filterpanel-buttons .apply-button svg.di {