@duetds/components 6.2.11 → 6.3.0

package/lib/collection/collection-manifest.json

@@ -36,6 +36,7 @@
     "./components/duet-range-slider/duet-range-slider.js",
     "./components/duet-range-stepper/duet-range-stepper.js",
     "./components/duet-select/duet-select.js",
+    "./components/duet-slideout/duet-slideout.js",
     "./components/duet-spacer/duet-spacer.js",
     "./components/duet-spinner/duet-spinner.js",
     "./components/duet-step/duet-step.js",
@@ -64,6 +65,12 @@
     "./components/duet-radio-group/duet-radio-group.js",
     "./components/duet-scrollable/duet-scrollable.js",
     "./components/duet-section-layout/duet-section-layout.js",
+    "./components/duet-slideout-lang/duet-slideout-lang.js",
+    "./components/duet-slideout-link/duet-slideout-link.js",
+    "./components/duet-slideout-panel/duet-slideout-panel.js",
+    "./components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js",
+    "./components/duet-slideout-panel-dropdown-link/duet-slideout-panel-dropdown-link.js",
+    "./components/duet-slideout-panel-link/duet-slideout-panel-link.js",
     "./components/duet-submenu-bar/duet-submenu-bar.js",
     "./components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js",
     "./components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js",

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

@@ -28,8 +28,77 @@
   align-items: center;
   justify-content: center;
   background: white;
-  border-top: 1px solid #e1e3e6;
-  box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar {
+    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
+  }
+}
+.duet-menu-bar .top {
+  display: none;
+}
+.duet-menu-bar .bottom {
+  display: none;
+}
+.duet-menu-bar.horizontal-nav {
+  position: relative;
+}
+.duet-menu-bar.horizontal-nav .top {
+  position: absolute;
+  top: 0;
+  left: 3.5%;
+  display: block;
+  width: 93%;
+  height: 1px;
+  background: #f5f8fa;
+}
+.duet-menu-bar.horizontal-nav .bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: #e1e3e6;
+}
+.duet-menu-bar.horizontal-nav .more-left {
+  position: absolute;
+  top: 0;
+  left: -1px;
+  z-index: 1;
+  width: 36px;
+  height: 49px;
+  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar.horizontal-nav .more-left {
+    display: none;
+  }
+}
+.duet-menu-bar.horizontal-nav .more-right {
+  position: absolute;
+  top: 0;
+  right: -1px;
+  z-index: 1;
+  width: 36px;
+  height: 49px;
+  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar.horizontal-nav .more-right {
+    display: none;
+  }
+}
+@media (pointer: fine) {
+  .duet-menu-bar.horizontal-nav {
+    display: none;
+  }
+}
+@media (pointer: fine) and ((min-width: 62em)) {
+  .duet-menu-bar.horizontal-nav {
+    display: flex;
+  }
 }
 .duet-menu-bar .container {
   display: flex;
@@ -38,12 +107,20 @@
   width: 100%;
   max-width: 1440px;
   height: 100%;
-  height: 5rem;
+  height: 3.25rem;
   padding: 0 8px 0 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.duet-menu-bar .container::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
-@media ((min-width: 62em)) {
+@media (min-width: 62em) {
   .duet-menu-bar .container {
+    height: 5rem;
     padding: 0 28px;
+    overflow-x: visible;
   }
 }
 .duet-menu-bar .container > * {

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 /**
  * @slot center - Slot for content in center.
@@ -18,6 +18,16 @@ export class DuetMenuBar {
       window.matchMedia(media_query_xx_large.replace(/'/g, "")),
     ];
     this.boundMqlFunctions = [];
+    this.scrollbarCheck = () => {
+      this.leftMoreVisible = this.container.scrollLeft > 0;
+      this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
+    };
+    this.scrollToActive = () => {
+      const active = this.element.querySelector("[active]");
+      if (active) {
+        active.scrollIntoView({ inline: "center" });
+      }
+    };
     this.changeLogoSize = () => {
       if (this.mql[1].matches) {
         this.logoSize = "large";
@@ -27,7 +37,10 @@ export class DuetMenuBar {
       }
     };
     this.logoSize = "large";
+    this.leftMoreVisible = false;
+    this.rightMoreVisible = false;
     this.theme = "";
+    this.logo = true;
     this.logoHref = undefined;
   }
   /**
@@ -56,12 +69,27 @@ export class DuetMenuBar {
     }
     this.boundMqlFunctions = [];
   }
+  componentDidLoad() {
+    if (Build.isServer || Build.isTesting) {
+      return;
+    }
+    setTimeout(() => {
+      this.scrollbarCheck();
+      this.scrollToActive();
+    }, 0);
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("div", { class: "container" }, h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref }), h("slot", { name: "center" }), h("slot", { name: "right" })))));
+    const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
+    const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
+    return (h(Host, null, h("div", { class: {
+        "duet-menu-bar": true,
+        "duet-theme-turva": this.theme === "turva",
+        "horizontal-nav": isUsedAsAdditionalHorizontalNav,
+      }, role: "menubar" }, h("div", { class: "top" }), h("div", { class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref })), h("div", { class: "center" }, h("div", { class: "more-left", hidden: !this.leftMoreVisible }), h("slot", { name: "center" }), h("div", { class: "more-right", hidden: !this.rightMoreVisible })), h("slot", { name: "right" })), h("div", { class: "bottom" }))));
   }
   static get is() { return "duet-menu-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -100,6 +128,24 @@ export class DuetMenuBar {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "logo": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Logo."
+        },
+        "attribute": "logo",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "logoHref": {
         "type": "string",
         "mutable": true,
@@ -121,7 +167,9 @@ export class DuetMenuBar {
   }
   static get states() {
     return {
-      "logoSize": {}
+      "logoSize": {},
+      "leftMoreVisible": {},
+      "rightMoreVisible": {}
     };
   }
   static get elementRef() { return "element"; }

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

@@ -56,14 +56,21 @@
   top: auto;
   bottom: 2px;
   left: 0;
+  z-index: 1;
   display: block;
   width: 100%;
-  height: 2px;
+  height: 1px;
   content: "";
   background: #0077b3;
   transition: 300ms ease;
   transform: translateY(2px);
 }
+@media (min-width: 64.0625em) {
+  .duet-menu-bar-link.active::after {
+    z-index: auto;
+    height: 2px;
+  }
+}
 .duet-menu-bar-link--slot-center {
   font-size: 1rem;
   font-weight: 600;
@@ -77,11 +84,13 @@
 .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;
+@media (min-width: 62em) {
+  .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;
@@ -93,9 +102,11 @@
   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-right:hover {
-  color: #0077b3;
-}
-.duet-menu-bar-link--slot-right:hover.duet-theme-turva {
-  color: #c60c30;
+@media (min-width: 62em) {
+  .duet-menu-bar-link--slot-right:hover {
+    color: #0077b3;
+  }
+  .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

@@ -1,10 +1,24 @@
 /*!
  * Built with Duet Design System
  */
+import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarLink {
   constructor() {
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeIconSize = () => {
+      if (this.mql[0].matches) {
+        this.iconSize = "x-small";
+      }
+      else {
+        this.iconSize = "small";
+      }
+    };
     this.getVariant = () => {
       const slot = this.element.parentElement.getAttribute("slot");
       switch (slot) {
@@ -18,6 +32,7 @@ export class DuetMenuBarLink {
           return "center";
       }
     };
+    this.iconSize = "x-small";
     this.theme = "";
     this.active = false;
     this.href = "#";
@@ -29,6 +44,26 @@ export class DuetMenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  connectedCallback() {
+    this.changeIconSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeIconSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -39,7 +74,7 @@ export class DuetMenuBarLink {
         "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))));
+      }, href: this.href }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }
@@ -134,5 +169,10 @@ export class DuetMenuBarLink {
       }
     };
   }
+  static get states() {
+    return {
+      "iconSize": {}
+    };
+  }
   static get elementRef() { return "element"; }
 }

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

@@ -21,4 +21,22 @@
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
+}
+
+slot[name=mobile] {
+  display: inherit;
+}
+
+slot[name=desktop] {
+  display: none;
+}
+
+@media ((min-width: 62em)) {
+  slot[name=mobile] {
+    display: none;
+  }
+
+  slot[name=desktop] {
+    display: inherit;
+  }
 }

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

@@ -18,7 +18,7 @@ export class DuetMenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("nav", null, h("slot", null))));
+    return (h(Host, null, h("nav", null, h("slot", { name: "mobile" }), h("slot", { name: "desktop" }))));
   }
   static get is() { return "duet-nav"; }
   static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,123 @@
+*,
+*::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;
+  height: 100%;
+}
+
+:host slot::slotted(*) {
+  position: relative;
+  top: 0.5rem;
+  opacity: 0;
+  transition: top 0.3s ease-in, opacity 0.3s ease-in;
+}
+
+:host([open]) slot::slotted(*) {
+  top: 0;
+  opacity: 1;
+}
+
+.hamburger {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-top: 8px !important;
+  pointer-events: none;
+  transition: 0.4s ease-in-out;
+  backface-visibility: hidden;
+}
+.hamburger .bar {
+  position: absolute;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: #00294d;
+  border-radius: 20rem;
+}
+.duet-theme-turva .hamburger .bar {
+  background: #171c3a;
+}
+.hamburger .bar:nth-child(1) {
+  top: 0;
+}
+.hamburger .bar:nth-child(2), .hamburger .bar:nth-child(3) {
+  top: 7px;
+}
+.hamburger .bar:nth-child(4) {
+  top: 14px;
+}
+
+.duet-slideout {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 8px;
+}
+.duet-slideout .dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 400;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: white;
+  box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
+}
+.duet-slideout .dialog .top {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px;
+}
+.duet-slideout .dialog .top duet-icon {
+  padding: 16px;
+}
+.duet-slideout .dialog .items {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding: 0 1.5rem;
+}
+.duet-slideout .dialog.hidden {
+  visibility: hidden;
+}
+.duet-slideout.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-slideout.duet-theme-turva button.active {
+  color: #c60c30;
+}
+.duet-slideout.duet-theme-turva button.active::after {
+  background: #c60c30;
+}
+.duet-slideout.duet-theme-turva .items {
+  background: white;
+}
+
+::slotted(*) {
+  width: 100%;
+}

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

@@ -0,0 +1,167 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+import { FocusGuard } from "../../utils/focus-utils";
+export class DuetSlideout {
+  constructor() {
+    this.toggleMenu = (e) => {
+      const toggle = !this.open;
+      this.open = toggle;
+      this.duetSlideoutEvent.emit({
+        originalEvent: e,
+        data: { element: this.element, open: this.open },
+        component: "duet-slideout",
+      });
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onClick = (e) => {
+      this.toggleMenu(e);
+    };
+    this.theme = "";
+    this.open = false;
+  }
+  /**
+   * Toggles the slideout.
+   */
+  async toggle() {
+    const event = new CustomEvent("toggle");
+    this.toggleMenu(event);
+    setTimeout(() => {
+      this.openButton.focus();
+    }, 200);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, h("div", { class: "hamburger" }, h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }))), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        "slideout-close": true,
+        active: this.open,
+      }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), h("div", { id: "menubar", role: "menubar", class: {
+        items: true,
+      } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  static get is() { return "duet-slideout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-slideout.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-slideout.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": "\"\""
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Open"
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetSlideoutEvent",
+        "name": "duetSlideoutEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event raised when the menu 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": "DuetSlideoutEventDetails",
+          "resolved": "{ originalEvent: Event; data: { element: HTMLElement; open: boolean; }; component: \"duet-slideout\"; }",
+          "references": {
+            "DuetSlideoutEventDetails": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Toggles the slideout.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}