@dso-toolkit/core 36.1.0 → 37.0.0

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,
@@ -329,7 +329,7 @@ h6,
   flex-grow: 0;
   padding-right: 8px;
   position: relative;
-  transition: flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;
+  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;
   z-index: 100;
 }
 .dso-map-panel .dso-filterblok-address {
@@ -348,7 +348,7 @@ h6,
   padding: 0 4px 4px 0;
   position: absolute;
   top: 16px;
-  transition: left 0.2s ease-in;
+  transition: left 200ms ease-in;
   width: 44px;
   z-index: -1;
 }
@@ -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 {

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

@@ -1,6 +1,7 @@
-import { h, Component, Prop, State, Host, Element, Event, } from "@stencil/core";
+import { h, Component, Prop, State, Host, Element, Event, Watch, } from "@stencil/core";
 import { createFocusTrap } from "focus-trap";
 import { ViewerGridFilterpanelButtons } from './viewer-grid-filterpanel-buttons';
+const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
 export class ViewerGrid {
   constructor() {
     this.filterpanelOpen = false;
@@ -21,6 +22,20 @@ export class ViewerGrid {
       this.closeOverlay.emit(event);
     };
   }
+  mainSizeWatcher(currentSize, previousSize) {
+    this.mainSizeChange.emit({
+      stage: 'start',
+      previousSize,
+      currentSize
+    });
+    setTimeout(() => {
+      this.mainSizeChange.emit({
+        stage: 'end',
+        previousSize,
+        currentSize
+      });
+    }, TRANSITION_TIME);
+  }
   updateFocusTrap() {
     var _a, _b;
     if (this.filterpanelOpen && this.overlayOpen) {
@@ -213,6 +228,29 @@ export class ViewerGrid {
           }
         }
       }
+    }, {
+      "method": "mainSizeChange",
+      "name": "mainSizeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "ViewerGridChangeSizeEvent",
+        "resolved": "ViewerGridChangeSizeEvent",
+        "references": {
+          "ViewerGridChangeSizeEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "mainSize",
+      "methodName": "mainSizeWatcher"
+    }]; }
 }

package/dist/collection/components/viewer-grid/viewer-grid.template.js

@@ -1,5 +1,5 @@
 import { html } from "lit-html";
-export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, filterpanelApply, filterpanelCancel, closeOverlay, }) {
+export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
   return noOverlay
     ? html `
         <dso-viewer-grid
@@ -14,6 +14,7 @@ export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay,
         <dso-viewer-grid
           ?filterpanel-open=${filterpanelOpen}
           ?overlay-open=${overlayOpen}
+          @mainSizeChange=${mainSizeChange}
           @closeOverlay=${closeOverlay}
           @filterpanelApply=${filterpanelApply}
           @filterpanelCancel=${filterpanelCancel}