@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition7.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
@@ -16,19 +16,19 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Badge extends index.FoundationElement {
+class Badge extends vividElement.VividElement {
 }
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Badge.prototype, "connotation");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Badge.prototype, "shape");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Badge.prototype, "appearance");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Badge.prototype, "text");
 applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
 
@@ -51,22 +51,25 @@ const getClasses = ({
 );
 const badgeTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return index.html` <span class="${getClasses}">
+  return vividElement.html` <span class="${getClasses}">
 		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 		${when.when(
     (x) => x.text,
-    (x) => index.html`<span class="text">${x.text}</span>`
+    (x) => vividElement.html`<span class="text">${x.text}</span>`
   )}
 	</span>`;
 };
 
-const badgeDefinition = Badge.compose({
-  baseName: "badge",
-  template: badgeTemplate,
-  styles
-});
-const badgeRegistries = [badgeDefinition(), ...definition.iconRegistries];
-const registerBadge = index.registerFactory(badgeRegistries);
+const badgeDefinition = vividElement.defineVividComponent(
+  "badge",
+  Badge,
+  badgeTemplate,
+  [definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerBadge = vividElement.createRegisterFunction(badgeDefinition);
 
 exports.badgeDefinition = badgeDefinition;
 exports.registerBadge = registerBadge;

package/shared/definition7.js

@@ -1,5 +1,5 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.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 { w as when } from './when.js';
@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Badge extends FoundationElement {
+class Badge extends VividElement {
 }
 __decorateClass([
   attr
@@ -58,12 +58,15 @@ const badgeTemplate = (context) => {
 	</span>`;
 };
 
-const badgeDefinition = Badge.compose({
-  baseName: "badge",
-  template: badgeTemplate,
-  styles
-});
-const badgeRegistries = [badgeDefinition(), ...iconRegistries];
-const registerBadge = registerFactory(badgeRegistries);
+const badgeDefinition = defineVividComponent(
+  "badge",
+  Badge,
+  badgeTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerBadge = createRegisterFunction(badgeDefinition);
 
 export { badgeDefinition as b, registerBadge as r };

package/shared/definition8.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition11.cjs');
 const definition$1 = require('./definition27.cjs');
+const vividElement = require('./vivid-element.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -30,7 +30,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends index.FoundationElement {
+class Banner extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -70,38 +70,38 @@ class Banner extends index.FoundationElement {
   #closeOnKeyDown;
 }
 __decorateClass([
-  index.attr({ attribute: "dismiss-aria-label" })
+  vividElement.attr({ attribute: "dismiss-aria-label" })
 ], Banner.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  index.attr
+  vividElement.attr
 ], Banner.prototype, "role");
 __decorateClass([
-  index.attr({ attribute: "action-href" })
+  vividElement.attr({ attribute: "action-href" })
 ], Banner.prototype, "actionHref");
 __decorateClass([
-  index.attr({ attribute: "action-text" })
+  vividElement.attr({ attribute: "action-text" })
 ], Banner.prototype, "actionText");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Banner.prototype, "removable");
 __decorateClass([
-  index.attr({ attribute: "aria-live" })
+  vividElement.attr({ attribute: "aria-live" })
 ], Banner.prototype, "ariaLive");
 __decorateClass([
-  index.attr()
+  vividElement.attr()
 ], Banner.prototype, "text");
 __decorateClass([
-  index.attr()
+  vividElement.attr()
 ], Banner.prototype, "connotation");
 __decorateClass([
-  index.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 index.html`
+  return vividElement.html`
 	  <${buttonTag}
 	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
 			part="${(x) => x.connotation === "warning" ? "" : "vvd-theme-alternate"}"
@@ -113,8 +113,8 @@ function renderDismissButton(buttonTag) {
 }
 const BannerTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const buttonTag = context.tagFor(definition.Button$1);
-  return index.html`
+  const buttonTag = context.tagFor(definition.Button);
+  return vividElement.html`
 		<div class="${getClasses}">
 			<header class="header">
 				<div class="content">
@@ -139,18 +139,16 @@ const BannerTemplate = (context) => {
 	`;
 };
 
-const bannerDefinition = Banner.compose({
-  baseName: "banner",
-  template: BannerTemplate,
-  styles
-});
-const bannerRegistries = [
-  bannerDefinition(),
-  ...definition$1.iconRegistries,
-  ...definition.buttonRegistries
-];
-const registerBanner = index.registerFactory(bannerRegistries);
+const bannerDefinition = vividElement.defineVividComponent(
+  "banner",
+  Banner,
+  BannerTemplate,
+  [definition$1.iconDefinition, definition.buttonDefinition],
+  {
+    styles
+  }
+);
+const registerBanner = vividElement.createRegisterFunction(bannerDefinition);
 
 exports.bannerDefinition = bannerDefinition;
-exports.bannerRegistries = bannerRegistries;
 exports.registerBanner = registerBanner;

package/shared/definition8.js

@@ -1,9 +1,9 @@
-import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
-import { a as iconRegistries } from './definition27.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { i as iconDefinition } from './definition27.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 { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
@@ -28,7 +28,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Alert, "error-solid"]
 ]);
 const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
-class Banner extends FoundationElement {
+class Banner extends VividElement {
   constructor() {
     super(...arguments);
     this.dismissButtonAriaLabel = null;
@@ -137,16 +137,15 @@ const BannerTemplate = (context) => {
 	`;
 };
 
-const bannerDefinition = Banner.compose({
-  baseName: "banner",
-  template: BannerTemplate,
-  styles
-});
-const bannerRegistries = [
-  bannerDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries
-];
-const registerBanner = registerFactory(bannerRegistries);
+const bannerDefinition = defineVividComponent(
+  "banner",
+  Banner,
+  BannerTemplate,
+  [iconDefinition, buttonDefinition],
+  {
+    styles
+  }
+);
+const registerBanner = createRegisterFunction(bannerDefinition);
 
-export { bannerRegistries as a, bannerDefinition as b, registerBanner as r };
+export { bannerDefinition as b, registerBanner as r };

package/shared/definition9.cjs

@@ -1,45 +1,45 @@
 'use strict';
 
-const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
+const vividElement = require('./vivid-element.cjs');
 const breadcrumbItem = require('./breadcrumb-item.cjs');
 const textAnchor_template = require('./text-anchor.template.cjs');
-const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
 const getClasses = (_) => classNames.classNames("base");
-const BreadcrumbItemTemplate = (context, definition) => {
-  const iconTag = context.tagFor(icon.Icon);
-  return index.html` <div role="listitem" class="${getClasses}">
-		${when.when((x) => x.text && !x.href, index.html`${(x) => x.text}`)}
+const BreadcrumbItemTemplate = (context) => {
+  const iconTag = context.tagFor(definition.Icon);
+  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,
-    index.html`${textAnchor_template.textAnchorTemplate(context)}`
+    vividElement.html`${textAnchor_template.textAnchorTemplate(context)}`
   )}
 		${when.when(
     (x) => x.separator,
-    index.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+    vividElement.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
   )}
 	</div>`;
 };
 
-const breadcrumbItemDefinition = breadcrumbItem.BreadcrumbItem.compose({
-  baseName: "breadcrumb-item",
-  template: BreadcrumbItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const breadcrumbItemDefinition = vividElement.defineVividComponent(
+  "breadcrumb-item",
+  breadcrumbItem.BreadcrumbItem,
+  BreadcrumbItemTemplate,
+  [definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const breadcrumbItemRegistries = [
-  breadcrumbItemDefinition(),
-  ...definition.iconRegistries
-];
-const registerBreadcrumbItem = index.registerFactory(breadcrumbItemRegistries);
+);
+const registerBreadcrumbItem = vividElement.createRegisterFunction(
+  breadcrumbItemDefinition
+);
 
 exports.breadcrumbItemDefinition = breadcrumbItemDefinition;
-exports.breadcrumbItemRegistries = breadcrumbItemRegistries;
 exports.registerBreadcrumbItem = registerBreadcrumbItem;

package/shared/definition9.js

@@ -1,15 +1,14 @@
-import { h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
+import { I as Icon, i as iconDefinition } from './definition27.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 { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
 
 const getClasses = (_) => classNames("base");
-const BreadcrumbItemTemplate = (context, definition) => {
+const BreadcrumbItemTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html` <div role="listitem" class="${getClasses}">
 		${when((x) => x.text && !x.href, html`${(x) => x.text}`)}
@@ -24,18 +23,20 @@ const BreadcrumbItemTemplate = (context, definition) => {
 	</div>`;
 };
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
-  baseName: "breadcrumb-item",
-  template: BreadcrumbItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const breadcrumbItemDefinition = defineVividComponent(
+  "breadcrumb-item",
+  BreadcrumbItem,
+  BreadcrumbItemTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const breadcrumbItemRegistries = [
-  breadcrumbItemDefinition(),
-  ...iconRegistries
-];
-const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
+);
+const registerBreadcrumbItem = createRegisterFunction(
+  breadcrumbItemDefinition
+);
 
-export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };
+export { breadcrumbItemDefinition as b, registerBreadcrumbItem as r };

package/shared/design-system/createRegisterFunction.d.ts

@@ -0,0 +1,2 @@
+import type { VividComponentDefinition } from './defineVividComponent';
+export declare const createRegisterFunction: (definition: VividComponentDefinition) => (prefix?: string) => void;

package/shared/design-system/defineVividComponent.d.ts

@@ -0,0 +1,15 @@
+import type { Constructable, PartialFASTElementDefinition, ViewTemplate } from '@microsoft/fast-element';
+export type TemplateOrResolveFn = ViewTemplate | ((context: VividElementDefinitionContext) => ViewTemplate);
+export type VividElementDefinitionContext = {
+    tagFor(type: Constructable): string;
+    tagForNonDependency(name: string): string;
+};
+export type Options = Pick<PartialFASTElementDefinition, 'styles' | 'attributes' | 'shadowOptions' | 'elementOptions'>;
+export type VividComponentDefinition = {
+    name: string;
+    type: Constructable;
+    template: TemplateOrResolveFn;
+    dependencies: VividComponentDefinition[];
+    options: Options;
+};
+export declare const defineVividComponent: (name: string, type: Constructable, template: TemplateOrResolveFn, dependencies: VividComponentDefinition[], options: Options) => VividComponentDefinition;

package/shared/{localization.js → direction.js}

@@ -7,16 +7,6 @@ var Direction$1;
     Direction["rtl"] = "rtl";
 })(Direction$1 || (Direction$1 = {}));
 
-/**
- * a method to determine the current localization direction of the view
- * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
- * @public
- */
-const getDirection = (rootNode) => {
-    const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction$1.rtl : Direction$1.ltr;
-};
-
 /**
  * Expose ltr and rtl strings
  */
@@ -26,4 +16,14 @@ var Direction;
     Direction["rtl"] = "rtl";
 })(Direction || (Direction = {}));
 
-export { Direction as D, getDirection as g };
+/**
+ * a method to determine the current localization direction of the view
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @public
+ */
+const getDirection = (rootNode) => {
+    const dirNode = rootNode.closest("[dir]");
+    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
+};
+
+export { Direction$1 as D, getDirection as g };

package/shared/dom.cjs

@@ -6,18 +6,5 @@
 function isHTMLElement(...args) {
     return args.every((arg) => arg instanceof HTMLElement);
 }
-/**
- * Returns all displayed elements inside of a root node that match a provided selector
- */
-function getDisplayedNodes(rootNode, selector) {
-    if (!rootNode || !selector || !isHTMLElement(rootNode)) {
-        return;
-    }
-    const nodes = Array.from(rootNode.querySelectorAll(selector));
-    // offsetParent will be null if the element isn't currently displayed,
-    // so this will allow us to operate only on visible nodes
-    return nodes.filter((node) => node.offsetParent !== null);
-}
 
-exports.getDisplayedNodes = getDisplayedNodes;
 exports.isHTMLElement = isHTMLElement;

package/shared/dom.js

@@ -4,17 +4,5 @@
 function isHTMLElement(...args) {
     return args.every((arg) => arg instanceof HTMLElement);
 }
-/**
- * Returns all displayed elements inside of a root node that match a provided selector
- */
-function getDisplayedNodes(rootNode, selector) {
-    if (!rootNode || !selector || !isHTMLElement(rootNode)) {
-        return;
-    }
-    const nodes = Array.from(rootNode.querySelectorAll(selector));
-    // offsetParent will be null if the element isn't currently displayed,
-    // so this will allow us to operate only on visible nodes
-    return nodes.filter((node) => node.offsetParent !== null);
-}
 
-export { getDisplayedNodes as g, isHTMLElement as i };
+export { isHTMLElement as i };