@vonage/vivid 4.15.0 → 4.16.0

package/custom-elements.json

@@ -22061,6 +22061,14 @@
             }
           ],
           "description": "Rounds a value to the nearest step value. Handles decimal rounding."
+        },
+        {
+          "kind": "variable",
+          "name": "defaultToOneConverter",
+          "type": {
+            "text": "object"
+          },
+          "default": "{\n\tfromView(value: string | number): number {\n\t\tconst num = Number(value);\n\t\treturn handleStepValue(num);\n\t},\n\ttoView(value: number): string {\n\t\treturn value.toString();\n\t},\n}"
         }
       ],
       "exports": [
@@ -22071,6 +22079,14 @@
             "name": "roundToStepValue",
             "module": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultToOneConverter",
+          "declaration": {
+            "name": "defaultToOneConverter",
+            "module": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts"
+          }
         }
       ]
     },

package/lib/range-slider/utils/roundToStepValue.d.ts

@@ -1 +1,5 @@
 export declare const roundToStepValue: (value: number, step: number) => number;
+export declare const defaultToOneConverter: {
+    fromView(value: string | number): number;
+    toView(value: number): string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.15.0",
+	"version": "4.16.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition41.cjs

@@ -483,7 +483,7 @@ __decorateClass([
   vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "max", 2);
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  vividElement.attr({ converter: slider_template.defaultToOneConverter })
 ], RangeSlider.prototype, "step", 2);
 __decorateClass([
   vividElement.attr

package/shared/definition41.js

@@ -3,7 +3,7 @@ import { V as VividElement, o as observable, a as attr, n as nullableNumberConve
 import { g as keyHome, d as keyEnd, e as keyArrowUp, h as keyArrowLeft, f as keyArrowDown, i as keyArrowRight } from './key-codes.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { i as inverseLerp, l as lerp, r as roundToStepValue, g as getMarkersTemplate } from './slider.template.js';
+import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from './slider.template.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';
 import { f as formElements } from './form-elements.js';
@@ -481,7 +481,7 @@ __decorateClass([
   attr({ converter: nullableNumberConverter })
 ], RangeSlider.prototype, "max", 2);
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
+  attr({ converter: defaultToOneConverter })
 ], RangeSlider.prototype, "step", 2);
 __decorateClass([
   attr

package/shared/definition43.cjs

@@ -150,12 +150,12 @@ let Select = class extends FormAssociatedSelect {
         this.rangeStartIndex = this.activeIndex;
       }
       this.options.forEach((o, i) => {
-        o.checked = numbers.inRange(i, this.rangeStartIndex, this.options.length);
+        o.checked = numbers.inRange(i, this.rangeStartIndex, this.length);
       });
     } else {
       this.uncheckAllOptions();
     }
-    this.activeIndex = this.options.length - 1;
+    this.activeIndex = this.length - 1;
     this.checkActiveIndex();
   }
   /**
@@ -179,7 +179,7 @@ let Select = class extends FormAssociatedSelect {
     } else {
       this.uncheckAllOptions();
     }
-    this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
+    this.activeIndex += this.activeIndex < this.length - 1 ? 1 : 0;
     this.checkActiveIndex();
   }
   /**
@@ -346,7 +346,7 @@ let Select = class extends FormAssociatedSelect {
   }
   set value(next) {
     const prev = `${this._value}`;
-    if (this._options.length) {
+    if (this.length) {
       const selectedIndex = this._options.findIndex((el) => el.value === next);
       const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
       const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
@@ -523,7 +523,7 @@ let Select = class extends FormAssociatedSelect {
    */
   setProxyOptions() {
     if (this.proxy instanceof HTMLSelectElement && this.options) {
-      this.proxy.options.length = 0;
+      this.proxy.length = 0;
       this.options.forEach((option) => {
         const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
         if (proxyOption) {

package/shared/definition43.js

@@ -148,12 +148,12 @@ let Select = class extends FormAssociatedSelect {
         this.rangeStartIndex = this.activeIndex;
       }
       this.options.forEach((o, i) => {
-        o.checked = inRange(i, this.rangeStartIndex, this.options.length);
+        o.checked = inRange(i, this.rangeStartIndex, this.length);
       });
     } else {
       this.uncheckAllOptions();
     }
-    this.activeIndex = this.options.length - 1;
+    this.activeIndex = this.length - 1;
     this.checkActiveIndex();
   }
   /**
@@ -177,7 +177,7 @@ let Select = class extends FormAssociatedSelect {
     } else {
       this.uncheckAllOptions();
     }
-    this.activeIndex += this.activeIndex < this.options.length - 1 ? 1 : 0;
+    this.activeIndex += this.activeIndex < this.length - 1 ? 1 : 0;
     this.checkActiveIndex();
   }
   /**
@@ -344,7 +344,7 @@ let Select = class extends FormAssociatedSelect {
   }
   set value(next) {
     const prev = `${this._value}`;
-    if (this._options.length) {
+    if (this.length) {
       const selectedIndex = this._options.findIndex((el) => el.value === next);
       const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
       const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
@@ -521,7 +521,7 @@ let Select = class extends FormAssociatedSelect {
    */
   setProxyOptions() {
     if (this.proxy instanceof HTMLSelectElement && this.options) {
-      this.proxy.options.length = 0;
+      this.proxy.length = 0;
       this.options.forEach((option) => {
         const proxyOption = option.proxy || (option instanceof HTMLOptionElement ? option.cloneNode() : null);
         if (proxyOption) {

package/shared/definition46.cjs

@@ -449,7 +449,7 @@ __decorateClass([
   vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "max", 2);
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  vividElement.attr({ converter: slider_template.defaultToOneConverter })
 ], Slider.prototype, "step", 2);
 __decorateClass([
   vividElement.attr

package/shared/definition46.js

@@ -3,7 +3,7 @@ import { V as VividElement, a as attr, o as observable, v as volatile, n as null
 import { g as keyHome, d as keyEnd, f as keyArrowDown, h as keyArrowLeft, e as keyArrowUp, i as keyArrowRight } from './key-codes.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
+import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, S as SliderTemplate } from './slider.template.js';
 import { F as FormAssociated } from './form-associated.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';
@@ -447,7 +447,7 @@ __decorateClass([
   attr({ converter: nullableNumberConverter })
 ], Slider.prototype, "max", 2);
 __decorateClass([
-  attr({ converter: nullableNumberConverter })
+  attr({ converter: defaultToOneConverter })
 ], Slider.prototype, "step", 2);
 __decorateClass([
   attr

package/shared/slider.template.cjs

@@ -23,6 +23,16 @@ const roundToStepValue = (value, step) => {
   const roundedValue = Math.round(value / step) * step;
   return Math.round(roundedValue * factor) / factor;
 };
+const handleStepValue = (step) => step > 0 ? step : 1;
+const defaultToOneConverter = {
+  fromView(value) {
+    const num = Number(value);
+    return handleStepValue(num);
+  },
+  toView(value) {
+    return value.toString();
+  }
+};
 
 const lerp = (a, b, value) => a + (b - a) * value;
 const inverseLerp = (a, b, value) => numbers.limit(0, 1, (value - a) / (b - a));
@@ -97,6 +107,7 @@ const SliderTemplate = (context) => {
 };
 
 exports.SliderTemplate = SliderTemplate;
+exports.defaultToOneConverter = defaultToOneConverter;
 exports.getMarkersTemplate = getMarkersTemplate;
 exports.inverseLerp = inverseLerp;
 exports.lerp = lerp;

package/shared/slider.template.js

@@ -21,6 +21,16 @@ const roundToStepValue = (value, step) => {
   const roundedValue = Math.round(value / step) * step;
   return Math.round(roundedValue * factor) / factor;
 };
+const handleStepValue = (step) => step > 0 ? step : 1;
+const defaultToOneConverter = {
+  fromView(value) {
+    const num = Number(value);
+    return handleStepValue(num);
+  },
+  toView(value) {
+    return value.toString();
+  }
+};
 
 const lerp = (a, b, value) => a + (b - a) * value;
 const inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
@@ -94,4 +104,4 @@ const SliderTemplate = (context) => {
 	>`;
 };
 
-export { SliderTemplate as S, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };
+export { SliderTemplate as S, defaultToOneConverter as d, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:17 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:36 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 13 Feb 2025 13:39:16 GMT
+ * Generated on Fri, 14 Feb 2025 16:50:35 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {