@dso-toolkit/core 51.2.1 → 51.4.0

package/dist/collection/collection-manifest.json

@@ -4,6 +4,8 @@
     "./components/accordion/accordion.js",
     "./components/accordion/components/accordion-section.js",
     "./components/alert/alert.js",
+    "./components/annotation-button/annotation-button.js",
+    "./components/annotation-output/annotation-output.js",
     "./components/attachments-counter/attachments-counter.js",
     "./components/autosuggest/autosuggest.js",
     "./components/badge/badge.js",
@@ -12,6 +14,8 @@
     "./components/card-container/card-container.js",
     "./components/date-picker/date-picker.js",
     "./components/dropdown-menu/dropdown-menu.js",
+    "./components/expandable/expandable.js",
+    "./components/expandable-heading/expandable-heading.js",
     "./components/header/header.js",
     "./components/helpcenter-panel/helpcenter-panel.js",
     "./components/highlight-box/highlight-box.js",

package/dist/collection/components/accordion/components/accordion-section.css

@@ -222,14 +222,18 @@
 }
 :host(.dso-accordion-conclusion) .dso-section-handle a,
 :host(.dso-accordion-conclusion) .dso-section-handle button {
-  color: #191919;
+  color: #000;
 }
 :host(.dso-accordion-conclusion) .dso-section-handle a:hover, :host(.dso-accordion-conclusion) .dso-section-handle a:active, :host(.dso-accordion-conclusion) .dso-section-handle a.active,
 :host(.dso-accordion-conclusion) .dso-section-handle button:hover,
 :host(.dso-accordion-conclusion) .dso-section-handle button:active,
 :host(.dso-accordion-conclusion) .dso-section-handle button.active {
   background-color: #e5e5e5;
-  color: #191919;
+}
+:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #000;
+  --dso-icon: var(--di-paperclip-zwart);
 }
 :host(.dso-accordion-conclusion) .dso-section-body {
   border: 2px solid #f2f2f2;
@@ -238,15 +242,6 @@
 :host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle {
   background-color: #f2f2f2;
 }
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
-  color: #191919;
-}
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
-  --dso-attachments-counter-color: #666;
-  --dso-icon: var(--di-paperclip-grijs);
-}
 
 :host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
   background-color: #fff;

package/dist/collection/components/alert/alert.css

@@ -44,22 +44,22 @@
   margin-top: 24px;
 }
 .alert.alert-success {
-  color: #191919;
+  color: #000;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
 }
 .alert.alert-error {
-  color: #191919;
+  color: #000;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
 }
 .alert.alert-warning {
-  color: #191919;
+  color: #000;
   background-color: #f8f6cc;
   border-color: #f8f6cc;
 }
 .alert.alert-info {
-  color: #191919;
+  color: #000;
   background-color: #e1ecf7;
   border-color: #e1ecf7;
 }

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

@@ -0,0 +1,3 @@
+dso-annotation-button {
+  display: block;
+}

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

@@ -0,0 +1,45 @@
+import { h } from "@stencil/core";
+import { AnnotationService } from "../../services/annotation.service";
+export class AnnotationButton {
+  constructor() {
+    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 is() { return "dso-annotation-button"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["annotation-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["annotation-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "identifier",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/annotation-output/annotation-output.css

@@ -0,0 +1,82 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+dso-annotation-output {
+  display: block;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.dso-annotation-header {
+  align-items: center;
+  background-color: #f2f2f2;
+  clear: both;
+  display: flex;
+  margin-bottom: 2px;
+  margin-top: 8px;
+  padding-left: 16px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.dso-annotation-header > *[slot=title] {
+  color: #000;
+  font-size: 1.25rem;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.dso-annotation-header > *:nth-child(2) {
+  margin-left: auto;
+}
+
+dso-responsive-element[small] .dso-annotation-header,
+dso-responsive-element[medium] .dso-annotation-header {
+  display: grid;
+  row-gap: 8px;
+}
+dso-responsive-element[small] .dso-annotation-header *[slot=title],
+dso-responsive-element[medium] .dso-annotation-header *[slot=title] {
+  grid-row: 1;
+  grid-column: 1;
+}
+dso-responsive-element[small] .dso-annotation-header *[slot=addons],
+dso-responsive-element[medium] .dso-annotation-header *[slot=addons] {
+  grid-row: 2;
+  grid-column: 1;
+  margin-left: initial;
+}
+dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,
+dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button {
+  grid-row: 1;
+  grid-column: 2;
+  margin-left: 8px;
+  text-align: end;
+}
+
+.dso-annotation-content {
+  background-color: #f2f2f2;
+  padding-left: 16px;
+  padding-right: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.dso-annotation-close-button {
+  margin-left: 32px;
+}
+
+.dso-annotation-prefix {
+  font-style: italic;
+}

package/dist/collection/components/annotation-output/annotation-output.interfaces.js

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

package/dist/collection/components/annotation-output/annotation-output.js

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+import { AnnotationService } from "../../services/annotation.service";
+export class AnnotationOutput {
+  constructor() {
+    this.identifier = undefined;
+    this.annotationPrefix = undefined;
+  }
+  async toggleAnnotation(e, identifier) {
+    AnnotationService.toggle(identifier);
+    this.dsoToggle.emit({
+      originalEvent: e,
+      open: AnnotationService.state[this.identifier],
+    });
+  }
+  toggleHandler(e) {
+    this.toggleAnnotation(e, this.identifier);
+  }
+  render() {
+    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};
+    return (h("dso-responsive-element", null, h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: (e) => this.toggleHandler(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null)))));
+  }
+  static get is() { return "dso-annotation-output"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["annotation-output.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["annotation-output.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The annotation-button that toggles this component should have the same identifier."
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "annotationPrefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "This text will be displayed above the annotation-output when opened"
+        },
+        "attribute": "annotation-prefix",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "AnnotationToggleEvent",
+          "resolved": "AnnotationToggleEvent",
+          "references": {
+            "AnnotationToggleEvent": {
+              "location": "import",
+              "path": "./annotation-output.interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleAnnotation": {
+        "complexType": {
+          "signature": "(e: MouseEvent | KeyboardEvent, identifier: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/badge/badge.css

@@ -34,7 +34,7 @@
 .dso-badge.badge-info {
   background-color: #6ca4d9;
   border-color: #6ca4d9;
-  color: #191919;
+  color: #000;
 }
 .dso-badge.badge-primary {
   background-color: #275937;
@@ -49,7 +49,7 @@
 .dso-badge.badge-warning {
   background-color: #dcd400;
   border-color: #dcd400;
-  color: #191919;
+  color: #000;
 }
 .dso-badge.badge-danger {
   background-color: #ce3f51;
@@ -65,4 +65,9 @@
   background-color: #fff;
   border-color: #191919;
   color: #191919;
+}
+.dso-badge.badge-attention {
+  background-color: #8b4a6a;
+  border-color: #8b4a6a;
+  color: #fff;
 }

package/dist/collection/components/badge/badge.js

@@ -25,8 +25,8 @@ export class Badge {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\"",
-          "resolved": "\"danger\" | \"error\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\"",
+          "resolved": "\"attention\" | \"danger\" | \"error\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
           "references": {}
         },
         "required": false,

package/dist/collection/components/card/card.css

@@ -14,7 +14,6 @@
 :host .dso-card-heading {
   align-items: center;
   display: flex;
-  justify-content: space-between;
   margin-bottom: 8px;
 }
 @media screen and (max-width: 480px) {

package/dist/collection/components/card/card.js

@@ -1,13 +1,15 @@
 import { h, Host } from "@stencil/core";
+import clsx from "clsx";
 import { isInteractiveElement } from "../../utils/is-interactive-element";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 export class Card {
   constructor() {
     this.isSelectable = false;
     this.hasImage = false;
+    this.clickable = true;
   }
   clickEventHandler(e) {
-    if (!(e.target instanceof HTMLElement)) {
+    if (!(e.target instanceof HTMLElement) || !this.clickable) {
       return;
     }
     let element = e.target;
@@ -29,7 +31,7 @@ export class Card {
     this.hasImage = this.host.querySelector("*[slot = 'image']") !== null;
   }
   render() {
-    return (h(Host, { onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: clsx({ "dso-not-clickable": !this.clickable }), onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
   }
   static get is() { return "dso-card"; }
   static get encapsulation() { return "shadow"; }
@@ -80,6 +82,24 @@ export class Card {
         "attribute": "has-image",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clickable",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -4,5 +4,4 @@
 
 :host {
   display: inline-block;
-  position: relative;
 }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -1,3 +1,4 @@
+import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
@@ -39,6 +40,15 @@ export class DropdownMenu {
     this.open = false;
     this.dropdownAlign = "left";
     this.checkable = false;
+    this.boundary = undefined;
+  }
+  watchPosition() {
+    if (!this.popper) {
+      return;
+    }
+    this.popper.setOptions({
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+    });
   }
   get button() {
     const button = this.host.querySelector('button[slot="toggle"]');
@@ -71,8 +81,35 @@ export class DropdownMenu {
         li.setAttribute("role", "none");
       }
     }
+    if (this.popper) {
+      return;
+    }
+    const dropdownOptions = this.host.querySelector(".dso-dropdown-options");
+    if (!(dropdownOptions instanceof HTMLElement)) {
+      throw new Error("dropdown options element is not instanceof HTMLElement");
+    }
+    this.popper = createPopper(this.button, dropdownOptions, {
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 2], // 2px margin between button and options
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: this.boundary ? document.querySelector(this.boundary) : null,
+          },
+          enabled: this.boundary !== undefined,
+        },
+      ],
+    });
   }
   componentDidRender() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
         tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
@@ -93,6 +130,10 @@ export class DropdownMenu {
       }
     });
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
     if (!activeEl) {
@@ -185,8 +226,31 @@ export class DropdownMenu {
         "attribute": "checkable",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "boundary": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Selector for the element the dropdown options should not be overflowing."
+        },
+        "attribute": "boundary",
+        "reflect": false
       }
     };
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "dropdownAlign",
+        "methodName": "watchPosition"
+      }];
+  }
 }

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

@@ -0,0 +1,24 @@
+:host {
+  display: none;
+}
+
+:host([open]) {
+  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;
+}

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

@@ -0,0 +1,42 @@
+import { h, Host } from "@stencil/core";
+export class Expandable {
+  constructor() {
+    this.open = undefined;
+  }
+  render() {
+    return (h(Host, { "aria-hidden": this.open ? "false" : "true" }, h("slot", null)));
+  }
+  static get is() { return "dso-expandable"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["expandable.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["expandable.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": true
+      }
+    };
+  }
+}