@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const vividElement = require('./vivid-element.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 
@@ -18,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class AccordionItem extends index.FoundationElement {
+class AccordionItem extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.headinglevel = 2;
@@ -37,36 +38,36 @@ class AccordionItem extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     attribute: "heading-level",
     mode: "fromView",
-    converter: index.nullableNumberConverter
+    converter: defineVividComponent.nullableNumberConverter
   })
 ], AccordionItem.prototype, "headinglevel");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], AccordionItem.prototype, "expanded");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AccordionItem.prototype, "id");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AccordionItem.prototype, "heading");
 __decorateClass([
-  index.attr({ mode: "boolean", attribute: "no-indicator" })
+  defineVividComponent.attr({ mode: "boolean", attribute: "no-indicator" })
 ], AccordionItem.prototype, "noIndicator");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AccordionItem.prototype, "meta");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AccordionItem.prototype, "size");
 applyMixins.applyMixins(AccordionItem, affix.AffixIconWithTrailing);
 
 const header = (context, hTag) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html`
+  return defineVividComponent.html`
 		<${hTag} class="heading-container">
 			<button
 				class="heading-button ${(x) => x.size ? `size-${x.size}` : ""}"
@@ -81,7 +82,7 @@ const header = (context, hTag) => {
 
 				<span class="heading-content">${(x) => x.heading}</span>
 
-				${when.when((x) => x.meta, index.html`<span class="meta">${(x) => x.meta}</span>`)}
+				${when.when((x) => x.meta, defineVividComponent.html`<span class="meta">${(x) => x.meta}</span>`)}
 
 				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
 				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
@@ -92,7 +93,7 @@ const header = (context, hTag) => {
 		</${hTag}>
 	`;
 };
-const AccordionItemTemplate = (context) => index.html`
+const AccordionItemTemplate = (context) => defineVividComponent.html`
 	${(x) => header(context, "h" + x.headinglevel)}
 	<div
 		id="${(x) => x.id}-panel"
@@ -104,18 +105,19 @@ const AccordionItemTemplate = (context) => index.html`
 	</div>
 `;
 
-const accordionItemDefinition = AccordionItem.compose({
-  baseName: "accordion-item",
-  template: AccordionItemTemplate,
-  styles
-});
-const accordionItemRegistries = [
-  accordionItemDefinition(),
-  ...definition.iconRegistries
-];
-const registerAccordionItem = index.registerFactory(accordionItemRegistries);
+const accordionItemDefinition = defineVividComponent.defineVividComponent(
+  "accordion-item",
+  AccordionItem,
+  AccordionItemTemplate,
+  [definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerAccordionItem = defineVividComponent.createRegisterFunction(
+  accordionItemDefinition
+);
 
 exports.AccordionItem = AccordionItem;
 exports.accordionItemDefinition = accordionItemDefinition;
-exports.accordionItemRegistries = accordionItemRegistries;
 exports.registerAccordionItem = registerAccordionItem;

package/shared/definition.js

@@ -1,7 +1,8 @@
-import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
+import { a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { i as iconDefinition } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { V as VividElement } from './vivid-element.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 
@@ -16,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class AccordionItem extends FoundationElement {
+class AccordionItem extends VividElement {
   constructor() {
     super(...arguments);
     this.headinglevel = 2;
@@ -102,15 +103,17 @@ const AccordionItemTemplate = (context) => html`
 	</div>
 `;
 
-const accordionItemDefinition = AccordionItem.compose({
-  baseName: "accordion-item",
-  template: AccordionItemTemplate,
-  styles
-});
-const accordionItemRegistries = [
-  accordionItemDefinition(),
-  ...iconRegistries
-];
-const registerAccordionItem = registerFactory(accordionItemRegistries);
+const accordionItemDefinition = defineVividComponent(
+  "accordion-item",
+  AccordionItem,
+  AccordionItemTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerAccordionItem = createRegisterFunction(
+  accordionItemDefinition
+);
 
-export { AccordionItem as A, accordionItemDefinition as a, accordionItemRegistries as b, registerAccordionItem as r };
+export { AccordionItem as A, accordionItemDefinition as a, registerAccordionItem as r };

package/shared/definition10.cjs

@@ -1,10 +1,11 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const slotted = require('./slotted.cjs');
 const breadcrumbItem = require('./breadcrumb-item.cjs');
+const vividElement = require('./vivid-element.cjs');
 
-const breadcrumbTemplate = () => index.html`
+const breadcrumbTemplate = defineVividComponent.html`
 	<nav aria-label="breadcrumbs" class="base">
 		<div role="list" class="list">
 			<slot
@@ -28,7 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Breadcrumb extends index.FoundationElement {
+class Breadcrumb extends vividElement.VividElement {
   /**
    * @internal
    */
@@ -70,17 +71,19 @@ class Breadcrumb extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.observable
+  defineVividComponent.observable
 ], Breadcrumb.prototype, "slottedBreadcrumbItems");
 
-const breadcrumbDefinition = Breadcrumb.compose({
-  baseName: "breadcrumb",
-  template: breadcrumbTemplate,
-  styles
-});
-const breadcrumbRegistries = [breadcrumbDefinition()];
-const registerBreadcrumb = index.registerFactory(breadcrumbRegistries);
+const breadcrumbDefinition = defineVividComponent.defineVividComponent(
+  "breadcrumb",
+  Breadcrumb,
+  breadcrumbTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerBreadcrumb = defineVividComponent.createRegisterFunction(breadcrumbDefinition);
 
 exports.breadcrumbDefinition = breadcrumbDefinition;
-exports.breadcrumbRegistries = breadcrumbRegistries;
 exports.registerBreadcrumb = registerBreadcrumb;

package/shared/definition10.js

@@ -1,8 +1,9 @@
-import { h as html, F as FoundationElement, o as observable, r as registerFactory } from './index.js';
+import { h as html, o as observable, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { B as BreadcrumbItem } from './breadcrumb-item.js';
+import { V as VividElement } from './vivid-element.js';
 
-const breadcrumbTemplate = () => html`
+const breadcrumbTemplate = html`
 	<nav aria-label="breadcrumbs" class="base">
 		<div role="list" class="list">
 			<slot
@@ -26,7 +27,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Breadcrumb extends FoundationElement {
+class Breadcrumb extends VividElement {
   /**
    * @internal
    */
@@ -71,12 +72,15 @@ __decorateClass([
   observable
 ], Breadcrumb.prototype, "slottedBreadcrumbItems");
 
-const breadcrumbDefinition = Breadcrumb.compose({
-  baseName: "breadcrumb",
-  template: breadcrumbTemplate,
-  styles
-});
-const breadcrumbRegistries = [breadcrumbDefinition()];
-const registerBreadcrumb = registerFactory(breadcrumbRegistries);
+const breadcrumbDefinition = defineVividComponent(
+  "breadcrumb",
+  Breadcrumb,
+  breadcrumbTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerBreadcrumb = createRegisterFunction(breadcrumbDefinition);
 
-export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };
+export { breadcrumbDefinition as b, registerBreadcrumb as r };