@vonage/vivid 5.16.0 → 5.18.0

package/unbundled/listbox.cjs

@@ -1,7 +1,7 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition27.cjs");
+const require_definition = require("./definition29.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/shared/foundation/listbox/listbox.ts

package/unbundled/listbox.js

@@ -1,6 +1,6 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { i as isListboxOption } from "./definition27.js";
+import { i as isListboxOption } from "./definition29.js";
 import { Observable, attr, observable } from "@microsoft/fast-element";
 import { findLastIndex, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
 //#region src/shared/foundation/listbox/listbox.ts

package/unbundled/localized.cjs

@@ -1,11 +1,11 @@
 require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_en_US = require("./en-US.cjs");
+const require_locales_en_US = require("../locales/en-US.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/localization/index.ts
 var CurrentLocale = class {
 	constructor() {
-		this.locale = require_en_US.enUS;
+		this.locale = require_locales_en_US;
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.observable], CurrentLocale.prototype, "locale", void 0);

package/unbundled/localized.js

@@ -1,5 +1,5 @@
 import { t as __decorate } from "./decorate.js";
-import { t as enUS } from "./en-US.js";
+import enUS from "../locales/en-US.js";
 import { ExecutionContext, Observable, observable } from "@microsoft/fast-element";
 //#region src/shared/localization/index.ts
 var CurrentLocale = class {

package/unbundled/numberConverter.cjs

@@ -0,0 +1,91 @@
+//#region src/shared/icon/icon-placeholder.ts
+var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var version = "4.10.0";
+var ICONS_BASE_URL = "https://icon.resources.vonage.com";
+var ICONS_VERSION = version;
+`${ICONS_BASE_URL}${ICONS_VERSION}`;
+//#endregion
+//#region src/shared/icon/utils.ts
+var baseUrlTemplate = (resource, version) => [
+	ICONS_BASE_URL,
+	`v${version}`,
+	resource
+].join("/");
+var assertIsValidResponse = ({ ok, headers }) => {
+	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
+};
+var extractSvg = (response) => {
+	assertIsValidResponse(response);
+	return response.text();
+};
+var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
+var normalizeKey = (iconId) => (iconId ?? "").trim();
+var iconCache = /* @__PURE__ */ new Map();
+var resolveIcon = (iconId, signal) => {
+	const key = normalizeKey(iconId);
+	if (!key) return Promise.resolve("");
+	const cached = iconCache.get(key);
+	if (cached && !cached.signal?.aborted) return cached.promise;
+	const promise = loadSvg(key, signal).then((svg) => {
+		const entry = iconCache.get(key);
+		if (entry && entry.promise === promise && signal.aborted) {
+			iconCache.delete(key);
+			throw signal.reason ?? new DOMException("Aborted", "AbortError");
+		}
+		return svg;
+	}).catch((err) => {
+		const entry = iconCache.get(key);
+		if (entry && entry.promise === promise) iconCache.delete(key);
+		throw err;
+	});
+	iconCache.set(key, {
+		promise,
+		signal
+	});
+	return promise;
+};
+//#endregion
+//#region src/shared/utils/numberConverter.ts
+var numberConverter = {
+	toView(value) {
+		if (value === void 0) return null;
+		return value.toString();
+	},
+	fromView(value) {
+		if (typeof value === "string") value = parseFloat(value.toString());
+		if (typeof value !== "number") return;
+		return isNaN(value) || !isFinite(value) ? void 0 : value;
+	}
+};
+//#endregion
+Object.defineProperty(exports, "PLACEHOLDER_ICON", {
+	enumerable: true,
+	get: function() {
+		return PLACEHOLDER_ICON;
+	}
+});
+Object.defineProperty(exports, "numberConverter", {
+	enumerable: true,
+	get: function() {
+		return numberConverter;
+	}
+});
+Object.defineProperty(exports, "resolveIcon", {
+	enumerable: true,
+	get: function() {
+		return resolveIcon;
+	}
+});

package/unbundled/numberConverter.js

@@ -0,0 +1,74 @@
+//#region src/shared/icon/icon-placeholder.ts
+var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var version = "4.10.0";
+var ICONS_BASE_URL = "https://icon.resources.vonage.com";
+var ICONS_VERSION = version;
+`${ICONS_BASE_URL}${ICONS_VERSION}`;
+//#endregion
+//#region src/shared/icon/utils.ts
+var baseUrlTemplate = (resource, version) => [
+	ICONS_BASE_URL,
+	`v${version}`,
+	resource
+].join("/");
+var assertIsValidResponse = ({ ok, headers }) => {
+	if (!ok || headers.get("content-type") !== "image/svg+xml") throw new Error("Something went wrong");
+};
+var extractSvg = (response) => {
+	assertIsValidResponse(response);
+	return response.text();
+};
+var loadSvg = (iconId, signal) => fetch(baseUrlTemplate(`${iconId}.svg`, ICONS_VERSION), { signal }).then(extractSvg);
+var normalizeKey = (iconId) => (iconId ?? "").trim();
+var iconCache = /* @__PURE__ */ new Map();
+var resolveIcon = (iconId, signal) => {
+	const key = normalizeKey(iconId);
+	if (!key) return Promise.resolve("");
+	const cached = iconCache.get(key);
+	if (cached && !cached.signal?.aborted) return cached.promise;
+	const promise = loadSvg(key, signal).then((svg) => {
+		const entry = iconCache.get(key);
+		if (entry && entry.promise === promise && signal.aborted) {
+			iconCache.delete(key);
+			throw signal.reason ?? new DOMException("Aborted", "AbortError");
+		}
+		return svg;
+	}).catch((err) => {
+		const entry = iconCache.get(key);
+		if (entry && entry.promise === promise) iconCache.delete(key);
+		throw err;
+	});
+	iconCache.set(key, {
+		promise,
+		signal
+	});
+	return promise;
+};
+//#endregion
+//#region src/shared/utils/numberConverter.ts
+var numberConverter = {
+	toView(value) {
+		if (value === void 0) return null;
+		return value.toString();
+	},
+	fromView(value) {
+		if (typeof value === "string") value = parseFloat(value.toString());
+		if (typeof value !== "number") return;
+		return isNaN(value) || !isFinite(value) ? void 0 : value;
+	}
+};
+//#endregion
+export { resolveIcon as n, PLACEHOLDER_ICON as r, numberConverter as t };

package/unbundled/picker-field.template.cjs

@@ -11,7 +11,7 @@ const require_definition = require("./definition7.cjs");
 const require_dialog = require("./dialog.cjs");
 const require_definition$1 = require("./definition10.cjs");
 const require_mixins = require("./mixins.cjs");
-const require_definition$2 = require("./definition25.cjs");
+const require_definition$2 = require("./definition26.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/shared/picker-field/picker-field.scss?inline
@@ -149,6 +149,7 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 		this.$emit("clear-click");
 	}
 };
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], PickerField.prototype, "scale", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "readonly",
 	mode: "boolean"
@@ -171,6 +172,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 				error-text='${(x) => x.errorValidationMessage}'
 				placeholder='${(x) => x._textFieldPlaceholder}'
 				size='${(x) => x._textFieldSize}'
+				scale='${(x) => x.scale}'
 				current-value='${(x) => x._presentationValue}'
 				?disabled='${(x) => x.disabled}'
 				?readonly='${(x) => x.readOnly}'

package/unbundled/picker-field.template.js

@@ -10,7 +10,7 @@ import { i as Button } from "./definition7.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup } from "./definition10.js";
 import { t as WithFeedback } from "./mixins.js";
-import { r as TextField } from "./definition25.js";
+import { r as TextField } from "./definition26.js";
 import { ExecutionContext, Observable, attr, html, observable, ref, slotted } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/shared/picker-field/picker-field.scss?inline
@@ -148,6 +148,7 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 		this.$emit("clear-click");
 	}
 };
+__decorate([attr()], PickerField.prototype, "scale", void 0);
 __decorate([attr({
 	attribute: "readonly",
 	mode: "boolean"
@@ -170,6 +171,7 @@ var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padde
 				error-text='${(x) => x.errorValidationMessage}'
 				placeholder='${(x) => x._textFieldPlaceholder}'
 				size='${(x) => x._textFieldSize}'
+				scale='${(x) => x.scale}'
 				current-value='${(x) => x._presentationValue}'
 				?disabled='${(x) => x.disabled}'
 				?readonly='${(x) => x.readOnly}'