@vonage/vivid 5.0.0 → 5.2.0

package/{shared → unbundled}/divider.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const enums = require('./enums.cjs');
 const vividElement = require('./vivid-element.cjs');
 const hostSemantics = require('./host-semantics.cjs');
-const aria = require('./aria.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -36,15 +37,15 @@ class Divider extends hostSemantics.HostSemantics(vividElement.VividElement) {
      * HTML Attribute: role
      */
     this.role = DividerRole.separator;
-    this.orientation = aria.Orientation.horizontal;
+    this.orientation = fastWebUtilities.Orientation.horizontal;
     this.appearance = enums.Appearance.Ghost;
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Divider.prototype, "orientation");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Divider.prototype, "appearance");
 
 exports.Divider = Divider;

package/{shared → unbundled}/divider.js

@@ -1,7 +1,8 @@
+import { attr } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
 import { A as Appearance } from './enums.js';
-import { V as VividElement, a as attr } from './vivid-element.js';
+import { V as VividElement } from './vivid-element.js';
 import { H as HostSemantics } from './host-semantics.js';
-import { O as Orientation } from './aria.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/form-associated.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -94,7 +94,7 @@ const FormAssociated = (Base) => {
         );
         return Object.freeze(forLabels.concat(Array.from(parentLabels)));
       } else {
-        return vividElement.emptyArray;
+        return fastElement.emptyArray;
       }
     }
     /**
@@ -133,7 +133,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      fastElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * @internal
@@ -150,7 +150,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      fastElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**
@@ -321,7 +321,7 @@ const FormAssociated = (Base) => {
      */
     _keypressHandler(e) {
       switch (e.key) {
-        case keyCodes.keyEnter:
+        case fastWebUtilities.keyEnter:
           if (this.form instanceof HTMLFormElement) {
             const defaultButton = this.form.querySelector(
               "[type=submit]"
@@ -341,19 +341,19 @@ const FormAssociated = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({ attribute: "current-value" })
+    fastElement.attr({ attribute: "current-value" })
   ], FormAssociatedElement.prototype, "value");
   __decorateClass([
-    vividElement.attr({ mode: "fromView", attribute: "value" })
+    fastElement.attr({ mode: "fromView", attribute: "value" })
   ], FormAssociatedElement.prototype, "initialValue");
   __decorateClass([
-    vividElement.attr({ mode: "boolean" })
+    fastElement.attr({ mode: "boolean" })
   ], FormAssociatedElement.prototype, "disabled");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], FormAssociatedElement.prototype, "name");
   __decorateClass([
-    vividElement.attr({ mode: "boolean" })
+    fastElement.attr({ mode: "boolean" })
   ], FormAssociatedElement.prototype, "required");
   return FormAssociatedElement;
 };
@@ -448,13 +448,13 @@ const CheckableFormAssociated = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({
+    fastElement.attr({
       attribute: "checked",
       mode: "boolean"
     })
   ], CheckableFormAssociatedElement.prototype, "defaultChecked");
   __decorateClass([
-    vividElement.attr({ attribute: "current-checked", converter: currentCheckedConverter })
+    fastElement.attr({ attribute: "current-checked", converter: currentCheckedConverter })
   ], CheckableFormAssociatedElement.prototype, "checked");
   return CheckableFormAssociatedElement;
 };

package/{shared → unbundled}/form-associated.js

@@ -1,5 +1,5 @@
-import { a as attr, e as emptyArray, D as DOM } from './vivid-element.js';
-import { k as keyEnter } from './key-codes.js';
+import { attr, emptyArray, DOM } from '@microsoft/fast-element';
+import { keyEnter } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/form-element.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) => {
@@ -73,10 +73,10 @@ const FormElement = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], FormElementElement.prototype, "label");
   __decorateClass([
-    vividElement.observable
+    fastElement.observable
   ], FormElementElement.prototype, "errorValidationMessage");
   return FormElementElement;
 };

package/{shared → unbundled}/form-element.js

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

package/{shared → unbundled}/host-semantics.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const vividElement = require('./vivid-element.cjs');
 const attributeBindingBehaviour = require('./attribute-binding-behaviour.cjs');
 
@@ -42,7 +43,7 @@ function applyHostSemantics(boundProperties = {}) {
   const forwardedProperties = new Set(
     vividElement.ariaMixinProperties.filter((p) => !(p in boundProperties))
   );
-  return new vividElement.AttachedBehaviorHTMLDirective(
+  return new fastElement.AttachedBehaviorHTMLDirective(
     "vvd-host-semantics",
     HostSemanticsBehavior,
     {

package/{shared → unbundled}/host-semantics.js

@@ -1,4 +1,5 @@
-import { b as ariaAttributeName, c as ariaMixinProperties, A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
+import { AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
+import { a as ariaAttributeName, b as ariaMixinProperties } from './vivid-element.js';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
 
 class HostSemanticsBehavior {

package/unbundled/key-codes.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+exports.keyArrowLeft = keyArrowLeft;
+exports.keyArrowRight = keyArrowRight;

package/unbundled/key-codes.js

@@ -0,0 +1,7 @@
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+export { keyArrowLeft as a, keyArrowRight as k };

package/{shared → unbundled}/linkable.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('./delegates-aria.cjs');
-const vividElement = require('./vivid-element.cjs');
-const ref = require('./ref.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,7 +21,7 @@ const Linkable = (Base) => {
        * @internal
        */
       this._renderLinkElement = (content, cssClass, boundAriaProperties) => {
-        return vividElement.html`<a
+        return fastElement.html`<a
 				class="${cssClass}"
 				download="${(x) => x.download}"
 				href="${(x) => x.href}"
@@ -32,7 +31,7 @@ const Linkable = (Base) => {
 				rel="${(x) => x.rel}"
 				target="${(x) => x.target}"
 				type="${(x) => x.type}"
-				${ref.ref("control")}
+				${fastElement.ref("control")}
 				${delegatesAria.delegateAria(boundAriaProperties)}
 			>
 				${content}
@@ -41,28 +40,28 @@ const Linkable = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "download");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "href");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "hreflang");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "ping");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "referrerpolicy");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "rel");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "target");
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], LinkableElement.prototype, "type");
   return LinkableElement;
 };

package/{shared → unbundled}/linkable.js

@@ -1,6 +1,5 @@
+import { attr, ref, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { a as attr, h as html } from './vivid-element.js';
-import { r as ref } from './ref.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/listbox.cjs

@@ -1,25 +1,9 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
-const strings = require('./strings.cjs');
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-    let k = array.length;
-    while (k--) {
-        if (predicate(array[k], k, array)) {
-            return k;
-        }
-    }
-    return -1;
-}
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -93,12 +77,12 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    * @public
    */
   get options() {
-    vividElement.Observable.track(this, "options");
+    fastElement.Observable.track(this, "options");
     return this._options;
   }
   set options(value) {
     this._options = value;
-    vividElement.Observable.notify(this, "options");
+    fastElement.Observable.notify(this, "options");
   }
   static {
     /**
@@ -253,40 +237,40 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     this.shouldSkipFocus = false;
     const key = e.key;
     switch (key) {
-      case keyCodes.keyHome: {
+      case fastWebUtilities.keyHome: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectFirstOption();
         }
         break;
       }
-      case keyCodes.keyArrowDown: {
+      case fastWebUtilities.keyArrowDown: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectNextOption();
         }
         break;
       }
-      case keyCodes.keyArrowUp: {
+      case fastWebUtilities.keyArrowUp: {
         if (!e.shiftKey) {
           e.preventDefault();
           this.selectPreviousOption();
         }
         break;
       }
-      case keyCodes.keyEnd: {
+      case fastWebUtilities.keyEnd: {
         e.preventDefault();
         this.selectLastOption();
         break;
       }
-      case keyCodes.keyTab: {
+      case fastWebUtilities.keyTab: {
         this.focusAndScrollOptionIntoView();
         return true;
       }
-      case keyCodes.keyEnter:
-      case keyCodes.keyEscape:
+      case fastWebUtilities.keyEnter:
+      case fastWebUtilities.keyEscape:
         return true;
-      case keyCodes.keySpace:
+      case fastWebUtilities.keySpace:
         if (this.typeaheadExpired) {
           return true;
         }
@@ -337,7 +321,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
   selectedOptionsChanged(_, next) {
     const filteredNext = next.filter(_Listbox.slottedOptionFilter);
     this.options.forEach((o) => {
-      const notifier = vividElement.Observable.getNotifier(o);
+      const notifier = fastElement.Observable.getNotifier(o);
       notifier.unsubscribe(this, "selected");
       o.selected = filteredNext.includes(o);
       notifier.subscribe(this, "selected");
@@ -360,7 +344,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
    */
   selectLastOption() {
     if (!this.disabled) {
-      this.selectedIndex = findLastIndex(this.options, (o) => !o.disabled);
+      this.selectedIndex = fastWebUtilities.findLastIndex(this.options, (o) => !o.disabled);
     }
   }
   /**
@@ -418,7 +402,7 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
     const setSize = `${this.options.length}`;
     this.options.forEach((option, index) => {
       if (!option.id) {
-        option.id = strings.uniqueId("option-");
+        option.id = fastWebUtilities.uniqueId("option-");
       }
       option.ariaPosInSet = `${index + 1}`;
       option.ariaSetSize = setSize;
@@ -448,22 +432,22 @@ const _Listbox = class _Listbox extends vividElement.VividElement {
 };
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], _Listbox.prototype, "disabled");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "selectedIndex");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "selectedOptions");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "slottedOptions");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "typeaheadBuffer");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], _Listbox.prototype, "_activeDescendant");
 let Listbox = _Listbox;
 

package/{shared → unbundled}/listbox.js

@@ -1,23 +1,7 @@
+import { Observable, attr, observable } from '@microsoft/fast-element';
+import { keySpace, keyEscape, keyEnter, keyTab, keyEnd, keyArrowUp, keyArrowDown, keyHome, findLastIndex, uniqueId } from '@microsoft/fast-web-utilities';
 import { i as isListboxOption } from './option.js';
-import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
-import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
-import { u as uniqueId } from './strings.js';
-
-/**
- * Returns the index of the last element in the array where predicate is true, and -1 otherwise.
- *
- * @param array - the array to test
- * @param predicate - find calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findIndex returns -1.
- */
-function findLastIndex(array, predicate) {
-    let k = array.length;
-    while (k--) {
-        if (predicate(array[k], k, array)) {
-            return k;
-        }
-    }
-    return -1;
-}
+import { V as VividElement } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/{shared → unbundled}/localized.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
+const fastElement = require('@microsoft/fast-element');
 const locales_enUS = require('../locales/en-US.cjs');
-const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -18,7 +18,7 @@ class CurrentLocale {
   }
 }
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], CurrentLocale.prototype, "locale");
 const currentLocale = new CurrentLocale();
 const setLocale = (locale) => {

package/{shared → unbundled}/localized.js

@@ -1,5 +1,5 @@
+import { observable } from '@microsoft/fast-element';
 import enUS from '../locales/en-US.js';
-import { o as observable } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {