@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition41.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const slider_template = require('./slider.template.cjs');
 const aria = require('./aria.cjs');
 const numbers = require('./numbers.cjs');
@@ -460,70 +459,70 @@ unregisterDragListeners_fn = function() {
 _onDragMove = new WeakMap();
 _onDragEnd = new WeakMap();
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "start", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "start" })
+  vividElement.attr({ mode: "fromView", attribute: "start" })
 ], RangeSlider.prototype, "initialStart", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-start" })
+  vividElement.attr({ attribute: "current-start" })
 ], RangeSlider.prototype, "currentStart", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "end", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView", attribute: "end" })
+  vividElement.attr({ mode: "fromView", attribute: "end" })
 ], RangeSlider.prototype, "initialEnd", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "current-end" })
+  vividElement.attr({ attribute: "current-end" })
 ], RangeSlider.prototype, "currentEnd", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], RangeSlider.prototype, "step", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RangeSlider.prototype, "orientation", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-start-label" })
+  vividElement.attr({ attribute: "aria-start-label" })
 ], RangeSlider.prototype, "ariaStartLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-end-label" })
+  vividElement.attr({ attribute: "aria-end-label" })
 ], RangeSlider.prototype, "ariaEndLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "markers", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RangeSlider.prototype, "connotation", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "pin", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "valueTextFormatter", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_draggingThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_visiblyFocusedThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_hoveredThumb", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_startThumbCss", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_endThumbCss", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RangeSlider.prototype, "_selectedRangeCss", 2);
 RangeSlider = __decorateClass([
   formElements.formElements
@@ -541,7 +540,7 @@ const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames.c
 ]);
 const RangeSliderTemplate = (context) => {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html` <template
+  return vividElement.html` <template
 		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
 		<div class="${getClasses} ${(x) => x.orientation}">
@@ -550,7 +549,7 @@ const RangeSliderTemplate = (context) => {
 					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
 					${when.when(
     (x) => x.markers,
-    defineVividComponent.html`${(x) => slider_template.getMarkersTemplate(
+    vividElement.html`${(x) => slider_template.getMarkersTemplate(
       x.orientation === aria.Orientation.horizontal,
       Math.floor((x.max - x.min) / x.step)
     )}`
@@ -572,7 +571,7 @@ const RangeSliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
@@ -602,7 +601,7 @@ const RangeSliderTemplate = (context) => {
 				></div>
 				${when.when(
     (x) => x.pin,
-    defineVividComponent.html`<${popupTag}
+    vividElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
@@ -621,7 +620,7 @@ const RangeSliderTemplate = (context) => {
 	</template>`;
 };
 
-const rangeSliderDefinition = defineVividComponent.defineVividComponent(
+const rangeSliderDefinition = vividElement.defineVividComponent(
   "range-slider",
   RangeSlider,
   RangeSliderTemplate,
@@ -633,7 +632,7 @@ const rangeSliderDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerRangeSlider = defineVividComponent.createRegisterFunction(
+const registerRangeSlider = vividElement.createRegisterFunction(
   rangeSliderDefinition
 );
 

package/shared/definition41.js

@@ -1,9 +1,8 @@
 import { P as Popup, a as PlacementStrategy, p as popupDefinition } from './definition63.js';
-import { o as observable, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, e as keyArrowUp, h as keyArrowLeft, f as keyArrowDown, i as keyArrowRight } from './key-codes.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, g as getMarkersTemplate } from './slider.template.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';

package/shared/definition42.cjs

@@ -3,15 +3,14 @@
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition63.cjs');
 const definition$2 = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
 const formElements = require('./form-elements.cjs');
-const listbox = require('./listbox2.cjs');
+const listbox = require('./listbox.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const foundationElement = require('./foundation-element.cjs');
 const when = require('./when.cjs');
@@ -314,14 +313,14 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     this._areOptionsInitialized = true;
     if (oldValue) {
       for (const option of oldValue) {
-        const notifier = defineVividComponent.Observable.getNotifier(option);
+        const notifier = vividElement.Observable.getNotifier(option);
         notifier.unsubscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
       }
     }
     if (newValue) {
       for (const option of newValue) {
         option._displayCheckmark = true;
-        const notifier = defineVividComponent.Observable.getNotifier(option);
+        const notifier = vividElement.Observable.getNotifier(option);
         notifier.subscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
       }
     }
@@ -377,7 +376,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
       case "Enter":
       case " ": {
         this._onTagRemoved(this.values[tagIndex]);
-        defineVividComponent.DOM.processUpdates();
+        vividElement.DOM.processUpdates();
         __privateMethod(this, _SearchableSelect_instances, moveTagFocusTo_fn).call(this, __privateMethod(this, _SearchableSelect_instances, nextTagIndexForRemoved_fn).call(this, tagIndex));
         break;
       }
@@ -740,76 +739,76 @@ updateFormValue_fn = function() {
 };
 _resizeObserver = new WeakMap();
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "appearance", 2);
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "shape", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean", attribute: "fixed-dropdown" })
+  vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
 ], SearchableSelect.prototype, "fixedDropdown", 2);
 __decorateClass$1([
-  defineVividComponent.attr
+  vividElement.attr
 ], SearchableSelect.prototype, "placeholder", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "open", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "multiple", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ attribute: "external-tags", mode: "boolean" })
+  vividElement.attr({ attribute: "external-tags", mode: "boolean" })
 ], SearchableSelect.prototype, "externalTags", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ attribute: "max-lines", converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ attribute: "max-lines", converter: vividElement.nullableNumberConverter })
 ], SearchableSelect.prototype, "maxLines", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "values", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "initialValues", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_input", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_inputValue", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_slottedOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_filteredOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_contentArea", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_numElidedTags", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_tagRows", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_lastTagRow", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_listbox", 2);
 __decorateClass$1([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_changeDescription", 2);
 __decorateClass$1([
-  defineVividComponent.observable
+  vividElement.observable
 ], SearchableSelect.prototype, "_anchor", 2);
 SearchableSelect = __decorateClass$1([
   formElements.errorText,
@@ -846,19 +845,19 @@ class OptionTag extends foundationElement.FoundationElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], OptionTag.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], OptionTag.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], OptionTag.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], OptionTag.prototype, "hasIconPlaceholder");
 applyMixins.applyMixins(OptionTag, localized.Localized);
 
@@ -870,13 +869,13 @@ const getStateClasses = (x) => classNames.classNames(
   ["success", !!x.successText]
 );
 function renderLabel() {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
 	`;
 }
 const tagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="tag-wrapper">
 			<${optionTagTag}
 				class="tag"
@@ -896,7 +895,7 @@ const tagTemplateFactory = (context, getComponent) => {
 };
 const elidedTagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${optionTagTag}
 			class="tag"
 			tabindex="-1"
@@ -921,7 +920,7 @@ function renderFieldset(context) {
     context,
     (_, c) => c.parent
   );
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div
 			class="fieldset ${getStateClasses}"
 			@click="${(x, c) => x._onFieldsetClick(c.event)}"
@@ -931,7 +930,7 @@ function renderFieldset(context) {
 			<div class="content-area" ${ref.ref("_contentArea")}>
 				${repeat.repeat(
     (x) => x._tagRows,
-    defineVividComponent.html`
+    vividElement.html`
 						<div class="tag-row">
 							${when.when(
       (_, c) => c.isFirst && c.parent._numElidedTags,
@@ -978,7 +977,7 @@ function renderFieldset(context) {
 			<slot name="meta"></slot>
 			${when.when(
     (x) => x._shouldShowClearButton,
-    defineVividComponent.html`<${buttonTag}
+    vividElement.html`<${buttonTag}
 					aria-label="${(x) => x.locale.searchableSelect.clearButtonLabel}"
 					@click="${(x) => x._onClearButtonClick()}"
 					@mousedown="${() => false}"
@@ -996,7 +995,7 @@ function renderFieldset(context) {
 }
 function renderControl(context) {
   const popupTag = context.tagFor(definition.Popup);
-  return defineVividComponent.html`
+  return vividElement.html`
 		${when.when((x) => x.label, renderLabel())}
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
@@ -1028,16 +1027,16 @@ function renderControl(context) {
 						</slot>
 						${when.when(
     (x) => x._filteredOptions.length === 0,
-    defineVividComponent.html`<div class="empty-message">
+    vividElement.html`<div class="empty-message">
 								${when.when(
       (x) => x._inputValue === "",
-      defineVividComponent.html`<slot name="no-options">
+      vividElement.html`<slot name="no-options">
 										${(x) => x.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${when.when(
       (x) => x._inputValue !== "",
-      defineVividComponent.html`<slot name="no-matches">
+      vividElement.html`<slot name="no-matches">
 										${(x) => x.locale.searchableSelect.noMatchesMessage}
 									</slot>`
     )}
@@ -1051,7 +1050,7 @@ function renderControl(context) {
 }
 const SearchableSelectTemplate = (context) => {
   const optionTagTag = context.tagFor(OptionTag);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template :_optionTagTagName="${() => optionTagTag}">
 			<div class="control-wrapper">
 				${renderControl(context)} ${formElements.getFeedbackTemplate(context)}
@@ -1067,7 +1066,7 @@ const getClasses = ({ shape, disabled, removable }) => classNames.classNames(
   [`shape-${shape}`, Boolean(shape)]
 );
 function renderRemoveButton(iconTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<span
 			class="remove-button"
 			aria-label="${(x) => x.locale.searchableSelect.removeTagButtonLabel(x.label)}"
@@ -1081,22 +1080,22 @@ function renderRemoveButton(iconTag) {
 }
 const optionTagTemplate = (context) => {
   const iconTag = context.tagFor(definition$2.Icon);
-  return defineVividComponent.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
+  return vividElement.html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${when.when(
     (x) => x.hasIconPlaceholder,
-    defineVividComponent.html`<div class="icon-placeholder"></div>`
+    vividElement.html`<div class="icon-placeholder"></div>`
   )}
 		</slot>
 		${when.when(
     (x) => x.label,
-    (x) => defineVividComponent.html`<span class="label">${x.label}</span>`
+    (x) => vividElement.html`<span class="label">${x.label}</span>`
   )}
 		${when.when((x) => x.removable, renderRemoveButton(iconTag))}
 	</span>`;
 };
 
-const optionTagDefinition = defineVividComponent.defineVividComponent(
+const optionTagDefinition = vividElement.defineVividComponent(
   "option-tag",
   OptionTag,
   optionTagTemplate,
@@ -1108,7 +1107,7 @@ const optionTagDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const searchableSelectDefinition = defineVividComponent.defineVividComponent(
+const searchableSelectDefinition = vividElement.defineVividComponent(
   "searchable-select",
   SearchableSelect,
   SearchableSelectTemplate,
@@ -1120,7 +1119,7 @@ const searchableSelectDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSearchableSelect = defineVividComponent.createRegisterFunction(
+const registerSearchableSelect = vividElement.createRegisterFunction(
   searchableSelectDefinition
 );
 

package/shared/definition42.js

@@ -1,15 +1,14 @@
 import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from './definition11.js';
 import { P as Popup, p as popupDefinition } from './definition63.js';
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, f as createRegisterFunction, d as defineVividComponent } from './defineVividComponent.js';
+import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, f as createRegisterFunction, d as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
-import { a as Listbox } from './listbox2.js';
+import { L as Listbox } from './listbox.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { F as FoundationElement } from './foundation-element.js';
 import { w as when } from './when.js';