@dso-toolkit/core 53.0.0 → 54.0.0

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.js

@@ -19,7 +19,7 @@ export class ExpandableHeading {
     return (h(Host, { class: clsx({
         "dso-del": this.editAction === "delete",
         "dso-ins": this.editAction === "insert",
-      }) }, this.editAction === "delete" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "verwijderd:"))), this.editAction === "insert" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "toegevoegd:"))), 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))));
+      }) }, this.editAction === "delete" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "verwijderd:"))), this.editAction === "insert" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "toegevoegd:"))), 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", { slot: "expandable-content" }))));
   }
   static get is() { return "dso-expandable-heading"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -23,6 +23,7 @@ export class Header {
     this.showDropDown = undefined;
     this.hasSubLogo = false;
     this.overflowMenuItems = 0;
+    this.dropdownOptionsOffset = 0;
   }
   clickHandler(e, type, options) {
     var _a, _b;
@@ -58,12 +59,16 @@ export class Header {
   }
   componentDidRender() {
     if (this.showDropDown) {
+      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
       return;
     }
     window.setTimeout(() => this.shrinkMenuToFit(), 0);
   }
   componentDidLoad() {
     this.setShowDropDown(this.useDropDownMenu);
+    if (this.showDropDown) {
+      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
+    }
   }
   setOverflowMenu() {
     if (this.showDropDown) {
@@ -81,6 +86,14 @@ export class Header {
     }
     this.showDropDown = window.innerWidth < minDesktopViewportWidth;
   }
+  calculateDropdownOptionsOffset() {
+    var _a;
+    if (!this.dropdownElement) {
+      return 0;
+    }
+    return (this.host.clientHeight -
+      (((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - this.host.getBoundingClientRect().top));
+  }
   connectedCallback() {
     window.addEventListener("resize", this.onWindowResize);
   }
@@ -95,7 +108,9 @@ export class Header {
     return (h(Fragment, null, h("div", { class: clsx("dso-header", {
         ["use-drop-down"]: this.showDropDown,
         ["has-sub-logo"]: this.hasSubLogo,
-      }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+      }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown &&
+      this.mainMenu &&
+      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
       this.mainMenu
         .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
         .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
@@ -265,7 +280,8 @@ export class Header {
     return {
       "showDropDown": {},
       "hasSubLogo": {},
-      "overflowMenuItems": {}
+      "overflowMenuItems": {},
+      "dropdownOptionsOffset": {}
     };
   }
   static get events() {

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

@@ -370,8 +370,8 @@
 }
 .dso-selectable > dso-info {
   float: none;
-  margin: 8px 16px 0 -32px;
-  width: calc(100% + 32px);
+  margin: 8px 16px 0 0;
+  width: 100%;
 }
 .dso-selectable label {
   font-weight: 700;
@@ -438,17 +438,6 @@
   font-weight: 400;
   width: 100%;
 }
-.dso-list-button .dso-subcontent {
-  color: #666;
-  font-weight: 400;
-  padding: 16px 0 0 16px;
-}
-.dso-list-button .dso-subcontent mark {
-  background-color: transparent;
-  color: #666;
-  font-weight: 700;
-  padding: 0;
-}
 .dso-list-button dso-icon,
 .dso-list-button svg.di,
 .dso-list-button .dso-count {
@@ -474,10 +463,6 @@
 .dso-list-button .dso-sublabel {
   padding-left: 32px;
 }
-.dso-list-button .dso-subcontent {
-  padding-left: 48px;
-  padding-top: 8px;
-}
 
 .dso-list-button + .dso-list-button,
 .dso-list-button + .dso-btn-group,

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

@@ -7,12 +7,17 @@ export class ListButton {
     this.manualCount = undefined;
     this.label = undefined;
     this.sublabel = undefined;
-    this.subcontent = undefined;
     this.count = undefined;
     this.min = undefined;
     this.max = undefined;
     this.checked = false;
     this.disabled = false;
+    this.manual = true;
+  }
+  watchManualCallback() {
+    if (!this.manual && this.manualCount) {
+      this.stopManualCountInput();
+    }
   }
   componentDidRender() {
     var _a;
@@ -95,7 +100,7 @@ export class ListButton {
   render() {
     const showButtonInputs = this.manualCount === undefined;
     const selected = this.checked || (this.count !== undefined && this.count > 0);
-    return (h("div", { class: clsx(["dso-btn-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled, "aria-label": this.label }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label)), this.sublabel && h("span", { class: "dso-sublabel" }, this.sublabel), this.subcontent && h("span", { class: "dso-subcontent" }, this.subcontent)), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde"))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
+    return (h("div", { class: clsx(["dso-btn-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled, "aria-label": this.label }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label)), this.sublabel && h("span", { class: "dso-sublabel" }, this.sublabel), h("slot", { name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual === true && (h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
   }
   static get is() { return "dso-list-button"; }
   static get encapsulation() { return "shadow"; }
@@ -145,23 +150,6 @@ export class ListButton {
         "attribute": "sublabel",
         "reflect": false
       },
-      "subcontent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "subcontent",
-        "reflect": false
-      },
       "count": {
         "type": "number",
         "mutable": false,
@@ -248,6 +236,24 @@ export class ListButton {
         "attribute": "disabled",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "manual": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Allow user to directly input a value.\r\n\r\nSet to `false` to force users to use plus/minus buttons."
+        },
+        "attribute": "manual",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -300,4 +306,10 @@ export class ListButton {
         }
       }];
   }
+  static get watchers() {
+    return [{
+        "propName": "manual",
+        "methodName": "watchManualCallback"
+      }];
+  }
 }

package/dist/collection/components/modal/modal.controller.js

@@ -11,7 +11,7 @@ export class DsoModalController {
       element.setAttribute("modal-title", title);
     }
     if (options) {
-      const { role, showCloseButton, initialFocus } = options;
+      const { role, showCloseButton, initialFocus, returnFocus } = options;
       if (role) {
         element.role = role;
       }
@@ -21,6 +21,9 @@ export class DsoModalController {
       if (initialFocus) {
         element.setAttribute("initial-focus", initialFocus);
       }
+      if (returnFocus) {
+        element.returnFocus = returnFocus;
+      }
     }
     const bodyDiv = document.createElement("div");
     bodyDiv.setAttribute("slot", "body");

package/dist/collection/components/modal/modal.js

@@ -9,6 +9,7 @@ export class Modal {
     this.role = "dialog";
     this.showCloseButton = true;
     this.initialFocus = undefined;
+    this.returnFocus = undefined;
   }
   componentWillLoad() {
     this.hasFooter = this.host.querySelector("*[slot = 'footer']") !== null;
@@ -40,6 +41,7 @@ export class Modal {
           return ((_c = (_a = this.host.querySelector("div[slot='footer'] .dso-primary")) !== null && _a !== void 0 ? _a : (_b = this.modalElement) === null || _b === void 0 ? void 0 : _b.querySelector(".dso-close")) !== null && _c !== void 0 ? _c : false);
         },
         allowOutsideClick: true,
+        setReturnFocus: (e) => { var _a, _b; return (_b = (_a = this.returnFocus) === null || _a === void 0 ? void 0 : _a.call(this, e)) !== null && _b !== void 0 ? _b : e; },
         escapeDeactivates: true,
         tabbableOptions: {
           getShadowRoot: true,
@@ -92,9 +94,14 @@ export class Modal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "ModalRole",
+          "resolved": "\"alert\" | \"alertdialog\" | \"dialog\"",
+          "references": {
+            "ModalRole": {
+              "location": "import",
+              "path": "./modal.interfaces"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -140,6 +147,32 @@ export class Modal {
         },
         "attribute": "initial-focus",
         "reflect": false
+      },
+      "returnFocus": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse",
+          "resolved": "((nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse) | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            },
+            "SVGElement": {
+              "location": "global"
+            },
+            "FocusTargetValueOrFalse": {
+              "location": "import",
+              "path": "focus-trap"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Function that returns the element to focus on Modal close. Return `false` for no focus restore."
+        }
       }
     };
   }