@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/vivid-element.js

@@ -1,283 +1,256 @@
-import { FASTElementDefinition, html, DOM, attr, Observable, FASTElement } from '@microsoft/fast-element';
-
+import { DOM, FASTElement, FASTElementDefinition, Observable, attr, html } from "@microsoft/fast-element";
+//#region src/shared/design-system/createRegisterFunction.ts
 function resolve(templateOrResolveFunction, ctx) {
-  if (templateOrResolveFunction instanceof Function) {
-    return templateOrResolveFunction(ctx);
-  } else {
-    return templateOrResolveFunction;
-  }
+	if (templateOrResolveFunction instanceof Function) return templateOrResolveFunction(ctx);
+	else return templateOrResolveFunction;
 }
-const registeredTags = /* @__PURE__ */ new Set();
-const tagByType = /* @__PURE__ */ new Map();
-const createRegisterFunction = (definition) => (prefix = "vwc") => {
-  const prefixed = (name) => `${prefix}-${name}`;
-  const registerComponent = (componentDefinition) => {
-    const tag = prefixed(componentDefinition.name);
-    let type = componentDefinition.type;
-    type.componentName = componentDefinition.name;
-    if (registeredTags.has(tag)) {
-      return;
-    } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
-      type = class extends type {
-      };
-    }
-    registeredTags.add(tag);
-    tagByType.set(type, tag);
-    for (const dependency of componentDefinition.dependencies) {
-      registerComponent(dependency);
-    }
-    const tagByDependencyType = new Map([
-      [componentDefinition.type, tag],
-      ...componentDefinition.dependencies.map(
-        (dependency) => [dependency.type, prefixed(dependency.name)]
-      )
-    ]);
-    const tagFor = (type2, convertToString) => {
-      if (!tagByDependencyType.has(type2)) {
-        throw new Error(
-          `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
-        );
-      }
-      const tagNameStr = tagByDependencyType.get(type2);
-      return convertToString ? tagNameStr : html.partial(tagNameStr);
-    };
-    const elementDefinitionContext = {
-      tagFor,
-      tagForNonDependency(name) {
-        return prefixed(name);
-      }
-    };
-    FASTElementDefinition.compose(type, {
-      ...componentDefinition.options,
-      template: resolve(
-        componentDefinition.template,
-        elementDefinitionContext
-      ),
-      name: `${prefix}-${componentDefinition.name}`
-    }).define();
-  };
-  registerComponent(definition);
+var registeredTags = /* @__PURE__ */ new Set();
+var tagByType = /* @__PURE__ */ new Map();
+/**
+* Creates a function that registers a component and its dependencies with the given prefix.
+*/
+var createRegisterFunction = (definition) => (prefix = "vwc") => {
+	const prefixed = (name) => `${prefix}-${name}`;
+	const registerComponent = (componentDefinition) => {
+		const tag = prefixed(componentDefinition.name);
+		let type = componentDefinition.type;
+		type.componentName = componentDefinition.name;
+		if (registeredTags.has(tag)) return;
+		else if (tagByType.has(type) && tagByType.get(type) !== tag) type = class extends type {};
+		registeredTags.add(tag);
+		tagByType.set(type, tag);
+		for (const dependency of componentDefinition.dependencies) registerComponent(dependency);
+		const tagByDependencyType = new Map([[componentDefinition.type, tag], ...componentDefinition.dependencies.map((dependency) => [dependency.type, prefixed(dependency.name)])]);
+		const tagFor = (type, convertToString) => {
+			if (!tagByDependencyType.has(type)) throw new Error(`Could not get tag for ${type.name} as it is not a dependency of ${componentDefinition.name}.`);
+			const tagNameStr = tagByDependencyType.get(type);
+			return convertToString ? tagNameStr : html.partial(tagNameStr);
+		};
+		const elementDefinitionContext = {
+			tagFor,
+			tagForNonDependency(name) {
+				return prefixed(name);
+			}
+		};
+		FASTElementDefinition.compose(type, {
+			...componentDefinition.options,
+			template: resolve(componentDefinition.template, elementDefinitionContext),
+			name: `${prefix}-${componentDefinition.name}`
+		}).define();
+	};
+	registerComponent(definition);
 };
-
-const defineVividComponent = (name, type, template, dependencies, options) => ({
-  name,
-  type,
-  template,
-  dependencies,
-  options
+//#endregion
+//#region src/shared/design-system/defineVividComponent.ts
+var defineVividComponent = (name, type, template, dependencies, options) => ({
+	name,
+	type,
+	template,
+	dependencies,
+	options
 });
-
-const ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
-const getSubscribers = (source) => {
-  let subscribers = ariaChangeSubscribers.get(source);
-  if (!subscribers) {
-    subscribers = [];
-    ariaChangeSubscribers.set(source, subscribers);
-  }
-  return subscribers;
+//#endregion
+//#region src/shared/aria/aria-change-subscription.ts
+var ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
+var getSubscribers = (source) => {
+	let subscribers = ariaChangeSubscribers.get(source);
+	if (!subscribers) {
+		subscribers = [];
+		ariaChangeSubscribers.set(source, subscribers);
+	}
+	return subscribers;
 };
-const subscribeToAriaPropertyChanges = (source, listener) => {
-  getSubscribers(source).push(listener);
+var subscribeToAriaPropertyChanges = (source, listener) => {
+	getSubscribers(source).push(listener);
 };
-const publishAriaPropertyChange = (source, changedAriaProperty) => {
-  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
+var publishAriaPropertyChange = (source, changedAriaProperty) => {
+	getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
 };
-
-const shouldRemoveAriaAttributes = (behavior) => behavior === "delegate";
-const dataPropertyName = (ariaPropertyName) => `vvd${ariaPropertyName.charAt(0).toUpperCase()}${ariaPropertyName.slice(1)}`;
-const reflectAriaProperty = (element, ariaProperty) => {
-  if (shouldRemoveAriaAttributes(element._vividAriaBehaviour)) {
-    const value = element[ariaProperty];
-    element[`_${ariaProperty}`] = null;
-    element.removeAttribute(ariaAttributeName(ariaProperty));
-    element[`_${ariaProperty}`] = value;
-    if (element[ariaProperty] !== null) {
-      element.dataset[dataPropertyName(ariaProperty)] = element[ariaProperty];
-    } else {
-      delete element.dataset[dataPropertyName(ariaProperty)];
-    }
-  } else {
-    DOM.setAttribute(
-      element,
-      ariaAttributeName(ariaProperty),
-      element[ariaProperty]
-    );
-  }
+//#endregion
+//#region src/shared/aria/attribute-removal.ts
+var shouldRemoveAriaAttributes = (behavior) => behavior === "delegate";
+var dataPropertyName = (ariaPropertyName) => `vvd${ariaPropertyName.charAt(0).toUpperCase()}${ariaPropertyName.slice(1)}`;
+var reflectAriaProperty = (element, ariaProperty) => {
+	if (shouldRemoveAriaAttributes(element._vividAriaBehaviour)) {
+		const value = element[ariaProperty];
+		element[`_${ariaProperty}`] = null;
+		element.removeAttribute(ariaAttributeName(ariaProperty));
+		element[`_${ariaProperty}`] = value;
+		if (element[ariaProperty] !== null) element.dataset[dataPropertyName(ariaProperty)] = element[ariaProperty];
+		else delete element.dataset[dataPropertyName(ariaProperty)];
+	} else DOM.setAttribute(element, ariaAttributeName(ariaProperty), element[ariaProperty]);
 };
-const changedAriaProperties = /* @__PURE__ */ new WeakMap();
-const recordAriaPropertyChange = (element, ariaProperty) => {
-  const changedProperties = changedAriaProperties.get(element);
-  if (!changedProperties) {
-    changedAriaProperties.set(element, /* @__PURE__ */ new Set([ariaProperty]));
-  } else {
-    changedProperties.add(ariaProperty);
-  }
+var changedAriaProperties = /* @__PURE__ */ new WeakMap();
+var recordAriaPropertyChange = (element, ariaProperty) => {
+	const changedProperties = changedAriaProperties.get(element);
+	if (!changedProperties) changedAriaProperties.set(element, new Set([ariaProperty]));
+	else changedProperties.add(ariaProperty);
 };
-const handleAriaPropertyChange = (element, ariaProperty) => {
-  if (element.isConnected) {
-    reflectAriaProperty(element, ariaProperty);
-  } else {
-    recordAriaPropertyChange(element, ariaProperty);
-  }
+var handleAriaPropertyChange = (element, ariaProperty) => {
+	if (element.isConnected) reflectAriaProperty(element, ariaProperty);
+	else recordAriaPropertyChange(element, ariaProperty);
 };
-const handleElementConnectedCallback = (element) => {
-  const changedProperties = changedAriaProperties.get(element);
-  if (changedProperties) {
-    for (const ariaProperty of changedProperties) {
-      reflectAriaProperty(element, ariaProperty);
-    }
-    changedAriaProperties.delete(element);
-  }
+var handleElementConnectedCallback = (element) => {
+	const changedProperties = changedAriaProperties.get(element);
+	if (changedProperties) {
+		for (const ariaProperty of changedProperties) reflectAriaProperty(element, ariaProperty);
+		changedAriaProperties.delete(element);
+	}
 };
-
-const ariaMixinProperties = [
-  "role",
-  "ariaAtomic",
-  "ariaAutoComplete",
-  "ariaBusy",
-  "ariaChecked",
-  "ariaColCount",
-  "ariaColIndex",
-  "ariaColIndexText",
-  "ariaColSpan",
-  "ariaCurrent",
-  "ariaDescription",
-  "ariaDisabled",
-  "ariaExpanded",
-  "ariaHasPopup",
-  "ariaHidden",
-  "ariaInvalid",
-  "ariaKeyShortcuts",
-  "ariaLabel",
-  "ariaLevel",
-  "ariaLive",
-  "ariaModal",
-  "ariaMultiLine",
-  "ariaMultiSelectable",
-  "ariaOrientation",
-  "ariaPlaceholder",
-  "ariaPosInSet",
-  "ariaPressed",
-  "ariaReadOnly",
-  "ariaRequired",
-  "ariaRoleDescription",
-  "ariaRowCount",
-  "ariaRowIndex",
-  "ariaRowIndexText",
-  "ariaRowSpan",
-  "ariaSelected",
-  "ariaSetSize",
-  "ariaSort",
-  "ariaValueMax",
-  "ariaValueMin",
-  "ariaValueNow",
-  "ariaValueText",
-  "ariaRelevant"
-  // Non-standard
+//#endregion
+//#region src/shared/aria/aria-mixin.ts
+/**
+* Properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
+* IDREF properties are omitted.
+*/
+var ariaMixinProperties = [
+	"role",
+	"ariaAtomic",
+	"ariaAutoComplete",
+	"ariaBusy",
+	"ariaChecked",
+	"ariaColCount",
+	"ariaColIndex",
+	"ariaColIndexText",
+	"ariaColSpan",
+	"ariaCurrent",
+	"ariaDescription",
+	"ariaDisabled",
+	"ariaExpanded",
+	"ariaHasPopup",
+	"ariaHidden",
+	"ariaInvalid",
+	"ariaKeyShortcuts",
+	"ariaLabel",
+	"ariaLevel",
+	"ariaLive",
+	"ariaModal",
+	"ariaMultiLine",
+	"ariaMultiSelectable",
+	"ariaOrientation",
+	"ariaPlaceholder",
+	"ariaPosInSet",
+	"ariaPressed",
+	"ariaReadOnly",
+	"ariaRequired",
+	"ariaRoleDescription",
+	"ariaRowCount",
+	"ariaRowIndex",
+	"ariaRowIndexText",
+	"ariaRowSpan",
+	"ariaSelected",
+	"ariaSetSize",
+	"ariaSort",
+	"ariaValueMax",
+	"ariaValueMin",
+	"ariaValueNow",
+	"ariaValueText",
+	"ariaRelevant"
 ];
-const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
-const AriaMixin = (Base) => {
-  class AriaMixinElement extends Base {
-    constructor(...args) {
-      super(...args);
-      /** @internal */
-      this._vividAriaBehaviour = "default";
-      for (const ariaProperty of ariaMixinProperties) {
-        this[`_${ariaProperty}`] = null;
-      }
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      handleElementConnectedCallback(this);
-    }
-  }
-  for (const ariaProperty of ariaMixinProperties) {
-    attr({
-      attribute: ariaAttributeName(ariaProperty),
-      mode: "fromView"
-    })(AriaMixinElement.prototype, ariaProperty);
-    AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
-      handleAriaPropertyChange(this, ariaProperty);
-      if (this._vividAriaBehaviour !== "default") {
-        publishAriaPropertyChange(this, ariaProperty);
-      }
-    };
-  }
-  return AriaMixinElement;
+var ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+/**
+* Mixin for all components. Declares all ARIA attributes.
+*/
+var AriaMixin = (Base) => {
+	class AriaMixinElement extends Base {
+		constructor(...args) {
+			super(...args);
+			this._vividAriaBehaviour = "default";
+			for (const ariaProperty of ariaMixinProperties) this[`_${ariaProperty}`] = null;
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			handleElementConnectedCallback(this);
+		}
+	}
+	for (const ariaProperty of ariaMixinProperties) {
+		attr({
+			attribute: ariaAttributeName(ariaProperty),
+			mode: "fromView"
+		})(AriaMixinElement.prototype, ariaProperty);
+		AriaMixinElement.prototype[`${ariaProperty}Changed`] = function() {
+			handleAriaPropertyChange(this, ariaProperty);
+			if (this._vividAriaBehaviour !== "default") publishAriaPropertyChange(this, ariaProperty);
+		};
+	}
+	return AriaMixinElement;
 };
-
+//#endregion
+//#region src/shared/deprecation/replaced-props.ts
 function createMetadataLocator() {
-  const metadataMap = /* @__PURE__ */ new WeakMap();
-  return (target) => {
-    if (!metadataMap.has(target)) {
-      metadataMap.set(target, []);
-    }
-    return metadataMap.get(target);
-  };
+	const metadataMap = /* @__PURE__ */ new WeakMap();
+	return (target) => {
+		if (!metadataMap.has(target)) metadataMap.set(target, []);
+		return metadataMap.get(target);
+	};
 }
-const locateReplacedPropMetadata = createMetadataLocator();
-const replaces = (config) => ($target, $prop) => {
-  locateReplacedPropMetadata($target.constructor).push({
-    newPropertyName: $prop,
-    ...config
-  });
+var locateReplacedPropMetadata = createMetadataLocator();
+/**
+* Decorator to mark a property as deprecated and replaced by another property.
+*/
+var replaces = (config) => ($target, $prop) => {
+	locateReplacedPropMetadata($target.constructor).push({
+		newPropertyName: $prop,
+		...config
+	});
 };
-const ReplacedPropHandling = (Base) => {
-  class ReplacedPropHandlingElement extends Base {
-    #handleReplacedProp(replacedProp) {
-      let newDirty = false;
-      let deprecatedDirty = false;
-      const changeCouldBeFromDeprecated = (source) => deprecatedDirty && replacedProp.fromDeprecated(
-        source[replacedProp.deprecatedPropertyName]
-      ) === source[replacedProp.newPropertyName];
-      const changeCouldBeFromNew = (source) => newDirty && replacedProp.toDeprecated && replacedProp.toDeprecated(source[replacedProp.newPropertyName]) === source[replacedProp.deprecatedPropertyName];
-      const subscriber = {
-        handleChange(source, propertyName) {
-          if (propertyName === replacedProp.newPropertyName) {
-            newDirty = true;
-            if (!replacedProp.toDeprecated || changeCouldBeFromDeprecated(source)) {
-              return;
-            }
-            source[replacedProp.deprecatedPropertyName] = replacedProp.toDeprecated(source[replacedProp.newPropertyName]);
-          }
-          if (propertyName === replacedProp.deprecatedPropertyName) {
-            deprecatedDirty = true;
-            if (changeCouldBeFromNew(source)) {
-              return;
-            }
-            source[replacedProp.newPropertyName] = replacedProp.fromDeprecated(
-              source[replacedProp.deprecatedPropertyName]
-            );
-          }
-        }
-      };
-      const notifier = Observable.getNotifier(this);
-      notifier.subscribe(subscriber, replacedProp.newPropertyName);
-      notifier.subscribe(subscriber, replacedProp.deprecatedPropertyName);
-    }
-    constructor(...args) {
-      super(...args);
-      for (const replacedProp of locateReplacedPropMetadata(this.constructor)) {
-        this.#handleReplacedProp(replacedProp);
-      }
-    }
-  }
-  return ReplacedPropHandlingElement;
+/**
+* Mixin responsible for the syncing between the properties.
+* This needs to be applied before any other mixin so that it can subscribe to the property changes before their initial
+* values are set.
+*/
+var ReplacedPropHandling = (Base) => {
+	class ReplacedPropHandlingElement extends Base {
+		#handleReplacedProp(replacedProp) {
+			let newDirty = false;
+			let deprecatedDirty = false;
+			const changeCouldBeFromDeprecated = (source) => deprecatedDirty && replacedProp.fromDeprecated(source[replacedProp.deprecatedPropertyName]) === source[replacedProp.newPropertyName];
+			const changeCouldBeFromNew = (source) => newDirty && replacedProp.toDeprecated && replacedProp.toDeprecated(source[replacedProp.newPropertyName]) === source[replacedProp.deprecatedPropertyName];
+			const subscriber = { handleChange(source, propertyName) {
+				if (propertyName === replacedProp.newPropertyName) {
+					newDirty = true;
+					if (!replacedProp.toDeprecated || changeCouldBeFromDeprecated(source)) return;
+					source[replacedProp.deprecatedPropertyName] = replacedProp.toDeprecated(source[replacedProp.newPropertyName]);
+				}
+				if (propertyName === replacedProp.deprecatedPropertyName) {
+					deprecatedDirty = true;
+					if (changeCouldBeFromNew(source)) return;
+					source[replacedProp.newPropertyName] = replacedProp.fromDeprecated(source[replacedProp.deprecatedPropertyName]);
+				}
+			} };
+			const notifier = Observable.getNotifier(this);
+			notifier.subscribe(subscriber, replacedProp.newPropertyName);
+			notifier.subscribe(subscriber, replacedProp.deprecatedPropertyName);
+		}
+		constructor(...args) {
+			super(...args);
+			for (const replacedProp of locateReplacedPropMetadata(this.constructor)) this.#handleReplacedProp(replacedProp);
+		}
+	}
+	return ReplacedPropHandlingElement;
 };
-
-class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
-  static {
-    this.VIVID_VERSION = "5.15.1";
-  }
-  /**
-   * Add data-vvd-component attribute with component name globally,
-   * for referring to the elements in CSS, testing or debugging
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    const name = this.constructor.componentName;
-    this.setAttribute("data-vvd-component", name);
-  }
-}
-
-export { VividElement as V, ariaAttributeName as a, ariaMixinProperties as b, createRegisterFunction as c, defineVividComponent as d, replaces as r, subscribeToAriaPropertyChanges as s };
+//#endregion
+//#region src/shared/foundation/vivid-element/vivid-element.ts
+/**
+* Base class for all Vivid elements.
+* @testSelector byTestId byTestId
+* @testAction hover hover #locator
+* @testAction focus focus #locator
+* @testAction blur blur #locator
+*/
+var VividElement = class extends AriaMixin(ReplacedPropHandling(FASTElement)) {
+	static {
+		this.VIVID_VERSION = "5.16.0";
+	}
+	/**
+	* Add data-vvd-component attribute with component name globally,
+	* for referring to the elements in CSS, testing or debugging
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		const name = this.constructor.componentName;
+		this.setAttribute("data-vvd-component", name);
+	}
+};
+//#endregion
+export { subscribeToAriaPropertyChanges as a, ariaMixinProperties as i, replaces as n, defineVividComponent as o, ariaAttributeName as r, createRegisterFunction as s, VividElement as t };

package/unbundled/with-contextual-help.cjs

@@ -1,40 +1,36 @@
-'use strict';
-
-const fastElement = require('@microsoft/fast-element');
-
-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;
+require("./chunk.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/shared/patterns/form-elements/with-contextual-help.ts
+/**
+* Mixin for elements that can display optional contextual help for the label.
+*/
+var WithContextualHelp = (Base) => {
+	/**
+	* @public
+	* @slot contextual-help - Slot for the contextual-help component, displayed next to the label.
+	*/
+	class ElementWithContextualHelp extends Base {
+		/**
+		* @internal
+		*/
+		get _hasContextualHelp() {
+			return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
+		}
+		/**
+		* @internal
+		*/
+		_isFromContextualHelp(e) {
+			return e.composedPath().some((t) => t?.closest?.("[slot=\"contextual-help\"],[data-vvd-component=\"contextual-help\"]"));
+		}
+	}
+	require_decorate.__decorate([_microsoft_fast_element.observable], ElementWithContextualHelp.prototype, "_contextualHelpSlottedContent", void 0);
+	return ElementWithContextualHelp;
 };
-const WithContextualHelp = (Base) => {
-  class ElementWithContextualHelp extends Base {
-    /**
-     * @internal
-     */
-    get _hasContextualHelp() {
-      return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
-    }
-    /**
-     * @internal
-     */
-    _isFromContextualHelp(e) {
-      const path = e.composedPath();
-      return path.some(
-        (t) => t?.closest?.(
-          '[slot="contextual-help"],[data-vvd-component="contextual-help"]'
-        )
-      );
-    }
-  }
-  __decorateClass([
-    fastElement.observable
-  ], ElementWithContextualHelp.prototype, "_contextualHelpSlottedContent");
-  return ElementWithContextualHelp;
-};
-
-exports.WithContextualHelp = WithContextualHelp;
+//#endregion
+Object.defineProperty(exports, "WithContextualHelp", {
+	enumerable: true,
+	get: function() {
+		return WithContextualHelp;
+	}
+});