@duetds/components 5.1.8 → 5.2.1

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

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetToggle {
   constructor() {
     /**
@@ -18,6 +18,18 @@ export class DuetToggle {
      * Controls the margin of the component.
      */
     this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Label for the toggle.
      */
@@ -83,7 +95,7 @@ export class DuetToggle {
         } },
         h("duet-label", { theme: this.theme, for: identifier }, this.label),
         h("label", { class: "duet-switch", htmlFor: identifier },
-          h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }),
+          h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }),
           h("div", { class: "duet-slider" })))));
   }
   static get is() { return "duet-toggle"; }
@@ -209,6 +221,60 @@ export class DuetToggle {
       "attribute": "accessible-described-by",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "label": {
       "type": "string",
       "mutable": false,

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

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetTooltip {
   constructor() {
     /**

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

@@ -3,9 +3,9 @@
  */
 import { sizeHeader } from "@duetds/tokens";
 import { Component, Element, Fragment, h, Listen, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.

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

@@ -83,11 +83,19 @@
   padding-left: 0 !important;
 }
 .duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td {
-  padding: 0.75rem 0 !important;
+  padding: 1rem 0 !important;
 }
 .duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child {
   padding-right: 0 !important;
 }
+.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress {
+  position: relative;
+}
+.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-progress {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
 .duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button) {
   border: 0;
 }

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

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getError, getI18nError } from "./errorcodes.utils";
 import { ErrorItem } from "./upload-editable-item-error";
 import { ProgressItem } from "./upload-editable-item-inprogres";

package/lib/collection/components/duet-upload/upload-editable-item-inprogres.js

@@ -4,5 +4,4 @@
 import { h } from "@stencil/core";
 export const ProgressItem = ({ progress, name }) => (h("span", null,
   h("duet-paragraph", { color: "secondary", margin: "none", size: "small" }, name),
-  h("duet-spacer", { size: "xx-small" }),
   h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));

package/lib/collection/utils/math.utils.js

@@ -0,0 +1,76 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ *  function that takes a string value or number and looks for any character resembling a minus,
+ *  it will then replace it with a hypen-minus and return the parseFloat value of that string
+ *  it will string / number cast the value to a number and return that number
+ *  known issues: if a negative number is indicated with other characters than a "minus like" character, it will throw
+ *  - an example is that some locales use (number) as an indicator for negative values instead of -number
+ */
+export function SafeParseFloat(value, locale) {
+  let results;
+  if (typeof value === "string") {
+    //the minuses are NOT the same characters, they differ in unicode for some languages
+    // "‐", "−", "–", and "—"
+    let convertedMinus = value.replace("−", "-").replace("‐", "-").replace("−", "-").replace("–", "-").replace("—", "-");
+    if (locale) {
+      convertedMinus = ConvertToEnUS(convertedMinus, locale, false);
+    }
+    // replace all possible spaces from the string
+    convertedMinus = convertedMinus.replace(/\s+/g, "");
+    convertedMinus = convertedMinus.replace(/(?!^-?\d*\.{0,1}\d+$)/g, "");
+    /*
+    example: https://regex101.com/r/np7FqS/1
+      /(?!^-?\d*\.{0,1}\d+$)/g
+      Negative Lookahead (?!^-?\d*\.{0,1}\d+$)
+      Assert that the Regex below does not match
+      ^ asserts position at start of a line
+      - matches the character - with index 4510 (2D16 or 558) literally (case sensitive)
+      ? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      * matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
+      \. matches the character . with index 4610 (2E16 or 568) literally (case sensitive)
+      {0,1} matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      + matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy)
+      $ asserts position at the end of a line
+      Global pattern flags
+      g modifier: global. All matches (don't return after first match)
+      m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)
+    */
+    results = parseFloat(convertedMinus);
+  }
+  if (typeof value === "number") {
+    results = parseFloat(String(value));
+  }
+  if (!isNaN(Number(results))) {
+    return Number(results);
+  }
+  if (value === null || value === undefined) {
+    return null;
+  }
+  throw new Error("Invalid value passed to SafeParseFloat");
+}
+// string conversion function that takes a locale and coverts decimal indicator to en-US indicator
+// and takes the thousand separator for the given locale and transforms that to the en-US separator
+export function ConvertToEnUS(value, locale, replaceThousands = false) {
+  let replacedValue;
+  const localeSeparator = new Intl.NumberFormat(locale).format(1 / 2).replace(/[0-9]/g, "");
+  const enUSSeparator = new Intl.NumberFormat("en-US").format(1 / 2).replace(/[0-9]/g, "");
+  const thousandSeparator = new Intl.NumberFormat(locale).format(1000).replace(/[0-9]/g, "");
+  const enUSThousandSeparator = new Intl.NumberFormat("en-US").format(1000).replace(/[0-9]/g, "");
+  // double conversions to avoid ,->. and .->, at the same time resulting in a double conversion
+  replacedValue = value.replace(localeSeparator, "DECIMALSEPARATOR");
+  if (replaceThousands) {
+    replacedValue = replacedValue.replace(thousandSeparator, "THOUSANDSEPARATOR");
+  }
+  else {
+    replacedValue = replacedValue.replace(thousandSeparator, "");
+  }
+  replacedValue = replacedValue.replace("DECIMALSEPARATOR", enUSSeparator);
+  replacedValue = replacedValue.replace("THOUSANDSEPARATOR", enUSThousandSeparator);
+  return replacedValue;
+}
+export const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
+export const clamp = (val, min, max) => Math.min(Math.max(val, min), max);