@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition18.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition$1 = require('./definition64.cjs');
+const definition$1 = require('./definition63.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition56.cjs');
+const definition$2 = require('./definition55.cjs');
 const definition$3 = require('./definition22.cjs');
 const presentationDate = require('./presentationDate.cjs');
+const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 
 var __defProp = Object.defineProperty;
@@ -156,30 +156,26 @@ updateValueDueToUserInteraction_fn = function(newValue) {
   this.$emit("input");
 };
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DatePicker.prototype, "_calendarButtonLabel", 1);
 DatePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
 ], DatePicker);
 
-const datePickerDefinition = DatePicker.compose({
-  baseName: "date-picker",
-  template: presentationDate.DatePickerBaseTemplate,
-  styles: presentationDate.styles,
-  shadowOptions: {
-    delegatesFocus: true
+const datePickerDefinition = vividElement.defineVividComponent(
+  "date-picker",
+  DatePicker,
+  presentationDate.DatePickerBaseTemplate,
+  [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
+  {
+    styles: presentationDate.styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const datePickerRegistries = [
-  datePickerDefinition(),
-  ...definition.buttonRegistries,
-  ...definition$1.popupRegistries,
-  ...definition$2.textFieldRegistries,
-  ...definition$3.dividerRegistries
-];
-const registerDatePicker = index.registerFactory(datePickerRegistries);
+);
+const registerDatePicker = vividElement.createRegisterFunction(datePickerDefinition);
 
 exports.datePickerDefinition = datePickerDefinition;
-exports.datePickerRegistries = datePickerRegistries;
 exports.registerDatePicker = registerDatePicker;

package/shared/definition18.js

@@ -1,9 +1,9 @@
-import { v as volatile, r as registerFactory } from './index.js';
-import { p as popupRegistries } from './definition64.js';
-import { a as buttonRegistries } from './definition11.js';
-import { a as textFieldRegistries } from './definition56.js';
-import { a as dividerRegistries } from './definition22.js';
-import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
+import { p as popupDefinition } from './definition63.js';
+import { b as buttonDefinition } from './definition11.js';
+import { t as textFieldDefinition } from './definition55.js';
+import { d as dividerDefinition } from './definition22.js';
+import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
+import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 var __defProp = Object.defineProperty;
@@ -161,21 +161,18 @@ DatePicker = __decorateClass([
   formElements
 ], DatePicker);
 
-const datePickerDefinition = DatePicker.compose({
-  baseName: "date-picker",
-  template: DatePickerBaseTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const datePickerDefinition = defineVividComponent(
+  "date-picker",
+  DatePicker,
+  DatePickerBaseTemplate,
+  [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const datePickerRegistries = [
-  datePickerDefinition(),
-  ...buttonRegistries,
-  ...popupRegistries,
-  ...textFieldRegistries,
-  ...dividerRegistries
-];
-const registerDatePicker = registerFactory(datePickerRegistries);
+);
+const registerDatePicker = createRegisterFunction(datePickerDefinition);
 
-export { datePickerRegistries as a, datePickerDefinition as d, registerDatePicker as r };
+export { datePickerDefinition as d, registerDatePicker as r };

package/shared/definition19.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition64.cjs');
-const definition$2 = require('./definition56.cjs');
+const definition$1 = require('./definition63.cjs');
+const definition$2 = require('./definition55.cjs');
 const definition$3 = require('./definition22.cjs');
 const presentationDate = require('./presentationDate.cjs');
+const vividElement = require('./vivid-element.cjs');
 const formElements = require('./form-elements.cjs');
 
 const formatRange = (from, to) => {
@@ -382,56 +382,52 @@ getVisibleRange_fn = function() {
   return { start, end };
 };
 __decorateClass([
-  index.attr({ mode: "fromView", attribute: "start" })
+  vividElement.attr({ mode: "fromView", attribute: "start" })
 ], DateRangePicker.prototype, "initialStart", 2);
 __decorateClass([
-  index.attr({ mode: "fromView", attribute: "end" })
+  vividElement.attr({ mode: "fromView", attribute: "end" })
 ], DateRangePicker.prototype, "initialEnd", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "start", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "end", 2);
 __decorateClass([
-  index.attr({ attribute: "current-start" })
+  vividElement.attr({ attribute: "current-start" })
 ], DateRangePicker.prototype, "currentStart", 2);
 __decorateClass([
-  index.attr({ attribute: "current-end" })
+  vividElement.attr({ attribute: "current-end" })
 ], DateRangePicker.prototype, "currentEnd", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "_numCalendars", 2);
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], DateRangePicker.prototype, "_hoverDate", 2);
 __decorateClass([
-  index.volatile
+  vividElement.volatile
 ], DateRangePicker.prototype, "_calendarButtonLabel", 1);
 DateRangePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
 ], DateRangePicker);
 
-const dateRangePickerDefinition = DateRangePicker.compose({
-  baseName: "date-range-picker",
-  template: presentationDate.DatePickerBaseTemplate,
-  styles: presentationDate.styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-const dateRangePickerRegistries = [
-  dateRangePickerDefinition(),
-  ...definition.buttonRegistries,
-  ...definition$1.popupRegistries,
-  ...definition$2.textFieldRegistries,
-  ...definition$3.dividerRegistries
-];
-const registerDateRangePicker = index.registerFactory(
-  dateRangePickerRegistries
+const dateRangePickerDefinition = vividElement.defineVividComponent(
+  "date-range-picker",
+  DateRangePicker,
+  presentationDate.DatePickerBaseTemplate,
+  [definition.buttonDefinition, definition$1.popupDefinition, definition$2.textFieldDefinition, definition$3.dividerDefinition],
+  {
+    styles: presentationDate.styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerDateRangePicker = vividElement.createRegisterFunction(
+  dateRangePickerDefinition
 );
 
 exports.dateRangePickerDefinition = dateRangePickerDefinition;
-exports.dateRangePickerRegistries = dateRangePickerRegistries;
 exports.registerDateRangePicker = registerDateRangePicker;

package/shared/definition19.js

@@ -1,9 +1,9 @@
-import { a as attr, o as observable, v as volatile, r as registerFactory } from './index.js';
-import { a as buttonRegistries } from './definition11.js';
-import { p as popupRegistries } from './definition64.js';
-import { a as textFieldRegistries } from './definition56.js';
-import { a as dividerRegistries } from './definition22.js';
-import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, a as DatePickerBaseTemplate, s as styles } from './presentationDate.js';
+import { b as buttonDefinition } from './definition11.js';
+import { p as popupDefinition } from './definition63.js';
+import { t as textFieldDefinition } from './definition55.js';
+import { d as dividerDefinition } from './definition22.js';
+import { f as formatPresentationDate, p as parsePresentationDate, D as DatePickerBase, i as isValidDateStr, c as compareDateStr, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
+import { a as attr, o as observable, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { e as errorText, f as formElements } from './form-elements.js';
 
 const formatRange = (from, to) => {
@@ -411,23 +411,20 @@ DateRangePicker = __decorateClass([
   formElements
 ], DateRangePicker);
 
-const dateRangePickerDefinition = DateRangePicker.compose({
-  baseName: "date-range-picker",
-  template: DatePickerBaseTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-const dateRangePickerRegistries = [
-  dateRangePickerDefinition(),
-  ...buttonRegistries,
-  ...popupRegistries,
-  ...textFieldRegistries,
-  ...dividerRegistries
-];
-const registerDateRangePicker = registerFactory(
-  dateRangePickerRegistries
+const dateRangePickerDefinition = defineVividComponent(
+  "date-range-picker",
+  DateRangePicker,
+  DatePickerBaseTemplate,
+  [buttonDefinition, popupDefinition, textFieldDefinition, dividerDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerDateRangePicker = createRegisterFunction(
+  dateRangePickerDefinition
 );
 
-export { dateRangePickerRegistries as a, dateRangePickerDefinition as d, registerDateRangePicker as r };
+export { dateRangePickerDefinition as d, registerDateRangePicker as r };

package/shared/definition2.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition.cjs');
 const keyCodes = require('./key-codes.cjs');
 const numbers = require('./numbers.cjs');
@@ -28,7 +28,7 @@ const AccordionExpandMode = {
    */
   multi: "multi"
 };
-class Accordion extends index.FoundationElement {
+class Accordion extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
@@ -172,33 +172,30 @@ class Accordion extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr({ attribute: "expand-mode" })
+  vividElement.attr({ attribute: "expand-mode" })
 ], Accordion.prototype, "expandmode");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  index.observable
+  vividElement.observable
 ], Accordion.prototype, "accordionItems");
 
 const getClasses = (_) => classNames.classNames("base");
-const AccordionTemplate = () => index.html`
-		<div class="${getClasses}">
-			<slot
-				${slotted.slotted({ property: "accordionItems", filter: slotted.elements() })}
-			></slot>
-		</div>
-	`;
+const AccordionTemplate = vividElement.html`
+	<div class="${getClasses}">
+		<slot ${slotted.slotted({ property: "accordionItems", filter: slotted.elements() })}></slot>
+	</div>
+`;
 
-const accordionDefinition = Accordion.compose({
-  baseName: "accordion",
-  template: AccordionTemplate,
-  styles
-});
-const accordionRegistries = [
-  accordionDefinition(),
-  ...definition.accordionItemRegistries
-];
-const registerAccordion = index.registerFactory(accordionRegistries);
+const accordionDefinition = vividElement.defineVividComponent(
+  "accordion",
+  Accordion,
+  AccordionTemplate,
+  [definition.accordionItemDefinition],
+  {
+    styles
+  }
+);
+const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
 
 exports.accordionDefinition = accordionDefinition;
-exports.accordionRegistries = accordionRegistries;
 exports.registerAccordion = registerAccordion;

package/shared/definition2.js

@@ -1,6 +1,6 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { A as AccordionItem, b as accordionItemRegistries } from './definition.js';
-import { a as keyEnd, b as keyHome, c as keyArrowDown, d as keyArrowUp } from './key-codes.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { A as AccordionItem, a as accordionItemDefinition } from './definition.js';
+import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { c as classNames } from './class-names.js';
@@ -26,7 +26,7 @@ const AccordionExpandMode = {
    */
   multi: "multi"
 };
-class Accordion extends FoundationElement {
+class Accordion extends VividElement {
   constructor() {
     super(...arguments);
     /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
@@ -178,23 +178,21 @@ __decorateClass([
 ], Accordion.prototype, "accordionItems");
 
 const getClasses = (_) => classNames("base");
-const AccordionTemplate = () => html`
-		<div class="${getClasses}">
-			<slot
-				${slotted({ property: "accordionItems", filter: elements() })}
-			></slot>
-		</div>
-	`;
+const AccordionTemplate = html`
+	<div class="${getClasses}">
+		<slot ${slotted({ property: "accordionItems", filter: elements() })}></slot>
+	</div>
+`;
 
-const accordionDefinition = Accordion.compose({
-  baseName: "accordion",
-  template: AccordionTemplate,
-  styles
-});
-const accordionRegistries = [
-  accordionDefinition(),
-  ...accordionItemRegistries
-];
-const registerAccordion = registerFactory(accordionRegistries);
+const accordionDefinition = defineVividComponent(
+  "accordion",
+  Accordion,
+  AccordionTemplate,
+  [accordionItemDefinition],
+  {
+    styles
+  }
+);
+const registerAccordion = createRegisterFunction(accordionDefinition);
 
-export { accordionDefinition as a, accordionRegistries as b, registerAccordion as r };
+export { accordionDefinition as a, registerAccordion as r };

package/shared/definition20.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
-const definition$1 = require('./definition56.cjs');
+const definition$2 = require('./definition55.cjs');
+const vividElement = require('./vivid-element.cjs');
+const definition$1 = require('./definition27.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const textField = require('./text-field2.cjs');
-const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
@@ -24,7 +24,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class DialPad extends index.FoundationElement {
+class DialPad extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.helperText = null;
@@ -54,37 +54,37 @@ class DialPad extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr({ attribute: "helper-text" })
+  vividElement.attr({ attribute: "helper-text" })
 ], DialPad.prototype, "helperText");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], DialPad.prototype, "placeholder");
 __decorateClass([
-  index.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "value");
 __decorateClass([
-  index.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "pattern");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "disabled");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "pending");
 __decorateClass([
-  index.attr({ attribute: "call-active", mode: "boolean" })
+  vividElement.attr({ attribute: "call-active", mode: "boolean" })
 ], DialPad.prototype, "callActive");
 __decorateClass([
-  index.attr({ mode: "boolean", attribute: "no-call" })
+  vividElement.attr({ mode: "boolean", attribute: "no-call" })
 ], DialPad.prototype, "noCall");
 __decorateClass([
-  index.attr({ mode: "boolean", attribute: "no-input" })
+  vividElement.attr({ mode: "boolean", attribute: "no-input" })
 ], DialPad.prototype, "noInput");
 __decorateClass([
-  index.attr({ attribute: "end-call-button-label" })
+  vividElement.attr({ attribute: "end-call-button-label" })
 ], DialPad.prototype, "endCallButtonLabel");
 __decorateClass([
-  index.attr({ attribute: "call-button-label" })
+  vividElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
 applyMixins.applyMixins(DialPad, localized.Localized);
 
@@ -156,27 +156,27 @@ function deleteLastCharacter(dialPad) {
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
-  return index.html`<${textFieldTag} ${ref.ref(
+  return vividElement.html`<${textFieldTag} ${ref.ref(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
             ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
             @keydown="${(x, c) => handleKeyDown(x, c.event)}"
-            @input="${syncFieldAndPadValues}" 
+            @input="${syncFieldAndPadValues}"
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
 			>
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
-    index.html`<${buttonTag}
-                				slot="action-items" 
-								size='super-condensed' 
-								icon="backspace-line" 
+    vividElement.html`<${buttonTag}
+                				slot="action-items"
+								size='super-condensed'
+								icon="backspace-line"
 								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
-								appearance='ghost' 
-								?disabled="${(x) => x.disabled || x.callActive}" 
+								appearance='ghost'
+								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">
             </${buttonTag}>`
   )}
@@ -189,24 +189,24 @@ function onDigitClick(digit, { parent: dialPad, event }) {
   dialPad.$emit("change");
 }
 function renderDigits(buttonTag, iconTag) {
-  return index.html`
+  return vividElement.html`
 		${repeat.repeat(
     (_) => DIAL_PAD_BUTTONS,
-    index.html`
-			<${buttonTag} 
+    vividElement.html`
+			<${buttonTag}
 					  id="${(x) => x.id}"
-					  value="${(x) => x.value}" 
-					  stacked 
-					  appearance="ghost-light" 
-					  shape="pill" 
+					  value="${(x) => x.value}"
+					  stacked
+					  appearance="ghost-light"
+					  shape="pill"
 					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
-					  size='condensed' 
-					  class="digit-btn" 
-					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}" 
-					  ?disabled="${(_, c) => c.parent.disabled}" 
+					  size='condensed'
+					  class="digit-btn"
+					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
+					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
-					  	<${iconTag} slot="icon" 
-									name="${(x) => x.icon}" 
+					  	<${iconTag} slot="icon"
+									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
 		`
@@ -214,7 +214,7 @@ function renderDigits(buttonTag, iconTag) {
 	`;
 }
 function renderDialButton(buttonTag) {
-  return index.html`<${buttonTag} class="call-btn"
+  return vividElement.html`<${buttonTag} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
@@ -226,28 +226,26 @@ function renderDialButton(buttonTag) {
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button$1);
-  const iconTag = context.tagFor(icon.Icon);
+  const buttonTag = context.tagFor(definition.Button);
+  const iconTag = context.tagFor(definition$1.Icon);
   const textFieldTag = context.tagFor(textField.TextField);
-  return index.html` <div class="${getClasses}">
+  return vividElement.html` <div class="${getClasses}">
 		${when.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
 		${when.when((x) => !x.noCall, renderDialButton(buttonTag))}
 	</div>`;
 };
 
-const dialPadDefinition = DialPad.compose({
-  baseName: "dial-pad",
-  template: DialPadTemplate,
-  styles
-});
-const dialPadRegistries = [
-  dialPadDefinition(),
-  ...definition.buttonRegistries,
-  ...definition$1.textFieldRegistries
-];
-const registerDialPad = index.registerFactory(dialPadRegistries);
+const dialPadDefinition = vividElement.defineVividComponent(
+  "dial-pad",
+  DialPad,
+  DialPadTemplate,
+  [definition.buttonDefinition, definition$2.textFieldDefinition, definition$1.iconDefinition],
+  {
+    styles
+  }
+);
+const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
 
 exports.dialPadDefinition = dialPadDefinition;
-exports.dialPadRegistries = dialPadRegistries;
 exports.registerDialPad = registerDialPad;