@vonage/vivid 4.31.0 → 5.1.0

package/unbundled/vivid-element.js

@@ -0,0 +1,274 @@
+import { FASTElementDefinition, DOM, attr, createMetadataLocator, Observable, FASTElement } from '@microsoft/fast-element';
+
+function resolve(templateOrResolveFunction, ctx) {
+  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 elementDefinitionContext = {
+      tagFor(type2) {
+        if (!tagByDependencyType.has(type2)) {
+          throw new Error(
+            `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
+          );
+        }
+        return tagByDependencyType.get(type2);
+      },
+      tagForNonDependency(name) {
+        return prefixed(name);
+      }
+    };
+    new FASTElementDefinition(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
+});
+
+const ariaChangeSubscribers = /* @__PURE__ */ new WeakMap();
+const getSubscribers = (source) => {
+  let subscribers = ariaChangeSubscribers.get(source);
+  if (!subscribers) {
+    subscribers = [];
+    ariaChangeSubscribers.set(source, subscribers);
+  }
+  return subscribers;
+};
+const subscribeToAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).push(listener);
+};
+const unsubscribeFromAriaPropertyChanges = (source, listener) => {
+  getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
+};
+const 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]
+    );
+  }
+};
+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);
+  }
+};
+const 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);
+  }
+};
+
+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
+];
+const ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
+const 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;
+};
+
+const locateReplacedPropMetadata = createMetadataLocator();
+const 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;
+};
+
+class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
+  static {
+    this.VIVID_VERSION = "5.1.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);
+  }
+}
+
+export { VividElement as V, ariaAttributeName as a, ariaMixinProperties as b, createRegisterFunction as c, defineVividComponent as d, replaces as r, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u };

package/unbundled/with-contextual-help.cjs

@@ -0,0 +1,29 @@
+'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;
+};
+const WithContextualHelp = (Base) => {
+  class ElementWithContextualHelp extends Base {
+    /**
+     * @internal
+     */
+    get _hasContextualHelp() {
+      return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
+    }
+  }
+  __decorateClass([
+    fastElement.observable
+  ], ElementWithContextualHelp.prototype, "_contextualHelpSlottedContent");
+  return ElementWithContextualHelp;
+};
+
+exports.WithContextualHelp = WithContextualHelp;

package/unbundled/with-contextual-help.js

@@ -0,0 +1,27 @@
+import { observable } from '@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;
+};
+const WithContextualHelp = (Base) => {
+  class ElementWithContextualHelp extends Base {
+    /**
+     * @internal
+     */
+    get _hasContextualHelp() {
+      return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
+    }
+  }
+  __decorateClass([
+    observable
+  ], ElementWithContextualHelp.prototype, "_contextualHelpSlottedContent");
+  return ElementWithContextualHelp;
+};
+
+export { WithContextualHelp as W };

package/{shared → unbundled}/with-error-text.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -48,7 +48,7 @@ const WithErrorText = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({ attribute: "error-text" })
+    fastElement.attr({ attribute: "error-text" })
   ], ElementWithErrorText.prototype, "errorText");
   return ElementWithErrorText;
 };

package/{shared → unbundled}/with-error-text.js

@@ -1,4 +1,4 @@
-import { a as attr } from './vivid-element.js';
+import { attr } from '@microsoft/fast-element';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/with-success-text.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,7 +15,7 @@ const WithSuccessText = (Base) => {
   class ElementWithSuccessText extends Base {
   }
   __decorateClass([
-    vividElement.attr({ attribute: "success-text" })
+    fastElement.attr({ attribute: "success-text" })
   ], ElementWithSuccessText.prototype, "successText");
   return ElementWithSuccessText;
 };

package/{shared → unbundled}/with-success-text.js

@@ -1,4 +1,4 @@
-import { a as attr } from './vivid-element.js';
+import { attr } from '@microsoft/fast-element';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {