@dso-toolkit/core 62.18.0 → 62.19.0

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

@@ -5,387 +5,387 @@ import { v4 as uuidv4 } from "uuid";
 import { hasOverflow } from "../../utils/has-overflow";
 import { getActiveElement } from "../../utils/get-active-element";
 export class DropdownMenu {
-  constructor() {
-    this.focusOutListener = (event) => {
-      if (this.open &&
-        (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+    constructor() {
+        this.focusOutListener = (event) => {
+            if (this.open &&
+                (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+                this.open = false;
+            }
+        };
+        this.escape = () => {
+            this.button.focus();
+            this.open = false;
+        };
         this.open = false;
-      }
-    };
-    this.escape = () => {
-      this.button.focus();
-      this.open = false;
-    };
-    this.open = false;
-    this.dropdownAlign = "left";
-    this.dropdownOptionsOffset = 2;
-    this.checkable = false;
-    this.boundary = undefined;
-    this.placement = undefined;
-    this.strategy = "auto";
-  }
-  watchPosition() {
-    if (!this.popper) {
-      return;
-    }
-    this.popper.setOptions({
-      placement: this.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();
-  }
-  setStrategy() {
-    if (!this.popper) {
-      return;
+        this.dropdownAlign = "left";
+        this.dropdownOptionsOffset = 2;
+        this.checkable = false;
+        this.boundary = undefined;
+        this.placement = undefined;
+        this.strategy = "auto";
     }
-    if (this.strategy === "absolute" || this.strategy === "fixed") {
-      this.popper.setOptions({
-        strategy: this.strategy,
-      });
-      return;
-    }
-    let element = this.host;
-    const boundary = this.boundary || document;
-    while (element && element.parentNode !== boundary) {
-      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
-      if (element !== null && hasOverflow(element)) {
+    watchPosition() {
+        if (!this.popper) {
+            return;
+        }
         this.popper.setOptions({
-          strategy: "fixed",
+            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
         });
-        return;
-      }
     }
-    this.popper.setOptions({
-      strategy: "absolute",
-    });
-  }
-  get button() {
-    const button = this.host.querySelector('button[slot="toggle"]');
-    if (!(button instanceof HTMLButtonElement)) {
-      throw new ReferenceError("Mandatory toggle button not found");
+    watchOptionsOffset() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, this.dropdownOptionsOffset],
+                    },
+                },
+            ],
+        });
     }
-    return button;
-  }
-  tabbables(withButton) {
-    const tabbables = tabbable(this.host);
-    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
-  }
-  componentDidLoad() {
-    this.button.setAttribute("aria-haspopup", "menu");
-    this.button.setAttribute("aria-expanded", "false");
-    if (!this.button.id) {
-      this.button.id = uuidv4();
+    watchStrategy() {
+        this.setStrategy();
     }
-    const options = this.host.querySelector(".dso-dropdown-options");
-    if (!options) {
-      throw new ReferenceError("Dropdown options not found");
+    setStrategy() {
+        if (!this.popper) {
+            return;
+        }
+        if (this.strategy === "absolute" || this.strategy === "fixed") {
+            this.popper.setOptions({
+                strategy: this.strategy,
+            });
+            return;
+        }
+        let element = this.host;
+        const boundary = this.boundary || document;
+        while (element && element.parentNode !== boundary) {
+            element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+            if (element !== null && hasOverflow(element)) {
+                this.popper.setOptions({
+                    strategy: "fixed",
+                });
+                return;
+            }
+        }
+        this.popper.setOptions({
+            strategy: "absolute",
+        });
     }
-    options.setAttribute("role", "menu");
-    options.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");
-      }
+    get button() {
+        const button = this.host.querySelector('button[slot="toggle"]');
+        if (!(button instanceof HTMLButtonElement)) {
+            throw new ReferenceError("Mandatory toggle button not found");
+        }
+        return button;
     }
-    if (this.popper) {
-      return;
+    tabbables(withButton) {
+        const tabbables = tabbable(this.host);
+        return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
     }
-    const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-    if (!(dropdownOptionsElement instanceof HTMLElement)) {
-      throw new Error("dropdown options element is not instanceof HTMLElement");
+    componentDidLoad() {
+        this.button.setAttribute("aria-haspopup", "menu");
+        this.button.setAttribute("aria-expanded", "false");
+        if (!this.button.id) {
+            this.button.id = uuidv4();
+        }
+        const options = this.host.querySelector(".dso-dropdown-options");
+        if (!options) {
+            throw new ReferenceError("Dropdown options not found");
+        }
+        options.setAttribute("role", "menu");
+        options.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");
+            }
+        }
+        if (this.popper) {
+            return;
+        }
+        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
+        if (!(dropdownOptionsElement instanceof HTMLElement)) {
+            throw new Error("dropdown options element is not instanceof HTMLElement");
+        }
+        this.popper = createPopper(this.button, dropdownOptionsElement, {
+            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, this.dropdownOptionsOffset],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: {
+                        boundary: this.boundary ? document.querySelector(this.boundary) : null,
+                    },
+                    enabled: this.boundary !== undefined,
+                },
+            ],
+        });
     }
-    this.popper = createPopper(this.button, dropdownOptionsElement, {
-      placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, this.dropdownOptionsOffset],
-          },
-        },
-        {
-          name: "preventOverflow",
-          options: {
-            boundary: this.boundary ? document.querySelector(this.boundary) : null,
-          },
-          enabled: this.boundary !== undefined,
-        },
-      ],
-    });
-  }
-  componentDidRender() {
-    var _a;
-    this.setStrategy();
-    if (this.open) {
-      (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+    componentDidRender() {
+        var _a;
+        this.setStrategy();
+        if (this.open) {
+            (_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");
+                if (this.checkable) {
+                    tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
+                }
+            }
+        }
+        this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
     }
-    for (const li of Array.from(this.host.getElementsByTagName("li"))) {
-      for (const tab of tabbable(li)) {
-        tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
-        if (this.checkable) {
-          tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
+    onClick(event) {
+        const composedPath = event.composedPath();
+        if (this.isToggleButtonEvent(composedPath)) {
+            this.open = !this.open;
+        }
+        else if (this.open && this.isMenuItemEvent(composedPath)) {
+            this.open = false;
         }
-      }
     }
-    this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-  }
-  onClick(event) {
-    const composedPath = event.composedPath();
-    if (this.isToggleButtonEvent(composedPath)) {
-      this.open = !this.open;
+    isToggleButtonEvent(composedPath) {
+        return composedPath.includes(this.button);
     }
-    else if (this.open && this.isMenuItemEvent(composedPath)) {
-      this.open = false;
+    isMenuItemEvent(composedPath) {
+        return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
     }
-  }
-  isToggleButtonEvent(composedPath) {
-    return composedPath.includes(this.button);
-  }
-  isMenuItemEvent(composedPath) {
-    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  keyDownListener(event) {
-    if (event.defaultPrevented || !this.open) {
-      return;
+    disconnectedCallback() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
     }
-    switch (event.key) {
-      case "Tab":
-        if (event.shiftKey) {
-          this.tabInPopup(this.tabbables(true), -1);
+    keyDownListener(event) {
+        if (event.defaultPrevented || !this.open) {
+            return;
+        }
+        switch (event.key) {
+            case "Tab":
+                if (event.shiftKey) {
+                    this.tabInPopup(this.tabbables(true), -1);
+                }
+                else {
+                    this.tabInPopup(this.tabbables(true), 1);
+                }
+                break;
+            case "ArrowDown":
+                this.tabInPopup(this.tabbables(false), 1);
+                break;
+            case "ArrowUp":
+                this.tabInPopup(this.tabbables(false), -1);
+                break;
+            case "Escape":
+                this.escape();
+                break;
+            case " ":
+                if (event.target instanceof HTMLElement) {
+                    event.target.click();
+                }
+                break;
+            default:
+                return;
         }
-        else {
-          this.tabInPopup(this.tabbables(true), 1);
+        event.preventDefault();
+    }
+    tabInPopup(tabbables, direction) {
+        var _a;
+        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
+        let nextIndex = currentIndex + direction;
+        if (nextIndex >= tabbables.length) {
+            nextIndex = 0;
         }
-        break;
-      case "ArrowDown":
-        this.tabInPopup(this.tabbables(false), 1);
-        break;
-      case "ArrowUp":
-        this.tabInPopup(this.tabbables(false), -1);
-        break;
-      case "Escape":
-        this.escape();
-        break;
-      case " ":
-        if (event.target instanceof HTMLElement) {
-          event.target.click();
+        else if (nextIndex < 0) {
+            nextIndex = tabbables.length - 1;
         }
-        break;
-      default:
-        return;
+        (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return (h(Host, { key: '8511a4953a043ad97ce78a54e3cad085af2fbbf9', onFocusout: this.focusOutListener }, h("slot", { key: '47ad6e2194994af7b3ea7b85f4069f0fac342d7c', name: "toggle" }), h("div", { key: '6398693835335f206a6eaba54bcf318ce097d306', hidden: !this.open }, h("slot", { key: '1c6f158faeaf1666505c7251b94e657d72d8129d' }))));
     }
-    event.preventDefault();
-  }
-  tabInPopup(tabbables, direction) {
-    var _a;
-    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
-    let nextIndex = currentIndex + direction;
-    if (nextIndex >= tabbables.length) {
-      nextIndex = 0;
+    static get is() { return "dso-dropdown-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown-menu.scss"]
+        };
     }
-    else if (nextIndex < 0) {
-      nextIndex = tabbables.length - 1;
+    static get styleUrls() {
+        return {
+            "$": ["dropdown-menu.css"]
+        };
     }
-    (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  render() {
-    return (h(Host, { onFocusout: this.focusOutListener }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
-  }
-  static get is() { return "dso-dropdown-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["dropdown-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["dropdown-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the menu is open or closed.\r\nThis attribute is reflected and mutable."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "dropdownAlign": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"left\" | \"right\"",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Alignment of the dropdown"
-        },
-        "attribute": "dropdown-align",
-        "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,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the menu is checkable."
-        },
-        "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
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core",
-              "id": "../../node_modules/@popperjs/core/index.d.ts::Placement"
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is open or closed.\r\nThis attribute is reflected and mutable."
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "dropdownAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"left\" | \"right\"",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alignment of the dropdown"
+                },
+                "attribute": "dropdown-align",
+                "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,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu is checkable."
+                },
+                "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
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/@popperjs/core/index.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Force placement of dropdown.\r\n\r\nThis property overrides `dropdownAlign`."
+                },
+                "attribute": "placement",
+                "reflect": false
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"absolute\" | \"fixed\"",
+                    "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set position strategy of dropdown options"
+                },
+                "attribute": "strategy",
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Force placement of dropdown.\r\n\r\nThis property overrides `dropdownAlign`."
-        },
-        "attribute": "placement",
-        "reflect": false
-      },
-      "strategy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"auto\" | \"absolute\" | \"fixed\"",
-          "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set position strategy of dropdown options"
-        },
-        "attribute": "strategy",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "placement",
-        "methodName": "watchPosition"
-      }, {
-        "propName": "dropdownAlign",
-        "methodName": "watchPosition"
-      }, {
-        "propName": "dropdownOptionsOffset",
-        "methodName": "watchOptionsOffset"
-      }, {
-        "propName": "strategy",
-        "methodName": "watchStrategy"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "keyDownListener",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "placement",
+                "methodName": "watchPosition"
+            }, {
+                "propName": "dropdownAlign",
+                "methodName": "watchPosition"
+            }, {
+                "propName": "dropdownOptionsOffset",
+                "methodName": "watchOptionsOffset"
+            }, {
+                "propName": "strategy",
+                "methodName": "watchStrategy"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "keyDownListener",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=dropdown-menu.js.map