@duetds/components 6.0.7 → 6.2.0

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

@@ -0,0 +1,177 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Listen, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBar {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    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");
+        }
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  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.
+   */
+  render() {
+    return (h(Host, null,
+      h("nav", null,
+        h("slot", null))));
+  }
+  static get is() { return "duet-nav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-nav.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-nav.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"; }
+  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-section-layout/duet-section-layout.css

@@ -0,0 +1,100 @@
+*,
+*::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: block;
+  flex: 1 0 auto;
+  width: 100%;
+}
+
+:host(.duet-middle) {
+  display: flex;
+}
+:host(.duet-middle) .duet-layout {
+  padding: 36px 28px !important;
+}
+@media (min-width: 36em) {
+  :host(.duet-middle) .duet-layout {
+    padding: 48px 36px !important;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-middle) .duet-layout {
+    padding: 56px !important;
+  }
+}
+
+:host(.duet-ie) {
+  height: 100%;
+}
+
+:host(.duet-middle.duet-ie) {
+  height: auto;
+}
+
+.duet-layout {
+  position: relative;
+  padding: 0 16px;
+  margin: 48px auto 36px;
+}
+@media (min-width: 36em) {
+  .duet-layout {
+    margin-top: 72px;
+  }
+}
+.duet-layout.duet-m-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+@media (min-width: 36em) {
+  .duet-layout {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-layout {
+    display: flex;
+    flex-direction: row;
+    padding: 0 56px;
+    margin-bottom: 48px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-layout {
+    max-width: 1110px;
+    padding: 0;
+  }
+}
+
+.duet-main {
+  display: block;
+  width: 100%;
+}
+@media (min-width: 62em) {
+  .duet-main {
+    min-width: 600px;
+    margin: 0 auto;
+  }
+  .has-sidebar .duet-main {
+    max-width: 734px;
+    margin-right: 20px;
+  }
+}

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -0,0 +1,85 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import isInternetExplorer from "../../utils/is-internet-explorer";
+export class DuetSectionLayout {
+  constructor() {
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Align container vertically in the middle when the space allows it.
+     */
+    this.middle = false;
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { class: {
+        "duet-middle": this.middle,
+        "duet-ie": isInternetExplorer(),
+      } },
+      h("div", { class: {
+          "duet-layout": true,
+          "duet-m-0": this.margin === "none",
+        } },
+        h("section", { class: "duet-main" },
+          h("slot", null)))));
+  }
+  static get is() { return "duet-section-layout"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-section-layout.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-section-layout.css"]
+  }; }
+  static get properties() { return {
+    "margin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetMargin",
+        "resolved": "\"auto\" | \"none\"",
+        "references": {
+          "DuetMargin": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls the margin of the component."
+      },
+      "attribute": "margin",
+      "reflect": false,
+      "defaultValue": "\"auto\""
+    },
+    "middle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Align container vertically in the middle when the space allows it."
+      },
+      "attribute": "middle",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -1,24 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { mediaQueryLarge, mediaQueryMedium, mediaQuerySmall, mediaQueryXLarge, mediaQueryXxLarge, mediaQueryXxxLarge, sizeHeader, sizeNavigation, } from "@duetds/tokens";
+import { sizeHeader, sizeNavigation } from "@duetds/tokens";
 import { Build, Component, Element, h, Host, Prop, State } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
-// remove wrapping speech marks.
-// media query tokens are wrapped in speech marks,
-// which need to be removed before use with matchMedia.
-const unwrap = (str) => str.substring(1, str.length - 1);
-const breakpointToToken = {
-  none: "all",
-  "none-scrollable": "all",
-  small: unwrap(mediaQuerySmall),
-  medium: unwrap(mediaQueryMedium),
-  large: unwrap(mediaQueryLarge),
-  "x-large": unwrap(mediaQueryXLarge),
-  "xx-large": unwrap(mediaQueryXxLarge),
-  "xxx-large": unwrap(mediaQueryXxxLarge),
-};
+import { breakpointToToken } from "../../utils/token-utils";
 const stickyTopValues = {
   none: 0,
   "with-links": parseFloat(sizeNavigation) * 16,
@@ -69,7 +56,8 @@ export class DuetTable {
     if (Build.isServer) {
       return;
     }
-    this.mq = matchMedia(breakpointToToken[this.breakpoint]);
+    const token = this.breakpoint === "none" || this.breakpoint === "none-scrollable" ? "all" : breakpointToToken[this.breakpoint];
+    this.mq = matchMedia(token);
     this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
     this.handleMediaQueryChange(this.mq);
     this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));

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

@@ -0,0 +1,43 @@
+*,
+*::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-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 36px;
+  padding: 0 28px;
+  background: white;
+}
+.duet-toolbar ::slotted(*) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.duet-toolbar.duet-theme-turva {
+  background: white;
+}

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

@@ -0,0 +1,67 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+/**
+ * @slot left - Slot for content in left side.
+ * @slot right - Slot for content in right side.
+ */
+export class DuetToolbar {
+  constructor() {
+    /**
+     * Theme.
+     */
+    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-toolbar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" },
+        h("slot", { name: "left" }),
+        h("slot", { name: "right" }))));
+  }
+  static get is() { return "duet-toolbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-toolbar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-toolbar.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-toolbar-dropdown/duet-toolbar-dropdown.css

@@ -0,0 +1,117 @@
+*,
+*::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%;
+}
+
+.duet-toolbar-dropdown {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+}
+.duet-toolbar-dropdown button {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 16px;
+  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;
+  cursor: pointer;
+}
+.duet-toolbar-dropdown button .label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+}
+.duet-toolbar-dropdown button:hover {
+  color: #00294d;
+  background: #f3f9fc;
+}
+.duet-toolbar-dropdown button.open .caret {
+  transform: rotate(180deg);
+}
+.duet-toolbar-dropdown button.active, .duet-toolbar-dropdown button.open {
+  color: #00294d;
+}
+.duet-toolbar-dropdown button.active::after, .duet-toolbar-dropdown button.open::after {
+  position: absolute;
+  top: auto;
+  bottom: 1px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background: #0077b3;
+  transition: 300ms ease;
+  transform: translateY(1px);
+}
+.duet-toolbar-dropdown .items {
+  position: absolute;
+  top: 102%;
+  right: 0%;
+  left: auto;
+  z-index: 600;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 175px;
+  padding: 1rem 0;
+  color: #00294d;
+  background: #f3f9fc;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+}
+.duet-toolbar-dropdown .items.hidden {
+  display: none;
+}
+.duet-toolbar-dropdown.right .items {
+  right: auto;
+  left: 0%;
+}
+.duet-toolbar-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: #940925;
+}
+.duet-toolbar-dropdown.duet-theme-turva button:hover {
+  color: #171c3a;
+  background: #f5f5f7;
+}
+.duet-toolbar-dropdown.duet-theme-turva button.active {
+  color: #171c3a;
+}
+.duet-toolbar-dropdown.duet-theme-turva button.active::after {
+  background: #c60c30;
+}
+.duet-toolbar-dropdown.duet-theme-turva .items {
+  background: #f5f5f7;
+}