@dso-toolkit/core 37.0.0 → 38.1.1

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

@@ -29,13 +29,13 @@ export class HelpcenterPanel {
   }
   render() {
     return (h(Fragment, null,
-      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}` },
+      h("button", { type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": "false", "aria-haspopup": "dialog" },
         h("dso-icon", { icon: "help" }),
         h("span", null, this.label)),
       h("div", { class: `wrapper ${this.visibility}` },
-        h("div", { class: "dimscreen" }),
-        h("div", { class: `iframe-container ${this.slideState}` }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
-        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick },
+        h("div", { class: "dimscreen", onClick: this.closeClick }),
+        h("div", { class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? h("iframe", { src: this.url }) : h("div", null)),
+        h("button", { type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": "true" },
           h("span", { class: "sr-only" }, "sluiten")))));
   }
   static get is() { return "dso-helpcenter-panel"; }

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

@@ -28,7 +28,7 @@
   background-color: #f2f2f2;
   margin-top: 16px;
   padding: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 .dso-highlight-box.dso-white {
   background-color: #fff;

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/ozon-content.css

@@ -10,6 +10,20 @@
   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;

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

@@ -1,4 +1,5 @@
-import { h, 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() {
@@ -10,9 +11,25 @@ export class OzonContent {
      * 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 = {
@@ -27,7 +44,7 @@ export class OzonContent {
         transformed,
         h("span", { class: "deleted-end" }, "Einde verwijderd element")));
     }
-    return transformed;
+    return (h(Host, { onClick: (e) => this.handleHostOnClick(e) }, transformed));
   }
   static get is() { return "dso-ozon-content"; }
   static get encapsulation() { return "scoped"; }
@@ -90,6 +107,24 @@ export class OzonContent {
       "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 {
@@ -115,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,11 +1,14 @@
 import { html } from 'lit-html';
-export function ozonContentTemplate({ content, inline, deleted, 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.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": "local"
+          }
+        }
+      },
+      "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}