@vonage/vivid 4.14.0 → 4.14.1

package/shared/ref.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * The runtime behavior for template references.
@@ -37,7 +37,7 @@ class RefBehavior {
  * @public
  */
 function ref(propertyName) {
-    return new defineVividComponent.AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
 }
 
 exports.ref = ref;

package/shared/ref.js

@@ -1,4 +1,4 @@
-import { b as AttachedBehaviorHTMLDirective } from './defineVividComponent.js';
+import { b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
 /**
  * The runtime behavior for template references.

package/shared/repeat.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /** @internal */
 function newSplice(index, removed, addedCount) {
@@ -188,7 +188,7 @@ function calcSplices(current, currentStart, currentEnd, old, oldStart, oldEnd) {
     currentEnd -= suffixCount;
     oldEnd -= suffixCount;
     if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
-        return defineVividComponent.emptyArray;
+        return vividElement.emptyArray;
     }
     if (currentStart === currentEnd) {
         const splice = newSplice(currentStart, [], 0);
@@ -345,7 +345,7 @@ function adjustIndex(changeRecord, array) {
     changeRecord.index = index;
     return changeRecord;
 }
-class ArrayObserver extends defineVividComponent.SubscriberSet {
+class ArrayObserver extends vividElement.SubscriberSet {
     constructor(source) {
         super(source);
         this.oldCollection = void 0;
@@ -370,14 +370,14 @@ class ArrayObserver extends defineVividComponent.SubscriberSet {
         }
         if (this.needsQueue) {
             this.needsQueue = false;
-            defineVividComponent.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     reset(oldCollection) {
         this.oldCollection = oldCollection;
         if (this.needsQueue) {
             this.needsQueue = false;
-            defineVividComponent.DOM.queueUpdate(this);
+            vividElement.DOM.queueUpdate(this);
         }
     }
     flush() {
@@ -410,7 +410,7 @@ function enableArrayObservation() {
         return;
     }
     arrayObservationEnabled = true;
-    defineVividComponent.Observable.setArrayObserverFactory((collection) => {
+    vividElement.Observable.setArrayObserverFactory((collection) => {
         return new ArrayObserver(collection);
     });
     const proto = Array.prototype;
@@ -541,8 +541,8 @@ class RepeatBehavior {
         this.originalContext = void 0;
         this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = defineVividComponent.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = defineVividComponent.Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+        this.itemsBindingObserver = vividElement.Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+        this.templateBindingObserver = vividElement.Observable.binding(templateBinding, this, isTemplateBindingVolatile);
         if (options.positioning) {
             this.bindView = bindWithPositioning;
         }
@@ -594,11 +594,11 @@ class RepeatBehavior {
     }
     observeItems(force = false) {
         if (!this.items) {
-            this.items = defineVividComponent.emptyArray;
+            this.items = vividElement.emptyArray;
             return;
         }
         const oldObserver = this.itemsObserver;
-        const newObserver = (this.itemsObserver = defineVividComponent.Observable.getNotifier(this.items));
+        const newObserver = (this.itemsObserver = vividElement.Observable.getNotifier(this.items));
         const hasNewObserver = oldObserver !== newObserver;
         if (hasNewObserver && oldObserver !== null) {
             oldObserver.unsubscribe(this);
@@ -674,7 +674,7 @@ class RepeatBehavior {
         let viewsLength = views.length;
         if (itemsLength === 0 || templateChanged || !this.options.recycle) {
             // all views need to be removed
-            defineVividComponent.HTMLView.disposeContiguousBatch(views);
+            vividElement.HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
         }
         if (viewsLength === 0) {
@@ -719,7 +719,7 @@ class RepeatBehavior {
  * A directive that configures list rendering.
  * @public
  */
-class RepeatDirective extends defineVividComponent.HTMLDirective {
+class RepeatDirective extends vividElement.HTMLDirective {
     /**
      * Creates an instance of RepeatDirective.
      * @param itemsBinding - The binding that provides the array to render.
@@ -735,10 +735,10 @@ class RepeatDirective extends defineVividComponent.HTMLDirective {
          * Creates a placeholder string based on the directive's index within the template.
          * @param index - The index of the directive within the template.
          */
-        this.createPlaceholder = defineVividComponent.DOM.createBlockPlaceholder;
+        this.createPlaceholder = vividElement.DOM.createBlockPlaceholder;
         enableArrayObservation();
-        this.isItemsBindingVolatile = defineVividComponent.Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = defineVividComponent.Observable.isVolatileBinding(templateBinding);
+        this.isItemsBindingVolatile = vividElement.Observable.isVolatileBinding(itemsBinding);
+        this.isTemplateBindingVolatile = vividElement.Observable.isVolatileBinding(templateBinding);
     }
     /**
      * Creates a behavior for the provided target node.

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, g as HTMLView } from './defineVividComponent.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, g as HTMLView } from './vivid-element.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/shared/slider.template.cjs

@@ -2,7 +2,7 @@
 
 const numbers = require('./numbers.cjs');
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const aria = require('./aria.cjs');
 const when = require('./when.cjs');
@@ -35,7 +35,7 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
 const getThumbClasses = ({ _focusVisible }) => classNames.classNames("thumb-container", ["focus-visible", _focusVisible]);
 const getMarkersTemplate = (isHorizontal, numMarkers) => {
   const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return defineVividComponent.html` <div
+  return vividElement.html` <div
 		class="mark"
 		style="
 	background: linear-gradient(to ${placeholder[0]}, currentcolor 1px, transparent 0px)
@@ -45,7 +45,7 @@ const getMarkersTemplate = (isHorizontal, numMarkers) => {
 };
 const SliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html`<template
+  return vividElement.html`<template
 		role="${(x) => x.ariaLabel ? "presentation" : null}"
 		@focusin="${(x) => x._onFocusIn()}"
 		@focusout="${(x) => x._onFocusOut()}"
@@ -77,7 +77,7 @@ const SliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate

package/shared/slider.template.js

@@ -1,6 +1,6 @@
 import { l as limit } from './numbers.js';
 import { P as Popup, a as PlacementStrategy } from './definition63.js';
-import { h as html } from './defineVividComponent.js';
+import { h as html } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { O as Orientation } from './aria.js';
 import { w as when } from './when.js';

package/shared/slotted.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.
@@ -39,7 +39,7 @@ class NodeObservationBehavior {
      */
     bind(source) {
         const name = this.options.property;
-        this.shouldUpdate = defineVividComponent.Observable.getAccessors(source).some((x) => x.name === name);
+        this.shouldUpdate = vividElement.Observable.getAccessors(source).some((x) => x.name === name);
         this.source = source;
         this.updateTarget(this.computeNodes());
         if (this.shouldUpdate) {
@@ -51,7 +51,7 @@ class NodeObservationBehavior {
      * @param source - The source to unbind from.
      */
     unbind() {
-        this.updateTarget(defineVividComponent.emptyArray);
+        this.updateTarget(vividElement.emptyArray);
         this.source = null;
         if (this.shouldUpdate) {
             this.disconnect();
@@ -115,7 +115,7 @@ function slotted(propertyOrOptions) {
     if (typeof propertyOrOptions === "string") {
         propertyOrOptions = { property: propertyOrOptions };
     }
-    return new defineVividComponent.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+    return new vividElement.AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
 }
 
 exports.NodeObservationBehavior = NodeObservationBehavior;

package/shared/slotted.js

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './defineVividComponent.js';
+import { O as Observable, e as emptyArray, b as AttachedBehaviorHTMLDirective } from './vivid-element.js';
 
 /**
  * Creates a function that can be used to filter a Node array, selecting only elements.

package/shared/text-anchor.cjs

@@ -3,8 +3,7 @@
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const anchor = require('./anchor.cjs');
-const foundationElement = require('./foundation-element.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends foundationElement.FoundationElement {
+class TextAnchor extends vividElement.VividElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal
@@ -25,13 +24,13 @@ class TextAnchor extends foundationElement.FoundationElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], TextAnchor.prototype, "appearance");
 applyMixins.applyMixins(TextAnchor, affix.AffixIcon, anchor.Anchor);
 

package/shared/text-anchor.js

@@ -1,8 +1,7 @@
 import { A as AffixIcon } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as Anchor } from './anchor.js';
-import { F as FoundationElement } from './foundation-element.js';
-import { a as attr } from './defineVividComponent.js';
+import { V as VividElement, a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -13,7 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends FoundationElement {
+class TextAnchor extends VividElement {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal

package/shared/text-anchor.template.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -13,7 +13,7 @@ const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
 );
 const textAnchorTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`<a
+  return vividElement.html`<a
 		class="${getClasses}"
 		download="${(x) => x.download}"
 		href="${(x) => x.href}"

package/shared/text-anchor.template.js

@@ -1,5 +1,5 @@
 import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { h as html } from './defineVividComponent.js';
+import { h as html } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 

package/shared/text-field2.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 const applyMixins = require('./apply-mixins.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition27.cjs');
 const formElements = require('./form-elements.cjs');
 const ariaGlobal = require('./aria-global.cjs');
@@ -93,7 +92,7 @@ class Reflector {
     });
   }
   destroy() {
-    const notifier = defineVividComponent.Observable.getNotifier(this.#source);
+    const notifier = vividElement.Observable.getNotifier(this.#source);
     for (const prop of this.#reflectedProperties.keys()) {
       notifier.unsubscribe(this.#propertyChangeHandler, prop);
     }
@@ -101,7 +100,7 @@ class Reflector {
   }
   #addReflectedProperty(name, reflected) {
     this.#reflectedProperties.set(name, reflected);
-    const notifier = defineVividComponent.Observable.getNotifier(this.#source);
+    const notifier = vividElement.Observable.getNotifier(this.#source);
     notifier.subscribe(this.#propertyChangeHandler, name);
     this.#propertyChangeHandler.handleChange(this.#source, name);
   }
@@ -111,14 +110,14 @@ class Reflector {
       const value = source[propertyName];
       switch (reflectedProperty.type) {
         case "boolean-attribute":
-          defineVividComponent.DOM.setBooleanAttribute(
+          vividElement.DOM.setBooleanAttribute(
             this.#target,
             reflectedProperty.destination,
             Boolean(value)
           );
           break;
         case "attribute":
-          defineVividComponent.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          vividElement.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
           break;
         case "property":
           if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
@@ -356,7 +355,7 @@ exports.TextField = class TextField extends FormAssociatedTextField {
     this.proxy.setAttribute("type", this.type);
     this.validate();
     if (this.autofocus) {
-      defineVividComponent.DOM.queueUpdate(() => {
+      vividElement.DOM.queueUpdate(() => {
         this.focus();
       });
     }
@@ -503,55 +502,55 @@ updateMirroredHelperText_fn = function() {
   }
 };
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], exports.TextField.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], exports.TextField.prototype, "autofocus", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "placeholder", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "type", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "list", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "maxlength", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "minlength", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "pattern", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], exports.TextField.prototype, "size", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], exports.TextField.prototype, "spellcheck", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "appearance", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "shape", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], exports.TextField.prototype, "autoComplete", 2);
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], exports.TextField.prototype, "scale", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "inputmode" })
+  vividElement.attr({ attribute: "inputmode" })
 ], exports.TextField.prototype, "inputMode", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], exports.TextField.prototype, "actionItemsSlottedContent", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
 exports.TextField = __decorateClass([
   formElements.errorText,

package/shared/text-field2.js

@@ -1,8 +1,7 @@
 import { a as applyMixins } from './apply-mixins.js';
-import { O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable } from './defineVividComponent.js';
+import { O as Observable, D as DOM, V as VividElement, a as attr, n as nullableNumberConverter, o as observable } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { m as memoizeWith } from './definition27.js';
 import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount } from './form-elements.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';