@duetds/components 6.2.4 → 6.2.6

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

@@ -1,32 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import groupBy from "../../utils/group-by";
 export class DuetStepper {
   constructor() {
-    /**
-     * Theme of the component.
-     */
     this.theme = "";
-    /**
-     * Format of message used to announce current step when navigating between steps.
-     * The string {current} is replaced with current the step number.
-     * The string {total} is replaced with the total number of steps.
-     */
     this.accessibleLive = "Lista jossa {total} kohtaa. Olet kohdassa {current}.";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Controls whether navigation back to previous steps is allowed or not.
-     */
     this.backDisabled = false;
-    /**
-     * The index of the current step.
-     */
     this.selected = 0;
   }
   currentStepChanged(nextStep) {
@@ -105,154 +88,163 @@ export class DuetStepper {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("div", { class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } },
-        h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()),
-        h("slot", null))));
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("div", { class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), h("slot", null))));
   }
   static get is() { return "duet-stepper"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-stepper.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-stepper.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-stepper.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-stepper.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 of the component."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "accessibleLive": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the component."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Format of message used to announce current step when navigating between steps.\nThe string {current} is replaced with current the step number.\nThe string {total} is replaced with the total number of steps."
+      "accessibleLive": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Format of message used to announce current step when navigating between steps.\nThe string {current} is replaced with current the step number.\nThe string {total} is replaced with the total number of steps."
+        },
+        "attribute": "accessible-live",
+        "reflect": false,
+        "defaultValue": "\"Lista jossa {total} kohtaa. Olet kohdassa {current}.\""
       },
-      "attribute": "accessible-live",
-      "reflect": false,
-      "defaultValue": "\"Lista jossa {total} kohtaa. Olet kohdassa {current}.\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "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\""
-    },
-    "backDisabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls whether navigation back to previous steps is allowed or not."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "back-disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "backDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls whether navigation back to previous steps is allowed or not."
+        },
+        "attribute": "back-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The index of the current step."
-      },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "0"
-    }
-  }; }
-  static get events() { return [{
-      "method": "duetStepChange",
-      "name": "duetStepChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted when the current step is changed. Can be cancelled to prevent the change."
-      },
-      "complexType": {
-        "original": "DuetStepChangeEvent",
-        "resolved": "{ component: \"duet-stepper\"; fromStep: number; toStep: number; }",
-        "references": {
-          "DuetStepChangeEvent": {
-            "location": "local"
+      "selected": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The index of the current step."
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetStepChange",
+        "name": "duetStepChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when the current step is changed. Can be cancelled to prevent the change."
+        },
+        "complexType": {
+          "original": "DuetStepChangeEvent",
+          "resolved": "{ component: \"duet-stepper\"; fromStep: number; toStep: number; }",
+          "references": {
+            "DuetStepChangeEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "selected",
-      "methodName": "currentStepChanged"
-    }, {
-      "propName": "backDisabled",
-      "methodName": "currentStepInvokedDisable"
-    }]; }
-  static get listeners() { return [{
-      "name": "duetStepClick",
-      "method": "onDuetStepClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "selected",
+        "methodName": "currentStepChanged"
+      }, {
+        "propName": "backDisabled",
+        "methodName": "currentStepInvokedDisable"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "duetStepClick",
+        "method": "onDuetStepClick",
+        "target": undefined,
+        "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;
 }

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

@@ -0,0 +1,124 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetSubmenuBarDropdown {
+  constructor() {
+    this.onClick = () => {
+      this.open = !this.open;
+    };
+    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.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: { "duet-submenu-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: {
+        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,
+        hidden: !this.open,
+      } }, h("slot", null)))));
+  }
+  static get is() { return "duet-submenu-bar-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-submenu-bar-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-submenu-bar-dropdown.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"
+      },
+      "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"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleFocus",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}