@nectary/components 5.39.0 → 5.39.1

package/bundle.js

@@ -49,6 +49,9 @@ const DEFAULT_INTEGER_OPTIONS = {
   itemSpaceBetween: 0,
   defaultValue: null
 };
+const DEFAULT_FLOAT_OPTIONS = {
+  fractionDigits: 2
+};
 const applyRange = (value, { min, max }) => {
   let result = value;
   if (min != null) {
@@ -59,6 +62,21 @@ const applyRange = (value, { min, max }) => {
   }
   return result;
 };
+const attrValueToFloat = (value, options) => {
+  const opts = {
+    ...DEFAULT_FLOAT_OPTIONS,
+    ...options
+  };
+  const float = Number.parseFloat(String(value));
+  if (Number.isNaN(float)) {
+    return null;
+  }
+  if (opts.min !== void 0 || opts.max !== void 0) {
+    const rangedFloat = applyRange(float, { min: opts.min, max: opts.max });
+    return rangedFloat.toFixed(opts.fractionDigits);
+  }
+  return float.toFixed(opts.fractionDigits);
+};
 const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
   const { defaultValue = null, itemSizeMultiplier = 1, itemSpaceBetween = 0, addExtraSpace = false } = options;
   let intValue = defaultValue;
@@ -11785,8 +11803,9 @@ class Progress extends NectaryElement {
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case "value": {
-        const int = attrValueToInteger(newVal, { min: 0, max: 100 }) ?? 0;
-        this.#$bar.style.width = `${int}%`;
+        const float = attrValueToFloat(newVal, { min: 0, max: 100, fractionDigits: 2 }) ?? "0";
+        const int = parseInt(float);
+        this.#$bar.style.width = `${float}%`;
         this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
         this.setAttribute("valuenow", int !== null ? String(int) : "0");
         this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.39.0",
+  "version": "5.39.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/progress/index.js

@@ -1,5 +1,5 @@
 import "../text/index.js";
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, attrValueToInteger, getIntegerAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, attrValueToFloat, getIntegerAttribute, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement("template");
@@ -23,8 +23,9 @@ class Progress extends NectaryElement {
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case "value": {
-        const int = attrValueToInteger(newVal, { min: 0, max: 100 }) ?? 0;
-        this.#$bar.style.width = `${int}%`;
+        const float = attrValueToFloat(newVal, { min: 0, max: 100, fractionDigits: 2 }) ?? "0";
+        const int = parseInt(float);
+        this.#$bar.style.width = `${float}%`;
         this.#$text.textContent = Intl.NumberFormat(navigator.language, { style: "percent" }).format(int / 100);
         this.setAttribute("valuenow", int !== null ? String(int) : "0");
         this.setAttribute("aria-valuenow", int !== null ? String(int) : "0");

package/utils/dom.d.ts

@@ -12,13 +12,20 @@ export declare function getLiteralAttribute<T extends readonly string[]>($elemen
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
 export declare const clampNumber: (value: number, min: number, max: number) => number;
 type IntegerOptions = {
-    min?: number;
-    max?: number;
+    min?: number | undefined;
+    max?: number | undefined;
     defaultValue?: number | null;
     itemSizeMultiplier?: number;
     itemSpaceBetween?: number;
     addExtraSpace?: boolean;
 };
+type FloatOptions = {
+    min?: number | undefined;
+    max?: number | undefined;
+    fractionDigits?: number;
+};
+export declare const applyRange: (value: number, { min, max }: IntegerOptions) => number;
+export declare const attrValueToFloat: (value: string | null, options: FloatOptions) => string | null;
 export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
 export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;
 export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, options?: IntegerOptions) => void;

package/utils/dom.js

@@ -52,6 +52,9 @@ const DEFAULT_INTEGER_OPTIONS = {
   itemSpaceBetween: 0,
   defaultValue: null
 };
+const DEFAULT_FLOAT_OPTIONS = {
+  fractionDigits: 2
+};
 const applyRange = (value, { min, max }) => {
   let result = value;
   if (min != null) {
@@ -62,6 +65,21 @@ const applyRange = (value, { min, max }) => {
   }
   return result;
 };
+const attrValueToFloat = (value, options) => {
+  const opts = {
+    ...DEFAULT_FLOAT_OPTIONS,
+    ...options
+  };
+  const float = Number.parseFloat(String(value));
+  if (Number.isNaN(float)) {
+    return null;
+  }
+  if (opts.min !== void 0 || opts.max !== void 0) {
+    const rangedFloat = applyRange(float, { min: opts.min, max: opts.max });
+    return rangedFloat.toFixed(opts.fractionDigits);
+  }
+  return float.toFixed(opts.fractionDigits);
+};
 const attrValueToInteger = (value, options = DEFAULT_INTEGER_OPTIONS) => {
   const { defaultValue = null, itemSizeMultiplier = 1, itemSpaceBetween = 0, addExtraSpace = false } = options;
   let intValue = defaultValue;
@@ -220,6 +238,8 @@ const getTransformedAncestor = (node) => {
   return null;
 };
 export {
+  applyRange,
+  attrValueToFloat,
   attrValueToInteger,
   attrValueToPixels,
   clampNumber,

package/utils/index.js

@@ -1,6 +1,6 @@
 import { Context, subscribeContext } from "./context.js";
 import { CSV_DELIMITER, getFirstCsvValue, packCsv, unpackCsv, updateCsv } from "./csv.js";
-import { attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, composedContains, createScopedElement, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getDeepActiveElement, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
+import { applyRange, attrValueToFloat, attrValueToInteger, attrValueToPixels, clampNumber, cloneNode, composedContains, createScopedElement, getAttribute, getBooleanAttribute, getCssVar, getCssVars, getDeepActiveElement, getIntegerAttribute, getLiteralAttribute, getScrollableParents, getTransformedAncestor, hasClass, isAttrEqual, isAttrTrue, isLiteralValue, isTransformedElement, setClass, shouldReduceMotion, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from "./dom.js";
 import { NectaryElement, defineCustomElement, pascalToKebabCase, registerComponent, resetNectaryRegistry, setNectaryRegistry } from "./element.js";
 import { getRect, getTargetRect, rectOverlap } from "./rect.js";
 import { getFirstFocusableElement, getFirstSlotElement, isElementFocused } from "./slot.js";
@@ -15,6 +15,8 @@ export {
   CSV_DELIMITER,
   Context,
   NectaryElement,
+  applyRange,
+  attrValueToFloat,
   attrValueToInteger,
   attrValueToPixels,
   clampNumber,