@duetds/components 5.1.9 → 5.2.2

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

@@ -2,9 +2,9 @@
  * 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 { cleanValue } from "../../utils/input-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
   if (maxlength == null) {
     return;
@@ -35,6 +35,18 @@ export class DuetTextarea {
      * 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;
     /**
      * Theme of the textarea.
      */
@@ -185,7 +197,9 @@ export class DuetTextarea {
         this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)),
         h("div", { class: "duet-textarea-wrapper" },
           this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)),
-          h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })),
+          h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
+              ? `${this.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
+              : `${this.labelId} ${this.errorId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })),
         h("duet-grid", { alignment: "stretch" },
           h("duet-grid-item", { margin: "none", fill: true },
             h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))),
@@ -274,6 +288,60 @@ export class DuetTextarea {
       "attribute": "accessible-controls",
       "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"
+    },
     "accessibleOwns": {
       "type": "string",
       "mutable": false,

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.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/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);