@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-popup-menu-list {
@@ -27,20 +27,20 @@
   top: 0;
   left: 0;
   z-index: 950;
+  visibility: hidden !important;
   width: max-content;
   min-width: 175px;
   padding: 8px;
   margin: 0;
   color: rgb(8, 42, 77);
   list-style: none;
-  visibility: hidden !important;
   background: rgb(255, 255, 255);
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);
   opacity: 0;
-  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
   transform: scaleY(0);
   transform-origin: top center;
+  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
 }
 .duet-popup-menu-list.open {
   visibility: visible !important;
@@ -61,4 +61,12 @@
 
 ::slotted(duet-notification) {
   max-width: 360px;
+}
+
+slot {
+  --divider-margin: var(--space-x-small, 8px);
+}
+
+:host(.duet-theme-turva2) .duet-popup-menu-list.duet-theme-turva {
+  color: rgb(23, 42, 59) !important;
 }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -7,11 +7,93 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
+import { getLanguage } from "../../utils/language-utils";
 import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
     constructor() {
-        this.setOpenButton = (element) => {
+        this.filterLabel = {
+            en: "Filter menu",
+            fi: "Suodata valikkoa",
+            sv: "Filtrera meny",
+        };
+        this.filterResultCountLabel = {
+            en: "items match filter",
+            fi: "kohtaa vastaa suodatinta",
+            sv: "menyalternativ matchar filtret",
+        };
+        this.disconnectController = new AbortController();
+        this.eventListenerController = new AbortController();
+        this.open = false;
+        this.language = getLanguage();
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menu";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Placement of the popup menu relative to its controller.
+         * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        this.placement = "bottom-start";
+        /**
+         * Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute.
+         */
+        this.forcePlacement = false;
+        /**
+         * Allow vertical flip when there is not enough space
+         * below the controller.
+         */
+        this.allowVerticalFlip = true;
+        /**
+         * Position.
+         */
+        this.position = "absolute";
+        /**
+         * Main axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        this.mainAxisOffset = 0;
+        /**
+         * Cross axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        this.crossAxisOffset = 0;
+        /**
+         * By default Popup Menu adds "action-arrow-down-small" icon to the controller.
+         * This can be removed with controller-icon="".
+         */
+        this.controllerIcon = "action-arrow-down-small";
+        // duet-slideout has about the same code as this function
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.controller === "string") {
+                    element = typeof this.controller === "string" ? document.getElementById(this.controller) : undefined;
+                }
+                else {
+                    element = this.controller;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
+            if (this.eventListenerController) {
+                this.eventListenerController.abort();
+            }
             if (!element) {
+                if (this.openButton && this.controllerIcon) {
+                    this.openButton.removeAttribute("trailing-icon");
+                }
+                this.openButton = undefined;
                 return;
             }
             try {
@@ -22,8 +104,16 @@ export class DuetPopupMenu {
                     button.setAttribute("trailing-icon", "action-arrow-down-small");
                 }
                 this.openButton = button;
+                if (addClickListener && !this.disconnectController.signal.aborted) {
+                    this.eventListenerController = new AbortController();
+                    this.openButton.addEventListener("click", this.openButtonEventListener, {
+                        signal: this.eventListenerController.signal,
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
             }
-            catch (_e) { }
         };
         this.openButtonEventListener = () => {
             this.toggle();
@@ -45,49 +135,36 @@ export class DuetPopupMenu {
             this.menuY = coordinates.y;
             this.menuX = coordinates.x;
         };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-    }
-    /**
-     * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
-     * the component automatically sets the click event listener to open and close the popup-menu.
-     */
-    get controller() {
-        return this._controller;
-    }
-    set controller(value) {
-        if (this._controller === value) {
-            return;
-        }
-        this._controller = value;
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
+        this.getNonFilteredItems = () => {
+            return this.showFilterInput ? this.itemElements.filter(i => i.style.display !== "none") : this.itemElements;
+        };
+        this.filterItems = () => {
+            var _a;
+            const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
+            const items = this.itemElements;
+            items.forEach(item => {
+                var _a;
+                item.style.display =
+                    !filterText ||
+                        item.textContent.toLowerCase().includes(filterText) ||
+                        ((_a = item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterText))
+                        ? ""
+                        : "none";
+            });
+            this.filterResultCount = items.filter(i => i.style.display !== "none").length;
+        };
+        this.handleKeyDownOnFilter = (ev) => {
+            var _a;
+            if (isArrowDownKey(ev)) {
+                (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
             }
-        }
-        else {
-            this.setOpenButton(value);
-        }
+        };
     }
     /**
      * Alias for property controller.
      */
     get opener() {
-        return this._controller;
+        return this.controller;
     }
     set opener(value) {
         this.controller = value;
@@ -107,23 +184,27 @@ export class DuetPopupMenu {
         if (Build.isServer) {
             return;
         }
+        if (this.disconnectController && this.disconnectController.signal.aborted) {
+            this.disconnectController = new AbortController();
+        }
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
+        this.setOpenButton();
     }
     disconnectedCallback() {
         if (this.autoUpdateCleanup) {
             this.autoUpdateCleanup();
         }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-            if (this.controllerIcon) {
-                this.openButton.removeAttribute("trailing-icon");
-            }
+        if (this.disconnectController) {
+            this.disconnectController.abort();
         }
+        this.setOpenButton(null);
     }
     /**
      * Component event handling.
@@ -137,16 +218,17 @@ export class DuetPopupMenu {
         }
     }
     async handleKeyDown(evt) {
+        const items = this.getNonFilteredItems();
         if (this.open) {
             if (isArrowDownKey(evt)) {
                 evt.preventDefault();
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
-                    if (current < this.itemElements.length - 1) {
-                        this.itemElements[current + 1].setFocus();
+                    if (current < items.length - 1) {
+                        items[current + 1].setFocus();
                     }
                     else {
-                        this.itemElements[0].setFocus();
+                        items[0].setFocus();
                     }
                 }
             }
@@ -155,10 +237,15 @@ export class DuetPopupMenu {
                 const current = await this.getFocusedItemIndex();
                 if (current !== -1) {
                     if (current === 0) {
-                        this.itemElements[this.itemElements.length - 1].setFocus();
+                        if (this.showFilterInput) {
+                            this.filterInput.setFocus();
+                        }
+                        else {
+                            items[items.length - 1].setFocus();
+                        }
                     }
                     else {
-                        this.itemElements[current - 1].setFocus();
+                        items[current - 1].setFocus();
                     }
                 }
             }
@@ -211,6 +298,9 @@ export class DuetPopupMenu {
             return;
         }
         if (this.open && !oldValue) {
+            const autoUpdateConfig = {
+                ancestorScroll: !this.forcePlacement,
+            };
             if (this.openButton) {
                 this.openButton.accessibleExpanded = true;
             }
@@ -220,7 +310,11 @@ export class DuetPopupMenu {
             this.updatePlacement();
             // Start autoUpdate when menu is open
             if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement, autoUpdateConfig);
+            }
+            if (this.showFilterInput) {
+                this.filterInput.value = "";
+                this.filterItems();
             }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
@@ -248,20 +342,58 @@ export class DuetPopupMenu {
             }, 200);
         }
     }
+    handleControllerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    getAllPrecedingMatchingSiblings(el, selector) {
+        const prev = el.previousElementSibling;
+        if (prev) {
+            const matches = this.getAllPrecedingMatchingSiblings(prev, selector);
+            if (prev === null || prev === void 0 ? void 0 : prev.matches(selector)) {
+                matches.push(prev);
+            }
+            return matches;
+        }
+        return [];
+    }
     get popupMenuStyleHeight() {
-        if (this.itemElements.length > 0 && this.scrollLimit) {
+        var _a;
+        const selector = ":scope duet-popup-menu-item, :scope duet-notification";
+        const elements = Array.from(this.element.querySelectorAll(selector));
+        // if we have filter, elements may be hidden
+        const visibleElements = elements.filter(el => el.style.display !== "none");
+        if (visibleElements.length > 0 && this.scrollLimit) {
+            // of the visible elements, we want to show at moist scrollLimit items
+            const itemsToShow = visibleElements.slice(0, this.scrollLimit - 1);
+            // use the actual heights of the items to show
+            const itemsToShowHeight = itemsToShow.reduce((acc, cur) => acc + cur.offsetHeight, 0);
+            // include possible filter input
+            const filterHeight = ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            // include all dividers that preced the last item to show
+            // as their height with margins can not be easily captured, use magic number 17, 1px height + 2 * 8px margin
+            const lastItemToShow = itemsToShow[itemsToShow.length - 1];
+            const dividerHeight = this.getAllPrecedingMatchingSiblings(lastItemToShow, "duet-divider").length * 17;
+            // popup-menu has spaceXSmall top and bottom paddings
             const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${this.itemElements[0].offsetHeight * this.scrollLimit + paddings}px`;
+            return `${itemsToShowHeight + filterHeight + dividerHeight + paddings}px`;
         }
         else {
             return "auto";
         }
     }
     async getFocusedItemIndex() {
-        const items = this.itemElements;
+        const items = this.getNonFilteredItems();
         for (let i = 0; i < items.length; i++) {
             if (await items[i].isFocused()) {
                 return i;
@@ -277,14 +409,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '28c5e0e22a1dbbf5ee9bf81e54b75ca0c7749eae' }, h("div", { key: '0317bf8bda1b57bd2bf509bb54b34209d81f79da', ref: element => {
+        return (h(Host, { key: '40f092121b1a7e4800f12992a48513d3574f4185' }, h("div", { key: 'fbbcc13c2c870263c6cf46634626a053971b65ad', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '483a49bb29aac53e169c9b14432b8135c0e50b9d' }))));
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'd10808b1992b67c0feb373a169250f0808af57c9' }, h("duet-input", { key: 'e0c89eec0b4269134b54fd5c5f144ed9a19ec0c1', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'acc065d7b0d23d190429da1b23d104f2d00d89d3' }, h("span", { key: 'ff55e77c810c23962c39fa2d905f246917455de1', role: "status" }, `
+                  ${this.filterResultCount}/${this.itemElements.length}
+                  ${this.filterResultCountLabel[this.language]}
+                `)), h("duet-spacer", { key: 'ff316f74f001ecbf53419d7c03b8046b76e8df3b', size: "xx-small" }))), h("slot", { key: '55f860429826346eedae7ae75dfe39bedf22df74' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -302,6 +437,7 @@ export class DuetPopupMenu {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -316,11 +452,11 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "\"menu\" | \"listbox\" | \"list\"",
@@ -335,12 +471,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menu\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -361,12 +497,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "skipTeleport": {
                 "type": "boolean",
+                "attribute": "skip-teleport",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -384,14 +520,14 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "skip-teleport",
                 "reflect": false
             },
             "controller": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "controller",
+                "mutable": true,
                 "complexType": {
-                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "original": "| string\n    | HTMLDuetInputElement\n    | (HTMLElement & FocusableComponent & OpenerComponent)",
                     "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLDuetInputElement": {
@@ -420,13 +556,13 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,\nthe component automatically sets the click event listener to open and close the popup-menu."
                 },
-                "getter": true,
-                "setter": true,
-                "attribute": "controller",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "opener": {
                 "type": "string",
+                "attribute": "opener",
                 "mutable": false,
                 "complexType": {
                     "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
@@ -460,11 +596,11 @@ export class DuetPopupMenu {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "opener",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"top\"\n    | \"right\"\n    | \"bottom\"\n    | \"left\"\n    | \"top-start\"\n    | \"top-end\"\n    | \"right-start\"\n    | \"right-end\"\n    | \"bottom-start\"\n    | \"bottom-end\"\n    | \"left-start\"\n    | \"left-end\"",
@@ -479,12 +615,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
             },
             "forcePlacement": {
                 "type": "boolean",
+                "attribute": "force-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -495,16 +631,16 @@ export class DuetPopupMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Force placement."
+                    "text": "Set true to override automatic placement on scrolling out of viewport and force the placement set with attribute."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force-placement",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "allowVerticalFlip": {
                 "type": "boolean",
+                "attribute": "allow-vertical-flip",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -519,12 +655,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allow-vertical-flip",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "\"absolute\" | \"fixed\"",
@@ -539,12 +675,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"absolute\""
             },
             "mainAxisOffset": {
                 "type": "number",
+                "attribute": "main-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -559,12 +695,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "main-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "crossAxisOffset": {
                 "type": "number",
+                "attribute": "cross-axis-offset",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -579,12 +715,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "cross-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "controllerIcon": {
                 "type": "string",
+                "attribute": "controller-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -599,12 +735,12 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controller-icon",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-down-small\""
             },
             "scrollLimit": {
                 "type": "number",
+                "attribute": "scroll-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -619,7 +755,25 @@ export class DuetPopupMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scroll-limit",
+                "reflect": false
+            },
+            "showFilterInput": {
+                "type": "boolean",
+                "attribute": "show-filter-input",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show input where user can type to filter popup-menu items to those that have a match in value or text content"
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };
@@ -628,7 +782,9 @@ export class DuetPopupMenu {
         return {
             "open": {},
             "menuY": {},
-            "menuX": {}
+            "menuX": {},
+            "filterResultCount": {},
+            "language": {}
         };
     }
     static get events() {
@@ -732,6 +888,9 @@ export class DuetPopupMenu {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "controller",
+                "methodName": "handleControllerChange"
             }];
     }
     static get listeners() {