@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition8.cjs

@@ -2,11 +2,10 @@
 
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -71,38 +70,38 @@ class Banner extends vividElement.VividElement {
   #closeOnKeyDown;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "dismiss-aria-label" })
+  vividElement.attr({ attribute: "dismiss-aria-label" })
 ], Banner.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Banner.prototype, "role");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "action-href" })
+  vividElement.attr({ attribute: "action-href" })
 ], Banner.prototype, "actionHref");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "action-text" })
+  vividElement.attr({ attribute: "action-text" })
 ], Banner.prototype, "actionText");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Banner.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-live" })
+  vividElement.attr({ attribute: "aria-live" })
 ], Banner.prototype, "ariaLive");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Banner.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Banner.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Banner.prototype, "actionItemsSlottedContent");
 applyMixins.applyMixins(Banner, affix.AffixIcon);
 applyMixins.applyMixins(Banner, localized.Localized);
 
 const getClasses = (_) => classNames.classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
 function renderDismissButton(buttonTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 	  <${buttonTag}
 	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
 			part="${(x) => x.connotation === "warning" ? "" : "vvd-theme-alternate"}"
@@ -115,7 +114,7 @@ function renderDismissButton(buttonTag) {
 const BannerTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const buttonTag = context.tagFor(definition.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<div class="${getClasses}">
 			<header class="header">
 				<div class="content">
@@ -140,7 +139,7 @@ const BannerTemplate = (context) => {
 	`;
 };
 
-const bannerDefinition = defineVividComponent.defineVividComponent(
+const bannerDefinition = vividElement.defineVividComponent(
   "banner",
   Banner,
   BannerTemplate,
@@ -149,7 +148,7 @@ const bannerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerBanner = defineVividComponent.createRegisterFunction(bannerDefinition);
+const registerBanner = vividElement.createRegisterFunction(bannerDefinition);
 
 exports.bannerDefinition = bannerDefinition;
 exports.registerBanner = registerBanner;

package/shared/definition8.js

@@ -1,10 +1,9 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.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 applyMixins } from './apply-mixins.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { V as VividElement } from './vivid-element.js';
 import { L as Localized } from './localized.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';

package/shared/definition9.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const breadcrumbItem = require('./breadcrumb-item.cjs');
 const textAnchor_template = require('./text-anchor.template.cjs');
 const when = require('./when.cjs');
@@ -12,20 +12,20 @@ const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canv
 const getClasses = (_) => classNames.classNames("base");
 const BreadcrumbItemTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
-  return defineVividComponent.html` <div role="listitem" class="${getClasses}">
-		${when.when((x) => x.text && !x.href, defineVividComponent.html`${(x) => x.text}`)}
+  return vividElement.html` <div role="listitem" class="${getClasses}">
+		${when.when((x) => x.text && !x.href, vividElement.html`${(x) => x.text}`)}
 		${when.when(
     (x) => x.text && x.href && x.href.length > 0,
-    defineVividComponent.html`${textAnchor_template.textAnchorTemplate(context)}`
+    vividElement.html`${textAnchor_template.textAnchorTemplate(context)}`
   )}
 		${when.when(
     (x) => x.separator,
-    defineVividComponent.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+    vividElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
   )}
 	</div>`;
 };
 
-const breadcrumbItemDefinition = defineVividComponent.defineVividComponent(
+const breadcrumbItemDefinition = vividElement.defineVividComponent(
   "breadcrumb-item",
   breadcrumbItem.BreadcrumbItem,
   BreadcrumbItemTemplate,
@@ -37,7 +37,7 @@ const breadcrumbItemDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerBreadcrumbItem = defineVividComponent.createRegisterFunction(
+const registerBreadcrumbItem = vividElement.createRegisterFunction(
   breadcrumbItemDefinition
 );
 

package/shared/definition9.js

@@ -1,5 +1,5 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { B as BreadcrumbItem } from './breadcrumb-item.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
 import { w as when } from './when.js';

package/shared/form-associated.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 
 const proxySlotName = "form-associated-proxy";
@@ -92,7 +92,7 @@ function FormAssociated(BaseCtor) {
         );
         return Object.freeze(forLabels.concat(Array.from(parentLabels)));
       } else {
-        return defineVividComponent.emptyArray;
+        return vividElement.emptyArray;
       }
     }
     /**
@@ -141,7 +141,7 @@ function FormAssociated(BaseCtor) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * Invoked when the `name` property changes
@@ -168,7 +168,7 @@ function FormAssociated(BaseCtor) {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**
@@ -335,12 +335,12 @@ function FormAssociated(BaseCtor) {
       e.stopPropagation();
     }
   };
-  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "disabled");
-  defineVividComponent.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-  defineVividComponent.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-  defineVividComponent.attr(C.prototype, "name");
-  defineVividComponent.attr({ mode: "boolean" })(C.prototype, "required");
-  defineVividComponent.observable(C.prototype, "value");
+  vividElement.attr({ mode: "boolean" })(C.prototype, "disabled");
+  vividElement.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+  vividElement.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+  vividElement.attr(C.prototype, "name");
+  vividElement.attr({ mode: "boolean" })(C.prototype, "required");
+  vividElement.observable(C.prototype, "value");
   return C;
 }
 function CheckableFormAssociated(BaseCtor) {
@@ -418,16 +418,16 @@ function CheckableFormAssociated(BaseCtor) {
       this.dirtyChecked = false;
     }
   }
-  defineVividComponent.attr({ attribute: "checked", mode: "boolean" })(
+  vividElement.attr({ attribute: "checked", mode: "boolean" })(
     D.prototype,
     "checkedAttribute"
   );
-  defineVividComponent.attr({ attribute: "current-checked", converter: defineVividComponent.booleanConverter })(
+  vividElement.attr({ attribute: "current-checked", converter: vividElement.booleanConverter })(
     D.prototype,
     "currentChecked"
   );
-  defineVividComponent.observable(D.prototype, "defaultChecked");
-  defineVividComponent.observable(D.prototype, "checked");
+  vividElement.observable(D.prototype, "defaultChecked");
+  vividElement.observable(D.prototype, "checked");
   return D;
 }
 

package/shared/form-associated.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './defineVividComponent.js';
+import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/form-associated2.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes2.cjs');
 
 const proxySlotName = "form-associated-proxy";
@@ -117,7 +117,7 @@ function FormAssociated(BaseCtor) {
                 return Object.freeze(labels);
             }
             else {
-                return defineVividComponent.emptyArray;
+                return vividElement.emptyArray;
             }
         }
         /**
@@ -176,7 +176,7 @@ function FormAssociated(BaseCtor) {
             if (this.proxy instanceof HTMLElement) {
                 this.proxy.disabled = this.disabled;
             }
-            defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+            vividElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
         }
         /**
          * Invoked when the `name` property changes
@@ -209,7 +209,7 @@ function FormAssociated(BaseCtor) {
             if (this.proxy instanceof HTMLElement) {
                 this.proxy.required = this.required;
             }
-            defineVividComponent.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            vividElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
             this.validate();
         }
         /**
@@ -371,12 +371,12 @@ function FormAssociated(BaseCtor) {
             e.stopPropagation();
         }
     };
-    defineVividComponent.attr({ mode: "boolean" })(C.prototype, "disabled");
-    defineVividComponent.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
-    defineVividComponent.attr({ attribute: "current-value" })(C.prototype, "currentValue");
-    defineVividComponent.attr(C.prototype, "name");
-    defineVividComponent.attr({ mode: "boolean" })(C.prototype, "required");
-    defineVividComponent.observable(C.prototype, "value");
+    vividElement.attr({ mode: "boolean" })(C.prototype, "disabled");
+    vividElement.attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    vividElement.attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    vividElement.attr(C.prototype, "name");
+    vividElement.attr({ mode: "boolean" })(C.prototype, "required");
+    vividElement.observable(C.prototype, "value");
     return C;
 }
 

package/shared/form-associated2.js

@@ -1,4 +1,4 @@
-import { a as attr, o as observable, e as emptyArray, D as DOM } from './defineVividComponent.js';
+import { a as attr, o as observable, e as emptyArray, D as DOM } from './vivid-element.js';
 import { k as keyEnter } from './key-codes2.js';
 
 const proxySlotName = "form-associated-proxy";

package/shared/form-elements.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -20,15 +20,15 @@ var __decorateClass = (decorators, target, key, kind) => {
 class FormElementHelperText {
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "helper-text" })
+  vividElement.attr({ attribute: "helper-text" })
 ], FormElementHelperText.prototype, "helperText");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], FormElementHelperText.prototype, "_helperTextSlottedContent");
 class FormElementSuccessText {
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "success-text" })
+  vividElement.attr({ attribute: "success-text" })
 ], FormElementSuccessText.prototype, "successText");
 class FormElementCharCount {
   constructor() {
@@ -36,7 +36,7 @@ class FormElementCharCount {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "char-count",
     mode: "boolean"
   })
@@ -87,10 +87,10 @@ function formElements(constructor) {
     }
   }
   __decorateClass([
-    defineVividComponent.attr
+    vividElement.attr
   ], Decorated.prototype, "label");
   __decorateClass([
-    defineVividComponent.observable
+    vividElement.observable
   ], Decorated.prototype, "errorValidationMessage");
   return Decorated;
 }
@@ -121,7 +121,7 @@ const isFeedbackAvailable = (config, x) => Boolean(
   x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
 );
 function getFeedbackTemplate(context) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<style>
 			${messageStyles}
 		</style>
@@ -144,13 +144,13 @@ function getFeedbackTemplate(context) {
 }
 function getFeedbackTypeTemplate(context, config, shouldShow) {
   const iconTag = context.tagFor(definition.Icon);
-  const messageTemplate = defineVividComponent.html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? defineVividComponent.html`<slot
+  const messageTemplate = vividElement.html`${(x) => x[config.messageProperty]}`;
+  const innerTemplate = config.slot ? vividElement.html`<slot
 				name="${config.slot.name}"
 				${slotted.slotted(config.slot.slottedContentProperty)}
 				>${messageTemplate}</slot
 		  >` : messageTemplate;
-  return defineVividComponent.html`<div
+  return vividElement.html`<div
 		class="${(x) => classNames.classNames(
     "message",
     `${config.className}-message`,
@@ -162,7 +162,7 @@ function getFeedbackTypeTemplate(context, config, shouldShow) {
 	>
 		${when.when(
     (x) => shouldShow(x) && config.iconType,
-    defineVividComponent.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
+    vividElement.html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
   )}
 		<span class="message-text">${innerTemplate}</span>
 	</div>`;
@@ -196,7 +196,7 @@ function errorText(constructor) {
     }
   }
   __decorateClass([
-    defineVividComponent.attr({ attribute: "error-text" })
+    vividElement.attr({ attribute: "error-text" })
   ], Decorated.prototype, "errorText");
   return Decorated;
 }

package/shared/form-elements.js

@@ -1,5 +1,5 @@
 import { I as Icon } from './definition27.js';
-import { a as attr, o as observable, h as html } from './defineVividComponent.js';
+import { a as attr, o as observable, h as html } from './vivid-element.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';

package/shared/foundation/progress/base-progress.d.ts

@@ -1,5 +1,5 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-export declare class BaseProgress extends FoundationElement {
+import { VividElement } from '../vivid-element/vivid-element';
+export declare class BaseProgress extends VividElement {
     value: number | null;
     min: number;
     max: number;