@duetds/components 6.10.1 → 6.10.3

package/lib/collection/components/duet-editable-table/duet-editable-table.js

@@ -11,6 +11,7 @@ export class DuetEditableTable {
   constructor() {
     this.hasHeadSlotFirst = false;
     this.hasHeadSlotLast = false;
+    this.hasFootSlot = false;
     this.sortableDefaultLabel = {
       fi: "Järjestä",
       en: "Click to sort",
@@ -63,6 +64,7 @@ export class DuetEditableTable {
     inheritGlobalTheme(this);
     this.hasHeadSlotFirst = !!this.element.querySelector("[slot='thead-first']");
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
+    this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -160,7 +162,7 @@ export class DuetEditableTable {
         "duet-editable-table-actions": !!this.actions,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
-      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), h("tfoot", null, h("tr", null, h("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" }))))))));
+      } }, h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { role: this.accessibleRole }, h("caption", null, h("slot", { name: "tcaption" })), h("thead", null, this.hasHeadSlotFirst && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", null, h("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { name: "thead-last" }))))), h("tbody", null, this.renderTableBody()), this.hasFootSlot && (h("tfoot", null, h("tr", null, h("td", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { name: "tfoot" })))))))));
   }
   static get is() { return "duet-editable-table"; }
   static get encapsulation() { return "scoped"; }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -241,6 +241,13 @@ export class DuetNumberInput {
   async setFocus(options) {
     this.duetInputElement.setFocus(options);
   }
+  /**
+   * Returns a promise which resolves to the current input numeric value.
+   */
+  async getValueAsNumber() {
+    const currentValue = SafeParseFloat(this.value, this.locale);
+    return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
+  }
   clearValue() {
     this.value = null;
     this.duetInputElement.value = "";
@@ -1085,6 +1092,22 @@ export class DuetNumberInput {
           "text": "Sets focus on the specified `duet-number-input`. Use this method instead of the global\n`input.focus()`.",
           "tags": []
         }
+      },
+      "getValueAsNumber": {
+        "complexType": {
+          "signature": "() => Promise<number>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<number>"
+        },
+        "docs": {
+          "text": "Returns a promise which resolves to the current input numeric value.",
+          "tags": []
+        }
       }
     };
   }

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

@@ -0,0 +1,50 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.duet-popup-menu-list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 950;
+  width: max-content;
+  min-width: 175px;
+  padding: 0;
+  padding: 1rem 0;
+  margin: 0;
+  color: rgb(0, 41, 77);
+  list-style: none;
+  visibility: hidden !important;
+  background: rgb(243, 249, 252);
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+  opacity: 0;
+  transition: transform 300ms ease, visibility 300ms ease, opacity 300ms ease;
+  transform: scaleY(0);
+  transform-origin: top center;
+}
+.duet-popup-menu-list.open {
+  visibility: visible !important;
+  opacity: 1;
+  transform: scaleY(1);
+}

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

@@ -0,0 +1,317 @@
+/*!
+ * Built with Duet Design System
+ */
+import { computePosition, flip, offset } from "@floating-ui/dom";
+import { Build, h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+export class DuetPopupMenu {
+  constructor() {
+    this.updatePlacement = async () => {
+      if (!this.controller) {
+        return;
+      }
+      const position = await computePosition(this.controller, this.element, {
+        middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
+        placement: this.placement,
+        strategy: "fixed",
+      });
+      this.menuY = position.y;
+      this.menuX = position.x;
+    };
+    this.open = false;
+    this.menuY = undefined;
+    this.menuX = undefined;
+    this.accessibleLabel = undefined;
+    this.theme = "";
+    this.controller = undefined;
+    this.placement = "bottom-start";
+    this.mainAxisOffset = 0;
+    this.crossAxisOffset = 0;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    if (!Build.isServer) {
+      this.updatePlacement();
+    }
+  }
+  /**
+   * Component event handling.
+   */
+  handleKeyUp(evt) {
+    if (this.open) {
+      // When Esc is pressed the modal should be closed
+      if (isEscapeKey(evt)) {
+        this.hide();
+      }
+    }
+  }
+  handleClick(evt) {
+    const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.controller);
+    if (this.open && isClickOutside) {
+      this.hide();
+    }
+  }
+  /**
+   * isOpen.
+   */
+  async isOpen() {
+    return this.open;
+  }
+  /**
+   * Show.
+   */
+  async show() {
+    this.open = true;
+    this.updatePlacement();
+  }
+  /**
+   * Hide.
+   */
+  async hide() {
+    this.open = false;
+  }
+  /**
+   * Toggle.
+   */
+  async toggle() {
+    if (this.open) {
+      this.hide();
+    }
+    else {
+      this.show();
+    }
+  }
+  render() {
+    const positionStyles = {
+      top: `${this.menuY}px`,
+      left: `${this.menuX}px`,
+    };
+    return (h(Host, null, h("div", { style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true }, role: "menu", "aria-label": this.accessibleLabel }, h("slot", null))));
+  }
+  static get is() { return "duet-popup-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-popup-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-popup-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "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."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "controller": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Element controlling the opening and closing of the popup menu."
+        }
+      },
+      "placement": {
+        "type": "string",
+        "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\"",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of the popup menu relative to its controller.\nPossible values: \"top\", \"bottom\", \"left\" and \"right\", optionally combined with \"-start\" or \"-end\"."
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "\"bottom-start\""
+      },
+      "mainAxisOffset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "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."
+        },
+        "attribute": "main-axis-offset",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "crossAxisOffset": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "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."
+        },
+        "attribute": "cross-axis-offset",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "menuY": {},
+      "menuX": {}
+    };
+  }
+  static get methods() {
+    return {
+      "isOpen": {
+        "complexType": {
+          "signature": "() => Promise<boolean>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<boolean>"
+        },
+        "docs": {
+          "text": "isOpen.",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show.",
+          "tags": []
+        }
+      },
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hide.",
+          "tags": []
+        }
+      },
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggle.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get listeners() {
+    return [{
+        "name": "keyup",
+        "method": "handleKeyUp",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "handleClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,69 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.duet-popup-menu-item {
+  display: flex;
+  flex-grow: 1;
+  gap: 8px;
+  align-items: center;
+  height: 100%;
+  padding: 8px 20px;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(0, 41, 77);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+.duet-popup-menu-item:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+}
+.duet-popup-menu-item:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+}
+.duet-popup-menu-item.active, .duet-popup-menu-item.active:hover {
+  color: rgb(255, 255, 255);
+  background: rgb(0, 119, 179);
+}
+.duet-popup-menu-item.active.duet-theme-turva, .duet-popup-menu-item.active:hover.duet-theme-turva {
+  color: rgb(255, 255, 255);
+  background: rgb(198, 12, 48);
+}
+.duet-popup-menu-item:hover {
+  background: rgb(230, 242, 248);
+}
+.duet-popup-menu-item:hover.duet-theme-turva {
+  background: rgb(228, 228, 230);
+}
+.duet-popup-menu-item .duet-popup-menu-item-label {
+  flex-grow: 1;
+}