@dso-toolkit/core 52.0.3 → 53.1.0

package/dist/collection/components/action-list/components/action-list-item.css

@@ -0,0 +1,81 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  padding-block: 16px;
+  position: relative;
+}
+:host.dso-has-counter {
+  padding-top: 2.5rem;
+  position: relative;
+}
+:host .dso-step-counter {
+  background-color: #275937;
+  border: 8px solid #79b929;
+  border-radius: 50%;
+  box-sizing: content-box;
+  color: #fff;
+  font-size: 1.25rem;
+  font-weight: 500;
+  height: 2rem;
+  left: 16px;
+  line-height: 2rem;
+  position: absolute;
+  text-align: center;
+  top: -1.5rem;
+  width: 2rem;
+}
+:host .dso-step-counter svg.di {
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  width: 1.5rem;
+}
+:host > dso-icon {
+  vertical-align: text-top;
+}
+
+:host(.divider) .dso-action-list-item::after {
+  border-bottom: 0.25rem dashed #6ca4d9;
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 24px;
+  left: 80px;
+  position: absolute;
+  width: calc(100% + 16px);
+}
+
+h3 {
+  color: #275937;
+  color: #275937;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-block-end: 16px;
+  margin-block-start: 0;
+  min-height: 48px;
+  padding-block-start: 9px;
+}
+
+.dso-action-list-item {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+}
+.dso-action-list-item .dso-step-counter {
+  position: unset;
+}
+.dso-action-list-item .dso-step-counter,
+.dso-action-list-item dso-icon {
+  margin-inline-start: 8px;
+}
+.dso-action-list-item .action-list-item-content {
+  grid-column: 2/2;
+}
+
+dso-icon {
+  height: 48px;
+  width: 48px;
+}

package/dist/collection/components/action-list/components/action-list-item.js

@@ -0,0 +1,120 @@
+import { h, Host } from "@stencil/core";
+export class ActionListItem {
+  constructor() {
+    this.step = undefined;
+    this.itemTitle = undefined;
+    this.flowLine = false;
+    this.warning = false;
+    this.divider = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        divider: this.divider,
+        "flow-line": this.flowLine,
+      } }, h("div", { class: "dso-action-list-item" }, this.warning ? h("dso-icon", { icon: "status-warning" }) : h("div", { class: "dso-step-counter" }, this.step), h("div", { class: "action-list-item-content" }, this.itemTitle && h("h3", null, this.itemTitle), h("slot", null)))));
+  }
+  static get is() { return "dso-action-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["action-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["action-list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false
+      },
+      "itemTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "item-title",
+        "reflect": false
+      },
+      "flowLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Show flow line to next step"
+        },
+        "attribute": "flow-line",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "warning": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "warning",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "divider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Places a dashed line at the bottom of the item."
+        },
+        "attribute": "divider",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -17,7 +17,7 @@ export class AnnotationOutput {
   }
   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)))));
+    return (h("dso-responsive-element", null, h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("div", { slot: "expandable-content" }, 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() {

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

@@ -7,6 +7,20 @@
 :host .dso-card-grid {
   display: grid;
   gap: 32px;
-  grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 1fr;
+}
+@media (max-width: 991px) {
+  :host .dso-card-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  :host .dso-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1200px) {
+  :host .dso-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }

package/dist/collection/components/date-picker/date-picker.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
 }
-:host[invalid] .dso-date__input {
+:host[invalid]:not([invalid=false]) .dso-date__input {
   border-color: #ce3f51;
 }
 

package/dist/collection/components/date-picker/date-picker.js

@@ -562,7 +562,7 @@ export class DsoDatePicker {
           "text": "Is input invalid?"
         },
         "attribute": "invalid",
-        "reflect": false
+        "reflect": true
       },
       "dsoAutofocus": {
         "type": "boolean",

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

@@ -40,6 +40,7 @@ export class DropdownMenu {
     };
     this.open = false;
     this.dropdownAlign = "left";
+    this.dropdownOptionsOffset = 2;
     this.checkable = false;
     this.boundary = undefined;
     this.strategy = "auto";
@@ -52,6 +53,19 @@ export class DropdownMenu {
       placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
     });
   }
+  watchOptionsOffset() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, this.dropdownOptionsOffset],
+          },
+        },
+      ],
+    });
+  }
   watchStrategy() {
     this.setStrategy();
   }
@@ -124,7 +138,7 @@ export class DropdownMenu {
         {
           name: "offset",
           options: {
-            offset: [0, 2], // 2px margin between button and options
+            offset: [0, this.dropdownOptionsOffset],
           },
         },
         {
@@ -242,6 +256,24 @@ export class DropdownMenu {
         "reflect": false,
         "defaultValue": "\"left\""
       },
+      "dropdownOptionsOffset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space between button and dropdown options"
+        },
+        "attribute": "dropdown-options-offset",
+        "reflect": false,
+        "defaultValue": "2"
+      },
       "checkable": {
         "type": "boolean",
         "mutable": false,
@@ -302,6 +334,9 @@ export class DropdownMenu {
     return [{
         "propName": "dropdownAlign",
         "methodName": "watchPosition"
+      }, {
+        "propName": "dropdownOptionsOffset",
+        "methodName": "watchOptionsOffset"
       }, {
         "propName": "strategy",
         "methodName": "watchStrategy"

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

@@ -1,9 +1,20 @@
 :host {
+  display: block;
+  overflow-y: hidden;
+}
+
+:host(.dso-hide) {
   display: none;
 }
 
+:host(:not(.dso-animate-ready)) {
+  position: absolute;
+  visibility: hidden;
+}
+
 :host([open]) {
-  display: block;
+  position: inherit;
+  visibility: inherit;
 }
 
 *,

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

@@ -0,0 +1,3 @@
+export function isExpandable(element) {
+  return element instanceof HTMLElement && "getAnimeInstance" in element;
+}

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

@@ -1,10 +1,127 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import anime from "animejs";
+import clsx from "clsx";
+import debounce from "debounce";
 export class Expandable {
   constructor() {
     this.open = undefined;
+    this.enableAnimation = false;
+    this.minimumHeight = undefined;
+    this.animationReady = false;
+  }
+  toggleOpen() {
+    if (this.enableAnimation) {
+      this.activateAnimation();
+    }
+  }
+  toggleEnableAnimation(enableAnimation) {
+    var _a;
+    if (enableAnimation) {
+      this.prepareAnimationResizeObserver();
+      this.activateObserver();
+    }
+    else {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      delete this.animeInstance;
+      this.host.removeAttribute("style");
+    }
+  }
+  async getAnimeInstance() {
+    return this.animeInstance;
+  }
+  async getBodyHeight() {
+    return this.bodyHeight;
+  }
+  componentWillLoad() {
+    if (this.enableAnimation) {
+      this.prepareAnimationResizeObserver();
+    }
+  }
+  componentDidLoad() {
+    this.activateObserver();
+  }
+  activateObserver() {
+    var _a;
+    const bodyContentElement = this.host.querySelector(`[slot="expandable-content"]`);
+    if (bodyContentElement) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(bodyContentElement);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    return (h(Host, { "aria-hidden": this.open ? "false" : "true" }, h("slot", null)));
+    return (h(Host, { "aria-hidden": this.open ? "false" : "true", class: clsx({
+        "dso-animate-ready": this.enableAnimation && this.animationReady,
+        "dso-hide": !this.enableAnimation && !this.open,
+      }) }, h("slot", { name: "expandable-content" })));
+  }
+  prepareAnimationResizeObserver() {
+    this.resizeObserver = new ResizeObserver(debounce(([entry]) => {
+      // entry.contentRect does not include padding, so we use getBoundingClientRect.
+      const height = entry.target.getBoundingClientRect().height;
+      if (this.bodyHeight !== height) {
+        this.bodyHeight = height;
+      }
+      this.instantiateAnimation();
+    }, 150));
+  }
+  instantiateAnimation() {
+    var _a;
+    this.animeInstance = anime({
+      targets: this.host,
+      height: (_a = this.minimumHeight) !== null && _a !== void 0 ? _a : 0,
+      easing: "cubicBezier(0.4, 0, 0.2, 1)",
+      duration: 260,
+      autoplay: false,
+      direction: "normal",
+      begin: () => {
+        if (this.host) {
+          if (this.open) {
+            this.host.style.visibility = "";
+            this.host.style.position = "";
+            this.host.style.bottom = "";
+          }
+        }
+      },
+      complete: () => {
+        if (this.host) {
+          this.host.style.height = "";
+          if (!this.open) {
+            this.host.style.visibility = "hidden";
+            this.host.style.position = "absolute";
+            this.host.style.bottom = "100%";
+          }
+        }
+      },
+    });
+    if (!this.open) {
+      this.animeInstance.reverse();
+      this.animeInstance.play();
+    }
+    if (this.host) {
+      this.host.style.height = "";
+    }
+    this.animationReady = !!this.animeInstance;
+    this.animationInstantiated.emit();
+  }
+  activateAnimation() {
+    if (this.animeInstance) {
+      if (this.animeInstance.progress > 0 && this.animeInstance.progress < 100) {
+        this.animeInstance.reverse();
+      }
+      else {
+        if (this.open) {
+          this.animeInstance.direction = "reverse";
+          this.animeInstance.play();
+        }
+        else {
+          this.animeInstance.direction = "normal";
+          this.animeInstance.play();
+        }
+      }
+    }
   }
   static get is() { return "dso-expandable"; }
   static get encapsulation() { return "shadow"; }
@@ -36,7 +153,134 @@ export class Expandable {
         },
         "attribute": "open",
         "reflect": true
+      },
+      "enableAnimation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "enable-animation",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "minimumHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to"
+        },
+        "attribute": "minimum-height",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "animationReady": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ExpandableToggleEvent",
+          "resolved": "ExpandableToggleEvent",
+          "references": {
+            "ExpandableToggleEvent": {
+              "location": "import",
+              "path": "./expandable.interfaces"
+            }
+          }
+        }
+      }, {
+        "method": "animationInstantiated",
+        "name": "animationInstantiated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getAnimeInstance": {
+        "complexType": {
+          "signature": "() => Promise<anime.AnimeInstance | undefined>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "anime": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<AnimeInstance | undefined>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "getBodyHeight": {
+        "complexType": {
+          "signature": "() => Promise<number | undefined>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<number | undefined>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "toggleOpen"
+      }, {
+        "propName": "enableAnimation",
+        "methodName": "toggleEnableAnimation"
+      }];
+  }
 }

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

@@ -92,8 +92,29 @@ h6,
   line-height: 1.5;
 }
 
+ins {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
+  text-decoration: none;
+}
+
 :host {
   display: block;
+  margin-inline: -8px;
+  padding-inline: 8px;
+}
+
+:host(.dso-del) {
+  background-color: #f5d8dc;
+  color: #000;
+  text-decoration: line-through;
+}
+
+:host(.dso-ins) {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
 }
 
 *,
@@ -113,6 +134,19 @@ h6,
   border: 0;
 }
 
+.dso-edit-action-text {
+  margin-bottom: 8px;
+  margin-top: -8px;
+}
+.dso-edit-action-text span {
+  display: inline-block;
+  font-style: italic;
+}
+.dso-edit-action-text + .expandable-heading {
+  margin-top: 0;
+  padding-top: 0;
+}
+
 .expandable-heading {
   align-items: center;
   display: flex;