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

@dso-toolkit/core 62.13.0 → 62.15.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 (155) hide show

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createFocusTrap, t as tabbable } from './focus-trap.esm.js';
-import { g as getActiveElement } from './get-active-element.js';
+import { t as tabbable } from './index.esm.js';
 import { h as hasOverflow, c as createPopper } from './has-overflow.js';
+import { g as getActiveElement } from './get-active-element.js';
 import { v as v4 } from './v4.js';
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
@@ -11,29 +11,13 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.keyDownListener = (event) => {
-      if (event.defaultPrevented) {
+    this.focusOutListener = (event) => {
+      if (!(event.relatedTarget instanceof HTMLElement)) {
         return;
       }
-      switch (event.key) {
-        case "ArrowDown":
-          this.tabInPopup(1);
-          break;
-        case "ArrowUp":
-          this.tabInPopup(-1);
-          break;
-        case "Escape":
-          this.escape();
-          break;
-        case " ":
-          if (event.target instanceof HTMLElement) {
-            event.target.click();
-          }
-          break;
-        default:
-          return;
+      if (!this.tabbables(true).includes(event.relatedTarget)) {
+        this.open = false;
       }
-      event.preventDefault();
     };
     this.escape = () => {
       this.button.focus();
@@ -71,32 +55,6 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
   watchStrategy() {
     this.setStrategy();
   }
-  createTrap() {
-    var _a, _b;
-    this.trap = createFocusTrap(this.host, {
-      clickOutsideDeactivates: () => {
-        var _a;
-        this.open = false;
-        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-        delete this.trap;
-        return true;
-      },
-      escapeDeactivates: (event) => {
-        var _a;
-        if (event instanceof KeyboardEvent) {
-          this.open = false;
-          (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-          delete this.trap;
-        }
-        return true;
-      },
-      tabbableOptions: {
-        getShadowRoot: true,
-      },
-      setReturnFocus: (_a = this.button) !== null && _a !== void 0 ? _a : false,
-      initialFocus: (_b = this.button) !== null && _b !== void 0 ? _b : false,
-    }).activate();
-  }
   setStrategy() {
     if (!this.popper) {
       return;
@@ -129,8 +87,9 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     }
     return button;
   }
-  get tabbables() {
-    return tabbable(this.host).filter((e) => e !== this.button);
+  tabbables(withButton) {
+    const tabbables = tabbable(this.host);
+    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
   }
   componentDidLoad() {
     this.button.setAttribute("aria-haspopup", "menu");
@@ -180,15 +139,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     });
   }
   componentDidRender() {
-    var _a, _b;
+    var _a;
     this.setStrategy();
     if (this.open) {
       (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
-      this.createTrap();
-    }
-    else {
-      (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
-      delete this.trap;
     }
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
@@ -198,37 +152,66 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
         }
       }
     }
-    this.host.removeEventListener("keydown", this.keyDownListener);
     this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-    if (this.open) {
-      this.host.addEventListener("keydown", this.keyDownListener);
+  }
+  onClick(event) {
+    if (!(event.target instanceof HTMLElement)) {
+      return;
+    }
+    if (this.open && (!this.host.contains(event.target) || this.tabbables(false).includes(event.target))) {
+      this.open = false;
     }
-    this.tabbables.forEach((focusableElement) => {
-      focusableElement.removeEventListener("click", this.escape);
-      if (this.open) {
-        focusableElement.addEventListener("click", this.escape);
-      }
-    });
   }
   disconnectedCallback() {
     var _a;
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
   }
-  tabInPopup(direction) {
+  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;
+    }
+    event.preventDefault();
+  }
+  tabInPopup(tabbables, direction) {
     var _a;
-    const tabs = this.tabbables;
-    const currentIndex = tabs.findIndex((e) => e === getActiveElement());
+    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
     let nextIndex = currentIndex + direction;
-    if (nextIndex >= tabs.length) {
+    if (nextIndex >= tabbables.length) {
       nextIndex = 0;
     }
     else if (nextIndex < 0) {
-      nextIndex = tabs.length - 1;
+      nextIndex = tabbables.length - 1;
     }
-    (_a = tabs[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (h(Host, { tabindex: this.open ? "-1" : undefined }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
+    return (h(Host, { onFocusout: this.focusOutListener }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -246,7 +229,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
     "boundary": [1],
     "placement": [1],
     "strategy": [1]
-  }, undefined, {
+  }, [[8, "click", "onClick"], [8, "keydown", "keyDownListener"]], {
     "placement": ["watchPosition"],
     "dropdownAlign": ["watchPosition"],
     "dropdownOptionsOffset": ["watchOptionsOffset"],

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

	@@ -1 +1 @@
1	- {"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","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"],"version":3}
1	+ {"file":"dropdown-menu.js","mappings":"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","names":["uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n outline: none;\r\n}\r\n\r\n:host {\r\n @include dropdown-menu.root();\r\n}\r\n","import { createPopper, Placement, Instance as PopperInstance } from \"@popperjs/core\";\r\nimport { h, Component, Element, Host, Prop, Watch, Listen } 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 { getActiveElement } from \"../../utils/get-active-element\";\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 /*\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 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 private tabbables(withButton: boolean): FocusableElement[] {\r\n const tabbables = tabbable(this.host);\r\n\r\n return withButton ? tabbables : tabbables.filter((element) => element !== 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 }\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.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n }\r\n\r\n @Listen(\"click\", { target: \"window\" })\r\n onClick(event: MouseEvent) {\r\n if (!(event.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n if (this.open && (!this.host.contains(event.target) \|\| this.tabbables(false).includes(event.target))) {\r\n this.open = false;\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popper?.destroy();\r\n }\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!(event.relatedTarget instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n if (!this.tabbables(true).includes(event.relatedTarget)) {\r\n this.open = false;\r\n }\r\n };\r\n\r\n @Listen(\"keydown\", { target: \"window\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.defaultPrevented \|\| !this.open) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"Tab\":\r\n if (event.shiftKey) {\r\n this.tabInPopup(this.tabbables(true), -1);\r\n } else {\r\n this.tabInPopup(this.tabbables(true), 1);\r\n }\r\n\r\n break;\r\n case \"ArrowDown\":\r\n this.tabInPopup(this.tabbables(false), 1);\r\n break;\r\n\r\n case \"ArrowUp\":\r\n this.tabInPopup(this.tabbables(false), -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(tabbables: FocusableElement[], direction: number) {\r\n const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n let nextIndex = currentIndex + direction;\r\n if (nextIndex >= tabbables.length) {\r\n nextIndex = 0;\r\n } else if (nextIndex < 0) {\r\n nextIndex = tabbables.length - 1;\r\n }\r\n\r\n tabbables[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 onFocusout={this.focusOutListener}>\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"],"version":3}

package/dist/components/dso-advanced-select.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
-import { c as createFocusTrap, t as tabbable } from './focus-trap.esm.js';
+import { c as createFocusTrap } from './focus-trap.esm.js';
+import { t as tabbable } from './index.esm.js';
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './badge.js';
 import { d as defineCustomElement$2 } from './icon.js';

package/dist/components/dso-advanced-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-advanced-select.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden /\r\n white-space: nowrap;\r\n / stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden /\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$horizontal-padding 0.5;\r\n padding: 0 advanced-select.$horizontal-padding * 0.5;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$vertical-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-bottom: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .option {\r\n padding-left: advanced-select.$horizontal-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset: advanced-select.$vertical-padding auto auto -#{advanced-select.$option-dot-size * 2};\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-bottom: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding: advanced-select.$group-link-horizontal-padding advanced-select.$group-link-vertical-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: left;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-left: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n","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"],"version":3}
1	+ {"file":"dso-advanced-select.js","mappings":"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","names":[],"sources":["src/components/advanced-select/advanced-select.scss?tag=dso-advanced-select&encapsulation=shadow","src/components/advanced-select/advanced-select.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/components/advanced-select\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.active-option {\r\n display: flex;\r\n inline-size: 100%;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 0;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: advanced-select.$border-radius;\r\n cursor: pointer;\r\n background-color: advanced-select.$bg-color;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n\r\n &.open {\r\n border-radius: advanced-select.$border-radius advanced-select.$border-radius 0 0;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$icon-color;\r\n }\r\n}\r\n\r\n.active-option-label {\r\n padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n overflow: hidden;\r\n /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden /\r\n white-space: nowrap;\r\n / stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden /\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.active-option-aside {\r\n display: flex;\r\n align-items: center;\r\n gap: advanced-select.$horizontal-padding 0.5;\r\n padding: 0 advanced-select.$horizontal-padding * 0.5;\r\n}\r\n\r\n.badges {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: advanced-select.$vertical-padding;\r\n}\r\n\r\n.groups-container {\r\n position: relative;\r\n}\r\n\r\n.groups {\r\n position: absolute;\r\n inset-block-start: -1px;\r\n inset-inline-start: 0;\r\n inline-size: 100%;\r\n max-block-size: 500px;\r\n margin: 0;\r\n padding: 0;\r\n overflow-y: auto;\r\n background-color: advanced-select.$bg-color;\r\n border: 1px solid advanced-select.$border-color;\r\n border-radius: 0 0 advanced-select.$border-radius advanced-select.$border-radius;\r\n\r\n li {\r\n &::marker {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n.group {\r\n border-bottom: 1px solid advanced-select.$hr-color;\r\n\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .option {\r\n padding-left: advanced-select.$horizontal-padding * 2 + advanced-select.$option-dot-size * 0.5;\r\n }\r\n\r\n .option-label::before {\r\n content: \"\";\r\n position: absolute;\r\n display: block;\r\n block-size: advanced-select.$option-dot-size;\r\n inline-size: advanced-select.$option-dot-size;\r\n inset: advanced-select.$vertical-padding auto auto -#{advanced-select.$option-dot-size * 2};\r\n border-radius: 50%;\r\n @include set-colors.apply(advanced-select.$default-variant-color, $icons: false, $links: false);\r\n }\r\n}\r\n\r\n.group-label {\r\n margin: 0;\r\n padding: advanced-select.$vertical-padding advanced-select.$horizontal-padding;\r\n color: advanced-select.$group-label-color;\r\n font-size: advanced-select.$group-label-font-size;\r\n font-weight: advanced-select.$group-label-font-weight;\r\n border-bottom: 1px solid advanced-select.$hr-color;\r\n}\r\n\r\n.group-link {\r\n display: block;\r\n padding: advanced-select.$group-link-horizontal-padding advanced-select.$group-link-vertical-padding;\r\n text-align: end;\r\n color: advanced-select.$group-link-color;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n dso-icon {\r\n color: advanced-select.$redirect-icon-color;\r\n }\r\n}\r\n\r\n.group-info .option-label::before {\r\n @include set-colors.apply(advanced-select.$info-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-primary .option-label::before {\r\n @include set-colors.apply(advanced-select.$primary-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-success .option-label::before {\r\n @include set-colors.apply(advanced-select.$success-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-warning .option-label::before {\r\n @include set-colors.apply(advanced-select.$warning-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-danger .option-label::before {\r\n @include set-colors.apply(advanced-select.$danger-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-error .option-label::before {\r\n @include set-colors.apply(advanced-select.$error-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.group-attention .option-label::before {\r\n @include set-colors.apply(advanced-select.$attention-variant-color, $icons: false, $links: false);\r\n}\r\n\r\n.options {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.option {\r\n display: block;\r\n inline-size: 100%;\r\n padding: advanced-select.$vertical-padding * 2 advanced-select.$horizontal-padding;\r\n cursor: pointer;\r\n line-height: inherit;\r\n font-family: inherit;\r\n font-size: inherit;\r\n border: none;\r\n text-align: left;\r\n background-color: advanced-select.$bg-color;\r\n\r\n &:hover {\r\n background-color: advanced-select.$option-hover-bg-color;\r\n\r\n .option-label {\r\n color: advanced-select.$option-hover-color;\r\n font-weight: advanced-select.$option-hover-font-weight;\r\n }\r\n }\r\n}\r\n\r\n.option.option-active .option-label {\r\n color: advanced-select.$option-active-color;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n text-decoration: underline;\r\n}\r\n\r\n.option-label {\r\n position: relative;\r\n color: advanced-select.$option-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-font-weight;\r\n}\r\n\r\n.option-hint {\r\n padding-left: 5px;\r\n color: advanced-select.$option-active-color;\r\n font-size: advanced-select.$option-font-size;\r\n font-weight: advanced-select.$option-active-font-weight;\r\n}\r\n","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"],"version":3}

package/dist/components/dso-autosuggest.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { d as debounce_1 } from './index2.js';
+import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './progress-indicator.js';
 import { v as v4 } from './v4.js';
@@ -296,13 +297,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["dso-autosuggest", "dso-progress-indicator"];
+  const components = ["dso-autosuggest", "dso-icon", "dso-progress-indicator"];
   components.forEach(tagName => { switch (tagName) {
     case "dso-autosuggest":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Autosuggest);
       }
       break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
     case "dso-progress-indicator":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/dso-autosuggest.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-autosuggest.js","mappings":"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","names":["debounce"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[\|\\\\{}()[\\]^$+?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n background-clip: padding-box;\r\n background-color: core-autosuggest-variables.$background-color;\r\n border: 1px solid core-autosuggest-variables.$border-color;\r\n border-radius: scaffolding.$border-radius-base;\r\n box-shadow: core-autosuggest-variables.$box-shadow;\r\n list-style-type: none;\r\n margin-top: 2px;\r\n padding: units.$u1 0.5 0;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 100%;\r\n z-index: zindex.$autosuggest;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n padding: units.$u1 * 1.5 units.$u1;\r\n}\r\n\r\nul {\r\n padding: units.$u1 0;\r\n\r\n li {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: units.$u1 * 0.5 units.$u2;\r\n }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n cursor: pointer;\r\n background-color: colors.$grasgroen;\r\n\r\n &,\r\n .type {\r\n color: colors.$wit;\r\n }\r\n}\r\n\r\nmark {\r\n font-weight: 700;\r\n background-color: inherit;\r\n color: inherit;\r\n padding: 0;\r\n}\r\n\r\n.type {\r\n color: colors.$grijs-60;\r\n}\r\n","import { Component, Element, h, Listen, Prop, State, Fragment, Event, EventEmitter, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { Suggestion } from \"./autosuggest.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-autosuggest\",\r\n styleUrl: \"autosuggest.scss\",\r\n scoped: true,\r\n})\r\nexport class Autosuggest {\r\n /*\r\n The suggestions for the value of the slotted input element. Optionally a\r\n * Suggestion can have a `type` and `item`.\r\n \r\n The `type` is used to style the suggestion. `item` can be use to reference\r\n * the original object that was used to create the suggestion.\r\n \r\n The value should be null when no suggestions have been fetched.\r\n /\r\n @Prop()\r\n readonly suggestions: Suggestion[] \| null = null;\r\n\r\n /\r\n Shows progress indicator when fetching results.\r\n /\r\n @Prop()\r\n loading = false;\r\n\r\n /\r\n To override progress indicator's default loading label.\r\n /\r\n @Prop()\r\n loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n /\r\n To delay progress indicator showing (in ms).\r\n /\r\n @Prop()\r\n loadingDelayed?: number;\r\n\r\n /\r\n To show text when no results are found.\r\n /\r\n @Prop()\r\n notFoundLabel?: string;\r\n\r\n /\r\n Whether the previous suggestions will be presented when the input gets focus again.\r\n /\r\n @Prop()\r\n suggestOnFocus = false;\r\n\r\n /\r\n Emitted when a suggestion is selected.\r\n * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n /\r\n @Event()\r\n dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n /\r\n This is emitted debounced for every change for the slotted input type=text element.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<string>;\r\n\r\n /\r\n Emitted when enter is pressed.\r\n * The `detail` property of the `CustomEvent` will contain the input text.\r\n */\r\n @Event()\r\n dsoSearch!: EventEmitter<string>;\r\n\r\n @Element()\r\n host!: HTMLDsoAutosuggestElement;\r\n\r\n @State()\r\n showSuggestions = false;\r\n\r\n @State()\r\n selectedSuggestion: Suggestion \| undefined;\r\n\r\n @State()\r\n notFound = false;\r\n\r\n @State()\r\n showLoading = false;\r\n\r\n @Watch(\"suggestions\")\r\n suggestionsWatcher() {\r\n this.resetSelectedSuggestion();\r\n\r\n if ((!this.showSuggestions \|\| !this.notFound) && this.inputValue) {\r\n this.openSuggestions();\r\n } else if ((this.showSuggestions \|\| this.notFound) && !this.inputValue) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n private input?: HTMLInputElement;\r\n\r\n private listbox: HTMLUListElement \| undefined;\r\n\r\n private listboxId: string = v4();\r\n\r\n private inputId: string = v4();\r\n\r\n private labelId: string = v4();\r\n\r\n private debouncedEmitValue = debounce((value: string) => {\r\n this.dsoChange.emit(value);\r\n this.debouncedShowLoading();\r\n }, 200);\r\n\r\n private debouncedShowLoading = debounce(() => {\r\n if (this.inputValue) {\r\n this.showLoading = true;\r\n }\r\n }, this.loadingDelayed);\r\n\r\n private inputValue = \"\";\r\n\r\n private onInput = (event: Event) => {\r\n if (!(event.target instanceof HTMLInputElement)) {\r\n return;\r\n // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n }\r\n\r\n this.showLoading = !this.loadingDelayed;\r\n this.inputValue = event.target.value;\r\n this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n };\r\n\r\n private onFocusIn = () => {\r\n if (this.suggestOnFocus) {\r\n this.openSuggestions();\r\n }\r\n };\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n onDocumentClick(event: MouseEvent) {\r\n if (\r\n (this.showSuggestions \|\| this.notFound) &&\r\n this.listbox &&\r\n event.target instanceof Node &&\r\n !this.listbox.contains(event.target) &&\r\n this.input !== event.target\r\n ) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n setTimeout(() => {\r\n const input = this.host.querySelector('input[type=\"text\"]');\r\n if (!(input instanceof HTMLInputElement)) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n }\r\n\r\n this.input = input;\r\n if (input.id) {\r\n this.inputId = input.id;\r\n } else {\r\n input.id = this.inputId;\r\n }\r\n\r\n if (!this.input.labels \|\| this.input.labels.length < 1) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n }\r\n\r\n const label = this.input.labels[0];\r\n if (label?.id) {\r\n this.labelId = label.id;\r\n } else if (label) {\r\n label.id = this.labelId;\r\n }\r\n\r\n this.input.setAttribute(\"role\", \"combobox\");\r\n this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n this.input.setAttribute(\"aria-expanded\", \"false\");\r\n this.input.setAttribute(\"autocomplete\", \"off\");\r\n this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n this.input.addEventListener(\"input\", this.onInput);\r\n this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.input?.removeEventListener(\"input\", this.onInput);\r\n this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n }\r\n\r\n private markTerms(suggestionValue: string, terms: string[]): (VNode \| string)[] {\r\n if (!suggestionValue \|\| !terms \|\| terms.length === 0 \|\| terms[0] === undefined) {\r\n return [\"\"];\r\n }\r\n\r\n const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n return suggestionValue.split(termRegex).map((valuePart: string) => {\r\n if (!valuePart) {\r\n return \"\";\r\n }\r\n\r\n if (termRegex.test(valuePart)) {\r\n return <mark>{valuePart}</mark>;\r\n }\r\n\r\n if (terms.length === 1) {\r\n return <span>{valuePart}</span>;\r\n }\r\n\r\n return this.markTerms(valuePart, terms.slice(1));\r\n });\r\n }\r\n\r\n private selectSuggestion(suggestion: Suggestion) {\r\n this.selectedSuggestion = suggestion;\r\n\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(suggestion));\r\n }\r\n\r\n private selectFirstSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[0];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectLastSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectNextSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectPreviousSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private resetSelectedSuggestion() {\r\n this.showLoading = !this.loadingDelayed;\r\n this.notFound = false;\r\n this.selectedSuggestion = undefined;\r\n this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n }\r\n\r\n private openSuggestions(selectSuggestion?: \"first\" \| \"last\") {\r\n this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n this.notFound = this.suggestions?.length === 0 ?? false;\r\n this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions \|\| this.notFound).toString());\r\n\r\n if (this.showSuggestions && selectSuggestion === \"first\") {\r\n this.selectFirstSuggestion();\r\n } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n this.selectLastSuggestion();\r\n }\r\n }\r\n\r\n private closeSuggestions() {\r\n this.showSuggestions = false;\r\n this.notFound = false;\r\n this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n this.selectFirstSuggestion();\r\n }\r\n\r\n private pickSelectedValue() {\r\n if (this.selectedSuggestion && this.showSuggestions) {\r\n this.dsoSelect.emit(this.selectedSuggestion);\r\n } else {\r\n this.dsoSearch.emit(this.input?.value);\r\n }\r\n\r\n this.closeSuggestions();\r\n }\r\n\r\n private onKeyDown = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented \|\| this.loading) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"first\");\r\n } else {\r\n this.selectNextSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"ArrowUp\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"last\");\r\n } else {\r\n this.selectPreviousSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"Tab\":\r\n this.closeSuggestions();\r\n return;\r\n\r\n case \"Escape\":\r\n this.closeSuggestions();\r\n break;\r\n\r\n case \"Enter\":\r\n this.pickSelectedValue();\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 listboxItemId(suggestion: Suggestion): string {\r\n if (!this.suggestions) {\r\n return \"\";\r\n }\r\n return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n }\r\n\r\n render() {\r\n const terms = this.input?.value.split(\" \").filter((t) => t) ?? [];\r\n\r\n return (\r\n <>\r\n <slot />\r\n {this.loading && this.showLoading ? (\r\n <div class=\"autosuggest-progress-box\">\r\n <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n </div>\r\n ) : (\r\n <ul\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n id={this.listboxId}\r\n aria-labelledby={this.labelId}\r\n ref={(element) => (this.listbox = element)}\r\n hidden={!this.showSuggestions && !this.notFound}\r\n >\r\n {(this.showSuggestions &&\r\n this.suggestions &&\r\n this.suggestions.map((suggestion) => (\r\n <li\r\n role=\"option\"\r\n id={this.listboxItemId(suggestion)}\r\n key={suggestion.value}\r\n onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n onMouseLeave={() => this.resetSelectedSuggestion()}\r\n onClick={() => this.pickSelectedValue()}\r\n aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n aria-label={suggestion.value}\r\n >\r\n <span class=\"value\">{this.markTerms(suggestion.value, terms)}</span>\r\n {suggestion.type ? <span class=\"type\">{suggestion.type}</span> : undefined}\r\n </li>\r\n ))) \|\|\r\n (this.notFound && (\r\n <li>\r\n <span class=\"value\">\r\n {!this.notFoundLabel ? (\r\n this.markTerms(`${this.inputValue} is niet gevonden.`, terms)\r\n ) : (\r\n <span>{this.notFoundLabel}</span>\r\n )}\r\n </span>\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-autosuggest.js","mappings":"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","names":["debounce"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[\|\\\\{}()[\\]^$+?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n display: block;\r\n position: relative;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n background-clip: padding-box;\r\n background-color: core-autosuggest-variables.$background-color;\r\n border: 1px solid core-autosuggest-variables.$border-color;\r\n border-radius: scaffolding.$border-radius-base;\r\n box-shadow: core-autosuggest-variables.$box-shadow;\r\n list-style-type: none;\r\n margin-top: 2px;\r\n padding: units.$u1 0.5 0;\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n top: 100%;\r\n z-index: zindex.$autosuggest;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n padding: units.$u1 * 1.5 units.$u1;\r\n}\r\n\r\nul {\r\n padding: units.$u1 0;\r\n\r\n li {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: units.$u1 * 0.5 units.$u2;\r\n }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n cursor: pointer;\r\n background-color: colors.$grasgroen;\r\n\r\n &,\r\n .type {\r\n color: colors.$wit;\r\n }\r\n}\r\n\r\nmark {\r\n font-weight: 700;\r\n background-color: inherit;\r\n color: inherit;\r\n padding: 0;\r\n}\r\n\r\n.type {\r\n color: colors.$grijs-60;\r\n}\r\n","import { Component, Element, h, Listen, Prop, State, Fragment, Event, EventEmitter, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { Suggestion } from \"./autosuggest.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-autosuggest\",\r\n styleUrl: \"autosuggest.scss\",\r\n scoped: true,\r\n})\r\nexport class Autosuggest {\r\n /*\r\n The suggestions for the value of the slotted input element. Optionally a\r\n * Suggestion can have a `type` and `item`.\r\n \r\n The `type` is used to style the suggestion. `item` can be use to reference\r\n * the original object that was used to create the suggestion.\r\n \r\n The value should be null when no suggestions have been fetched.\r\n /\r\n @Prop()\r\n readonly suggestions: Suggestion[] \| null = null;\r\n\r\n /\r\n Shows progress indicator when fetching results.\r\n /\r\n @Prop()\r\n loading = false;\r\n\r\n /\r\n To override progress indicator's default loading label.\r\n /\r\n @Prop()\r\n loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n /\r\n To delay progress indicator showing (in ms).\r\n /\r\n @Prop()\r\n loadingDelayed?: number;\r\n\r\n /\r\n To show text when no results are found.\r\n /\r\n @Prop()\r\n notFoundLabel?: string;\r\n\r\n /\r\n Whether the previous suggestions will be presented when the input gets focus again.\r\n /\r\n @Prop()\r\n suggestOnFocus = false;\r\n\r\n /\r\n Emitted when a suggestion is selected.\r\n * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n /\r\n @Event()\r\n dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n /\r\n This is emitted debounced for every change for the slotted input type=text element.\r\n /\r\n @Event()\r\n dsoChange!: EventEmitter<string>;\r\n\r\n /\r\n Emitted when enter is pressed.\r\n * The `detail` property of the `CustomEvent` will contain the input text.\r\n */\r\n @Event()\r\n dsoSearch!: EventEmitter<string>;\r\n\r\n @Element()\r\n host!: HTMLDsoAutosuggestElement;\r\n\r\n @State()\r\n showSuggestions = false;\r\n\r\n @State()\r\n selectedSuggestion: Suggestion \| undefined;\r\n\r\n @State()\r\n notFound = false;\r\n\r\n @State()\r\n showLoading = false;\r\n\r\n @Watch(\"suggestions\")\r\n suggestionsWatcher() {\r\n this.resetSelectedSuggestion();\r\n\r\n if ((!this.showSuggestions \|\| !this.notFound) && this.inputValue) {\r\n this.openSuggestions();\r\n } else if ((this.showSuggestions \|\| this.notFound) && !this.inputValue) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n private input?: HTMLInputElement;\r\n\r\n private listbox: HTMLUListElement \| undefined;\r\n\r\n private listboxId: string = v4();\r\n\r\n private inputId: string = v4();\r\n\r\n private labelId: string = v4();\r\n\r\n private debouncedEmitValue = debounce((value: string) => {\r\n this.dsoChange.emit(value);\r\n this.debouncedShowLoading();\r\n }, 200);\r\n\r\n private debouncedShowLoading = debounce(() => {\r\n if (this.inputValue) {\r\n this.showLoading = true;\r\n }\r\n }, this.loadingDelayed);\r\n\r\n private inputValue = \"\";\r\n\r\n private onInput = (event: Event) => {\r\n if (!(event.target instanceof HTMLInputElement)) {\r\n return;\r\n // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n }\r\n\r\n this.showLoading = !this.loadingDelayed;\r\n this.inputValue = event.target.value;\r\n this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n };\r\n\r\n private onFocusIn = () => {\r\n if (this.suggestOnFocus) {\r\n this.openSuggestions();\r\n }\r\n };\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n onDocumentClick(event: MouseEvent) {\r\n if (\r\n (this.showSuggestions \|\| this.notFound) &&\r\n this.listbox &&\r\n event.target instanceof Node &&\r\n !this.listbox.contains(event.target) &&\r\n this.input !== event.target\r\n ) {\r\n this.closeSuggestions();\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n setTimeout(() => {\r\n const input = this.host.querySelector('input[type=\"text\"]');\r\n if (!(input instanceof HTMLInputElement)) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n }\r\n\r\n this.input = input;\r\n if (input.id) {\r\n this.inputId = input.id;\r\n } else {\r\n input.id = this.inputId;\r\n }\r\n\r\n if (!this.input.labels \|\| this.input.labels.length < 1) {\r\n return;\r\n // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n }\r\n\r\n const label = this.input.labels[0];\r\n if (label?.id) {\r\n this.labelId = label.id;\r\n } else if (label) {\r\n label.id = this.labelId;\r\n }\r\n\r\n this.input.setAttribute(\"role\", \"combobox\");\r\n this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n this.input.setAttribute(\"aria-expanded\", \"false\");\r\n this.input.setAttribute(\"autocomplete\", \"off\");\r\n this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n this.input.addEventListener(\"input\", this.onInput);\r\n this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n this.input?.removeEventListener(\"input\", this.onInput);\r\n this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n }\r\n\r\n private markTerms(suggestionValue: string, terms: string[]): (VNode \| string)[] {\r\n if (!suggestionValue \|\| !terms \|\| terms.length === 0 \|\| terms[0] === undefined) {\r\n return [\"\"];\r\n }\r\n\r\n const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n return suggestionValue.split(termRegex).map((valuePart: string) => {\r\n if (!valuePart) {\r\n return \"\";\r\n }\r\n\r\n if (termRegex.test(valuePart)) {\r\n return <mark>{valuePart}</mark>;\r\n }\r\n\r\n if (terms.length === 1) {\r\n return <span>{valuePart}</span>;\r\n }\r\n\r\n return this.markTerms(valuePart, terms.slice(1));\r\n });\r\n }\r\n\r\n private selectSuggestion(suggestion: Suggestion) {\r\n this.selectedSuggestion = suggestion;\r\n\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(suggestion));\r\n }\r\n\r\n private selectFirstSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[0];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectLastSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectNextSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private selectPreviousSuggestion() {\r\n if (!this.suggestions) {\r\n return;\r\n }\r\n\r\n const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n if (this.selectedSuggestion) {\r\n this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n }\r\n }\r\n\r\n private resetSelectedSuggestion() {\r\n this.showLoading = !this.loadingDelayed;\r\n this.notFound = false;\r\n this.selectedSuggestion = undefined;\r\n this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n }\r\n\r\n private openSuggestions(selectSuggestion?: \"first\" \| \"last\") {\r\n this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n this.notFound = this.suggestions?.length === 0 ?? false;\r\n this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions \|\| this.notFound).toString());\r\n\r\n if (this.showSuggestions && selectSuggestion === \"first\") {\r\n this.selectFirstSuggestion();\r\n } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n this.selectLastSuggestion();\r\n }\r\n }\r\n\r\n private closeSuggestions() {\r\n this.showSuggestions = false;\r\n this.notFound = false;\r\n this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n this.selectFirstSuggestion();\r\n }\r\n\r\n private pickSelectedValue() {\r\n if (this.selectedSuggestion && this.showSuggestions) {\r\n this.dsoSelect.emit(this.selectedSuggestion);\r\n } else {\r\n this.dsoSearch.emit(this.input?.value);\r\n }\r\n\r\n this.closeSuggestions();\r\n }\r\n\r\n private onKeyDown = (event: KeyboardEvent) => {\r\n if (event.defaultPrevented \|\| this.loading) {\r\n return;\r\n }\r\n\r\n switch (event.key) {\r\n case \"ArrowDown\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"first\");\r\n } else {\r\n this.selectNextSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"ArrowUp\":\r\n if (!this.showSuggestions) {\r\n this.openSuggestions(\"last\");\r\n } else {\r\n this.selectPreviousSuggestion();\r\n }\r\n\r\n break;\r\n\r\n case \"Tab\":\r\n this.closeSuggestions();\r\n return;\r\n\r\n case \"Escape\":\r\n this.closeSuggestions();\r\n break;\r\n\r\n case \"Enter\":\r\n this.pickSelectedValue();\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 listboxItemId(suggestion: Suggestion): string {\r\n if (!this.suggestions) {\r\n return \"\";\r\n }\r\n return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n }\r\n\r\n render() {\r\n const terms = this.input?.value.split(\" \").filter((t) => t) ?? [];\r\n\r\n return (\r\n <>\r\n <slot />\r\n {this.loading && this.showLoading ? (\r\n <div class=\"autosuggest-progress-box\">\r\n <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n </div>\r\n ) : (\r\n <ul\r\n role=\"listbox\"\r\n aria-live=\"polite\"\r\n id={this.listboxId}\r\n aria-labelledby={this.labelId}\r\n ref={(element) => (this.listbox = element)}\r\n hidden={!this.showSuggestions && !this.notFound}\r\n >\r\n {(this.showSuggestions &&\r\n this.suggestions &&\r\n this.suggestions.map((suggestion) => (\r\n <li\r\n role=\"option\"\r\n id={this.listboxItemId(suggestion)}\r\n key={suggestion.value}\r\n onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n onMouseLeave={() => this.resetSelectedSuggestion()}\r\n onClick={() => this.pickSelectedValue()}\r\n aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n aria-label={suggestion.value}\r\n >\r\n <span class=\"value\">{this.markTerms(suggestion.value, terms)}</span>\r\n {suggestion.type ? <span class=\"type\">{suggestion.type}</span> : undefined}\r\n </li>\r\n ))) \|\|\r\n (this.notFound && (\r\n <li>\r\n <span class=\"value\">\r\n {!this.notFoundLabel ? (\r\n this.markTerms(`${this.inputValue} is niet gevonden.`, terms)\r\n ) : (\r\n <span>{this.notFoundLabel}</span>\r\n )}\r\n </span>\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-input-range.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface DsoInputRange extends Components.DsoInputRange, HTMLElement {}
+export const DsoInputRange: {
+  prototype: DsoInputRange;
+  new (): DsoInputRange;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-input-range.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+const inputRangeCss = ":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";
+const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoChange = createEvent(this, "dsoChange", 3);
+    this.min = undefined;
+    this.max = undefined;
+    this.value = undefined;
+    this.step = undefined;
+    this.label = undefined;
+    this.unit = "";
+    this.description = undefined;
+  }
+  render() {
+    const min = this.min || 0;
+    const max = this.max || 100;
+    const step = this.step || 1;
+    return (h(Fragment, null, this.description && (h("span", { id: "description", hidden: true }, this.description)), h("span", { class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        originalEvent: event,
+        value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
+        max,
+        min,
+        step,
+      }) }), h("span", { class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+  }
+  get host() { return this; }
+  static get style() { return inputRangeCss; }
+}, [1, "dso-input-range", {
+    "min": [2],
+    "max": [2],
+    "value": [2],
+    "step": [2],
+    "label": [1],
+    "unit": [1],
+    "description": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-input-range"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-input-range":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InputRange);
+      }
+      break;
+  } });
+}
+const DsoInputRange = InputRange;
+const defineCustomElement = defineCustomElement$1;
+export { DsoInputRange, defineCustomElement };
+//# sourceMappingURL=dso-input-range.js.map

package/dist/components/dso-input-range.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0nCAA0nC;;MCQnoC,UAAU;;;;;;;;;;;gBAmCN,EAAE;;;EAiBjB,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;IAE5B,QACE,kBACG,IAAI,CAAC,WAAW,KACf,YAAM,EAAE,EAAC,aAAa,EAAC,MAAM,UAC1B,IAAI,CAAC,WAAW,CACZ,CACR,EACD,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,KAAK,sBACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;QAC9F,GAAG;QACH,GAAG;QACH,IAAI;OACL,CAAC,GAEJ,EACF,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN,EACH;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n\r\n padding: 0.5rem;\r\n\r\n inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n flex-shrink: 0;\r\n\r\n min-inline-size: 5ch;\r\n\r\n &.min {\r\n text-align: end;\r\n }\r\n\r\n &.max {\r\n text-align: start;\r\n }\r\n}\r\n\r\n.input {\r\n flex-grow: 1;\r\n\r\n appearance: none;\r\n\r\n background-color: transparent;\r\n\r\n cursor: pointer;\r\n\r\n &::-webkit-slider-runnable-track {\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-webkit-slider-thumb {\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.55rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-radius: 50%;\r\n }\r\n\r\n &::-moz-range-track {\r\n box-sizing: border-box;\r\n\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-moz-range-thumb {\r\n box-sizing: border-box;\r\n\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.5rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-color: transparent;\r\n border-radius: 50%;\r\n }\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-input-range\",\r\n styleUrl: \"input-range.scss\",\r\n shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n /**\r\n * The minimum value of the range.\r\n */\r\n @Prop()\r\n min?: number;\r\n\r\n /**\r\n * The maximum value of the range.\r\n */\r\n @Prop()\r\n max?: number;\r\n\r\n /**\r\n * The value of the range.\r\n */\r\n @Prop()\r\n value?: number;\r\n\r\n /**\r\n * The step to increment the value by.\r\n */\r\n @Prop()\r\n step?: number;\r\n\r\n /**\r\n * The label of the range.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The unit of the range.\r\n */\r\n @Prop()\r\n unit: string = \"\";\r\n\r\n /**\r\n * The description of the range.\r\n */\r\n @Prop()\r\n description?: string;\r\n\r\n /**\r\n * Emitted when the value has changed.\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoInputRangeElement;\r\n\r\n render() {\r\n const min = this.min || 0;\r\n const max = this.max || 100;\r\n const step = this.step || 1;\r\n\r\n return (\r\n <>\r\n {this.description && (\r\n \r\n {this.description}\r\n \r\n )}\r\n \r\n {min}\r\n {this.unit}\r\n \r\n <input\r\n type=\"range\"\r\n min={this.min}\r\n max={this.max}\r\n value={this.value}\r\n class=\"input\"\r\n aria-label={this.label}\r\n aria-describedby={this.description ? \"description\" : undefined}\r\n onChange={(event) =>\r\n this.dsoChange.emit({\r\n originalEvent: event,\r\n value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n max,\r\n min,\r\n step,\r\n })\r\n }\r\n />\r\n \r\n {max}\r\n {this.unit}\r\n \r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-pagination.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './responsive-element.js';
-const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
   constructor() {