@dso-toolkit/core 43.1.0 → 44.0.0

package/dist/collection/components/label/label.js

@@ -1,10 +1,16 @@
-import { Component, h, Prop, Event, State, Element, Fragment, Watch } from '@stencil/core';
+import { Component, h, Prop, Event, State, Element, Watch, Host } from '@stencil/core';
 import clsx from 'clsx';
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;
 }
 export class Label {
   constructor() {
+    this.mutationObserver = new MutationObserver(() => {
+      this.labelText = this.host.innerText;
+      if (this.truncate) {
+        this.truncateLabel();
+      }
+    });
     this.resizeObserver = new ResizeObserver(() => this.truncateLabel());
     this.keydownListenerActive = false;
     this.keyDownListener = (event) => {
@@ -40,35 +46,33 @@ export class Label {
     });
   }
   componentDidLoad() {
+    this.labelText = this.host.innerText;
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      subtree: true
+    });
     if (this.truncate) {
       this.startTruncate();
     }
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.stopTruncate();
   }
   startTruncate() {
-    this.mutationObserver = new MutationObserver(() => {
-      this.truncateLabel();
-    });
-    this.mutationObserver.observe(this.host, {
-      attributes: true,
-      subtree: true
-    });
     this.resizeObserver.observe(this.host);
     this.truncateLabel();
   }
   stopTruncate() {
-    var _a;
     document.removeEventListener('keydown', this.keyDownListener);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.resizeObserver.unobserve(this.host);
     this.truncatedContent = undefined;
     this.keydownListenerActive = false;
   }
   render() {
     const status = this.status && Label.statusMap.get(this.status);
-    return (h(Fragment, null,
+    return (h(Host, { "aria-roledescription": (this.truncate && this.truncatedContent) ? 'Deze tekst is visueel afgekapt en wordt volledig zichtbaar bij focus.' : undefined },
       h("span", { id: "toggle-anchor", class: clsx('dso-label', {
           [`dso-label-${this.status}`]: this.status,
           'dso-compact': this.compact && !this.removable,
@@ -83,9 +87,11 @@ export class Label {
           }), ref: element => this.labelContent = element, tabindex: (this.truncate && this.truncatedContent) ? 0 : -1, onMouseEnter: () => this.textHover = true, onMouseLeave: () => this.textHover = false, onFocus: () => this.textFocus = true, onBlur: () => this.textFocus = false },
           h("slot", null)),
         this.removable && (h("button", { type: "button", onClick: e => this.removeClick.emit(e), onMouseEnter: () => this.removeHover = true, onMouseLeave: () => this.removeHover = false, onFocus: () => this.removeFocus = true, onBlur: () => this.removeFocus = false },
-          h("span", { class: "sr-only" }, "Verwijder"),
+          h("span", { class: "sr-only" },
+            "Verwijder: ",
+            this.labelText),
           h("dso-icon", { icon: "times" })))),
-      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top" }, this.truncatedContent)));
+      h("dso-tooltip", { stateless: true, for: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -170,7 +176,8 @@ export class Label {
     "removeFocus": {},
     "textHover": {},
     "textFocus": {},
-    "truncatedContent": {}
+    "truncatedContent": {},
+    "labelText": {}
   }; }
   static get events() { return [{
       "method": "removeClick",

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

@@ -1,14 +1,14 @@
 import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-export function labelTemplate({ status, label, button, compact, truncate, symbol }) {
+export function labelTemplate({ status, label, removable, onRemoveClick, compact, truncate, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
-      @removeClick=${ifDefined(button === null || button === void 0 ? void 0 : button.onClick)}
+      @removeClick=${ifDefined(onRemoveClick)}
       ?truncate=${truncate}
       ?compact=${compact}
-      ?removable=${button}
+      ?removable=${removable}
     >
       ${symbol
     ? html `

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

@@ -7,8 +7,8 @@ export class OzonContentExtRefNode {
     ];
   }
   render(node, { mapNodeToJsx }) {
-    var _a;
-    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: (_a = node.getAttribute('ref')) !== null && _a !== void 0 ? _a : undefined },
+    const href = node.tagName === 'ExtIoRef' ? node.getAttribute('href') : node.getAttribute('ref');
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined },
       h("span", { class: "sr-only" }, "opent in nieuw venster"),
       mapNodeToJsx(node.childNodes)));
   }

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

@@ -15,6 +15,9 @@
   color: #39870c;
   text-decoration: underline;
   cursor: pointer;
+  color: #275937;
+  font-weight: 600;
+  text-decoration: none;
 }
 :host([interactive]):hover, :host([interactive]):focus {
   color: #676cb0;
@@ -24,6 +27,10 @@
   text-decoration: none;
 }
 
+:host([interactive=sub]) {
+  color: #191919;
+}
+
 .deleted-start,
 .deleted-end {
   position: absolute;

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

@@ -16,13 +16,18 @@ export class OzonContent {
      *
      * **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.
+     *
+     * * `true`: Interactive anchor-look-alike
+     * * `"sub"`: Interactive anchor-look-alike for sub navigation
+     * * `false | undefined`: Disabled
      */
     this.interactive = false;
     this.state = {};
     this.mapper = new Mapper();
   }
   handleHostOnClick(e) {
-    if (!this.interactive) {
+    // '' is `true`: <dso-ozon-content interactive>
+    if (this.interactive !== '' && !this.interactive) {
       return;
     }
     const doIt = e.composedPath().find(e => e === this.host || (e instanceof HTMLElement && isTabbable(e))) === this.host;
@@ -114,18 +119,18 @@ export class OzonContent {
       "defaultValue": "false"
     },
     "interactive": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'sub' | '' | boolean",
+        "resolved": "\"\" | \"sub\" | 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."
+        "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.\n\n* `true`: Interactive anchor-look-alike\n* `\"sub\"`: Interactive anchor-look-alike for sub navigation\n* `false | undefined`: Disabled"
       },
       "attribute": "interactive",
       "reflect": true,

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

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

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

@@ -153,6 +153,17 @@ h6,
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
 .shrink,
 .expand,
 .overlay-close-button {
@@ -342,16 +353,6 @@ h6,
   top: 8px;
   right: 16px;
 }
-.overlay-close-button .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
 
 .dso-map-panel {
   background-color: #fff;

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

@@ -4,6 +4,11 @@ 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.sizeLabelMap = {
+      small: 'smal',
+      medium: 'middel',
+      large: 'breed',
+    };
     this.filterpanelOpen = false;
     this.overlayOpen = false;
     /**
@@ -14,10 +19,10 @@ export class ViewerGrid {
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
-      this.mainSize = this.mainSize == "large" ? "medium" : "small";
+      this.mainSize = this.mainSize === 'large' ? 'medium' : 'small';
     };
     this.expandMain = () => {
-      this.mainSize = this.mainSize == "small" ? "medium" : "large";
+      this.mainSize = this.mainSize === 'small' ? 'medium' : 'large';
     };
     this.keyDownListener = (event) => {
       if (event.key != "Escape") {
@@ -104,6 +109,9 @@ export class ViewerGrid {
     return (h(Host, Object.assign({}, { [this.mainSize]: true }),
       h("div", { class: "dso-map-panel" },
         h("div", { class: "sizing-buttons" },
+          h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" },
+            "breedte tekstpaneel: ",
+            this.sizeLabelMap[this.mainSize]),
           h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain },
             h("dso-icon", { icon: "chevron-left" })),
           h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain },