@dso-toolkit/core 36.3.0 → 38.1.0

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/noot.node.js

@@ -21,7 +21,7 @@ export class OzonContentNootNode {
     return (h(Fragment, null,
       h("sup", null,
         h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? 'true' : 'false' }, nootNummer)),
-      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true },
+      h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true, descriptive: true },
         h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(':scope > Al')))))));
   }
 }

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,41 @@
-:host {
+:host(:not([inline])) {
   display: block;
 }
 
+:host([inline]) {
+  display: inline;
+}
+
+:host([deleted]) * {
+  text-decoration: line-through !important;
+}
+
+:host([interactive]) {
+  background-color: transparent;
+  color: #39870c;
+  text-decoration: underline;
+  cursor: pointer;
+}
+:host([interactive]):hover, :host([interactive]):focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+:host([interactive]):active {
+  text-decoration: none;
+}
+
+.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 +89,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 +103,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,10 +1,35 @@
-import { Component, Event, Prop, State, } from '@stencil/core';
+import { h, Component, Element, Event, Prop, State, Host } from '@stencil/core';
+import { isTabbable } from 'tabbable';
 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;
+    /**
+     * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.
+     *
+     * **Do not** use this without an accessible companion element! `interactive` is only
+     * meant to ease the use of the companion element for mouse/touch users.
+     */
+    this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
+  handleHostOnClick(e) {
+    if (!this.interactive) {
+      return;
+    }
+    const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
+    if (doIt) {
+      this.dsoClick.emit({ originalEvent: e });
+    }
+  }
   render() {
     var _a;
     const context = {
@@ -12,7 +37,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 (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }
@@ -35,10 +67,64 @@ 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"
+    },
+    "interactive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\n\n**Do not** use this without an accessible companion element! `interactive` is only\nmeant to ease the use of the companion element for mouse/touch users."
+      },
+      "attribute": "interactive",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -64,5 +150,26 @@ export class OzonContent {
           }
         }
       }
+    }, {
+      "method": "dsoClick",
+      "name": "dsoClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "These events are only emitted when the component is `interactive`."
+      },
+      "complexType": {
+        "original": "OzonContentClick",
+        "resolved": "OzonContentClick",
+        "references": {
+          "OzonContentClick": {
+            "location": "import",
+            "path": "./ozon-content.interfaces"
+          }
+        }
+      }
     }]; }
+  static get elementRef() { return "host"; }
 }

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

@@ -1,9 +1,14 @@
 import { html } from 'lit-html';
-export function ozonContentTemplate({ content, onAnchorClick }) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function ozonContentTemplate({ content, inline, interactive, deleted, onAnchorClick, onClick }) {
   return html `
     <dso-ozon-content
       .content=${content}
+      ?inline=${inline}
+      ?interactive=${interactive}
+      ?deleted=${deleted}
       @anchorClick=${onAnchorClick}
+      @dsoClick=${ifDefined(interactive ? onClick : undefined)}
     ></dso-ozon-content>
   `;
 }

package/dist/collection/components/selectable/selectable.template.js

@@ -15,7 +15,7 @@ export function selectableTemplate({ type, id, name, label, value, required, inv
       ?checked=${checked}
       ?indeterminate=${indeterminate}
       ?info-fixed=${info === null || info === void 0 ? void 0 : info.fixed}
-      @dsoChange=${(e) => onChange(e.detail)}
+      @dsoChange=${(e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.detail)}
     >
       ${label}
       ${(_a = info === null || info === void 0 ? void 0 : info.richContent) !== null && _a !== void 0 ? _a : nothing}

package/dist/collection/components/toggletip/toggletip.js

@@ -43,12 +43,11 @@ export class Toggletip {
       throw Error("button not found");
     }
     this.button = button;
-    this.host.setAttribute("tabindex", "-1");
   }
   render() {
     return (h(Fragment, null,
       h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary }),
-      h("dso-tooltip", { stateless: true, for: "toggle", active: this.active, position: this.position, small: this.small },
+      h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small },
         h("slot", null))));
   }
   static get is() { return "dso-toggletip"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -6,6 +6,10 @@ import clsx from 'clsx';
 const transitionDuration = 150;
 export class Tooltip {
   constructor() {
+    /**
+     * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.
+     */
+    this.descriptive = false;
     /**
      * Set position of tooltip relative to target
      */
@@ -123,9 +127,9 @@ export class Tooltip {
   }
   render() {
     return (h(Host, { class: { 'hidden': this.hidden } },
-      h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
+      h("div", { class: clsx('tooltip', { in: this.active }) },
         !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }),
-        h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
+        h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }
   getTarget() {
@@ -158,6 +162,24 @@ export class Tooltip {
     "$": ["tooltip.css"]
   }; }
   static get properties() { return {
+    "descriptive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`."
+      },
+      "attribute": "descriptive",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "position": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/tooltip/tooltip.template.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function tooltipTemplate({ active, position, label, id }) {
-  return html `<dso-tooltip position=${position} for=${ifDefined(id)} ?active=${active}>
+export function tooltipTemplate({ active, descriptive, position, label, id }) {
+  return html `<dso-tooltip ?descriptive=${ifDefined(descriptive)} position=${position} for=${ifDefined(id)} ?active=${active}>
     ${label}
   </dso-tooltip>`;
 }

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 {

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

@@ -6,7 +6,11 @@ export class ViewerGrid {
   constructor() {
     this.filterpanelOpen = false;
     this.overlayOpen = false;
-    this.mainSize = "large";
+    /**
+     * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
+     */
+    this.initialMainSize = "large";
+    this.mainSize = this.initialMainSize;
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
@@ -163,6 +167,28 @@ export class ViewerGrid {
       "attribute": "overlay-open",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "initialMainSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "MainSize",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {
+          "MainSize": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size of the main content panel when component loads. Changing this attribute afterwards has no effect."
+      },
+      "attribute": "initial-main-size",
+      "reflect": false,
+      "defaultValue": "\"large\""
     }
   }; }
   static get states() { return {

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

@@ -1,9 +1,11 @@
 import { html } from "lit-html";
-export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay, filterpanelOpen, overlayOpen, initialMainSize, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
   return noOverlay
     ? html `
         <dso-viewer-grid
           ?overlay-open=${overlayOpen}
+          initial-main-size=${ifDefined(initialMainSize)}
           @closeOverlay=${closeOverlay}
         >
           <div slot="main">${main}</div>
@@ -14,6 +16,7 @@ export function viewerGridTemplate({ filterpanel, main, map, overlay, noOverlay,
         <dso-viewer-grid
           ?filterpanel-open=${filterpanelOpen}
           ?overlay-open=${overlayOpen}
+          initial-main-size=${ifDefined(initialMainSize)}
           @mainSizeChange=${mainSizeChange}
           @closeOverlay=${closeOverlay}
           @filterpanelApply=${filterpanelApply}