@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/picker-field.template.js

@@ -1,204 +1,166 @@
-import { Observable, ExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { a as WithFeedback } from './mixins.js';
-import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
-import { W as WithContextualHelp } from './with-contextual-help.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { F as FormElement } from './form-element.js';
-import { T as TrappedFocus } from './trapped-focus.js';
-import { L as Localized } from './localized.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { P as Popup } from './definition5.js';
-import { VwcTextFieldElement as TextField } from '../text-field/definition.js';
-import { B as Button } from './definition2.js';
-
-const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+import { t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { t as Localized } from "./localized.js";
+import { t as TrappedFocus } from "./trapped-focus.js";
+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 "./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
+var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
+//#endregion
+//#region src/shared/picker-field/picker-field.ts
+/**
+* Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
+* picking values.
+* @testAction clear clearPicker
+* @testRef control shadowTextField [data-vvd-component=text-field].control
+* @testRef pickerButton shadowButton #picker-button
+* @testRef clearButton shadowButton #clear-button
+*/
+var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.readOnly = this.readOnly;
+			this.validate();
+		}
+	}
+	constructor() {
+		super();
+		this.readOnly = false;
+		this.proxy = document.createElement("input");
+		this._popupOpen = false;
+		this._presentationValue = "";
+		this.value = "";
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("click", this.#dismissOnClickOutside);
+		this.addEventListener("focusin", this.#onFocusIn);
+		this.addEventListener("focusout", this.#onFocusOut);
+		this.#startObservingLocaleChanges();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("click", this.#dismissOnClickOutside);
+		this.removeEventListener("focusin", this.#onFocusIn);
+		this.removeEventListener("focusout", this.#onFocusOut);
+		this.#stopObservingLocaleChanges();
+	}
+	#onFocusIn = () => {
+		this.$emit("focus", void 0, { bubbles: false });
+	};
+	#onFocusOut = () => {
+		this.$emit("blur", void 0, { bubbles: false });
+	};
+	/**
+	* @internal
+	*/
+	validate() {
+		if (this.proxy) this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
+		super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
+	}
+	#localeChangeHandler = { handleChange: () => {
+		this._updatePresentationValue();
+	} };
+	#localeChangeObserver;
+	#startObservingLocaleChanges() {
+		this.#localeChangeObserver = Observable.binding(() => this.locale, this.#localeChangeHandler);
+		this.#localeChangeObserver.observe(this, ExecutionContext.default);
+	}
+	#stopObservingLocaleChanges() {
+		this.#localeChangeObserver.dispose();
+	}
+	#dismissOnClickOutside = (event) => {
+		if (!this._popupOpen) return;
+		const path = event.composedPath();
+		if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
+	};
+	#openPopupIfPossible() {
+		/* v8 ignore else -- @preserve */
+		if (!this.readOnly) this._popupOpen = true;
+	}
+	/**
+	* @internal
+	*/
+	_closePopup(restoreFocusToTextField = true) {
+		this._popupOpen = false;
+		if (restoreFocusToTextField) this._textFieldEl.focus();
+	}
+	/**
+	* On keydown anywhere in the picker.
+	* @internal
+	*/
+	_onBaseKeyDown(event) {
+		if (this._popupOpen && handleEscapeKeyAndStopPropogation(event)) {
+			this._closePopup();
+			return false;
+		}
+		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
+		return true;
+	}
+	/**
+	* @internal
+	*/
+	_presentationValueChanged() {
+		this.dirtyValue = true;
+		this.validate();
+	}
+	/**
+	* @internal
+	*/
+	_onTextFieldInput(event) {
+		this._presentationValue = event.currentTarget.value;
+	}
+	/**
+	* @internal
+	*/
+	_onPickerButtonClick() {
+		if (this._popupOpen) this._closePopup();
+		else this.#openPopupIfPossible();
+	}
+	/**
+	* @internal
+	*/
+	_onOkClick() {
+		this._closePopup();
+	}
+	/**
+	* @internal
+	*/
+	_onClearClick() {
+		this.$emit("clear-click");
+	}
 };
-class PickerField extends WithContextualHelp(
-  WithFeedback(
-    WithErrorText(
-      FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
-    )
-  )
-) {
-  // --- Core ---
-  constructor() {
-    super();
-    this.readOnly = false;
-    this.#onFocusIn = () => {
-      this.$emit("focus", void 0, { bubbles: false });
-    };
-    this.#onFocusOut = () => {
-      this.$emit("blur", void 0, { bubbles: false });
-    };
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    // Reformat the presentation value when the locale changes
-    this.#localeChangeHandler = {
-      handleChange: () => {
-        this._updatePresentationValue();
-      }
-    };
-    this._popupOpen = false;
-    this.#dismissOnClickOutside = (event) => {
-      if (!this._popupOpen) {
-        return;
-      }
-      const path = event.composedPath();
-      const elementsToIgnoreClicksOn = [this._dialogEl, this._pickerButtonEl];
-      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
-        this._closePopup(false);
-      }
-    };
-    this._presentationValue = "";
-    this.value = "";
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.#dismissOnClickOutside);
-    this.addEventListener("focusin", this.#onFocusIn);
-    this.addEventListener("focusout", this.#onFocusOut);
-    this.#startObservingLocaleChanges();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.#dismissOnClickOutside);
-    this.removeEventListener("focusin", this.#onFocusIn);
-    this.removeEventListener("focusout", this.#onFocusOut);
-    this.#stopObservingLocaleChanges();
-  }
-  #onFocusIn;
-  #onFocusOut;
-  /**
-   * @internal
-   */
-  validate() {
-    if (this.proxy) {
-      this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
-    }
-    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
-  }
-  #localeChangeHandler;
-  #localeChangeObserver;
-  #startObservingLocaleChanges() {
-    this.#localeChangeObserver = Observable.binding(
-      () => this.locale,
-      this.#localeChangeHandler
-    );
-    this.#localeChangeObserver.observe(this, ExecutionContext.default);
-  }
-  #stopObservingLocaleChanges() {
-    this.#localeChangeObserver.dispose();
-  }
-  #dismissOnClickOutside;
-  #openPopupIfPossible() {
-    if (!this.readOnly) {
-      this._popupOpen = true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _closePopup(restoreFocusToTextField = true) {
-    this._popupOpen = false;
-    if (restoreFocusToTextField) {
-      this._textFieldEl.focus();
-    }
-  }
-  /**
-   * On keydown anywhere in the picker.
-   * @internal
-   */
-  _onBaseKeyDown(event) {
-    if (this._popupOpen && handleEscapeKeyAndStopPropogation(event)) {
-      this._closePopup();
-      return false;
-    }
-    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _presentationValueChanged() {
-    this.dirtyValue = true;
-    this.validate();
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldInput(event) {
-    const textField = event.currentTarget;
-    this._presentationValue = textField.value;
-  }
-  /**
-   * @internal
-   */
-  _onPickerButtonClick() {
-    if (this._popupOpen) {
-      this._closePopup();
-    } else {
-      this.#openPopupIfPossible();
-    }
-  }
-  // --- Dialog footer ---
-  /**
-   * @internal
-   */
-  _onOkClick() {
-    this._closePopup();
-  }
-  /**
-   * @internal
-   */
-  _onClearClick() {
-    this.$emit("clear-click");
-  }
-}
-__decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], PickerField.prototype, "readOnly");
-__decorateClass([
-  observable
-], PickerField.prototype, "_popupOpen");
-__decorateClass([
-  observable
-], PickerField.prototype, "_presentationValue");
-
-const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
-  const popupTag = context.tagFor(Popup);
-  const textFieldTag = context.tagFor(TextField);
-  const buttonTag = context.tagFor(Button);
-  return html`
+__decorate([attr({
+	attribute: "readonly",
+	mode: "boolean"
+})], PickerField.prototype, "readOnly", void 0);
+__decorate([observable], PickerField.prototype, "_popupOpen", void 0);
+__decorate([observable], PickerField.prototype, "_presentationValue", void 0);
+//#endregion
+//#region src/shared/picker-field/picker-field.template.ts
+var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
+	const popupTag = context.tagFor(Popup);
+	const textFieldTag = context.tagFor(TextField);
+	const buttonTag = context.tagFor(Button);
+	return html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
 				${ref("_textFieldEl")}
@@ -242,12 +204,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => classNames("dialog", [
-    "dialog--padded",
-    padded
-  ])}" role='dialog' ${ref(
-    "_dialogEl"
-  )} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
+				<div class="${() => classNames("dialog", ["dialog--padded", padded])}" role='dialog' ${ref("_dialogEl")} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
 					${() => popupContentTemplate}
 					<div class="${() => classNames("footer", ["footer--with-separator", withSeparator])}">
 						<${buttonTag}
@@ -271,5 +228,5 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			</${popupTag}>
 		</div>`;
 };
-
-export { PickerFieldTemplate as P, PickerField as a, pickerFieldStyles as p };
+//#endregion
+export { PickerField as n, picker_field_default as r, PickerFieldTemplate as t };

package/unbundled/playbackRates.cjs

@@ -1,13 +1,20 @@
-'use strict';
-
+//#region src/shared/utils/playbackRates.ts
+/**
+* Parses a playback rates string like '0.5, 1, 1.5, 2'
+*/
 function getPlaybackRatesArray(playbackRates) {
-  if (playbackRates === "") return [];
-  const ratesArray = [];
-  playbackRates.split(",").forEach((numStr) => {
-    const num = Number(numStr);
-    if (!isNaN(num)) ratesArray.push(num);
-  });
-  return ratesArray;
+	if (playbackRates === "") return [];
+	const ratesArray = [];
+	playbackRates.split(",").forEach((numStr) => {
+		const num = Number(numStr);
+		if (!isNaN(num)) ratesArray.push(num);
+	});
+	return ratesArray;
 }
-
-exports.getPlaybackRatesArray = getPlaybackRatesArray;
+//#endregion
+Object.defineProperty(exports, "getPlaybackRatesArray", {
+	enumerable: true,
+	get: function() {
+		return getPlaybackRatesArray;
+	}
+});

package/unbundled/playbackRates.js

@@ -1,11 +1,15 @@
+//#region src/shared/utils/playbackRates.ts
+/**
+* Parses a playback rates string like '0.5, 1, 1.5, 2'
+*/
 function getPlaybackRatesArray(playbackRates) {
-  if (playbackRates === "") return [];
-  const ratesArray = [];
-  playbackRates.split(",").forEach((numStr) => {
-    const num = Number(numStr);
-    if (!isNaN(num)) ratesArray.push(num);
-  });
-  return ratesArray;
+	if (playbackRates === "") return [];
+	const ratesArray = [];
+	playbackRates.split(",").forEach((numStr) => {
+		const num = Number(numStr);
+		if (!isNaN(num)) ratesArray.push(num);
+	});
+	return ratesArray;
 }
-
-export { getPlaybackRatesArray as g };
+//#endregion
+export { getPlaybackRatesArray as t };

package/unbundled/scrollIntoView.cjs

@@ -1,51 +1,46 @@
-'use strict';
-
+//#region src/shared/utils/scrollIntoView.ts
 function scrollIntoView(element, parent, position) {
-  const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
-  switch (position) {
-    case "start":
-      parent.scrollTop = offsetTop;
-      break;
-    case "nearest":
-      if (offsetTop < parent.scrollTop) {
-        parent.scrollTop = offsetTop;
-      }
-      if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) {
-        parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-      }
-      break;
-  }
+	const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
+	switch (position) {
+		case "start":
+			parent.scrollTop = offsetTop;
+			break;
+		case "nearest":
+			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
+			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
+			break;
+	}
 }
 function flatTreeOffsetTop(element) {
-  const offsetParent = element.offsetParent;
-  let value = element.offsetTop;
-  let nextOffsetParent = flatTreeOffsetParent(element);
-  while (nextOffsetParent !== offsetParent) {
-    value -= nextOffsetParent.offsetTop;
-    nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
-  }
-  return value;
+	const offsetParent = element.offsetParent;
+	let value = element.offsetTop;
+	let nextOffsetParent = flatTreeOffsetParent(element);
+	while (nextOffsetParent !== offsetParent) {
+		value -= nextOffsetParent.offsetTop;
+		nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
+	}
+	return value;
 }
 function flatTreeParent(element) {
-  if (element.assignedSlot) {
-    return element.assignedSlot;
-  }
-  if (element.parentNode instanceof ShadowRoot) {
-    return element.parentNode.host;
-  }
-  return element.parentNode;
+	if (element.assignedSlot) return element.assignedSlot;
+	if (element.parentNode instanceof ShadowRoot) return element.parentNode.host;
+	return element.parentNode;
 }
 function flatTreeOffsetParent(element) {
-  for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
-    if (!(ancestor instanceof Element)) continue;
-    const style = getComputedStyle(ancestor);
-    if (style.display === "contents") continue;
-    if (style.position !== "static" || style.filter !== "none") {
-      return ancestor;
-    }
-    if (ancestor.tagName === "BODY") return ancestor;
-  }
-  return null;
+	for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
+		if (!(ancestor instanceof Element)) continue;
+		const style = getComputedStyle(ancestor);
+		if (style.display === "contents") continue;
+		if (style.position !== "static" || style.filter !== "none") return ancestor;
+		/* v8 ignore else -- @preserve */
+		if (ancestor.tagName === "BODY") return ancestor;
+	}
+	return null;
 }
-
-exports.scrollIntoView = scrollIntoView;
+//#endregion
+Object.defineProperty(exports, "scrollIntoView", {
+	enumerable: true,
+	get: function() {
+		return scrollIntoView;
+	}
+});

package/unbundled/scrollIntoView.js

@@ -1,49 +1,41 @@
+//#region src/shared/utils/scrollIntoView.ts
 function scrollIntoView(element, parent, position) {
-  const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
-  switch (position) {
-    case "start":
-      parent.scrollTop = offsetTop;
-      break;
-    case "nearest":
-      if (offsetTop < parent.scrollTop) {
-        parent.scrollTop = offsetTop;
-      }
-      if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) {
-        parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-      }
-      break;
-  }
+	const offsetTop = element.getRootNode() !== parent.getRootNode() ? flatTreeOffsetTop(element) : element.offsetTop;
+	switch (position) {
+		case "start":
+			parent.scrollTop = offsetTop;
+			break;
+		case "nearest":
+			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
+			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
+			break;
+	}
 }
 function flatTreeOffsetTop(element) {
-  const offsetParent = element.offsetParent;
-  let value = element.offsetTop;
-  let nextOffsetParent = flatTreeOffsetParent(element);
-  while (nextOffsetParent !== offsetParent) {
-    value -= nextOffsetParent.offsetTop;
-    nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
-  }
-  return value;
+	const offsetParent = element.offsetParent;
+	let value = element.offsetTop;
+	let nextOffsetParent = flatTreeOffsetParent(element);
+	while (nextOffsetParent !== offsetParent) {
+		value -= nextOffsetParent.offsetTop;
+		nextOffsetParent = flatTreeOffsetParent(nextOffsetParent);
+	}
+	return value;
 }
 function flatTreeParent(element) {
-  if (element.assignedSlot) {
-    return element.assignedSlot;
-  }
-  if (element.parentNode instanceof ShadowRoot) {
-    return element.parentNode.host;
-  }
-  return element.parentNode;
+	if (element.assignedSlot) return element.assignedSlot;
+	if (element.parentNode instanceof ShadowRoot) return element.parentNode.host;
+	return element.parentNode;
 }
 function flatTreeOffsetParent(element) {
-  for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
-    if (!(ancestor instanceof Element)) continue;
-    const style = getComputedStyle(ancestor);
-    if (style.display === "contents") continue;
-    if (style.position !== "static" || style.filter !== "none") {
-      return ancestor;
-    }
-    if (ancestor.tagName === "BODY") return ancestor;
-  }
-  return null;
+	for (let ancestor = flatTreeParent(element); ancestor; ancestor = flatTreeParent(ancestor)) {
+		if (!(ancestor instanceof Element)) continue;
+		const style = getComputedStyle(ancestor);
+		if (style.display === "contents") continue;
+		if (style.position !== "static" || style.filter !== "none") return ancestor;
+		/* v8 ignore else -- @preserve */
+		if (ancestor.tagName === "BODY") return ancestor;
+	}
+	return null;
 }
-
-export { scrollIntoView as s };
+//#endregion
+export { scrollIntoView as t };