@vonage/vivid 4.16.2 → 4.18.0

package/select/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition43.cjs');
+const definition = require('../shared/definition45.cjs');
 
 definition.registerSelect();

package/select/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelect } from '../shared/definition43.js';
+import { r as registerSelect } from '../shared/definition45.js';
 
 registerSelect();

package/selectable-box/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition44.cjs');
+const definition = require('../shared/definition46.cjs');
 
 definition.registerSelectableBox();

package/selectable-box/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelectableBox } from '../shared/definition44.js';
+import { r as registerSelectableBox } from '../shared/definition46.js';
 
 registerSelectableBox();

package/shared/Reflector.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+
+class Reflector {
+  #reflectedProperties = /* @__PURE__ */ new Map();
+  #source;
+  #target;
+  constructor(source, target) {
+    this.#source = source;
+    this.#target = target;
+  }
+  attribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "attribute",
+      destination: attributeName
+    });
+  }
+  booleanAttribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "boolean-attribute",
+      destination: attributeName
+    });
+  }
+  property(propertyName, targetProperty, skipIfEqual = false) {
+    this.#addReflectedProperty(propertyName, {
+      type: "property",
+      destination: targetProperty,
+      skipIfEqual
+    });
+  }
+  destroy() {
+    const notifier = vividElement.Observable.getNotifier(this.#source);
+    for (const prop of this.#reflectedProperties.keys()) {
+      notifier.unsubscribe(this.#propertyChangeHandler, prop);
+    }
+    this.#reflectedProperties.clear();
+  }
+  #addReflectedProperty(name, reflected) {
+    this.#reflectedProperties.set(name, reflected);
+    const notifier = vividElement.Observable.getNotifier(this.#source);
+    notifier.subscribe(this.#propertyChangeHandler, name);
+    this.#propertyChangeHandler.handleChange(this.#source, name);
+  }
+  #propertyChangeHandler = {
+    handleChange: (source, propertyName) => {
+      const reflectedProperty = this.#reflectedProperties.get(propertyName);
+      const value = source[propertyName];
+      switch (reflectedProperty.type) {
+        case "boolean-attribute":
+          vividElement.DOM.setBooleanAttribute(
+            this.#target,
+            reflectedProperty.destination,
+            Boolean(value)
+          );
+          break;
+        case "attribute":
+          vividElement.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          break;
+        case "property":
+          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
+            return;
+          }
+          this.#target[reflectedProperty.destination] = value;
+          break;
+      }
+    }
+  };
+}
+
+exports.Reflector = Reflector;

package/shared/Reflector.js

@@ -0,0 +1,69 @@
+import { O as Observable, D as DOM } from './vivid-element.js';
+
+class Reflector {
+  #reflectedProperties = /* @__PURE__ */ new Map();
+  #source;
+  #target;
+  constructor(source, target) {
+    this.#source = source;
+    this.#target = target;
+  }
+  attribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "attribute",
+      destination: attributeName
+    });
+  }
+  booleanAttribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "boolean-attribute",
+      destination: attributeName
+    });
+  }
+  property(propertyName, targetProperty, skipIfEqual = false) {
+    this.#addReflectedProperty(propertyName, {
+      type: "property",
+      destination: targetProperty,
+      skipIfEqual
+    });
+  }
+  destroy() {
+    const notifier = Observable.getNotifier(this.#source);
+    for (const prop of this.#reflectedProperties.keys()) {
+      notifier.unsubscribe(this.#propertyChangeHandler, prop);
+    }
+    this.#reflectedProperties.clear();
+  }
+  #addReflectedProperty(name, reflected) {
+    this.#reflectedProperties.set(name, reflected);
+    const notifier = Observable.getNotifier(this.#source);
+    notifier.subscribe(this.#propertyChangeHandler, name);
+    this.#propertyChangeHandler.handleChange(this.#source, name);
+  }
+  #propertyChangeHandler = {
+    handleChange: (source, propertyName) => {
+      const reflectedProperty = this.#reflectedProperties.get(propertyName);
+      const value = source[propertyName];
+      switch (reflectedProperty.type) {
+        case "boolean-attribute":
+          DOM.setBooleanAttribute(
+            this.#target,
+            reflectedProperty.destination,
+            Boolean(value)
+          );
+          break;
+        case "attribute":
+          DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          break;
+        case "property":
+          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
+            return;
+          }
+          this.#target[reflectedProperty.destination] = value;
+          break;
+      }
+    }
+  };
+}
+
+export { Reflector as R };

package/shared/affix.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition28.cjs');
 const slotted = require('./slotted.cjs');
 const vividElement = require('./vivid-element.cjs');
 
@@ -38,9 +38,7 @@ const IconWrapper = {
   Span: true
 };
 const IconAriaHidden = {
-  Hidden: "true",
-  Visible: "false"
-};
+  Hidden: "true"};
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {

package/shared/affix.js

@@ -1,6 +1,6 @@
-import { I as Icon } from './definition27.js';
+import { I as Icon } from './definition28.js';
 import { s as slotted } from './slotted.js';
-import { a as attr, h as html } from './vivid-element.js';
+import { h as html, a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -36,9 +36,7 @@ const IconWrapper = {
   Span: true
 };
 const IconAriaHidden = {
-  Hidden: "true",
-  Visible: "false"
-};
+  Hidden: "true"};
 const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(Icon);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {

package/shared/anchor.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-const ariaGlobal = require('./aria-global.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
@@ -47,13 +45,5 @@ __decorateClass([
 __decorateClass([
   vividElement.attr
 ], Anchor.prototype, "type");
-class DelegatesARIALink {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded");
-applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Anchor, DelegatesARIALink);
 
 exports.Anchor = Anchor;

package/shared/anchor.js

@@ -1,5 +1,3 @@
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { a as applyMixins } from './apply-mixins.js';
 import { a as attr } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
@@ -45,13 +43,5 @@ __decorateClass([
 __decorateClass([
   attr
 ], Anchor.prototype, "type");
-class DelegatesARIALink {
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ attribute: "aria-expanded" })
-], DelegatesARIALink.prototype, "ariaExpanded");
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(Anchor, DelegatesARIALink);
 
 export { Anchor as A };

package/shared/anchored.cjs

@@ -12,8 +12,8 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-function anchored(constructor) {
-  class Decorated extends constructor {
+const Anchored = (Base) => {
+  class AnchoredElement extends Base {
     /**
      * @internal
      */
@@ -80,16 +80,19 @@ function anchored(constructor) {
   }
   __decorateClass([
     vividElement.attr
-  ], Decorated.prototype, "anchor");
+  ], AnchoredElement.prototype, "anchor");
   __decorateClass([
     vividElement.observable
-  ], Decorated.prototype, "_slottedAnchor");
+  ], AnchoredElement.prototype, "_slottedAnchor");
   __decorateClass([
     vividElement.observable
-  ], Decorated.prototype, "_anchorEl");
-  return Decorated;
-}
-const anchorSlotTemplateFactory = () => vividElement.html`<slot name="anchor" ${slotted.slotted("_slottedAnchor")}></slot>`;
+  ], AnchoredElement.prototype, "_anchorEl");
+  return AnchoredElement;
+};
+const anchorSlotTemplateFactory = () => vividElement.html`<slot
+		name="anchor"
+		${slotted.slotted("_slottedAnchor")}
+	></slot>`;
 
+exports.Anchored = Anchored;
 exports.anchorSlotTemplateFactory = anchorSlotTemplateFactory;
-exports.anchored = anchored;

package/shared/anchored.js

@@ -1,4 +1,4 @@
-import { h as html, a as attr, o as observable, D as DOM } from './vivid-element.js';
+import { h as html, D as DOM, a as attr, o as observable } from './vivid-element.js';
 import { s as slotted } from './slotted.js';
 
 var __defProp = Object.defineProperty;
@@ -10,8 +10,8 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-function anchored(constructor) {
-  class Decorated extends constructor {
+const Anchored = (Base) => {
+  class AnchoredElement extends Base {
     /**
      * @internal
      */
@@ -78,15 +78,18 @@ function anchored(constructor) {
   }
   __decorateClass([
     attr
-  ], Decorated.prototype, "anchor");
+  ], AnchoredElement.prototype, "anchor");
   __decorateClass([
     observable
-  ], Decorated.prototype, "_slottedAnchor");
+  ], AnchoredElement.prototype, "_slottedAnchor");
   __decorateClass([
     observable
-  ], Decorated.prototype, "_anchorEl");
-  return Decorated;
-}
-const anchorSlotTemplateFactory = () => html`<slot name="anchor" ${slotted("_slottedAnchor")}></slot>`;
+  ], AnchoredElement.prototype, "_anchorEl");
+  return AnchoredElement;
+};
+const anchorSlotTemplateFactory = () => html`<slot
+		name="anchor"
+		${slotted("_slottedAnchor")}
+	></slot>`;
 
-export { anchored as a, anchorSlotTemplateFactory as b };
+export { Anchored as A, anchorSlotTemplateFactory as a };