@dso-toolkit/core 34.2.1 → 36.1.0

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

@@ -1,29 +1,21 @@
-import { h, Event, Component, Prop, Listen } from '@stencil/core';
-import { OzonContentTransformer } from './ozon-content.transformer';
+import { Component, Event, Prop, State, } from '@stencil/core';
+import { Mapper } from './ozon-content-mapper';
 export class OzonContent {
-  handleClick(event) {
-    this.transformer.handleClickEvent(event);
-  }
-  componentWillLoad() {
-    this.transformer = new OzonContentTransformer(this.anchorClick);
-  }
-  componentWillRender() {
-    this.transformer.setContent(this.content);
+  constructor() {
+    this.state = {};
+    this.mapper = new Mapper();
   }
   render() {
-    return h("div", { class: "dso-rich-content", ref: el => this.container = el });
-  }
-  componentDidRender() {
     var _a;
-    const content = this.transformer.content;
-    if (this.container && content) {
-      this.container.replaceChildren(...Array.from(content));
-    }
-    else {
-      (_a = this.container) === null || _a === void 0 ? void 0 : _a.replaceChildren();
-    }
+    const context = {
+      state: this.state,
+      setState: state => this.state = state,
+      emitAnchorClick: this.anchorClick.emit
+    };
+    return this.mapper.transform((_a = this.content) !== null && _a !== void 0 ? _a : '', context);
   }
   static get is() { return "dso-ozon-content"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ozon-content.scss"]
   }; }
@@ -35,11 +27,11 @@ export class OzonContent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "string | undefined",
+        "resolved": "string | undefined",
         "references": {}
       },
-      "required": true,
+      "required": false,
       "optional": false,
       "docs": {
         "tags": [],
@@ -49,6 +41,9 @@ export class OzonContent {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "state": {}
+  }; }
   static get events() { return [{
       "method": "anchorClick",
       "name": "anchorClick",
@@ -60,21 +55,14 @@ export class OzonContent {
         "text": ""
       },
       "complexType": {
-        "original": "ContentAnchor",
-        "resolved": "ContentAnchor",
+        "original": "OzonContentAnchorClick",
+        "resolved": "OzonContentAnchorClick",
         "references": {
-          "ContentAnchor": {
+          "OzonContentAnchorClick": {
             "location": "import",
             "path": "./ozon-content.interfaces"
           }
         }
       }
     }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }

package/dist/collection/components/progress-bar/progress-bar.template.js

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function progressBarTemplate({ progress, label, min, max }) {
   return html `
     <dso-progress-bar

package/dist/collection/components/progress-indicator/progress-indicator.template.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function progressIndicatorTemplate({ label, block, size }) {
   return html `
     <dso-progress-indicator

package/dist/collection/components/selectable/selectable.css

@@ -32,9 +32,15 @@
   position: absolute;
   top: 0;
   width: 24px;
-  z-index: 1;
+  z-index: 100;
   zoom: 1;
 }
+@media (prefers-contrast: more) {
+  :host input[type=checkbox],
+:host input[type=radio] {
+    opacity: 1;
+  }
+}
 :host input[type=checkbox]:not([disabled]),
 :host input[type=radio]:not([disabled]) {
   cursor: pointer;

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

@@ -1,5 +1,5 @@
 import { html, nothing } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 export function selectableTemplate({ type, id, name, label, value, required, invalid, describedById, checked, indeterminate, disabled, onChange, info }) {
   var _a;
   return html `

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

@@ -1,6 +1,6 @@
 import { html } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { unsafeHTML } from "lit-html/directives/unsafe-html";
+import { ifDefined } from "lit-html/directives/if-defined.js";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 export function toggletipTemplate({ children, label, position, small, secondary, }) {
   return html `<dso-toggletip
     label=${ifDefined(label)}

package/dist/collection/components/tooltip/tooltip.css

@@ -49,7 +49,7 @@
   opacity: 0;
   position: absolute;
   transition: opacity 0.15s linear;
-  z-index: 1070;
+  z-index: 410;
 }
 .tooltip.in {
   opacity: 1;

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

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
+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}>
     ${label}

package/dist/collection/components/tree-view/tree-item.js

@@ -1,21 +1,21 @@
 import { h, Fragment } from '@stencil/core';
 import clsx from 'clsx';
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize }) => {
-  var _a, _b, _c;
-  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems }), role: 'none' },
+  var _a, _b, _c, _d;
+  return (h("li", { key: item.id, class: clsx('tree-item', { 'has-child': item.hasItems, 'is-expanded': (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) }), role: 'none' },
     h("div", { class: "tree-branch-control" }, item.hasItems
       ?
         h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) },
-          h("dso-icon", { icon: item.open ? 'chevron-down' : 'chevron-right' }))
+          h("dso-icon", { icon: item.open ? 'minus-square' : 'plus-square' }))
       : h("dso-icon", null)),
-    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+    h("p", { class: clsx('tree-content', { 'active': item.active }, { 'selected': item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? '' + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? 'true' : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
       item.selected && h("span", { class: "sr-only" }, "Resultaat: "),
       item.href
         ? h("a", { href: item.href, tabindex: "-1" }, item.label)
-        : h("span", null, item.label), (_b = item.icons) === null || _b === void 0 ? void 0 :
-      _b.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
+        : h("span", null, item.label), (_c = item.icons) === null || _c === void 0 ? void 0 :
+      _c.map((icon) => h("dso-icon", { icon: icon.icon, title: icon.label }))),
     item.open &&
       h(Fragment, null, item.hasItems && !item.items && item.loading
         ? h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })
-        : h("ul", { role: "group" }, (_c = item.items) === null || _c === void 0 ? void 0 : _c.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
+        : h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length }))))));
 };

package/dist/collection/components/tree-view/tree-view.css

@@ -1,31 +1,97 @@
 :host ul {
   list-style-type: none;
+  padding-inline-start: 32px;
+  position: relative;
+}
+:host li {
+  position: relative;
 }
 :host ul[role=tree] {
   padding-left: 0;
 }
-:host li[role=treeitem] > ul {
-  padding-left: 1.5em;
+:host ul[role=group]::before {
+  border-left: 1px solid #275937;
+  content: "";
+  height: 8px;
+  left: 44px;
+  position: absolute;
+  top: 0;
+  width: 0;
+}
+:host li:not(.has-child)::before {
+  border-top: 1px solid #275937;
+  content: "";
+  height: 0;
+  left: 12px;
+  position: absolute;
+  top: 20px;
+  width: 16px;
+}
+:host li:not(.has-child)::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: 100%;
+  left: 12px;
+  position: absolute;
+  top: 8px;
+  width: 0;
+}
+:host li:not(.has-child):last-child::after {
+  height: 20px;
+  top: 0;
+}
+:host li.has-child::before {
+  border-top: 1px solid #275937;
+  content: "";
+  height: 0;
+  left: 24px;
+  position: absolute;
+  top: 20px;
+  width: 4px;
+}
+:host li.has-child:not(:last-child)::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: calc(100% - 24px);
+  left: 12px;
+  position: absolute;
+  top: 32px;
+  width: 0;
+}
+:host li.has-child.is-expanded:last-child::after {
+  border-left: 1px solid #275937;
+  content: "";
+  height: calc(100% - 32px);
+  left: 12px;
+  position: absolute;
+  top: 32px;
+  width: 0;
 }
 :host .tree-branch-control {
-  cursor: pointer;
+  color: #39870c;
   display: inline-block;
-  margin: 8px 0;
+  font-size: 16px;
+  margin: 8px 8px 8px 0;
   vertical-align: top;
 }
+:host .tree-branch-control > div {
+  cursor: pointer;
+}
 :host .tree-content {
   cursor: pointer;
   display: inline-block;
   margin: 8px 0;
-  width: calc(100% - 24px);
+  max-width: calc(100% - 40px);
 }
-:host .tree-content.active {
-  font-weight: 700;
-}
-:host .tree-content.active:hover {
+:host .tree-content a {
+  color: #191919;
   text-decoration: underline;
 }
-:host .tree-content.active a {
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #191919;
+  text-decoration: none;
+}
+:host .tree-content a:active {
   text-decoration: none;
 }
 :host .tree-content.selected {
@@ -36,18 +102,23 @@
 :host .tree-content.selected:hover, :host .tree-content.selected:focus {
   text-decoration: none;
 }
-:host .tree-content a, :host .tree-content a:visited {
-  color: #191919;
+:host .tree-content.active {
+  color: #8b4a6a;
+  font-style: italic;
+  font-weight: 700;
   text-decoration: underline;
 }
-:host .tree-content a:hover, :host .tree-content a:focus {
-  color: #191919;
+:host .tree-content.active:hover, :host .tree-content.active:focus {
   text-decoration: none;
 }
-:host .tree-content a:active {
+:host .tree-content.active a {
+  color: #8b4a6a;
+}
+:host .tree-content.active a:hover, :host .tree-content.active a:focus {
   text-decoration: none;
 }
 :host .tree-content dso-icon {
+  color: #39870c;
   font-size: 0.75em;
   margin-left: 0.5em;
   vertical-align: text-bottom;

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

@@ -24,21 +24,37 @@ h2,
 .h2,
 h3,
 .h3 {
+  margin-bottom: 16px;
   margin-top: 24px;
 }
 
+h1,
+.h1 {
+  line-height: 1.25;
+}
+
 h1 {
   color: #275937;
   font-size: 2rem;
   font-weight: 700;
 }
 
+h2,
+.h2 {
+  line-height: 1.33;
+}
+
 h2 {
   color: #275937;
   font-size: 1.5rem;
   font-weight: 700;
 }
 
+h3,
+.h3 {
+  line-height: 1.2;
+}
+
 h3 {
   color: #275937;
   font-size: 1.25rem;
@@ -51,23 +67,35 @@ h5,
 .h5,
 h6,
 .h6 {
+  margin-bottom: 16px;
   margin-top: 12px;
 }
 
+h4,
+.h4 {
+  line-height: 1.5;
+}
+
 h4 {
   color: #275937;
   font-size: 1rem;
   font-weight: 600;
 }
 
+h5,
+.h5 {
+  line-height: 1.5;
+}
+
 h5 {
   color: #191919;
   font-size: 1rem;
   font-weight: 600;
 }
 
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: 12px;
+h6,
+.h6 {
+  line-height: 1.5;
 }
 
 *,
@@ -302,7 +330,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   padding-right: 8px;
   position: relative;
   transition: flex-basis 0.2s ease-in, max-width 0.2s ease-in, min-width 0.2s ease-in;
-  z-index: 1;
+  z-index: 100;
 }
 .dso-map-panel .dso-filterblok-address {
   font-weight: bold;
@@ -451,7 +479,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   height: 100%;
   overflow-y: auto;
   position: absolute;
-  z-index: 2;
+  z-index: 101;
 }
 
 #filterpanel {

package/dist/custom-elements/index.d.ts

@@ -68,6 +68,12 @@ export const DsoIcon: {
   new (): DsoIcon;
 };
 
+interface DsoImageOverlay extends Components.DsoImageOverlay, HTMLElement {}
+export const DsoImageOverlay: {
+  prototype: DsoImageOverlay;
+  new (): DsoImageOverlay;
+};
+
 interface DsoInfo extends Components.DsoInfo, HTMLElement {}
 export const DsoInfo: {
   prototype: DsoInfo;