@duetds/components 9.2.1 → 9.2.3

package/lib/collection/components/duet-pagination/duet-pagination.js

@@ -405,6 +405,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Theme of the pagination."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -423,6 +425,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Makes the controls of pagination component disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -447,6 +451,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Variation of the paginator (compact and default supported)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -465,6 +471,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Described By id"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -483,6 +491,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Details of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -501,6 +511,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "String of id's that indicate alternative labels elements"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -519,6 +531,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Aria description the button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -543,6 +557,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Default pagination labels"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description: \"You may use arrow keys to select page number\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      select_label: \"Total pages {0}, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description: \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      select_label: \"Sivuja yhteens\u00E4 {0}, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description: \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida\",\n      pagination_label: \"Paginering, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      select_label: \"Totalt antal sidor {0}, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
             },
             "accessibleLabels": {
@@ -564,6 +580,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Default pagination labels"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelsDefaults\n  )"
             },
             "take": {
@@ -580,6 +598,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "The size of the take, when paginating."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "take",
                 "reflect": false,
                 "defaultValue": "5"
@@ -598,6 +618,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Amount of visible page numbers to show"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "visible-items",
                 "reflect": false,
                 "defaultValue": "5"
@@ -616,6 +638,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "The total size of the paginating data"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "total",
                 "reflect": false,
                 "defaultValue": "1000"
@@ -640,6 +664,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Breakpoint at which the pagination should be rendered as compact with a select element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "compact-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"x-small\""
@@ -658,6 +684,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Used to indicate which dom element with ID this element controls"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -676,6 +704,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "The current page"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current",
                 "reflect": false,
                 "defaultValue": "1"
@@ -694,6 +724,8 @@ export class DuetPagination {
                     "tags": [],
                     "text": "Array of urls that are used to create page links"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "page-links",
                 "reflect": false
             }

package/lib/collection/components/duet-paragraph/duet-paragraph.js

@@ -76,6 +76,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Theme of the paragraph."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -100,6 +102,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -124,6 +128,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Controls the size of the paragraph."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -148,6 +154,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Controls the Font-Weight of the paragraph."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "weight",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -172,6 +180,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Style variation of the paragraph."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -196,6 +206,8 @@ export class DuetParagraph {
                     "tags": [],
                     "text": "Custom color to be used for text, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""

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

@@ -53,4 +53,8 @@
 .duet-popup-menu-list.duet-theme-turva {
   color: rgb(23, 28, 58) !important;
   background: rgb(255, 255, 255);
+}
+
+::slotted(duet-notification) {
+  max-width: 360px;
 }

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { computePosition, flip, offset } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
@@ -33,8 +33,9 @@ export class DuetPopupMenu {
             }
             const middleware = [
                 offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
-                flip({ mainAxis: !this.forcePlacement }),
-            ];
+                this.allowVerticalFlip && flip(),
+                shift({ padding: 5 }),
+            ].filter(Boolean);
             const coordinates = await computePosition(this.openButton, this.menuElement, {
                 middleware,
                 placement: this.placement,
@@ -50,14 +51,44 @@ export class DuetPopupMenu {
         this.accessibleRole = "menu";
         this.theme = "";
         this.skipTeleport = undefined;
-        this.controller = 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";
     }
+    /**
+     * 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;
+        }
+        if (typeof value === "string") {
+            this.setOpenButton(document.getElementById(value));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(value);
+        }
+    }
+    /**
+     * Alias for property controller.
+     */
+    get opener() {
+        return this._controller;
+    }
+    set opener(value) {
+        this.controller = value;
+    }
     /**
      * Component lifecycle events.
      */
@@ -70,7 +101,6 @@ export class DuetPopupMenu {
         }
     }
     connectedCallback() {
-        this.handleControllerChange(this.controller, null);
         if (Build.isServer) {
             return;
         }
@@ -82,6 +112,9 @@ export class DuetPopupMenu {
         }
     }
     disconnectedCallback() {
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+        }
         if (this.openButton) {
             this.openButton.removeEventListener("click", this.openButtonEventListener);
             if (this.controllerIcon) {
@@ -155,6 +188,9 @@ export class DuetPopupMenu {
      * Hide.
      */
     async hide() {
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+        }
         this.open = false;
     }
     /**
@@ -168,20 +204,6 @@ export class DuetPopupMenu {
             this.show();
         }
     }
-    handleControllerChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (typeof this.controller === "string") {
-            this.setOpenButton(document.getElementById(this.controller));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(this.controller);
-        }
-    }
     handleOpenChange(newValue, oldValue) {
         if (!!newValue === !!oldValue) {
             return;
@@ -194,6 +216,10 @@ export class DuetPopupMenu {
                 this.teleport.makeSiblingsInert();
             }
             this.updatePlacement();
+            // Start autoUpdate when menu is open
+            if (this.menuElement && this.openButton) {
+                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+            }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
                     this.itemElements[0].setFocus();
@@ -205,6 +231,10 @@ export class DuetPopupMenu {
             if (this.openButton) {
                 this.openButton.accessibleExpanded = false;
             }
+            // Clean up autoUpdate when closed
+            if (this.autoUpdateCleanup) {
+                this.autoUpdateCleanup();
+            }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
                     this.focusOpenButton();
@@ -240,9 +270,9 @@ export class DuetPopupMenu {
             position: this.position,
             overflowY: "auto",
         };
-        return (h(Host, { key: '389d4d1b46db081d29a7fa8d57fd65f9c113f7a9' }, h("div", { key: '8d5e47a1dac1f4a7b17aed4aa69afed4cfa44a39', ref: element => {
+        return (h(Host, { key: '1573445d7c27f2e19d2ce614aba54a6af305ff86' }, h("div", { key: '15d45b18fb7164b94698327e601076a3f51b1216', ref: element => {
                 this.menuElement = element;
-            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: '09fc711a6dc838d9e345a694c5e45c09a01bf4ed' }))));
+            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: 'ea1ea99244036c122bb61dff60cb09c0b4393979' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -272,6 +302,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Adds accessible label for the menu that is only presented for users of assistive technologies.\nA popup menu should always have an accessible label that describes the popup's function."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -289,6 +321,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Accessible role."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menu\""
@@ -313,6 +347,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -334,6 +370,8 @@ export class DuetPopupMenu {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "skip-teleport",
                 "reflect": false
             },
@@ -341,9 +379,13 @@ export class DuetPopupMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent) | HTMLDuetInputElement",
+                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
                     "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
+                        "HTMLDuetInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetInputElement"
+                        },
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
@@ -357,10 +399,44 @@ export class DuetPopupMenu {
                             "location": "import",
                             "path": "../../common",
                             "id": "src/common/index.ts::OpenerComponent"
-                        },
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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",
+                "reflect": false
+            },
+            "opener": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLDuetInputElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLDuetInputElement | HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "references": {
                         "HTMLDuetInputElement": {
                             "location": "global",
                             "id": "global::HTMLDuetInputElement"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "OpenerComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::OpenerComponent"
                         }
                     }
                 },
@@ -368,9 +444,11 @@ export class DuetPopupMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Element controlling the opening and closing of the popup menu."
+                    "text": "Alias for property controller."
                 },
-                "attribute": "controller",
+                "getter": true,
+                "setter": true,
+                "attribute": "opener",
                 "reflect": false
             },
             "placement": {
@@ -387,6 +465,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Placement of the popup menu relative to its controller.\nPossible values: \"top\", \"bottom\", \"left\" and \"right\", optionally combined with \"-start\" or \"-end\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
@@ -405,10 +485,32 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Force placement."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "force-placement",
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "allowVerticalFlip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow vertical flip when there is not enough space\nbelow the controller."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "allow-vertical-flip",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "position": {
                 "type": "string",
                 "mutable": true,
@@ -423,6 +525,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Position."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "\"absolute\""
@@ -441,6 +545,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Main axis positioning offset of the popup menu relative to its controller.\nFor \"top\" and \"bottom\" placements main axis is vertical, for \"left\" and \"right\" horizontal."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "main-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
@@ -459,6 +565,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "Cross axis positioning offset of the popup menu relative to its controller.\nFor \"top\" and \"bottom\" placements cross axis is horizontal, for \"left\" and \"right\" vertical."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cross-axis-offset",
                 "reflect": false,
                 "defaultValue": "0"
@@ -477,6 +585,8 @@ export class DuetPopupMenu {
                     "tags": [],
                     "text": "By default Popup Menu adds \"action-arrow-down-small\" icon to the controller.\nThis can be removed with controller-icon=\"\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "controller-icon",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-down-small\""
@@ -589,9 +699,6 @@ export class DuetPopupMenu {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
-                "propName": "controller",
-                "methodName": "handleControllerChange"
-            }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];