@duetds/components 4.33.1 → 4.34.2

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

@@ -4,9 +4,11 @@
 import { Component, Element, h, Host, Method, Prop, State } from "@stencil/core";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
+import { generateTemplateFn } from "../../utils/template-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetEditableTable {
   constructor() {
+    this.template = undefined;
     /**
      * State() variables
      * @internal
@@ -16,6 +18,10 @@ export class DuetEditableTable {
      * Map of items that contain list of things.
      */
     this.items = new Map();
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
     /**
      * Array of internationalized defaults for the default groups labels.
      */
@@ -64,12 +70,40 @@ export class DuetEditableTable {
      * Exposes the aria role for optimizing accessibility.
      */
     this.accessibleRole = undefined;
+    /**
+     * Theme of the table.
+     */
+    this.theme = "";
     /**
      * Private methods.
      */
     this.kick = debounce(() => {
       this.tick = Date.now();
     }, 100); // will trigger re-render
+    /**
+     * If a user defines a template section within editable table, try to read an use it.
+     */
+    this.getTemplate = () => {
+      const templateDom = this.element.getElementsByTagName("template");
+      if (templateDom === null || templateDom === void 0 ? void 0 : templateDom.length) {
+        const templateString = templateDom[0].content.firstElementChild.outerHTML;
+        return generateTemplateFn(templateString);
+      }
+      else {
+        return false;
+      }
+    };
+    this.getItemData = (data) => {
+      const { item, group, uid } = data;
+      if (this.template) {
+        return {
+          group,
+          uid,
+          item: this.template(item),
+        };
+      }
+      return { item, group, uid };
+    };
     this.filterMap = needle => {
       if (needle === "all") {
         return Array.from(this.items);
@@ -81,6 +115,9 @@ export class DuetEditableTable {
    * Component lifecycle events.
    */
   componentWillLoad() {
+    // look for a <template> region in the duet-editable-table
+    this.template = this.getTemplate();
+    // take care of the case where groups and actions are defined as html properties instead of javascript objects
     if (typeof this.groups === "string") {
       this.internalGroupArray = sanitizeString(this.groups);
     }
@@ -126,7 +163,7 @@ export class DuetEditableTable {
                   : getLocaleString(this.actionLabelDefaults))))),
           h("tbody", null, currentGroup.map(dataAsArray => {
             const [key, value] = dataAsArray;
-            return (h("duet-editable-table-item", { keyName: key, data: Object.assign({}, value), groupId: group.id, part: group.id, actions: this.internalActionsArray }));
+            return (h("duet-editable-table-item", { theme: this.theme, keyName: key, data: this.getItemData(value), groupId: group.id, part: group.id, alignment: this.alignment, actions: this.internalActionsArray }));
           })))));
     })));
   }
@@ -159,6 +196,24 @@ export class DuetEditableTable {
       },
       "defaultValue": "new Map()"
     },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Key used to set vertical alignment of action buttons"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"middle\""
+    },
     "groupsLabelDefaults": {
       "type": "unknown",
       "mutable": false,
@@ -314,7 +369,8 @@ export class DuetEditableTable {
         "text": "Theme of the table."
       },
       "attribute": "theme",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"\""
     }
   }; }
   static get states() { return {

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

@@ -248,7 +248,9 @@ a:hover .duet-footer-arrow {
   }
 }
 .duet-footer-menu a {
+  display: inline-block;
   text-decoration: none;
+  word-break: break-all;
 }
 .duet-footer-menu a:hover, .duet-footer-menu a:focus {
   text-decoration: underline;

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import { media_query_large, media_query_medium, media_query_small } from "@duetds/tokens/lib/tokens.json";
 import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { watchForElement, watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
@@ -8,6 +9,11 @@ function isGridItem(element) {
 }
 export class DuetGrid {
   constructor() {
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_small.replace(/'/g, "")),
+    ];
     this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
@@ -62,10 +68,18 @@ export class DuetGrid {
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
     if (this.distributeFormElement) {
       this.mutation1 = watchForElement(el, "duet-input", () => {
         this.updateGridItemsWithInputFields();
       });
+      // listen for potential mediaquery changes and reset layout
+      for (let i = 0; i < this.mql.length; i++) {
+        // addEventListener is not available in Stencil hydrate
+        if (this.mql[i].addEventListener) {
+          this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+        }
+      }
     }
     this.updateGridItems();
   }
@@ -78,6 +92,13 @@ export class DuetGrid {
       this.mutation1.disconnect();
       this.mutation1 = undefined;
     }
+    // listen for potential mediaquery changes and reset layout
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
+      }
+    }
   }
   /**
    * Local methods
@@ -91,6 +112,8 @@ export class DuetGrid {
   }
   async updateGridItemsWithInputFields() {
     const items = Array.from(this.element.children).filter(isGridItem);
+    // if layout changes to columns instead of row, remove all padding
+    const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
     let maxHeight = 0;
     const sizes = [];
     items.forEach(item => {
@@ -102,10 +125,10 @@ export class DuetGrid {
     items.forEach(item => {
       const inputErrorDom = item.querySelector("span.duet-input-error");
       const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
-      if (height < maxHeight) {
+      if (height < maxHeight && !hasColumnLayout) {
         item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
       }
-      else if (height === maxHeight) {
+      else if (height === maxHeight || hasColumnLayout) {
         item.setAttribute("style", `padding-bottom: 0px;`);
       }
     });

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

@@ -0,0 +1,27 @@
+/*!
+ * Built with Duet Design System
+ */
+import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
+import { h } from "@stencil/core";
+import { DuetHeaderIcon } from "./duet-header-icon";
+export const DuetHeaderDropdown = (props, _children) => {
+  const accessibleLabel = props.accessibleText ? props.accessibleText : props.label;
+  return (h("div", { class: { ["duet-header-dropdown"]: true, [props.className]: !!props.className } },
+    h("button", { ref: props.toggleRef, "aria-haspopup": "listbox", "aria-controls": props.id, "aria-expanded": props.isOpen ? "true" : "false", "aria-labelledby": `${props.id}-accessible-label`, id: `${props.id}-button`, type: "button", class: {
+        [props.id]: true,
+        "duet-header-dropdown-toggle": true,
+        "duet-header-button": true,
+        active: props.active,
+      }, onClick: props.onToggle },
+      props.icon && h(DuetHeaderIcon, { icon: props.icon }),
+      h("span", { "aria-hidden": "true", id: `${props.id}-label`, class: "duet-header-dropdown-label" }, props.label),
+      props.badge && h("div", { class: "duet-header-badge" }),
+      h("div", { class: "duet-header-caret", "aria-hidden": "true" },
+        h("duet-icon", { margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" })),
+      h("duet-visually-hidden", { id: `${props.id}-accessible-label` }, accessibleLabel)),
+    h("div", { ref: props.itemsRef, tabindex: "-1", role: "menu", id: props.id, "aria-labelledby": `${props.id}-button`, class: {
+        "duet-header-dropdown-content": true,
+        [`${props.id}-items`]: true,
+        active: props.isOpen,
+      } }, _children)));
+};

package/lib/collection/components/duet-header/duet-header-hamburger.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderHamburger = () => (h("div", { class: "duet-header-hamburger" },
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" }),
+  h("span", { class: "duet-header-bar" })));

package/lib/collection/components/duet-header/duet-header-icon.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h } from "@stencil/core";
+export const DuetHeaderIcon = (props, _children) => {
+  const iconSize = props.iconSize ? props.iconSize : "x-small";
+  return (h("span", { class: "duet-header-icon" },
+    h("duet-icon", { margin: "none", size: iconSize, icon: props.icon, color: "currentColor" })));
+};