@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/slider.template.cjs

@@ -1,48 +1,58 @@
-'use strict';
-
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const fastElement = require('@microsoft/fast-element');
-const popup_definition = require('./definition5.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-
-const getDecimalPlaces = (num) => {
-  const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-  return Math.max(
-    0,
-    // Number of digits right of decimal point.
-    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
-    (match[2] ? +match[2] : 0)
-  );
+require("./chunk.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_definition = require("./definition10.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/range-slider/utils/roundToStepValue.ts
+var getDecimalPlaces = (num) => {
+	const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+	return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
 };
-const roundToStepValue = (value, step) => {
-  const decimalPlaces = getDecimalPlaces(step);
-  const factor = Math.pow(10, decimalPlaces);
-  const roundedValue = Math.round(value / step) * step;
-  return Math.round(roundedValue * factor) / factor;
+/**
+* Rounds a value to the nearest step value. Handles decimal rounding.
+*/
+var roundToStepValue = (value, step) => {
+	const decimalPlaces = getDecimalPlaces(step);
+	const factor = Math.pow(10, decimalPlaces);
+	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();
-  }
+var handleStepValue = (step) => step > 0 ? step : 1;
+var defaultToOneConverter = {
+	fromView(value) {
+		return handleStepValue(Number(value));
+	},
+	toView(value) {
+		return value.toString();
+	}
 };
-
-const lerp = (a, b, value) => a + (b - a) * value;
-const inverseLerp = (a, b, value) => fastWebUtilities.limit(0, 1, (value - a) / (b - a));
-
-const getClasses = ({ disabled, connotation }) => fastWebUtilities.classNames(
-  "control",
-  ["disabled", Boolean(disabled)],
-  [`connotation-${connotation}`, Boolean(connotation)]
-);
-const getThumbClasses = ({ _focusVisible }) => fastWebUtilities.classNames("thumb-container", ["focus-visible", _focusVisible]);
-const getMarkersTemplate = (isHorizontal, numMarkers) => {
-  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return fastElement.html` <div
+//#endregion
+//#region src/lib/range-slider/utils/lerp.ts
+/**
+* Linearly interpolates between two values.
+*/
+var lerp = (a, b, value) => a + (b - a) * value;
+/**
+* Returns the fraction of a value between a and b.
+*/
+var inverseLerp = (a, b, value) => (0, _microsoft_fast_web_utilities.limit)(0, 1, (value - a) / (b - a));
+//#endregion
+//#region src/lib/slider/slider.template.ts
+var getClasses = ({ disabled, connotation }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", Boolean(disabled)], [`connotation-${connotation}`, Boolean(connotation)]);
+var getThumbClasses = ({ _focusVisible }) => (0, _microsoft_fast_web_utilities.classNames)("thumb-container", ["focus-visible", _focusVisible]);
+var getMarkersTemplate = (isHorizontal, numMarkers) => {
+	const placeholder = isHorizontal ? [
+		"right",
+		"center",
+		"",
+		"100% repeat-x"
+	] : [
+		"bottom",
+		"top",
+		"100%",
+		"repeat-y"
+	];
+	return _microsoft_fast_element.html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -50,62 +60,86 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 	"
 	></div>`;
 };
-const SliderTemplate = (context) => {
-  const popupTag = context.tagFor(popup_definition.Popup);
-  return fastElement.html`<template
+var SliderTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html`<template
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
 	>
 		<div
 			tabindex="${(x) => x.disabled ? null : 0}"
 			class="${getClasses} ${(x) => x.orientation}"
-			${delegatesAria.delegateAria({
-    role: "slider",
-    ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
-    ariaValueNow: (x) => x.value,
-    ariaValueMin: (x) => x.min,
-    ariaValueMax: (x) => x.max,
-    ariaDisabled: (x) => x.disabled ? "true" : null,
-    ariaOrientation: (x) => x.orientation
-  })}
+			${require_delegates_aria.delegateAria({
+		role: "slider",
+		ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
+		ariaValueNow: (x) => x.value,
+		ariaValueMin: (x) => x.min,
+		ariaValueMax: (x) => x.max,
+		ariaDisabled: (x) => x.disabled ? "true" : null,
+		ariaOrientation: (x) => x.orientation
+	})}
 		>
 			<div class="positioning-region">
-				<div ${fastElement.ref("track")} class="track">
-					${(x) => x.markers ? getMarkersTemplate(
-    x.orientation === fastWebUtilities.Orientation.horizontal,
-    Math.floor((x.max - x.min) / x.step)
-  ) : void 0}
+				<div ${(0, _microsoft_fast_element.ref)("track")} class="track">
+					${(x) => x.markers ? getMarkersTemplate(x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal, Math.floor((x.max - x.min) / x.step)) : void 0}
 					<div class="track-start" style="${(x) => x.position}"></div>
 				</div>
 				<div
-					${fastElement.ref("thumb")}
+					${(0, _microsoft_fast_element.ref)("thumb")}
 					class="${(x) => getThumbClasses(x)}"
 					style="${(x) => x.position}"
 				></div>
-				${fastElement.when(
-    (x) => x.pin,
-    fastElement.html`<${popupTag}
+				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
 					:anchor="${(x) => x.thumb}"
 					:open=${(x) => x._isThumbPopupOpen}
-					:placementStrategy=${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? popup_definition.PlacementStrategy.AutoPlacementHorizontal : popup_definition.PlacementStrategy.AutoPlacementVertical}
+					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.PlacementStrategy.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
 				>
 					<div class="tooltip">${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}</div>
-				</${popupTag}>`
-  )}
+				</${popupTag}>`)}
 			</div>
 		</div></template
 	>`;
 };
-
-exports.SliderTemplate = SliderTemplate;
-exports.defaultToOneConverter = defaultToOneConverter;
-exports.getMarkersTemplate = getMarkersTemplate;
-exports.inverseLerp = inverseLerp;
-exports.lerp = lerp;
-exports.roundToStepValue = roundToStepValue;
+//#endregion
+Object.defineProperty(exports, "SliderTemplate", {
+	enumerable: true,
+	get: function() {
+		return SliderTemplate;
+	}
+});
+Object.defineProperty(exports, "defaultToOneConverter", {
+	enumerable: true,
+	get: function() {
+		return defaultToOneConverter;
+	}
+});
+Object.defineProperty(exports, "getMarkersTemplate", {
+	enumerable: true,
+	get: function() {
+		return getMarkersTemplate;
+	}
+});
+Object.defineProperty(exports, "inverseLerp", {
+	enumerable: true,
+	get: function() {
+		return inverseLerp;
+	}
+});
+Object.defineProperty(exports, "lerp", {
+	enumerable: true,
+	get: function() {
+		return lerp;
+	}
+});
+Object.defineProperty(exports, "roundToStepValue", {
+	enumerable: true,
+	get: function() {
+		return roundToStepValue;
+	}
+});

package/unbundled/slider.template.js

@@ -1,46 +1,57 @@
-import { limit, classNames, Orientation } from '@microsoft/fast-web-utilities';
-import { ref, when, html } from '@microsoft/fast-element';
-import { P as Popup, a as PlacementStrategy } from './definition5.js';
-import { d as delegateAria } from './delegates-aria.js';
-
-const getDecimalPlaces = (num) => {
-  const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-  return Math.max(
-    0,
-    // Number of digits right of decimal point.
-    (match[1] ? match[1].length : 0) - // Adjust for scientific notation.
-    (match[2] ? +match[2] : 0)
-  );
+import { n as delegateAria } from "./delegates-aria.js";
+import { i as Popup, r as PlacementStrategy } from "./definition10.js";
+import { html, ref, when } from "@microsoft/fast-element";
+import { Orientation, classNames, limit } from "@microsoft/fast-web-utilities";
+//#region src/lib/range-slider/utils/roundToStepValue.ts
+var getDecimalPlaces = (num) => {
+	const match = num.toString().match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+	return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
 };
-const roundToStepValue = (value, step) => {
-  const decimalPlaces = getDecimalPlaces(step);
-  const factor = Math.pow(10, decimalPlaces);
-  const roundedValue = Math.round(value / step) * step;
-  return Math.round(roundedValue * factor) / factor;
+/**
+* Rounds a value to the nearest step value. Handles decimal rounding.
+*/
+var roundToStepValue = (value, step) => {
+	const decimalPlaces = getDecimalPlaces(step);
+	const factor = Math.pow(10, decimalPlaces);
+	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();
-  }
+var handleStepValue = (step) => step > 0 ? step : 1;
+var defaultToOneConverter = {
+	fromView(value) {
+		return handleStepValue(Number(value));
+	},
+	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));
-
-const getClasses = ({ disabled, connotation }) => classNames(
-  "control",
-  ["disabled", Boolean(disabled)],
-  [`connotation-${connotation}`, Boolean(connotation)]
-);
-const getThumbClasses = ({ _focusVisible }) => classNames("thumb-container", ["focus-visible", _focusVisible]);
-const getMarkersTemplate = (isHorizontal, numMarkers) => {
-  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return html` <div
+//#endregion
+//#region src/lib/range-slider/utils/lerp.ts
+/**
+* Linearly interpolates between two values.
+*/
+var lerp = (a, b, value) => a + (b - a) * value;
+/**
+* Returns the fraction of a value between a and b.
+*/
+var inverseLerp = (a, b, value) => limit(0, 1, (value - a) / (b - a));
+//#endregion
+//#region src/lib/slider/slider.template.ts
+var getClasses = ({ disabled, connotation }) => classNames("control", ["disabled", Boolean(disabled)], [`connotation-${connotation}`, Boolean(connotation)]);
+var getThumbClasses = ({ _focusVisible }) => classNames("thumb-container", ["focus-visible", _focusVisible]);
+var getMarkersTemplate = (isHorizontal, numMarkers) => {
+	const placeholder = isHorizontal ? [
+		"right",
+		"center",
+		"",
+		"100% repeat-x"
+	] : [
+		"bottom",
+		"top",
+		"100%",
+		"repeat-y"
+	];
+	return html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -48,9 +59,9 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 	"
 	></div>`;
 };
-const SliderTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
-  return html`<template
+var SliderTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html`<template
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
 	>
@@ -58,21 +69,18 @@ const SliderTemplate = (context) => {
 			tabindex="${(x) => x.disabled ? null : 0}"
 			class="${getClasses} ${(x) => x.orientation}"
 			${delegateAria({
-    role: "slider",
-    ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
-    ariaValueNow: (x) => x.value,
-    ariaValueMin: (x) => x.min,
-    ariaValueMax: (x) => x.max,
-    ariaDisabled: (x) => x.disabled ? "true" : null,
-    ariaOrientation: (x) => x.orientation
-  })}
+		role: "slider",
+		ariaValueText: (x) => x.ariaValueText || x.valueTextFormatter(x.value),
+		ariaValueNow: (x) => x.value,
+		ariaValueMin: (x) => x.min,
+		ariaValueMax: (x) => x.max,
+		ariaDisabled: (x) => x.disabled ? "true" : null,
+		ariaOrientation: (x) => x.orientation
+	})}
 		>
 			<div class="positioning-region">
 				<div ${ref("track")} class="track">
-					${(x) => x.markers ? getMarkersTemplate(
-    x.orientation === Orientation.horizontal,
-    Math.floor((x.max - x.min) / x.step)
-  ) : void 0}
+					${(x) => x.markers ? getMarkersTemplate(x.orientation === Orientation.horizontal, Math.floor((x.max - x.min) / x.step)) : void 0}
 					<div class="track-start" style="${(x) => x.position}"></div>
 				</div>
 				<div
@@ -80,9 +88,7 @@ const SliderTemplate = (context) => {
 					class="${(x) => getThumbClasses(x)}"
 					style="${(x) => x.position}"
 				></div>
-				${when(
-    (x) => x.pin,
-    html`<${popupTag}
+				${when((x) => x.pin, html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
@@ -94,11 +100,10 @@ const SliderTemplate = (context) => {
 					aria-hidden="true"
 				>
 					<div class="tooltip">${(x) => x.ariaValueText || x.valueTextFormatter(x.value)}</div>
-				</${popupTag}>`
-  )}
+				</${popupTag}>`)}
 			</div>
 		</div></template
 	>`;
 };
-
-export { SliderTemplate as S, defaultToOneConverter as d, getMarkersTemplate as g, inverseLerp as i, lerp as l, roundToStepValue as r };
+//#endregion
+export { defaultToOneConverter as a, lerp as i, getMarkersTemplate as n, roundToStepValue as o, inverseLerp as r, SliderTemplate as t };