@duetds/components 6.1.0 → 6.2.0

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

@@ -0,0 +1,156 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBarMenuDropdownLink {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "#";
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+    /**
+     * Caret
+     */
+    this.caret = false;
+    /**
+     * Highlight
+     */
+    this.highlight = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: {
+          "duet-menu-bar-menu-dropdown-link": true,
+          "duet-theme-turva": this.theme === "turva",
+          highlight: this.highlight,
+        }, href: this.href, role: "menuitem" },
+        this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }),
+        h("slot", null),
+        this.caret && h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" }))));
+  }
+  static get is() { return "duet-menu-bar-menu-dropdown-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-menu-bar-menu-dropdown-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-menu-bar-menu-dropdown-link.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": "\"\""
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "\"#\""
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon"
+      },
+      "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"
+    },
+    "highlight": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Highlight"
+      },
+      "attribute": "highlight",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,65 @@
+*,
+*::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-menu-bar-menu-link {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 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;
+  line-height: 1.25;
+  color: #00294d;
+  text-align: center;
+  text-decoration: none;
+}
+.duet-menu-bar-menu-link.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: #171c3a;
+}
+.duet-menu-bar-menu-link:hover {
+  color: #004d80;
+  background: #e6f2f8;
+}
+.duet-menu-bar-menu-link:hover.duet-theme-turva {
+  color: #940925;
+  background: #e4e4e6;
+}
+.duet-menu-bar-menu-link.active {
+  color: #0077b3;
+}
+.duet-menu-bar-menu-link.active.duet-theme-turva {
+  color: #c60c30;
+}
+.duet-menu-bar-menu-link.active.active:hover {
+  color: #004d80;
+}
+.duet-menu-bar-menu-link.active.active:hover.duet-theme-turva {
+  color: #940925;
+}

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

@@ -0,0 +1,129 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBarMenuLink {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Active
+     */
+    this.active = false;
+    /**
+     * Href
+     */
+    this.href = "#";
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: { "duet-menu-bar-menu-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, role: "menuitem" },
+        this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }),
+        h("slot", null))));
+  }
+  static get is() { return "duet-menu-bar-menu-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-menu-bar-menu-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-menu-bar-menu-link.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": "\"\""
+    },
+    "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "\"#\""
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon"
+      },
+      "attribute": "icon",
+      "reflect": true,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 *,
 *::after,
 *::before {
@@ -88,9 +87,6 @@
 .duet-theme-turva .duet-multiselect-wrapper {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-.duet-multiselect-wrapper::after {
-  content: "  ";
-}
 
 .duet-multiselect {
   display: flex;

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
@@ -84,9 +84,6 @@ export class DuetMultiselect {
     /**
      * Component event handling.
      */
-    this.onClick = (ev) => {
-      ev.stopPropagation();
-    };
     this.onChange = (ev) => {
       this.duetChange.emit({
         originalEvent: ev,
@@ -156,6 +153,12 @@ export class DuetMultiselect {
       return `${this.identifier}-option-${key}`;
     };
   }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.checkboxesVisible = false;
+    }
+  }
   /**
    * Component lifecycle events.
    */
@@ -185,7 +188,7 @@ export class DuetMultiselect {
    */
   render() {
     const selectedTranslation = getLocaleString(this.selectedLangObject);
-    return (h(Host, { onClick: this.onClick, class: {
+    return (h(Host, { class: {
         "duet-m-0": this.margin === "none",
         "duet-expand": this.expand,
       } },
@@ -594,4 +597,11 @@ export class DuetMultiselect {
       "propName": "items",
       "methodName": "refresh"
     }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "handleFocus",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
 }

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

@@ -0,0 +1,24 @@
+*,
+*::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%;
+}

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
+    }]; }
+}