@dso-toolkit/core 51.2.0 → 51.3.0

package/dist/collection/components/expandable-heading/expandable-heading.css

@@ -0,0 +1,145 @@
+h1,
+.h1,
+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;
+  font-weight: 600;
+}
+
+h4,
+.h4,
+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;
+}
+
+h6,
+.h6 {
+  line-height: 1.5;
+}
+
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.expandable-heading {
+  align-items: center;
+  display: flex;
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+.expandable-heading h2,
+.expandable-heading h3,
+.expandable-heading h4,
+.expandable-heading h5,
+.expandable-heading h6 {
+  font-size: 1rem;
+  margin-bottom: 0;
+  margin-right: 8px;
+  margin-top: 0;
+}
+.expandable-heading button {
+  align-items: flex-start;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  display: flex;
+  line-height: 24px;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+  text-align: left;
+}
+.expandable-heading button > dso-icon {
+  flex-shrink: 0;
+}
+.expandable-heading.dso-expandable-heading-black button {
+  color: #000;
+}
+
+dso-expandable {
+  padding-left: 24px;
+}
+
+.addons-end {
+  display: inline-block;
+  margin-left: auto;
+}

package/dist/collection/components/expandable-heading/expandable-heading.interfaces.js

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

package/dist/collection/components/expandable-heading/expandable-heading.js

@@ -0,0 +1,117 @@
+import { Fragment, h } from "@stencil/core";
+import clsx from "clsx";
+import { v4 as uuidv4 } from "uuid";
+import { Heading } from "./heading";
+export class ExpandableHeading {
+  constructor() {
+    this.identifier = uuidv4();
+    this.open = undefined;
+    this.heading = "h2";
+    this.color = "default";
+  }
+  toggle(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({ originalEvent: e, open: this.open });
+  }
+  render() {
+    const expandableProperties = this.open ? { open: true } : {};
+    return (h(Fragment, null, h("div", { class: clsx("expandable-heading", this.color === "black" ? "dso-expandable-heading-black" : "") }, h(Heading, { heading: this.heading }, h("button", { type: "button", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.identifier, onClick: (e) => this.toggle(e) }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), h("slot", { name: "title" }))), h("slot", { name: "addons-start" }), h("div", { class: "addons-end" }, h("slot", { name: "addons-end" }))), h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("slot", null))));
+  }
+  static get is() { return "dso-expandable-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["expandable-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["expandable-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingTags",
+          "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "HeadingTags": {
+              "location": "import",
+              "path": "./expandable-heading.interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"h2\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"black\"",
+          "resolved": "\"black\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ExpandableHeadingToggleEvent",
+          "resolved": "ExpandableHeadingToggleEvent",
+          "references": {
+            "ExpandableHeadingToggleEvent": {
+              "location": "import",
+              "path": "./expandable-heading.interfaces"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/expandable-heading/heading.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export const Heading = ({ heading, ref, className }, children) => {
+  switch (heading) {
+    default:
+    case "h2":
+      return (h("h2", { ref: ref, class: className }, children));
+    case "h3":
+      return (h("h3", { ref: ref, class: className }, children));
+    case "h4":
+      return (h("h4", { ref: ref, class: className }, children));
+    case "h5":
+      return (h("h5", { ref: ref, class: className }, children));
+    case "h6":
+      return (h("h6", { ref: ref, class: className }, children));
+  }
+};

package/dist/collection/components/image-overlay/image-overlay.js

@@ -6,7 +6,6 @@ export class ImageOverlay {
     this.titelSlot = null;
     this.bijschriftSlot = null;
     this.active = false;
-    this.focused = false;
     this.zoomable = false;
   }
   loadListener(event) {
@@ -67,7 +66,7 @@ export class ImageOverlay {
   render() {
     var _a;
     const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
-    return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
+    return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
   }
   componentDidRender() {
     var _a, _b;
@@ -105,7 +104,6 @@ export class ImageOverlay {
   static get states() {
     return {
       "active": {},
-      "focused": {},
       "zoomable": {}
     };
   }

package/dist/collection/components/label/label.css

@@ -27,8 +27,6 @@
   display: inline-block;
   line-height: 1.5;
   max-width: 100%;
-}
-.dso-label:not(.dso-label-bright) {
   padding: 4px 8px;
 }
 .dso-label:focus-within, .dso-label.dso-hover {
@@ -54,10 +52,6 @@
 .dso-label button > svg.di {
   display: block;
 }
-.dso-label.dso-compact {
-  border: 0;
-  padding: 0 8px;
-}
 .dso-label.dso-label-info {
   background-color: #6ca4d9;
   color: #191919;
@@ -85,8 +79,15 @@
 .dso-label.dso-label-bright {
   background-color: #fff;
   color: #191919;
-  border: 1px solid #ccc;
-  padding: 3px 7px;
+  outline: 1px solid #ccc;
+  outline-offset: -1px;
+}
+.dso-label.dso-label-attention {
+  background-color: #8b4a6a;
+  color: #fff;
+}
+.dso-label.dso-compact {
+  padding: 0 8px;
 }
 .dso-label.dso-hover .dso-label-content {
   text-decoration: line-through;

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

@@ -90,7 +90,7 @@ export class Label {
         "dso-hover": this.removeHover || this.removeFocus,
       }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), 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.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : undefined, 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.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "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"; }
@@ -144,8 +144,8 @@ export class Label {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\"",
-          "resolved": "\"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\"",
+          "resolved": "\"attention\" | \"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
           "references": {}
         },
         "required": false,

package/dist/collection/index.js

@@ -1,7 +1,9 @@
 export * from "./components/accordion/accordion.interfaces";
+export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";
 export * from "./components/list-button/list-button.interfaces";

package/dist/collection/services/annotation.service.js

@@ -0,0 +1,16 @@
+import { createStore } from "@stencil/store";
+export class AnnotationService {
+  static get state() {
+    if (!this._state) {
+      AnnotationService.initializeStore();
+    }
+    return this._state;
+  }
+  static toggle(id) {
+    this._state[id] = !this._state[id];
+  }
+  static initializeStore() {
+    const { state } = createStore({});
+    AnnotationService._state = state;
+  }
+}

package/dist/components/annotation.service.js

@@ -0,0 +1,19 @@
+import { c as createStore } from './index2.js';
+
+class AnnotationService {
+  static get state() {
+    if (!this._state) {
+      AnnotationService.initializeStore();
+    }
+    return this._state;
+  }
+  static toggle(id) {
+    this._state[id] = !this._state[id];
+  }
+  static initializeStore() {
+    const { state } = createStore({});
+    AnnotationService._state = state;
+  }
+}
+
+export { AnnotationService as A };

package/dist/components/dso-accordion-section.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, forceUpdate, Host, Fragment } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce_1 } from './index3.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 /*

package/dist/components/dso-accordion.js

@@ -1,195 +1,5 @@
-import { getRenderingRef, forceUpdate, proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
-    }
-    else if (!items.includes(value)) {
-        items.push(value);
-    }
-};
-const debounce = (fn, ms) => {
-    let timeoutId;
-    return (...args) => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = 0;
-            fn(...args);
-        }, ms);
-    };
-};
-
-/**
- * Check if a possible element isConnected.
- * The property might not be there, so we check for it.
- *
- * We want it to return true if isConnected is not a property,
- * otherwise we would remove these elements and would not update.
- *
- * Better leak in Edge than to be useless.
- */
-const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
-const cleanupElements = debounce((map) => {
-    for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
-    }
-}, 2000);
-const stencilSubscription = () => {
-    if (typeof getRenderingRef !== 'function') {
-        // If we are not in a stencil project, we do nothing.
-        // This function is not really exported by @stencil/core.
-        return {};
-    }
-    const elmsToUpdate = new Map();
-    return {
-        dispose: () => elmsToUpdate.clear(),
-        get: (propName) => {
-            const elm = getRenderingRef();
-            if (elm) {
-                appendToMap(elmsToUpdate, propName, elm);
-            }
-        },
-        set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(forceUpdate));
-            }
-            cleanupElements(elmsToUpdate);
-        },
-        reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
-            cleanupElements(elmsToUpdate);
-        },
-    };
-};
-
-const unwrap = (val) => (typeof val === 'function' ? val() : val);
-const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState !== null && unwrappedState !== void 0 ? unwrappedState : {}));
-    const handlers = {
-        dispose: [],
-        get: [],
-        set: [],
-        reset: [],
-    };
-    const reset = () => {
-        var _a;
-        // When resetting the state, the default state may be a function - unwrap it to invoke it.
-        // otherwise, the state won't be properly reset
-        states = new Map(Object.entries((_a = unwrap(defaultState)) !== null && _a !== void 0 ? _a : {}));
-        handlers.reset.forEach((cb) => cb());
-    };
-    const dispose = () => {
-        // Call first dispose as resetting the state would
-        // cause less updates ;)
-        handlers.dispose.forEach((cb) => cb());
-        reset();
-    };
-    const get = (propName) => {
-        handlers.get.forEach((cb) => cb(propName));
-        return states.get(propName);
-    };
-    const set = (propName, value) => {
-        const oldValue = states.get(propName);
-        if (shouldUpdate(value, oldValue, propName)) {
-            states.set(propName, value);
-            handlers.set.forEach((cb) => cb(propName, value, oldValue));
-        }
-    };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
-            get(_, propName) {
-                return get(propName);
-            },
-            ownKeys(_) {
-                return Array.from(states.keys());
-            },
-            getOwnPropertyDescriptor() {
-                return {
-                    enumerable: true,
-                    configurable: true,
-                };
-            },
-            has(_, propName) {
-                return states.has(propName);
-            },
-            set(_, propName, value) {
-                set(propName, value);
-                return true;
-            },
-        }));
-    const on = (eventName, callback) => {
-        handlers[eventName].push(callback);
-        return () => {
-            removeFromArray(handlers[eventName], callback);
-        };
-    };
-    const onChange = (propName, cb) => {
-        const unSet = on('set', (key, newValue) => {
-            if (key === propName) {
-                cb(newValue);
-            }
-        });
-        // We need to unwrap the defaultState because it might be a function.
-        // Otherwise we might not be sending the right reset value.
-        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
-        return () => {
-            unSet();
-            unReset();
-        };
-    };
-    const use = (...subscriptions) => {
-        const unsubs = subscriptions.reduce((unsubs, subscription) => {
-            if (subscription.set) {
-                unsubs.push(on('set', subscription.set));
-            }
-            if (subscription.get) {
-                unsubs.push(on('get', subscription.get));
-            }
-            if (subscription.reset) {
-                unsubs.push(on('reset', subscription.reset));
-            }
-            if (subscription.dispose) {
-                unsubs.push(on('dispose', subscription.dispose));
-            }
-            return unsubs;
-        }, []);
-        return () => unsubs.forEach((unsub) => unsub());
-    };
-    const forceUpdate = (key) => {
-        const oldValue = states.get(key);
-        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
-    };
-    return {
-        state,
-        get,
-        set,
-        on,
-        onChange,
-        use,
-        dispose,
-        reset,
-        forceUpdate,
-    };
-};
-const removeFromArray = (array, item) => {
-    const index = array.indexOf(item);
-    if (index >= 0) {
-        array[index] = array[array.length - 1];
-        array.length--;
-    }
-};
-
-const createStore = (defaultState, shouldUpdate) => {
-    const map = createObservableMap(defaultState, shouldUpdate);
-    map.use(stencilSubscription());
-    return map;
-};
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createStore } from './index2.js';
 
 const accordionCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}";
 

package/dist/components/dso-annotation-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoAnnotationButton extends Components.DsoAnnotationButton, HTMLElement {}
+export const DsoAnnotationButton: {
+  prototype: DsoAnnotationButton;
+  new (): DsoAnnotationButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-annotation-button.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { A as AnnotationService } from './annotation.service.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const annotationButtonCss = "dso-annotation-button{display:block}";
+
+const AnnotationButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.identifier = undefined;
+  }
+  componentDidLoad() {
+    this.annotationOutput = document.querySelector(`dso-annotation-output[identifier='${this.identifier}']`);
+  }
+  render() {
+    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": AnnotationService.state[this.identifier] ? "true" : "false", onClick: (e) => { var _a; return (_a = this.annotationOutput) === null || _a === void 0 ? void 0 : _a.toggleAnnotation(e, this.identifier); } }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
+  }
+  static get style() { return annotationButtonCss; }
+}, [0, "dso-annotation-button", {
+    "identifier": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-annotation-button", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-annotation-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnnotationButton);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoAnnotationButton = AnnotationButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAnnotationButton, defineCustomElement };