@vonage/vivid 4.15.0 → 4.16.1

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.1",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition25.cjs

@@ -2466,7 +2466,7 @@ const FilePickerTemplate = (context) => {
     x.setButtonTag(context.tagFor(definition.Button));
     x.setIconTag(context.tagFor(definition$1.Icon));
   }}
-		<div class="base" aria-label="${(x) => x.label}">
+		<div class="base">
 			${when.when(
     (x) => x.label,
     vividElement.html`<label>${(x) => x.label}</label>`

package/shared/definition25.js

@@ -2464,7 +2464,7 @@ const FilePickerTemplate = (context) => {
     x.setButtonTag(context.tagFor(Button));
     x.setIconTag(context.tagFor(Icon));
   }}
-		<div class="base" aria-label="${(x) => x.label}">
+		<div class="base">
 			${when(
     (x) => x.label,
     html`<label>${(x) => x.label}</label>`

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