npm - @dso-toolkit/core - Versions diffs - 62.12.0 → 62.13.0 - Mend

@dso-toolkit/core 62.12.0 → 62.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/dist/collection/components/advanced-select/advanced-select.css ADDED Viewed

@@ -0,0 +1,206 @@
+:host {
+  display: block;
+}
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+.active-option {
+  display: flex;
+  inline-size: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  border: 1px solid #275937;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: #fff;
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+}
+.active-option.open {
+  border-radius: 4px 4px 0 0;
+}
+.active-option dso-icon {
+  color: #275937;
+}
+.active-option-label {
+  padding: 4px 16px;
+  overflow: hidden;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
+  white-space: nowrap;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
+  text-overflow: ellipsis;
+}
+.active-option-aside {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+}
+.badges {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4px;
+}
+.groups-container {
+  position: relative;
+}
+.groups {
+  position: absolute;
+  inset-block-start: -1px;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  max-block-size: 500px;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #275937;
+  border-radius: 0 0 4px 4px;
+}
+.groups li::marker {
+  display: none;
+}
+.group {
+  border-bottom: 1px solid #ccc;
+}
+.group:last-child {
+  border-bottom: none;
+}
+.group .option {
+  padding-left: 37px;
+}
+.group .option-label::before {
+  content: "";
+  position: absolute;
+  display: block;
+  block-size: 10px;
+  inline-size: 10px;
+  inset: 4px auto auto -20px;
+  border-radius: 50%;
+  background-color: #ccc;
+  border-color: #ccc;
+  color: #191919;
+}
+.group-label {
+  margin: 0;
+  padding: 4px 16px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 500;
+  border-bottom: 1px solid #ccc;
+}
+.group-link {
+  display: block;
+  padding: 8px 4px;
+  text-align: end;
+  color: #000;
+  text-decoration: none;
+}
+.group-link:hover {
+  text-decoration: underline;
+}
+.group-link dso-icon {
+  color: #39870c;
+}
+.group-info .option-label::before {
+  background-color: #6ca4d9;
+  border-color: #6ca4d9;
+  color: #191919;
+}
+.group-primary .option-label::before {
+  background-color: #275937;
+  border-color: #275937;
+  color: #fff;
+}
+.group-success .option-label::before {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.group-warning .option-label::before {
+  background-color: #dcd400;
+  border-color: #dcd400;
+  color: #191919;
+}
+.group-danger .option-label::before {
+  background-color: #ce3f51;
+  border-color: #ce3f51;
+  color: #fff;
+}
+.group-error .option-label::before {
+  background-color: #ce3f51;
+  border-color: #ce3f51;
+  color: #fff;
+}
+.group-attention .option-label::before {
+  background-color: #8b4a6a;
+  border-color: #8b4a6a;
+  color: #fff;
+}
+.options {
+  margin: 0;
+  padding: 0;
+}
+.option {
+  display: block;
+  inline-size: 100%;
+  padding: 8px 16px;
+  cursor: pointer;
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  text-align: left;
+  background-color: #fff;
+}
+.option:hover {
+  background-color: #ebf3e6;
+}
+.option:hover .option-label {
+  color: #39870c;
+  font-weight: bold;
+}
+.option.option-active .option-label {
+  color: #39870c;
+  font-weight: bold;
+  text-decoration: underline;
+}
+.option-label {
+  position: relative;
+  color: #000;
+  font-size: Asap, sans-serif;
+  font-weight: 400;
+}
+.option-hint {
+  padding-left: 5px;
+  color: #39870c;
+  font-size: Asap, sans-serif;
+  font-weight: bold;
+}

package/dist/collection/components/advanced-select/advanced-select.js ADDED Viewed

@@ -0,0 +1,220 @@
+import { h, Fragment, } from "@stencil/core";
+import clsx from "clsx";
+import { createFocusTrap } from "focus-trap";
+import { tabbable } from "tabbable";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class AdvancedSelect {
+  constructor() {
+    this.toggleOpen = () => {
+      this.open = !this.open;
+    };
+    this.handleOptionClick = (event, option) => {
+      this.dsoChange.emit({ originalEvent: event, option });
+      this.open = false;
+    };
+    this.handleRedirectClick = (event, redirect) => {
+      this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });
+      this.open = false;
+    };
+    this.options = [];
+    this.active = undefined;
+    this.activeHint = undefined;
+    this.open = false;
+  }
+  keyDownListener(event) {
+    if (this.open && event.key === "ArrowUp") {
+      event.preventDefault();
+      this.handleTab(-1);
+    }
+    else if (this.open && event.key === "ArrowDown") {
+      event.preventDefault();
+      this.handleTab(1);
+    }
+  }
+  componentDidRender() {
+    if (this.open && !this.trap) {
+      this.createTrap();
+    }
+    else if (!this.open && this.trap) {
+      this.removeTrap();
+    }
+  }
+  createTrap() {
+    this.trap = createFocusTrap(this.host, {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      setReturnFocus: this.toggleButtonElementRef,
+      tabbableOptions: {
+        getShadowRoot: true,
+      },
+      onDeactivate: () => {
+        this.open = false;
+      },
+    }).activate();
+  }
+  removeTrap() {
+    var _a;
+    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+    delete this.trap;
+  }
+  handleTab(direction) {
+    var _a;
+    const elements = tabbable(this.host, { getShadowRoot: true });
+    const currentIndex = elements.findIndex((e) => { var _a; return e === ((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement); });
+    let nextIndex = currentIndex + direction;
+    if (nextIndex >= elements.length) {
+      nextIndex = 0;
+    }
+    else if (nextIndex < 0) {
+      nextIndex = elements.length - 1;
+    }
+    (_a = elements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  render() {
+    var _a, _b;
+    return (h(Fragment, null, h("button", { "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h("span", { class: "active-option-label" }, (_b = (_a = this.active) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "Selecteer een optie"), h("span", { class: "active-option-aside" }, this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && (optionOrGroup === null || optionOrGroup === void 0 ? void 0 : optionOrGroup.summaryCounter)) && (h("span", { class: "badges" }, this.options
+      .filter((option) => "options" in option && "summaryCounter" in option && !!(option === null || option === void 0 ? void 0 : option.summaryCounter))
+      .map((group) => {
+      var _a;
+      return h("dso-badge", { status: (_a = group.variant) !== null && _a !== void 0 ? _a : "outline" }, group.options.length);
+    }))), h("dso-icon", { icon: "caret-down" }))), this.open && (h("div", { class: "groups-container" }, h("ul", { class: "groups" }, this.options.map((optionOrGroup) => "options" in optionOrGroup ? (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, optionOrGroup.label && h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h(OptionElement, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))), optionOrGroup.redirect && (h("a", { class: "group-link", href: optionOrGroup.redirect.href, onClick: (e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect) }, optionOrGroup.redirect.label, h("dso-icon", { icon: "chevron-right" }))))) : (h(OptionElement, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick }))))))));
+  }
+  static get is() { return "dso-advanced-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["advanced-select.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["advanced-select.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AdvancedSelectOptionOrGroup<never>[]",
+          "resolved": "AdvancedSelectOptionOrGroup<never>[]",
+          "references": {
+            "AdvancedSelectOptionOrGroup": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOptionOrGroup"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The options to display in the select."
+        },
+        "defaultValue": "[]"
+      },
+      "active": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "AdvancedSelectOption<never>",
+          "resolved": "AdvancedSelectOption<never> | undefined",
+          "references": {
+            "AdvancedSelectOption": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectOption"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The active option. By object reference."
+        }
+      },
+      "activeHint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An extra text for the active option. Only visible in the list of options."
+        },
+        "attribute": "active-hint",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoChange",
+        "name": "dsoChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user selects an option"
+        },
+        "complexType": {
+          "original": "AdvancedSelectChangeEvent<never>",
+          "resolved": "AdvancedSelectChangeEvent<never>",
+          "references": {
+            "AdvancedSelectChangeEvent": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectChangeEvent"
+            }
+          }
+        }
+      }, {
+        "method": "dsoRedirect",
+        "name": "dsoRedirect",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when user activates a group redirect link."
+        },
+        "complexType": {
+          "original": "AdvancedSelectRedirectEvent",
+          "resolved": "AdvancedSelectRedirectEvent",
+          "references": {
+            "AdvancedSelectRedirectEvent": {
+              "location": "import",
+              "path": "./advanced-select.models",
+              "id": "src/components/advanced-select/advanced-select.models.ts::AdvancedSelectRedirectEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "keyDownListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+const OptionElement = ({ option, active, activeHint, callback }) => (h("li", null, h("button", { class: clsx(["option", { "option-active": active === option }]), type: "button", onClick: (e) => callback(e, option) }, h("span", { class: "option-label" }, option.label), !!activeHint && active === option && h("span", { class: "option-hint" }, "(", activeHint, ")"))));
+//# sourceMappingURL=advanced-select.js.map

package/dist/collection/components/advanced-select/advanced-select.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"advanced-select.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Prop,\r\n h,\r\n FunctionalComponent,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n State,\r\n Fragment,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport {\r\n AdvancedSelectGroup,\r\n AdvancedSelectGroupRedirect,\r\n AdvancedSelectOption,\r\n AdvancedSelectChangeEvent,\r\n AdvancedSelectOptionOrGroup,\r\n AdvancedSelectRedirectEvent,\r\n} from \"./advanced-select.models\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { tabbable } from \"tabbable\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\n@Component({\r\n tag: \"dso-advanced-select\",\r\n styleUrl: \"advanced-select.scss\",\r\n shadow: true,\r\n})\r\nexport class AdvancedSelect implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @Element()\r\n host!: HTMLDsoAdvancedSelectElement;\r\n\r\n /**\r\n * The options to display in the select.\r\n */\r\n @Prop()\r\n options: AdvancedSelectOptionOrGroup<never>[] = [];\r\n\r\n /**\r\n * The active option. By object reference.\r\n */\r\n @Prop()\r\n active?: AdvancedSelectOption<never>;\r\n\r\n /**\r\n * An extra text for the active option. Only visible in the list of options.\r\n */\r\n @Prop()\r\n activeHint?: string;\r\n\r\n /**\r\n * The open state of the options list.\r\n */\r\n @State()\r\n open: boolean = false;\r\n\r\n /**\r\n * Emitted when user selects an option\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<AdvancedSelectChangeEvent<never>>;\r\n\r\n /**\r\n * Emitted when user activates a group redirect link.\r\n */\r\n @Event({ bubbles: false })\r\n dsoRedirect!: EventEmitter<AdvancedSelectRedirectEvent>;\r\n\r\n private toggleButtonElementRef: HTMLButtonElement | undefined;\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (this.open && event.key === \"ArrowUp\") {\r\n event.preventDefault();\r\n this.handleTab(-1);\r\n } else if (this.open && event.key === \"ArrowDown\") {\r\n event.preventDefault();\r\n this.handleTab(1);\r\n }\r\n }\r\n\r\n componentDidRender() {\r\n if (this.open && !this.trap) {\r\n this.createTrap();\r\n } else if (!this.open && this.trap) {\r\n this.removeTrap();\r\n }\r\n }\r\n\r\n private toggleOpen = () => {\r\n this.open = !this.open;\r\n };\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: true,\r\n escapeDeactivates: true,\r\n setReturnFocus: this.toggleButtonElementRef,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n onDeactivate: () => {\r\n this.open = false;\r\n },\r\n }).activate();\r\n }\r\n\r\n private removeTrap() {\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n private handleTab(direction: number) {\r\n const elements = tabbable(this.host, { getShadowRoot: true });\r\n const currentIndex = elements.findIndex((e) => e === this.host.shadowRoot?.activeElement);\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= elements.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = elements.length - 1;\r\n }\r\n\r\n elements[nextIndex]?.focus();\r\n }\r\n\r\n private handleOptionClick = (event: MouseEvent, option: AdvancedSelectOption<never>) => {\r\n this.dsoChange.emit({ originalEvent: event, option });\r\n this.open = false;\r\n };\r\n\r\n private handleRedirectClick = (event: MouseEvent, redirect: AdvancedSelectGroupRedirect) => {\r\n this.dsoRedirect.emit({ originalEvent: event, isModifiedEvent: isModifiedEvent(event), redirect });\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n aria-expanded={this.open.toString()}\r\n class={clsx([\"active-option\", { open: this.open }])}\r\n type=\"button\"\r\n onClick={this.toggleOpen}\r\n ref={(element) => (this.toggleButtonElementRef = element)}\r\n >\r\n <span class=\"active-option-label\">{this.active?.label ?? \"Selecteer een optie\"}</span>\r\n <span class=\"active-option-aside\">\r\n {this.options.some(\r\n (optionOrGroup) => \"summaryCounter\" in optionOrGroup && optionOrGroup?.summaryCounter,\r\n ) && (\r\n <span class=\"badges\">\r\n {this.options\r\n .filter(\r\n (option): option is AdvancedSelectGroup<never> =>\r\n \"options\" in option && \"summaryCounter\" in option && !!option?.summaryCounter,\r\n )\r\n .map((group) => {\r\n return <dso-badge status={group.variant ?? \"outline\"}>{group.options.length}</dso-badge>;\r\n })}\r\n </span>\r\n )}\r\n <dso-icon icon=\"caret-down\"></dso-icon>\r\n </span>\r\n </button>\r\n {this.open && (\r\n <div class=\"groups-container\">\r\n <ul class=\"groups\">\r\n {this.options.map((optionOrGroup) =>\r\n \"options\" in optionOrGroup ? (\r\n <li class={clsx([\"group\", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }])}>\r\n {optionOrGroup.label && <p class=\"group-label\">{optionOrGroup.label}</p>}\r\n <ul class=\"options\">\r\n {optionOrGroup.options.map((option) => (\r\n <OptionElement\r\n option={option}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n ))}\r\n </ul>\r\n {optionOrGroup.redirect && (\r\n <a\r\n class=\"group-link\"\r\n href={optionOrGroup.redirect.href}\r\n onClick={(e) => optionOrGroup.redirect && this.handleRedirectClick(e, optionOrGroup.redirect)}\r\n >\r\n {optionOrGroup.redirect.label}\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n )}\r\n </li>\r\n ) : (\r\n <OptionElement\r\n option={optionOrGroup}\r\n active={this.active}\r\n activeHint={this.activeHint}\r\n callback={this.handleOptionClick}\r\n />\r\n ),\r\n )}\r\n </ul>\r\n </div>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n\r\nconst OptionElement: FunctionalComponent<{\r\n option: AdvancedSelectOption<never>;\r\n active: AdvancedSelectOption<never> | undefined;\r\n activeHint: string | undefined;\r\n callback: (event: MouseEvent, value: AdvancedSelectOption<never>) => void;\r\n}> = ({ option, active, activeHint, callback }) => (\r\n <li>\r\n <button\r\n class={clsx([\"option\", { \"option-active\": active === option }])}\r\n type=\"button\"\r\n onClick={(e) => callback(e, option)}\r\n >\r\n <span class=\"option-label\">{option.label}</span>\r\n {!!activeHint && active === option && <span class=\"option-hint\">({activeHint})</span>}\r\n </button>\r\n </li>\r\n);\r\n"]}

package/dist/collection/components/advanced-select/advanced-select.models.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=advanced-select.models.js.map

package/dist/collection/components/advanced-select/advanced-select.models.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"advanced-select.models.js","sourceRoot":"","sources":["../../../../src/components/advanced-select/advanced-select.models.ts"],"names":[],"mappings":"","sourcesContent":["export type AdvancedSelectVariant = \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"attention\";\r\n\r\nexport interface AdvancedSelectOption<T> {\r\n label: string;\r\n value?: T;\r\n}\r\n\r\nexport interface AdvancedSelectGroupRedirect {\r\n label: string;\r\n href: string;\r\n}\r\n\r\nexport interface AdvancedSelectGroup<T> {\r\n label: string;\r\n summaryCounter?: boolean;\r\n redirect?: AdvancedSelectGroupRedirect;\r\n options: AdvancedSelectOption<T>[];\r\n variant?: AdvancedSelectVariant;\r\n}\r\n\r\nexport type AdvancedSelectOptionOrGroup<T> = AdvancedSelectOption<T> | AdvancedSelectGroup<T>;\r\n\r\nexport interface AdvancedSelectChangeEvent<T> {\r\n originalEvent: MouseEvent;\r\n option: AdvancedSelectOption<T>;\r\n}\r\n\r\nexport interface AdvancedSelectRedirectEvent {\r\n originalEvent: MouseEvent;\r\n isModifiedEvent: boolean;\r\n redirect: AdvancedSelectGroupRedirect;\r\n}\r\n"]}

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

@@ -2,8 +2,9 @@ import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
-import { hasOverflow } from "../../utils/has-overflow";
 import { createFocusTrap } from "focus-trap";
+import { getActiveElement } from "../../utils/get-active-element";
+import { hasOverflow } from "../../utils/has-overflow";
 export class DropdownMenu {
   constructor() {
     this.keyDownListener = (event) => {
@@ -209,20 +210,10 @@ export class DropdownMenu {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
   }
-  getActiveElement(root = document) {
-    const activeEl = root.activeElement;
-    if (!activeEl) {
-      return null;
-    }
-    if (activeEl.shadowRoot) {
-      return this.getActiveElement(activeEl.shadowRoot);
-    }
-    return activeEl;
-  }
   tabInPopup(direction) {
     var _a;
     const tabs = this.tabbables;
-    const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());
+    const currentIndex = tabs.findIndex((e) => e === getActiveElement());
     let nextIndex = currentIndex + direction;
     if (nextIndex >= tabs.length) {
       nextIndex = 0;

package/dist/collection/components/dropdown-menu/dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n private trap?: FocusTrap;\r\n /*\r\n Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n Alignment of the dropdown\r\n /\r\n @Prop()\r\n dropdownAlign: \"left\" \| \"right\" = \"left\";\r\n\r\n /\r\n Space between button and dropdown options\r\n /\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /\r\n Whether the menu is checkable.\r\n /\r\n @Prop()\r\n checkable = false;\r\n\r\n /\r\n Selector for the element the dropdown options should not be overflowing.\r\n /\r\n @Prop()\r\n boundary?: string;\r\n\r\n /\r\n Force placement of dropdown.\r\n \r\n This property overrides `dropdownAlign`.\r\n /\r\n @Prop()\r\n placement?: Placement;\r\n\r\n /\r\n Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n @Watch(\"placement\")\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: () => {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n\r\n return true;\r\n },\r\n escapeDeactivates: (event) => {\r\n if (event instanceof KeyboardEvent) {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n return true;\r\n },\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.button ?? false,\r\n initialFocus: this.button ?? false,\r\n }).activate();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.host;\r\n\r\n const boundary = this.boundary \|\| document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n get tabbables(): FocusableElement[] {\r\n return tabbable(this.host).filter((e) => e !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n this.button.addEventListener(\"click\", () => {\r\n this.open = !this.open;\r\n });\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n this.createTrap();\r\n } else {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of tabbable(li)) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n if (this.open) {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n this.tabbables.forEach((focusableElement) => {\r\n focusableElement.removeEventListener(\"click\", this.escape);\r\n if (this.open) {\r\n focusableElement.addEventListener(\"click\", this.escape);\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n this.tabInPopup(1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(-1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private getActiveElement(root: Document \| ShadowRoot = document): Element \| null {\r\n const activeEl = root.activeElement;\r\n\r\n if (!activeEl) {\r\n return null;\r\n }\r\n\r\n if (activeEl.shadowRoot) {\r\n return this.getActiveElement(activeEl.shadowRoot);\r\n }\r\n\r\n return activeEl;\r\n }\r\n\r\n private tabInPopup(direction: number) {\r\n const tabs = this.tabbables;\r\n const currentIndex = tabs.findIndex((e) => e === this.getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabs.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabs.length - 1;\r\n }\r\n\r\n tabs[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabindex={this.open ? \"-1\" : undefined}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\n\r\n@Component({\r\n tag: \"dso-dropdown-menu\",\r\n styleUrl: \"dropdown-menu.scss\",\r\n shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n private trap?: FocusTrap;\r\n /*\r\n Whether the menu is open or closed.\r\n * This attribute is reflected and mutable.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n Alignment of the dropdown\r\n /\r\n @Prop()\r\n dropdownAlign: \"left\" \| \"right\" = \"left\";\r\n\r\n /\r\n Space between button and dropdown options\r\n /\r\n @Prop()\r\n dropdownOptionsOffset = 2;\r\n\r\n /\r\n Whether the menu is checkable.\r\n /\r\n @Prop()\r\n checkable = false;\r\n\r\n /\r\n Selector for the element the dropdown options should not be overflowing.\r\n /\r\n @Prop()\r\n boundary?: string;\r\n\r\n /\r\n Force placement of dropdown.\r\n \r\n This property overrides `dropdownAlign`.\r\n /\r\n @Prop()\r\n placement?: Placement;\r\n\r\n /\r\n Set position strategy of dropdown options\r\n */\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n @Watch(\"placement\")\r\n @Watch(\"dropdownAlign\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n });\r\n }\r\n\r\n @Watch(\"dropdownOptionsOffset\")\r\n watchOptionsOffset() {\r\n this.popper?.setOptions({\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n ],\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private createTrap() {\r\n this.trap = createFocusTrap(this.host, {\r\n clickOutsideDeactivates: () => {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n\r\n return true;\r\n },\r\n escapeDeactivates: (event) => {\r\n if (event instanceof KeyboardEvent) {\r\n this.open = false;\r\n this.trap?.deactivate();\r\n delete this.trap;\r\n }\r\n\r\n return true;\r\n },\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n setReturnFocus: this.button ?? false,\r\n initialFocus: this.button ?? false,\r\n }).activate();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.host;\r\n\r\n const boundary = this.boundary \|\| document;\r\n\r\n while (element && element.parentNode !== boundary) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Element()\r\n host!: HTMLDsoDropdownMenuElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n get button(): HTMLButtonElement {\r\n const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n if (!(button instanceof HTMLButtonElement)) {\r\n throw new ReferenceError(\"Mandatory toggle button not found\");\r\n }\r\n\r\n return button;\r\n }\r\n\r\n get tabbables(): FocusableElement[] {\r\n return tabbable(this.host).filter((e) => e !== this.button);\r\n }\r\n\r\n componentDidLoad() {\r\n this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n this.button.setAttribute(\"aria-expanded\", \"false\");\r\n if (!this.button.id) {\r\n this.button.id = uuidv4();\r\n }\r\n\r\n this.button.addEventListener(\"click\", () => {\r\n this.open = !this.open;\r\n });\r\n\r\n const options = this.host.querySelector(\".dso-dropdown-options\");\r\n if (!options) {\r\n throw new ReferenceError(\"Dropdown options not found\");\r\n }\r\n\r\n options.setAttribute(\"role\", \"menu\");\r\n options.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n ul.setAttribute(\"role\", \"group\");\r\n for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n li.setAttribute(\"role\", \"none\");\r\n }\r\n }\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n }\r\n\r\n this.popper = createPopper(this.button, dropdownOptionsElement, {\r\n placement: this.placement \|\| (this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\"),\r\n modifiers: [\r\n {\r\n name: \"offset\",\r\n options: {\r\n offset: [0, this.dropdownOptionsOffset],\r\n },\r\n },\r\n {\r\n name: \"preventOverflow\",\r\n options: {\r\n boundary: this.boundary ? document.querySelector(this.boundary) : null,\r\n },\r\n enabled: this.boundary !== undefined,\r\n },\r\n ],\r\n });\r\n }\r\n\r\n componentDidRender() {\r\n this.setStrategy();\r\n if (this.open) {\r\n this.popper?.update();\r\n this.createTrap();\r\n } else {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n\r\n for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n for (const tab of tabbable(li)) {\r\n tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n if (this.checkable) {\r\n tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n }\r\n }\r\n }\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n if (this.open) {\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n this.tabbables.forEach((focusableElement) => {\r\n focusableElement.removeEventListener(\"click\", this.escape);\r\n if (this.open) {\r\n focusableElement.addEventListener(\"click\", this.escape);\r\n }\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n this.tabInPopup(1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(-1);\r\n break;\r\n\r\n case \"Escape\":\r\n this.escape();\r\n break;\r\n\r\n case \" \":\r\n if (event.target instanceof HTMLElement) {\r\n event.target.click();\r\n }\r\n\r\n break;\r\n\r\n default:\r\n return;\r\n }\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private tabInPopup(direction: number) {\r\n const tabs = this.tabbables;\r\n const currentIndex = tabs.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabs.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabs.length - 1;\r\n }\r\n\r\n tabs[nextIndex]?.focus();\r\n }\r\n\r\n private escape = () => {\r\n this.button.focus();\r\n this.open = false;\r\n };\r\n\r\n render() {\r\n return (\r\n <Host tabindex={this.open ? \"-1\" : undefined}>\r\n <slot name=\"toggle\" />\r\n <div hidden={!this.open}>\r\n <slot />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -1,28 +1,37 @@
 import { h } from "@stencil/core";
 import { v4 } from "uuid";
+import { getActiveElement } from "../../utils/get-active-element";
 export class Modal {
   constructor() {
     this.ariaId = v4();
-    this.hasFooter = undefined;
     this.fullscreen = undefined;
     this.modalTitle = undefined;
     this.role = "dialog";
+    this.returnFocus = undefined;
     this.showCloseButton = true;
   }
-  componentWillLoad() {
-    this.hasFooter = this.host.querySelector("[slot='footer']") !== null;
+  get hasFooter() {
+    return this.host.querySelector("[slot='footer']") !== null;
   }
   componentDidLoad() {
     var _a;
     if ((_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.isConnected) {
+      const activeElement = getActiveElement();
+      if (activeElement instanceof HTMLElement) {
+        this.returnFocusElement = activeElement;
+      }
       this.htmlDialogElement.showModal();
     }
     document.body.classList.add("dso-modal-open");
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b, _c;
     document.body.classList.remove("dso-modal-open");
     (_a = this.htmlDialogElement) === null || _a === void 0 ? void 0 : _a.close();
+    if (this.returnFocus === false) {
+      return;
+    }
+    (_c = ((_b = this.returnFocus) !== null && _b !== void 0 ? _b : this.returnFocusElement)) === null || _c === void 0 ? void 0 : _c.focus();
   }
   render() {
     var _a;
@@ -97,6 +106,29 @@ export class Modal {
         "reflect": false,
         "defaultValue": "\"dialog\""
       },
+      "returnFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false | HTMLElement | undefined",
+          "resolved": "HTMLElement | boolean | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The element to return focus to after the modal is closed.\r\n\r\n* `undefined` will return focus to the previously focused element (default).\r\n* `false` will not return focus to any element.\r\n* or, provide your own `HTMLElement` that will receive focus upon closing."
+        },
+        "attribute": "return-focus",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
       "showCloseButton": {
         "type": "boolean",
         "mutable": false,
@@ -119,8 +151,7 @@ export class Modal {
   }
   static get states() {
     return {
-      "ariaId": {},
-      "hasFooter": {}
+      "ariaId": {}
     };
   }
   static get events() {