@peektravel/app-utilities 0.5.2 → 0.5.4

package/dist/ui/index.cjs

@@ -162,9 +162,43 @@ function classes(...parts) {
 function reflectControlValue(control, value) {
   if (control && control.value !== value) control.value = value;
 }
+function attrNameFor(propName) {
+  return propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function reflectToAttribute(el, attr, value) {
+  if (value === null || value === void 0 || value === false) {
+    el.removeAttribute(attr);
+  } else if (value === true) {
+    el.setAttribute(attr, "");
+  } else if (typeof value === "object") {
+    el.setAttribute(attr, JSON.stringify(value));
+  } else {
+    el.setAttribute(attr, String(value));
+  }
+}
+function addReactSafeSetters(ctor) {
+  const observed = new Set(
+    ctor.observedAttributes ?? []
+  );
+  let proto = ctor.prototype;
+  while (proto && proto !== OdyElement.prototype && proto !== HTMLElement.prototype && proto !== Object.prototype) {
+    for (const [name, desc] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+      if (typeof desc.get !== "function" || desc.set) continue;
+      const attr = attrNameFor(name);
+      const set = observed.has(attr) ? function reflectingSetter(value) {
+        reflectToAttribute(this, attr, value);
+      } : function ignoringSetter() {
+      };
+      Object.defineProperty(proto, name, { ...desc, set });
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+}
 function define(tag, ctor) {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get(tag)) customElements.define(tag, ctor);
+  if (customElements.get(tag)) return;
+  addReactSafeSetters(ctor);
+  customElements.define(tag, ctor);
 }
 
 // src/ui/icons-data.ts
@@ -1960,6 +1994,15 @@ var OdyCheckboxGroup = class extends OdyElement {
   get options() {
     return parseOptions2(this.attr("options"));
   }
+  /**
+   * Accepts an array of `{ label, value }` and stores it as the JSON `options`
+   * attribute. Mirrors `<ody-dropdown-*>` so `el.options = [...]` works across
+   * the data-driven elements. `options` is observed, so this triggers a
+   * re-render via `attributeChangedCallback`.
+   */
+  set options(next) {
+    this.setAttribute("options", JSON.stringify(Array.isArray(next) ? next : []));
+  }
   render() {
     const size = this.attr("size", "small");
     const isDisabled = this.flag("disabled");