@duetds/components 6.10.2 → 6.10.4

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

@@ -0,0 +1,57 @@
+*,
+*::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: absolute;
+  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);
+}
+.duet-popup-menu-list.fixed {
+  position: fixed;
+}
+.duet-popup-menu-list.duet-theme-turva {
+  color: rgb(23, 28, 58) !important;
+  background: rgb(245, 245, 247);
+}

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

@@ -0,0 +1,361 @@
+/*!
+ * 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 coordinates = await computePosition(this.controller, this.element, {
+        middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
+        placement: this.placement,
+        strategy: this.position,
+      });
+      this.menuY = coordinates.y;
+      this.menuX = coordinates.x;
+    };
+    this.open = false;
+    this.menuY = undefined;
+    this.menuX = undefined;
+    this.accessibleLabel = undefined;
+    this.theme = "";
+    this.controller = undefined;
+    this.placement = "bottom-start";
+    this.position = "absolute";
+    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.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+    this.updatePlacement();
+  }
+  /**
+   * Hide.
+   */
+  async hide() {
+    this.open = false;
+    this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
+  }
+  /**
+   * 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, { class: this.position }, h("div", { style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, 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\""
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "position",
+        "reflect": false,
+        "defaultValue": "\"absolute\""
+      },
+      "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 events() {
+    return [{
+        "method": "duetToggle",
+        "name": "duetToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the popup menu is opened or closed."
+        },
+        "complexType": {
+          "original": "DuetPopupMenuEvent",
+          "resolved": "{ open: boolean; component: \"duet-popup-menu\"; }",
+          "references": {
+            "DuetPopupMenuEvent": {
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx"
+            }
+          }
+        }
+      }];
+  }
+  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;
+}