@vonage/vivid 4.17.0 → 4.18.0

package/option/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition35.cjs');
+const definition = require('../shared/definition36.cjs');
 
 definition.registerOption();

package/option/index.js

@@ -1,3 +1,3 @@
-import { r as registerOption } from '../shared/definition35.js';
+import { r as registerOption } from '../shared/definition36.js';
 
 registerOption();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.17.0",
+	"version": "4.18.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/pagination/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition36.cjs');
+const definition = require('../shared/definition37.cjs');
 
 definition.registerPagination();

package/pagination/index.js

@@ -1,3 +1,3 @@
-import { r as registerPagination } from '../shared/definition36.js';
+import { r as registerPagination } from '../shared/definition37.js';
 
 registerPagination();

package/popup/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition64.cjs');
+const definition = require('../shared/definition65.cjs');
 
 definition.registerPopup();

package/popup/index.js

@@ -1,3 +1,3 @@
-import { r as registerPopup } from '../shared/definition64.js';
+import { r as registerPopup } from '../shared/definition65.js';
 
 registerPopup();

package/progress/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition38.cjs');
+const definition = require('../shared/definition39.cjs');
 
 definition.registerProgress();

package/progress/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgress } from '../shared/definition38.js';
+import { r as registerProgress } from '../shared/definition39.js';
 
 registerProgress();

package/progress-ring/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition37.cjs');
+const definition = require('../shared/definition38.cjs');
 
 definition.registerProgressRing();

package/progress-ring/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgressRing } from '../shared/definition37.js';
+import { r as registerProgressRing } from '../shared/definition38.js';
 
 registerProgressRing();

package/radio/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition40.cjs');
+const definition = require('../shared/definition41.cjs');
 
 definition.registerRadio();

package/radio/index.js

@@ -1,3 +1,3 @@
-import { a as registerRadio } from '../shared/definition40.js';
+import { a as registerRadio } from '../shared/definition41.js';
 
 registerRadio();

package/radio-group/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition39.cjs');
+const definition = require('../shared/definition40.cjs');
 
 definition.registerRadioGroup();

package/radio-group/index.js

@@ -1,3 +1,3 @@
-import { a as registerRadioGroup } from '../shared/definition39.js';
+import { a as registerRadioGroup } from '../shared/definition40.js';
 
 registerRadioGroup();

package/range-slider/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition41.cjs');
+const definition = require('../shared/definition42.cjs');
 
 definition.registerRangeSlider();

package/range-slider/index.js

@@ -1,3 +1,3 @@
-import { a as registerRangeSlider } from '../shared/definition41.js';
+import { a as registerRangeSlider } from '../shared/definition42.js';
 
 registerRangeSlider();

package/rich-text-editor/index.cjs

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

package/rich-text-editor/index.js

@@ -1,3 +1,3 @@
-import { a as registerRichTextEditor } from '../shared/definition42.js';
+import { a as registerRichTextEditor } from '../shared/definition43.js';
 
 registerRichTextEditor();

package/searchable-select/index.cjs

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

package/searchable-select/index.js

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

package/select/index.cjs

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

package/select/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelect } from '../shared/definition44.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/definition45.cjs');
+const definition = require('../shared/definition46.cjs');
 
 definition.registerSelectableBox();

package/selectable-box/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelectableBox } from '../shared/definition45.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');
 

package/shared/affix.js

@@ -1,4 +1,4 @@
-import { I as Icon } from './definition27.js';
+import { I as Icon } from './definition28.js';
 import { s as slotted } from './slotted.js';
 import { h as html, a as attr } from './vivid-element.js';
 

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 };