@dso-toolkit/core 30.1.0 → 32.0.0

package/dist/collection/components/info/info.css

@@ -4,7 +4,7 @@
 :host {
   --di-times-bosgroen: url("data:image/svg+xml,%3csvg id='times' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23275937%3b'%3e %3cpath fill='currentColor' d='M13.36%2c12l3.3-3.3A1%2c1%2c0%2c1%2c0%2c15.3%2c7.34L12%2c10.64%2c8.7%2c7.34A1%2c1%2c0%2c1%2c0%2c7.34%2c8.7l3.3%2c3.3-3.3%2c3.3A1%2c1%2c0%2c1%2c0%2c8.7%2c16.66l3.3-3.3%2c3.3%2c3.3a1%2c1%2c0%2c1%2c0%2c1.36-1.36Z'/%3e %3c/svg%3e");
   display: block;
-  background-color: #e5e5e5;
+  background-color: #f2f2f2;
   padding: 16px 32px 16px 16px;
   position: relative;
 }
@@ -13,11 +13,11 @@
   border-style: none;
   padding: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 8px;
+  top: 8px;
 }
 :host > button::before {
-  background: var(--dso-icon, var(--di-times-bosgroen)) no-repeat;
+  background: var(--dso-icon, var(--di-times-grijs90)) no-repeat;
   background-position: center;
   background-size: cover;
   height: 1.5em;

package/dist/collection/components/info-button/info-button.css

@@ -5,6 +5,8 @@
   display: inline-block;
   --di-info: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
   --di-info-active: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %2339870c%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
+  --di-info-secondary: url("data:image/svg+xml,%3csvg id='info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M12%2c3a9%2c9%2c0%2c1%2c1-9%2c9%2c9%2c9%2c0%2c0%2c1%2c9-9m0-2A11%2c11%2c0%2c1%2c0%2c23%2c12%2c11%2c11%2c0%2c0%2c0%2c12%2c1Zm0%2c8a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
+  --di-info-active-secondary: url("data:image/svg+xml,%3csvg id='info-active' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23666%3b'%3e %3cpath fill='currentColor' d='M23%2c12A11%2c11%2c0%2c1%2c1%2c12%2c1%2c11%2c11%2c0%2c0%2c1%2c23%2c12ZM12%2c9a1%2c1%2c0%2c1%2c0-1-1A1%2c1%2c0%2c0%2c0%2c12%2c9Zm1%2c7.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z'/%3e %3c/svg%3e");
 }
 
 *,
@@ -28,14 +30,19 @@ button {
   background: var(--dso-icon, var(--di-info)) no-repeat;
   background-position: center;
   background-size: cover;
-  height: 1.5em;
+  height: 24px;
   vertical-align: top;
-  width: 1.5em;
+  width: 24px;
   border: 1px solid transparent;
   margin-left: 8px;
-  min-width: 16px;
   padding: 0;
 }
 button.dso-open, button:hover, button:active {
   --dso-icon: var(--di-info-active);
+}
+button.dso-info-secondary {
+  --dso-icon: var(--di-info-secondary);
+}
+button.dso-info-secondary.dso-open, button.dso-info-secondary:hover, button.dso-info-secondary:active {
+  --dso-icon: var(--di-info-active-secondary);
 }

package/dist/collection/components/info-button/info-button.js

@@ -9,7 +9,7 @@ export class InfoButton {
     this.toggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
+    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
       h("span", { class: "sr-only" }, this.label)));
   }
   static get is() { return "dso-info-button"; }
@@ -38,6 +38,23 @@ export class InfoButton {
       "attribute": "active",
       "reflect": true
     },
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
+    },
     "label": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/info-button/info-button.template.js

@@ -1,9 +1,10 @@
 import { html } from 'lit-html';
-export function infoButtonTemplate({ label, active, onClick }) {
+export function infoButtonTemplate({ label, active, secondary, onClick }) {
   return html `
     <dso-info-button
       label=${label}
       ?active=${active}
+      ?secondary=${secondary}
       @toggle=${(e) => onClick(e.detail)}
     ></dso-info-button>
   `;

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

@@ -0,0 +1,6 @@
+import { html } from 'lit-html';
+export const decorator = (story, css) => html `
+  ${story()}
+
+  <style>${css}</style>
+`;

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

@@ -4,6 +4,7 @@ export class Label {
   render() {
     const status = this.status && Label.statusMap.get(this.status);
     return (h("span", { class: clsx('dso-label', { [`dso-label-${this.status}`]: this.status, 'dso-compact': this.compact && !this.removable, 'dso-hover': this.hover }) },
+      h("slot", { name: "symbol" }),
       status && (h("span", { class: "sr-only" },
         status,
         ": ")),

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

@@ -1,6 +1,7 @@
-import { html } from 'lit-html';
+import { html, nothing } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined';
-export function labelTemplate({ status, label, button, compact }) {
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+export function labelTemplate({ status, label, button, compact, symbol }) {
   return html `
     <dso-label
       status=${ifDefined(status)}
@@ -8,6 +9,13 @@ export function labelTemplate({ status, label, button, compact }) {
       ?compact=${compact}
       ?removable=${button}
     >
+      ${symbol
+    ? html `
+          <span slot="symbol">
+            ${unsafeHTML(symbol)}
+          </span>
+        `
+    : nothing}
       ${label}
     </dso-label>
   `;

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

@@ -1,6 +1,6 @@
 import isURL from 'validator/es/lib/isURL';
 function transformDescriptionNote(body) {
-  body.querySelectorAll('.od-Al > div.noot').forEach((nootElement, index) => {
+  body.querySelectorAll('div.noot').forEach((nootElement, index) => {
     const contentElement = nootElement.nextElementSibling;
     if (!(contentElement instanceof HTMLDivElement && contentElement.classList.value === 'noot_popup')) {
       return;

package/dist/collection/components/toggletip/toggletip.css

@@ -0,0 +1,8 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,137 @@
+import { h, Component, Fragment, Element, Prop, State } from "@stencil/core";
+export class Toggletip {
+  constructor() {
+    this.active = false;
+    this.label = "Toelichting";
+    this.position = "right";
+    this.click = () => {
+      this.active ? this.close() : this.open();
+    };
+    this.open = () => {
+      this.active = true;
+      this.host.addEventListener("keydown", this.keyDownListener);
+      this.host.addEventListener("focusout", this.focusOutListener);
+    };
+    this.close = () => {
+      this.host.removeEventListener("focusout", this.focusOutListener);
+      this.host.removeEventListener("keydown", this.keyDownListener);
+      this.active = false;
+    };
+    this.focusOutListener = (event) => {
+      if (!this.host.contains(event.relatedTarget)) {
+        this.close();
+      }
+    };
+    this.keyDownListener = (event) => {
+      if (!event.defaultPrevented && event.key == "Escape") {
+        this.close();
+        this.button.focus();
+        event.preventDefault();
+      }
+      return;
+    };
+  }
+  componentDidRender() {
+    var _a, _b, _c;
+    const infoButton = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("dso-info-button");
+    if (!infoButton) {
+      throw Error("dso-info-button not found");
+    }
+    this.infoButton = infoButton;
+    const button = (_c = (_b = this.infoButton) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
+    if (!button) {
+      throw Error("button not found");
+    }
+    this.button = button;
+  }
+  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("slot", null))));
+  }
+  static get is() { return "dso-toggletip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["toggletip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["toggletip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "\"Toelichting\""
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"right\""
+    },
+    "small": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "small",
+      "reflect": false
+    },
+    "secondary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "active": {}
+  }; }
+  static get elementRef() { return "host"; }
+}

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

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

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

@@ -2,7 +2,7 @@
 /* stylelint-disable string-no-newline */
 /* stylelint-enable */
 :host(:not([hidden])) {
-  display: block;
+  display: inline-block;
 }
 
 *,

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

@@ -40,8 +40,25 @@ export class Tooltip {
     });
   }
   watchActive() {
+    var _a;
     if (this.active) {
       this.hidden = false;
+      if (!this.stateless) {
+        setTimeout(() => {
+          var _a;
+          (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+            modifiers: [{ name: 'eventListeners', enabled: true }]
+          });
+        });
+      }
+    }
+    else {
+      if (!this.stateless) {
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+          modifiers: [{ name: 'eventListeners', enabled: false }]
+        });
+      }
+      setTimeout(() => (this.hidden = true), transitionDuration);
     }
   }
   listenClick(e) {
@@ -61,34 +78,20 @@ export class Tooltip {
       placement: this.position
     });
     this.callbacks = {
-      activate: () => {
-        this.hidden = false;
-        setTimeout(() => {
-          var _a;
-          this.active = true;
-          (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-            modifiers: [{ name: 'eventListeners', enabled: true }]
-          });
-        });
-      },
-      deactivate: () => {
-        var _a;
-        this.active = false;
-        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-          modifiers: [{ name: 'eventListeners', enabled: false }]
-        });
-        setTimeout(() => this.hidden = true, transitionDuration);
-      }
+      activate: () => (this.active = true),
+      deactivate: () => (this.active = false)
     };
-    this.target.addEventListener('mouseenter', this.callbacks.activate);
-    this.target.addEventListener('mouseleave', this.callbacks.deactivate);
-    this.target.addEventListener('focus', this.callbacks.activate);
-    this.target.addEventListener('blur', this.callbacks.deactivate);
+    if (!this.stateless) {
+      this.target.addEventListener('mouseenter', this.callbacks.activate);
+      this.target.addEventListener('mouseleave', this.callbacks.deactivate);
+      this.target.addEventListener('focus', this.callbacks.activate);
+      this.target.addEventListener('blur', this.callbacks.deactivate);
+    }
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
-    if (this.target && this.callbacks) {
+    if (!this.stateless && this.target && this.callbacks) {
       this.target.removeEventListener('mouseenter', this.callbacks.activate);
       this.target.removeEventListener('mouseleave', this.callbacks.deactivate);
       this.target.removeEventListener('focus', this.callbacks.activate);
@@ -106,7 +109,7 @@ export class Tooltip {
   render() {
     return (h(Host, { hidden: this.hidden },
       h("div", { class: clsx('tooltip', { in: this.active }), role: "tooltip" },
-        !this.noArrow && (h("div", { class: "tooltip-arrow" })),
+        !this.noArrow && h("div", { class: "tooltip-arrow" }),
         h("div", { class: clsx('tooltip-inner', { 'dso-small': this.small }) },
           h("slot", null)))));
   }
@@ -115,7 +118,11 @@ export class Tooltip {
       return this.for;
     }
     if (typeof this.for === 'string') {
-      const reference = document.getElementById(this.for);
+      const rootNode = this.element.getRootNode();
+      if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+        throw new Error(`rootNode is not instance of Document or ShadowRoot`);
+      }
+      const reference = rootNode.getElementById(this.for);
       if (!reference) {
         throw new Error(`Unable to find reference with id ${this.for}`);
       }
@@ -193,6 +200,23 @@ export class Tooltip {
       "reflect": false,
       "defaultValue": "false"
     },
+    "stateless": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Deactivates mouseover behaviour"
+      },
+      "attribute": "stateless",
+      "reflect": false
+    },
     "small": {
       "type": "boolean",
       "mutable": false,

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

@@ -0,0 +1,20 @@
+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.reference, class: clsx('tree-item', { 'has-child': item.hasItems }), 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", null)),
+    h("p", { class: "tree-content", 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-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? 'true' : undefined, onClick: (e) => owner.itemClick(e, ancestors, item) },
+      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 }))),
+    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 }))))));
+};

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

@@ -0,0 +1,43 @@
+/* stylelint-disable value-keyword-case */
+/* stylelint-disable string-no-newline */
+/* stylelint-enable */
+:host ul {
+  list-style-type: none;
+}
+:host ul[role=tree] {
+  padding-left: 0;
+}
+:host li[role=treeitem] > ul {
+  padding-left: 1.5em;
+}
+:host .tree-branch-control {
+  cursor: pointer;
+  display: inline-block;
+}
+:host .tree-content {
+  cursor: pointer;
+  display: inline-block;
+  margin: 8px 0;
+}
+:host .tree-content a, :host .tree-content a:visited {
+  color: #39870c;
+  text-decoration: none;
+}
+:host .tree-content a:hover, :host .tree-content a:focus {
+  color: #676cb0;
+  text-decoration: underline;
+}
+:host .tree-content a:active {
+  text-decoration: none;
+}
+:host .tree-content dso-icon {
+  vertical-align: text-bottom;
+  font-size: 0.75em;
+  margin-left: 0.5em;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1 @@
+export {};