@dso-toolkit/core 97.1.0 → 98.0.0

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

@@ -1,122 +1,100 @@
 import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
-import { Host, h } from "@stencil/core";
-import { tabbable } from "tabbable";
+import { Host, forceUpdate, h, } from "@stencil/core";
+import { createStore } from "@stencil/store";
 import { v4 as uuidv4 } from "uuid";
-import { getActiveElement } from "../../utils/get-active-element";
 export class DropdownMenu {
     constructor() {
         /**
-         * Whether the menu is open or closed.
-         * This attribute is reflected and mutable.
+         * The variant of the Button to toggle the menu
          */
+        this.variant = "secondary";
         this.open = false;
-        /**
-         * Alignment of the dropdown
-         */
-        this.dropdownAlign = "left";
-        /**
-         * Space between button and dropdown options
-         */
-        this.dropdownOptionsOffset = 2;
-        /**
-         * Whether the menu is checkable.
-         */
-        this.checkable = false;
         this.focusOutListener = (event) => {
-            if (this.open &&
-                (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+            if (this.open && !(event.relatedTarget instanceof HTMLElement)) {
                 this.toggleOptions(false);
             }
         };
-        this.keyDownListener = (event) => {
+        this.keyDownHandler = (event) => {
+            if (!(event.target instanceof HTMLElement)) {
+                return;
+            }
             if (event.defaultPrevented || !this.open) {
                 return;
             }
             switch (event.key) {
                 case "Tab":
                     if (event.shiftKey) {
-                        this.tabInPopup(this.tabbables(true), -1);
+                        this.moveFocusToPrevious(event.target);
                     }
                     else {
-                        this.tabInPopup(this.tabbables(true), 1);
+                        this.moveFocusToNext(event.target);
                     }
                     break;
                 case "ArrowDown":
-                    this.tabInPopup(this.tabbables(false), 1);
+                    this.moveFocusToNext(event.target, false);
                     break;
                 case "ArrowUp":
-                    this.tabInPopup(this.tabbables(false), -1);
+                    this.moveFocusToPrevious(event.target, false);
                     break;
                 case "Escape":
                     this.escape();
                     break;
-                case " ":
-                    if (event.target instanceof HTMLElement) {
-                        event.target.click();
-                    }
-                    break;
                 default:
                     return;
             }
             event.preventDefault();
         };
         this.escape = () => {
-            this.button.focus();
+            this.button?.focus();
             this.toggleOptions(false);
         };
+        const { state } = createStore({
+            checkable: false,
+        });
+        this.dropdownMenuState = state;
     }
-    get button() {
-        const button = this.host.querySelector('button[slot="toggle"]');
-        if (!(button instanceof HTMLButtonElement)) {
-            throw new ReferenceError("Mandatory toggle button not found");
-        }
-        return button;
+    /**
+     * Whether the menu items are checkable.
+     */
+    get checkable() {
+        return this.dropdownMenuState.checkable;
     }
-    tabbables(withButton) {
-        const tabbables = this.host.isConnected ? tabbable(this.host) : [];
-        return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
+    set checkable(value) {
+        this.dropdownMenuState.checkable = value || false;
+        forceUpdate(this.host);
     }
-    componentDidLoad() {
-        this.button.setAttribute("aria-haspopup", "menu");
-        this.button.setAttribute("aria-expanded", "false");
-        if (!this.button.id) {
-            this.button.id = uuidv4();
-        }
-        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-        if (!(dropdownOptionsElement instanceof HTMLElement)) {
-            throw new Error("dropdown options element is not instanceof HTMLElement");
-        }
-        dropdownOptionsElement.setAttribute("role", "menu");
-        dropdownOptionsElement.setAttribute("aria-labelledby", this.button.id);
-        for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
-            ul.setAttribute("role", "group");
-            for (const li of Array.from(ul.getElementsByTagName("li"))) {
-                li.setAttribute("role", "none");
-            }
+    dsoClickHandler(event) {
+        event.stopPropagation();
+        if (this.open && event.target instanceof HTMLElement) {
+            this.toggleOptions(false);
         }
     }
+    /**
+     * @internal
+     */
+    async _getState() {
+        return this.dropdownMenuState;
+    }
+    dropdownMenuTabbables(withButton) {
+        const menuItems = this.host.isConnected
+            ? Array.from(this.host.querySelectorAll(":scope > dso-dropdown-menu-group > dso-dropdown-menu-item"))
+            : [];
+        return withButton ? [this.host, ...menuItems] : menuItems;
+    }
     componentDidRender() {
-        for (const li of Array.from(this.host.getElementsByTagName("li"))) {
-            for (const tab of this.host.isConnected ? tabbable(li) : []) {
-                tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
-                if (this.checkable) {
-                    tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
-                }
-            }
-        }
-        this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-        if (this.popoverElement && !this.cleanUp) {
+        if (this.button && this.popoverElement && !this.cleanUp) {
             const element = this.popoverElement;
-            this.cleanUp = autoUpdate(this.button, element, () => {
-                computePosition(this.button, element, {
+            const referenceElement = this.button;
+            this.cleanUp = autoUpdate(referenceElement, element, () => {
+                computePosition(referenceElement, element, {
                     strategy: "fixed",
                     middleware: [
-                        offset(this.dropdownOptionsOffset),
+                        offset(2),
                         flip({
-                            padding: this.dropdownOptionsOffset,
+                            padding: 2,
                         }),
                     ],
-                    placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+                    placement: "bottom-start",
                 }).then(({ x, y }) => {
                     Object.assign(element.style, {
                         left: `${x}px`,
@@ -126,51 +104,52 @@ export class DropdownMenu {
             });
         }
     }
-    onClick(event) {
-        const composedPath = event.composedPath();
-        if (this.isToggleButtonEvent(composedPath)) {
-            this.toggleOptions();
-        }
-        else if (this.open && this.isMenuItemEvent(composedPath)) {
-            this.toggleOptions(false);
-        }
-    }
-    isToggleButtonEvent(composedPath) {
-        return composedPath.includes(this.button);
-    }
-    isMenuItemEvent(composedPath) {
-        return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
-    }
     toggleOptions(force) {
         this.open = force ?? !this.open;
         if (this.popoverElement?.isConnected) {
-            this.popoverElement?.togglePopover(this.open);
+            this.popoverElement.togglePopover(this.open);
         }
         if (!this.open && this.cleanUp) {
             this.cleanUp();
             this.cleanUp = undefined;
         }
     }
-    connectedCallback() {
-        this.host.addEventListener("keydown", this.keyDownListener);
-    }
     disconnectedCallback() {
-        this.host.removeEventListener("keydown", this.keyDownListener);
         this.toggleOptions(false);
     }
-    tabInPopup(tabbables, direction) {
-        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
-        let nextIndex = currentIndex + direction;
-        if (nextIndex >= tabbables.length) {
-            nextIndex = 0;
+    get lastItem() {
+        return this.dropdownMenuTabbables(true).at(-1);
+    }
+    firstItem(withButton) {
+        return this.dropdownMenuTabbables(withButton)[0];
+    }
+    moveFocusToPrevious(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index - 1] ?? this.lastItem;
+        this.moveFocusTo(next);
+    }
+    moveFocusToNext(focussedElement, withButton = true) {
+        const tabbables = this.dropdownMenuTabbables(withButton);
+        const index = tabbables.findIndex((element) => element === focussedElement);
+        const next = this.dropdownMenuTabbables(withButton)[index + 1] ?? this.firstItem(withButton);
+        this.moveFocusTo(next);
+    }
+    moveFocusTo(element) {
+        if (!element) {
+            return;
+        }
+        if (element === this.host && this.button) {
+            this.button.focus();
+            return;
         }
-        else if (nextIndex < 0) {
-            nextIndex = tabbables.length - 1;
+        if ("_dsoFocus" in element) {
+            element._dsoFocus();
         }
-        tabbables[nextIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '2b1a77a0d5ec49784f038af3540c6369d4c2cc2c', onFocusout: this.focusOutListener }, h("slot", { key: '32d8b7f6e23a5b11b5ab3bdeb78575fc6855322f', name: "toggle" }), h("div", { key: '262486ced58fb98375ccf8abc38959144fc9296d', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '2c76def3904869f1a6227430f6718d85eb9cfc30' }))));
+        const buttonId = uuidv4();
+        return (h(Host, { key: '73eb6230081dd28bb473514f6b0aa26171c975d1', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '2723bd3be70034df5380907ae417c53cd6485da1', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '0ee3b32c6e5b630ed0f2b073ef8032be71643a41', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '7ba3817d9bb1e1af868f59d3e9c1401ba5653544', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("slot", { key: 'af7124507118b89d0915992daa24c66952364d15' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -186,9 +165,9 @@ export class DropdownMenu {
     }
     static get properties() {
         return {
-            "open": {
+            "checkable": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -198,82 +177,95 @@ export class DropdownMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the menu is open or closed.\r\nThis attribute is reflected and mutable."
+                    "text": "Whether the menu items are checkable."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": true,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "checkable"
             },
-            "dropdownAlign": {
+            "label": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"left\" | \"right\"",
-                    "resolved": "\"left\" | \"right\"",
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Alignment of the dropdown"
+                    "text": "The label of the Dropdown Menu Button"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-align",
-                "defaultValue": "\"left\""
+                "reflect": true,
+                "attribute": "label"
             },
-            "dropdownOptionsOffset": {
-                "type": "number",
+            "variant": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Space between button and dropdown options"
+                    "text": "The variant of the Button to toggle the menu"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "dropdown-options-offset",
-                "defaultValue": "2"
-            },
-            "checkable": {
-                "type": "boolean",
-                "mutable": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "\"secondary\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get methods() {
+        return {
+            "_getState": {
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "signature": "() => Promise<DropdownMenuInternalState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DropdownMenuInternalState": {
+                            "location": "import",
+                            "path": "./dropdown-menu.interfaces",
+                            "id": "src/components/dropdown-menu/dropdown-menu.interfaces.ts::DropdownMenuInternalState",
+                            "referenceLocation": "DropdownMenuInternalState"
+                        }
+                    },
+                    "return": "Promise<DropdownMenuInternalState>"
                 },
-                "required": false,
-                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Whether the menu is checkable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "checkable",
-                "defaultValue": "false"
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
             }
         };
     }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
-                "name": "click",
-                "method": "onClick",
-                "target": "window",
+                "name": "dsoClick",
+                "method": "dsoClickHandler",
+                "target": undefined,
                 "capture": false,
                 "passive": false
             }];

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

@@ -36,10 +36,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: 'cb4240aaf6c07bc54ffe334b2ba05a7471593dcd', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'abc68cc74bade4651794f59e31ec3260306f4c79', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '5e649127a1d0b41628bf5106f161d037cbc02d4e', class: "slot-container" }, h("slot", { key: '44ccc85c8af6b6fd368323bd04b22624227daa70' }))));
+            }) }, h("div", { key: '064fce34f03a94e976b826025e45e0dada4fdb12', class: "slot-container" }, h("slot", { key: '8f5c525d7c0ad8d1a3c3739ee7c45ebbc26ad9b4' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,11 +86,24 @@ export class Header {
         };
         this.menuItemElementRefs = [];
         this.text = i18n(() => this.host, translations);
-        this.resizeObserver = new ResizeObserver(() => {
+        this.flushResize = () => {
+            this.resizeFrameId = undefined;
+            if (!this.host.isConnected) {
+                return;
+            }
             this.resetVisibleMenuItems();
             this.toggleOptions(false);
             this.dropdownOptionsOffset = 0;
             forceUpdate(this.host);
+        };
+        this.scheduleResize = () => {
+            if (this.resizeFrameId !== undefined) {
+                return;
+            }
+            this.resizeFrameId = requestAnimationFrame(this.flushResize);
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleResize();
         });
         this.focusOutListener = (event) => {
             if (this.open &&
@@ -170,6 +183,10 @@ export class Header {
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
+        if (this.resizeFrameId !== undefined) {
+            cancelAnimationFrame(this.resizeFrameId);
+            this.resizeFrameId = undefined;
+        }
         this.toggleOptions(false);
     }
     componentDidRender() {
@@ -206,7 +223,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '049a7cd2e6c5beccbe9a1b23bcd505ce2cfbc1e4', "is-compact": this.isCompact }, h("div", { key: '69626521734262e4cb40369667b084bee23cec42', class: "dso-header" }, h("div", { key: '7e0106defaff8c5f6c0c8942c987d3416acb39bc', class: "logo-container" }, h("slot", { key: '7355a1f157c81f785bb101f7c5490aa6ae0330c4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '7616366268bd638278a5c8de35edad2caf574b41', "is-compact": this.isCompact }, h("div", { key: '94d457313e7fae53ce4d680c1f046f04c6bf4eb5', class: "dso-header" }, h("div", { key: '5f28b536b1cf02cae5a8f49ff9a0013c4ac44734', class: "logo-container" }, h("slot", { key: 'c806a6d6443faab890b185b7f78b561f0b5bc133', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/highlight-box/highlight-box.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '11fabaa968d990291c856c89f08c7d9cf73c47e8', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f5bdf7d62ebf65996f6cf8c151ef4a4bab65654d', class: "dso-step-counter" }, this.step ?? h("slot", { key: '7a5a4f56968c88710cdb095bb9f2768efb9972f3', name: "icon" })), h("slot", { key: 'a2f640620379148fb881f993e17cf42d9e02bb4c' })));
+        return (h(Host, { key: '1e902cf67675123014ad9e2c1bfcc35284c2828b', "has-counter": hasCounter }, hasCounter && h("div", { key: '59a5633cf405c58276188f21f0627a00ad3d6a11', class: "dso-step-counter" }, this.step ?? h("slot", { key: 'edb70c650e0c9a63421b4c88b8f8ed3c79011d5c', name: "icon" })), h("slot", { key: '255d6709a5a8eb50e8a7aec26671505cbddab89a' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/history-item/history-item.js

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '46b086a93f12ddfa53c1fbabd36a96c7b2905bf9', class: "history-item" }, h("div", { key: 'e6e36dbbeea19b949f39e08d1447e159f3e9dec3', class: "history-item-date" }, h("slot", { key: '2abff00e5b46822d29f0ba132ec7bc611a743a77', name: "date" })), h("div", { key: '29015f198acaefe304926b6190cef2360468b171', class: "history-item-content" }, h("div", { key: '979f988d463139993a2ce50fe6c7aa5f67376055', class: "history-item-status-message" }, h("dso-icon", { key: '54fed97c8f7cda66a062a45135b4de5f8ae2e99d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a4e0f448ef5e2b8814894ec7ec363a9d1ca49054', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'c7552d220c1c6975eddee04a05ef47fc901ed101', class: "history-item-title" }, h("a", { key: 'afb73216739f1e773e8af90ebd0fb3f9883389a1', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'b7ef7db153f9ab537f57c42ebe0b8cfeb05290c8', class: "history-item-title-content" }, h("slot", { key: '8102f8a64cea0c4a91403db71fe4238b8ab45657', name: "title" })), "\u2060", h("dso-icon", { key: '0db7fec66135bb97e504d69ec496dbe07f649080', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '04668c9a02458071fa95ef7ab07ab684c59209e2', class: "history-item-explanation" }, h("slot", { key: 'c8dce4885752b53bd86569793b0d479e136e020c', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '4e70edd351fa28d880395da0d39635b80b89e5c6', class: "history-item-warning" }, h("dso-icon", { key: 'd57c337527ab3e37388f1ddcb27f127267dcd59c', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '306f3b2e834b1f707f0422f7a928758787955189', name: "warning" }))))));
+        return (h("div", { key: '286c3a153bcfe21c6a1061ec684f034dce5b5dd0', class: "history-item" }, h("div", { key: '06e056e57255b7fbaa76e953851f9b7866daa11c', class: "history-item-date" }, h("slot", { key: '8e78082b36fb909bc733ca04edc75c00e811052d', name: "date" })), h("div", { key: '17e209c98bbf9af6882973d3fb7ff96b7728ccda', class: "history-item-content" }, h("div", { key: 'bd575db077061c0d47f52d3ef20a0bc9f105dc19', class: "history-item-status-message" }, h("dso-icon", { key: '35d6e6822cd74dd891820cf9cd105c06d258fc86', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '569d3fb874ec165b98a2c9adeb3cb486e37e04fc', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'ed60f29a6b6210938c330fdd96eddc11304f124e', class: "history-item-title" }, h("a", { key: 'beeacf730a1b5f2982904a5a8d33fd77d895b516', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'e91ff8f57b28c5ac65551a7de78062a280c3db11', class: "history-item-title-content" }, h("slot", { key: '683603e86b5e949f2ec8fa97a30644264733768b', name: "title" })), "\u2060", h("dso-icon", { key: '9646a46c7637c2c31aad5966cf26b44bf5a5ddd2', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '94c3a4affe2dbff1db032ea96b9eb6cc400c25d3', class: "history-item-explanation" }, h("slot", { key: 'b2f1927d4429e9a051bc8bd2b107ba8d8a8fbd14', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '0578320d731fc2b982ced2f19b577878ba73d0c0', class: "history-item-warning" }, h("dso-icon", { key: '2e6589b370b700117c4761a81be83b46db4bcdef', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '739c49fd64725c068f781ca6369465d0c67479ce', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'a3de4e16f316b2ccb22a32de5552f8458e41f8c9', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '442fcbabe7a1d6a43bedc87f5f337889ba210aec', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }