@duetds/components 5.2.0 → 5.2.1

package/lib/cjs/duet.cjs.js

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-const index = require('./index-a4844346.js');
+const index = require('./index-3024eb44.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*
- Stencil Client Patch Browser v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.16.0 | MIT Licensed | https://stenciljs.com
  */
 const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
@@ -38,7 +38,7 @@ const patchBrowser = () => {
         if (!index.win.customElements) {
             // module support, but no custom elements support (Old Edge)
             // @ts-ignore
-            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-66424ef2.js'); }).then(() => opts);
+            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-96576bce.js'); }).then(() => opts);
         }
     }
     return index.promiseResolve(opts);

package/lib/cjs/{focus-utils-bfb10d32.js → focus-utils-7b09fa4b.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-a4844346.js');
+const index = require('./index-3024eb44.js');
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/cjs/{index-a4844346.js → index-3024eb44.js}

@@ -24,7 +24,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.3.9"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.3.10"};
 
 let scopeId;
 let contentRef;
@@ -132,7 +132,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -228,7 +228,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let slotName = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -437,7 +437,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -514,7 +514,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -847,7 +847,7 @@ const patch = (oldVNode, newVNode) => {
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNodes = elm.childNodes;
+    const childNodes = elm.childNodes;
     let childNode;
     let i;
     let ilen;
@@ -900,8 +900,8 @@ const relocateSlotContent = (elm) => {
     let relocateNodeData;
     let j;
     let i = 0;
-    let childNodes = elm.childNodes;
-    let ilen = childNodes.length;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
     for (; i < ilen; i++) {
         childNode = childNodes[i];
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
@@ -1746,7 +1746,7 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
             if (!styles.has(scopeId)) {
                 const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
                 if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
-                    style = await Promise.resolve().then(function () { return require('./shadow-css-1ff2f74f.js'); }).then((m) => m.scopeCss(style, scopeId, false));
+                    style = await Promise.resolve().then(function () { return require('./shadow-css-38b9e725.js'); }).then((m) => m.scopeCss(style, scopeId, false));
                 }
                 registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
                 endRegisterStyles();
@@ -2068,7 +2068,9 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     if (module) {
         return module[exportName];
     }
+    /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+    /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */

package/lib/cjs/loader.cjs.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a4844346.js');
+const index = require('./index-3024eb44.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*
- Stencil Client Patch Esm v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.16.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/lib/cjs/{shadow-css-1ff2f74f.js → shadow-css-38b9e725.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 /*
- Stencil Client Platform v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.16.0 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license
@@ -20,7 +20,6 @@
 const safeSelector = (selector) => {
     const placeholders = [];
     let index = 0;
-    let content;
     // Replaces attribute selectors with placeholders.
     // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
     selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
@@ -31,7 +30,7 @@ const safeSelector = (selector) => {
     });
     // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
     // WS and "+" would otherwise be interpreted as selector separators.
-    content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+    const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
         const replaceBy = `__ph-${index}__`;
         placeholders.push(exp);
         index++;

package/lib/collection/collection-manifest.json

@@ -63,7 +63,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.15.0",
+    "version": "2.16.0",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -195,6 +195,7 @@ export class DuetEditableTable {
   render() {
     return (h(Host, { class: {
         [`duet-editable-table-${this.variation}`]: true,
+        "duet-editable-table": true,
         [`duet-editable-table-${this.theme}`]: true,
         // sticky only valid when in regular table layout
         "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
@@ -203,7 +204,7 @@ export class DuetEditableTable {
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
       } },
-      h("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint },
+      h("duet-table", { class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint },
         h("table", { role: this.accessibleRole },
           h("caption", null,
             h("slot", { name: "tcaption" })),

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