@duetds/components 6.2.5 → 6.2.6

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -5,23 +5,30 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarDropdown {
   constructor() {
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetMenuBarDropdownEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-menu-bar-dropdown",
-      });
+    this.onClick = () => {
+      this.open = !this.open;
     };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
+    this.getVariant = () => {
+      const slot = this.element.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "right";
+        case "right":
+          return "right";
+        default:
+          return "right";
+      }
     };
     this.theme = "";
     this.open = false;
     this.icon = undefined;
   }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -33,7 +40,12 @@ export class DuetMenuBarDropdown {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("div", { class: { "duet-menu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (h(Host, null, h("div", { class: {
+        "duet-menu-bar-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+        [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
+      } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
       }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
@@ -115,27 +127,14 @@ export class DuetMenuBarDropdown {
       }
     };
   }
-  static get events() {
+  static get elementRef() { return "element"; }
+  static get listeners() {
     return [{
-        "method": "duetMenuBarDropdownEvent",
-        "name": "duetMenuBarDropdownEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when the dropdown has been opened. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-        },
-        "complexType": {
-          "original": "DuetMenuBarDropdownEventDetails",
-          "resolved": "{ originalEvent: Event; data: { element: HTMLElement; open: boolean; }; component: \"duet-menu-bar-dropdown\"; }",
-          "references": {
-            "DuetMenuBarDropdownEventDetails": {
-              "location": "local"
-            }
-          }
-        }
+        "name": "click",
+        "method": "handleFocus",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
-  static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -44,9 +44,17 @@
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #171c3a;
 }
-.duet-menu-bar-dropdown-link:hover {
+.duet-menu-bar-dropdown-link--slot-right:hover {
   background: #e6f2f8;
 }
-.duet-menu-bar-dropdown-link:hover.duet-theme-turva {
+.duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
+  background: #e4e4e6;
+}
+.duet-menu-bar-dropdown-link--slot-below:hover {
+  color: #004d80;
+  background: #f3f9fc;
+}
+.duet-menu-bar-dropdown-link--slot-below:hover.duet-theme-turva {
+  color: #940925;
   background: #e4e4e6;
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js

@@ -5,9 +5,21 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarDropdownLink {
   constructor() {
+    this.getVariant = () => {
+      const slot = this.element.parentElement.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "right";
+        case "right":
+          return "right";
+        default:
+          return "right";
+      }
+    };
     this.theme = "";
     this.href = "#";
     this.icon = undefined;
+    this.caret = false;
   }
   /**
    * Component lifecycle events.
@@ -22,6 +34,7 @@ export class DuetMenuBarDropdownLink {
   render() {
     return (h(Host, null, h("a", { class: {
         "duet-menu-bar-dropdown-link": true,
+        [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
         "duet-theme-turva": this.theme === "turva",
       }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("slot", null))));
   }
@@ -97,6 +110,24 @@ export class DuetMenuBarDropdownLink {
         "attribute": "icon",
         "reflect": true,
         "defaultValue": "undefined"
+      },
+      "caret": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caret"
+        },
+        "attribute": "caret",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.css

@@ -32,10 +32,6 @@
   height: 100%;
   padding: 0 12px;
   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: #004d80;
   text-align: center;
   text-decoration: none;
 }
@@ -49,13 +45,57 @@
     padding: 0 28px;
   }
 }
-.duet-menu-bar-link.duet-theme-turva {
+.duet-menu-bar-link.active {
+  color: #0077b3;
+}
+.duet-theme-turva .duet-menu-bar-link.active {
+  color: #c60c30;
+}
+.duet-menu-bar-link.active::after {
+  position: absolute;
+  top: auto;
+  bottom: 2px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  content: "";
+  background: #0077b3;
+  transition: 300ms ease;
+  transform: translateY(2px);
+}
+.duet-menu-bar-link--slot-center {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #00294d;
+}
+.duet-menu-bar-link--slot-center.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #940925;
+}
+.duet-menu-bar-link--slot-center.active.duet-theme-turva::after {
+  background: #c60c30;
+}
+.duet-menu-bar-link--slot-center:hover {
+  color: #0077b3;
+}
+.duet-menu-bar-link--slot-center:hover.duet-theme-turva {
+  color: #c60c30;
+}
+.duet-menu-bar-link--slot-right {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #004d80;
+}
+.duet-menu-bar-link--slot-right.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #940925;
 }
-.duet-menu-bar-link:hover {
+.duet-menu-bar-link--slot-right:hover {
   color: #0077b3;
 }
-.duet-menu-bar-link:hover.duet-theme-turva {
+.duet-menu-bar-link--slot-right:hover.duet-theme-turva {
   color: #c60c30;
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -5,7 +5,21 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarLink {
   constructor() {
+    this.getVariant = () => {
+      const slot = this.element.parentElement.getAttribute("slot");
+      switch (slot) {
+        case "center":
+          return "center";
+        case "right":
+          return "right";
+        case "below":
+          return "below";
+        default:
+          return "center";
+      }
+    };
     this.theme = "";
+    this.active = false;
     this.href = "#";
     this.icon = undefined;
   }
@@ -20,7 +34,12 @@ export class DuetMenuBarLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("a", { class: { "duet-menu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href }, this.icon && h("duet-icon", { size: "x-small", name: this.icon, margin: "none" }), h("slot", null))));
+    return (h(Host, null, h("a", { class: {
+        "duet-menu-bar-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [`duet-menu-bar-link--slot-${this.getVariant()}`]: true,
+      }, href: this.href }, this.icon && h("duet-icon", { size: "x-small", name: this.icon, margin: "none" }), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -59,6 +78,24 @@ export class DuetMenuBarLink {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "href": {
         "type": "string",
         "mutable": true,

package/lib/collection/components/duet-nav/duet-nav.css

@@ -21,4 +21,9 @@
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
+}
+
+nav {
+  max-width: 1440px;
+  margin: 0 auto;
 }

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

@@ -5,36 +5,6 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBar {
   constructor() {
-    this.getToolbarDropdowns = () => this.element.querySelectorAll("duet-toolbar-dropdown");
-    this.getMenuBarMenus = () => this.element.querySelectorAll("duet-menu-bar-menu");
-    this.getActiveMenu = () => this.element.querySelector("duet-menu-bar-menu[active]");
-    this.getActiveTool = () => this.element.querySelector("duet-toolbar-link[active],duet-toolbar-dropdown[active]");
-    this.getMenuBarMenuDropdowns = () => this.element.querySelectorAll("duet-menu-bar-menu-dropdown");
-    this.getMenuBarDropdowns = () => this.element.querySelectorAll("duet-menu-bar-dropdown");
-    this.toggleActiveMenu = (active) => {
-      const activeMenu = this.getActiveMenu();
-      if (activeMenu) {
-        activeMenu.setAttribute("active", active ? "true" : "false");
-      }
-    };
-    this.toggleActiveTool = (active) => {
-      const activeTool = this.getActiveTool();
-      if (activeTool) {
-        activeTool.setAttribute("active", active ? "true" : "false");
-      }
-    };
-    this.close = (elementGetter, elementToKeepOpen) => {
-      elementGetter().forEach(element => {
-        if (elementToKeepOpen) {
-          if (element !== elementToKeepOpen) {
-            element.setAttribute("open", "false");
-          }
-        }
-        else {
-          element.setAttribute("open", "false");
-        }
-      });
-    };
     this.theme = "";
   }
   /**
@@ -43,54 +13,6 @@ export class DuetMenuBar {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  handleToolbarDropdownEvent(e) {
-    if (e.detail.data.element) {
-      if (e.detail.data.open) {
-        this.close(this.getMenuBarMenus);
-        this.close(this.getToolbarDropdowns, e.detail.data.element);
-        this.close(this.getMenuBarMenuDropdowns);
-        this.close(this.getMenuBarDropdowns);
-      }
-      this.toggleActiveMenu(true);
-      this.toggleActiveTool(!e.detail.data.open);
-    }
-  }
-  handleMenuEvent(e) {
-    if (e.detail.data.element) {
-      if (e.detail.data.open) {
-        this.close(this.getMenuBarMenus, e.detail.data.element);
-        this.close(this.getToolbarDropdowns);
-        this.close(this.getMenuBarMenuDropdowns);
-        this.close(this.getMenuBarDropdowns);
-      }
-      this.toggleActiveMenu(!e.detail.data.open);
-      this.toggleActiveTool(true);
-    }
-  }
-  handleMenuDropdownEvent(e) {
-    if (e.detail.data.element && e.detail.data.open) {
-      this.close(this.getMenuBarMenuDropdowns, e.detail.data.element);
-      this.close(this.getMenuBarDropdowns);
-    }
-  }
-  handleDropdownEvent(e) {
-    if (e.detail.data.element && e.detail.data.open) {
-      this.close(this.getMenuBarDropdowns, e.detail.data.element);
-      this.close(this.getToolbarDropdowns);
-      this.close(this.getMenuBarMenus);
-      this.close(this.getMenuBarMenuDropdowns);
-    }
-    this.toggleActiveMenu(!e.detail.data.open);
-    this.toggleActiveTool(true);
-  }
-  handleFocus() {
-    this.toggleActiveMenu(true);
-    this.toggleActiveTool(true);
-    this.close(this.getToolbarDropdowns);
-    this.close(this.getMenuBarMenus);
-    this.close(this.getMenuBarMenuDropdowns);
-    this.close(this.getMenuBarDropdowns);
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -138,43 +60,4 @@ export class DuetMenuBar {
     };
   }
   static get elementRef() { return "element"; }
-  static get listeners() {
-    return [{
-        "name": "duetToolbarDropdownEvent",
-        "method": "handleToolbarDropdownEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "duetMenuBarMenuEvent",
-        "method": "handleMenuEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "duetMenuBarMenuDropdownEvent",
-        "method": "handleMenuDropdownEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "duetMenuBarDropdownEvent",
-        "method": "handleDropdownEvent",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "handleFocus",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focus",
-        "method": "handleFocus",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -0,0 +1,37 @@
+*,
+*::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;
+  width: 100%;
+}
+
+.duet-submenu-bar {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f9fc;
+  border-bottom: 1px solid #cde5f1;
+}
+.duet-submenu-bar.duet-theme-turva {
+  background: #f5f5f7;
+  border-bottom: 1px solid #e4e4e6;
+}

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -0,0 +1,63 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetSubmenuBar {
+  constructor() {
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("slot", null))));
+  }
+  static get is() { return "duet-submenu-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-submenu-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-submenu-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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": "\"\""
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/{duet-menu-bar-menu-dropdown/duet-menu-bar-menu-dropdown.css → duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css}

@@ -23,11 +23,11 @@
   height: 100%;
 }
 
-.duet-menu-bar-menu-dropdown {
+.duet-submenu-bar-dropdown {
   position: relative;
   height: 100%;
 }
-.duet-menu-bar-menu-dropdown button {
+.duet-submenu-bar-dropdown button {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -35,7 +35,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 0.75rem 0 1.5rem;
+  padding: 12px 1.5rem;
   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: 600;
@@ -45,23 +45,33 @@
   text-decoration: none;
   cursor: pointer;
 }
-.duet-menu-bar-menu-dropdown button .label {
+.duet-submenu-bar-dropdown button .label {
   display: flex;
   gap: 5px;
   align-items: center;
   justify-content: center;
 }
-.duet-menu-bar-menu-dropdown button:hover {
+.duet-submenu-bar-dropdown button .caret {
+  position: absolute;
+  right: 12px;
+}
+.duet-submenu-bar-dropdown button:hover {
   color: #004d80;
   background: #e6f2f8;
 }
-.duet-menu-bar-menu-dropdown button.active {
+.duet-submenu-bar-dropdown button:hover.active {
+  color: #0077b3;
+}
+.duet-submenu-bar-dropdown button.active {
   color: #0077b3;
 }
-.duet-menu-bar-menu-dropdown button.active .caret {
+.duet-submenu-bar-dropdown button.active .caret {
   transform: rotate(180deg);
 }
-.duet-menu-bar-menu-dropdown button.active::after {
+.duet-theme-turva .duet-submenu-bar-dropdown button.active {
+  color: #c60c30;
+}
+.duet-submenu-bar-dropdown button.active::after {
   position: absolute;
   top: auto;
   bottom: 2px;
@@ -74,40 +84,40 @@
   transition: 300ms ease;
   transform: translateY(2px);
 }
-.duet-theme-turva .duet-menu-bar-menu-dropdown button.active::after {
+.duet-theme-turva .duet-submenu-bar-dropdown button.active::after {
   background: #c60c30;
 }
-.duet-menu-bar-menu-dropdown .items {
+.duet-submenu-bar-dropdown .items {
   position: absolute;
   top: 101%;
+  z-index: 600;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  width: auto;
   min-width: 320px;
   color: #00294d;
   background: white;
   border-radius: 0 0 4px 4px;
   box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
 }
-.duet-menu-bar-menu-dropdown .items.hidden {
+.duet-submenu-bar-dropdown .items.hidden {
   display: none;
 }
-.duet-menu-bar-menu-dropdown.duet-theme-turva button {
+.duet-submenu-bar-dropdown.duet-theme-turva button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #171c3a;
 }
-.duet-menu-bar-menu-dropdown.duet-theme-turva button:hover {
+.duet-submenu-bar-dropdown.duet-theme-turva button:hover {
   color: #940925;
   background: #e4e4e6;
 }
-.duet-menu-bar-menu-dropdown.duet-theme-turva button.active {
+.duet-submenu-bar-dropdown.duet-theme-turva button.active {
   color: #c60c30;
 }
-.duet-menu-bar-menu-dropdown.duet-theme-turva button.active::after {
+.duet-submenu-bar-dropdown.duet-theme-turva button.active::after {
   background: #c60c30;
 }
-.duet-menu-bar-menu-dropdown.duet-theme-turva .items {
+.duet-submenu-bar-dropdown.duet-theme-turva .items {
   background: #f5f5f7;
 }