@duetds/components 5.2.0 → 5.2.3

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

@@ -8,7 +8,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocale, getLocaleString } from "../../utils/language-utils";
-import { clamp, parseLocaleFloat, roundTo } from "./number-input-utils";
+import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
 export class DuetNumberInput {
   constructor() {
     this.inputId = createID("DuetInput");
@@ -174,7 +174,7 @@ export class DuetNumberInput {
     this.handleChange = (ev) => {
       const input = ev.target;
       if (input && input.value) {
-        let value = this.cleanValue(input.value);
+        let value = SafeParseFloat(input.value, this.locale);
         // Make sure that everything works if the user clears the input and
         // starts typing non-numeric characters.
         if (isNaN(value) || value == null) {
@@ -184,7 +184,7 @@ export class DuetNumberInput {
         this.duetInput.emit({
           component: "duet-number-input",
           originalEvent: ev,
-          value: this.cleanValue(this.value).toString(),
+          value: SafeParseFloat(this.value, this.locale).toString(),
           valueAsNumber: value,
         });
       }
@@ -205,30 +205,29 @@ export class DuetNumberInput {
       if (input.value) {
         // On blur we want to make sure that the user input is between the min and max values,
         // and also round it up or down to the nearest step.
-        let value = this.cleanValue(input.value);
+        let value = SafeParseFloat(input.value, this.locale);
         if (this.rounding) {
           value = roundTo(value, this.step);
         }
         value = clamp(value, this.min, this.max);
-        if (value !== this.cleanValue(this.value) || value !== this.cleanValue(this.focusedValue)) {
+        if (value !== SafeParseFloat(this.value, this.locale) ||
+          value !== SafeParseFloat(this.focusedValue, this.locale)) {
           this.setValue(value);
           this.emitChange(ev);
         }
       }
-      else {
-        this.duetChange.emit({
-          originalEvent: ev,
-          value: null,
-          valueAsNumber: null,
-          component: "duet-number-input",
-        });
-      }
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: null,
+        valueAsNumber: null,
+        component: "duet-number-input",
+      });
     };
     /**
      * Local methods.
      */
     this.emitChange = (ev) => {
-      const currentValue = this.cleanValue(this.value);
+      const currentValue = SafeParseFloat(this.value, this.locale);
       this.duetChange.emit({
         originalEvent: ev,
         value: currentValue.toString(),
@@ -236,10 +235,6 @@ export class DuetNumberInput {
         component: "duet-number-input",
       });
     };
-    this.cleanValue = (value) => {
-      // Returns a number that can be used in calculations.
-      return value ? parseLocaleFloat(value, this.locale) : null;
-    };
     this.localizeValue = (value) => {
       // Returns a localized string that can be used as input value.
       return value.toLocaleString(this.locale);
@@ -256,13 +251,13 @@ export class DuetNumberInput {
       if (ev) {
         ev.preventDefault();
       }
-      const currentValue = this.cleanValue(this.value);
+      const cleanedValue = SafeParseFloat(this.value, this.locale);
       // Only fire change event when necessary
-      if (currentValue === this.max) {
+      if (cleanedValue === this.max) {
         return;
       }
       // in cases where no value set, incrementing should go to min
-      let newValue = currentValue == null ? this.min : currentValue + this.step;
+      let newValue = cleanedValue == null ? this.min : cleanedValue + this.step;
       // handle cases where value is not multiple of step
       // e.g. if someone enters 199, with a step of 100, add should go to 200
       // and if someone enters 101, add should also go to 200
@@ -270,8 +265,8 @@ export class DuetNumberInput {
         const adjustment = newValue % this.step;
         newValue -= adjustment;
       }
-      newValue = clamp(newValue, this.min, this.max);
-      this.value = this.localizeValue(newValue);
+      const clampedValue = clamp(newValue, this.min, this.max);
+      this.value = this.localizeValue(clampedValue);
       this.emitChange(ev);
     };
     this.subtract = (ev) => {
@@ -280,7 +275,7 @@ export class DuetNumberInput {
       if (ev) {
         ev.preventDefault();
       }
-      const currentValue = this.cleanValue(this.value);
+      const currentValue = SafeParseFloat(this.value, this.locale);
       // Only fire change event when necessary.
       if (currentValue === this.min) {
         return;
@@ -305,7 +300,7 @@ export class DuetNumberInput {
     inheritGlobalTheme(this);
     // Format the number value to a localeString initially.
     if (this.value) {
-      this.value = this.localizeValue(parseLocaleFloat(this.value, this.locale));
+      this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
   /**
@@ -320,7 +315,7 @@ export class DuetNumberInput {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = this.cleanValue(this.value);
+    const current = SafeParseFloat(this.value, this.locale);
     if (current == null) {
       return "";
     }
@@ -333,7 +328,7 @@ export class DuetNumberInput {
   render() {
     const identifier = this.identifier || this.inputId;
     const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
-    const cleanedValue = this.cleanValue(this.value);
+    const cleanedValue = SafeParseFloat(this.value, this.locale);
     return (h(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,

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

@@ -130,6 +130,7 @@ export class DuetPagination {
           await this.setFocus();
         }
       }
+      return true;
     };
     //helper to emit relevant page events
     this.emitPageEvent = debounce((ev, passedPage) => {
@@ -143,7 +144,7 @@ export class DuetPagination {
         type: "page",
         originalEvent: ev,
       });
-    }, 500);
+    }, 100);
     // this will return the entered number, or the current page if the user presses enter
     this.getEnteredNumber = debounce(ev => {
       this.emitPageEvent(ev, this.numbersStore);
@@ -161,7 +162,7 @@ export class DuetPagination {
     }, 500);
   }
   watchStateHandler(newValue, oldValue) {
-    this.actionChain(newValue, oldValue);
+    return this.actionChain(newValue, oldValue);
   }
   /**
    * Component lifecycle events.
@@ -189,6 +190,7 @@ export class DuetPagination {
     e.preventDefault();
     e.stopPropagation();
     this.current = this.current + dir;
+    this.emitPageEvent(e);
   }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
@@ -231,8 +233,9 @@ export class DuetPagination {
   sectionClickHandler(e, direction) {
     e.preventDefault();
     let next = this.internalSectionIndex + direction;
-    if (next >= this.totalPages / this.take) {
-      next = this.totalPages / this.take - 1;
+    const takePerVisibleItems = this.take * this.visibleItems;
+    if (next * takePerVisibleItems > this.total) {
+      next = this.internalSectionIndex;
     }
     const newSection = next;
     this.internalSectionIndex = newSection >= 0 ? newSection : 0;
@@ -242,12 +245,14 @@ export class DuetPagination {
     e.preventDefault();
     this.internalSectionIndex = 0;
     this.current = 1;
+    this.emitPageEvent(e);
   }
   //handles click on the jump (total) button
   jumpToEnd(e) {
     e.preventDefault();
-    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
     this.current = this.totalPages;
+    this.emitPageEvent(e);
   }
   // render the individual page numbers
   renderPageNumbers() {
@@ -300,18 +305,18 @@ export class DuetPagination {
             h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small" })),
           this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null,
             h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" },
-              h("duet-button", { class: "duet-pagination-link", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) },
+              h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) },
                 h("div", { class: "duet-pagination-page-number" }, "1"))),
             h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" },
-              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) },
+              h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) },
                 h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))),
           this.renderPageNumbers(),
-          this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (h(Fragment, null,
+          this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h(Fragment, null,
             h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" },
-              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) },
+              h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) },
                 h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))),
             h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" },
-              h("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) },
+              h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) },
                 h("div", { class: "duet-pagination-page-number" }, this.totalPages))))),
           h("li", { class: {
               "duet-pagination-page-button": true,
@@ -507,7 +512,7 @@ export class DuetPagination {
     },
     "take": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -525,7 +530,7 @@ export class DuetPagination {
     },
     "visibleItems": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -543,7 +548,7 @@ export class DuetPagination {
     },
     "total": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -63,15 +63,15 @@ export class DuetRangeStepper {
       this.handleStepClick(e);
     };
   }
-  watchStateHandler(newValue) {
-    if (newValue === 1) {
+  watchStepIndexStateHandler(newValue) {
+    if (newValue <= 1) {
       this.leftBnRef.setAttribute("disabled", "");
       this.rightBnRef.focus();
     }
     else {
       this.leftBnRef.removeAttribute("disabled");
     }
-    if (newValue === this.total / this.stepSize) {
+    if (newValue >= this.total / this.stepSize) {
       this.rightBnRef.setAttribute("disabled", "");
       this.leftBnRef.focus();
     }
@@ -79,12 +79,20 @@ export class DuetRangeStepper {
       this.rightBnRef.removeAttribute("disabled");
     }
   }
+  watchStepSizeStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      if (this.stepIndex * newValue > this.total) {
+        this.stepIndex = this.total / newValue;
+      }
+    }
+  }
   handleStepClick(e) {
+    const from = this.stepIndex * this.stepSize - this.stepSize;
     this.duetRangeStepUpdate.emit({
       originalEvent: e,
       component: "duet-range-stepper",
-      from: this.stepIndex * this.stepSize - this.stepSize,
-      to: this.stepIndex * this.stepSize,
+      from: from,
+      to: this.getTo(),
       index: this.stepIndex,
     });
   }
@@ -92,7 +100,7 @@ export class DuetRangeStepper {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.watchStateHandler(this.stepIndex);
+    this.watchStepIndexStateHandler(this.stepIndex);
   }
   increment(direction) {
     const newIndex = this.stepIndex + direction;
@@ -100,22 +108,28 @@ export class DuetRangeStepper {
       this.stepIndex = 1;
     }
     else {
-      if (newIndex * this.stepSize <= this.total) {
+      if (newIndex * this.stepSize < this.total + this.stepSize) {
         this.stepIndex = newIndex;
       }
-      else {
+      else if (newIndex * this.stepSize > this.total + this.stepSize) {
+        this.stepIndex = Math.floor(this.total / this.stepSize);
       }
     }
   }
+  getTo() {
+    const to = this.stepIndex * this.stepSize;
+    const result = to > this.total ? this.total : to;
+    return result;
+  }
   generateStepSize() {
     // this function uses this.stepIndex and this.range to generate a range of number like 1-100
     // this is used to generate the step size
-    let start = (this.stepIndex - 1) * this.stepSize;
+    let start = Math.floor((this.stepIndex - 1) * this.stepSize);
     //easy fix for starting position
     if (start === 0) {
       start = 1;
     }
-    const end = this.stepIndex * this.stepSize;
+    const end = Math.floor(this.stepIndex * this.stepSize);
     return this.ariaLabels.x_of_y
       .replace("{0}", String(start))
       .replace("{1}", String(end))
@@ -335,6 +349,9 @@ export class DuetRangeStepper {
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "stepIndex",
-      "methodName": "watchStateHandler"
+      "methodName": "watchStepIndexStateHandler"
+    }, {
+      "propName": "stepSize",
+      "methodName": "watchStepSizeStateHandler"
     }]; }
 }

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

@@ -71,15 +71,14 @@ duet-table .duet-table-action-row td:last-child {
   white-space: nowrap;
 }
 
-.duet-table-flattened tbody tr {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-auto-rows: auto;
-  gap: 10px;
-}
-.duet-table-flattened tbody tr.duet-table-action-row td:last-child::before {
-  padding: 0;
-  content: "";
+.duet-table-flattened table,
+.duet-table-flattened thead,
+.duet-table-flattened tbody,
+.duet-table-flattened tfoot,
+.duet-table-flattened th,
+.duet-table-flattened td,
+.duet-table-flattened tr {
+  display: block;
 }
 .duet-table-flattened thead tr {
   position: absolute !important;
@@ -92,20 +91,11 @@ duet-table .duet-table-action-row td:last-child {
   border: 0 !important;
 }
 .duet-table-flattened td {
-  grid-column: 1/2;
   line-height: 1.25;
 }
 .duet-table-flattened td:not(:last-child) {
   margin-bottom: 16px !important;
 }
-.duet-table-flattened td:first-child {
-  grid-row: 1;
-  grid-column: 1;
-}
-.duet-table-flattened td:last-child {
-  grid-row: 1;
-  grid-column: 2;
-}
 .duet-table-flattened tbody td,
 .duet-table-flattened tbody th,
 .duet-table-flattened tfoot td {
@@ -337,4 +327,26 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-actions thead th:last-child {
   width: 1px;
   white-space: nowrap;
+}
+
+.duet-editable-table-table.duet-table-flattened tr {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 10px;
+}
+.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before {
+  padding: 0;
+  content: "";
+}
+.duet-editable-table-table.duet-table-flattened td {
+  grid-column: 1/2;
+}
+.duet-editable-table-table.duet-table-flattened td:first-child {
+  grid-row: 1;
+  grid-column: 1;
+}
+.duet-editable-table-table.duet-table-flattened td:last-child {
+  grid-row: 1;
+  grid-column: 2;
 }

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