@duetds/components 6.2.4 → 6.2.6

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

@@ -24,6 +24,7 @@
 }
 
 .duet-toolbar {
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 /**
  * @slot left - Slot for content in left side.
@@ -9,9 +9,6 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  */
 export class DuetToolbar {
   constructor() {
-    /**
-     * Theme.
-     */
     this.theme = "";
   }
   /**
@@ -25,43 +22,46 @@ export class DuetToolbar {
    * 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" }))));
+    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"
+  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": "\"\""
-    }
-  }; }
+        },
+        "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

@@ -25,7 +25,6 @@
 
 .duet-toolbar-dropdown {
   position: relative;
-  z-index: 1;
   height: 100%;
 }
 .duet-toolbar-dropdown button {
@@ -106,10 +105,10 @@
   color: #171c3a;
   background: #f5f5f7;
 }
-.duet-toolbar-dropdown.duet-theme-turva button.active {
+.duet-toolbar-dropdown.duet-theme-turva button.active, .duet-toolbar-dropdown.duet-theme-turva button.open {
   color: #171c3a;
 }
-.duet-toolbar-dropdown.duet-theme-turva button.active::after {
+.duet-toolbar-dropdown.duet-theme-turva button.active::after, .duet-toolbar-dropdown.duet-theme-turva button.open::after {
   background: #c60c30;
 }
 .duet-toolbar-dropdown.duet-theme-turva .items {

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

@@ -1,39 +1,23 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetToolbarDropdown {
   constructor() {
-    /**
-     * Theme.
-     */
+    this.onClick = () => {
+      this.open = !this.open;
+    };
     this.theme = "";
-    /**
-     * Active
-     */
     this.active = false;
-    /**
-     * Open
-     */
     this.open = false;
-    /**
-     * Icon
-     */
     this.icon = undefined;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetToolbarDropdownEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-toolbar-dropdown",
-      });
-    };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
-    };
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
   }
   /**
    * Component lifecycle events.
@@ -50,132 +34,119 @@ export class DuetToolbarDropdown {
     if (this.element && this.element.parentElement) {
       itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
     }
-    return (h(Host, null,
-      h("div", { class: {
-          "duet-toolbar-dropdown": true,
-          "duet-theme-turva": this.theme === "turva",
-          [itemsAlign]: true,
-        } },
-        h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-            active: this.active,
-            open: this.open,
-          }, onClick: this.onClick },
-          this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }),
-          h("div", { class: "label" },
-            h("slot", { name: "label" }),
-            h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))),
-        h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-            items: true,
-            hidden: !this.open,
-          } },
-          h("slot", null)))));
+    return (h(Host, null, h("div", { class: {
+        "duet-toolbar-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        [itemsAlign]: true,
+      } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.active,
+        open: this.open,
+      }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), 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-toolbar-dropdown"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-toolbar-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-toolbar-dropdown.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-toolbar-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-toolbar-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."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active"
+      "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"
       },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "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 events() { return [{
-      "method": "duetToolbarDropdownEvent",
-      "name": "duetToolbarDropdownEvent",
-      "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": "DuetToolbarDropdownEventDetails",
-        "resolved": "{ originalEvent: Event; data: { element: HTMLElement; open: boolean; }; component: \"duet-toolbar-dropdown\"; }",
-        "references": {
-          "DuetToolbarDropdownEventDetails": {
-            "location": "local"
-          }
-        }
+      "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
+      }];
+  }
 }

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

@@ -1,25 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetToolbarDropdownLink {
   constructor() {
-    /**
-     * Theme.
-     */
     this.theme = "";
-    /**
-     * Href
-     */
     this.href = "#";
-    /**
-     * Icon
-     */
     this.icon = undefined;
-    /**
-     * Active
-     */
     this.active = false;
   }
   /**
@@ -33,101 +21,104 @@ export class DuetToolbarDropdownLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null,
-      h("a", { class: {
-          "duet-toolbar-dropdown-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))));
+    return (h(Host, null, h("a", { class: {
+        "duet-toolbar-dropdown-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-toolbar-dropdown-link"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-toolbar-dropdown-link.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-toolbar-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"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-toolbar-dropdown-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-toolbar-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": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Href"
+      "href": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"#\""
       },
-      "attribute": "href",
-      "reflect": false,
-      "defaultValue": "\"#\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon"
-      },
-      "attribute": "icon",
-      "reflect": true,
-      "defaultValue": "undefined"
-    },
-    "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"
-    }
-  }; }
+      "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"
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }