@dso-toolkit/core 36.2.0 → 38.0.0

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,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/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,
@@ -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}