@duetds/components 4.32.0 → 4.33.0

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

@@ -1,13 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
-import { watchForOptions } from "../../utils/watch-options";
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { watchForElement, watchForOptions } from "../../utils/watch-options";
 function isGridItem(element) {
   return element.tagName.toLowerCase() === "duet-grid-item";
 }
 export class DuetGrid {
   constructor() {
+    this.distributeFormElement = false;
     /**
      * Enable or disable the automatic responsive behaviour of the grid component.
      * Setting this option to "true" makes sure that contents are stacked vertically
@@ -24,7 +25,9 @@ export class DuetGrid {
      */
     this.direction = "horizontal";
     /**
-     * Adjusts the vertical alignment of the grid items.
+     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+     * so that they align even when displaying errors.
      */
     this.alignment = "top";
     /**
@@ -36,14 +39,34 @@ export class DuetGrid {
      */
     this.mobile = "";
   }
+  /**
+   * Private functions
+   */
+  /**
+   * Returns the element height including margins
+   * @param element - element
+   * @returns {number}
+   */
+  outerHeight(element) {
+    const height = element.offsetHeight, style = window.getComputedStyle(element);
+    return ["top", "bottom"]
+      .map(side => parseInt(style[`margin-${side}`]))
+      .reduce((total, side) => total + side, height);
+  }
   /**
    * Component lifecycle events.
    */
   async connectedCallback() {
     const el = this.element;
+    this.distributeFormElement = this.alignment === "form_distribute";
     this.mutationO = watchForOptions(el, "duet-grid-item", () => {
       this.updateGridItems();
     });
+    if (this.distributeFormElement) {
+      this.mutation1 = watchForElement(el, "duet-input", () => {
+        this.updateGridItemsWithInputFields();
+      });
+    }
     this.updateGridItems();
   }
   disconnectedCallback() {
@@ -51,6 +74,10 @@ export class DuetGrid {
       this.mutationO.disconnect();
       this.mutationO = undefined;
     }
+    if (this.mutation1) {
+      this.mutation1.disconnect();
+      this.mutation1 = undefined;
+    }
   }
   /**
    * Local methods
@@ -62,6 +89,27 @@ export class DuetGrid {
       item.breakpoint = this.breakpoint;
     });
   }
+  async updateGridItemsWithInputFields() {
+    const items = Array.from(this.element.children).filter(isGridItem);
+    let maxHeight = 0;
+    const sizes = [];
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      sizes.push(height);
+    });
+    maxHeight = Math.max(...sizes);
+    items.forEach(item => {
+      const inputErrorDom = item.querySelector("span.duet-input-error");
+      const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
+      if (height < maxHeight) {
+        item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
+      }
+      else if (height === maxHeight) {
+        item.setAttribute("style", `padding-bottom: 0px;`);
+      }
+    });
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -71,7 +119,7 @@ export class DuetGrid {
         "duet-grid": true,
         "duet-no-stacking": !this.responsive,
         "duet-grid-align-top": this.alignment === "top",
-        "duet-grid-align-bottom": this.alignment === "bottom",
+        "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute",
         "duet-grid-align-center": this.alignment === "center",
         "duet-grid-align-stretch": this.alignment === "stretch",
         "duet-grid-align-baseline": this.alignment === "baseline",
@@ -169,7 +217,7 @@ export class DuetGrid {
       "mutable": false,
       "complexType": {
         "original": "DuetGridAlignment",
-        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"stretch\" | \"top\"",
+        "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form_distribute\" | \"stretch\" | \"top\"",
         "references": {
           "DuetGridAlignment": {
             "location": "local"
@@ -180,7 +228,7 @@ export class DuetGrid {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Adjusts the vertical alignment of the grid items."
+        "text": "Adjusts the vertical alignment of the grid items, if set to \"form_distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors."
       },
       "attribute": "alignment",
       "reflect": false,
@@ -231,6 +279,9 @@ export class DuetGrid {
       "defaultValue": "\"\""
     }
   }; }
+  static get states() { return {
+    "distributeFormElement": {}
+  }; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "responsive",

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

@@ -53,6 +53,9 @@
   padding-bottom: 20px;
   border-bottom: 1px solid #e1e3e6;
 }
+.duet-heading.duet-heading-border.duet-heading-border-solid {
+  border-bottom-color: #657787;
+}
 .duet-heading.duet-heading-hyphenate {
   -webkit-hyphens: auto;
   hyphens: auto;

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

@@ -16,7 +16,7 @@ export class DuetHeading {
      */
     this.margin = "auto";
     /**
-     * Enable or disable the border underneath the heading.
+     * Enable or disable the border underneath the heading, solid will darken the border
      */
     this.border = false;
     /**
@@ -53,7 +53,8 @@ export class DuetHeading {
     const color = getColorByName(this.color);
     return (h(TagName, { class: {
         "duet-heading": true,
-        "duet-heading-border": this.border,
+        "duet-heading-border": this.border !== false,
+        "duet-heading-border-solid": this.border === "solid",
         "duet-semibold": this.weight === "semibold",
         "duet-heading-hyphenate": this.hyphenate,
         "duet-m-0": this.margin === "none",
@@ -140,18 +141,18 @@ export class DuetHeading {
       "reflect": false
     },
     "border": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "boolean | \"solid\"",
+        "resolved": "\"solid\" | boolean",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Enable or disable the border underneath the heading."
+        "text": "Enable or disable the border underneath the heading, solid will darken the border"
       },
       "attribute": "border",
       "reflect": false,

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
@@ -58,7 +58,7 @@ export class DuetIcon {
     if (this.src && this.icon) {
       console.warn("[DUET COMPONENTS]: <duet-icon> should have either have src or icon attributes, but not both. icon attribute will take precedence", "icon:", this.icon, "src:", this.src);
     }
-    this.loadIcon();
+    return this.loadIcon();
   }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
@@ -66,10 +66,6 @@ export class DuetIcon {
       this.svgContent = this.icon;
       return;
     }
-    // on server, don't make requests
-    if (!Build.isBrowser) {
-      return;
-    }
     // dynamically load icon from url
     const src = this.src ? this.src : buildIconUrl(this.name);
     try {

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

@@ -63,6 +63,21 @@ duet-caption:not(:last-of-type) {
   margin-bottom: 0;
 }
 
+.duet-input-placeholder {
+  position: absolute;
+  top: -9px;
+  left: 9px;
+  z-index: 200;
+  display: block;
+  width: auto;
+  max-width: 60%;
+  padding: 0 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: white;
+}
+
 .duet-input-icon {
   position: absolute;
   top: 50%;

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

@@ -140,7 +140,7 @@ export class DuetInput {
       // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
       restoreCursor();
     }
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
     const emitEvent = () => this.duetChange.emit({
       value: this.value,
       component: "duet-input",
@@ -159,7 +159,7 @@ export class DuetInput {
   componentWillLoad() {
     inheritGlobalTheme(this);
     this.disallowedPatternChange();
-    this.isCaptionVisible = !!(this.caption || (this.placeholder && this.echoPlaceholder && this.value));
+    this.isCaptionVisible = !!this.caption;
   }
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
@@ -199,8 +199,8 @@ export class DuetInput {
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
-        this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, size: "small" }, this.placeholder)),
         h("div", { class: "duet-input-relative" },
+          this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)),
           h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
               "duet-input": true,
               disabled: this.disabled,
@@ -212,7 +212,7 @@ export class DuetInput {
           this.icon && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
           h("slot", null)),
-        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }

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

@@ -52,6 +52,12 @@
 .duet-paragraph.duet-paragraph-small {
   font-size: 0.875rem;
 }
+.duet-paragraph.duet-paragraph-semi-bold {
+  font-weight: 600;
+}
+.duet-paragraph.duet-paragraph-bold {
+  font-weight: 700;
+}
 .duet-paragraph.duet-m-0 {
   margin: 0 !important;
 }

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

@@ -4,10 +4,13 @@
 import { Component, Element, h, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @part duet-paragraph - piercing selector for styling the paragraph
+ */
 export class DuetParagraph {
   constructor() {
     /**
-     * Theme of the card.
+     * Theme of the paragraph.
      */
     this.theme = "";
     /**
@@ -18,6 +21,10 @@ export class DuetParagraph {
      * Controls the size of the paragraph.
      */
     this.size = "medium";
+    /**
+     * Controls the Font-Weight of the paragraph.
+     */
+    this.weight = undefined;
     /**
      * Style variation of the paragraph.
      */
@@ -43,10 +50,12 @@ export class DuetParagraph {
     return (h("p", { class: {
         "duet-paragraph": true,
         "duet-paragraph-small": this.size === "small",
+        "duet-paragraph-semi-bold": this.weight === "semi-bold",
+        "duet-paragraph-bold": this.weight === "bold",
         "duet-m-0": this.margin === "none",
         [this.variation]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, style: { color } },
+      }, style: { color }, part: "duet-paragraph" },
       h("slot", null)));
   }
   static get is() { return "duet-paragraph"; }
@@ -75,7 +84,7 @@ export class DuetParagraph {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Theme of the card."
+        "text": "Theme of the paragraph."
       },
       "attribute": "theme",
       "reflect": false,
@@ -126,6 +135,28 @@ export class DuetParagraph {
       "reflect": false,
       "defaultValue": "\"medium\""
     },
+    "weight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetParagraphWeight",
+        "resolved": "\"bold\" | \"semi-bold\"",
+        "references": {
+          "DuetParagraphWeight": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls the Font-Weight of the paragraph."
+      },
+      "attribute": "weight",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "variation": {
       "type": "string",
       "mutable": false,

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

@@ -0,0 +1,103 @@
+*,
+*::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%;
+  height: inherit;
+}
+
+.duet-progress {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  width: 100%;
+  min-height: 1px;
+  /* fallback design of the default appearance */
+}
+.duet-progress .progress-bar {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: inherit;
+  min-height: 1px;
+  background-color: #f3f9fc;
+  border-radius: 0;
+  box-shadow: none;
+}
+.duet-theme-turva .duet-progress .progress-bar {
+  background-color: #fcf3f4;
+}
+.duet-progress .progress-bar > span {
+  display: block;
+  height: inherit;
+  text-indent: -9999px;
+  background-color: #0077b3;
+  border-radius: 0;
+}
+.duet-theme-turva .duet-progress .progress-bar > span {
+  background-color: #c60c30;
+}
+.duet-progress progress[value] {
+  display: flex;
+  width: 100%;
+  height: inherit;
+  min-height: 1px;
+  /* For IE10 */
+  color: #0077b3;
+  /* Get rid of default border in Firefox. */
+  border: 0 none;
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.duet-theme-turva .duet-progress progress[value] {
+  color: #c60c30;
+}
+.duet-progress progress[value]::-webkit-progress-bar {
+  background-color: #f3f9fc;
+  border-radius: 0;
+}
+.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar {
+  background-color: #fcf3f4;
+}
+.duet-progress progress[value]::-webkit-progress-value {
+  background-color: #0077b3;
+  background-size: 35px 20px, 100% 100%, 100% 100%;
+  border-radius: 0;
+  -webkit-animation: animate-stripes 5s linear infinite;
+  animation: animate-stripes 5s linear infinite;
+}
+.duet-theme-turva .duet-progress progress[value]::-webkit-progress-value {
+  background-color: #c60c30;
+}
+.duet-progress progress[value] ::-moz-progress-bar {
+  background-color: #f3f9fc;
+}
+.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar {
+  background-color: #fcf3f4;
+}