@duetds/components 4.32.0 → 4.34.0

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

@@ -84,11 +84,13 @@ export class DuetIcon {
    * Always the last one in the class.
    */
   render() {
-    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color) || getColorByName(this.outline);
+    const color = this.color === "currentColor"
+      ? "currentColor"
+      : getColorByName(this.color, this.theme) || getColorByName(this.outline, this.theme);
     const styles = {
       color,
-      background: getColorByName(this.background),
-      "border-color": getColorByName(this.outline),
+      background: getColorByName(this.background, this.theme),
+      "border-color": getColorByName(this.outline, this.theme),
     };
     return (h(Host, { class: {
         "duet-m-0": this.margin === "none",

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-link/duet-link.js

@@ -6,6 +6,9 @@ import { Build, Component, Fragment, h, Host, Method, Prop } from "@stencil/core
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+/**
+ * @part duet-link - piercing selector for styling the link
+ */
 export class DuetLink {
   constructor() {
     /**
@@ -61,7 +64,7 @@ export class DuetLink {
           "duet-link": true,
           "duet-link-is-external": this.external,
           "duet-theme-turva": this.theme === "turva",
-        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el) },
+        }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link" },
         h("slot", null),
         Build.isBrowser && this.external && (h(Fragment, null,
           h("duet-visually-hidden", null, this.accessibleLabelExternal),

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -39,12 +39,12 @@
 }
 :host dt,
 :host dd {
+  margin-inline-start: 0;
   -webkit-hyphens: auto;
   hyphens: auto;
   text-align: left;
   word-break: break-all;
   word-break: break-word;
-  margin-inline-start: 0;
 }
 @media (max-width: 35.9375em) {
   :host dt,

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css

@@ -52,6 +52,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
+  background-color: white;
   border-bottom: 1px solid #e1e3e6;
   border-radius: 0;
   -webkit-appearance: none;
@@ -66,7 +67,6 @@
     overflow: hidden;
     font-size: 0.875rem;
     line-height: 4rem;
-    background-color: white;
     border: 0;
     border-radius: 4px;
     transition: border 300ms ease;
@@ -75,6 +75,7 @@
 .duet-theme-turva .duet-drawer-toggle {
   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;
+  background-color: white;
   border-color: #e4e4e6;
 }
 .duet-drawer-toggle:active {
@@ -200,14 +201,14 @@
 
 .duet-drawer-content {
   display: none;
-  background-color: #f5f8fa;
+  background-color: white;
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-drawer-content:focus {
   outline: 0;
 }
 .duet-theme-turva .duet-drawer-content {
-  background-color: #f5f5f7;
+  background-color: white;
   border-color: #e1e3e6;
 }
 @media (min-width: 62em) {

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

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

@@ -0,0 +1,240 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { createID } from "../../utils/create-id";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetProgress {
+  constructor() {
+    /**
+     * Own Properties
+     */
+    this.progressId = createID("DuetProgress");
+    this.progressLabelId = createID("DuetProgressLabel");
+    /**
+     * Defaults for accessibleLabel
+     */
+    this.accessibleLabelUploadDefaults = {
+      fi: ["lähetys valmis", "lähetys käynnissä"],
+      sv: ["Uppladdningen är klar", "Uppladdning pågår"],
+      en: ["upload completed", "upload in progress"],
+    };
+    /**
+     * Adds accessible label for upload in progress and upload complete states
+     * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+     */
+    this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
+    /**
+     * Progress of the bar, a value from 0-100
+     */
+    this.progress = 0;
+    /**
+     * Height of progressbar
+     */
+    this.height = "10px";
+    /**
+     * Theme of the input.
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("div", { "aria-live": this.accessibleLabel ? "polite" : "off", "aria-hidden": this.accessibleLabel ? "false" : "true", "aria-atomic": "true", style: {
+          height: this.height,
+        }, id: this.progressId, class: {
+          "duet-progress": true,
+          "duet-progress-done": this.progress === 100,
+          "duet-progress-start": this.progress === 0,
+          "duet-progress-inprogress": this.progress < 99 && this.progress !== 0,
+          "duet-theme-turva": this.theme === "turva",
+        } },
+        h("duet-visually-hidden", null,
+          h("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (h("span", null,
+            this.accessibleLabel,
+            ", ",
+            this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))),
+        this.caption && (h("div", { class: "duet-progress-caption" },
+          h("span", null, this.caption))),
+        h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" },
+          h("div", { class: "progress-bar" },
+            h("span", { style: { width: `${this.progress}%;` } },
+              "Progress: ",
+              this.progress,
+              "%"))))));
+  }
+  static get is() { return "duet-progress"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-progress.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-progress.css"]
+  }; }
+  static get properties() { return {
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id of a component that describes the upload component."
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false
+    },
+    "accessibleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the aria-label of the component -\nthis will get combined with an label+uploading when uploading,\nand label+upload complete when upload is complete"
+      },
+      "attribute": "accessible-label",
+      "reflect": false
+    },
+    "accessibleLabelUploadDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defaults for accessibleLabel"
+      },
+      "attribute": "accessible-label-upload-defaults",
+      "reflect": false,
+      "defaultValue": "{\n    fi: [\"l\u00E4hetys valmis\", \"l\u00E4hetys k\u00E4ynniss\u00E4\"],\n    sv: [\"Uppladdningen \u00E4r klar\", \"Uppladdning p\u00E5g\u00E5r\"],\n    en: [\"upload completed\", \"upload in progress\"],\n  }"
+    },
+    "accessibleLabelUpload": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{fi: [\"l\u00E4hetys valmis\", \"l\u00E4hetys k\u00E4ynniss\u00E4\"],sv: [\"Uppladdningen \u00E4r klar\", \"Uppladdning p\u00E5g\u00E5r\"], en:  [\"completed\", \"in progress\"]}"
+          }],
+        "text": "Adds accessible label for upload in progress and upload complete states"
+      },
+      "attribute": "accessible-label-upload",
+      "reflect": false,
+      "defaultValue": "getLocaleString(this.accessibleLabelUploadDefaults)"
+    },
+    "progress": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Progress of the bar, a value from 0-100"
+      },
+      "attribute": "progress",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "caption": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Caption (underneath label) that can be set as a way of adding extra information"
+      },
+      "attribute": "caption",
+      "reflect": false
+    },
+    "height": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Height of progressbar"
+      },
+      "attribute": "height",
+      "reflect": false,
+      "defaultValue": "\"10px\""
+    },
+    "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 input."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -57,6 +57,21 @@ duet-tooltip {
   }
 }
 
+.duet-select-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-select-container {
   position: relative;
   width: 100%;