@duetds/components 4.33.2 → 4.34.3

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-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-table/duet-table.css

@@ -177,59 +177,60 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
-.duet-table-minimal th, .duet-table-plain th {
+.duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
   padding: 16px !important;
   border-bottom: 1px solid #657787;
 }
-.duet-table-minimal th:first-child, .duet-table-plain th:first-child {
+.duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal th:last-child, .duet-table-plain th:last-child {
+.duet-table-fixed th:last-child, .duet-table-minimal th:last-child, .duet-table-plain th:last-child {
   padding-right: 0 !important;
 }
-.duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
+.duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
   border-bottom-color: #444445;
 }
-.duet-table-minimal tbody th, .duet-table-plain tbody th {
+.duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
   padding-top: 40px !important;
   border-bottom-color: #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
+.duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-minimal td, .duet-table-plain td {
+.duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
   padding: 16px !important;
 }
-.duet-table-minimal td:first-child, .duet-table-plain td:first-child {
+.duet-table-fixed td:first-child, .duet-table-minimal td:first-child, .duet-table-plain td:first-child {
   padding-left: 0 !important;
 }
-.duet-table-minimal td:last-child, .duet-table-plain td:last-child {
+.duet-table-fixed td:last-child, .duet-table-minimal td:last-child, .duet-table-plain td:last-child {
   padding-right: 0 !important;
 }
-.duet-table-minimal tbody td, .duet-table-plain tbody td {
+.duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
   border-bottom: 1px solid #e1e3e6;
 }
-.duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
+.duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
   border-bottom-color: #e4e4e6;
 }
-.duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
+.duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
   padding-top: 0 !important;
 }
-.duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed td, .duet-table-flattened.duet-table-minimal td, .duet-table-flattened.duet-table-plain td,
+.duet-table-flattened.duet-table-fixed tbody th,
 .duet-table-flattened.duet-table-minimal tbody th,
 .duet-table-flattened.duet-table-plain tbody th {
   border-bottom: 0;
 }
-.duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
+.duet-table-flattened.duet-table-fixed tr, .duet-table-flattened.duet-table-minimal tr, .duet-table-flattened.duet-table-plain tr {
   padding: 20px 0 !important;
 }
-.duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
+.duet-table-flattened.duet-table-fixed tbody th, .duet-table-flattened.duet-table-minimal tbody th, .duet-table-flattened.duet-table-plain tbody th {
   padding-top: 20px !important;
 }
-.duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
+.duet-table-flattened.duet-table-fixed tfoot td, .duet-table-flattened.duet-table-minimal tfoot td, .duet-table-flattened.duet-table-plain tfoot td {
   margin-bottom: 4px !important;
 }
-.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
+.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child, .duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child {
   border-bottom: 0;
 }
 
@@ -263,6 +264,30 @@ duet-table.duet-theme-turva tbody th {
   border-top-color: #e4e4e6;
 }
 
+.duet-table-fixed table {
+  table-layout: fixed;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td,
+.duet-table-fixed tbody tr td:first-child {
+  padding: 4px !important;
+  vertical-align: text-bottom;
+  border-bottom: 0 none;
+}
+.duet-table-fixed thead {
+  display: none;
+}
+.duet-table-fixed tbody tr,
+.duet-table-fixed tbody tr td {
+  border-bottom: 0 none;
+}
+.duet-table-fixed:not(.duet-table-flattened) tfoot {
+  border-top: 1px solid #e1e3e6;
+}
+.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
+  border-top-color: #e4e4e6;
+}
+
 .duet-table-scrollable {
   position: relative;
   width: 100%;

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

@@ -64,7 +64,7 @@ export class DuetTable {
       return;
     }
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addListener(this.handleMediaQueryChange);
+    this.mq.addEventListener("change", this.handleMediaQueryChange);
     this.handleMediaQueryChange(this.mq);
     this.observer = new MutationObserver(() => this.copyHeadingsToCells());
     this.observer.observe(this.element, {
@@ -185,7 +185,7 @@ export class DuetTable {
       "mutable": false,
       "complexType": {
         "original": "DuetTableVariant",
-        "resolved": "\"plain\" | \"striped\"",
+        "resolved": "\"fixed\" | \"plain\" | \"striped\"",
         "references": {
           "DuetTableVariant": {
             "location": "local"

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

@@ -59,7 +59,7 @@ export class DuetUpload {
       {
         icon: "action-delete",
         color: "color-danger",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "delete",
         map: ["success", "failure"],
         label: {
@@ -71,7 +71,7 @@ export class DuetUpload {
       {
         icon: "navigation-close",
         color: "primary",
-        color_hover: "category-home",
+        color_hover: "primary-dark",
         id: "cancel",
         map: ["inprogress"],
         label: {
@@ -192,6 +192,10 @@ export class DuetUpload {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Key used to set vertical alignment of action buttons
+     */
+    this.alignment = "middle";
     /**
      * Visually hides the groups labels in the editable table list used to display the list of files
      */
@@ -735,6 +739,15 @@ export class DuetUpload {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for forcing a render of the upload list, element.files can be changed externally
+   * But it will only rerender on a new Map or a top Level change - this can be used to update
+   * the tabular data if the automatic re-render is no sufficient
+   */
+  async refresh() {
+    this.kick();
+    await this.setFocus();
+  }
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -769,7 +782,7 @@ export class DuetUpload {
           }, id: this.labelId, for: identifier }, this.fileListEmpty)),
         !!this.files.size && h("slot", { name: "fileheader" }),
         !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })),
-        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })),
+        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })),
         !!this.files.size && h("slot", { name: "filefooter" }),
         h("duet-spacer", { size: "large" }),
         !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)),
@@ -919,7 +932,7 @@ export class DuetUpload {
       },
       "attribute": "actions",
       "reflect": false,
-      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"category-home\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"category-home\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"primary-dark\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"primary-dark\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
     },
     "uri": {
       "type": "string",
@@ -1214,6 +1227,24 @@ export class DuetUpload {
       "attribute": "groups",
       "reflect": false
     },
+    "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\""
+    },
     "hideGroups": {
       "type": "boolean",
       "mutable": false,
@@ -1813,6 +1844,22 @@ export class DuetUpload {
         "tags": []
       }
     },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for forcing a render of the upload list, element.files can be changed externally\nBut it will only rerender on a new Map or a top Level change - this can be used to update\nthe tabular data if the automatic re-render is no sufficient",
+        "tags": []
+      }
+    },
     "getFiles": {
       "complexType": {
         "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",

package/lib/collection/utils/template-utils.js

@@ -0,0 +1,33 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * Produces a function which uses template strings to do simple interpolation from objects.
+ *
+ * Usage:
+ *    var makeMeKing = generateTemplateFn('${name} is now the king of ${country}!');
+ *
+ *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
+ *    // Logs 'Bryan is now the king of Scotland!'
+ */
+export const generateTemplateFn = (function () {
+  const cache = {};
+  function generateTemplate(template) {
+    if (typeof template !== "string") {
+      template = template.outerHTML;
+    }
+    let fn = cache[template];
+    if (!fn) {
+      // Replace ${expressions} (etc) with ${map.expressions}.
+      const sanitized = template
+        .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function (_, match) {
+        return `\$\{map.${match.trim()}\}`;
+      })
+        // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
+        .replace(/(\$\{(?!map\.)[^}]+\})/g, "");
+      fn = Function("map", `return \`${sanitized}\``);
+    }
+    return fn;
+  }
+  return generateTemplate;
+})();

package/lib/collection/utils/token-utils.js

@@ -2,24 +2,77 @@
  * Built with Duet Design System
  */
 import * as tokens from "@duetds/tokens";
-const MATCH_DASH_CASE = /-([a-z])/g;
-function replaceDashCase(g) {
-  return g[1].toUpperCase();
+const allowedThemes = ["turva"];
+const MATCH_CAPITAL_CASE = /[A-Z]/g;
+export function isCamelCase(str) {
+  const camel = MATCH_CAPITAL_CASE.test(str);
+  const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
+  return camel && barredString;
 }
-function convertToCamelCase(string) {
-  return string.replace(MATCH_DASH_CASE, replaceDashCase);
+export function isDashCase(str) {
+  const dash = str.includes("-");
+  const barredString = str.includes(" ") || str.includes("_");
+  const barredStartingString = str.charAt(0) === "-";
+  return dash && !barredString && !barredStartingString;
 }
-export function convertToColorName(name) {
-  if (name.indexOf("color-") === -1 && name.indexOf("-") !== -1) {
-    return convertToCamelCase(`color-${name}`);
+export function capitalize(str = "") {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+}
+function lowerCaseFirst(str = "") {
+  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
+}
+export function camelize(str = "") {
+  const arr = str.split("-");
+  //loop through each element of the array and capitalize the first letter.'
+  arr.forEach((string, index) => {
+    arr[index] = capitalize(string);
+  });
+  return arr.join("");
+}
+export function getTheme(theme = "") {
+  if (allowedThemes.includes(theme.toLowerCase())) {
+    return theme.toLowerCase();
+  }
+  return "";
+}
+function hasColor(str = "") {
+  return str.indexOf("Color") === 0 || str.indexOf("color") === 0;
+}
+function addColor(str = "") {
+  if (str && !isDashCase(str) && !hasColor(str)) {
+    return `color${capitalize(str)}`;
+  }
+  return str;
+}
+function addTheme(str, theme) {
+  const hasTheme = getTheme(theme).length;
+  if (hasTheme && str.indexOf(theme) === -1) {
+    return `${str}${capitalize(theme)}`;
+  }
+  return str;
+}
+export function getColorByName(name, theme = "") {
+  if (!name) {
+    return undefined;
   }
-  if (name.indexOf("color") === -1) {
-    return convertToCamelCase(`color${name.charAt(0).toUpperCase()}${name.slice(1)}`);
+  const defaultColor = convertToColorName(name);
+  const themedColor = convertToColorName(name, theme);
+  // lets just try to get the color first to save some cycles
+  let resolvedToken = tokens[themedColor];
+  if (!resolvedToken) {
+    resolvedToken = tokens[defaultColor];
   }
-  return convertToCamelCase(name);
+  return resolvedToken;
 }
-export function getColorByName(name) {
-  if (name) {
-    return tokens[convertToColorName(name)];
+export function convertToColorName(name = "", theme = "") {
+  let colorResolution = name;
+  const dash = isDashCase(name);
+  if (dash) {
+    colorResolution = camelize(colorResolution);
   }
+  colorResolution = addColor(colorResolution);
+  colorResolution = addTheme(colorResolution, theme);
+  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
+  colorResolution = lowerCaseFirst(colorResolution);
+  return colorResolution;
 }